├── .gitignore ├── .npmignore ├── .travis.yml ├── Makefile ├── Readme.md ├── example ├── bundle.js ├── bundle.js.map ├── index.html ├── index.js └── style.css ├── gulpfile.js ├── karma.conf.js ├── package.json ├── preview.js ├── src ├── index.js ├── spin.js └── style.css ├── test └── test.js ├── webpack.alone.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | dest 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | example 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - '0.12' 5 | before_script: 6 | - export DISPLAY=:99.0 7 | - sh -e /etc/init.d/xvfb start 8 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | build: 2 | @chrome http://localhost:3000/example/index.html 3 | @gulp 4 | 5 | test: 6 | @open http://localhost:8080/bundle 7 | @gulp webpack:test 8 | 9 | standalone: 10 | @webpack --config webpack.alone.js 11 | 12 | test-karma: 13 | @node_modules/.bin/karma start --single-run 14 | 15 | test-coveralls: 16 | @echo TRAVIS_JOB_ID $(TRAVIS_JOB_ID) 17 | @node_modules/.bin/karma start --single-run && \ 18 | cat ./coverage/lcov/lcov.info | ./node_modules/coveralls/bin/coveralls.js 19 | 20 | prepublish: 21 | @babel src -d dest 22 | 23 | doc: 24 | @ghp-import example -n -p 25 | 26 | tags: 27 | @jsctags src/*.js example/index.js -f > tags 28 | 29 | .PHONY: test 30 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # Images-preview 2 | 3 | Images preview component for web pages on touch device. 4 | 5 | Consider use [imagebox](https://github.com/chemzqm/imagebox) for browser images 6 | on desktop browsers. 7 | 8 | Visit [demo](https://mobkits.github.io/images-preview/) with your phone 9 | 10 | ![](http://7b1fwt.com1.z0.glb.clouddn.com/1497606769.png) 11 | 12 | It's already used in production at [jiangwoo](http://www.jiangwoo.com/products/304) 13 | 14 | The standalone file could be ~12kb, if you use webpack and reuse components like 15 | [tween](https://github.com/component/tween), the increased file size could be 16 | much smaller. 17 | 18 | ## Features 19 | 20 | * Swipe, pinchzoom and scroll (when necessary) event support. 21 | * Tap to show and hide. 22 | * Scale in and out current image with animation. 23 | * Min & max zoom limitation. 24 | * Src convert and loading effect for display original image. 25 | 26 | ## Installation 27 | 28 | npm install images-preview -S 29 | 30 | Or use standalone file [preview.js](https://github.com/chemzqm/images-preview/blob/master/preview.js) 31 | 32 | ## Usage 33 | 34 | Include [style.css](https://raw.githubusercontent.com/chemzqm/images-preview/master/src/style.css) to your page. 35 | 36 | For webpack user: 37 | 38 | ``` js 39 | import ImagePreview from 'image-preview' 40 | let imgs = document.querySelectorAll('img') 41 | new ImagePreview(imgs) 42 | ``` 43 | 44 | For standalone file user: 45 | 46 | ```js 47 | // add standalone file to your html 48 | 49 | // create an instance 50 | var ImagesPreview = window.ImagesPreview.default; 51 | new ImagesPreview(picture, { 52 | convert: function(src) { 53 | return src; 54 | } 55 | }); 56 | ``` 57 | 58 | ## Events 59 | 60 | * `show` emitted on container shown. 61 | * `hide` emitted on container hide. 62 | * `active` emitted with `index` on active item change. 63 | 64 | ## API 65 | 66 | ### ImagePreview(imgs, [option]) 67 | 68 | Constructor for ImagePreview, when tap event is fired on one of `imgs`, a 69 | preview container is shown for user to swipe and/or pinchzoom. 70 | 71 | * `imgs` is original images collection. 72 | * `option` optional options. 73 | * `option.convert` a function used to return orignal image url from `currentSrc` of current image. 74 | * `option.bind` not bind tap event when === `false` 75 | 76 | ### show() 77 | ### hide() 78 | 79 | Show/hide container. 80 | 81 | ### .active(img, [idx], [animate]) 82 | 83 | Active a specfic image 84 | 85 | * `img` compressed image element. 86 | * `idx` index of `img` in image list (allows active image from img outside initialized images). 87 | * `animate` use animation if true. 88 | 89 | ### .unbind() 90 | 91 | Unbind tap event. 92 | 93 | ## LICENSE 94 | 95 | Copyright 2016 chemzqm@gmail.com 96 | 97 | Permission is hereby granted, free of charge, to any person obtaining 98 | a copy of this software and associated documentation files (the "Software"), 99 | to deal in the Software without restriction, including without limitation 100 | the rights to use, copy, modify, merge, publish, distribute, sublicense, 101 | and/or sell copies of the Software, and to permit persons to whom the 102 | Software is furnished to do so, subject to the following conditions: 103 | 104 | The above copyright notice and this permission notice shall be included 105 | in all copies or substantial portions of the Software. 106 | 107 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 108 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 109 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 110 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 111 | DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 112 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE 113 | OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 114 | -------------------------------------------------------------------------------- /example/bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap 8929a24ad1be0811f15b","webpack:///./example/index.js","webpack:///./src/index.js","webpack:///./~/radio-component/index.js","webpack:///./~/component-classes/index.js","webpack:///./~/component-indexof/index.js","webpack:///./~/component-query/index.js","webpack:///./~/component-event/index.js","webpack:///./~/component-raf/index.js","webpack:///./~/component-tween/index.js","webpack:///./~/component-tween/~/component-emitter/index.js","webpack:///./~/component-clone/index.js","webpack:///./~/component-type/index.js","webpack:///./~/ease-component/index.js","webpack:///./~/component-emitter/index.js","webpack:///./~/component-tap-event/index.js","webpack:///./~/pinch-zoom/lib/index.js","webpack:///./~/component-events/index.js","webpack:///./~/component-delegate/index.js","webpack:///./~/component-closest/index.js","webpack:///./~/component-matches-selector/index.js","webpack:///./~/prop-detect/index.js","webpack:///./~/transition-property/index.js","webpack:///./~/touchaction-property/index.js","webpack:///./~/has-translate3d/index.js","webpack:///./~/transform-property/index.js","webpack:///./~/pinch-zoom/lib/util.js","webpack:///./~/pinch-zoom/lib/pinch.js","webpack:///./~/pinch-zoom/lib/e.js","webpack:///./~/object-assign/index.js","webpack:///./~/domify/index.js","webpack:///./src/spin.js","webpack:///./~/autoscale-canvas/index.js","webpack:///./~/has-touch/index.js","webpack:///./example/style.css?acc0","webpack:///./example/style.css","webpack:///./~/css-loader/lib/css-base.js","webpack:///./~/style-loader/addStyles.js","webpack:///./src/style.css?d39e","webpack:///./src/style.css"],"names":[],"mappings":"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R;AACA,OAAE,GAAF,GAAQ,MAAM,GAAd;AACA,YAAO;AACL,eAAQ,EAAE,MADL;AAEL,cAAO,EAAE;AAFJ,MAAP;AAID;AACF;;AAED,UAAS,aAAT,GAAyB;AACvB,UAAO,KAAK,GAAL,CAAS,IAAI,eAAJ,CAAoB,WAA7B,EAA0C,OAAO,UAAP,IAAqB,CAA/D,CAAP;AACD;;AAED,UAAS,cAAT,CAAwB,CAAxB,EAA2B;AACzB,KAAE,cAAF;AACD;mBACc,a;;;;;;;;;ACxgBf;;AAEA;AACA;AACA;AACA,YAAW,QAAQ;AACnB,YAAW,OAAO;AAClB;AACA;AACA;AACA;AACA;AACA;AACA,uCAAsC,OAAO;AAC7C;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA;AACA;;;;;;;;;;ACtBA;AACA;AACA;;AAEA;AACA;AACA,EAAC;AACD;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,YAAW,QAAQ;AACnB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,QAAQ;AACnB;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,YAAW,cAAc;AACzB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,aAAY;AACZ;AACA;;AAEA;AACA;AACA,kBAAiB,gBAAgB;AACjC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,QAAQ;AACnB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,gCAA+B;AAC/B;AACA,MAAK;AACL;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,MAAK;AACL;AACA;AACA,IAAG;AACH;AACA;AACA,MAAK;AACL;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;AC9LA;AACA;AACA,kBAAiB,gBAAgB;AACjC;AACA;AACA;AACA,G;;;;;;;;;ACNA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;ACpBA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,QAAQ;AACnB,YAAW,OAAO;AAClB,YAAW,SAAS;AACpB,YAAW,QAAQ;AACnB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,QAAQ;AACnB,YAAW,OAAO;AAClB,YAAW,SAAS;AACpB,YAAW,QAAQ;AACnB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA,G;;;;;;;;;AClCA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;;;;AChCA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,YAAW,aAAa;AACxB;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,iBAAgB,gBAAgB;AAChC;AACA,YAAW,aAAa;AACxB,aAAY,MAAM;AAClB;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,aAAY,MAAM;AAClB;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,YAAW,gBAAgB;AAC3B,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAY,MAAM;AAClB;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,oBAAmB,iBAAiB;AACpC;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,YAAW,SAAS;AACpB,aAAY,MAAM;AAClB;AACA;;AAEA;AACA;AACA;AACA;AACA,G;;;;;;;;;;AChLA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,SAAS;AACpB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,SAAS;AACpB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,SAAS;AACpB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,kBAAiB,sBAAsB;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,MAAM;AACjB,aAAY;AACZ;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA,4CAA2C,SAAS;AACpD;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;;;;;;;;;;AChKA;AACA;AACA;;AAEA;AACA;AACA;AACA,EAAC;AACD;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,YAAW,MAAM;AACjB;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,sCAAqC,OAAO;AAC5C;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;;ACxDA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,YAAW,MAAM;AACjB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;;;;;;;;;;AChCA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,IAAG;AACH;AACA,IAAG;AACH;AACA,IAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;ACxKA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,SAAS;AACpB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,SAAS;AACpB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,SAAS;AACpB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,kBAAiB,sBAAsB;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,MAAM;AACjB,aAAY;AACZ;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA,4CAA2C,SAAS;AACpD;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;;;;;;;;;;AClKA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA,MAAK;;AAEL;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;;AAEA;AACA;AACA,QAAO;AACP;AACA;AACA;;;;;;;;;;ACtFA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,aAAY,QAAQ;AACpB,YAAW,OAAO;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA,aAAY,MAAM;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAe;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,aAAY,MAAM;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,aAAY,MAAM;AAClB;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAuB,sCAAsC;AAC7D;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,cAAa;AACb;AACA;AACA,uBAAsB,qBAAqB;AAC3C,+BAA8B,qBAAqB;AACnD;AACA;;AAEA;AACA;AACA,YAAW,OAAO;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,YAAW,MAAM;AACjB;AACA;AACA;AACA;AACA,iBAAgB;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,yBAAwB,0CAA0C;AAClE;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,OAAO;AAClB,YAAW,OAAO;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,aAAY,QAAQ;AACpB,YAAW,OAAO;AAClB,YAAW,OAAO;AAClB;AACA;AACA,kBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,IAAG;;AAEH;AACA;AACA,6BAA4B;AAC5B;AACA;AACA,MAAK;AACL,IAAG;;AAEH;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAc;;AAEd;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,YAAW,OAAO;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAuB,2BAA2B;AAClD;;AAEA;AACA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,OAAO;AAClB,YAAW,OAAO;AAClB,cAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAuB,2BAA2B;AAClD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAiB;AACjB;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;ACtdA;AACA;AACA;;AAEA;AACA;AACA,EAAC;AACD;AACA;;AAEA;AACA;AACA,EAAC;AACD;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,OAAO;AAClB;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,gBAAgB;AAC3B,aAAY,SAAS;AACrB;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,IAAG;AACH;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAW,gBAAgB;AAC3B,YAAW,gBAAgB;AAC3B;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,OAAO;AAClB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;ACxLA;AACA;AACA;;AAEA;AACA;AACA,EAAC;AACD;AACA;;AAEA;AACA;AACA,EAAC;AACD;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,YAAW,QAAQ;AACnB,YAAW,OAAO;AAClB,YAAW,OAAO;AAClB,YAAW,SAAS;AACpB,YAAW,QAAQ;AACnB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;;AAEA;AACA;AACA;AACA,YAAW,QAAQ;AACnB,YAAW,OAAO;AAClB,YAAW,SAAS;AACpB,YAAW,QAAQ;AACnB;AACA;;AAEA;AACA;AACA;;;;;;;;;;AClDA;AACA;AACA;;AAEA;AACA;AACA,EAAC;AACD;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,YAAW,QAAQ;AACnB,YAAW,OAAO;AAClB,YAAW,QAAQ;AACnB;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;;;;;;;;;ACnCA;AACA;AACA;;AAEA;AACA;AACA,EAAC;AACD;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,YAAW,QAAQ;AACnB,YAAW,OAAO;AAClB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA,kBAAiB,kBAAkB;AACnC;AACA;AACA;AACA;;;;;;;;;;ACjDA;AACA,EAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA,kBAAiB,mBAAmB;AACpC;AACA;AACA;AACA;AACA;AACA,EAAC;;AAED;AACA;AACA;AACA;AACA,EAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;;AAED;;AAEA;;AAEA;;AAEA;;AAEA;;;;;;;;;;ACvDA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA,gBAAe,mBAAmB;AAClC;AACA;AACA;AACA;AACA;AACA;;AAEA;;;;;;;;;;;AClBA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;AClBA;;AAEA;AACA;AACA;;AAEA,EAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;ACtBA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA,gBAAe,mBAAmB;AAClC;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;AClBA;AACA;AACA;AACA,YAAW,MAAM;AACjB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,MAAM;AACjB,aAAY,OAAO;AACnB;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;;AAED;AACA;AACA;AACA;AACA,YAAW,OAAO;AAClB,YAAW,OAAO;AAClB,YAAW,OAAO;AAClB,YAAW,OAAO;AAClB,cAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;ACtEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,YAAW,QAAQ;AACnB,YAAW,SAAS;AACpB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA,YAAW,MAAM;AACjB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA,yBAAwB,oBAAoB;AAC5C;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,MAAM;AACjB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,yBAAwB,qBAAqB;AAC7C;AACA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA,YAAW,MAAM;AACjB,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA,aAAY;AACZ;AACA;;AAEA;AACA;AACA;AACA;;;;;;;;;;ACpIA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;;;;;;;;;ACfA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA,iCAAgC;AAChC;AACA;AACA;AACA;;AAEA;AACA;AACA,kBAAiB,QAAQ;AACzB;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA,IAAG;AACH,mCAAkC;AAClC;AACA;AACA;;AAEA;AACA,GAAE;AACF;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA,iBAAgB,sBAAsB;AACtC;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA,mBAAkB,oBAAoB;AACtC;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;;;;;;;;;;ACjFA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;AA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AgB,mBAAmB;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAgB,sBAAsB;AACtC;AACA;AACA,mBAAkB,2BAA2B;AAC7C;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,gBAAe,mBAAmB;AAClC;AACA;AACA;AACA;AACA,kBAAiB,2BAA2B;AAC5C;AACA;AACA,SAAQ,uBAAuB;AAC/B;AACA;AACA,IAAG;AACH;AACA,kBAAiB,uBAAuB;AACxC;AACA;AACA,4BAA2B;AAC3B;AACA;AACA;;AAEA;AACA;AACA;AACA,gBAAe,iBAAiB;AAChC;AACA;AACA;AACA;AACA;AACA,eAAc;AACd;AACA,iCAAgC,sBAAsB;AACtD;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA,IAAG;AACH;AACA;AACA;AACA,GAAE;AACF;AACA,GAAE;AACF;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,GAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GAAE;AACF;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;AACA,EAAC;;AAED;AACA;;AAEA;AACA;AACA,GAAE;AACF;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,GAAE;AACF;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA,wDAAuD;AACvD;;AAEA,8BAA6B,mBAAmB;;AAEhD;;AAEA;;AAEA;AACA;AACA;;;;;;;;;;ACrPA;;AAEA;AACA;AACA;AACA;AACA,yFAAgF;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAG;AACH;AACA;AACA,iCAAgC,UAAU,EAAE;AAC5C,E;;;;;;;;;ACpBA;AACA;;;AAGA;AACA,4CAA2C,2BAA2B,oBAAoB,oBAAoB,WAAW,YAAY,cAAc,gBAAgB,GAAG,oDAAoD,uBAAuB,YAAY,aAAa,2BAA2B,gBAAgB,gBAAgB,gBAAgB,GAAG,2BAA2B,WAAW,GAAG,0BAA0B,cAAc,GAAG,wBAAwB,6BAA6B,iCAAiC,gCAAgC,oBAAoB,kBAAkB,GAAG,sBAAsB,oBAAoB,gBAAgB,YAAY,aAAa,iBAAiB,uBAAuB,kBAAkB,GAAG,wBAAwB,mBAAmB,mBAAmB,eAAe,GAAG,wBAAwB,gBAAgB,eAAe,gBAAgB,wBAAwB,kBAAkB,uBAAuB,4CAA4C,GAAG,+BAA+B,2BAA2B,GAAG,yBAAyB,uBAAuB,gBAAgB,iBAAiB,mBAAmB,GAAG,4BAA4B,uBAAuB,YAAY,aAAa,kBAAkB,aAAa,uBAAuB,2BAA2B,GAAG,yBAAyB,6BAA6B,iCAAiC,gCAAgC,uBAAuB,YAAY,aAAa,WAAW,cAAc,gBAAgB,GAAG,iCAAiC,uBAAuB,gBAAgB,YAAY,aAAa,WAAW,cAAc,sCAAsC,GAAG,yBAAyB,gBAAgB,iBAAiB,uBAAuB,aAAa,cAAc,sBAAsB,uBAAuB,kBAAkB,GAAG,0BAA0B,kBAAkB,gBAAgB,iBAAiB,GAAG;;AAE15D","file":"bundle.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap 8929a24ad1be0811f15b\n **/","require('./style.css')\nrequire('../src/style.css')\nimport ImagesPreivew from '../src/index'\n\nimport touch from 'has-touch'\n\nif (!touch) alert('Please visit this page with mobile device')\n\nlet imgs = document.querySelectorAll('img')\nnew ImagesPreivew(imgs, {\n convert: src => {\n return src.replace(/-\\w+$/, '')\n }\n})\n\n\n\n/** WEBPACK FOOTER **\n ** ./example/index.js\n **/","import radio from 'radio-component'\nimport query from 'query'\nimport event from 'event'\nimport raf from 'raf'\nimport Tween from 'tween'\nimport Emitter from 'emitter'\nimport tap from 'tap-event'\nimport PinchZoom from 'pinch-zoom'\nimport assign from 'object-assign'\nimport domify from 'domify'\nimport closest from 'closest'\nimport events from 'events'\nimport spin from './spin'\nimport {has3d, transform, transition, transitionend} from 'prop-detect'\n\nconst doc = document\nconst body = doc.body\n\nclass ImagesPreview extends Emitter {\n /**\n * Constructor\n *\n * @public\n * @param {Array|DomCollection} imgs\n * @param {Object} opts\n */\n constructor(imgs, opts = {}) {\n super()\n this.opts = opts\n // maximun duration in ms for fast swipe\n this.threshold = opts.threshold || 200\n // minimum moved distance for fast swipe\n this.fastThreshold = opts.fastThreshold || 30\n opts.convert = opts.convert || function src() {\n return src\n }\n this.imgs = Array.prototype.slice.call(imgs)\n this._ontap = tap(this.ontap.bind(this))\n this._containerTap = tap(this.hide.bind(this))\n this.status = []\n this.loaded = []\n this.tx = 0\n if (opts.bind !== false) event.bind(doc, 'touchstart', this._ontap)\n }\n /**\n * ontap event handler\n *\n * @private\n * @param {Event} e\n */\n ontap(e) {\n let el = e.target\n let idx = this.imgs.indexOf(el)\n if (idx !== -1) {\n this.show()\n this.active(el, idx, true)\n }\n }\n /**\n * Show container\n *\n * @public\n */\n show() {\n let div = this.container = doc.createElement('div')\n div.id = 'images-preview'\n let vw = viewportWidth()\n div.style.width = (vw*this.imgs.length + 40) + 'px'\n this.setTransform(-20)\n body.appendChild(div)\n let dots = this.dots = domify(`
`)\n body.appendChild(dots)\n let ul = query('ul', dots)\n let fragment = doc.createDocumentFragment()\n for (let i = 0, l = this.imgs.length; i < l; i++) {\n ul.appendChild(doc.createElement('li'))\n let el = doc.createElement('div')\n el.style.width = `${vw}px`\n let wrapper = doc.createElement('div')\n let src = this.imgs[i].src\n wrapper.className = 'wrapper'\n if (this.loaded.indexOf(i) !== -1) {\n let img = this.createImage(wrapper, src)\n img.style.display = 'block'\n this.positionWrapper(wrapper, img)\n } else {\n wrapper.appendChild(domify(`\n
\n
`))\n let rect = this.imgs[i].getBoundingClientRect()\n let h = rect.height || vw\n let top = Math.min(div.clientHeight - 10, h)/2\n assign(wrapper.style, {\n width: `${vw - 10}px`,\n height: `${h}px`,\n left: '5px',\n marginTop: `-${top}px`\n })\n }\n el.appendChild(wrapper)\n fragment.appendChild(el)\n }\n div.appendChild(fragment)\n this.zooms = []\n this.emit('hide')\n\n this.events = events(div, this)\n this.docEvents = events(document, this);\n this.events.bind('touchstart')\n this.events.bind('touchmove')\n this.events.bind('touchend')\n this.docEvents.bind('touchend', 'ontouchend')\n event.bind(div, 'touchstart', this._containerTap)\n event.bind(doc, 'touchmove', preventDefault)\n }\n\n ontouchstart(e) {\n if (this.animating) return\n let wrapper = closest(e.target, '.wrapper')\n if (e.touches.length > 1 || wrapper) return\n let t = e.touches[0]\n let sx = t.clientX\n this.down = {x: sx, at: Date.now()}\n let tx = this.tx\n let vw = viewportWidth()\n this.move = (e, touch) => {\n let x = tx + touch.clientX - sx\n x = this.limit(x, vw)\n if (isNaN(x)) return\n this.setTransform(x)\n }\n }\n\n ontouchmove(e) {\n if (e.touches.length > 1 || this.move == null) return\n e.preventDefault()\n e.stopPropagation()\n let touch = e.touches[0]\n this.move(e, touch)\n }\n\n ontouchend(e) {\n if (this.move == null) return\n if (this.animating) this.tween.stop()\n let down = this.down\n this.move = this.down = null\n let touch = e.changedTouches[0]\n let x = touch.clientX\n let t = Date.now()\n if ( Math.abs(x - down.x) > this.fastThreshold &&\n (t - down.at) < this.threshold ) {\n let dir = down.x > x ? 'left' : 'right'\n this.onswipe(dir)\n } else {\n this.restore()\n }\n }\n\n /**\n * Active a specfic image\n *\n * @public\n * @param {Element} img\n * @param {Number} idx\n * @param {Boolean} animate = false\n */\n active(img, idx, animate = false) {\n if (idx == null) idx = this.imgs.indexOf(img)\n if (idx < 0 || idx > this.imgs.length - 1) return\n let vw = viewportWidth()\n let state = this.status[idx]\n this.idx = idx\n let wrapper = this.container.querySelectorAll('.wrapper')[idx]\n radio(this.dots.querySelectorAll('li')[idx])\n this.emit('active', idx)\n let tx = idx*vw\n this.setTransform(- tx - 20)\n // not loaded\n if (!state) {\n this.status[idx] = 'loading'\n if (animate) {\n let image = query('.image', wrapper)\n if (image) image.style.display = 'none'\n let mask = query('.mask', wrapper)\n if (mask) mask.style.display = 'none'\n let holder = this.holder = doc.createElement('div')\n holder.className = 'imgs-preview-holder'\n let src = img.src\n holder.style.backgroundImage = `url('${src}')`\n let rect = img.getBoundingClientRect()\n assign(holder.style, {\n left: `${rect.left}px`,\n top: `${rect.top}px`,\n width: `${rect.width}px`,\n height: `${rect.height}px`\n })\n body.appendChild(holder)\n }\n\n let image = this.createImage(wrapper, img.src)\n if (!animate) image.style.display = 'block'\n\n let pz = new PinchZoom(wrapper, {\n threshold: this.threshold,\n fastThreshold: this.fastThreshold,\n padding: 5,\n tapreset: false,\n draggable: true,\n maxScale: 4\n })\n pz.on('swipe', this.onswipe.bind(this))\n pz.on('move', dx => {\n let x = - 20 - tx - dx\n x = this.limit(x, vw)\n this.setTransform(x)\n })\n //pz.on('tap', this.hide.bind(this))\n pz.on('end', this.restore.bind(this))\n this.zooms.push(pz)\n this.loadImage(image, wrapper).then(() => {\n this.loaded.push(idx)\n }, () => {\n })\n }\n }\n onswipe(dir) {\n let vw = viewportWidth()\n let i = dir == 'left' ? this.idx + 1 : this.idx - 1\n i = Math.max(0, i)\n i = Math.min(this.imgs.length - 1 , i)\n this.animate(- i*vw - 20).then(() => {\n let img = this.imgs[i]\n if (i == this.idx) return\n this.active(img, i)\n })\n }\n limit(x, vw) {\n x = Math.min(0, x)\n x = Math.max(-40 - (this.imgs.length - 1)*vw, x)\n return x\n }\n /**\n * Restore container transform to sane position\n *\n * @private\n */\n restore() {\n let vw = viewportWidth()\n let idx = Math.round((- this.tx - 20)/vw)\n this.animate(- idx*vw - 20).then(() => {\n if (idx == this.idx) return\n let img = this.imgs[idx]\n this.active(img, idx)\n })\n }\n /**\n * Load image inside wrapper\n *\n * @private\n * @param {Element} image\n * @param {Element} wrapper\n */\n loadImage(image, wrapper) {\n if (image.complete) {\n let mask = query('.mask', wrapper)\n if (mask) wrapper.removeChild(mask)\n this.positionWrapper(wrapper, image)\n return this.positionHolder(wrapper, image.src, false).then(() => {\n image.style.display = 'block'\n })\n } else {\n return this.positionHolder(wrapper).then(() => {\n image.style.display = 'block'\n let mask = query('.mask', wrapper)\n mask.style.display = 'block'\n let spinEl = domify(`
`)\n if (wrapper.clientHeight > this.container.clientHeight) {\n spinEl.style.top = `${this.container.clientHeight/2}px`\n }\n wrapper.appendChild(spinEl)\n let stop = spin(spinEl, {\n color: '#ffffff',\n duration: 1000,\n width: 4\n })\n let self = this\n return new Promise((resolve, reject) => {\n function onload() {\n stop()\n if (spinEl.parentNode) wrapper.removeChild(spinEl)\n if (mask.parentNode) wrapper.removeChild(mask)\n self.positionWrapper(wrapper, image)\n resolve()\n }\n if (image.complete) return onload()\n image.onload = onload\n image.onerror = e => {\n stop()\n reject(e)\n }\n })\n })\n }\n }\n positionWrapper(wrapper, image) {\n let vw = Math.max(doc.documentElement.clientWidth, window.innerWidth || 0)\n let dims = imgDimension(image)\n let h = (vw - 10)*dims.height/dims.width\n let top = Math.min(this.container.clientHeight - 10, h)/2\n\n assign(wrapper.style, {\n left: '5px',\n width: `${vw - 10}px`,\n height: `${h}px`,\n marginTop: `-${top}px`\n })\n }\n createImage(wrapper, src) {\n let img = query('.image', wrapper)\n if (img) return img\n img = doc.createElement('img')\n img.className = 'image'\n img.src = this.opts.convert(src)\n wrapper.appendChild(img)\n return img\n }\n /**\n * Set translateX of container\n *\n * @private\n * @param {Number} x\n */\n setTransform(x) {\n let el = this.container\n this.tx = x\n if (has3d) {\n el.style[transform] = `translate3d(${x}px,0,0)`\n } else {\n el.style[transform] = `translate(${x}px)`\n }\n }\n /**\n * Animate container for active image\n *\n * @private\n * @param {Number} x\n * @param {Number} duration = 200\n * @param {String} ease = 'out-circ'\n * @returns {Promise}\n */\n animate(x, duration = 200, ease = 'out-circ') {\n if (x == this.tx) return Promise.resolve(null)\n this.animating = true\n let tween = this.tween = Tween({x: this.tx})\n .ease(ease)\n .to({x: x})\n .duration(duration)\n\n tween.update(function(o) {\n self.setTransform(o.x)\n })\n let self = this\n let promise = new Promise(function (resolve) {\n tween.on('end', function(){\n animate = function(){} // eslint-disable-line\n self.animating = false\n resolve()\n })\n })\n\n function animate() {\n raf(animate)\n tween.update()\n }\n\n animate()\n return promise\n }\n /**\n * Animate holder to match wrapper\n *\n * @private\n * @param {Element} wrapper\n * @param {String} src optional new src\n * @returns {undefined}\n */\n positionHolder(wrapper, src, opacity = true) {\n let el = this.holder\n if (!el) return Promise.resolve(null)\n if (src) el.style.backgroundImage = `url('${src}')`\n let tween = Tween({\n width: parseInt(el.style.width, 10),\n height: parseInt(el.style.height, 10),\n left: parseInt(el.style.left, 10),\n top: parseInt(el.style.top, 10),\n opacity: 0.3\n })\n .ease('out-cube')\n .to({\n width: parseInt(wrapper.style.width, 10),\n height: parseInt(wrapper.style.height, 10),\n left: parseInt(wrapper.style.left, 10),\n top: this.container.clientHeight/2 + parseInt(wrapper.style.marginTop, 10),\n opacity: 1\n })\n .duration(300)\n\n tween.update(function(o) {\n let n = opacity ? o.opacity : 1\n assign(el.style, {\n width: `${o.width}px`,\n height: `${o.height}px`,\n left: `${o.left}px`,\n top: `${o.top}px`,\n opacity: n\n })\n })\n\n let self = this\n let promise = new Promise(function (resolve) {\n tween.on('end', function(){\n if (el.parentNode) el.parentNode.removeChild(el)\n self.holder = null\n animate = function(){} // eslint-disable-line\n resolve()\n })\n })\n\n function animate() {\n raf(animate)\n tween.update()\n }\n\n animate()\n return promise\n }\n /**\n * hide container and unbind events\n *\n * @public\n */\n hide() {\n if (this.dots) body.removeChild(this.dots)\n event.unbind(this.container, 'touchstart', this._containTap)\n event.unbind(doc, 'touchmove', preventDefault)\n this.zooms.forEach(pz => {\n pz.unbind()\n })\n this.hideImage()\n this.zooms = []\n this.status = []\n this.container.style.backgroundColor = 'rgba(0,0,0,0)'\n this.emit('hide')\n body.removeChild(this.container)\n }\n /**\n * unbind tap event\n *\n * @public\n */\n unbind() {\n event.unbind(doc, 'touchstart', this._ontap)\n }\n hideImage() {\n let idx = this.idx\n let img = this.imgs[idx]\n let rect = img.getBoundingClientRect()\n let wrapper = this.container.querySelectorAll('.wrapper')[idx]\n if (rect.height == 0 || rect.bottom < 0 || rect.top > this.container.clientHeight) return\n let holder = doc.createElement('div')\n let src = wrapper.querySelector('.image').src\n holder.className = 'imgs-preview-holder'\n holder.style.backgroundImage = `url('${src}')`\n assign(holder.style, {\n width: parseInt(wrapper.style.width, 10) + 'px',\n height: parseInt(wrapper.style.height, 10) + 'px',\n left: parseInt(wrapper.style.left, 10) + 'px',\n top: (this.container.clientHeight/2 + parseInt(wrapper.style.marginTop, 10)) + 'px',\n [transition]: 'all 0.25s ease-in'\n })\n body.appendChild(holder)\n event.bind(holder, transitionend, end)\n setTimeout(() => {\n assign(holder.style, {\n width: `${rect.width}px`,\n height: `${rect.height}px`,\n top: `${rect.top}px`,\n left: `${rect.left}px`\n })\n }, 20)\n function end() {\n event.unbind(holder, transitionend, end)\n body.removeChild(holder)\n }\n }\n}\n\nfunction imgDimension(image) {\n if (image.naturalWidth) {\n return {\n height: image.naturalHeight,\n width: image.naturalWidth\n }\n } else {\n let i = new Image()\n i.src = image.src;\n return {\n height: i.height,\n width: i.width\n }\n }\n}\n\nfunction viewportWidth() {\n return Math.max(doc.documentElement.clientWidth, window.innerWidth || 0)\n}\n\nfunction preventDefault(e) {\n e.preventDefault()\n}\nexport default ImagesPreview\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/index.js\n **/","var classes = require('classes')\n\n/**\n * add class to el and remove it from the same tagName siblings\n *\n * @param {Element} el\n * @param {String} [default:active] [className] optional class added for el\n * @api public\n */\nmodule.exports = function (el, className) {\n var children = el.parentNode.childNodes\n var tagName = el.tagName\n className = className || 'active'\n for (var i = 0, l = children.length; i < l; i++) {\n var node = children[i]\n if (!node || (node.nodeType !== 1) || (node.tagName !== tagName)) continue\n if (node === el) {\n classes(node).add(className)\n } else {\n classes(node).remove(className)\n }\n }\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/radio-component/index.js\n ** module id = 2\n ** module chunks = 0\n **/","/**\n * Module dependencies.\n */\n\ntry {\n var index = require('indexof');\n} catch (err) {\n var index = require('component-indexof');\n}\n\n/**\n * Whitespace regexp.\n */\n\nvar re = /\\s+/;\n\n/**\n * toString reference.\n */\n\nvar toString = Object.prototype.toString;\n\n/**\n * Wrap `el` in a `ClassList`.\n *\n * @param {Element} el\n * @return {ClassList}\n * @api public\n */\n\nmodule.exports = function(el){\n return new ClassList(el);\n};\n\n/**\n * Initialize a new ClassList for `el`.\n *\n * @param {Element} el\n * @api private\n */\n\nfunction ClassList(el) {\n if (!el || !el.nodeType) {\n throw new Error('A DOM element reference is required');\n }\n this.el = el;\n this.list = el.classList;\n}\n\n/**\n * Add class `name` if not already present.\n *\n * @param {String} name\n * @return {ClassList}\n * @api public\n */\n\nClassList.prototype.add = function(name){\n // classList\n if (this.list) {\n this.list.add(name);\n return this;\n }\n\n // fallback\n var arr = this.array();\n var i = index(arr, name);\n if (!~i) arr.push(name);\n this.el.className = arr.join(' ');\n return this;\n};\n\n/**\n * Remove class `name` when present, or\n * pass a regular expression to remove\n * any which match.\n *\n * @param {String|RegExp} name\n * @return {ClassList}\n * @api public\n */\n\nClassList.prototype.remove = function(name){\n if ('[object RegExp]' == toString.call(name)) {\n return this.removeMatching(name);\n }\n\n // classList\n if (this.list) {\n this.list.remove(name);\n return this;\n }\n\n // fallback\n var arr = this.array();\n var i = index(arr, name);\n if (~i) arr.splice(i, 1);\n this.el.className = arr.join(' ');\n return this;\n};\n\n/**\n * Remove all classes matching `re`.\n *\n * @param {RegExp} re\n * @return {ClassList}\n * @api private\n */\n\nClassList.prototype.removeMatching = function(re){\n var arr = this.array();\n for (var i = 0; i < arr.length; i++) {\n if (re.test(arr[i])) {\n this.remove(arr[i]);\n }\n }\n return this;\n};\n\n/**\n * Toggle class `name`, can force state via `force`.\n *\n * For browsers that support classList, but do not support `force` yet,\n * the mistake will be detected and corrected.\n *\n * @param {String} name\n * @param {Boolean} force\n * @return {ClassList}\n * @api public\n */\n\nClassList.prototype.toggle = function(name, force){\n // classList\n if (this.list) {\n if (\"undefined\" !== typeof force) {\n if (force !== this.list.toggle(name, force)) {\n this.list.toggle(name); // toggle again to correct\n }\n } else {\n this.list.toggle(name);\n }\n return this;\n }\n\n // fallback\n if (\"undefined\" !== typeof force) {\n if (!force) {\n this.remove(name);\n } else {\n this.add(name);\n }\n } else {\n if (this.has(name)) {\n this.remove(name);\n } else {\n this.add(name);\n }\n }\n\n return this;\n};\n\n/**\n * Return an array of classes.\n *\n * @return {Array}\n * @api public\n */\n\nClassList.prototype.array = function(){\n var className = this.el.getAttribute('class') || '';\n var str = className.replace(/^\\s+|\\s+$/g, '');\n var arr = str.split(re);\n if ('' === arr[0]) arr.shift();\n return arr;\n};\n\n/**\n * Check if class `name` is present.\n *\n * @param {String} name\n * @return {ClassList}\n * @api public\n */\n\nClassList.prototype.has =\nClassList.prototype.contains = function(name){\n return this.list\n ? this.list.contains(name)\n : !! ~index(this.array(), name);\n};\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-classes/index.js\n ** module id = 3\n ** module chunks = 0\n **/","module.exports = function(arr, obj){\n if (arr.indexOf) return arr.indexOf(obj);\n for (var i = 0; i < arr.length; ++i) {\n if (arr[i] === obj) return i;\n }\n return -1;\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-indexof/index.js\n ** module id = 4\n ** module chunks = 0\n **/","function one(selector, el) {\n return el.querySelector(selector);\n}\n\nexports = module.exports = function(selector, el){\n el = el || document;\n return one(selector, el);\n};\n\nexports.all = function(selector, el){\n el = el || document;\n return el.querySelectorAll(selector);\n};\n\nexports.engine = function(obj){\n if (!obj.one) throw new Error('.one callback required');\n if (!obj.all) throw new Error('.all callback required');\n one = obj.one;\n exports.all = obj.all;\n return exports;\n};\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-query/index.js\n ** module id = 5\n ** module chunks = 0\n **/","var bind = window.addEventListener ? 'addEventListener' : 'attachEvent',\n unbind = window.removeEventListener ? 'removeEventListener' : 'detachEvent',\n prefix = bind !== 'addEventListener' ? 'on' : '';\n\n/**\n * Bind `el` event `type` to `fn`.\n *\n * @param {Element} el\n * @param {String} type\n * @param {Function} fn\n * @param {Boolean} capture\n * @return {Function}\n * @api public\n */\n\nexports.bind = function(el, type, fn, capture){\n el[bind](prefix + type, fn, capture || false);\n return fn;\n};\n\n/**\n * Unbind `el` event `type`'s callback `fn`.\n *\n * @param {Element} el\n * @param {String} type\n * @param {Function} fn\n * @param {Boolean} capture\n * @return {Function}\n * @api public\n */\n\nexports.unbind = function(el, type, fn, capture){\n el[unbind](prefix + type, fn, capture || false);\n return fn;\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-event/index.js\n ** module id = 6\n ** module chunks = 0\n **/","/**\n * Expose `requestAnimationFrame()`.\n */\n\nexports = module.exports = window.requestAnimationFrame\n || window.webkitRequestAnimationFrame\n || window.mozRequestAnimationFrame\n || fallback;\n\n/**\n * Fallback implementation.\n */\n\nvar prev = new Date().getTime();\nfunction fallback(fn) {\n var curr = new Date().getTime();\n var ms = Math.max(0, 16 - (curr - prev));\n var req = setTimeout(fn, ms);\n prev = curr;\n return req;\n}\n\n/**\n * Cancel.\n */\n\nvar cancel = window.cancelAnimationFrame\n || window.webkitCancelAnimationFrame\n || window.mozCancelAnimationFrame\n || window.clearTimeout;\n\nexports.cancel = function(id){\n cancel.call(window, id);\n};\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-raf/index.js\n ** module id = 7\n ** module chunks = 0\n **/","\n/**\n * Module dependencies.\n */\n\nvar Emitter = require('emitter');\nvar clone = require('clone');\nvar type = require('type');\nvar ease = require('ease');\n\n/**\n * Expose `Tween`.\n */\n\nmodule.exports = Tween;\n\n/**\n * Initialize a new `Tween` with `obj`.\n *\n * @param {Object|Array} obj\n * @api public\n */\n\nfunction Tween(obj) {\n if (!(this instanceof Tween)) return new Tween(obj);\n this._from = obj;\n this.ease('linear');\n this.duration(500);\n}\n\n/**\n * Mixin emitter.\n */\n\nEmitter(Tween.prototype);\n\n/**\n * Reset the tween.\n *\n * @api public\n */\n\nTween.prototype.reset = function(){\n this.isArray = 'array' === type(this._from);\n this._curr = clone(this._from);\n this._done = false;\n this._start = Date.now();\n return this;\n};\n\n/**\n * Tween to `obj` and reset internal state.\n *\n * tween.to({ x: 50, y: 100 })\n *\n * @param {Object|Array} obj\n * @return {Tween} self\n * @api public\n */\n\nTween.prototype.to = function(obj){\n this.reset();\n this._to = obj;\n return this;\n};\n\n/**\n * Set duration to `ms` [500].\n *\n * @param {Number} ms\n * @return {Tween} self\n * @api public\n */\n\nTween.prototype.duration = function(ms){\n this._duration = ms;\n return this;\n};\n\n/**\n * Set easing function to `fn`.\n *\n * tween.ease('in-out-sine')\n *\n * @param {String|Function} fn\n * @return {Tween}\n * @api public\n */\n\nTween.prototype.ease = function(fn){\n fn = 'function' == typeof fn ? fn : ease[fn];\n if (!fn) throw new TypeError('invalid easing function');\n this._ease = fn;\n return this;\n};\n\n/**\n * Stop the tween and immediately emit \"stop\" and \"end\".\n *\n * @return {Tween}\n * @api public\n */\n\nTween.prototype.stop = function(){\n this.stopped = true;\n this._done = true;\n this.emit('stop');\n this.emit('end');\n return this;\n};\n\n/**\n * Perform a step.\n *\n * @return {Tween} self\n * @api private\n */\n\nTween.prototype.step = function(){\n if (this._done) return;\n\n // duration\n var duration = this._duration;\n var now = Date.now();\n var delta = now - this._start;\n var done = delta >= duration;\n\n // complete\n if (done) {\n this._from = this._to;\n this._update(this._to);\n this._done = true;\n this.emit('end');\n return this;\n }\n\n // tween\n var from = this._from;\n var to = this._to;\n var curr = this._curr;\n var fn = this._ease;\n var p = (now - this._start) / duration;\n var n = fn(p);\n\n // array\n if (this.isArray) {\n for (var i = 0; i < from.length; ++i) {\n curr[i] = from[i] + (to[i] - from[i]) * n;\n }\n\n this._update(curr);\n return this;\n }\n\n // objech\n for (var k in from) {\n curr[k] = from[k] + (to[k] - from[k]) * n;\n }\n\n this._update(curr);\n return this;\n};\n\n/**\n * Set update function to `fn` or\n * when no argument is given this performs\n * a \"step\".\n *\n * @param {Function} fn\n * @return {Tween} self\n * @api public\n */\n\nTween.prototype.update = function(fn){\n if (0 == arguments.length) return this.step();\n this._update = fn;\n return this;\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-tween/index.js\n ** module id = 8\n ** module chunks = 0\n **/","\n/**\n * Expose `Emitter`.\n */\n\nmodule.exports = Emitter;\n\n/**\n * Initialize a new `Emitter`.\n *\n * @api public\n */\n\nfunction Emitter(obj) {\n if (obj) return mixin(obj);\n};\n\n/**\n * Mixin the emitter properties.\n *\n * @param {Object} obj\n * @return {Object}\n * @api private\n */\n\nfunction mixin(obj) {\n for (var key in Emitter.prototype) {\n obj[key] = Emitter.prototype[key];\n }\n return obj;\n}\n\n/**\n * Listen on the given `event` with `fn`.\n *\n * @param {String} event\n * @param {Function} fn\n * @return {Emitter}\n * @api public\n */\n\nEmitter.prototype.on =\nEmitter.prototype.addEventListener = function(event, fn){\n this._callbacks = this._callbacks || {};\n (this._callbacks['$' + event] = this._callbacks['$' + event] || [])\n .push(fn);\n return this;\n};\n\n/**\n * Adds an `event` listener that will be invoked a single\n * time then automatically removed.\n *\n * @param {String} event\n * @param {Function} fn\n * @return {Emitter}\n * @api public\n */\n\nEmitter.prototype.once = function(event, fn){\n function on() {\n this.off(event, on);\n fn.apply(this, arguments);\n }\n\n on.fn = fn;\n this.on(event, on);\n return this;\n};\n\n/**\n * Remove the given callback for `event` or all\n * registered callbacks.\n *\n * @param {String} event\n * @param {Function} fn\n * @return {Emitter}\n * @api public\n */\n\nEmitter.prototype.off =\nEmitter.prototype.removeListener =\nEmitter.prototype.removeAllListeners =\nEmitter.prototype.removeEventListener = function(event, fn){\n this._callbacks = this._callbacks || {};\n\n // all\n if (0 == arguments.length) {\n this._callbacks = {};\n return this;\n }\n\n // specific event\n var callbacks = this._callbacks['$' + event];\n if (!callbacks) return this;\n\n // remove all handlers\n if (1 == arguments.length) {\n delete this._callbacks['$' + event];\n return this;\n }\n\n // remove specific handler\n var cb;\n for (var i = 0; i < callbacks.length; i++) {\n cb = callbacks[i];\n if (cb === fn || cb.fn === fn) {\n callbacks.splice(i, 1);\n break;\n }\n }\n return this;\n};\n\n/**\n * Emit `event` with the given args.\n *\n * @param {String} event\n * @param {Mixed} ...\n * @return {Emitter}\n */\n\nEmitter.prototype.emit = function(event){\n this._callbacks = this._callbacks || {};\n var args = [].slice.call(arguments, 1)\n , callbacks = this._callbacks['$' + event];\n\n if (callbacks) {\n callbacks = callbacks.slice(0);\n for (var i = 0, len = callbacks.length; i < len; ++i) {\n callbacks[i].apply(this, args);\n }\n }\n\n return this;\n};\n\n/**\n * Return array of callbacks for `event`.\n *\n * @param {String} event\n * @return {Array}\n * @api public\n */\n\nEmitter.prototype.listeners = function(event){\n this._callbacks = this._callbacks || {};\n return this._callbacks['$' + event] || [];\n};\n\n/**\n * Check if this emitter has `event` handlers.\n *\n * @param {String} event\n * @return {Boolean}\n * @api public\n */\n\nEmitter.prototype.hasListeners = function(event){\n return !! this.listeners(event).length;\n};\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-tween/~/component-emitter/index.js\n ** module id = 9\n ** module chunks = 0\n **/","/**\n * Module dependencies.\n */\n\nvar type;\ntry {\n type = require('component-type');\n} catch (_) {\n type = require('type');\n}\n\n/**\n * Module exports.\n */\n\nmodule.exports = clone;\n\n/**\n * Clones objects.\n *\n * @param {Mixed} any object\n * @api public\n */\n\nfunction clone(obj){\n switch (type(obj)) {\n case 'object':\n var copy = {};\n for (var key in obj) {\n if (obj.hasOwnProperty(key)) {\n copy[key] = clone(obj[key]);\n }\n }\n return copy;\n\n case 'array':\n var copy = new Array(obj.length);\n for (var i = 0, l = obj.length; i < l; i++) {\n copy[i] = clone(obj[i]);\n }\n return copy;\n\n case 'regexp':\n // from millermedeiros/amd-utils - MIT\n var flags = '';\n flags += obj.multiline ? 'm' : '';\n flags += obj.global ? 'g' : '';\n flags += obj.ignoreCase ? 'i' : '';\n return new RegExp(obj.source, flags);\n\n case 'date':\n return new Date(obj.getTime());\n\n default: // string, number, boolean, …\n return obj;\n }\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-clone/index.js\n ** module id = 10\n ** module chunks = 0\n **/","/**\n * toString ref.\n */\n\nvar toString = Object.prototype.toString;\n\n/**\n * Return the type of `val`.\n *\n * @param {Mixed} val\n * @return {String}\n * @api public\n */\n\nmodule.exports = function(val){\n switch (toString.call(val)) {\n case '[object Date]': return 'date';\n case '[object RegExp]': return 'regexp';\n case '[object Arguments]': return 'arguments';\n case '[object Array]': return 'array';\n case '[object Error]': return 'error';\n }\n\n if (val === null) return 'null';\n if (val === undefined) return 'undefined';\n if (val !== val) return 'nan';\n if (val && val.nodeType === 1) return 'element';\n\n val = val.valueOf\n ? val.valueOf()\n : Object.prototype.valueOf.apply(val)\n\n return typeof val;\n};\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-type/index.js\n ** module id = 11\n ** module chunks = 0\n **/","\n// easing functions from \"Tween.js\"\n\nexports.linear = function(n){\n return n;\n};\n\nexports.inQuad = function(n){\n return n * n;\n};\n\nexports.outQuad = function(n){\n return n * (2 - n);\n};\n\nexports.inOutQuad = function(n){\n n *= 2;\n if (n < 1) return 0.5 * n * n;\n return - 0.5 * (--n * (n - 2) - 1);\n};\n\nexports.inCube = function(n){\n return n * n * n;\n};\n\nexports.outCube = function(n){\n return --n * n * n + 1;\n};\n\nexports.inOutCube = function(n){\n n *= 2;\n if (n < 1) return 0.5 * n * n * n;\n return 0.5 * ((n -= 2 ) * n * n + 2);\n};\n\nexports.inQuart = function(n){\n return n * n * n * n;\n};\n\nexports.outQuart = function(n){\n return 1 - (--n * n * n * n);\n};\n\nexports.inOutQuart = function(n){\n n *= 2;\n if (n < 1) return 0.5 * n * n * n * n;\n return -0.5 * ((n -= 2) * n * n * n - 2);\n};\n\nexports.inQuint = function(n){\n return n * n * n * n * n;\n}\n\nexports.outQuint = function(n){\n return --n * n * n * n * n + 1;\n}\n\nexports.inOutQuint = function(n){\n n *= 2;\n if (n < 1) return 0.5 * n * n * n * n * n;\n return 0.5 * ((n -= 2) * n * n * n * n + 2);\n};\n\nexports.inSine = function(n){\n return 1 - Math.cos(n * Math.PI / 2 );\n};\n\nexports.outSine = function(n){\n return Math.sin(n * Math.PI / 2);\n};\n\nexports.inOutSine = function(n){\n return .5 * (1 - Math.cos(Math.PI * n));\n};\n\nexports.inExpo = function(n){\n return 0 == n ? 0 : Math.pow(1024, n - 1);\n};\n\nexports.outExpo = function(n){\n return 1 == n ? n : 1 - Math.pow(2, -10 * n);\n};\n\nexports.inOutExpo = function(n){\n if (0 == n) return 0;\n if (1 == n) return 1;\n if ((n *= 2) < 1) return .5 * Math.pow(1024, n - 1);\n return .5 * (-Math.pow(2, -10 * (n - 1)) + 2);\n};\n\nexports.inCirc = function(n){\n return 1 - Math.sqrt(1 - n * n);\n};\n\nexports.outCirc = function(n){\n return Math.sqrt(1 - (--n * n));\n};\n\nexports.inOutCirc = function(n){\n n *= 2\n if (n < 1) return -0.5 * (Math.sqrt(1 - n * n) - 1);\n return 0.5 * (Math.sqrt(1 - (n -= 2) * n) + 1);\n};\n\nexports.inBack = function(n){\n var s = 1.70158;\n return n * n * (( s + 1 ) * n - s);\n};\n\nexports.outBack = function(n){\n var s = 1.70158;\n return --n * n * ((s + 1) * n + s) + 1;\n};\n\nexports.inOutBack = function(n){\n var s = 1.70158 * 1.525;\n if ( ( n *= 2 ) < 1 ) return 0.5 * ( n * n * ( ( s + 1 ) * n - s ) );\n return 0.5 * ( ( n -= 2 ) * n * ( ( s + 1 ) * n + s ) + 2 );\n};\n\nexports.inBounce = function(n){\n return 1 - exports.outBounce(1 - n);\n};\n\nexports.outBounce = function(n){\n if ( n < ( 1 / 2.75 ) ) {\n return 7.5625 * n * n;\n } else if ( n < ( 2 / 2.75 ) ) {\n return 7.5625 * ( n -= ( 1.5 / 2.75 ) ) * n + 0.75;\n } else if ( n < ( 2.5 / 2.75 ) ) {\n return 7.5625 * ( n -= ( 2.25 / 2.75 ) ) * n + 0.9375;\n } else {\n return 7.5625 * ( n -= ( 2.625 / 2.75 ) ) * n + 0.984375;\n }\n};\n\nexports.inOutBounce = function(n){\n if (n < .5) return exports.inBounce(n * 2) * .5;\n return exports.outBounce(n * 2 - 1) * .5 + .5;\n};\n\n// aliases\n\nexports['in-quad'] = exports.inQuad;\nexports['out-quad'] = exports.outQuad;\nexports['in-out-quad'] = exports.inOutQuad;\nexports['in-cube'] = exports.inCube;\nexports['out-cube'] = exports.outCube;\nexports['in-out-cube'] = exports.inOutCube;\nexports['in-quart'] = exports.inQuart;\nexports['out-quart'] = exports.outQuart;\nexports['in-out-quart'] = exports.inOutQuart;\nexports['in-quint'] = exports.inQuint;\nexports['out-quint'] = exports.outQuint;\nexports['in-out-quint'] = exports.inOutQuint;\nexports['in-sine'] = exports.inSine;\nexports['out-sine'] = exports.outSine;\nexports['in-out-sine'] = exports.inOutSine;\nexports['in-expo'] = exports.inExpo;\nexports['out-expo'] = exports.outExpo;\nexports['in-out-expo'] = exports.inOutExpo;\nexports['in-circ'] = exports.inCirc;\nexports['out-circ'] = exports.outCirc;\nexports['in-out-circ'] = exports.inOutCirc;\nexports['in-back'] = exports.inBack;\nexports['out-back'] = exports.outBack;\nexports['in-out-back'] = exports.inOutBack;\nexports['in-bounce'] = exports.inBounce;\nexports['out-bounce'] = exports.outBounce;\nexports['in-out-bounce'] = exports.inOutBounce;\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/ease-component/index.js\n ** module id = 12\n ** module chunks = 0\n **/","\r\n/**\r\n * Expose `Emitter`.\r\n */\r\n\r\nif (typeof module !== 'undefined') {\r\n module.exports = Emitter;\r\n}\r\n\r\n/**\r\n * Initialize a new `Emitter`.\r\n *\r\n * @api public\r\n */\r\n\r\nfunction Emitter(obj) {\r\n if (obj) return mixin(obj);\r\n};\r\n\r\n/**\r\n * Mixin the emitter properties.\r\n *\r\n * @param {Object} obj\r\n * @return {Object}\r\n * @api private\r\n */\r\n\r\nfunction mixin(obj) {\r\n for (var key in Emitter.prototype) {\r\n obj[key] = Emitter.prototype[key];\r\n }\r\n return obj;\r\n}\r\n\r\n/**\r\n * Listen on the given `event` with `fn`.\r\n *\r\n * @param {String} event\r\n * @param {Function} fn\r\n * @return {Emitter}\r\n * @api public\r\n */\r\n\r\nEmitter.prototype.on =\r\nEmitter.prototype.addEventListener = function(event, fn){\r\n this._callbacks = this._callbacks || {};\r\n (this._callbacks['$' + event] = this._callbacks['$' + event] || [])\r\n .push(fn);\r\n return this;\r\n};\r\n\r\n/**\r\n * Adds an `event` listener that will be invoked a single\r\n * time then automatically removed.\r\n *\r\n * @param {String} event\r\n * @param {Function} fn\r\n * @return {Emitter}\r\n * @api public\r\n */\r\n\r\nEmitter.prototype.once = function(event, fn){\r\n function on() {\r\n this.off(event, on);\r\n fn.apply(this, arguments);\r\n }\r\n\r\n on.fn = fn;\r\n this.on(event, on);\r\n return this;\r\n};\r\n\r\n/**\r\n * Remove the given callback for `event` or all\r\n * registered callbacks.\r\n *\r\n * @param {String} event\r\n * @param {Function} fn\r\n * @return {Emitter}\r\n * @api public\r\n */\r\n\r\nEmitter.prototype.off =\r\nEmitter.prototype.removeListener =\r\nEmitter.prototype.removeAllListeners =\r\nEmitter.prototype.removeEventListener = function(event, fn){\r\n this._callbacks = this._callbacks || {};\r\n\r\n // all\r\n if (0 == arguments.length) {\r\n this._callbacks = {};\r\n return this;\r\n }\r\n\r\n // specific event\r\n var callbacks = this._callbacks['$' + event];\r\n if (!callbacks) return this;\r\n\r\n // remove all handlers\r\n if (1 == arguments.length) {\r\n delete this._callbacks['$' + event];\r\n return this;\r\n }\r\n\r\n // remove specific handler\r\n var cb;\r\n for (var i = 0; i < callbacks.length; i++) {\r\n cb = callbacks[i];\r\n if (cb === fn || cb.fn === fn) {\r\n callbacks.splice(i, 1);\r\n break;\r\n }\r\n }\r\n return this;\r\n};\r\n\r\n/**\r\n * Emit `event` with the given args.\r\n *\r\n * @param {String} event\r\n * @param {Mixed} ...\r\n * @return {Emitter}\r\n */\r\n\r\nEmitter.prototype.emit = function(event){\r\n this._callbacks = this._callbacks || {};\r\n var args = [].slice.call(arguments, 1)\r\n , callbacks = this._callbacks['$' + event];\r\n\r\n if (callbacks) {\r\n callbacks = callbacks.slice(0);\r\n for (var i = 0, len = callbacks.length; i < len; ++i) {\r\n callbacks[i].apply(this, args);\r\n }\r\n }\r\n\r\n return this;\r\n};\r\n\r\n/**\r\n * Return array of callbacks for `event`.\r\n *\r\n * @param {String} event\r\n * @return {Array}\r\n * @api public\r\n */\r\n\r\nEmitter.prototype.listeners = function(event){\r\n this._callbacks = this._callbacks || {};\r\n return this._callbacks['$' + event] || [];\r\n};\r\n\r\n/**\r\n * Check if this emitter has `event` handlers.\r\n *\r\n * @param {String} event\r\n * @return {Boolean}\r\n * @api public\r\n */\r\n\r\nEmitter.prototype.hasListeners = function(event){\r\n return !! this.listeners(event).length;\r\n};\r\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-emitter/index.js\n ** module id = 13\n ** module chunks = 0\n **/","var endEvents = [\n 'touchend'\n]\n\nmodule.exports = Tap\n\n// default tap timeout in ms\nTap.timeout = 200\n\nfunction Tap(callback, options) {\n options = options || {}\n // if the user holds his/her finger down for more than 200ms,\n // then it's not really considered a tap.\n // however, you can make this configurable.\n var timeout = options.timeout || Tap.timeout\n\n // to keep track of the original listener\n listener.handler = callback\n\n return listener\n\n // el.addEventListener('touchstart', listener)\n function listener(e1) {\n // tap should only happen with a single finger\n if (!e1.touches || e1.touches.length > 1) return\n\n var el = e1.target\n var context = this\n var args = arguments;\n\n var timeout_id = setTimeout(cleanup, timeout)\n\n el.addEventListener('touchmove', cleanup)\n\n endEvents.forEach(function (event) {\n el.addEventListener(event, done)\n })\n\n function done(e2) {\n // since touchstart is added on the same tick\n // and because of bubbling,\n // it'll execute this on the same touchstart.\n // this filters out the same touchstart event.\n if (e1 === e2) return\n\n cleanup()\n\n // already handled\n if (e2.defaultPrevented) return\n\n // overwrite these functions so that they all to both start and events.\n var preventDefault = e1.preventDefault\n var stopPropagation = e1.stopPropagation\n\n e1.stopPropagation = function () {\n stopPropagation.call(e1)\n stopPropagation.call(e2)\n }\n\n e1.preventDefault = function () {\n preventDefault.call(e1)\n preventDefault.call(e2)\n }\n\n // calls the handler with the `end` event,\n // but i don't think it matters.\n callback.apply(context, args)\n }\n\n // cleanup end events\n // to cancel the tap, just run this early\n function cleanup(e2) {\n // if it's the same event as the origin,\n // then don't actually cleanup.\n // hit issues with this - don't remember\n if (e1 === e2) return\n\n clearTimeout(timeout_id)\n\n el.removeEventListener('touchmove', cleanup)\n\n endEvents.forEach(function (event) {\n el.removeEventListener(event, done)\n })\n }\n }\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-tap-event/index.js\n ** module id = 14\n ** module chunks = 0\n **/","var events = require('events')\nvar event = require('event')\nvar Emitter = require('emitter')\nvar tap = require('tap-event')\nvar raf = require('raf')\nvar Tween = require('tween')\nvar detect = require('prop-detect')\nvar util = require('./util')\nvar Pinch = require('./pinch')\nvar has3d = detect.has3d\nvar transform = detect.transform\nvar PI = Math.PI\n\n/**\n * Init PinchZoom with element and optional opt\n *\n * @public\n * @param {Element} el\n * @param {Object} opt\n */\nfunction PinchZoom(el, opt) {\n if (!(this instanceof PinchZoom)) return new PinchZoom(el, opt)\n opt = opt || {}\n this.el = el\n this.padding = opt.padding || 0\n this.container = el.parentNode\n this.container.style.overflow = 'hidden'\n this.scale = 1\n this.maxScale = opt.maxScale || 5\n // maximun duration in ms for fast swipe\n this.threshold = opt.threshold || 200\n // minimum moved distance for fast swipe\n this.fastThreshold = opt.fastThreshold || 30\n var rect = el.getBoundingClientRect()\n this.tapreset = opt.tapreset || false\n this.sx = rect.left + rect.width/2\n this.sy = rect.top + rect.height/2\n // transform x y\n this.tx = this.ty = 0\n this.animating = false\n this.pinch = new Pinch(el, this.onPinchMove.bind(this))\n this.pinch.on('start', this.onPinchStart.bind(this))\n this.pinch.on('end', this.onPinchEnd.bind(this))\n if (has3d) {\n this.el.style[transform + 'Origin'] = 'center center 0px'\n } else {\n this.el.style[transform + 'Origin'] = 'center center'\n }\n var _ontap = this._ontap = tap(this.ontap.bind(this))\n event.bind(el, 'touchstart', _ontap)\n this.events = events(el, this)\n this.docEvents = events(document, this);\n if (opt.draggable) {\n this.events.bind('touchstart')\n this.events.bind('touchmove')\n this.events.bind('touchend')\n this.docEvents.bind('touchend', 'ontouchend')\n }\n}\n\nEmitter(PinchZoom.prototype)\n\n/**\n * touchstart event listener for single touch\n *\n * @private\n * @param {Event} e\n */\nPinchZoom.prototype.ontouchstart = function (e) {\n var touches = e.touches\n if (this.animating) {\n e.stopPropagation()\n this.tween.stop()\n }\n if (!touches || 1 != touches.length) return\n var rect = this.el.getBoundingClientRect()\n this.translateY = rect.top < 0 || rect.bottom > this.container.clientHeight\n this.speed = 0\n var d = Date.now()\n var t = e.touches[0]\n var sx = t.clientX\n var sy = t.clientY\n var self = this\n var start = {x: this.tx, y: this.ty}\n var limit = this.getLimitation(100)\n this.move = function (e, touch) {\n self.down = {\n x: sx,\n y: sy,\n at: d\n }\n var cx = touch.clientX\n var cy = touch.clientY\n var px = this.prev ? this.prev.x : sx\n var py = this.prev ? this.prev.y : sy\n e.preventDefault()\n var leftOrRight = Math.abs(cx - px) > Math.abs(cy - py)\n if (self.scale != 1 && !leftOrRight) e.stopPropagation()\n self.calcuteSpeed(cx, cy)\n var tx = start.x + cx - sx\n var ty = start.y + cy - sy\n var res = util.limit(tx, ty, limit)\n var dx = res.x - tx\n if (self.scale == 1 && leftOrRight) {\n res.y = this.ty\n this.angle = cx - px > 0 ? 0 : PI\n }\n if (leftOrRight) this.emit('move', dx)\n if (!this.translateY) res.y = start.y\n self.setTransform(res.x, res.y, self.scale)\n }\n}\n\n/**\n * touchmove event listener for single touch\n *\n * @private\n * @param {Event} e\n */\nPinchZoom.prototype.ontouchmove = function (e) {\n if (!this.move || this.animating ||this.pinch.pinching) return\n var touches = e.touches\n if (!touches || 1 != touches.length) {\n this.move = null\n return\n }\n var touch = touches[0]\n this.move(e, touch)\n}\n\n/**\n * touchend event listener for single touch\n *\n * @private\n * @param {Event} e\n */\nPinchZoom.prototype.ontouchend = function (e) {\n if (this.move == null) return\n if (this.down == null) return this.move = null\n //if (this.tween) this.tween.stop()\n if (this.pinch.pinching || this.animating) return\n\n var t = Date.now()\n var touch = e.changedTouches[0]\n var x = touch.clientX\n var y = touch.clientY\n var sx = this.down.x\n var sy = this.down.y\n\n this.calcuteSpeed(x, y)\n var dx = Math.abs(x - sx)\n var limit = this.getLimitation()\n if (dx > this.fastThreshold && dx > Math.abs(y - sy) &&\n (t - this.down.at) < this.threshold && (this.tx <= limit.minx || this.tx >= limit.maxx)) {\n var dir = x > sx ? 'right' : 'left'\n this.down = this.move = null\n return this.emit('swipe', dir)\n }\n\n this.down = this.move = null\n this.emit('end')\n if (this.speed) this.momentum()\n}\n\nPinchZoom.prototype.momentum = function () {\n var deceleration = 0.001\n var limit = this.getLimitation(this.padding)\n var speed = Math.min(this.speed, 4)\n var rate = (4 - PI)/2\n var dis = rate * (speed * speed) / (2 * deceleration)\n var tx = this.tx + dis*Math.cos(this.angle)\n var ty = this.ty + dis*Math.sin(this.angle)\n var res = util.limit(tx, ty, limit)\n var changed = ((this.scale > 1 && (tx < limit.minx || tx > limit.maxx))\n || ty < limit.miny || ty > limit.maxy)\n var ease = changed ? outBack : 'out-circ'\n var d = util.distance([tx, ty, res.x, res.y])\n\n var duration = (1 - d/dis) * speed/deceleration\n if (this.ty < limit.miny || this.ty > limit.maxy) {\n duration = 500\n ease = 'out-circ'\n }\n if (!this.translateY) res.y = this.ty\n return this.animate({x: res.x, y: res.y, scale: this.scale}, duration, ease)\n}\n\n/**\n * get limitation values\n *\n * @private\n */\nPinchZoom.prototype.getLimitation = function (padY) {\n padY = padY || 0\n var viewport = util.viewport\n var vw = viewport.width\n var vh = viewport.height\n var rect = this.el.getBoundingClientRect()\n var prect = this.el.parentNode.getBoundingClientRect()\n return {\n maxx: this.tx - rect.left + prect.left + this.padding,\n minx: this.tx - (rect.left - prect.left + rect.width - vw) - this.padding,\n miny: vh > rect.height ? this.ty - rect.top\n : this.ty - rect.top - (rect.height - vh) - padY,\n maxy: vh > rect.height ? this.ty + (vh - rect.top - rect.height)\n : this.ty - rect.top + padY\n }\n}\n\n/**\n * tap event handler\n *\n * @private\n */\nPinchZoom.prototype.ontap = function () {\n if (this.animating) return this.tween.stop()\n var ts = Date.now()\n // double tap\n if (this.lastTap && ts - this.lastTap < 300) {\n this.emit('tap')\n return\n }\n if (this.scale == 1) {\n //could be used for reset popup\n this.emit('tap')\n return\n }\n this.lastTap = Date.now()\n if (this.tapreset) {\n this.reset()\n } else {\n this.emit('tap')\n }\n}\n\n/**\n * Reset to initial state with animation\n *\n * @public\n * @returns {Promise}\n */\nPinchZoom.prototype.reset = function () {\n this.emit('scale', {x: 0, y: 0, scale: 1})\n var promise = this.animate({x: 0, y: 0, scale: 1}, 200)\n return promise\n}\n\n/**\n * PinchStart event handler\n * @param {Obejct} point\n * @private\n */\nPinchZoom.prototype.onPinchStart = function (point) {\n if (this.animating) this.tween.stop()\n this.start = point\n this.bx = this.sx + this.tx\n this.by = this.sy + this.ty\n this.startScale = this.scale\n this.emit('start')\n}\n\n/**\n * PinchMove event handler\n * @param {Event} e\n * @private\n */\nPinchZoom.prototype.onPinchMove = function (e) {\n if (this.animating) return\n this.point = {x: e.x, y: e.y}\n var mx = e.x - this.start.x\n var my = e.y - this.start.y\n // center position\n var x = this.bx + mx\n var y = this.by + my\n var a = util.getAngle(x, y, e.x, e.y)\n var dis = util.distance([e.y, e.x, y, x]) * (e.scale - 1)\n var tx = this.bx - this.sx + mx - dis*Math.cos(a)\n var ty = this.by - this.sy + my - dis*Math.sin(a)\n this.setTransform(tx, ty, e.scale * this.startScale)\n}\n\n/**\n * PinchEnd event handler\n *\n * @private\n */\nPinchZoom.prototype.onPinchEnd = function () {\n if (this.scale !== this.startScale) {\n this.emit('scale', {x: this.tx, y: this.ty, scale: this.scale})\n }\n this.startScale = this.scale\n var p = this.checkScale()\n if (!p) this.checkPosition()\n}\n\n/**\n * set transform properties of element\n *\n * @public\n * @param {Number} x\n * @param {Number} y\n * @param {Number} scale\n */\nPinchZoom.prototype.setTransform = function (x, y, scale) {\n if (isNaN(x) || isNaN(y)) return\n this.tx = x\n this.ty = y\n this.scale = scale\n if (has3d) {\n this.el.style[transform] = 'translate3d(' + x + 'px, ' + y + 'px, 0) '\n + ' scale3d(' + scale + ',' + scale + ', 1)'\n } else {\n this.el.style[transform] = 'translate(' + x + 'px, ' + y + 'px) '\n + ' scale(' + scale + ',' + scale + ')'\n }\n}\n\n/**\n * animate transoform properties\n *\n * @public\n * @param {Element} o\n * @param {Number} duration\n * @param {String} ease\n */\nPinchZoom.prototype.animate = function (o, duration, ease) {\n var current = {x: this.tx, y: this.ty, scale: this.scale}\n ease = ease || 'out-circ'\n var self = this\n this.animating = true\n var tween = this.tween = Tween(current)\n .ease(ease)\n .to(o)\n .duration(duration)\n\n tween.update(function(o){\n self.setTransform(o.x, o.y, o.scale)\n })\n\n var promise = new Promise(function (resolve) {\n tween.on('end', function(){\n animate = function(){} // eslint-disable-line\n self.animating = false\n resolve()\n })\n })\n\n function animate() {\n raf(animate)\n tween.update()\n }\n\n animate()\n return promise\n}\n\n/**\n * unbind all event listeners and reset element\n *\n * @public\n */\nPinchZoom.prototype.unbind = function () {\n this.setTransform(0, 0, 1)\n this.pinch.unbind()\n this.events.unbind()\n this.docEvents.unbind()\n event.unbind(this.el, 'touchstart', this._ontap)\n}\n\n/**\n * Reset position if invalid scale or offset.\n *\n * @private\n */\nPinchZoom.prototype.checkPosition = function () {\n var rect = this.el.getBoundingClientRect()\n var dest = {x: this.tx, y: this.ty, scale: this.scale}\n\n var viewport = util.viewport\n var vw = viewport.width\n var vh = viewport.height\n var pad = this.padding\n if (rect.left > pad) {\n dest.x = this.tx - rect.left + pad\n } else if (rect.left + rect.width < vw - pad) {\n dest.x = this.tx + (vw - rect.left - rect.width - pad)\n }\n var bottom = rect.top + rect.height\n if (rect.top > 0 && bottom > vh - pad) {\n // too low\n dest.y = this.ty - (bottom - vh + pad)\n } else if (rect.top < pad && bottom < vh - pad) {\n // too high\n dest.y = this.ty - rect.top + pad\n }\n if (dest.x !== this.tx || dest.y !== this.ty) {\n return this.animate(dest, 200)\n }\n return Promise.resolve()\n}\n\n/**\n * Reset scale if scale not valid\n *\n * @private\n */\nPinchZoom.prototype.checkScale = function () {\n if (this.scale < 1) return this.reset()\n if (this.scale > this.maxScale) {\n var p = this.point\n return this.scaleAt(p.x, p.y, this.maxScale)\n }\n}\n\n/**\n * Limit scale to pinch point\n * @param {Number} scale\n * @private\n */\nPinchZoom.prototype.limitScale = function (scale) {\n var x = this.sx + this.tx\n var y = this.sy + this.ty\n var point = this.point\n var a = Math.atan((point.y - y)/(point.x - x))\n if ((point.y < y && point.x < x) || (point.y > y && point.x < x)) {\n a = a + PI\n }\n var dis = util.distance([point.y, point.x, y, x]) * (this.scale - scale)\n var tx = this.tx + dis*Math.cos(a)\n var ty = this.ty + dis*Math.sin(a)\n return this.animate({x: tx, y: ty, scale: scale}, 200)\n}\n\n/**\n * change el to scale at x,y with specified scale\n *\n * @public\n * @param {Number} x\n * @param {Number} y\n * @param {Number} scale\n * @returns {Promise}\n */\nPinchZoom.prototype.scaleAt = function (x, y, scale) {\n var cx = this.sx + this.tx\n var cy = this.sy + this.ty\n var a = util.getAngle(cx, cy, x, y)\n var dis = util.distance([y, x, cy, cx]) * (1 - scale/this.scale)\n var tx = this.tx + dis*Math.cos(a)\n var ty = this.ty + dis*Math.sin(a)\n return this.animate({x: tx, y: ty, scale: scale}, 300)\n}\n\nPinchZoom.prototype.calcuteSpeed = function(x, y) {\n var prev = this.prev || this.down\n var ts = Date.now()\n var dt = ts - prev.at\n if (ts - this.down.at < 50 || dt > 50) {\n var distance = util.distance([prev.x, prev.y, x, y])\n this.speed = Math.abs(distance / dt)\n this.angle = util.getAngle(prev.x, prev.y, x, y)\n }\n if (dt > 50) {\n this.prev = {x: x, y: y, at: ts}\n }\n}\n\nfunction outBack(n) {\n var s = 1.20158;\n return --n * n * ((s + 1) * n + s) + 1;\n}\n\nmodule.exports = PinchZoom\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/pinch-zoom/lib/index.js\n ** module id = 15\n ** module chunks = 0\n **/","\n/**\n * Module dependencies.\n */\n\ntry {\n var events = require('event');\n} catch(err) {\n var events = require('component-event');\n}\n\ntry {\n var delegate = require('delegate');\n} catch(err) {\n var delegate = require('component-delegate');\n}\n\n/**\n * Expose `Events`.\n */\n\nmodule.exports = Events;\n\n/**\n * Initialize an `Events` with the given\n * `el` object which events will be bound to,\n * and the `obj` which will receive method calls.\n *\n * @param {Object} el\n * @param {Object} obj\n * @api public\n */\n\nfunction Events(el, obj) {\n if (!(this instanceof Events)) return new Events(el, obj);\n if (!el) throw new Error('element required');\n if (!obj) throw new Error('object required');\n this.el = el;\n this.obj = obj;\n this._events = {};\n}\n\n/**\n * Subscription helper.\n */\n\nEvents.prototype.sub = function(event, method, cb){\n this._events[event] = this._events[event] || {};\n this._events[event][method] = cb;\n};\n\n/**\n * Bind to `event` with optional `method` name.\n * When `method` is undefined it becomes `event`\n * with the \"on\" prefix.\n *\n * Examples:\n *\n * Direct event handling:\n *\n * events.bind('click') // implies \"onclick\"\n * events.bind('click', 'remove')\n * events.bind('click', 'sort', 'asc')\n *\n * Delegated event handling:\n *\n * events.bind('click li > a')\n * events.bind('click li > a', 'remove')\n * events.bind('click a.sort-ascending', 'sort', 'asc')\n * events.bind('click a.sort-descending', 'sort', 'desc')\n *\n * @param {String} event\n * @param {String|function} [method]\n * @return {Function} callback\n * @api public\n */\n\nEvents.prototype.bind = function(event, method){\n var e = parse(event);\n var el = this.el;\n var obj = this.obj;\n var name = e.name;\n var method = method || 'on' + name;\n var args = [].slice.call(arguments, 2);\n\n // callback\n function cb(){\n var a = [].slice.call(arguments).concat(args);\n obj[method].apply(obj, a);\n }\n\n // bind\n if (e.selector) {\n cb = delegate.bind(el, e.selector, name, cb);\n } else {\n events.bind(el, name, cb);\n }\n\n // subscription for unbinding\n this.sub(name, method, cb);\n\n return cb;\n};\n\n/**\n * Unbind a single binding, all bindings for `event`,\n * or all bindings within the manager.\n *\n * Examples:\n *\n * Unbind direct handlers:\n *\n * events.unbind('click', 'remove')\n * events.unbind('click')\n * events.unbind()\n *\n * Unbind delegate handlers:\n *\n * events.unbind('click', 'remove')\n * events.unbind('click')\n * events.unbind()\n *\n * @param {String|Function} [event]\n * @param {String|Function} [method]\n * @api public\n */\n\nEvents.prototype.unbind = function(event, method){\n if (0 == arguments.length) return this.unbindAll();\n if (1 == arguments.length) return this.unbindAllOf(event);\n\n // no bindings for this event\n var bindings = this._events[event];\n if (!bindings) return;\n\n // no bindings for this method\n var cb = bindings[method];\n if (!cb) return;\n\n events.unbind(this.el, event, cb);\n};\n\n/**\n * Unbind all events.\n *\n * @api private\n */\n\nEvents.prototype.unbindAll = function(){\n for (var event in this._events) {\n this.unbindAllOf(event);\n }\n};\n\n/**\n * Unbind all events for `event`.\n *\n * @param {String} event\n * @api private\n */\n\nEvents.prototype.unbindAllOf = function(event){\n var bindings = this._events[event];\n if (!bindings) return;\n\n for (var method in bindings) {\n this.unbind(event, method);\n }\n};\n\n/**\n * Parse `event`.\n *\n * @param {String} event\n * @return {Object}\n * @api private\n */\n\nfunction parse(event) {\n var parts = event.split(/ +/);\n return {\n name: parts.shift(),\n selector: parts.join(' ')\n }\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-events/index.js\n ** module id = 16\n ** module chunks = 0\n **/","/**\n * Module dependencies.\n */\n\ntry {\n var closest = require('closest');\n} catch(err) {\n var closest = require('component-closest');\n}\n\ntry {\n var event = require('event');\n} catch(err) {\n var event = require('component-event');\n}\n\n/**\n * Delegate event `type` to `selector`\n * and invoke `fn(e)`. A callback function\n * is returned which may be passed to `.unbind()`.\n *\n * @param {Element} el\n * @param {String} selector\n * @param {String} type\n * @param {Function} fn\n * @param {Boolean} capture\n * @return {Function}\n * @api public\n */\n\nexports.bind = function(el, selector, type, fn, capture){\n return event.bind(el, type, function(e){\n var target = e.target || e.srcElement;\n e.delegateTarget = closest(target, selector, true, el);\n if (e.delegateTarget) fn.call(el, e);\n }, capture);\n};\n\n/**\n * Unbind event `type`'s callback `fn`.\n *\n * @param {Element} el\n * @param {String} type\n * @param {Function} fn\n * @param {Boolean} capture\n * @api public\n */\n\nexports.unbind = function(el, type, fn, capture){\n event.unbind(el, type, fn, capture);\n};\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-delegate/index.js\n ** module id = 17\n ** module chunks = 0\n **/","/**\n * Module Dependencies\n */\n\ntry {\n var matches = require('matches-selector')\n} catch (err) {\n var matches = require('component-matches-selector')\n}\n\n/**\n * Export `closest`\n */\n\nmodule.exports = closest\n\n/**\n * Closest\n *\n * @param {Element} el\n * @param {String} selector\n * @param {Element} scope (optional)\n */\n\nfunction closest (el, selector, scope) {\n scope = scope || document.documentElement;\n\n // walk up the dom\n while (el && el !== scope) {\n if (matches(el, selector)) return el;\n el = el.parentNode;\n }\n\n // check scope for match\n return matches(el, selector) ? el : null;\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-closest/index.js\n ** module id = 18\n ** module chunks = 0\n **/","/**\n * Module dependencies.\n */\n\ntry {\n var query = require('query');\n} catch (err) {\n var query = require('component-query');\n}\n\n/**\n * Element prototype.\n */\n\nvar proto = Element.prototype;\n\n/**\n * Vendor function.\n */\n\nvar vendor = proto.matches\n || proto.webkitMatchesSelector\n || proto.mozMatchesSelector\n || proto.msMatchesSelector\n || proto.oMatchesSelector;\n\n/**\n * Expose `match()`.\n */\n\nmodule.exports = match;\n\n/**\n * Match `el` to `selector`.\n *\n * @param {Element} el\n * @param {String} selector\n * @return {Boolean}\n * @api public\n */\n\nfunction match(el, selector) {\n if (!el || el.nodeType !== 1) return false;\n if (vendor) return vendor.call(el, selector);\n var nodes = query.all(selector, el.parentNode);\n for (var i = 0; i < nodes.length; ++i) {\n if (nodes[i] == el) return true;\n }\n return false;\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/component-matches-selector/index.js\n ** module id = 19\n ** module chunks = 0\n **/","var transform = null\n;(function () {\n var styles = [\n 'webkitTransform',\n 'MozTransform',\n 'msTransform',\n 'OTransform',\n 'transform'\n ];\n\n var el = document.createElement('p');\n\n for (var i = 0; i < styles.length; i++) {\n if (null != el.style[styles[i]]) {\n transform = styles[i];\n break;\n }\n }\n})()\n\n/**\n * Transition-end mapping\n */\nvar transitionEnd = null\n;(function () {\n var map = {\n 'WebkitTransition' : 'webkitTransitionEnd',\n 'MozTransition' : 'transitionend',\n 'OTransition' : 'oTransitionEnd',\n 'msTransition' : 'MSTransitionEnd',\n 'transition' : 'transitionend'\n };\n\n /**\n * Expose `transitionend`\n */\n\n var el = document.createElement('p');\n\n for (var transition in map) {\n if (null != el.style[transition]) {\n transitionEnd = map[transition];\n break;\n }\n }\n})()\n\nexports.transitionend = transitionEnd\n\nexports.transition = require('transition-property')\n\nexports.transform = transform\n\nexports.touchAction = require('touchaction-property')\n\nexports.has3d = require('has-translate3d')\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/prop-detect/index.js\n ** module id = 20\n ** module chunks = 0\n **/","var styles = [\n 'webkitTransition',\n 'MozTransition',\n 'OTransition',\n 'msTransition',\n 'transition'\n]\n\nvar el = document.createElement('p')\nvar style\n\nfor (var i = 0; i < styles.length; i++) {\n if (null != el.style[styles[i]]) {\n style = styles[i]\n break\n }\n}\nel = null\n\nmodule.exports = style\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/transition-property/index.js\n ** module id = 21\n ** module chunks = 0\n **/","\n/**\n * Module exports.\n */\n\nmodule.exports = touchActionProperty();\n\n/**\n * Returns \"touchAction\", \"msTouchAction\", or null.\n */\n\nfunction touchActionProperty(doc) {\n if (!doc) doc = document;\n var div = doc.createElement('div');\n var prop = null;\n if ('touchAction' in div.style) prop = 'touchAction';\n else if ('msTouchAction' in div.style) prop = 'msTouchAction';\n div = null;\n return prop;\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/touchaction-property/index.js\n ** module id = 22\n ** module chunks = 0\n **/","\nvar prop = require('transform-property');\n\n// IE <=8 doesn't have `getComputedStyle`\nif (!prop || !window.getComputedStyle) {\n module.exports = false;\n\n} else {\n var map = {\n webkitTransform: '-webkit-transform',\n OTransform: '-o-transform',\n msTransform: '-ms-transform',\n MozTransform: '-moz-transform',\n transform: 'transform'\n };\n\n // from: https://gist.github.com/lorenzopolidori/3794226\n var el = document.createElement('div');\n el.style[prop] = 'translate3d(1px,1px,1px)';\n document.body.insertBefore(el, null);\n var val = getComputedStyle(el).getPropertyValue(map[prop]);\n document.body.removeChild(el);\n module.exports = null != val && val.length && 'none' != val;\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/has-translate3d/index.js\n ** module id = 23\n ** module chunks = 0\n **/","\nvar styles = [\n 'webkitTransform',\n 'MozTransform',\n 'msTransform',\n 'OTransform',\n 'transform'\n];\n\nvar el = document.createElement('p');\nvar style;\n\nfor (var i = 0; i < styles.length; i++) {\n style = styles[i];\n if (null != el.style[style]) {\n module.exports = style;\n break;\n }\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/transform-property/index.js\n ** module id = 24\n ** module chunks = 0\n **/","/**\n * Get the distance between two points\n *\n * @param {Array} arr [x1, y1, x2, y2]\n * @return {Number}\n * @api private\n */\n\nexports.distance = function (arr) {\n var x = Math.pow(arr[0] - arr[2], 2);\n var y = Math.pow(arr[1] - arr[3], 2);\n return Math.sqrt(x + y);\n}\n\n/**\n * Get the midpoint\n *\n * @param {Array} arr\n * @return {Object} coords\n * @api private\n */\n\nexports.midpoint = function (arr) {\n var coords = {};\n coords.x = (arr[0] + arr[2]) / 2;\n coords.y = (arr[1] + arr[3]) / 2;\n return coords;\n}\n\nObject.defineProperty(exports, 'viewport', {\n get: function () {\n return {\n height: Math.max(document.documentElement.clientHeight, window.innerHeight || 0),\n width: Math.max(document.documentElement.clientWidth, window.innerWidth || 0)\n }\n }\n})\n\n/**\n * getAngle\n *\n * @public\n * @param {Number} x\n * @param {Number} y\n * @param {Number} x1\n * @param {Number} y1\n * @returns {undefined}\n */\nexports.getAngle = function (x, y, x1, y1) {\n if (x == x1 && y == y1) return 0\n var a = Math.atan((y1 - y)/(x1 - x))\n if (x1 < x) return a + Math.PI\n return a\n}\n\nexports.limit = function (x, y, limit) {\n if (x < limit.minx) {\n x = limit.minx\n } else if (x > limit.maxx) {\n x = limit.maxx\n }\n if (y < limit.miny) {\n y = limit.miny\n } else if (y > limit.maxy) {\n y = limit.maxy\n }\n return {\n x: x,\n y: y\n }\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/pinch-zoom/lib/util.js\n ** module id = 25\n ** module chunks = 0\n **/","/*\n * Module dependencies\n */\n\nvar events = require('events')\nvar Emitter = require('emitter')\nvar E = require('./e')\nvar util = require('./util')\n\n/**\n * Export `Pinch`\n */\n\nmodule.exports = Pinch\n\n/**\n * Initialize `Pinch`\n *\n * @param {Element} el\n * @param {Function} fn\n * @return {Pinch}\n * @api public\n */\n\nfunction Pinch(el, fn) {\n if (!(this instanceof Pinch)) return new Pinch(el, fn)\n this.el = el\n this.parent = el.parentNode\n this.fn = fn || function(){}\n this.midpoint = null\n this.scale = 1\n this.lastScale = 1\n this.pinching = false\n this.events = events(el, this)\n this.events.bind('touchstart')\n this.events.bind('touchmove')\n this.events.bind('touchend')\n this.fingers = {}\n}\n\nEmitter(Pinch.prototype)\n\n/**\n * Touch start\n *\n * @param {Event} e\n * @return {Pinch}\n * @api private\n */\n\nPinch.prototype.ontouchstart = function(e) {\n var touches = e.touches\n if (!touches || 2 != touches.length) return this\n e.preventDefault()\n e.stopPropagation()\n\n var coords = []\n for(var i = 0, finger; i < touches.length; i++) {\n finger = touches[i]\n coords.push(finger.clientX, finger.clientY)\n }\n\n this.pinching = true\n this.distance = util.distance(coords)\n this.midpoint = util.midpoint(coords)\n this.emit('start', this.midpoint)\n return this\n}\n\n/**\n * Touch move\n *\n * @param {Event} e\n * @return {Pinch}\n * @api private\n */\n\nPinch.prototype.ontouchmove = function(e) {\n var touches = e.touches\n if (!touches || touches.length != 2 || !this.pinching) return this\n e.preventDefault()\n e.stopPropagation()\n var coords = []\n for(var i = 0, finger; i < touches.length ; i++) {\n finger = touches[i]\n coords.push(finger.clientX, finger.clientY)\n }\n\n var dist = util.distance(coords)\n var mid = util.midpoint(coords)\n\n // make event properties mutable\n e = E(e)\n\n // iphone does scale natively, just use that\n e.scale = dist / this.distance * this.scale\n e.x = mid.x\n e.y = mid.y\n\n this.fn(e)\n\n this.lastScale = e.scale\n return this\n}\n\n/**\n * Touchend\n *\n * @param {Event} e\n * @return {Pinch}\n * @api private\n */\n\nPinch.prototype.ontouchend = function(e) {\n var touches = e.touches\n if (!touches || touches.length == 2 || !this.pinching) return this\n this.scale = this.lastScale\n this.pinching = false\n this.emit('end')\n return this\n}\n\n/**\n * Unbind\n *\n * @return {Pinch}\n * @api public\n */\n\nPinch.prototype.unbind = function() {\n this.events.unbind()\n return this\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/pinch-zoom/lib/pinch.js\n ** module id = 26\n ** module chunks = 0\n **/","/**\n * Expose `E`\n */\n\nmodule.exports = function(e) {\n // any property it doesn't find on the object\n // itself, look up prototype for original `e`\n E.prototype = e;\n return new E();\n};\n\n/**\n * Initialize `E`\n */\n\nfunction E() {}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/pinch-zoom/lib/e.js\n ** module id = 27\n ** module chunks = 0\n **/","'use strict';\n/* eslint-disable no-unused-vars */\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\nfunction toObject(val) {\n\tif (val === null || val === undefined) {\n\t\tthrow new TypeError('Object.assign cannot be called with null or undefined');\n\t}\n\n\treturn Object(val);\n}\n\nfunction shouldUseNative() {\n\ttry {\n\t\tif (!Object.assign) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Detect buggy property enumeration order in older V8 versions.\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=4118\n\t\tvar test1 = new String('abc'); // eslint-disable-line\n\t\ttest1[5] = 'de';\n\t\tif (Object.getOwnPropertyNames(test1)[0] === '5') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test2 = {};\n\t\tfor (var i = 0; i < 10; i++) {\n\t\t\ttest2['_' + String.fromCharCode(i)] = i;\n\t\t}\n\t\tvar order2 = Object.getOwnPropertyNames(test2).map(function (n) {\n\t\t\treturn test2[n];\n\t\t});\n\t\tif (order2.join('') !== '0123456789') {\n\t\t\treturn false;\n\t\t}\n\n\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\tvar test3 = {};\n\t\t'abcdefghijklmnopqrst'.split('').forEach(function (letter) {\n\t\t\ttest3[letter] = letter;\n\t\t});\n\t\tif (Object.keys(Object.assign({}, test3)).join('') !==\n\t\t\t\t'abcdefghijklmnopqrst') {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t} catch (e) {\n\t\t// We don't expect any of the above to throw, but better to be safe.\n\t\treturn false;\n\t}\n}\n\nmodule.exports = shouldUseNative() ? Object.assign : function (target, source) {\n\tvar from;\n\tvar to = toObject(target);\n\tvar symbols;\n\n\tfor (var s = 1; s < arguments.length; s++) {\n\t\tfrom = Object(arguments[s]);\n\n\t\tfor (var key in from) {\n\t\t\tif (hasOwnProperty.call(from, key)) {\n\t\t\t\tto[key] = from[key];\n\t\t\t}\n\t\t}\n\n\t\tif (Object.getOwnPropertySymbols) {\n\t\t\tsymbols = Object.getOwnPropertySymbols(from);\n\t\t\tfor (var i = 0; i < symbols.length; i++) {\n\t\t\t\tif (propIsEnumerable.call(from, symbols[i])) {\n\t\t\t\t\tto[symbols[i]] = from[symbols[i]];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\treturn to;\n};\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/object-assign/index.js\n ** module id = 28\n ** module chunks = 0\n **/","\n/**\n * Expose `parse`.\n */\n\nmodule.exports = parse;\n\n/**\n * Tests for browser support.\n */\n\nvar innerHTMLBug = false;\nvar bugTestDiv;\nif (typeof document !== 'undefined') {\n bugTestDiv = document.createElement('div');\n // Setup\n bugTestDiv.innerHTML = '
a';\n // Make sure that link elements get serialized correctly by innerHTML\n // This requires a wrapper element in IE\n innerHTMLBug = !bugTestDiv.getElementsByTagName('link').length;\n bugTestDiv = undefined;\n}\n\n/**\n * Wrap map from jquery.\n */\n\nvar map = {\n legend: [1, '
', '
'],\n tr: [2, '', '
'],\n col: [2, '', '
'],\n // for script/link/style tags to work in IE6-8, you have to wrap\n // in a div with a non-whitespace character in front, ha!\n _default: innerHTMLBug ? [1, 'X
', '
'] : [0, '', '']\n};\n\nmap.td =\nmap.th = [3, '', '
'];\n\nmap.option =\nmap.optgroup = [1, ''];\n\nmap.thead =\nmap.tbody =\nmap.colgroup =\nmap.caption =\nmap.tfoot = [1, '', '
'];\n\nmap.polyline =\nmap.ellipse =\nmap.polygon =\nmap.circle =\nmap.text =\nmap.line =\nmap.path =\nmap.rect =\nmap.g = [1, '',''];\n\n/**\n * Parse `html` and return a DOM Node instance, which could be a TextNode,\n * HTML DOM Node of some kind (
for example), or a DocumentFragment\n * instance, depending on the contents of the `html` string.\n *\n * @param {String} html - HTML string to \"domify\"\n * @param {Document} doc - The `document` instance to create the Node for\n * @return {DOMNode} the TextNode, DOM Node, or DocumentFragment instance\n * @api private\n */\n\nfunction parse(html, doc) {\n if ('string' != typeof html) throw new TypeError('String expected');\n\n // default to the global `document` object\n if (!doc) doc = document;\n\n // tag name\n var m = /<([\\w:]+)/.exec(html);\n if (!m) return doc.createTextNode(html);\n\n html = html.replace(/^\\s+|\\s+$/g, ''); // Remove leading/trailing whitespace\n\n var tag = m[1];\n\n // body support\n if (tag == 'body') {\n var el = doc.createElement('html');\n el.innerHTML = html;\n return el.removeChild(el.lastChild);\n }\n\n // wrap map\n var wrap = map[tag] || map._default;\n var depth = wrap[0];\n var prefix = wrap[1];\n var suffix = wrap[2];\n var el = doc.createElement('div');\n el.innerHTML = prefix + html + suffix;\n while (depth--) el = el.lastChild;\n\n // one element\n if (el.firstChild == el.lastChild) {\n return el.removeChild(el.firstChild);\n }\n\n // several elements\n var fragment = doc.createDocumentFragment();\n while (el.firstChild) {\n fragment.appendChild(el.removeChild(el.firstChild));\n }\n\n return fragment;\n}\n\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/domify/index.js\n ** module id = 29\n ** module chunks = 0\n **/","import autoscale from 'autoscale-canvas'\nimport raf from 'raf'\n\nfunction createCtx(node) {\n let canvas = document.createElement('canvas')\n node.appendChild(canvas)\n let rect = node.getBoundingClientRect()\n let ctx = canvas.getContext('2d')\n canvas.height = rect.height\n canvas.width = rect.width\n autoscale(canvas)\n return ctx\n}\n\nconst hex_reg = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i\nfunction torgb(hex) {\n if (hex.length == 4) hex = hex.replace(/[^#]/g, function (p) {\n return p + p\n })\n let result = hex_reg.exec(hex)\n return result ? {\n r: parseInt(result[1], 16),\n g: parseInt(result[2], 16),\n b: parseInt(result[3], 16)\n } : null\n}\n\nexport default function (node, opts) {\n opts = opts || []\n let ctx = createCtx(node)\n let h = node.clientHeight || 32\n let w = node.clientWidth || 32\n let duration = opts.duration || 1000\n let color = opts.color || '#ffffff'\n let rgb = torgb(color)\n let x = h/2\n let y = w/2\n let r = Math.min(h, w)/2 - 4\n let stop\n let start\n function step(timestamp) {\n ctx.clearRect(0, 0, w, h)\n if (stop) return\n if (!start) start = timestamp\n if (!node.parentNode) stop = true\n let ts = (timestamp - start)%duration\n ctx.beginPath()\n ctx.strokeStyle = 'rgba(' + rgb.r +', ' + rgb.g + ', ' + rgb.b+ ', 0.4)'\n ctx.arc(x, y, r, 0, Math.PI*2)\n ctx.lineWidth = opts.width || 4\n ctx.lineCap = 'round'\n ctx.stroke()\n let a = -Math.PI/2 + Math.PI*2*ts/duration\n let e = a + Math.PI/2\n ctx.beginPath()\n ctx.strokeStyle = 'rgba(' + rgb.r +', ' + rgb.g + ', ' + rgb.b+ ', 1)'\n ctx.arc(x, y, r, a, e)\n ctx.stroke()\n raf(step)\n }\n raf(step)\n return function () {\n stop = true\n }\n}\n\n\n\n/** WEBPACK FOOTER **\n ** ./src/spin.js\n **/","\n/**\n * Retina-enable the given `canvas`.\n *\n * @param {Canvas} canvas\n * @return {Canvas}\n * @api public\n */\n\nmodule.exports = function(canvas){\n var ctx = canvas.getContext('2d');\n var ratio = window.devicePixelRatio || 1;\n if (1 != ratio) {\n canvas.style.width = canvas.width + 'px';\n canvas.style.height = canvas.height + 'px';\n canvas.width *= ratio;\n canvas.height *= ratio;\n ctx.scale(ratio, ratio);\n }\n return canvas;\n};\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/autoscale-canvas/index.js\n ** module id = 31\n ** module chunks = 0\n **/","module.exports = 'ontouchstart' in global || (global.DocumentTouch && document instanceof DocumentTouch)\n\n\n/*****************\n ** WEBPACK FOOTER\n ** ./~/has-touch/index.js\n ** module id = 32\n ** module chunks = 0\n **/","// style-loader: Adds some css to the DOM by adding a 12 |

13 | 14 |

15 |

16 | 17 |

18 |

19 | 20 |

21 |

22 | 23 |

24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/index.js: -------------------------------------------------------------------------------- 1 | require('./style.css') 2 | require('../src/style.css') 3 | import ImagesPreivew from '../src/index' 4 | 5 | import touch from 'has-touch' 6 | 7 | if (!touch) alert('Please visit this page with mobile device') 8 | 9 | let imgs = document.querySelectorAll('img') 10 | new ImagesPreivew(imgs, { 11 | convert: src => { 12 | return src.replace(/\?\w+$/, '') 13 | } 14 | }) 15 | -------------------------------------------------------------------------------- /example/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Repeating the background mostly makes sense in the . Otherwise, people 3 | * usually want the image and preferably its center (not the top-right corner) 4 | */ 5 | *:not(body) { 6 | background-repeat: no-repeat; 7 | background-position: 50%; 8 | background-size: cover; 9 | } 10 | /* 11 | * tables borders like they should be 12 | * applied to * to also works for display: table; 13 | */ 14 | html {border-collapse: collapse} 15 | * {border-collapse: inherit} 16 | /* 17 | * box model like it should be 18 | * 19 | * http://www.paulirish.com/2012/box-sizing-border-box-ftw/ 20 | */ 21 | html {box-sizing: border-box} 22 | 23 | *, 24 | *:before, 25 | *:after { 26 | box-sizing: inherit; 27 | } 28 | /* 29 | * kill document defaults margin & padding. We all do that all the times, right ? 30 | */ 31 | html, 32 | body { 33 | margin: 0; 34 | padding: 0; 35 | } 36 | /* 37 | * Makes the hidden attribute works even when an element is styled display: flex 38 | * http://lists.w3.org/Archives/Public/public-whatwg-archive/2014May/0001.html 39 | */ 40 | [hidden] {display: none !important} 41 | 42 | body { 43 | font-family: Microsoft YaHei,helvetica,tahoma,arial,SimSun; 44 | line-height: 1.42857143; 45 | color: #333; 46 | padding: 20px; 47 | -webkit-touch-callout: none; 48 | } 49 | p > img { 50 | width: 140px; 51 | height: 140px; 52 | display: block; 53 | margin: 0 auto; 54 | } 55 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var growl = require('growl') 2 | var serve = require('gulp-live-serve') 3 | var livereload = require('gulp-livereload') 4 | var webpack = require('webpack') 5 | var WebpackDevServer = require('webpack-dev-server') 6 | var gutil = require('gulp-util') 7 | var gulp = require('gulp') 8 | var path = require('path') 9 | var config = require('./webpack.config') 10 | // test entry file 11 | var testIndex = './test/test.js' 12 | // webpack-dev-sserve port 13 | var port = 8080 14 | // no conflict 15 | var myConfig = Object.assign({}, config, { 16 | devtool: 'cheap-module-eval-source-map', 17 | cache: true, 18 | debug: true 19 | }) 20 | 21 | var paths = { 22 | // file list for webpack build 23 | scripts: ['example/style.css', 'src/style.css', 'src/*.js', 'example/index.js'], 24 | // file list for reload 25 | asserts: ['example/bundle.js', 'example/index.html'] 26 | } 27 | 28 | gulp.task('default', ['build-dev']) 29 | 30 | gulp.task('build-dev', ['webpack:build-dev', 'serve'], function () { 31 | livereload.listen({ 32 | start: true 33 | }) 34 | // build js files on change 35 | gulp.watch(paths.scripts, ['webpack:build-dev']) 36 | var watcher = gulp.watch(paths.asserts) 37 | watcher.on('change', function (e) { 38 | livereload.changed(e.path) 39 | growl(path.basename(e.path)) 40 | }) 41 | }) 42 | 43 | // static server 44 | gulp.task('serve', serve({ 45 | root: __dirname, 46 | middlewares: [] 47 | })) 48 | 49 | 50 | gulp.task('webpack:build-dev', function (callback) { 51 | var devCompiler = webpack(myConfig) 52 | devCompiler.run(function (err, stats) { 53 | if (err) throw new gutil.pluginError('webpack:build-dev', err) //eslint-disable-line 54 | gutil.log('[webpack:build-dev]', stats.toString({ 55 | colors: true 56 | })) 57 | callback() 58 | }) 59 | }) 60 | 61 | gulp.task('webpack:test', function (callback) { 62 | var entry = [ 63 | 'stack-source-map/register.js', 64 | 'webpack-dev-server/client?http://localhost:' + port, 65 | 'webpack/hot/dev-server', 66 | 'mocha!' + testIndex 67 | ] 68 | 69 | var config = Object.create(myConfig) 70 | config.entry = entry 71 | config.plugins = config.plugins || [] 72 | // webpack need this to send request to webpack-dev-server 73 | config.plugins.push(new webpack.HotModuleReplacementPlugin()) 74 | // must have 75 | config.output.path = __dirname 76 | var compiler = webpack(config) 77 | config.module = myConfig.module 78 | var server = new WebpackDevServer(compiler, { 79 | publicPath: '/', 80 | inline: true, 81 | historyApiFallback: false, 82 | stats: { colors: true } 83 | }) 84 | server.listen(port, 'localhost', callback) 85 | }) 86 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // test entry file 2 | var testIndex = './test/test.js' 3 | var path = require('path') 4 | var webpack = require('./webpack.config') 5 | var preLoaders = webpack.module.preLoaders || [] 6 | // only files in lib 7 | preLoaders.push({ 8 | include: [path.resolve('src')], 9 | loader:'istanbul-instrumenter' 10 | }) 11 | webpack.module.preLoaders = preLoaders 12 | 13 | module.exports = function(config) { 14 | config.set({ 15 | 16 | // base path that will be used to resolve all patterns (eg. files, exclude) 17 | basePath: '', 18 | 19 | 20 | // frameworks to use 21 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter 22 | frameworks: ['mocha'], 23 | 24 | 25 | // list of files / patterns to load in the browser 26 | files: [ 27 | testIndex 28 | ], 29 | 30 | // list of files to exclude 31 | exclude: [ 32 | ], 33 | 34 | // preprocess matching files before serving them to the browser 35 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor 36 | preprocessors: { 37 | 'test/test.js': ['webpack'] 38 | }, 39 | 40 | // test results reporter to use 41 | // possible values: 'dots', 'progress' 42 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter 43 | reporters: ['progress', 'coverage'], 44 | 45 | 46 | // web server port 47 | port: 9876, 48 | 49 | 50 | // enable / disable colors in the output (reporters and logs) 51 | colors: true, 52 | 53 | 54 | // level of logging 55 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG 56 | logLevel: config.LOG_INFO, 57 | 58 | 59 | // enable / disable watching file and executing tests whenever any file changes 60 | autoWatch: true, 61 | 62 | 63 | // start these browsers 64 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher 65 | browsers: ['Firefox'], 66 | 67 | webpack: { 68 | devtool: 'eval-source-map', 69 | module: webpack.module 70 | }, 71 | 72 | webpackMiddleware: { 73 | noInfo: true 74 | }, 75 | // Continuous Integration mode 76 | // if true, Karma captures browsers, runs the tests and exits 77 | singleRun: false, 78 | coverageReporter: { 79 | dir: 'coverage/', 80 | reporters: [ 81 | { type: 'text' }, 82 | { type: 'html', subdir: 'html' }, 83 | { type: 'lcovonly', subdir: 'lcov' }, 84 | { type: 'cobertura', subdir: 'cobertura' } 85 | ] 86 | } 87 | }); 88 | }; 89 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "images-preview", 3 | "version": "0.1.10", 4 | "description": "preview images on mobile device", 5 | "main": "dest/index.js", 6 | "directories": { 7 | "test": "test" 8 | }, 9 | "scripts": { 10 | "prepublish": "make prepublish" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+ssh://git@github.com/chemzqm/images-preview.git" 15 | }, 16 | "keywords": [ 17 | "images", 18 | "preview" 19 | ], 20 | "author": "chemzqm@gmail.com", 21 | "license": "MIT", 22 | "bugs": { 23 | "url": "https://github.com/chemzqm/images-preview/issues" 24 | }, 25 | "babel": { 26 | "presets": [ 27 | "es2015" 28 | ] 29 | }, 30 | "homepage": "https://github.com/chemzqm/images-preview#readme", 31 | "devDependencies": { 32 | "babel-core": "^6.14.0", 33 | "babel-loader": "^6.2.5", 34 | "babel-preset-es2015": "^6.14.0", 35 | "coveralls": "^2.11.12", 36 | "css-loader": "^0.24.0", 37 | "file-loader": "^0.9.0", 38 | "growl": "^1.9.2", 39 | "gulp": "^3.9.1", 40 | "gulp-live-serve": "^1.0.2", 41 | "gulp-livereload": "^3.8.1", 42 | "gulp-util": "^3.0.7", 43 | "has-touch": "^1.0.1", 44 | "html-loader": "^0.4.3", 45 | "istanbul": "^0.4.5", 46 | "istanbul-instrumenter-loader": "^0.2.0", 47 | "json-loader": "^0.5.4", 48 | "karma": "^1.2.0", 49 | "karma-cli": "^1.0.1", 50 | "karma-coverage": "^1.1.1", 51 | "karma-firefox-launcher": "^1.0.0", 52 | "karma-mocha": "^1.1.1", 53 | "karma-webpack": "^1.8.0", 54 | "karma-wrap-preprocessor": "^0.1.0", 55 | "mocha": "^3.0.2", 56 | "mocha-loader": "^0.7.1", 57 | "mocha-notify": "0.0.4", 58 | "postcss-cssnext": "^2.7.0", 59 | "postcss-loader": "^0.11.0", 60 | "stack-source-map": "^1.0.5", 61 | "style-loader": "^0.13.1", 62 | "svg-loader": "0.0.2", 63 | "svg-url-loader": "^1.1.0", 64 | "url-loader": "^0.5.7", 65 | "webpack": "^1.13.2", 66 | "webpack-dev-server": "^1.15.0" 67 | }, 68 | "dependencies": { 69 | "autoscale-canvas": "0.0.3", 70 | "component-closest": "^1.0.1", 71 | "component-emitter": "^1.2.1", 72 | "component-event": "^0.1.4", 73 | "component-events": "^1.0.10", 74 | "component-query": "0.0.3", 75 | "component-raf": "^1.2.0", 76 | "component-tap-event": "^1.1.3", 77 | "component-tween": "^1.2.0", 78 | "domify": "^1.4.0", 79 | "object-assign": "^4.1.0", 80 | "pinch-zoom": "^0.3.9", 81 | "prop-detect": "^1.1.0", 82 | "radio-component": "0.0.2" 83 | }, 84 | "browser": { 85 | "emitter": "component-emitter", 86 | "tap-event": "component-tap-event", 87 | "events": "component-events", 88 | "event": "component-event", 89 | "query": "component-query", 90 | "raf": "component-raf", 91 | "tween": "component-tween", 92 | "closest": "component-closest" 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /preview.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.ImagesPreview=e():t.ImagesPreview=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function s(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function a(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function h(t){if(t.naturalWidth)return{height:t.naturalHeight,width:t.naturalWidth};var e=new Image;return e.src=t.currentSrc||t.src,{height:e.height,width:e.width}}function u(){return Math.max(H.documentElement.clientWidth,window.innerWidth||0)}function c(t){t.preventDefault()}Object.defineProperty(e,"__esModule",{value:!0});var l=function(){function t(t,e){for(var n=0;n
');Q.appendChild(n);for(var i=(0,v["default"])("ul",n),r=H.createDocumentFragment(),o=0,s=this.imgs.length;o\n "));var f=this.imgs[o].getBoundingClientRect(),p=f.height||e,m=Math.min(t.clientHeight-10,p)/2;(0,S["default"])(h.style,{width:e-10+"px",height:p+"px",left:"5px",marginTop:"-"+m+"px"})}a.appendChild(h),r.appendChild(a)}t.appendChild(r),this.zooms=[],this.emit("hide"),this.events=(0,q["default"])(t,this),this.docEvents=(0,q["default"])(document,this),this.events.bind("touchstart"),this.events.bind("touchmove"),this.events.bind("touchend"),this.docEvents.bind("touchend","ontouchend"),y["default"].bind(t,"touchstart",this._containerTap),y["default"].bind(H,"touchmove",c)}},{key:"ontouchstart",value:function(t){var e=this;this.animating&&this.tween.stop();var n=(0,A["default"])(t.target,".wrapper");if(!(t.touches.length>1||n)){var i=t.touches[0],r=i.clientX;this.down={x:r,at:Date.now()};var o=this.tx,s=u();this.move=function(t,n){var i=o+n.clientX-r;i=e.limit(i,s),isNaN(i)||e.setTransform(i)}}}},{key:"ontouchmove",value:function(t){if(!(t.touches.length>1||null==this.move)){t.preventDefault(),t.stopPropagation();var e=t.touches[0];this.move(t,e)}}},{key:"ontouchend",value:function(t){if(null!=this.move){this.animating&&this.tween.stop();var e=this.down;this.move=this.down=null;var n=t.changedTouches[0],i=n.clientX,r=Date.now();if(Math.abs(i-e.x)>this.fastThreshold&&r-e.ati?"left":"right";this.onswipe(o)}else this.restore()}}},{key:"active",value:function(t,e){var n=this,i=!(arguments.length<=2||void 0===arguments[2])&&arguments[2];if(null==e&&(e=this.imgs.indexOf(t)),!(e<0||e>this.imgs.length-1)){var r=u(),o=this.status[e];this.idx=e;var s=this.container.querySelectorAll(".wrapper")[e];(0,f["default"])(this.dots.querySelectorAll("li")[e]),this.emit("active",e);var a=e*r;if(this.setTransform(-a-20),!o){if(this.status[e]="loading",i){var h=(0,v["default"])(".image",s);h&&(h.style.display="none");var c=(0,v["default"])(".mask",s);c&&(c.style.display="none");var l=this.holder=H.createElement("div");l.className="imgs-preview-holder";var d=t.currentSrc||t.src;l.style.backgroundImage="url('"+d+"')";var p=t.getBoundingClientRect();(0,S["default"])(l.style,{left:p.left+"px",top:p.top+"px",width:p.width+"px",height:p.height+"px"}),Q.appendChild(l)}var m=this.createImage(s,t.currentSrc||t.src);i||(m.style.display="block");var y=new O["default"](s,{threshold:this.threshold,fastThreshold:this.fastThreshold,padding:5,tapreset:!1,draggable:!0,maxScale:4});y.on("swipe",this.onswipe.bind(this)),y.on("move",function(t){var e=-20-a-t;e=n.limit(e,r),n.setTransform(e)}),y.on("end",this.restore.bind(this)),this.zooms.push(y),this.loadImage(m,s).then(function(){n.loaded.push(e)},function(){})}}}},{key:"onswipe",value:function(t){var e=this,n=u(),i="left"==t?this.idx+1:this.idx-1;i=Math.max(0,i),i=Math.min(this.imgs.length-1,i),this.animate(-i*n-20).then(function(){var t=e.imgs[i];i!=e.idx&&e.active(t,i)})}},{key:"limit",value:function(t,e){return t=Math.min(0,t),t=Math.max(-40-(this.imgs.length-1)*e,t)}},{key:"restore",value:function(){var t=this,e=u(),n=Math.round((-this.tx-20)/e);this.animate(-n*e-20).then(function(){if(n!=t.idx){var e=t.imgs[n];t.active(e,n)}})}},{key:"loadImage",value:function(t,e){var n=this;if(t.complete){var i=(0,v["default"])(".mask",e);return i&&e.removeChild(i),this.positionWrapper(e,t),this.positionHolder(e,t.currentSrc||t.src,!1).then(function(){t.style.display="block"})}return this.positionHolder(e).then(function(){t.style.display="block";var i=(0,v["default"])(".mask",e);i.style.display="block";var r=(0,j["default"])('
');e.clientHeight>n.container.clientHeight&&(r.style.top=n.container.clientHeight/2+"px"),e.appendChild(r);var o=(0,B["default"])(r,{color:"#ffffff",duration:1e3,width:4}),s=n;return new Promise(function(n,a){function h(){o(),r.parentNode&&e.removeChild(r),i.parentNode&&e.removeChild(i),s.positionWrapper(e,t),n()}return t.complete?h():(t.onload=h,void(t.onerror=function(t){o(),a(t)}))})})}},{key:"positionWrapper",value:function(t,e){var n=Math.max(H.documentElement.clientWidth,window.innerWidth||0),i=h(e),r=(n-10)*i.height/i.width,o=Math.min(this.container.clientHeight-10,r)/2;(0,S["default"])(t.style,{left:"5px",width:n-10+"px",height:r+"px",marginTop:"-"+o+"px"})}},{key:"createImage",value:function(t,e){var n=(0,v["default"])(".image",t);return n?n:(n=H.createElement("img"),n.className="image",n.src=this.opts.convert(e),t.appendChild(n),n)}},{key:"setTransform",value:function(t){var e=this.container;this.tx=t,D.has3d?e.style[D.transform]="translate3d("+t+"px,0,0)":e.style[D.transform]="translate("+t+"px)"}},{key:"animate",value:function n(t){function n(){(0,b["default"])(n),r.update()}var e=arguments.length<=1||void 0===arguments[1]?200:arguments[1],i=arguments.length<=2||void 0===arguments[2]?"out-circ":arguments[2];if(t==this.tx)return Promise.resolve(null);this.animating=!0;var r=this.tween=(0,w["default"])({x:this.tx}).ease(i).to({x:t}).duration(e);r.update(function(t){o.setTransform(t.x)});var o=this,s=new Promise(function(t){r.on("end",function(){n=function(){},o.animating=!1,t()})});return n(),s}},{key:"positionHolder",value:function(t,e){function n(){(0,b["default"])(n),o.update()}var i=arguments.length<=2||void 0===arguments[2]||arguments[2],r=this.holder;if(!r)return Promise.resolve(null);e&&(r.style.backgroundImage="url('"+e+"')");var o=(0,w["default"])({width:parseInt(r.style.width,10),height:parseInt(r.style.height,10),left:parseInt(r.style.left,10),top:parseInt(r.style.top,10),opacity:.3}).ease("out-cube").to({width:parseInt(t.style.width,10),height:parseInt(t.style.height,10),left:parseInt(t.style.left,10),top:this.container.clientHeight/2+parseInt(t.style.marginTop,10),opacity:1}).duration(300);o.update(function(t){var e=i?t.opacity:1;(0,S["default"])(r.style,{width:t.width+"px",height:t.height+"px",left:t.left+"px",top:t.top+"px",opacity:e})});var s=this,a=new Promise(function(t){o.on("end",function(){r.parentNode&&r.parentNode.removeChild(r),s.holder=null,n=function(){},t()})});return n(),a}},{key:"hide",value:function(){this.dots&&Q.removeChild(this.dots),y["default"].unbind(this.container,"touchstart",this._containTap),y["default"].unbind(H,"touchmove",c),this.zooms.forEach(function(t){t.unbind()}),this.hideImage(),this.zooms=[],this.status=[],this.container.style.backgroundColor="rgba(0,0,0,0)",this.emit("hide"),Q.removeChild(this.container)}},{key:"unbind",value:function(){y["default"].unbind(H,"touchstart",this._ontap)}},{key:"hideImage",value:function(){function t(){y["default"].unbind(s,D.transitionend,t),Q.removeChild(s)}var e=this.idx,n=this.imgs[e],i=n.getBoundingClientRect(),o=this.container.querySelectorAll(".wrapper")[e];if(!(0==i.height||i.bottom<0||i.top>this.container.clientHeight)){var s=H.createElement("div"),a=n.currentSrc||n.src;s.className="imgs-preview-holder",s.style.backgroundImage="url('"+a+"')",(0,S["default"])(s.style,r({width:parseInt(o.style.width,10)+"px",height:parseInt(o.style.height,10)+"px",left:parseInt(o.style.left,10)+"px",top:this.container.clientHeight/2+parseInt(o.style.marginTop,10)+"px"},D.transition,"all 0.25s ease-in")),Q.appendChild(s),y["default"].bind(s,D.transitionend,t),setTimeout(function(){(0,S["default"])(s.style,{width:i.width+"px",height:i.height+"px",top:i.top+"px",left:i.left+"px"})},20)}}}]),e}(_["default"]);e["default"]=R},function(t,e,n){var i=n(2);t.exports=function(t,e){var n=t.parentNode.childNodes,r=t.tagName;e=e||"active";for(var o=0,s=n.length;o=t;if(i)return this._from=this._to,this._update(this._to),this._done=!0,this.emit("end"),this;var r=this._from,o=this._to,s=this._curr,a=this._ease,h=(e-this._start)/t,u=a(h);if(this.isArray){for(var c=0;c1)){var s=e.target,a=this,h=arguments,u=setTimeout(r,o);s.addEventListener("touchmove",r),i.forEach(function(t){s.addEventListener(t,n)})}}e=e||{};var o=e.timeout||n.timeout;return r.handler=t,r}var i=["touchend"];t.exports=n,n.timeout=200},function(t,e,n){function i(t,e){if(!(this instanceof i))return new i(t,e);e=e||{},this.el=t,this.padding=e.padding||0,this.container=t.parentNode,this.container.style.overflow="hidden",this.scale=1,this.maxScale=e.maxScale||5,this.threshold=e.threshold||200,this.fastThreshold=e.fastThreshold||30;var n=t.getBoundingClientRect();this.tapreset=e.tapreset||!1,this.sx=n.left+n.width/2,this.sy=n.top+n.height/2,this.tx=this.ty=0,this.animating=!1,this.pinch=new f(t,this.onPinchMove.bind(this)),this.pinch.on("start",this.onPinchStart.bind(this)),this.pinch.on("end",this.onPinchEnd.bind(this)),p?this.el.style[v+"Origin"]="center center 0px":this.el.style[v+"Origin"]="center center";var r=this._ontap=h(this.ontap.bind(this));s.bind(t,"touchstart",r),this.events=o(t,this),this.docEvents=o(document,this),e.draggable&&(this.events.bind("touchstart"),this.events.bind("touchmove"),this.events.bind("touchend"),this.docEvents.bind("touchend","ontouchend"))}function r(t){var e=1.20158;return--t*t*((e+1)*t+e)+1}var o=n(15),s=n(5),a=n(12),h=n(13),u=n(6),c=n(7),l=n(19),d=n(24),f=n(25),p=l.has3d,v=l.transform,m=Math.PI;a(i.prototype),i.prototype.ontouchstart=function(t){var e=t.touches;if(this.animating&&(t.stopPropagation(),this.tween.stop()),e&&1==e.length){var n=this.el.getBoundingClientRect();this.translateY=n.top<0||n.bottom>this.container.clientHeight,this.speed=0;var i=Date.now(),r=t.touches[0],o=r.clientX,s=r.clientY,a=this,h={x:this.tx,y:this.ty},u=this.getLimitation(100);this.move=function(t,e){a.down={x:o,y:s,at:i};var n=e.clientX,r=e.clientY,c=this.prev?this.prev.x:o,l=this.prev?this.prev.y:s;t.preventDefault();var f=Math.abs(n-c)>Math.abs(r-l);1==a.scale||f||t.stopPropagation(),a.calcuteSpeed(n,r);var p=h.x+n-o,v=h.y+r-s,y=d.limit(p,v,u),g=y.x-p;1==a.scale&&f&&(y.y=this.ty,this.angle=n-c>0?0:m),f&&this.emit("move",g),this.translateY||(y.y=h.y),a.setTransform(y.x,y.y,a.scale)}}},i.prototype.ontouchmove=function(t){if(this.move&&!this.animating&&!this.pinch.pinching){var e=t.touches;if(!e||1!=e.length)return void(this.move=null);var n=e[0];this.move(t,n)}},i.prototype.ontouchend=function(t){if(null!=this.move){if(null==this.down)return this.move=null;if(!this.pinch.pinching&&!this.animating){var e=Date.now(),n=t.changedTouches[0],i=n.clientX,r=n.clientY,o=this.down.x,s=this.down.y;this.calcuteSpeed(i,r);var a=Math.abs(i-o),h=this.getLimitation();if(a>this.fastThreshold&&a>Math.abs(r-s)&&e-this.down.at=h.maxx)){var u=i>o?"right":"left";return this.down=this.move=null,this.emit("swipe",u)}this.down=this.move=null,this.emit("end"),this.speed&&this.momentum()}}},i.prototype.momentum=function(){var t=.001,e=this.getLimitation(this.padding),n=Math.min(this.speed,4),i=(4-m)/2,o=i*(n*n)/(2*t),s=this.tx+o*Math.cos(this.angle),a=this.ty+o*Math.sin(this.angle),h=d.limit(s,a,e),u=this.scale>1&&(se.maxx)||ae.maxy,c=u?r:"out-circ",l=d.distance([s,a,h.x,h.y]),f=(1-l/o)*n/t;return(this.tye.maxy)&&(f=500,c="out-circ"),this.translateY||(h.y=this.ty),this.animate({x:h.x,y:h.y,scale:this.scale},f,c)},i.prototype.getLimitation=function(t){t=t||0;var e=d.viewport,n=e.width,i=e.height,r=this.el.getBoundingClientRect(),o=this.el.parentNode.getBoundingClientRect();return{maxx:this.tx-r.left+o.left+this.padding,minx:this.tx-(r.left-o.left+r.width-n)-this.padding,miny:i>r.height?this.ty-r.top:this.ty-r.top-(r.height-i)-t,maxy:i>r.height?this.ty+(i-r.top-r.height):this.ty-r.top+t}},i.prototype.ontap=function(){if(this.animating)return this.tween.stop();var t=Date.now();return this.lastTap&&t-this.lastTap<300?void this.emit("tap"):1==this.scale?void this.emit("tap"):(this.lastTap=Date.now(),void(this.tapreset?this.reset():this.emit("tap")))},i.prototype.reset=function(){this.emit("scale",{x:0,y:0,scale:1});var t=this.animate({x:0,y:0,scale:1},200);return t},i.prototype.onPinchStart=function(t){this.animating&&this.tween.stop(),this.start=t,this.bx=this.sx+this.tx,this.by=this.sy+this.ty,this.startScale=this.scale,this.emit("start")},i.prototype.onPinchMove=function(t){if(!this.animating){this.point={x:t.x,y:t.y};var e=t.x-this.start.x,n=t.y-this.start.y,i=this.bx+e,r=this.by+n,o=d.getAngle(i,r,t.x,t.y),s=d.distance([t.y,t.x,r,i])*(t.scale-1),a=this.bx-this.sx+e-s*Math.cos(o),h=this.by-this.sy+n-s*Math.sin(o);this.setTransform(a,h,t.scale*this.startScale)}},i.prototype.onPinchEnd=function(){this.scale!==this.startScale&&this.emit("scale",{x:this.tx,y:this.ty,scale:this.scale}),this.startScale=this.scale;var t=this.checkScale();t||this.checkPosition()},i.prototype.setTransform=function(t,e,n){isNaN(t)||isNaN(e)||(this.tx=t,this.ty=e,this.scale=n,p?this.el.style[v]="translate3d("+t+"px, "+e+"px, 0) scale3d("+n+","+n+", 1)":this.el.style[v]="translate("+t+"px, "+e+"px) scale("+n+","+n+")")},i.prototype.animate=function(t,e,n){function i(){u(i),s.update()}var r={x:this.tx,y:this.ty,scale:this.scale};n=n||"out-circ";var o=this;this.animating=!0;var s=this.tween=c(r).ease(n).to(t).duration(e);s.update(function(t){o.setTransform(t.x,t.y,t.scale)});var a=new Promise(function(t){s.on("end",function(){i=function(){},o.animating=!1,t()})});return i(),a},i.prototype.unbind=function(){this.setTransform(0,0,1),this.pinch.unbind(),this.events.unbind(),this.docEvents.unbind(),s.unbind(this.el,"touchstart",this._ontap)},i.prototype.checkPosition=function(){var t=this.el.getBoundingClientRect(),e={x:this.tx,y:this.ty,scale:this.scale},n=d.viewport,i=n.width,r=n.height,o=this.padding;t.left>o?e.x=this.tx-t.left+o:t.left+t.width0&&s>r-o?e.y=this.ty-(s-r+o):t.topthis.maxScale){var t=this.point;return this.scaleAt(t.x,t.y,this.maxScale)}},i.prototype.limitScale=function(t){var e=this.sx+this.tx,n=this.sy+this.ty,i=this.point,r=Math.atan((i.y-n)/(i.x-e));(i.yn&&i.x50){var o=d.distance([n.x,n.y,t,e]);this.speed=Math.abs(o/r),this.angle=d.getAngle(n.x,n.y,t,e)}r>50&&(this.prev={x:t,y:e,at:i})},t.exports=i},function(t,e,n){function i(t,e){if(!(this instanceof i))return new i(t,e);if(!t)throw new Error("element required");if(!e)throw new Error("object required");this.el=t,this.obj=e,this._events={}}function r(t){var e=t.split(/ +/);return{name:e.shift(),selector:e.join(" ")}}try{var o=n(5)}catch(s){var o=n(5)}try{var a=n(16)}catch(s){var a=n(16)}t.exports=i,i.prototype.sub=function(t,e,n){this._events[t]=this._events[t]||{},this._events[t][e]=n},i.prototype.bind=function(t,e){function n(){var t=[].slice.call(arguments).concat(c);h[e].apply(h,t)}var i=r(t),s=this.el,h=this.obj,u=i.name,e=e||"on"+u,c=[].slice.call(arguments,2);return i.selector?n=a.bind(s,i.selector,u,n):o.bind(s,u,n),this.sub(u,e,n),n},i.prototype.unbind=function(t,e){if(0==arguments.length)return this.unbindAll();if(1==arguments.length)return this.unbindAllOf(t);var n=this._events[t];if(n){var i=n[e];i&&o.unbind(this.el,t,i)}},i.prototype.unbindAll=function(){for(var t in this._events)this.unbindAllOf(t)},i.prototype.unbindAllOf=function(t){var e=this._events[t];if(e)for(var n in e)this.unbind(t,n)}},function(t,e,n){try{var i=n(17)}catch(r){var i=n(17)}try{var o=n(5)}catch(r){var o=n(5)}e.bind=function(t,e,n,r,s){return o.bind(t,n,function(n){var o=n.target||n.srcElement;n.delegateTarget=i(o,e,!0,t),n.delegateTarget&&r.call(t,n)},s)},e.unbind=function(t,e,n,i){o.unbind(t,e,n,i)}},function(t,e,n){function i(t,e,n){for(n=n||document.documentElement;t&&t!==n;){if(r(t,e))return t;t=t.parentNode}return r(t,e)?t:null}try{var r=n(18)}catch(o){var r=n(18)}t.exports=i},function(t,e,n){function i(t,e){if(!t||1!==t.nodeType)return!1;if(a)return a.call(t,e);for(var n=r.all(e,t.parentNode),i=0;in.maxx&&(t=n.maxx),en.maxy&&(e=n.maxy),{x:t,y:e}}},function(t,e,n){function i(t,e){return this instanceof i?(this.el=t,this.parent=t.parentNode,this.fn=e||function(){},this.midpoint=null,this.scale=1,this.lastScale=1,this.pinching=!1,this.events=r(t,this),this.events.bind("touchstart"), 2 | this.events.bind("touchmove"),this.events.bind("touchend"),void(this.fingers={})):new i(t,e)}var r=n(15),o=n(12),s=n(26),a=n(24);t.exports=i,o(i.prototype),i.prototype.ontouchstart=function(t){var e=t.touches;if(!e||2!=e.length)return this;t.preventDefault(),t.stopPropagation();for(var n,i=[],r=0;r
a',r=!i.getElementsByTagName("link").length,i=void 0);var o={legend:[1,"
","
"],tr:[2,"","
"],col:[2,"","
"],_default:r?[1,"X
","
"]:[0,"",""]};o.td=o.th=[3,"","
"],o.option=o.optgroup=[1,'"],o.thead=o.tbody=o.colgroup=o.caption=o.tfoot=[1,"","
"],o.polyline=o.ellipse=o.polygon=o.circle=o.text=o.line=o.path=o.rect=o.g=[1,'',""]},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t){var e=document.createElement("canvas");t.appendChild(e);var n=t.getBoundingClientRect(),i=e.getContext("2d");return e.height=n.height,e.width=n.width,(0,a["default"])(e),i}function o(t){4==t.length&&(t=t.replace(/[^#]/g,function(t){return t+t}));var e=c.exec(t);return e?{r:parseInt(e[1],16),g:parseInt(e[2],16),b:parseInt(e[3],16)}:null}Object.defineProperty(e,"__esModule",{value:!0}),e["default"]=function(t,e){function n(r){if(i.clearRect(0,0,a,s),!v){m||(m=r),t.parentNode||(v=!0);var o=(r-m)%h;i.beginPath(),i.strokeStyle="rgba("+l.r+", "+l.g+", "+l.b+", 0.4)",i.arc(d,f,p,0,2*Math.PI),i.lineWidth=e.width||4,i.lineCap="round",i.stroke();var c=-Math.PI/2+2*Math.PI*o/h,y=c+Math.PI/2;i.beginPath(),i.strokeStyle="rgba("+l.r+", "+l.g+", "+l.b+", 1)",i.arc(d,f,p,c,y),i.stroke(),(0,u["default"])(n)}}e=e||[];var i=r(t),s=t.clientHeight||32,a=t.clientWidth||32,h=e.duration||1e3,c=e.color||"#ffffff",l=o(c),d=s/2,f=a/2,p=Math.min(s,a)/2-4,v=void 0,m=void 0;return(0,u["default"])(n),function(){v=!0}};var s=n(30),a=i(s),h=n(6),u=i(h),c=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i},function(t,e){t.exports=function(t){var e=t.getContext("2d"),n=window.devicePixelRatio||1;return 1!=n&&(t.style.width=t.width+"px",t.style.height=t.height+"px",t.width*=n,t.height*=n,e.scale(n,n)),t}}])}); -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import radio from 'radio-component' 2 | import query from 'query' 3 | import event from 'event' 4 | import raf from 'raf' 5 | import Tween from 'tween' 6 | import Emitter from 'emitter' 7 | import tap from 'tap-event' 8 | import PinchZoom from 'pinch-zoom' 9 | import assign from 'object-assign' 10 | import domify from 'domify' 11 | import closest from 'closest' 12 | import events from 'events' 13 | import spin from './spin' 14 | import {has3d, transform, transition, transitionend} from 'prop-detect' 15 | 16 | const doc = document 17 | const body = doc.body 18 | 19 | class ImagesPreview extends Emitter { 20 | /** 21 | * Constructor 22 | * 23 | * @public 24 | * @param {Array|DomCollection} imgs 25 | * @param {Object} opts 26 | */ 27 | constructor(imgs, opts = {}) { 28 | super() 29 | this.opts = opts 30 | // maximun duration in ms for fast swipe 31 | this.threshold = opts.threshold || 200 32 | // minimum moved distance for fast swipe 33 | this.fastThreshold = opts.fastThreshold || 30 34 | opts.convert = opts.convert || function (src) { 35 | return src 36 | } 37 | this.imgs = Array.prototype.slice.call(imgs) 38 | this._ontap = tap(this.ontap.bind(this)) 39 | this._containerTap = tap(this.hide.bind(this)) 40 | this.status = [] 41 | this.loaded = [] 42 | this.tx = 0 43 | if (opts.bind !== false) event.bind(doc, 'touchstart', this._ontap) 44 | } 45 | /** 46 | * ontap event handler 47 | * 48 | * @private 49 | * @param {Event} e 50 | */ 51 | ontap(e) { 52 | let el = e.target 53 | let idx = this.imgs.indexOf(el) 54 | if (idx !== -1) { 55 | this.show() 56 | this.active(el, idx, true) 57 | } 58 | } 59 | /** 60 | * Show container 61 | * 62 | * @public 63 | */ 64 | show() { 65 | let div = this.container = doc.createElement('div') 66 | div.id = 'images-preview' 67 | let vw = viewportWidth() 68 | div.style.width = (vw*this.imgs.length + 40) + 'px' 69 | this.setTransform(-20) 70 | body.appendChild(div) 71 | let dots = this.dots = domify(`
    `) 72 | body.appendChild(dots) 73 | let ul = query('ul', dots) 74 | let fragment = doc.createDocumentFragment() 75 | for (let i = 0, l = this.imgs.length; i < l; i++) { 76 | ul.appendChild(doc.createElement('li')) 77 | let el = doc.createElement('div') 78 | el.style.width = `${vw}px` 79 | let wrapper = doc.createElement('div') 80 | let src = this.imgs[i].currentSrc || this.imgs[i].src 81 | wrapper.className = 'wrapper' 82 | if (this.loaded.indexOf(i) !== -1) { 83 | let img = this.createImage(wrapper, src) 84 | img.style.display = 'block' 85 | this.positionWrapper(wrapper, img) 86 | } else { 87 | wrapper.appendChild(domify(` 88 |
    89 |
    `)) 90 | let rect = this.imgs[i].getBoundingClientRect() 91 | let h = rect.height || vw 92 | let top = Math.min(div.clientHeight - 10, h)/2 93 | assign(wrapper.style, { 94 | width: `${vw - 10}px`, 95 | height: `${h}px`, 96 | left: '5px', 97 | marginTop: `-${top}px` 98 | }) 99 | } 100 | el.appendChild(wrapper) 101 | fragment.appendChild(el) 102 | } 103 | div.appendChild(fragment) 104 | this.zooms = [] 105 | this.emit('hide') 106 | 107 | this.events = events(div, this) 108 | this.docEvents = events(document, this); 109 | this.events.bind('touchstart') 110 | this.events.bind('touchmove') 111 | this.events.bind('touchend') 112 | this.docEvents.bind('touchend', 'ontouchend') 113 | event.bind(div, 'touchstart', this._containerTap) 114 | event.bind(doc, 'touchmove', preventDefault) 115 | } 116 | 117 | ontouchstart(e) { 118 | if (this.animating) this.tween.stop() 119 | let wrapper = closest(e.target, '.wrapper') 120 | if (e.touches.length > 1 || wrapper) return 121 | let t = e.touches[0] 122 | let sx = t.clientX 123 | this.down = {x: sx, at: Date.now()} 124 | let tx = this.tx 125 | let vw = viewportWidth() 126 | this.move = (e, touch) => { 127 | let x = tx + touch.clientX - sx 128 | x = this.limit(x, vw) 129 | if (isNaN(x)) return 130 | this.setTransform(x) 131 | } 132 | } 133 | 134 | ontouchmove(e) { 135 | if (e.touches.length > 1 || this.move == null) return 136 | e.preventDefault() 137 | e.stopPropagation() 138 | let touch = e.touches[0] 139 | this.move(e, touch) 140 | } 141 | 142 | ontouchend(e) { 143 | if (this.move == null) return 144 | if (this.animating) this.tween.stop() 145 | let down = this.down 146 | this.move = this.down = null 147 | let touch = e.changedTouches[0] 148 | let x = touch.clientX 149 | let t = Date.now() 150 | if ( Math.abs(x - down.x) > this.fastThreshold && 151 | (t - down.at) < this.threshold ) { 152 | let dir = down.x > x ? 'left' : 'right' 153 | this.onswipe(dir) 154 | } else { 155 | this.restore() 156 | } 157 | } 158 | 159 | /** 160 | * Active a specfic image 161 | * 162 | * @public 163 | * @param {Element} img 164 | * @param {Number} idx 165 | * @param {Boolean} animate = false 166 | */ 167 | active(img, idx, animate = false) { 168 | if (idx == null) idx = this.imgs.indexOf(img) 169 | if (idx < 0 || idx > this.imgs.length - 1) return 170 | let vw = viewportWidth() 171 | let state = this.status[idx] 172 | this.idx = idx 173 | let wrapper = this.container.querySelectorAll('.wrapper')[idx] 174 | radio(this.dots.querySelectorAll('li')[idx]) 175 | this.emit('active', idx) 176 | let tx = idx*vw 177 | this.setTransform(- tx - 20) 178 | // not loaded 179 | if (!state) { 180 | this.status[idx] = 'loading' 181 | if (animate) { 182 | let image = query('.image', wrapper) 183 | if (image) image.style.display = 'none' 184 | let mask = query('.mask', wrapper) 185 | if (mask) mask.style.display = 'none' 186 | let holder = this.holder = doc.createElement('div') 187 | holder.className = 'imgs-preview-holder' 188 | let src = img.currentSrc || img.src 189 | holder.style.backgroundImage = `url('${src}')` 190 | let rect = img.getBoundingClientRect() 191 | assign(holder.style, { 192 | left: `${rect.left}px`, 193 | top: `${rect.top}px`, 194 | width: `${rect.width}px`, 195 | height: `${rect.height}px` 196 | }) 197 | body.appendChild(holder) 198 | } 199 | 200 | let image = this.createImage(wrapper, img.currentSrc || img.src) 201 | if (!animate) image.style.display = 'block' 202 | 203 | let pz = new PinchZoom(wrapper, { 204 | threshold: this.threshold, 205 | fastThreshold: this.fastThreshold, 206 | padding: 5, 207 | tapreset: false, 208 | draggable: true, 209 | maxScale: 4 210 | }) 211 | pz.on('swipe', this.onswipe.bind(this)) 212 | pz.on('move', dx => { 213 | let x = - 20 - tx - dx 214 | x = this.limit(x, vw) 215 | this.setTransform(x) 216 | }) 217 | //pz.on('tap', this.hide.bind(this)) 218 | pz.on('end', this.restore.bind(this)) 219 | this.zooms.push(pz) 220 | this.loadImage(image, wrapper).then(() => { 221 | this.loaded.push(idx) 222 | }, () => { 223 | }) 224 | } 225 | } 226 | onswipe(dir) { 227 | let vw = viewportWidth() 228 | let i = dir == 'left' ? this.idx + 1 : this.idx - 1 229 | i = Math.max(0, i) 230 | i = Math.min(this.imgs.length - 1 , i) 231 | this.animate(- i*vw - 20).then(() => { 232 | let img = this.imgs[i] 233 | if (i == this.idx) return 234 | this.active(img, i) 235 | }) 236 | } 237 | limit(x, vw) { 238 | x = Math.min(0, x) 239 | x = Math.max(-40 - (this.imgs.length - 1)*vw, x) 240 | return x 241 | } 242 | /** 243 | * Restore container transform to sane position 244 | * 245 | * @private 246 | */ 247 | restore() { 248 | let vw = viewportWidth() 249 | let idx = Math.round((- this.tx - 20)/vw) 250 | this.animate(- idx*vw - 20).then(() => { 251 | if (idx == this.idx) return 252 | let img = this.imgs[idx] 253 | this.active(img, idx) 254 | }) 255 | } 256 | /** 257 | * Load image inside wrapper 258 | * 259 | * @private 260 | * @param {Element} image 261 | * @param {Element} wrapper 262 | */ 263 | loadImage(image, wrapper) { 264 | if (image.complete) { 265 | let mask = query('.mask', wrapper) 266 | if (mask) wrapper.removeChild(mask) 267 | this.positionWrapper(wrapper, image) 268 | return this.positionHolder(wrapper, image.currentSrc || image.src, false).then(() => { 269 | image.style.display = 'block' 270 | }) 271 | } else { 272 | return this.positionHolder(wrapper).then(() => { 273 | image.style.display = 'block' 274 | let mask = query('.mask', wrapper) 275 | mask.style.display = 'block' 276 | let spinEl = domify(`
    `) 277 | if (wrapper.clientHeight > this.container.clientHeight) { 278 | spinEl.style.top = `${this.container.clientHeight/2}px` 279 | } 280 | wrapper.appendChild(spinEl) 281 | let stop = spin(spinEl, { 282 | color: '#ffffff', 283 | duration: 1000, 284 | width: 4 285 | }) 286 | let self = this 287 | return new Promise((resolve, reject) => { 288 | function onload() { 289 | stop() 290 | if (spinEl.parentNode) wrapper.removeChild(spinEl) 291 | if (mask.parentNode) wrapper.removeChild(mask) 292 | self.positionWrapper(wrapper, image) 293 | resolve() 294 | } 295 | if (image.complete) return onload() 296 | image.onload = onload 297 | image.onerror = e => { 298 | stop() 299 | reject(e) 300 | } 301 | }) 302 | }) 303 | } 304 | } 305 | positionWrapper(wrapper, image) { 306 | let vw = Math.max(doc.documentElement.clientWidth, window.innerWidth || 0) 307 | let dims = imgDimension(image) 308 | let h = (vw - 10)*dims.height/dims.width 309 | let top = Math.min(this.container.clientHeight - 10, h)/2 310 | 311 | assign(wrapper.style, { 312 | left: '5px', 313 | width: `${vw - 10}px`, 314 | height: `${h}px`, 315 | marginTop: `-${top}px` 316 | }) 317 | } 318 | createImage(wrapper, src) { 319 | let img = query('.image', wrapper) 320 | if (img) return img 321 | img = doc.createElement('img') 322 | img.className = 'image' 323 | img.src = this.opts.convert(src) 324 | wrapper.appendChild(img) 325 | return img 326 | } 327 | /** 328 | * Set translateX of container 329 | * 330 | * @private 331 | * @param {Number} x 332 | */ 333 | setTransform(x) { 334 | let el = this.container 335 | this.tx = x 336 | if (has3d) { 337 | el.style[transform] = `translate3d(${x}px,0,0)` 338 | } else { 339 | el.style[transform] = `translate(${x}px)` 340 | } 341 | } 342 | /** 343 | * Animate container for active image 344 | * 345 | * @private 346 | * @param {Number} x 347 | * @param {Number} duration = 200 348 | * @param {String} ease = 'out-circ' 349 | * @returns {Promise} 350 | */ 351 | animate(x, duration = 200, ease = 'out-circ') { 352 | if (x == this.tx) return Promise.resolve(null) 353 | this.animating = true 354 | let tween = this.tween = Tween({x: this.tx}) 355 | .ease(ease) 356 | .to({x: x}) 357 | .duration(duration) 358 | 359 | tween.update(function(o) { 360 | self.setTransform(o.x) 361 | }) 362 | let self = this 363 | let promise = new Promise(function (resolve) { 364 | tween.on('end', function(){ 365 | animate = function(){} // eslint-disable-line 366 | self.animating = false 367 | resolve() 368 | }) 369 | }) 370 | 371 | function animate() { 372 | raf(animate) 373 | tween.update() 374 | } 375 | 376 | animate() 377 | return promise 378 | } 379 | /** 380 | * Animate holder to match wrapper 381 | * 382 | * @private 383 | * @param {Element} wrapper 384 | * @param {String} src optional new src 385 | * @returns {undefined} 386 | */ 387 | positionHolder(wrapper, src, opacity = true) { 388 | let el = this.holder 389 | if (!el) return Promise.resolve(null) 390 | if (src) el.style.backgroundImage = `url('${src}')` 391 | let tween = Tween({ 392 | width: parseInt(el.style.width, 10), 393 | height: parseInt(el.style.height, 10), 394 | left: parseInt(el.style.left, 10), 395 | top: parseInt(el.style.top, 10), 396 | opacity: 0.3 397 | }) 398 | .ease('out-cube') 399 | .to({ 400 | width: parseInt(wrapper.style.width, 10), 401 | height: parseInt(wrapper.style.height, 10), 402 | left: parseInt(wrapper.style.left, 10), 403 | top: this.container.clientHeight/2 + parseInt(wrapper.style.marginTop, 10), 404 | opacity: 1 405 | }) 406 | .duration(300) 407 | 408 | tween.update(function(o) { 409 | let n = opacity ? o.opacity : 1 410 | assign(el.style, { 411 | width: `${o.width}px`, 412 | height: `${o.height}px`, 413 | left: `${o.left}px`, 414 | top: `${o.top}px`, 415 | opacity: n 416 | }) 417 | }) 418 | 419 | let self = this 420 | let promise = new Promise(function (resolve) { 421 | tween.on('end', function(){ 422 | if (el.parentNode) el.parentNode.removeChild(el) 423 | self.holder = null 424 | animate = function(){} // eslint-disable-line 425 | resolve() 426 | }) 427 | }) 428 | 429 | function animate() { 430 | raf(animate) 431 | tween.update() 432 | } 433 | 434 | animate() 435 | return promise 436 | } 437 | /** 438 | * hide container and unbind events 439 | * 440 | * @public 441 | */ 442 | hide() { 443 | if (this.dots) body.removeChild(this.dots) 444 | event.unbind(this.container, 'touchstart', this._containTap) 445 | event.unbind(doc, 'touchmove', preventDefault) 446 | this.zooms.forEach(pz => { 447 | pz.unbind() 448 | }) 449 | this.hideImage() 450 | this.zooms = [] 451 | this.status = [] 452 | this.container.style.backgroundColor = 'rgba(0,0,0,0)' 453 | this.emit('hide') 454 | body.removeChild(this.container) 455 | } 456 | /** 457 | * unbind tap event 458 | * 459 | * @public 460 | */ 461 | unbind() { 462 | event.unbind(doc, 'touchstart', this._ontap) 463 | } 464 | hideImage() { 465 | let idx = this.idx 466 | let img = this.imgs[idx] 467 | let rect = img.getBoundingClientRect() 468 | let wrapper = this.container.querySelectorAll('.wrapper')[idx] 469 | if (rect.height == 0 || rect.bottom < 0 || rect.top > this.container.clientHeight) return 470 | let holder = doc.createElement('div') 471 | let src = img.currentSrc || img.src 472 | holder.className = 'imgs-preview-holder' 473 | holder.style.backgroundImage = `url('${src}')` 474 | assign(holder.style, { 475 | width: parseInt(wrapper.style.width, 10) + 'px', 476 | height: parseInt(wrapper.style.height, 10) + 'px', 477 | left: parseInt(wrapper.style.left, 10) + 'px', 478 | top: (this.container.clientHeight/2 + parseInt(wrapper.style.marginTop, 10)) + 'px', 479 | [transition]: 'all 0.25s ease-in' 480 | }) 481 | body.appendChild(holder) 482 | event.bind(holder, transitionend, end) 483 | setTimeout(() => { 484 | assign(holder.style, { 485 | width: `${rect.width}px`, 486 | height: `${rect.height}px`, 487 | top: `${rect.top}px`, 488 | left: `${rect.left}px` 489 | }) 490 | }, 20) 491 | function end() { 492 | event.unbind(holder, transitionend, end) 493 | body.removeChild(holder) 494 | } 495 | } 496 | } 497 | 498 | function imgDimension(image) { 499 | if (image.naturalWidth) { 500 | return { 501 | height: image.naturalHeight, 502 | width: image.naturalWidth 503 | } 504 | } else { 505 | let i = new Image() 506 | i.src = image.currentSrc || image.src; 507 | return { 508 | height: i.height, 509 | width: i.width 510 | } 511 | } 512 | } 513 | 514 | function viewportWidth() { 515 | return Math.max(doc.documentElement.clientWidth, window.innerWidth || 0) 516 | } 517 | 518 | function preventDefault(e) { 519 | e.preventDefault() 520 | } 521 | export default ImagesPreview 522 | -------------------------------------------------------------------------------- /src/spin.js: -------------------------------------------------------------------------------- 1 | import autoscale from 'autoscale-canvas' 2 | import raf from 'raf' 3 | 4 | function createCtx(node) { 5 | let canvas = document.createElement('canvas') 6 | node.appendChild(canvas) 7 | let rect = node.getBoundingClientRect() 8 | let ctx = canvas.getContext('2d') 9 | canvas.height = rect.height 10 | canvas.width = rect.width 11 | autoscale(canvas) 12 | return ctx 13 | } 14 | 15 | const hex_reg = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i 16 | function torgb(hex) { 17 | if (hex.length == 4) hex = hex.replace(/[^#]/g, function (p) { 18 | return p + p 19 | }) 20 | let result = hex_reg.exec(hex) 21 | return result ? { 22 | r: parseInt(result[1], 16), 23 | g: parseInt(result[2], 16), 24 | b: parseInt(result[3], 16) 25 | } : null 26 | } 27 | 28 | export default function (node, opts) { 29 | opts = opts || [] 30 | let ctx = createCtx(node) 31 | let h = node.clientHeight || 32 32 | let w = node.clientWidth || 32 33 | let duration = opts.duration || 1000 34 | let color = opts.color || '#ffffff' 35 | let rgb = torgb(color) 36 | let x = h/2 37 | let y = w/2 38 | let r = Math.min(h, w)/2 - 4 39 | let stop 40 | let start 41 | function step(timestamp) { 42 | ctx.clearRect(0, 0, w, h) 43 | if (stop) return 44 | if (!start) start = timestamp 45 | if (!node.parentNode) stop = true 46 | let ts = (timestamp - start)%duration 47 | ctx.beginPath() 48 | ctx.strokeStyle = 'rgba(' + rgb.r +', ' + rgb.g + ', ' + rgb.b+ ', 0.4)' 49 | ctx.arc(x, y, r, 0, Math.PI*2) 50 | ctx.lineWidth = opts.width || 4 51 | ctx.lineCap = 'round' 52 | ctx.stroke() 53 | let a = -Math.PI/2 + Math.PI*2*ts/duration 54 | let e = a + Math.PI/2 55 | ctx.beginPath() 56 | ctx.strokeStyle = 'rgba(' + rgb.r +', ' + rgb.g + ', ' + rgb.b+ ', 1)' 57 | ctx.arc(x, y, r, a, e) 58 | ctx.stroke() 59 | raf(step) 60 | } 61 | raf(step) 62 | return function () { 63 | stop = true 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | #images-preview { 2 | background-color: #000; 3 | padding: 0 20px; 4 | position: fixed; 5 | top: 0; 6 | left: 0; 7 | bottom: 0; 8 | z-index: 99; 9 | } 10 | #images-preview::before, 11 | #images-preview::after { 12 | position: absolute; 13 | left: 0; 14 | right: 0; 15 | background-color: #000; 16 | height: 5px; 17 | content: ''; 18 | z-index: 99; 19 | } 20 | #images-preview::before { 21 | top: 0; 22 | } 23 | #images-preview::after { 24 | bottom: 0; 25 | } 26 | .imgs-preview-holder { 27 | background-size: contain; 28 | background-repeat: no-repeat; 29 | background-position: center; 30 | position: fixed; 31 | z-index: 9999; 32 | } 33 | .imgs-preview-dots { 34 | position: fixed; 35 | bottom: 1em; 36 | left: 0; 37 | right: 0; 38 | height: 10px; 39 | text-align: center; 40 | z-index: 9999; 41 | } 42 | .imgs-preview-dots ul{ 43 | display: table; 44 | margin: 0 auto; 45 | padding: 0; 46 | } 47 | .imgs-preview-dots li{ 48 | float: left; 49 | width: 8px; 50 | height: 8px; 51 | display: table-cell; 52 | margin: 0 4px; 53 | border-radius: 50%; 54 | background-color: rgba(255,255,255,0.3); 55 | } 56 | .imgs-preview-dots li.active{ 57 | background-color: #fff; 58 | } 59 | #images-preview > div { 60 | position: relative; 61 | float: left; 62 | height: 100%; 63 | padding: 0 5px; 64 | box-sizing: border-box; 65 | } 66 | #images-preview .wrapper { 67 | position: absolute; 68 | left: 0; 69 | right: 0; 70 | height: 400px; 71 | top: 50%; 72 | margin-top: -200px; 73 | background-size: cover; 74 | } 75 | #images-preview .mask { 76 | background-size: contain; 77 | background-repeat: no-repeat; 78 | background-position: center; 79 | position: absolute; 80 | left: 0; 81 | right: 0; 82 | top: 0; 83 | bottom: 0; 84 | z-index: -1; 85 | } 86 | #images-preview .mask::before { 87 | position: absolute; 88 | content: ''; 89 | left: 0; 90 | right: 0; 91 | top: 0; 92 | bottom: 0; 93 | background-color: rgba(0,0,0,0.3); 94 | } 95 | #images-preview .spin { 96 | width: 32px; 97 | height: 32px; 98 | position: absolute; 99 | top: 50%; 100 | left: 50%; 101 | margin-top: -16px; 102 | margin-left: -16px; 103 | z-index: 9999; 104 | } 105 | #images-preview .image { 106 | display: none; 107 | width: 100%; 108 | height: auto; 109 | } 110 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | /*global describe, it, beforeEach, afterEach*/ 2 | 'use strict' 3 | import assert from 'assert' 4 | import Mod from '../src' 5 | 6 | const PI = Math.PI 7 | 8 | let el 9 | beforeEach(() => { 10 | el = document.createElement('div') 11 | document.body.appendChild(el) 12 | }) 13 | 14 | afterEach(() => { 15 | document.body.removeChild(el) 16 | }) 17 | 18 | describe('works', function() { 19 | it('should works', function () { 20 | var m = new Mod() 21 | console.log(PI) 22 | assert.equal(1, 1) 23 | }) 24 | }) 25 | -------------------------------------------------------------------------------- /webpack.alone.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack') 2 | 3 | module.exports = { 4 | entry: './src/index.js', 5 | debug: false, 6 | output: { 7 | path: '.', 8 | filename: 'preview.js', 9 | libraryTarget: 'umd', 10 | library: 'ImagesPreview' 11 | }, 12 | module: { 13 | loaders: [ 14 | {test: /\.jsx?$/, exclude: /(node_modules|dist)/, loader: 'babel', query: { presets: ['es2015']}}, 15 | ] 16 | }, 17 | plugins:[new webpack.optimize.UglifyJsPlugin({ })] 18 | } 19 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var cssnext = require('postcss-cssnext') 2 | 3 | module.exports = { 4 | entry: './example/index.js', 5 | output: { 6 | path: 'example', 7 | filename: 'bundle.js' 8 | }, 9 | module: { 10 | loaders: [ 11 | {test: /\.svg/, loader: 'svg-url-loader'}, 12 | {test: /\.jsx?$/, exclude: /(node_modules|dist)/, loader: 'babel', query: { presets: ['es2015']}}, 13 | {test: /\.css$/, loader: 'style!css!postcss'}, 14 | {test: /\.png$/, loader: 'url-loader?mimetype=image/png'}, 15 | {test: /\.json$/, loader: 'json' }, 16 | {test: /\.html$/, loader: 'html'} 17 | ] 18 | }, 19 | postcss: [cssnext()], 20 | plugins: [] 21 | } 22 | --------------------------------------------------------------------------------