├── app ├── .gitkeep ├── components │ └── photo-swipe.js └── templates │ └── components │ └── photo-swipe.hbs ├── addon ├── .gitkeep └── components │ └── photo-swipe.js ├── vendor └── .gitkeep ├── tests ├── unit │ ├── .gitkeep │ └── components │ │ └── photo-swipe-test.js ├── dummy │ ├── public │ │ ├── .gitkeep │ │ ├── robots.txt │ │ └── crossdomain.xml │ ├── app │ │ ├── helpers │ │ │ └── .gitkeep │ │ ├── models │ │ │ └── .gitkeep │ │ ├── routes │ │ │ ├── .gitkeep │ │ │ └── application.js │ │ ├── views │ │ │ └── .gitkeep │ │ ├── components │ │ │ └── .gitkeep │ │ ├── controllers │ │ │ ├── .gitkeep │ │ │ └── application.js │ │ ├── templates │ │ │ ├── components │ │ │ │ └── .gitkeep │ │ │ └── application.hbs │ │ ├── styles │ │ │ └── app.css │ │ ├── router.js │ │ ├── app.js │ │ └── index.html │ └── config │ │ └── environment.js ├── helpers │ ├── resolver.js │ └── start-app.js ├── test-helper.js ├── acceptance │ └── ember-cli-photoswipe-test.js ├── index.html └── .jshintrc ├── .bowerrc ├── blueprints ├── .jshintrc └── photoswipe │ └── index.js ├── config ├── environment.js └── ember-try.js ├── testem.json ├── .ember-cli ├── .gitignore ├── .travis.yml ├── ember-cli-build.js ├── bower.json ├── .editorconfig ├── .jshintrc ├── Brocfile.js ├── index.js ├── LICENSE.md ├── package.json └── README.md /app/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /addon/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /vendor/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/unit/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/public/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/helpers/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/models/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/views/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/components/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tests/dummy/public/robots.txt: -------------------------------------------------------------------------------- 1 | # http://www.robotstxt.org 2 | User-agent: * 3 | -------------------------------------------------------------------------------- /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components", 3 | "analytics": false 4 | } 5 | -------------------------------------------------------------------------------- /blueprints/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | "console" 4 | ], 5 | "node": true 6 | } 7 | -------------------------------------------------------------------------------- /tests/dummy/app/routes/application.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | 3 | export default Ember.Route.extend(); 4 | -------------------------------------------------------------------------------- /tests/dummy/app/styles/app.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 20px; 3 | } 4 | 5 | .thumb { 6 | height: 150px; 7 | } 8 | -------------------------------------------------------------------------------- /config/environment.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | module.exports = function(/* environment, appConfig */) { 4 | return { }; 5 | }; 6 | -------------------------------------------------------------------------------- /app/components/photo-swipe.js: -------------------------------------------------------------------------------- 1 | import PhotoSwipe from 'ember-cli-photoswipe/components/photo-swipe'; 2 | 3 | export default PhotoSwipe; 4 | -------------------------------------------------------------------------------- /testem.json: -------------------------------------------------------------------------------- 1 | { 2 | "framework": "qunit", 3 | "test_page": "tests/index.html?hidepassed", 4 | "disable_watching": true, 5 | "launch_in_ci": [ 6 | "PhantomJS" 7 | ], 8 | "launch_in_dev": [ 9 | "PhantomJS", 10 | "Chrome" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /tests/dummy/app/router.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import config from './config/environment'; 3 | 4 | var Router = Ember.Router.extend({ 5 | location: config.locationType 6 | }); 7 | 8 | Router.map(function() { 9 | }); 10 | 11 | export default Router; 12 | -------------------------------------------------------------------------------- /.ember-cli: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | Ember CLI sends analytics information by default. The data is completely 4 | anonymous, but there are times when you might want to disable this behavior. 5 | 6 | Setting `disableAnalytics` to true will prevent any data from being sent. 7 | */ 8 | "disableAnalytics": false 9 | } 10 | -------------------------------------------------------------------------------- /tests/helpers/resolver.js: -------------------------------------------------------------------------------- 1 | import Resolver from 'ember/resolver'; 2 | import config from '../../config/environment'; 3 | 4 | var resolver = Resolver.create(); 5 | 6 | resolver.namespace = { 7 | modulePrefix: config.modulePrefix, 8 | podModulePrefix: config.podModulePrefix 9 | }; 10 | 11 | export default resolver; 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | 7 | # dependencies 8 | /node_modules 9 | /bower_components 10 | 11 | # misc 12 | /.sass-cache 13 | /connect.lock 14 | /coverage/* 15 | /libpeerconnection.log 16 | npm-debug.log 17 | testem.log 18 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | --- 2 | language: node_js 3 | node_js: 4 | - "0.12" 5 | 6 | sudo: false 7 | 8 | cache: 9 | directories: 10 | - node_modules 11 | 12 | before_install: 13 | - export PATH=/usr/local/phantomjs-2.0.0/bin:$PATH 14 | - "npm config set spin false" 15 | - "npm install -g npm@^2" 16 | 17 | install: 18 | - npm install -g bower 19 | - npm install 20 | - bower install 21 | - ember g photoswipe 22 | 23 | script: 24 | - npm test 25 | -------------------------------------------------------------------------------- /blueprints/photoswipe/index.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var fs = require('fs'); 4 | 5 | var PHOTOSWIPE_VERSION = '4.1.0'; 6 | 7 | module.exports = { 8 | 9 | description: 'Adds Photoswipe lib from bower and generate custom src', 10 | 11 | normalizeEntityName: function() {/* generator with no args */}, 12 | 13 | afterInstall: function(options) { 14 | return this.addBowerPackageToProject('photoswipe', PHOTOSWIPE_VERSION); 15 | } 16 | 17 | }; 18 | -------------------------------------------------------------------------------- /tests/dummy/app/app.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import Resolver from 'ember/resolver'; 3 | import loadInitializers from 'ember/load-initializers'; 4 | import config from './config/environment'; 5 | 6 | var App; 7 | 8 | Ember.MODEL_FACTORY_INJECTIONS = true; 9 | 10 | App = Ember.Application.extend({ 11 | modulePrefix: config.modulePrefix, 12 | podModulePrefix: config.podModulePrefix, 13 | Resolver: Resolver 14 | }); 15 | 16 | loadInitializers(App, config.modulePrefix); 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /tests/test-helper.js: -------------------------------------------------------------------------------- 1 | import resolver from './helpers/resolver'; 2 | import { 3 | setResolver 4 | } from 'ember-qunit'; 5 | 6 | setResolver(resolver); 7 | 8 | document.write('
'); 9 | 10 | QUnit.config.urlConfig.push({ id: 'nocontainer', label: 'Hide container'}); 11 | var containerVisibility = QUnit.urlParams.nocontainer ? 'hidden' : 'visible'; 12 | document.getElementById('ember-testing-container').style.visibility = containerVisibility; 13 | -------------------------------------------------------------------------------- /tests/dummy/app/templates/application.hbs: -------------------------------------------------------------------------------- 1 |

