diff --git a/CHANGELOG.md b/CHANGELOG.md index c1e0ddd..30f6cdf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,15 +1,24 @@ # Changelog +## 0.3.0 (Dec 24, 2015) + +- Add 2 new options: "view" and "viewed" +- Add 2 new events: "view" and "viewed" +- Add keyboard support: stop playing when tap the `Space` key +- Fix lost transition after call full method in inline mode +- Fix incorrect tooltip after switch image quickly + + ## 0.2.0 (Oct 18, 2015) - Added one new method: "moveTo" -- Improved the image loading and showing. +- Improved the image loading and showing ## 0.1.1 (Oct 7, 2015) -- Fixed the issue of modal closing after zoomed in and zoomed out. +- Fixed the issue of modal closing after zoomed in and zoomed out ## 0.1.0 (Sep 2, 2015) diff --git a/README.md b/README.md index 046f8ed..7d7a8ce 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,26 @@ -# [Viewer](https://github.com/fengyuanchen/viewer) +# Viewer > A simple jQuery image viewing plugin. -- [Demo](http://fengyuanchen.github.io/viewer) +- [Homepage](http://fengyuanchen.github.io/viewer) +- [Viewer without jQuery](https://github.com/fengyuanchen/viewerjs) + + + +## Table of contents + + - [Features](#features) + - [Main](#main) + - [Getting started](#getting-started) + - [Keyboard support](#keyboard-support) + - [Options](#options) + - [Methods](#methods) + - [Events](#events) + - [No conflict](#no-conflict) + - [Browser support](#browser-support) + - [Contributing](#contributing) + - [Versioning](#versioning) + - [License](#license) @@ -27,7 +45,7 @@ dist/ ├── viewer.css ( 8 KB) ├── viewer.min.css ( 7 KB) -├── viewer.js (44 KB) +├── viewer.js (45 KB) └── viewer.min.js (19 KB) ``` @@ -92,6 +110,7 @@ $('.images').viewer(); > Only available in modal mode. - `Esc`: Exit full screen or stop play. +- `Space`: Stop play. - `←`: View the previous image. - `→`: View the next image. - `↑`: Zoom in the image. @@ -100,6 +119,9 @@ $('.images').viewer(); - `Ctrl + 1`: Zoom in to natural size. +[⬆ back to top](#table-of-contents) + + ## Options @@ -322,25 +344,44 @@ A shortcut of the "hide.viewer" event. A shortcut of the "hidden.viewer" event. +### view + +- Type: `Function` +- Default: `null` + +A shortcut of the "view.viewer" event. + + +### viewed + +- Type: `Function` +- Default: `null` + +A shortcut of the "viewed.viewer" event. + + +[⬆ back to top](#table-of-contents) + + ## Methods -As there is an **asynchronous** process when load the image(s), you **should call most of the methods after shown (modal mode) or built (inline mode)**, except "show" (modal mode) and "destroy". +As there are some **asynchronous** processes when start the viewer, you should call a method only when it is available, see the following **lifecycle**: ```js -// Modal mode $().viewer({ + built: function () { + // 2 methods are available here: "show" and "destroy". + }, shown: function () { - $().viewer('method', argument1, , argument2, ..., argumentN); + // 9 methods are available here: "hide", "view", "prev", "next", "play", "stop", "full", "exit" and "destroy". + }, + viewed: function () { + // All methods are available here except "show". + $(this).viewer('rotate', 90).viewer('scale', -1, -1); } } -// Inline mode -$().viewer({ - built: function () { - $().viewer('method', argument1, , argument2, ..., argumentN); - } -} ``` @@ -468,7 +509,7 @@ $().viewer('zoomTo', 1); // Zoom to natural size (100%) Rotate the image with a relative degree. -> Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+). +> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)). ```js $().viewer('rotate', 90); @@ -483,7 +524,7 @@ $().viewer('rotate', -90); Rotate the image to an absolute degree. -> Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+). +> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)). ```js $().viewer('rotateTo', 0); // Reset to zero degree @@ -506,7 +547,7 @@ $().viewer('rotateTo', 360); // Rotate a full round Scale the image. -> Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+). +> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)). ```js $().viewer('scale', -1); // Flip both horizontal and vertical @@ -524,7 +565,7 @@ $().viewer('scale', 1, -1); // Flip vertical Scale the abscissa of the image. -> Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+). +> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)). ```js $().viewer('scaleX', -1); // Flip horizontal @@ -541,7 +582,7 @@ $().viewer('scaleX', -1); // Flip horizontal Scale the ordinate of the image. -> Requires [CSS3 2D Transforms](http://caniuse.com/transforms2d) support (IE 9+). +> Requires [CSS3 2D Transforms](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) support ([IE 9+](http://caniuse.com/transforms2d)). ```js $().viewer('scaleY', -1); // Flip vertical @@ -562,14 +603,14 @@ Stop play. Enter modal mode. -> only available in inline mode. +> Only available in inline mode. ### exit() Exit modal mode. -> only available in inline mode. +> Only available in inline mode. ### tooltip() @@ -594,12 +635,15 @@ Reset the image to its initial state. Destroy the viewer and remove the instance. +[⬆ back to top](#table-of-contents) + + ## Events ### build.viewer -This event fires when a viewer instance start to build. +This event fires when a viewer instance starts to build. ### built.viewer @@ -609,30 +653,43 @@ This event fires when a viewer instance has built. ### show.viewer -This event fires when a viewer element start to show. +This event fires when the viewer modal starts to show. -> only available in modal mode. +> Only available in modal mode. ### shown.viewer -This event fires when a viewer element has shown. +This event fires when the viewer modal has shown. -> only available in modal mode. +> Only available in modal mode. ### hide.viewer -This event fires when a viewer element start to hide. +This event fires when the viewer modal starts to hide. -> only available in modal mode. +> Only available in modal mode. ### hidden.viewer -This event fires when a viewer element has hidden. +This event fires when the viewer modal has hidden. + +> Only available in modal mode. + + +### view.viewer -> only available in modal mode. +This event fires when a viewer starts to show (view) an image. + + +### viewed.viewer + +This event fires when a viewer has shown (viewed) an image. + + +[⬆ back to top](#table-of-contents) @@ -651,6 +708,12 @@ If you have to use other plugin with the same namespace, just call the `$.fn.vie +## Contributing + +Please read through our [contributing guidelines](CONTRIBUTING.md). + + + ## Browser support - Chrome (latest 2) @@ -672,3 +735,6 @@ Maintained under the [Semantic Versioning guidelines](http://semver.org/). ## License [MIT](http://opensource.org/licenses/MIT) © [Fengyuan Chen](http://chenfengyuan.com) + + +[⬆ back to top](#table-of-contents) diff --git a/demo/css/main.css b/demo/css/main.css index c80eb48..55e7ee9 100644 --- a/demo/css/main.css +++ b/demo/css/main.css @@ -1,6 +1,3 @@ -/* Basic style - * -------------------------------------------------------------------------- */ - /* Header */ .docs-header { diff --git a/demo/js/main.js b/demo/js/main.js index 623dc1d..e69ccf6 100644 --- a/demo/js/main.js +++ b/demo/js/main.js @@ -6,18 +6,33 @@ $(function () { var $images = $('.docs-pictures'); var $toggles = $('.docs-toggles'); var $buttons = $('.docs-buttons'); - var handler = function (e) { - console.log(e.type); - }; var options = { // inline: true, url: 'data-original', - build: handler, - built: handler, - show: handler, - shown: handler, - hide: handler, - hidden: handler + build: function (e) { + console.log(e.type); + }, + built: function (e) { + console.log(e.type); + }, + show: function (e) { + console.log(e.type); + }, + shown: function (e) { + console.log(e.type); + }, + hide: function (e) { + console.log(e.type); + }, + hidden: function (e) { + console.log(e.type); + }, + view: function (e) { + console.log(e.type); + }, + viewed: function (e) { + console.log(e.type); + } }; function toggleButtons(mode) { @@ -31,12 +46,30 @@ $(function () { } $images.on({ - 'build.viewer': handler, - 'built.viewer': handler, - 'show.viewer': handler, - 'shown.viewer': handler, - 'hide.viewer': handler, - 'hidden.viewer': handler + 'build.viewer': function (e) { + console.log(e.type); + }, + 'built.viewer': function (e) { + console.log(e.type); + }, + 'show.viewer': function (e) { + console.log(e.type); + }, + 'shown.viewer': function (e) { + console.log(e.type); + }, + 'hide.viewer': function (e) { + console.log(e.type); + }, + 'hidden.viewer': function (e) { + console.log(e.type); + }, + 'view.viewer': function (e) { + console.log(e.type); + }, + 'viewed.viewer': function (e) { + console.log(e.type); + } }).viewer(options); toggleButtons(options.inline ? 'inline' : 'modal'); diff --git a/dist/viewer.css b/dist/viewer.css index bc23f94..f5fa0e9 100644 --- a/dist/viewer.css +++ b/dist/viewer.css @@ -1,11 +1,11 @@ /*! - * Viewer v0.2.0 + * Viewer v0.3.0 * https://github.com/fengyuanchen/viewer * * Copyright (c) 2015 Fengyuan Chen * Released under the MIT license * - * Date: 2015-10-18T11:12:55.720Z + * Date: 2015-12-24T09:51:21.635Z */ .viewer-zoom-in:before, .viewer-zoom-out:before, @@ -21,118 +21,140 @@ .viewer-fullscreen:before, .viewer-fullscreen-exit:before, .viewer-close:before { + font-size: 0; + line-height: 0; + display: block; + width: 20px; height: 20px; - font-size: 0; - line-height: 0; + color: transparent; - background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC"); + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC'); background-repeat: no-repeat; } .viewer-zoom-in:before { - content: "Zoom In"; + content: 'Zoom In'; + background-position: 0 0; } .viewer-zoom-out:before { - content: "Zoom Out"; + content: 'Zoom Out'; + background-position: -20px 0; } .viewer-one-to-one:before { - content: "One to One"; + content: 'One to One'; + background-position: -40px 0; } .viewer-reset:before { - content: "Reset"; + content: 'Reset'; + background-position: -60px 0; } .viewer-prev:before { - content: "Previous"; + content: 'Previous'; + background-position: -80px 0; } .viewer-play:before { - content: "Play"; + content: 'Play'; + background-position: -100px 0; } .viewer-next:before { - content: "Next"; + content: 'Next'; + background-position: -120px 0; } .viewer-rotate-left:before { - content: "Rotate Left"; + content: 'Rotate Left'; + background-position: -140px 0; } .viewer-rotate-right:before { - content: "Rotate Right"; + content: 'Rotate Right'; + background-position: -160px 0; } .viewer-flip-horizontal:before { - content: "Flip Horizontal"; + content: 'Flip Horizontal'; + background-position: -180px 0; } .viewer-flip-vertical:before { - content: "Flip Vertical"; + content: 'Flip Vertical'; + background-position: -200px 0; } .viewer-fullscreen:before { - content: "Enter Full Screen"; + content: 'Enter Full Screen'; + background-position: -220px 0; } .viewer-fullscreen-exit:before { - content: "Exit Full Screen"; + content: 'Exit Full Screen'; + background-position: -240px 0; } .viewer-close:before { - content: "Close"; + content: 'Close'; + background-position: -260px 0; } .viewer-container { + font-size: 0; + line-height: 0; + position: absolute; top: 0; right: 0; bottom: 0; left: 0; + overflow: hidden; - font-size: 0; - line-height: 0; - -ms-touch-action: none; - touch-action: none; + -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; + background-color: #000; background-color: rgba(0, 0, 0, .5); direction: ltr !important; + -ms-touch-action: none; + touch-action: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .viewer-container::-moz-selection, - .viewer-container *::-moz-selection { +.viewer-container *::-moz-selection { background-color: transparent; } .viewer-container::selection, - .viewer-container *::selection { +.viewer-container *::selection { background-color: transparent; } .viewer-container img { display: block; + width: 100%; min-width: 0 !important; max-width: none !important; @@ -147,6 +169,7 @@ right: 0; bottom: 0; left: 0; + overflow: hidden; } .viewer-canvas > img { @@ -161,43 +184,53 @@ right: 0; bottom: 0; left: 0; + overflow: hidden; + text-align: center; } .viewer-navbar { overflow: hidden; + background-color: #000; background-color: rgba(0, 0, 0, .5); } .viewer-list { - height: 50px; + overflow: hidden; + -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; - padding: 1px 0; + height: 50px; margin: 0; - overflow: hidden; + padding: 1px 0; } .viewer-list > li { + font-size: 0; + line-height: 0; + float: left; + overflow: hidden; + width: 30px; height: 50px; - overflow: hidden; - font-size: 0; - line-height: 0; - color: transparent; + cursor: pointer; - filter: alpha(opacity=50); + opacity: .5; + color: transparent; + + filter: alpha(opacity=50); } .viewer-list > li + li { margin-left: 1px; } .viewer-list > .viewer-active { - filter: alpha(opacity=100); opacity: 1; + + filter: alpha(opacity=100); } .viewer-player { @@ -206,8 +239,11 @@ right: 0; bottom: 0; left: 0; + display: none; + cursor: none; + background-color: #000; } .viewer-player > img { @@ -217,20 +253,24 @@ } .viewer-toolbar { + overflow: hidden; + width: 280px; - padding: 3px 0; margin: 0 auto 5px; - overflow: hidden; + padding: 3px 0; } .viewer-toolbar > li { float: left; + overflow: hidden; + width: 24px; height: 24px; - overflow: hidden; + cursor: pointer; - background-color: #000; - background-color: rgba(0, 0, 0, .5); + border-radius: 50%; + background-color: #000; + background-color: rgba(0, 0, 0, .5); } .viewer-toolbar > li:hover { background-color: #000; @@ -253,52 +293,67 @@ } .viewer-tooltip { + font-size: 12px; + line-height: 20px; + position: absolute; top: 50%; left: 50%; + display: none; + width: 50px; height: 20px; margin-top: -10px; margin-left: -25px; - font-size: 12px; - line-height: 20px; - color: #fff; + text-align: center; - background-color: #000; - background-color: rgba(0, 0, 0, .8); + + color: #fff; border-radius: 10px; + background-color: #000; + background-color: rgba(0, 0, 0, .8); } .viewer-title { + font-size: 12px; + line-height: 1; + display: inline-block; + overflow: hidden; + max-width: 90%; margin: 0 5% 5px; - overflow: hidden; - font-size: 12px; - line-height: 1; - color: #ccc; - text-overflow: ellipsis; + white-space: nowrap; - filter: alpha(opacity=80); + text-overflow: ellipsis; + opacity: .8; + color: #ccc; + + filter: alpha(opacity=80); } .viewer-title:hover { - filter: alpha(opacity=100); opacity: 1; + + filter: alpha(opacity=100); } .viewer-button { position: absolute; top: -40px; right: -40px; + + overflow: hidden; + width: 80px; height: 80px; - overflow: hidden; + cursor: pointer; - background-color: #000; - background-color: rgba(0, 0, 0, .5); + border-radius: 50%; + background-color: #000; + background-color: rgba(0, 0, 0, .5); } .viewer-button:before { position: absolute; @@ -340,13 +395,15 @@ } .viewer-fade { - filter: alpha(opacity=0); opacity: 0; + + filter: alpha(opacity=0); } .viewer-in { - filter: alpha(opacity=100); opacity: 1; + + filter: alpha(opacity=100); } .viewer-transition { diff --git a/dist/viewer.js b/dist/viewer.js index 13024f4..68e1771 100644 --- a/dist/viewer.js +++ b/dist/viewer.js @@ -1,11 +1,11 @@ /*! - * Viewer v0.2.0 + * Viewer v0.3.0 * https://github.com/fengyuanchen/viewer * * Copyright (c) 2015 Fengyuan Chen * Released under the MIT license * - * Date: 2015-10-18T11:12:56.198Z + * Date: 2015-12-24T09:51:24.343Z */ (function (factory) { @@ -79,9 +79,6 @@ var max = Math.max; var num = Number; - // Prototype - var prototype = {}; - function isString(s) { return typeof s === 'string'; } @@ -130,6 +127,11 @@ return transforms.length ? transforms.join(' ') : 'none'; } + // Force reflow to enable CSS3 transition + function forceReflow(element) { + return element.offsetWidth; + } + // e.g.: http://domain.com/path/to/picture.jpg?size=1280×960 -> picture.jpg function getImageName(url) { return isString(url) ? url.replace(/^.*\//, '').replace(/[\?&#].*$/, '') : ''; @@ -162,8 +164,10 @@ this.isViewed = false; this.isFulled = false; this.isPlayed = false; + this.wheeling = false; this.playing = false; this.fading = false; + this.tooltiping = false; this.transitioning = false; this.action = false; this.target = false; @@ -173,7 +177,9 @@ this.init(); } - $.extend(prototype, { + Viewer.prototype = { + constructor: Viewer, + init: function () { var options = this.options; var $this = this.$element; @@ -194,7 +200,7 @@ return; } - // Override `transiton` option if it is not supported + // Override `transition` option if it is not supported if (!SUPPORT_TRANSITION) { options.transition = false; } @@ -229,10 +235,8 @@ if (this.count === this.length) { this.build(); } - } - }); + }, - $.extend(prototype, { build: function () { var options = this.options; var $this = this.$element; @@ -245,11 +249,7 @@ return; } - if (!$parent || !$parent.length) { - $parent = $this.parent(); - } - - this.$parent = $parent; + this.$parent = $parent = $this.parent(); this.$viewer = $viewer = $(Viewer.TEMPLATE); this.$canvas = $viewer.find('.viewer-canvas'); this.$footer = $viewer.find('.viewer-footer'); @@ -307,16 +307,25 @@ return; } - if (options.inline && !options.container) { + if (options.inline) { $this.removeClass(CLASS_HIDE); } this.$viewer.remove(); - } - }); + }, - $.extend(prototype, { bind: function () { + var options = this.options; + var $this = this.$element; + + if ($.isFunction(options.view)) { + $this.on(EVENT_VIEW, options.view); + } + + if ($.isFunction(options.viewed)) { + $this.on(EVENT_VIEWED, options.viewed); + } + this.$viewer. on(EVENT_CLICK, $.proxy(this.click, this)). on(EVENT_WHEEL, $.proxy(this.wheel, this)); @@ -332,6 +341,17 @@ }, unbind: function () { + var options = this.options; + var $this = this.$element; + + if ($.isFunction(options.view)) { + $this.off(EVENT_VIEW, options.view); + } + + if ($.isFunction(options.viewed)) { + $this.off(EVENT_VIEWED, options.viewed); + } + this.$viewer. off(EVENT_CLICK, this.click). off(EVENT_WHEEL, this.wheel); @@ -344,10 +364,8 @@ off(EVENT_KEYDOWN, this._keydown); $window.off(EVENT_RESIZE, this._resize); - } - }); + }, - $.extend(prototype, { render: function () { this.initContainer(); this.initViewer(); @@ -522,7 +540,7 @@ }); if ($.isFunction(callback)) { - if (this.options.transition) { + if (this.transitioning) { $image.one(EVENT_TRANSITIONEND, callback); } else { callback(); @@ -533,10 +551,8 @@ resetImage: function () { this.$image.remove(); this.$image = null; - } - }); + }, - $.extend(prototype, { start: function (e) { var target = e.target; @@ -582,7 +598,7 @@ break; case 'one-to-one': - if (this.image.ratio === 1) { + if (image.ratio === 1) { this.zoomTo(this.initialImage.ratio); } else { this.zoomTo(1); @@ -668,7 +684,7 @@ var parentHeight = $parent.height(); var filled = e.data && e.data.filled; - getImageSize(image, $.proxy(function (naturalWidth, naturalHeight) { + getImageSize(image, function (naturalWidth, naturalHeight) { var aspectRatio = naturalWidth / naturalHeight; var width = parentWidth; var height = parentHeight; @@ -693,7 +709,7 @@ marginLeft: (parentWidth - width) / 2, marginTop: (parentHeight - height) / 2 }); - }, this)); + }); }, resize: function () { @@ -724,6 +740,17 @@ event.preventDefault(); + // Limit wheel speed to prevent zoom too fast + if (this.wheeling) { + return; + } + + this.wheeling = true; + + setTimeout($.proxy(function () { + this.wheeling = false; + }, this), 50); + if (e.deltaY) { delta = e.deltaY > 0 ? 1 : -1; } else if (e.wheelDelta) { @@ -761,6 +788,14 @@ break; + // (Key: Space) + case 32: + if (this.isPlayed) { + this.stop(); + } + + break; + // View previous (Key: ←) case 37: this.prev(); @@ -768,6 +803,10 @@ // Zoom in (Key: ↑) case 38: + + // Prevent scroll on Firefox + e.preventDefault(); + this.zoom(options.zoomRatio, true); break; @@ -778,6 +817,10 @@ // Zoom out (Key: ↓) case 40: + + // Prevent scroll on Firefox + e.preventDefault(); + this.zoom(-options.zoomRatio, true); break; @@ -902,10 +945,7 @@ this.action = false; } - } - }); - - $.extend(prototype, { + }, // Show the viewer (only available in modal mode) show: function () { @@ -938,9 +978,8 @@ if (options.transition) { this.transitioning = true; - - /* jshint expr:true */ - $viewer.addClass(CLASS_TRANSITION).get(0).offsetWidth; + $viewer.addClass(CLASS_TRANSITION); + forceReflow($viewer[0]); $viewer.one(EVENT_TRANSITIONEND, $.proxy(this.shown, this)).addClass(CLASS_IN); } else { $viewer.addClass(CLASS_IN); @@ -1088,7 +1127,7 @@ x = num(x); y = num(y); - if (this.isShown && !this.isPlayed && this.options.movable) { + if (this.isViewed && !this.isPlayed && this.options.movable) { if (isNumber(x)) { image.left = x; changed = true; @@ -1144,7 +1183,7 @@ ratio = max(0, ratio); - if (isNumber(ratio) && this.isShown && !this.isPlayed && (_zoomable || options.zoomable)) { + if (isNumber(ratio) && this.isViewed && !this.isPlayed && (_zoomable || options.zoomable)) { if (!_zoomable) { minZoomRatio = max(minZoomRatio, options.minZoomRatio); maxZoomRatio = min(maxZoomRatio, options.maxZoomRatio); @@ -1190,7 +1229,7 @@ degree = num(degree); - if (isNumber(degree) && this.isShown && !this.isPlayed && this.options.rotatable) { + if (isNumber(degree) && this.isViewed && !this.isPlayed && this.options.rotatable) { image.rotate = degree; this.renderImage(); } @@ -1215,7 +1254,7 @@ scaleX = num(scaleX); scaleY = num(scaleY); - if (this.isShown && !this.isPlayed && this.options.scalable) { + if (this.isViewed && !this.isPlayed && this.options.scalable) { if (isNumber(scaleX)) { image.scaleX = scaleX; changed = true; @@ -1402,35 +1441,41 @@ CLASS_TRANSITION ].join(' '); - if (!this.isShown || this.isPlayed || !options.tooltip) { + if (!this.isViewed || this.isPlayed || !options.tooltip) { return; } $tooltip.text(round(image.ratio * 100) + '%'); - if (!this.fading) { + if (!this.tooltiping) { if (options.transition) { + if (this.fading) { + $tooltip.trigger(EVENT_TRANSITIONEND); + } - /* jshint expr:true */ - $tooltip.addClass(classes).get(0).offsetWidth; + $tooltip.addClass(classes); + forceReflow($tooltip[0]); $tooltip.addClass(CLASS_IN); } else { $tooltip.addClass(CLASS_SHOW); } } else { - clearTimeout(this.fading); + clearTimeout(this.tooltiping); } - this.fading = setTimeout($.proxy(function () { + this.tooltiping = setTimeout($.proxy(function () { if (options.transition) { - $tooltip.one(EVENT_TRANSITIONEND, function () { + $tooltip.one(EVENT_TRANSITIONEND, $.proxy(function () { $tooltip.removeClass(classes); - }).removeClass(CLASS_IN); + this.fading = false; + }, this)).removeClass(CLASS_IN); + + this.fading = true; } else { $tooltip.removeClass(CLASS_SHOW); } - this.fading = false; + this.tooltiping = false; }, this), 1000); }, @@ -1445,7 +1490,7 @@ // Reset the image to its initial state. reset: function () { - if (this.isShown && !this.isPlayed) { + if (this.isViewed && !this.isPlayed) { this.image = $.extend({}, this.initialImage); this.renderImage(); } @@ -1468,10 +1513,7 @@ this.unbuild(); $this.removeData(NAMESPACE); - } - }); - - $.extend(prototype, { + }, // A shortcut for triggering custom events trigger: function (type, data) { @@ -1593,9 +1635,7 @@ return (image.left >= 0 && image.top >= 0 && image.width <= viewer.width && image.height <= viewer.height); } - }); - - $.extend(Viewer.prototype, prototype); + }; Viewer.DEFAULTS = { // Enable inline mode @@ -1671,7 +1711,9 @@ show: null, shown: null, hide: null, - hidden: null + hidden: null, + view: null, + viewed: null }; Viewer.TEMPLATE = ( diff --git a/dist/viewer.min.css b/dist/viewer.min.css index 20e4fee..d970a43 100644 --- a/dist/viewer.min.css +++ b/dist/viewer.min.css @@ -1,9 +1,9 @@ /*! - * Viewer v0.2.0 + * Viewer v0.3.0 * https://github.com/fengyuanchen/viewer * * Copyright (c) 2015 Fengyuan Chen * Released under the MIT license * - * Date: 2015-10-18T11:12:55.720Z - */.viewer-container,.viewer-navbar{background-color:#000;overflow:hidden}.viewer-canvas,.viewer-container,.viewer-footer,.viewer-player{right:0;bottom:0;left:0}.viewer-button,.viewer-canvas,.viewer-container,.viewer-footer,.viewer-list,.viewer-navbar,.viewer-open,.viewer-title,.viewer-toolbar,.viewer-toolbar>li{overflow:hidden}.viewer-close:before,.viewer-flip-horizontal:before,.viewer-flip-vertical:before,.viewer-fullscreen-exit:before,.viewer-fullscreen:before,.viewer-next:before,.viewer-one-to-one:before,.viewer-play:before,.viewer-prev:before,.viewer-reset:before,.viewer-rotate-left:before,.viewer-rotate-right:before,.viewer-zoom-in:before,.viewer-zoom-out:before{display:block;width:20px;height:20px;font-size:0;line-height:0;color:transparent;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC);background-repeat:no-repeat}.viewer-zoom-in:before{content:"Zoom In";background-position:0 0}.viewer-zoom-out:before{content:"Zoom Out";background-position:-20px 0}.viewer-one-to-one:before{content:"One to One";background-position:-40px 0}.viewer-reset:before{content:"Reset";background-position:-60px 0}.viewer-prev:before{content:"Previous";background-position:-80px 0}.viewer-play:before{content:"Play";background-position:-100px 0}.viewer-next:before{content:"Next";background-position:-120px 0}.viewer-rotate-left:before{content:"Rotate Left";background-position:-140px 0}.viewer-rotate-right:before{content:"Rotate Right";background-position:-160px 0}.viewer-flip-horizontal:before{content:"Flip Horizontal";background-position:-180px 0}.viewer-flip-vertical:before{content:"Flip Vertical";background-position:-200px 0}.viewer-fullscreen:before{content:"Enter Full Screen";background-position:-220px 0}.viewer-fullscreen-exit:before{content:"Exit Full Screen";background-position:-240px 0}.viewer-close:before{content:"Close";background-position:-260px 0}.viewer-container{position:absolute;top:0;font-size:0;line-height:0;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:rgba(0,0,0,.5);direction:ltr!important;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.viewer-container ::-moz-selection,.viewer-container::-moz-selection{background-color:transparent}.viewer-container ::selection,.viewer-container::selection{background-color:transparent}.viewer-container img{display:block;width:100%;min-width:0!important;max-width:none!important;height:auto;min-height:0!important;max-height:none!important}.viewer-player,.viewer-tooltip{display:none;position:absolute}.viewer-canvas{position:absolute;top:0}.viewer-canvas>img{width:auto;max-width:90%!important;height:auto;margin:15px auto}.viewer-footer{position:absolute;text-align:center}.viewer-navbar{background-color:rgba(0,0,0,.5)}.viewer-list{height:50px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;padding:1px 0;margin:0}.viewer-list>li{float:left;width:30px;height:50px;overflow:hidden;font-size:0;line-height:0;color:transparent;cursor:pointer;filter:alpha(opacity=50);opacity:.5}.viewer-list>li+li{margin-left:1px}.viewer-list>.viewer-active{filter:alpha(opacity=100);opacity:1}.viewer-player{top:0;cursor:none;background-color:#000}.viewer-player>img{position:absolute;top:0;left:0}.viewer-toolbar{width:280px;padding:3px 0;margin:0 auto 5px}.viewer-toolbar>li{float:left;width:24px;height:24px;cursor:pointer;background-color:#000;background-color:rgba(0,0,0,.5);border-radius:50%}.viewer-toolbar>li:hover{background-color:#000;background-color:rgba(0,0,0,.8)}.viewer-toolbar>li:before{margin:2px}.viewer-toolbar>li+li{margin-left:1px}.viewer-toolbar>.viewer-play{width:30px;height:30px;margin-top:-3px;margin-bottom:-3px}.viewer-toolbar>.viewer-play:before{margin:5px}.viewer-tooltip{top:50%;left:50%;width:50px;height:20px;margin-top:-10px;margin-left:-25px;font-size:12px;line-height:20px;color:#fff;text-align:center;background-color:#000;background-color:rgba(0,0,0,.8);border-radius:10px}.viewer-title{display:inline-block;max-width:90%;margin:0 5% 5px;font-size:12px;line-height:1;color:#ccc;text-overflow:ellipsis;white-space:nowrap;filter:alpha(opacity=80);opacity:.8}.viewer-title:hover{filter:alpha(opacity=100);opacity:1}.viewer-button{position:absolute;top:-40px;right:-40px;width:80px;height:80px;cursor:pointer;background-color:#000;background-color:rgba(0,0,0,.5);border-radius:50%}.viewer-button:before{position:absolute;bottom:15px;left:15px}.viewer-fixed{position:fixed}.viewer-show{display:block}.viewer-hide{display:none}.viewer-invisible{visibility:hidden}.viewer-toggle{cursor:pointer;cursor:-webkit-zoom-in;cursor:zoom-in}.viewer-move{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.viewer-fade{filter:alpha(opacity=0);opacity:0}.viewer-in{filter:alpha(opacity=100);opacity:1}.viewer-transition{-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out} \ No newline at end of file + * Date: 2015-12-24T09:51:21.635Z + */.viewer-container,.viewer-navbar{background-color:#000;overflow:hidden}.viewer-canvas,.viewer-container,.viewer-footer,.viewer-player{right:0;bottom:0;left:0}.viewer-button,.viewer-canvas,.viewer-container,.viewer-footer,.viewer-list,.viewer-navbar,.viewer-open,.viewer-title,.viewer-toolbar,.viewer-toolbar>li{overflow:hidden}.viewer-close:before,.viewer-flip-horizontal:before,.viewer-flip-vertical:before,.viewer-fullscreen-exit:before,.viewer-fullscreen:before,.viewer-next:before,.viewer-one-to-one:before,.viewer-play:before,.viewer-prev:before,.viewer-reset:before,.viewer-rotate-left:before,.viewer-rotate-right:before,.viewer-zoom-in:before,.viewer-zoom-out:before{font-size:0;line-height:0;display:block;width:20px;height:20px;color:transparent;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC);background-repeat:no-repeat}.viewer-zoom-in:before{content:'Zoom In';background-position:0 0}.viewer-zoom-out:before{content:'Zoom Out';background-position:-20px 0}.viewer-one-to-one:before{content:'One to One';background-position:-40px 0}.viewer-reset:before{content:'Reset';background-position:-60px 0}.viewer-prev:before{content:'Previous';background-position:-80px 0}.viewer-play:before{content:'Play';background-position:-100px 0}.viewer-next:before{content:'Next';background-position:-120px 0}.viewer-rotate-left:before{content:'Rotate Left';background-position:-140px 0}.viewer-rotate-right:before{content:'Rotate Right';background-position:-160px 0}.viewer-flip-horizontal:before{content:'Flip Horizontal';background-position:-180px 0}.viewer-flip-vertical:before{content:'Flip Vertical';background-position:-200px 0}.viewer-fullscreen:before{content:'Enter Full Screen';background-position:-220px 0}.viewer-fullscreen-exit:before{content:'Exit Full Screen';background-position:-240px 0}.viewer-close:before{content:'Close';background-position:-260px 0}.viewer-container{font-size:0;line-height:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-color:rgba(0,0,0,.5);direction:ltr!important;-ms-touch-action:none;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.viewer-container ::-moz-selection,.viewer-container::-moz-selection{background-color:transparent}.viewer-container ::selection,.viewer-container::selection{background-color:transparent}.viewer-container img{display:block;width:100%;min-width:0!important;max-width:none!important;height:auto;min-height:0!important;max-height:none!important}.viewer-player,.viewer-tooltip{display:none;position:absolute}.viewer-canvas{position:absolute;top:0}.viewer-canvas>img{width:auto;max-width:90%!important;height:auto;margin:15px auto}.viewer-footer{position:absolute;text-align:center}.viewer-navbar{background-color:rgba(0,0,0,.5)}.viewer-list{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:50px;margin:0;padding:1px 0}.viewer-list>li{font-size:0;line-height:0;float:left;overflow:hidden;width:30px;height:50px;cursor:pointer;opacity:.5;color:transparent;filter:alpha(opacity=50)}.viewer-list>li+li{margin-left:1px}.viewer-list>.viewer-active{opacity:1;filter:alpha(opacity=100)}.viewer-player{top:0;cursor:none;background-color:#000}.viewer-player>img{position:absolute;top:0;left:0}.viewer-toolbar{width:280px;margin:0 auto 5px;padding:3px 0}.viewer-toolbar>li{float:left;width:24px;height:24px;cursor:pointer;border-radius:50%;background-color:#000;background-color:rgba(0,0,0,.5)}.viewer-toolbar>li:hover{background-color:#000;background-color:rgba(0,0,0,.8)}.viewer-toolbar>li:before{margin:2px}.viewer-toolbar>li+li{margin-left:1px}.viewer-toolbar>.viewer-play{width:30px;height:30px;margin-top:-3px;margin-bottom:-3px}.viewer-toolbar>.viewer-play:before{margin:5px}.viewer-tooltip{font-size:12px;line-height:20px;top:50%;left:50%;width:50px;height:20px;margin-top:-10px;margin-left:-25px;text-align:center;color:#fff;border-radius:10px;background-color:#000;background-color:rgba(0,0,0,.8)}.viewer-title{font-size:12px;line-height:1;display:inline-block;max-width:90%;margin:0 5% 5px;white-space:nowrap;text-overflow:ellipsis;opacity:.8;color:#ccc;filter:alpha(opacity=80)}.viewer-title:hover{opacity:1;filter:alpha(opacity=100)}.viewer-button{position:absolute;top:-40px;right:-40px;width:80px;height:80px;cursor:pointer;border-radius:50%;background-color:#000;background-color:rgba(0,0,0,.5)}.viewer-button:before{position:absolute;bottom:15px;left:15px}.viewer-fixed{position:fixed}.viewer-show{display:block}.viewer-hide{display:none}.viewer-invisible{visibility:hidden}.viewer-toggle{cursor:pointer;cursor:-webkit-zoom-in;cursor:zoom-in}.viewer-move{cursor:move;cursor:-webkit-grab;cursor:-moz-grab;cursor:grab}.viewer-fade{opacity:0;filter:alpha(opacity=0)}.viewer-in{opacity:1;filter:alpha(opacity=100)}.viewer-transition{-webkit-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out} \ No newline at end of file diff --git a/dist/viewer.min.js b/dist/viewer.min.js index 7fb2f6d..acd70f6 100644 --- a/dist/viewer.min.js +++ b/dist/viewer.min.js @@ -1,10 +1,10 @@ /*! - * Viewer v0.2.0 + * Viewer v0.3.0 * https://github.com/fengyuanchen/viewer * * Copyright (c) 2015 Fengyuan Chen * Released under the MIT license * - * Date: 2015-10-18T11:12:56.198Z + * Date: 2015-12-24T09:51:24.343Z */ -!function(i){"function"==typeof define&&define.amd?define("viewer",["jquery"],i):i("object"==typeof exports?require("jquery"):jQuery)}(function(i){"use strict";function t(i){return"string"==typeof i}function e(i){return"number"==typeof i&&!isNaN(i)}function s(i){return"undefined"==typeof i}function n(i,t){var s=[];return e(t)&&s.push(t),s.slice.apply(i,s)}function o(i,t){var e=n(arguments,2);return function(){return i.apply(t,e.concat(n(arguments)))}}function a(i){var t=[],s=i.rotate,n=i.scaleX,o=i.scaleY;return e(s)&&t.push("rotate("+s+"deg)"),e(n)&&e(o)&&t.push("scale("+n+","+o+")"),t.length?t.join(" "):"none"}function h(i){return t(i)?i.replace(/^.*\//,"").replace(/[\?&#].*$/,""):""}function r(i,t){var e;return i.naturalWidth?t(i.naturalWidth,i.naturalHeight):(e=document.createElement("img"),e.onload=function(){t(this.width,this.height)},void(e.src=i.src))}function l(t,e){this.$element=i(t),this.options=i.extend({},l.DEFAULTS,i.isPlainObject(e)&&e),this.isImg=!1,this.isBuilt=!1,this.isShown=!1,this.isViewed=!1,this.isFulled=!1,this.isPlayed=!1,this.playing=!1,this.fading=!1,this.transitioning=!1,this.action=!1,this.target=!1,this.timeout=!1,this.index=0,this.length=0,this.init()}var d=i(window),c=i(document),u="viewer",m=document.createElement(u),v="viewer-toggle",f="viewer-fixed",g="viewer-open",w="viewer-show",p="viewer-hide",b="viewer-fade",y="viewer-in",x="viewer-move",$="viewer-active",C="viewer-invisible",z="viewer-transition",I="viewer-fullscreen",F="viewer-fullscreen-exit",k="viewer-close",T="img",Y="mousedown touchstart pointerdown MSPointerDown",P="mousemove touchmove pointermove MSPointerMove",X="mouseup touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",S="wheel mousewheel DOMMouseScroll",D="transitionend",E="load."+u,L="keydown."+u,V="click."+u,R="resize."+u,q="build."+u,M="built."+u,W="show."+u,_="shown."+u,j="hide."+u,A="hidden."+u,H="view."+u,B="viewed."+u,U="undefined"!=typeof m.style.transition,N=Math.round,O=Math.sqrt,Z=Math.abs,K=Math.min,Q=Math.max,G=Number,J={};i.extend(J,{init:function(){var t=this.options,e=this.$element,s=e.is(T),n=s?e:e.find(T),o=n.length,a=i.proxy(this.ready,this);o&&(i.isFunction(t.build)&&e.one(q,t.build),this.trigger(q).isDefaultPrevented()||(U||(t.transition=!1),this.isImg=s,this.length=o,this.count=0,this.$images=n,this.$body=i("body"),t.inline?(e.one(M,i.proxy(function(){this.view()},this)),n.each(function(){this.complete?a():i(this).one(E,a)})):(n.addClass(v),e.on(V,i.proxy(this.start,this)))))},ready:function(){this.count++,this.count===this.length&&this.build()}}),i.extend(J,{build:function(){var t,e,s,n,o=this.options,a=this.$element;this.isBuilt||(t&&t.length||(t=a.parent()),this.$parent=t,this.$viewer=e=i(l.TEMPLATE),this.$canvas=e.find(".viewer-canvas"),this.$footer=e.find(".viewer-footer"),this.$title=e.find(".viewer-title").toggleClass(p,!o.title),this.$toolbar=n=e.find(".viewer-toolbar").toggleClass(p,!o.toolbar),this.$navbar=e.find(".viewer-navbar").toggleClass(p,!o.navbar),this.$button=s=e.find(".viewer-button").toggleClass(p,!o.button),this.$tooltip=e.find(".viewer-tooltip"),this.$player=e.find(".viewer-player"),this.$list=e.find(".viewer-list"),n.find("li[class*=zoom]").toggleClass(C,!o.zoomable),n.find("li[class*=flip]").toggleClass(C,!o.scalable),o.rotatable||n.find("li[class*=rotate]").addClass(C).appendTo(n),o.inline?(s.addClass(I),e.css("z-index",o.zIndexInline),"static"===t.css("position")&&t.css("position","relative")):(s.addClass(k),e.css("z-index",o.zIndex).addClass([f,b,p].join(" "))),a.after(e),o.inline&&(this.render(),this.bind(),this.isShown=!0),this.isBuilt=!0,i.isFunction(o.built)&&a.one(M,o.built),this.trigger(M))},unbuild:function(){var i=this.options,t=this.$element;this.isBuilt&&(i.inline&&!i.container&&t.removeClass(p),this.$viewer.remove())}}),i.extend(J,{bind:function(){this.$viewer.on(V,i.proxy(this.click,this)).on(S,i.proxy(this.wheel,this)),this.$canvas.on(Y,i.proxy(this.mousedown,this)),c.on(P,this._mousemove=o(this.mousemove,this)).on(X,this._mouseup=o(this.mouseup,this)).on(L,this._keydown=o(this.keydown,this)),d.on(R,this._resize=o(this.resize,this))},unbind:function(){this.$viewer.off(V,this.click).off(S,this.wheel),this.$canvas.off(Y,this.mousedown),c.off(P,this._mousemove).off(X,this._mouseup).off(L,this._keydown),d.off(R,this._resize)}}),i.extend(J,{render:function(){this.initContainer(),this.initViewer(),this.initList(),this.renderViewer()},initContainer:function(){this.container={width:d.innerWidth(),height:d.innerHeight()}},initViewer:function(){var t,e=this.options,s=this.$parent;e.inline&&(this.parent=t={width:Q(s.width(),e.minWidth),height:Q(s.height(),e.minHeight)}),(this.isFulled||!t)&&(t=this.container),this.viewer=i.extend({},t)},renderViewer:function(){this.options.inline&&!this.isFulled&&this.$viewer.css(this.viewer)},initList:function(){var e=this.options,s=this.$element,n=this.$list,o=[];this.$images.each(function(s){var n=this.src,a=this.alt||h(n),r=e.url;n&&(t(r)?r=this.getAttribute(r):i.isFunction(r)&&(r=r.call(this,this)),o.push('
  • '+a+'
    • '))}),n.html(o.join("")).find(T).one(E,{filled:!0},i.proxy(this.loadImage,this)),this.$items=n.children(),e.transition&&s.one(B,function(){n.addClass(z)})},renderList:function(i){var t=i||this.index,e=this.$items.eq(t).width(),s=e+1;this.$list.css({width:s*this.length,marginLeft:(this.viewer.width-e)/2-s*t})},resetList:function(){this.$list.empty().removeClass(z).css("margin-left",0)},initImage:function(t){var e=this.options,s=this.$image,n=this.viewer,o=this.$footer.height(),a=n.width,h=Q(n.height-o,o),l=this.image||{};r(s[0],i.proxy(function(s,n){var o,r,d=s/n,c=a,u=h;h*d>a?u=a/d:c=h*d,c=K(.9*c,s),u=K(.9*u,n),r={naturalWidth:s,naturalHeight:n,aspectRatio:d,ratio:c/s,width:c,height:u,left:(a-c)/2,top:(h-u)/2},o=i.extend({},r),e.rotatable&&(r.rotate=l.rotate||0,o.rotate=0),e.scalable&&(r.scaleX=l.scaleX||1,r.scaleY=l.scaleY||1,o.scaleX=1,o.scaleY=1),this.image=r,this.initialImage=o,i.isFunction(t)&&t()},this))},renderImage:function(t){var e=this.image,s=this.$image;s.css({width:e.width,height:e.height,marginLeft:e.left,marginTop:e.top,transform:a(e)}),i.isFunction(t)&&(this.options.transition?s.one(D,t):t())},resetImage:function(){this.$image.remove(),this.$image=null}}),i.extend(J,{start:function(t){var e=t.target;i(e).hasClass(v)&&(this.target=e,this.show())},click:function(t){var e=i(t.target),s=e.data("action"),n=this.image;switch(s){case"mix":this.isPlayed?this.stop():this.options.inline?this.isFulled?this.exit():this.full():this.hide();break;case"view":this.view(e.data("index"));break;case"zoom-in":this.zoom(.1,!0);break;case"zoom-out":this.zoom(-.1,!0);break;case"one-to-one":1===this.image.ratio?this.zoomTo(this.initialImage.ratio):this.zoomTo(1);break;case"reset":this.reset();break;case"prev":this.prev();break;case"play":this.play();break;case"next":this.next();break;case"rotate-left":this.rotate(-90);break;case"rotate-right":this.rotate(90);break;case"flip-horizontal":this.scale(-n.scaleX||-1,n.scaleY||1);break;case"flip-vertical":this.scale(n.scaleX||1,-n.scaleY||-1);break;default:this.isPlayed&&this.stop()}},load:function(){var t=this.options,e=this.viewer,s=this.$image;this.timeout&&(clearTimeout(this.timeout),this.timeout=!1),s.removeClass(C).css("cssText","width:0;height:0;margin-left:"+e.width/2+"px;margin-top:"+e.height/2+"px;max-width:none!important;visibility:visible;"),this.initImage(i.proxy(function(){s.toggleClass(z,t.transition).toggleClass(x,t.movable),this.renderImage(i.proxy(function(){this.isViewed=!0,this.trigger(B)},this))},this))},loadImage:function(t){var e=t.target,s=i(e),n=s.parent(),o=n.width(),a=n.height(),h=t.data&&t.data.filled;r(e,i.proxy(function(i,t){var e=i/t,n=o,r=a;a*e>o?h?n=a*e:r=o/e:h?r=o/e:n=a*e,s.css({width:n,height:r,marginLeft:(o-n)/2,marginTop:(a-r)/2})},this))},resize:function(){this.initContainer(),this.initViewer(),this.renderViewer(),this.renderList(),this.initImage(i.proxy(function(){this.renderImage()},this)),this.isPlayed&&this.$player.find(T).one(E,i.proxy(this.loadImage,this)).trigger(E)},wheel:function(i){var t=i.originalEvent,e=G(this.options.zoomRatio)||.1,s=1;this.isViewed&&(i.preventDefault(),t.deltaY?s=t.deltaY>0?1:-1:t.wheelDelta?s=-t.wheelDelta/120:t.detail&&(s=t.detail>0?1:-1),this.zoom(-s*e,!0))},keydown:function(i){var t=this.options,e=i.which;if(this.isFulled&&t.keyboard)switch(e){case 27:this.isPlayed?this.stop():t.inline?this.isFulled&&this.exit():this.hide();break;case 37:this.prev();break;case 38:this.zoom(t.zoomRatio,!0);break;case 39:this.next();break;case 40:this.zoom(-t.zoomRatio,!0);break;case 48:case 49:(i.ctrlKey||i.shiftKey)&&(i.preventDefault(),1===this.image.ratio?this.zoomTo(this.initialImage.ratio):this.zoomTo(1))}},mousedown:function(i){var t,e=this.options,s=i.originalEvent,n=s&&s.touches,o=i,a=e.movable?"move":!1;if(this.isViewed){if(n){if(t=n.length,t>1){if(!e.zoomable||2!==t)return;o=n[1],this.startX2=o.pageX,this.startY2=o.pageY,a="zoom"}else this.isSwitchable()&&(a="switch");o=n[0]}a&&(i.preventDefault(),this.action=a,this.startX=o.pageX||s&&s.pageX,this.startY=o.pageY||s&&s.pageY)}},mousemove:function(i){var t,e=this.options,s=this.action,n=this.$image,o=i.originalEvent,a=o&&o.touches,h=i;if(this.isViewed){if(a){if(t=a.length,t>1){if(!e.zoomable||2!==t)return;h=a[1],this.endX2=h.pageX,this.endY2=h.pageY}h=a[0]}s&&(i.preventDefault(),"move"===s&&e.transition&&n.hasClass(z)&&n.removeClass(z),this.endX=h.pageX||o&&o.pageX,this.endY=h.pageY||o&&o.pageY,this.change())}},mouseup:function(i){var t=this.action;t&&(i.preventDefault(),"move"===t&&this.options.transition&&this.$image.addClass(z),this.action=!1)}}),i.extend(J,{show:function(){var t,e=this.options;e.inline||this.transitioning||(this.isBuilt||this.build(),i.isFunction(e.show)&&this.$element.one(W,e.show),this.trigger(W).isDefaultPrevented()||(this.$body.addClass(g),t=this.$viewer.removeClass(p),this.$element.one(_,i.proxy(function(){this.view((this.target?this.$images.index(this.target):0)||this.index),this.target=!1},this)),e.transition?(this.transitioning=!0,t.addClass(z).get(0).offsetWidth,t.one(D,i.proxy(this.shown,this)).addClass(y)):(t.addClass(y),this.shown())))},hide:function(){var t=this.options,e=this.$viewer;t.inline||this.transitioning||!this.isShown||(i.isFunction(t.hide)&&this.$element.one(j,t.hide),this.trigger(j).isDefaultPrevented()||(this.isViewed&&t.transition?(this.transitioning=!0,this.$image.one(D,i.proxy(function(){e.one(D,i.proxy(this.hidden,this)).removeClass(y)},this)),this.zoomTo(0,!1,!0)):(e.removeClass(y),this.hidden())))},view:function(t){var e,s,n,o,a,h=this.$title;t=Number(t)||0,!this.isShown||this.isPlayed||0>t||t>=this.length||this.isViewed&&t===this.index||this.trigger(H).isDefaultPrevented()||(s=this.$items.eq(t),n=s.find(T),o=n.data("originalUrl"),a=n.attr("alt"),this.$image=e=i(''+a+''),this.$items.eq(this.index).removeClass($),s.addClass($),this.isViewed=!1,this.index=t,this.image=null,this.$canvas.html(e.addClass(C)),e[0].complete?this.load():(e.one(E,i.proxy(this.load,this)),this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.removeClass(C)},1e3)),h.empty(),this.renderList(),this.$element.one(B,i.proxy(function(){var i=this.image,t=i.naturalWidth,e=i.naturalHeight;h.html(a+" ("+t+" × "+e+")")},this)))},prev:function(){this.view(Q(this.index-1,0))},next:function(){this.view(K(this.index+1,this.length-1))},move:function(i,t){var e=this.image;this.moveTo(s(i)?i:e.left+G(i),s(t)?t:e.top+G(t))},moveTo:function(i,t){var n=this.image,o=!1;s(t)&&(t=i),i=G(i),t=G(t),this.isShown&&!this.isPlayed&&this.options.movable&&(e(i)&&(n.left=i,o=!0),e(t)&&(n.top=t,o=!0),o&&this.renderImage())},zoom:function(i,t){var e=this.image;i=G(i),i=0>i?1/(1-i):1+i,this.zoomTo(e.width*i/e.naturalWidth,t)},zoomTo:function(i,t,s){var n,o,a=this.options,h=.01,r=100,l=this.image,d=l.width,c=l.height;i=Q(0,i),e(i)&&this.isShown&&!this.isPlayed&&(s||a.zoomable)&&(s||(h=Q(h,a.minZoomRatio),r=K(r,a.maxZoomRatio),i=K(Q(i,h),r)),i>.95&&1.05>i&&(i=1),n=l.naturalWidth*i,o=l.naturalHeight*i,l.left-=(n-d)/2,l.top-=(o-c)/2,l.width=n,l.height=o,l.ratio=i,this.renderImage(),t&&this.tooltip())},rotate:function(i){this.rotateTo((this.image.rotate||0)+G(i))},rotateTo:function(i){var t=this.image;i=G(i),e(i)&&this.isShown&&!this.isPlayed&&this.options.rotatable&&(t.rotate=i,this.renderImage())},scale:function(i,t){var n=this.image,o=!1;s(t)&&(t=i),i=G(i),t=G(t),this.isShown&&!this.isPlayed&&this.options.scalable&&(e(i)&&(n.scaleX=i,o=!0),e(t)&&(n.scaleY=t,o=!0),o&&this.renderImage())},scaleX:function(i){this.scale(i,this.image.scaleY)},scaleY:function(i){this.scale(this.image.scaleX,i)},play:function(){var t,s=this.options,n=this.$player,o=i.proxy(this.loadImage,this),a=[],h=0,r=0;this.isShown&&!this.isPlayed&&(s.fullscreen&&this.fullscreen(),this.isPlayed=!0,n.addClass(w),this.$items.each(function(t){var e=i(this),l=e.find(T),d=i(''+l.attr(');h++,d.addClass(b).toggleClass(z,s.transition),e.hasClass($)&&(d.addClass(y),r=t),a.push(d),d.one(E,{filled:!1},o),n.append(d)}),e(s.interval)&&s.interval>0&&(t=i.proxy(function(){this.playing=setTimeout(function(){a[r].removeClass(y),r++,r=h>r?r:0,a[r].addClass(y),t()},s.interval)},this),h>1&&t()))},stop:function(){this.isPlayed&&(this.isPlayed=!1,clearTimeout(this.playing),this.$player.removeClass(w).empty())},full:function(){var t=this.options,e=this.$image,s=this.$list;this.isShown&&!this.isPlayed&&!this.isFulled&&t.inline&&(this.isFulled=!0,this.$body.addClass(g),this.$button.addClass(F),t.transition&&(e.removeClass(z),s.removeClass(z)),this.$viewer.addClass(f).removeAttr("style").css("z-index",t.zIndex),this.initContainer(),this.viewer=i.extend({},this.container),this.renderList(),this.initImage(i.proxy(function(){this.renderImage(function(){t.transition&&setTimeout(function(){e.addClass(z),s.addClass(z)},0)})},this)))},exit:function(){var t=this.options,e=this.$image,s=this.$list;this.isFulled&&(this.isFulled=!1,this.$body.removeClass(g),this.$button.removeClass(F),t.transition&&(e.removeClass(z),s.removeClass(z)),this.$viewer.removeClass(f).css("z-index",t.zIndexInline),this.viewer=i.extend({},this.parent),this.renderViewer(),this.renderList(),this.initImage(i.proxy(function(){this.renderImage(function(){t.transition&&setTimeout(function(){e.addClass(z),s.addClass(z)},0)})},this)))},tooltip:function(){var t=this.options,e=this.$tooltip,s=this.image,n=[w,b,z].join(" ");this.isShown&&!this.isPlayed&&t.tooltip&&(e.text(N(100*s.ratio)+"%"),this.fading?clearTimeout(this.fading):t.transition?(e.addClass(n).get(0).offsetWidth,e.addClass(y)):e.addClass(w),this.fading=setTimeout(i.proxy(function(){t.transition?e.one(D,function(){e.removeClass(n)}).removeClass(y):e.removeClass(w),this.fading=!1},this),1e3))},toggle:function(){1===this.image.ratio?this.zoomTo(this.initialImage.ratio):this.zoomTo(1)},reset:function(){this.isShown&&!this.isPlayed&&(this.image=i.extend({},this.initialImage),this.renderImage())},destroy:function(){var i=this.$element;this.options.inline?this.unbind():(this.isShown&&this.unbind(),this.$images.removeClass(v),i.off(V,this.start)),this.unbuild(),i.removeData(u)}}),i.extend(J,{trigger:function(t,e){var s=i.Event(t,e);return this.$element.trigger(s),s},shown:function(){var t=this.options;this.transitioning=!1,this.isFulled=!0,this.isShown=!0,this.isVisible=!0,this.render(),this.bind(),i.isFunction(t.shown)&&this.$element.one(_,t.shown),this.trigger(_)},hidden:function(){var t=this.options;this.transitioning=!1,this.isViewed=!1,this.isFulled=!1,this.isShown=!1,this.isVisible=!1,this.unbind(),this.$body.removeClass(g),this.$viewer.addClass(p),this.resetList(),this.resetImage(),i.isFunction(t.hidden)&&this.$element.one(A,t.hidden),this.trigger(A)},fullscreen:function(){var i=document.documentElement;!this.isFulled||document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement||(i.requestFullscreen?i.requestFullscreen():i.msRequestFullscreen?i.msRequestFullscreen():i.mozRequestFullScreen?i.mozRequestFullScreen():i.webkitRequestFullscreen&&i.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT))},change:function(){var i=this.endX-this.startX,t=this.endY-this.startY;switch(this.action){case"move":this.move(i,t);break;case"zoom":this.zoom(function(i,t,e,s){var n=O(i*i+t*t),o=O(e*e+s*s);return(o-n)/n}(Z(this.startX-this.startX2),Z(this.startY-this.startY2),Z(this.endX-this.endX2),Z(this.endY-this.endY2))),this.startX2=this.endX2,this.startY2=this.endY2;break;case"switch":this.action="switched",i>1?this.prev():-1>i&&this.next()}this.startX=this.endX,this.startY=this.endY},isSwitchable:function(){var i=this.image,t=this.viewer;return i.left>=0&&i.top>=0&&i.width<=t.width&&i.height<=t.height}}),i.extend(l.prototype,J),l.DEFAULTS={inline:!1,button:!0,navbar:!0,title:!0,toolbar:!0,tooltip:!0,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!0,fullscreen:!0,keyboard:!0,interval:5e3,minWidth:200,minHeight:100,zoomRatio:.1,minZoomRatio:.01,maxZoomRatio:100,zIndex:2015,zIndexInline:0,url:"src",build:null,built:null,show:null,shown:null,hide:null,hidden:null},l.TEMPLATE='
      ',l.other=i.fn.viewer,i.fn.viewer=function(e){var o,a=n(arguments,1);return this.each(function(){var s,n=i(this),h=n.data(u);if(!h){if(/destroy|hide|exit|stop|reset/.test(e))return;n.data(u,h=new l(this,e))}t(e)&&i.isFunction(s=h[e])&&(o=s.apply(h,a))}),s(o)?this:o},i.fn.viewer.Constructor=l,i.fn.viewer.setDefaults=l.setDefaults,i.fn.viewer.noConflict=function(){return i.fn.viewer=l.other,this}}); \ No newline at end of file +!function(i){"function"==typeof define&&define.amd?define("viewer",["jquery"],i):i("object"==typeof exports?require("jquery"):jQuery)}(function(i){"use strict";function t(i){return"string"==typeof i}function e(i){return"number"==typeof i&&!isNaN(i)}function s(i){return"undefined"==typeof i}function n(i,t){var s=[];return e(t)&&s.push(t),s.slice.apply(i,s)}function o(i,t){var e=n(arguments,2);return function(){return i.apply(t,e.concat(n(arguments)))}}function a(i){var t=[],s=i.rotate,n=i.scaleX,o=i.scaleY;return e(s)&&t.push("rotate("+s+"deg)"),e(n)&&e(o)&&t.push("scale("+n+","+o+")"),t.length?t.join(" "):"none"}function h(i){return i.offsetWidth}function r(i){return t(i)?i.replace(/^.*\//,"").replace(/[\?&#].*$/,""):""}function l(i,t){var e;return i.naturalWidth?t(i.naturalWidth,i.naturalHeight):(e=document.createElement("img"),e.onload=function(){t(this.width,this.height)},void(e.src=i.src))}function d(t,e){this.$element=i(t),this.options=i.extend({},d.DEFAULTS,i.isPlainObject(e)&&e),this.isImg=!1,this.isBuilt=!1,this.isShown=!1,this.isViewed=!1,this.isFulled=!1,this.isPlayed=!1,this.wheeling=!1,this.playing=!1,this.fading=!1,this.tooltiping=!1,this.transitioning=!1,this.action=!1,this.target=!1,this.timeout=!1,this.index=0,this.length=0,this.init()}var c=i(window),u=i(document),m="viewer",v=document.createElement(m),f="viewer-toggle",g="viewer-fixed",w="viewer-open",p="viewer-show",b="viewer-hide",y="viewer-fade",$="viewer-in",x="viewer-move",C="viewer-active",z="viewer-invisible",F="viewer-transition",I="viewer-fullscreen",k="viewer-fullscreen-exit",T="viewer-close",Y="img",P="mousedown touchstart pointerdown MSPointerDown",X="mousemove touchmove pointermove MSPointerMove",V="mouseup touchend touchcancel pointerup pointercancel MSPointerUp MSPointerCancel",D="wheel mousewheel DOMMouseScroll",S="transitionend",E="load."+m,L="keydown."+m,R="click."+m,q="resize."+m,M="build."+m,W="built."+m,_="show."+m,j="shown."+m,A="hide."+m,H="hidden."+m,B="view."+m,U="viewed."+m,N="undefined"!=typeof v.style.transition,O=Math.round,Z=Math.sqrt,K=Math.abs,Q=Math.min,G=Math.max,J=Number;d.prototype={constructor:d,init:function(){var t=this.options,e=this.$element,s=e.is(Y),n=s?e:e.find(Y),o=n.length,a=i.proxy(this.ready,this);o&&(i.isFunction(t.build)&&e.one(M,t.build),this.trigger(M).isDefaultPrevented()||(N||(t.transition=!1),this.isImg=s,this.length=o,this.count=0,this.$images=n,this.$body=i("body"),t.inline?(e.one(W,i.proxy(function(){this.view()},this)),n.each(function(){this.complete?a():i(this).one(E,a)})):(n.addClass(f),e.on(R,i.proxy(this.start,this)))))},ready:function(){this.count++,this.count===this.length&&this.build()},build:function(){var t,e,s,n,o=this.options,a=this.$element;this.isBuilt||(this.$parent=t=a.parent(),this.$viewer=e=i(d.TEMPLATE),this.$canvas=e.find(".viewer-canvas"),this.$footer=e.find(".viewer-footer"),this.$title=e.find(".viewer-title").toggleClass(b,!o.title),this.$toolbar=n=e.find(".viewer-toolbar").toggleClass(b,!o.toolbar),this.$navbar=e.find(".viewer-navbar").toggleClass(b,!o.navbar),this.$button=s=e.find(".viewer-button").toggleClass(b,!o.button),this.$tooltip=e.find(".viewer-tooltip"),this.$player=e.find(".viewer-player"),this.$list=e.find(".viewer-list"),n.find("li[class*=zoom]").toggleClass(z,!o.zoomable),n.find("li[class*=flip]").toggleClass(z,!o.scalable),o.rotatable||n.find("li[class*=rotate]").addClass(z).appendTo(n),o.inline?(s.addClass(I),e.css("z-index",o.zIndexInline),"static"===t.css("position")&&t.css("position","relative")):(s.addClass(T),e.css("z-index",o.zIndex).addClass([g,y,b].join(" "))),a.after(e),o.inline&&(this.render(),this.bind(),this.isShown=!0),this.isBuilt=!0,i.isFunction(o.built)&&a.one(W,o.built),this.trigger(W))},unbuild:function(){var i=this.options,t=this.$element;this.isBuilt&&(i.inline&&t.removeClass(b),this.$viewer.remove())},bind:function(){var t=this.options,e=this.$element;i.isFunction(t.view)&&e.on(B,t.view),i.isFunction(t.viewed)&&e.on(U,t.viewed),this.$viewer.on(R,i.proxy(this.click,this)).on(D,i.proxy(this.wheel,this)),this.$canvas.on(P,i.proxy(this.mousedown,this)),u.on(X,this._mousemove=o(this.mousemove,this)).on(V,this._mouseup=o(this.mouseup,this)).on(L,this._keydown=o(this.keydown,this)),c.on(q,this._resize=o(this.resize,this))},unbind:function(){var t=this.options,e=this.$element;i.isFunction(t.view)&&e.off(B,t.view),i.isFunction(t.viewed)&&e.off(U,t.viewed),this.$viewer.off(R,this.click).off(D,this.wheel),this.$canvas.off(P,this.mousedown),u.off(X,this._mousemove).off(V,this._mouseup).off(L,this._keydown),c.off(q,this._resize)},render:function(){this.initContainer(),this.initViewer(),this.initList(),this.renderViewer()},initContainer:function(){this.container={width:c.innerWidth(),height:c.innerHeight()}},initViewer:function(){var t,e=this.options,s=this.$parent;e.inline&&(this.parent=t={width:G(s.width(),e.minWidth),height:G(s.height(),e.minHeight)}),(this.isFulled||!t)&&(t=this.container),this.viewer=i.extend({},t)},renderViewer:function(){this.options.inline&&!this.isFulled&&this.$viewer.css(this.viewer)},initList:function(){var e=this.options,s=this.$element,n=this.$list,o=[];this.$images.each(function(s){var n=this.src,a=this.alt||r(n),h=e.url;n&&(t(h)?h=this.getAttribute(h):i.isFunction(h)&&(h=h.call(this,this)),o.push('
    • '+a+'
      • '))}),n.html(o.join("")).find(Y).one(E,{filled:!0},i.proxy(this.loadImage,this)),this.$items=n.children(),e.transition&&s.one(U,function(){n.addClass(F)})},renderList:function(i){var t=i||this.index,e=this.$items.eq(t).width(),s=e+1;this.$list.css({width:s*this.length,marginLeft:(this.viewer.width-e)/2-s*t})},resetList:function(){this.$list.empty().removeClass(F).css("margin-left",0)},initImage:function(t){var e=this.options,s=this.$image,n=this.viewer,o=this.$footer.height(),a=n.width,h=G(n.height-o,o),r=this.image||{};l(s[0],i.proxy(function(s,n){var o,l,d=s/n,c=a,u=h;h*d>a?u=a/d:c=h*d,c=Q(.9*c,s),u=Q(.9*u,n),l={naturalWidth:s,naturalHeight:n,aspectRatio:d,ratio:c/s,width:c,height:u,left:(a-c)/2,top:(h-u)/2},o=i.extend({},l),e.rotatable&&(l.rotate=r.rotate||0,o.rotate=0),e.scalable&&(l.scaleX=r.scaleX||1,l.scaleY=r.scaleY||1,o.scaleX=1,o.scaleY=1),this.image=l,this.initialImage=o,i.isFunction(t)&&t()},this))},renderImage:function(t){var e=this.image,s=this.$image;s.css({width:e.width,height:e.height,marginLeft:e.left,marginTop:e.top,transform:a(e)}),i.isFunction(t)&&(this.transitioning?s.one(S,t):t())},resetImage:function(){this.$image.remove(),this.$image=null},start:function(t){var e=t.target;i(e).hasClass(f)&&(this.target=e,this.show())},click:function(t){var e=i(t.target),s=e.data("action"),n=this.image;switch(s){case"mix":this.isPlayed?this.stop():this.options.inline?this.isFulled?this.exit():this.full():this.hide();break;case"view":this.view(e.data("index"));break;case"zoom-in":this.zoom(.1,!0);break;case"zoom-out":this.zoom(-.1,!0);break;case"one-to-one":1===n.ratio?this.zoomTo(this.initialImage.ratio):this.zoomTo(1);break;case"reset":this.reset();break;case"prev":this.prev();break;case"play":this.play();break;case"next":this.next();break;case"rotate-left":this.rotate(-90);break;case"rotate-right":this.rotate(90);break;case"flip-horizontal":this.scale(-n.scaleX||-1,n.scaleY||1);break;case"flip-vertical":this.scale(n.scaleX||1,-n.scaleY||-1);break;default:this.isPlayed&&this.stop()}},load:function(){var t=this.options,e=this.viewer,s=this.$image;this.timeout&&(clearTimeout(this.timeout),this.timeout=!1),s.removeClass(z).css("cssText","width:0;height:0;margin-left:"+e.width/2+"px;margin-top:"+e.height/2+"px;max-width:none!important;visibility:visible;"),this.initImage(i.proxy(function(){s.toggleClass(F,t.transition).toggleClass(x,t.movable),this.renderImage(i.proxy(function(){this.isViewed=!0,this.trigger(U)},this))},this))},loadImage:function(t){var e=t.target,s=i(e),n=s.parent(),o=n.width(),a=n.height(),h=t.data&&t.data.filled;l(e,function(i,t){var e=i/t,n=o,r=a;a*e>o?h?n=a*e:r=o/e:h?r=o/e:n=a*e,s.css({width:n,height:r,marginLeft:(o-n)/2,marginTop:(a-r)/2})})},resize:function(){this.initContainer(),this.initViewer(),this.renderViewer(),this.renderList(),this.initImage(i.proxy(function(){this.renderImage()},this)),this.isPlayed&&this.$player.find(Y).one(E,i.proxy(this.loadImage,this)).trigger(E)},wheel:function(t){var e=t.originalEvent,s=J(this.options.zoomRatio)||.1,n=1;this.isViewed&&(t.preventDefault(),this.wheeling||(this.wheeling=!0,setTimeout(i.proxy(function(){this.wheeling=!1},this),50),e.deltaY?n=e.deltaY>0?1:-1:e.wheelDelta?n=-e.wheelDelta/120:e.detail&&(n=e.detail>0?1:-1),this.zoom(-n*s,!0)))},keydown:function(i){var t=this.options,e=i.which;if(this.isFulled&&t.keyboard)switch(e){case 27:this.isPlayed?this.stop():t.inline?this.isFulled&&this.exit():this.hide();break;case 32:this.isPlayed&&this.stop();break;case 37:this.prev();break;case 38:i.preventDefault(),this.zoom(t.zoomRatio,!0);break;case 39:this.next();break;case 40:i.preventDefault(),this.zoom(-t.zoomRatio,!0);break;case 48:case 49:(i.ctrlKey||i.shiftKey)&&(i.preventDefault(),1===this.image.ratio?this.zoomTo(this.initialImage.ratio):this.zoomTo(1))}},mousedown:function(i){var t,e=this.options,s=i.originalEvent,n=s&&s.touches,o=i,a=e.movable?"move":!1;if(this.isViewed){if(n){if(t=n.length,t>1){if(!e.zoomable||2!==t)return;o=n[1],this.startX2=o.pageX,this.startY2=o.pageY,a="zoom"}else this.isSwitchable()&&(a="switch");o=n[0]}a&&(i.preventDefault(),this.action=a,this.startX=o.pageX||s&&s.pageX,this.startY=o.pageY||s&&s.pageY)}},mousemove:function(i){var t,e=this.options,s=this.action,n=this.$image,o=i.originalEvent,a=o&&o.touches,h=i;if(this.isViewed){if(a){if(t=a.length,t>1){if(!e.zoomable||2!==t)return;h=a[1],this.endX2=h.pageX,this.endY2=h.pageY}h=a[0]}s&&(i.preventDefault(),"move"===s&&e.transition&&n.hasClass(F)&&n.removeClass(F),this.endX=h.pageX||o&&o.pageX,this.endY=h.pageY||o&&o.pageY,this.change())}},mouseup:function(i){var t=this.action;t&&(i.preventDefault(),"move"===t&&this.options.transition&&this.$image.addClass(F),this.action=!1)},show:function(){var t,e=this.options;e.inline||this.transitioning||(this.isBuilt||this.build(),i.isFunction(e.show)&&this.$element.one(_,e.show),this.trigger(_).isDefaultPrevented()||(this.$body.addClass(w),t=this.$viewer.removeClass(b),this.$element.one(j,i.proxy(function(){this.view((this.target?this.$images.index(this.target):0)||this.index),this.target=!1},this)),e.transition?(this.transitioning=!0,t.addClass(F),h(t[0]),t.one(S,i.proxy(this.shown,this)).addClass($)):(t.addClass($),this.shown())))},hide:function(){var t=this.options,e=this.$viewer;t.inline||this.transitioning||!this.isShown||(i.isFunction(t.hide)&&this.$element.one(A,t.hide),this.trigger(A).isDefaultPrevented()||(this.isViewed&&t.transition?(this.transitioning=!0,this.$image.one(S,i.proxy(function(){e.one(S,i.proxy(this.hidden,this)).removeClass($)},this)),this.zoomTo(0,!1,!0)):(e.removeClass($),this.hidden())))},view:function(t){var e,s,n,o,a,h=this.$title;t=Number(t)||0,!this.isShown||this.isPlayed||0>t||t>=this.length||this.isViewed&&t===this.index||this.trigger(B).isDefaultPrevented()||(s=this.$items.eq(t),n=s.find(Y),o=n.data("originalUrl"),a=n.attr("alt"),this.$image=e=i(''+a+''),this.$items.eq(this.index).removeClass(C),s.addClass(C),this.isViewed=!1,this.index=t,this.image=null,this.$canvas.html(e.addClass(z)),e[0].complete?this.load():(e.one(E,i.proxy(this.load,this)),this.timeout&&clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.removeClass(z)},1e3)),h.empty(),this.renderList(),this.$element.one(U,i.proxy(function(){var i=this.image,t=i.naturalWidth,e=i.naturalHeight;h.html(a+" ("+t+" × "+e+")")},this)))},prev:function(){this.view(G(this.index-1,0))},next:function(){this.view(Q(this.index+1,this.length-1))},move:function(i,t){var e=this.image;this.moveTo(s(i)?i:e.left+J(i),s(t)?t:e.top+J(t))},moveTo:function(i,t){var n=this.image,o=!1;s(t)&&(t=i),i=J(i),t=J(t),this.isViewed&&!this.isPlayed&&this.options.movable&&(e(i)&&(n.left=i,o=!0),e(t)&&(n.top=t,o=!0),o&&this.renderImage())},zoom:function(i,t){var e=this.image;i=J(i),i=0>i?1/(1-i):1+i,this.zoomTo(e.width*i/e.naturalWidth,t)},zoomTo:function(i,t,s){var n,o,a=this.options,h=.01,r=100,l=this.image,d=l.width,c=l.height;i=G(0,i),e(i)&&this.isViewed&&!this.isPlayed&&(s||a.zoomable)&&(s||(h=G(h,a.minZoomRatio),r=Q(r,a.maxZoomRatio),i=Q(G(i,h),r)),i>.95&&1.05>i&&(i=1),n=l.naturalWidth*i,o=l.naturalHeight*i,l.left-=(n-d)/2,l.top-=(o-c)/2,l.width=n,l.height=o,l.ratio=i,this.renderImage(),t&&this.tooltip())},rotate:function(i){this.rotateTo((this.image.rotate||0)+J(i))},rotateTo:function(i){var t=this.image;i=J(i),e(i)&&this.isViewed&&!this.isPlayed&&this.options.rotatable&&(t.rotate=i,this.renderImage())},scale:function(i,t){var n=this.image,o=!1;s(t)&&(t=i),i=J(i),t=J(t),this.isViewed&&!this.isPlayed&&this.options.scalable&&(e(i)&&(n.scaleX=i,o=!0),e(t)&&(n.scaleY=t,o=!0),o&&this.renderImage())},scaleX:function(i){this.scale(i,this.image.scaleY)},scaleY:function(i){this.scale(this.image.scaleX,i)},play:function(){var t,s=this.options,n=this.$player,o=i.proxy(this.loadImage,this),a=[],h=0,r=0;this.isShown&&!this.isPlayed&&(s.fullscreen&&this.fullscreen(),this.isPlayed=!0,n.addClass(p),this.$items.each(function(t){var e=i(this),l=e.find(Y),d=i(''+l.attr(');h++,d.addClass(y).toggleClass(F,s.transition),e.hasClass(C)&&(d.addClass($),r=t),a.push(d),d.one(E,{filled:!1},o),n.append(d)}),e(s.interval)&&s.interval>0&&(t=i.proxy(function(){this.playing=setTimeout(function(){a[r].removeClass($),r++,r=h>r?r:0,a[r].addClass($),t()},s.interval)},this),h>1&&t()))},stop:function(){this.isPlayed&&(this.isPlayed=!1,clearTimeout(this.playing),this.$player.removeClass(p).empty())},full:function(){var t=this.options,e=this.$image,s=this.$list;this.isShown&&!this.isPlayed&&!this.isFulled&&t.inline&&(this.isFulled=!0,this.$body.addClass(w),this.$button.addClass(k),t.transition&&(e.removeClass(F),s.removeClass(F)),this.$viewer.addClass(g).removeAttr("style").css("z-index",t.zIndex),this.initContainer(),this.viewer=i.extend({},this.container),this.renderList(),this.initImage(i.proxy(function(){this.renderImage(function(){t.transition&&setTimeout(function(){e.addClass(F),s.addClass(F)},0)})},this)))},exit:function(){var t=this.options,e=this.$image,s=this.$list;this.isFulled&&(this.isFulled=!1,this.$body.removeClass(w),this.$button.removeClass(k),t.transition&&(e.removeClass(F),s.removeClass(F)),this.$viewer.removeClass(g).css("z-index",t.zIndexInline),this.viewer=i.extend({},this.parent),this.renderViewer(),this.renderList(),this.initImage(i.proxy(function(){this.renderImage(function(){t.transition&&setTimeout(function(){e.addClass(F),s.addClass(F)},0)})},this)))},tooltip:function(){var t=this.options,e=this.$tooltip,s=this.image,n=[p,y,F].join(" ");this.isViewed&&!this.isPlayed&&t.tooltip&&(e.text(O(100*s.ratio)+"%"),this.tooltiping?clearTimeout(this.tooltiping):t.transition?(this.fading&&e.trigger(S),e.addClass(n),h(e[0]),e.addClass($)):e.addClass(p),this.tooltiping=setTimeout(i.proxy(function(){t.transition?(e.one(S,i.proxy(function(){e.removeClass(n),this.fading=!1},this)).removeClass($),this.fading=!0):e.removeClass(p),this.tooltiping=!1},this),1e3))},toggle:function(){1===this.image.ratio?this.zoomTo(this.initialImage.ratio):this.zoomTo(1)},reset:function(){this.isViewed&&!this.isPlayed&&(this.image=i.extend({},this.initialImage),this.renderImage())},destroy:function(){var i=this.$element;this.options.inline?this.unbind():(this.isShown&&this.unbind(),this.$images.removeClass(f),i.off(R,this.start)),this.unbuild(),i.removeData(m)},trigger:function(t,e){var s=i.Event(t,e);return this.$element.trigger(s),s},shown:function(){var t=this.options;this.transitioning=!1,this.isFulled=!0,this.isShown=!0,this.isVisible=!0,this.render(),this.bind(),i.isFunction(t.shown)&&this.$element.one(j,t.shown),this.trigger(j)},hidden:function(){var t=this.options;this.transitioning=!1,this.isViewed=!1,this.isFulled=!1,this.isShown=!1,this.isVisible=!1,this.unbind(),this.$body.removeClass(w),this.$viewer.addClass(b),this.resetList(),this.resetImage(),i.isFunction(t.hidden)&&this.$element.one(H,t.hidden),this.trigger(H)},fullscreen:function(){var i=document.documentElement;!this.isFulled||document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement||(i.requestFullscreen?i.requestFullscreen():i.msRequestFullscreen?i.msRequestFullscreen():i.mozRequestFullScreen?i.mozRequestFullScreen():i.webkitRequestFullscreen&&i.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT))},change:function(){var i=this.endX-this.startX,t=this.endY-this.startY;switch(this.action){case"move":this.move(i,t);break;case"zoom":this.zoom(function(i,t,e,s){var n=Z(i*i+t*t),o=Z(e*e+s*s);return(o-n)/n}(K(this.startX-this.startX2),K(this.startY-this.startY2),K(this.endX-this.endX2),K(this.endY-this.endY2))),this.startX2=this.endX2,this.startY2=this.endY2;break;case"switch":this.action="switched",i>1?this.prev():-1>i&&this.next()}this.startX=this.endX,this.startY=this.endY},isSwitchable:function(){var i=this.image,t=this.viewer;return i.left>=0&&i.top>=0&&i.width<=t.width&&i.height<=t.height}},d.DEFAULTS={inline:!1,button:!0,navbar:!0,title:!0,toolbar:!0,tooltip:!0,movable:!0,zoomable:!0,rotatable:!0,scalable:!0,transition:!0,fullscreen:!0,keyboard:!0,interval:5e3,minWidth:200,minHeight:100,zoomRatio:.1,minZoomRatio:.01,maxZoomRatio:100,zIndex:2015,zIndexInline:0,url:"src",build:null,built:null,show:null,shown:null,hide:null,hidden:null,view:null,viewed:null},d.TEMPLATE='
        ',d.other=i.fn.viewer,i.fn.viewer=function(e){var o,a=n(arguments,1);return this.each(function(){var s,n=i(this),h=n.data(m);if(!h){if(/destroy|hide|exit|stop|reset/.test(e))return;n.data(m,h=new d(this,e))}t(e)&&i.isFunction(s=h[e])&&(o=s.apply(h,a))}),s(o)?this:o},i.fn.viewer.Constructor=d,i.fn.viewer.setDefaults=d.setDefaults,i.fn.viewer.noConflict=function(){return i.fn.viewer=d.other,this}}); \ No newline at end of file diff --git a/docs/css/main.css b/docs/css/main.css index b357e03..54741e0 100644 --- a/docs/css/main.css +++ b/docs/css/main.css @@ -1,6 +1,3 @@ -/* Basic style - * -------------------------------------------------------------------------- */ - /* Header */ .docs-header { diff --git a/docs/index.html b/docs/index.html index cb3f053..7328f8c 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,7 +8,7 @@ Viewer - + @@ -33,7 +33,7 @@