Photoswipe Examples

2 | 3 | 4 | 5 | 6 | 7 | {{photo-swipe gallery=myGallery options=psOpts items=items}} 8 | 9 |
10 | 11 | 12 |

Example when passing a block

13 | 14 | {{#photo-swipe options=psTwoOpts items=items as |img|}} 15 | 16 | {{img.title}} 17 | 18 | {{/photo-swipe}} 19 | -------------------------------------------------------------------------------- /ember-cli-build.js: -------------------------------------------------------------------------------- 1 | /* global require, module */ 2 | var EmberApp = require('ember-cli/lib/broccoli/ember-addon'); 3 | 4 | module.exports = function(defaults) { 5 | var app = new EmberApp(defaults, { 6 | // Add options here 7 | }); 8 | 9 | /* 10 | This build file specifes the options for the dummy test app of this 11 | addon, located in `/tests/dummy` 12 | This build file does *not* influence how the addon or the app using it 13 | behave. You most likely want to be modifying `./index.js` or app's build file 14 | */ 15 | 16 | return app.toTree(); 17 | }; 18 | -------------------------------------------------------------------------------- /tests/helpers/start-app.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import Application from '../../app'; 3 | import config from '../../config/environment'; 4 | 5 | export default function startApp(attrs) { 6 | var application; 7 | 8 | var attributes = Ember.merge({}, config.APP); 9 | attributes = Ember.merge(attributes, attrs); // use defaults, but you can override; 10 | 11 | Ember.run(function() { 12 | application = Application.create(attributes); 13 | application.setupForTesting(); 14 | application.injectTestHelpers(); 15 | }); 16 | 17 | return application; 18 | } 19 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-cli-photoswipe", 3 | "dependencies": { 4 | "ember": "1.13.3", 5 | "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3", 6 | "ember-cli-test-loader": "ember-cli-test-loader#0.1.3", 7 | "ember-data": "1.13.5", 8 | "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5", 9 | "ember-qunit": "0.4.1", 10 | "ember-qunit-notifications": "0.0.7", 11 | "ember-resolver": "~0.1.18", 12 | "jquery": "1.11.1", 13 | "loader.js": "ember-cli/loader.js#3.2.0", 14 | "qunit": "~1.17.1", 15 | "photoswipe": "4.1.0" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | indent_style = space 14 | indent_size = 2 15 | 16 | [*.js] 17 | indent_style = space 18 | indent_size = 2 19 | 20 | [*.hbs] 21 | indent_style = space 22 | indent_size = 2 23 | 24 | [*.css] 25 | indent_style = space 26 | indent_size = 2 27 | 28 | [*.html] 29 | indent_style = space 30 | indent_size = 2 31 | 32 | [*.{diff,md}] 33 | trim_trailing_whitespace = false 34 | -------------------------------------------------------------------------------- /tests/dummy/public/crossdomain.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 15 | 16 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | "document", 4 | "window", 5 | "-Promise" 6 | ], 7 | "browser": true, 8 | "boss": true, 9 | "curly": true, 10 | "debug": false, 11 | "devel": true, 12 | "eqeqeq": true, 13 | "evil": true, 14 | "forin": false, 15 | "immed": false, 16 | "laxbreak": false, 17 | "newcap": true, 18 | "noarg": true, 19 | "node": true, 20 | "noempty": false, 21 | "nonew": false, 22 | "nomen": false, 23 | "onevar": false, 24 | "plusplus": false, 25 | "regexp": false, 26 | "undef": true, 27 | "sub": true, 28 | "strict": false, 29 | "white": false, 30 | "eqnull": true, 31 | "esnext": true, 32 | "unused": true 33 | } 34 | -------------------------------------------------------------------------------- /tests/dummy/app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dummy 7 | 8 | 9 | 10 | {{content-for 'head'}} 11 | 12 | 13 | 14 | 15 | {{content-for 'head-footer'}} 16 | 17 | 18 | {{content-for 'body'}} 19 | 20 | 21 | 22 | 23 | {{content-for 'body-footer'}} 24 | 25 | 26 | -------------------------------------------------------------------------------- /config/ember-try.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | scenarios: [ 3 | { 4 | name: 'default', 5 | dependencies: { } 6 | }, 7 | { 8 | name: 'ember-release', 9 | dependencies: { 10 | 'ember': 'components/ember#release' 11 | }, 12 | resolutions: { 13 | 'ember': 'release' 14 | } 15 | }, 16 | { 17 | name: 'ember-beta', 18 | dependencies: { 19 | 'ember': 'components/ember#beta' 20 | }, 21 | resolutions: { 22 | 'ember': 'beta' 23 | } 24 | }, 25 | { 26 | name: 'ember-canary', 27 | dependencies: { 28 | 'ember': 'components/ember#canary' 29 | }, 30 | resolutions: { 31 | 'ember': 'canary' 32 | } 33 | } 34 | ] 35 | }; 36 | -------------------------------------------------------------------------------- /Brocfile.js: -------------------------------------------------------------------------------- 1 | /* jshint node: true */ 2 | /* global require, module */ 3 | 4 | var EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); 5 | 6 | var app = new EmberAddon(); 7 | 8 | // Use `app.import` to add additional libraries to the generated 9 | // output files. 10 | // 11 | // If you need to use different assets in different 12 | // environments, specify an object as the first parameter. That 13 | // object's keys should be the environment name and the values 14 | // should be the asset to use in that environment. 15 | // 16 | // If the library that you are including contains AMD or ES6 17 | // modules that you would like to import into your application 18 | // please specify an object with the list of modules as keys 19 | // along with the exports of each module as its value. 20 | 21 | module.exports = app.toTree(); 22 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* jshint node: true */ 2 | 'use strict'; 3 | 4 | var fs = require('fs'); 5 | var path = require('path'); 6 | var Funnel = require('broccoli-funnel'); 7 | 8 | module.exports = { 9 | name: 'ember-cli-photoswipe', 10 | 11 | included: function(app) { 12 | this.app = app; 13 | var psDir = app.bowerDirectory + '/photoswipe'; 14 | 15 | if (!process.env.EMBER_CLI_FASTBOOT) { 16 | app.import(psDir + '/dist/photoswipe.css'); 17 | app.import(psDir + '/dist/default-skin/default-skin.css'); 18 | app.import(psDir + '/dist/photoswipe.js'); 19 | app.import(psDir + '/dist/photoswipe-ui-default.min.js'); 20 | } 21 | }, 22 | 23 | treeForPublic: function() { 24 | var svgPath = path.join(this.app.bowerDirectory, 'photoswipe', 'dist', 'default-skin'); 25 | var publicTree = new Funnel(this.treeGenerator(svgPath), { 26 | srcDir: '/', 27 | destDir: '/assets', 28 | exclude: ['default-skin.css'] 29 | }); 30 | return publicTree; 31 | } 32 | }; 33 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /tests/acceptance/ember-cli-photoswipe-test.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import startApp from '../helpers/start-app'; 3 | 4 | var application; 5 | 6 | module('Acceptance: EmberCliPhotoswipe', { 7 | setup: function() { 8 | application = startApp(); 9 | }, 10 | teardown: function() { 11 | Ember.run(application, 'destroy'); 12 | } 13 | }); 14 | 15 | test('visiting /', function() { 16 | visit('/'); 17 | 18 | andThen(function() { 19 | equal(find('button.btn').length, 1, 'Page contains button'); 20 | click(find('button.btn')); 21 | 22 | equal(find('img.thumb').length, 2); 23 | }); 24 | 25 | andThen(function() { 26 | equal(find('.pswp__button--arrow--right').length, 2, 'Page contains arrow button'); 27 | click(find('.pswp__button--arrow--right').first()); 28 | }); 29 | 30 | andThen(function() { 31 | expect(find('.pswp__button--close').length, 1, 'Page contains close button'); 32 | click('.pswp__button--close'); 33 | }); 34 | 35 | andThen(function() { 36 | equal(find('button.change-btn').length, 1, 'Page contains change button'); 37 | click(find('button.change-btn')); 38 | }); 39 | 40 | andThen(function() { 41 | equal(find('img.thumb').length, 1); 42 | }); 43 | }); 44 | -------------------------------------------------------------------------------- /tests/dummy/app/controllers/application.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | 3 | export default Ember.Controller.extend({ 4 | // example 1 5 | psOpts: { 6 | index: 1 7 | }, 8 | 9 | items1: [ 10 | { 11 | src: 'http://placekitten.com/g/600/400', 12 | w: 600, 13 | h: 400, 14 | title: 'whooa' 15 | }, 16 | { 17 | src: 'http://placekitten.com/g/1200/900', 18 | w: 1200, 19 | h: 900 20 | } 21 | ], 22 | 23 | items2: [ 24 | { 25 | src: 'http://placekitten.com/g/60/40', 26 | w: 60, 27 | h: 40, 28 | title: 'kitties' 29 | } 30 | ], 31 | 32 | init() { 33 | this._super(...arguments); 34 | this.set('items', this.get('items1')); 35 | }, 36 | 37 | // actions 38 | actions: { 39 | initGallery() { 40 | this.get('myGallery').init(); 41 | }, 42 | 43 | changeItems() { 44 | if (this.get('items') === this.get('items1')) { 45 | console.log('changing to 2'); 46 | this.set('items', this.get('items2')); 47 | } else { 48 | console.log('changing to 1'); 49 | this.set('items', this.get('items1')); 50 | } 51 | } 52 | }, 53 | 54 | psTwoOpts: { 55 | hideShare: true 56 | } 57 | }); 58 | -------------------------------------------------------------------------------- /tests/dummy/config/environment.js: -------------------------------------------------------------------------------- 1 | /* jshint node: true */ 2 | 3 | module.exports = function(environment) { 4 | var ENV = { 5 | modulePrefix: 'dummy', 6 | environment: environment, 7 | baseURL: '/', 8 | locationType: 'auto', 9 | EmberENV: { 10 | FEATURES: { 11 | // Here you can enable experimental features on an ember canary build 12 | // e.g. 'with-controller': true 13 | } 14 | }, 15 | 16 | APP: { 17 | // Here you can pass flags/options to your application instance 18 | // when it is created 19 | } 20 | }; 21 | 22 | if (environment === 'development') { 23 | // ENV.APP.LOG_RESOLVER = true; 24 | // ENV.APP.LOG_ACTIVE_GENERATION = true; 25 | // ENV.APP.LOG_TRANSITIONS = true; 26 | // ENV.APP.LOG_TRANSITIONS_INTERNAL = true; 27 | // ENV.APP.LOG_VIEW_LOOKUPS = true; 28 | } 29 | 30 | if (environment === 'test') { 31 | // Testem prefers this... 32 | ENV.baseURL = '/'; 33 | ENV.locationType = 'none'; 34 | 35 | // keep test console output quieter 36 | ENV.APP.LOG_ACTIVE_GENERATION = false; 37 | ENV.APP.LOG_VIEW_LOOKUPS = false; 38 | 39 | ENV.APP.rootElement = '#ember-testing'; 40 | } 41 | 42 | if (environment === 'production') { 43 | ENV.baseURL = '/ember-cli-photoswipe' 44 | } 45 | 46 | return ENV; 47 | }; 48 | -------------------------------------------------------------------------------- /tests/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dummy Tests 7 | 8 | 9 | 10 | {{content-for 'head'}} 11 | {{content-for 'test-head'}} 12 | 13 | 14 | 15 | 16 | 32 | 33 | {{content-for 'head-footer'}} 34 | {{content-for 'test-head-footer'}} 35 | 36 | 37 | 38 | {{content-for 'body'}} 39 | {{content-for 'test-body'}} 40 | 41 | 42 | 43 | 44 | 45 | 46 | {{content-for 'body-footer'}} 47 | {{content-for 'test-body-footer'}} 48 | 49 | 50 | -------------------------------------------------------------------------------- /tests/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | "document", 4 | "window", 5 | "location", 6 | "setTimeout", 7 | "$", 8 | "-Promise", 9 | "QUnit", 10 | "define", 11 | "console", 12 | "equal", 13 | "notEqual", 14 | "notStrictEqual", 15 | "test", 16 | "asyncTest", 17 | "testBoth", 18 | "testWithDefault", 19 | "raises", 20 | "throws", 21 | "deepEqual", 22 | "start", 23 | "stop", 24 | "ok", 25 | "strictEqual", 26 | "module", 27 | "moduleFor", 28 | "moduleForComponent", 29 | "moduleForModel", 30 | "process", 31 | "expect", 32 | "visit", 33 | "exists", 34 | "fillIn", 35 | "click", 36 | "keyEvent", 37 | "triggerEvent", 38 | "find", 39 | "findWithAssert", 40 | "wait", 41 | "DS", 42 | "isolatedContainer", 43 | "startApp", 44 | "andThen", 45 | "currentURL", 46 | "currentPath", 47 | "currentRouteName" 48 | ], 49 | "node": false, 50 | "browser": false, 51 | "boss": true, 52 | "curly": false, 53 | "debug": false, 54 | "devel": false, 55 | "eqeqeq": true, 56 | "evil": true, 57 | "forin": false, 58 | "immed": false, 59 | "laxbreak": false, 60 | "newcap": true, 61 | "noarg": true, 62 | "noempty": false, 63 | "nonew": false, 64 | "nomen": false, 65 | "onevar": false, 66 | "plusplus": false, 67 | "regexp": false, 68 | "undef": true, 69 | "sub": true, 70 | "strict": false, 71 | "white": false, 72 | "eqnull": true, 73 | "esnext": true 74 | } 75 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-cli-photoswipe", 3 | "version": "1.2.0", 4 | "description": "Ember-cli adaptation of the popular photoswipe js library", 5 | "directories": { 6 | "doc": "doc", 7 | "test": "tests" 8 | }, 9 | "scripts": { 10 | "start": "ember server", 11 | "build": "ember build", 12 | "test": "ember test" 13 | }, 14 | "repository": "https://github.com/poetic/ember-cli-photoswipe", 15 | "engines": { 16 | "node": ">= 0.10.0" 17 | }, 18 | "author": "Daniel Ochoa ", 19 | "license": "MIT", 20 | "dependencies": { 21 | "ember-cli-babel": "^5.0.0", 22 | "broccoli-funnel": "^0.2.3" 23 | }, 24 | "devDependencies": { 25 | "broccoli-asset-rev": "^2.0.2", 26 | "ember-cli": "1.13.1", 27 | "ember-cli-app-version": "0.4.0", 28 | "ember-cli-dependency-checker": "^1.0.0", 29 | "ember-cli-github-pages": "0.0.2", 30 | "ember-cli-htmlbars": "0.7.9", 31 | "ember-cli-htmlbars-inline-precompile": "^0.1.1", 32 | "ember-cli-ic-ajax": "0.2.1", 33 | "ember-cli-inject-live-reload": "^1.3.0", 34 | "ember-cli-qunit": "0.3.15", 35 | "ember-cli-release": "0.2.3", 36 | "ember-cli-uglify": "^1.0.1", 37 | "ember-data": "1.13.5", 38 | "ember-disable-prototype-extensions": "^1.0.0", 39 | "ember-disable-proxy-controllers": "^1.0.0", 40 | "ember-export-application-global": "^1.0.2", 41 | "ember-try": "0.0.6", 42 | "express": "^4.13.1", 43 | "mkdirp": "^0.5.1" 44 | }, 45 | "keywords": [ 46 | "ember-addon", 47 | "photoswipe", 48 | "gallery", 49 | "ember", 50 | "lightbox", 51 | "photo", 52 | "image", 53 | "touch", 54 | "swipe", 55 | "zoom" 56 | ], 57 | "ember-addon": { 58 | "configPath": "tests/dummy/config", 59 | "defaultBlueprint": "photoswipe" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /tests/unit/components/photo-swipe-test.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import { 3 | moduleForComponent, 4 | test 5 | } from 'ember-qunit'; 6 | 7 | moduleForComponent('photo-swipe', 'PhotoSwipeComponent', { 8 | unit: true 9 | }); 10 | 11 | test('it renders', function() { 12 | expect(2); 13 | 14 | // creates the component instance 15 | var component = this.subject(); 16 | equal(component._state, 'preRender'); 17 | 18 | // renders the component to the page 19 | this.render(); 20 | equal(component._state, 'inDOM'); 21 | }); 22 | 23 | test('it renders the photoswipe template', function() { 24 | expect(1); 25 | this.render(); 26 | var component = this.subject(); 27 | var photoswipe = component.$('.pswp'); 28 | 29 | equal(photoswipe[0], component.get('pswpEl')); 30 | }); 31 | 32 | test('the gallery attribute should be empty on insert.', function() { 33 | expect(1); 34 | var component = this.subject(); 35 | 36 | Ember.run(function () { 37 | equal(component.get('gallery'), undefined, 'should not be set yet.'); 38 | }); 39 | }); 40 | 41 | test('the gallery attribute should be set when you pass items', function() { 42 | expect(2); 43 | 44 | Ember.run(() => { 45 | var component = this.subject(); 46 | component.set('items', [ 47 | { 48 | src: 'http://placekitten.com/g/600/400', 49 | w: 600, 50 | h: 400, 51 | title: 'whooa' 52 | }, 53 | { 54 | src: 'http://placekitten.com/g/1200/900', 55 | w: 1200, 56 | h: 900 57 | } 58 | ]); 59 | 60 | this.render(); 61 | 62 | var gallery = component.get('gallery'); 63 | ok(gallery); 64 | equal(typeof gallery, 'object'); 65 | }); 66 | }); 67 | 68 | test('the reinit action should be called when the gallery items change', function() { 69 | // reinit will be called 3 times in the test 70 | // Once when setting the setting the properties 71 | // Second when you render the Component 72 | // Third when you change the items array 73 | expect(6); 74 | 75 | Ember.run(()=> { 76 | var component = this.subject(); 77 | component.setProperties({ 78 | reinit: function(gallery){ 79 | ok(gallery); 80 | equal(typeof gallery, 'object'); 81 | }, 82 | items: [ 83 | { 84 | src: 'http://placekitten.com/g/600/400', 85 | w: 600, 86 | h: 400, 87 | title: 'whooa' 88 | }, 89 | { 90 | src: 'http://placekitten.com/g/1200/900', 91 | w: 1200, 92 | h: 900 93 | } 94 | ] 95 | }); 96 | 97 | this.render(); 98 | 99 | component.set('items', []); 100 | }); 101 | }); 102 | -------------------------------------------------------------------------------- /app/templates/components/photo-swipe.hbs: -------------------------------------------------------------------------------- 1 | {{#if hasBlock}} 2 | {{#if items}} 3 | {{#each items as |item index|}} 4 | 5 | {{yield item index}} 6 | 7 | {{/each}} 8 | {{else}} 9 | {{!-- For backward compatability of block usage up to ember-cli-photoswipe versions 1.1.0 --}} 10 | {{yield}} 11 | {{/if}} 12 | {{/if}} 13 | 14 | 85 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ember-cli-photoswipe [![Build Status](https://travis-ci.org/poetic/ember-cli-photoswipe.svg)](https://travis-ci.org/poetic/ember-cli-photoswipe) 2 | 3 | Ember-cli Addon adaptation of the popular photo gallery library 4 | [PhotoSwipe](https://github.com/dimsemenov/PhotoSwipe). 5 | 6 | ## Usage 7 | 8 | ```html 9 | {{#photo-swipe items=model as |img|}} 10 | {{img.title}} 11 | {{/photo-swipe}} 12 | ``` 13 | 14 | By wrapping your gallery in the component, the addon will take care of 15 | instantiating PhotoSwipe for you and for calculating the thumbnail bounds so 16 | you get the nice zoom in/out animations right out of the box. Easy, right? 17 | 18 | See `tests/dummy/app/templates/application.hbs` as an example of this. 19 | 20 | The `items` property is required and an array of objects should be 21 | passed to it. PhotoSwipe expects these items to have the following structure: 22 | 23 | ```javascript 24 | [ 25 | { 26 | src: 'http://placekitten.com/g/600/400', 27 | w: 600, 28 | h: 400, 29 | title: 'whooa', 30 | msrc: '(optional) larger image' 31 | } 32 | ] 33 | ``` 34 | 35 | If you want to instantiate a PhotoSwipe gallery from an action instead of a 36 | thumbnail, you can also do the following: 37 | 38 | ```javascript 39 | {{photo-swipe gallery=myGallery options=psOpts items=items}} 40 | ``` 41 | 42 | And then you can initialize it through an action in your controller like this: 43 | 44 | ``` javascript 45 | actions: { 46 | initGallery: function() { 47 | this.get('myGallery').init(); 48 | } 49 | } 50 | ``` 51 | 52 | Any property bound to `gallery` will become the actual gallery object. 53 | This is used to instantiate PhotoSwipe and to interact with the live instance. 54 | 55 | Any PhotoSwipe options can be passed to the `options` property of the component. 56 | For now the history module is disabled since it breaks ember routing. 57 | 58 | More functionality is on the way, this is a work in progress. You can find 59 | PhotoSwipe documentation [here](http://photoswipe.com/). 60 | 61 | ## More Options 62 | 63 | You can pass the following extra options to the options property in the 64 | PhotoSwipe component to hide PhotoSwipe buttons (default to false): 65 | 66 | 1. `hideClose` 67 | 2. `hideShare` 68 | 3. `hideToggleFullScreen` 69 | 4. `hideZoomInOut` 70 | 71 | ## Contributing 72 | 73 | If you have ideas or feature needs that could be implemented, just submit an issue 74 | or pull request. 75 | 76 | ## Installation 77 | 78 | ###### Ember-cli >= 0.1.5 79 | As easy as running `ember install:addon ember-cli-photoswipe`, which will also 80 | run the generator. 81 | 82 | ###### Ember-cli < 0.1.5 83 | For versions under 0.1.5 you need to run `npm install ember-cli-photoswipe 84 | --save-dev`. 85 | 86 | ## Running 87 | 88 | To run the dummy app: 89 | 90 | * `git clone https://github.com/poetic/ember-cli-photoswipe.git` 91 | * `ember server` 92 | * Visit your app at http://localhost:4200. 93 | 94 | ## Running Tests 95 | 96 | * `ember test` 97 | * `ember test --server` 98 | 99 | ## Building 100 | 101 | * `ember build` 102 | 103 | For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/). 104 | -------------------------------------------------------------------------------- /addon/components/photo-swipe.js: -------------------------------------------------------------------------------- 1 | /* global PhotoSwipe */ 2 | /* global PhotoSwipeUI_Default */ 3 | 4 | import Em from 'ember'; 5 | 6 | var run = Em.run; 7 | 8 | export default Em.Component.extend({ 9 | 10 | onInsert: Em.on('didInsertElement', function() { 11 | 12 | Em.run.scheduleOnce('afterRender', this, function() { 13 | this.set('pswpEl', this.$('.pswp')[0]); 14 | this.set('pswpTheme', PhotoSwipeUI_Default); 15 | 16 | this._buildOptions(); 17 | 18 | if (this.get('items')) { 19 | return this._initItemGallery(); 20 | } 21 | 22 | /** 23 | * DEPRECATED 24 | * 25 | * Code exists for backward compatibility of block usage 26 | * up to ember-cli-photoswipe versions 1.0.1. 27 | */ 28 | return this._calculateItems(); 29 | /** 30 | * END DEPRECATED 31 | */ 32 | }); 33 | }), 34 | 35 | _buildOptions: function(getThumbBoundsFn) { 36 | var reqOpts = { 37 | history: false 38 | }; 39 | 40 | if (Em.isPresent(getThumbBoundsFn)) { 41 | reqOpts.getThumbBoundsFn = getThumbBoundsFn; 42 | } 43 | 44 | var options = Em.merge(reqOpts, this.get('options') || {}); 45 | this.set('options', options); 46 | }, 47 | 48 | _initItemGallery: function() { 49 | this.set('gallery', new PhotoSwipe( 50 | this.get('pswpEl'), 51 | this.get('pswpTheme'), 52 | this.get('items'), 53 | this.get('options') 54 | )); 55 | if (this.get('reinit')) { 56 | this.sendAction('reinit', this.get('gallery')); 57 | } 58 | this._reInitOnClose(); 59 | }, 60 | 61 | _reInitOnClose: function() { 62 | var component = this; 63 | this.get('gallery').listen('close', function() { 64 | run.next(function() { 65 | component._initItemGallery(); 66 | }); 67 | }); 68 | }, 69 | 70 | itemObserver: Em.observer('items', function(){ 71 | var component = this; 72 | component._initItemGallery(); 73 | }), 74 | 75 | /** 76 | * DEPRECATED 77 | * 78 | * Code exists for backward compatibility of block usage 79 | * up to ember-cli-photoswipe versions 1.0.1. 80 | */ 81 | click: function(evt) { 82 | 83 | if (this.get('items')) { 84 | return; // ignore - not using deprecated block form 85 | } 86 | 87 | var aElement = this.$(evt.target).parent(); 88 | var index = this.$("a.photo-item").index( aElement ); 89 | 90 | if (!aElement.is('a')) { return; } 91 | 92 | evt.preventDefault(); 93 | 94 | // setup options, such as index for index 95 | this._buildOptions(this._getBounds.bind(this)); 96 | this.set('options.index', index); 97 | 98 | var pSwipe = new PhotoSwipe( 99 | this.get('pswpEl'), 100 | this.get('pswpTheme'), 101 | this.get('calculatedItems'), 102 | this.get('options') 103 | ); 104 | this.set('gallery', pSwipe); 105 | this.get('gallery').init(); 106 | }, 107 | /** 108 | * END DEPRECATED 109 | */ 110 | 111 | _getBounds: function(i) { 112 | var img = this.$('img').get(i), 113 | position = this.$(img).position(), 114 | width = this.$(img).width(); 115 | return {x: position.left, y: position.top, w: width}; 116 | }, 117 | 118 | actions: { 119 | launchGallery(item) { 120 | this._buildOptions(this._getBounds.bind(this)); 121 | if (item !== undefined) { 122 | var index = this.get('items').indexOf(item); 123 | this.set('options.index', index); 124 | } 125 | var pSwipe = new PhotoSwipe( 126 | this.get('pswpEl'), 127 | this.get('pswpTheme'), 128 | this.get('items'), 129 | this.get('options') 130 | ); 131 | this.set('gallery', pSwipe); 132 | this.get('gallery').init(); 133 | } 134 | }, 135 | 136 | 137 | /** 138 | * DEPRECATED 139 | * 140 | * Code exists for backward compatibility of block usage 141 | * up to ember-cli-photoswipe versions 1.0.1. 142 | */ 143 | _calculateItems: function() { 144 | Em.deprecate( 145 | "Using ember-cli-photoswipe without an items attribute is deprecated. "+ 146 | "See https://github.com/poetic/ember-cli-photoswipe#usage", 147 | false, 148 | {id: 'ember-cli-photoswipe.didInsertElement', until: '1.13'} 149 | ); 150 | 151 | var items = this.$().find('a'); 152 | var calculatedItems = Em.A(items).map(function(i, item) { 153 | return { 154 | src: Em.$(item).attr('href'), 155 | w: Em.$(item).data('width'), 156 | h: Em.$(item).data('height'), 157 | msrc: Em.$(item).children('img').attr('src'), 158 | title: Em.$(item).children('img').attr('alt') 159 | }; 160 | }); 161 | this.set('calculatedItems', calculatedItems); 162 | } 163 | /** 164 | * END DEPRECATED 165 | */ 166 | 167 | }); 168 | --------------------------------------------------------------------------------