Release v0.3.0

fengyuanchen · Jan 21, 2016 · 41611b7 · 41611b7
1 parent 12e35a8
commit 41611b7
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 65 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,14 @@
 # Changelog
 
 
+## 0.3.0 (Jan 21, 2016)
+
+- Add more available values to the "title", "toolbar" and "navbar" options.
+- Support to toggle the visibility of title, toolbar and navbar between different screen widths.
+- Exit fullscreen when stop playing.
+- Fixed title not generated bug.
+
+
 ## 0.2.0 (Jan 1, 2016)
 
 - Added "update" method for update image dynamically.

diff --git a/README.md b/README.md
@@ -45,7 +45,7 @@
 dist/
 ├── viewer.css     ( 8 KB)
 ├── viewer.min.css ( 7 KB)
-├── viewer.js      (59 KB)
+├── viewer.js      (60 KB)
 └── viewer.min.js  (22 KB)
 ```
 
@@ -151,31 +151,46 @@ Show the button on the top-right of the viewer.
 
 ### navbar
 
-- Type: `Boolean`
+- Type: `Boolean` or `Number`
 - Default: `true`
+- Options:
+  - `0` or `false`: hide the navbar
+  - `1` or `true`: show the navbar
+  - `2`: show the navbar only when screen width great then 768 pixels
+  - `3`: show the navbar only when screen width great then 992 pixels
+  - `4`: show the navbar only when screen width great then 1200 pixels
 
-Show the navbar.
+Specify the visibility of the navbar.
 
 
 ### title
 
-- Type: `Boolean`
+- Type: `Boolean` or `Number`
 - Default: `true`
+- Options:
+  - `0` or `false`: hide the title
+  - `1` or `true`: show the title
+  - `2`: show the title only when screen width great then 768 pixels
+  - `3`: show the title only when screen width great then 992 pixels
+  - `4`: show the title only when screen width great then 1200 pixels
 
-Show the current image's name and dimensions.
+Specify the visibility of the title (the current image's name and dimensions).
 
 > The name comes from the `alt` attribute of an image element or the image name parsed from URL.
-> The title is visible only when the screen width great than 768 pixels.
 
 
 ### toolbar
 
-- Type: `Boolean`
+- Type: `Boolean` or `Number`
 - Default: `true`
-
-Show the toolbar.
-
-> The toolbar is visible only when the screen width great than 768 pixels.
+- Options:
+  - `0` or `false`: hide the toolbar
+  - `1` or `true`: show the toolbar
+  - `2`: show the toolbar only when screen width great then 768 pixels
+  - `3`: show the toolbar only when screen width great then 992 pixels
+  - `4`: show the toolbar only when screen width great then 1200 pixels
+
+Specify the visibility of the toolbar.
 
 
 ### tooltip

diff --git a/dist/viewer.css b/dist/viewer.css
@@ -1,11 +1,11 @@
 /*!
- * Viewer.js v0.2.0
+ * Viewer.js v0.3.0
  * https://github.com/fengyuanchen/viewerjs
  *
  * Copyright (c) 2015-2016 Fengyuan Chen
  * Released under the MIT license
  *
- * Date: 2016-01-01T04:42:28.024Z
+ * Date: 2016-01-21T09:59:49.860Z
  */
 .viewer-zoom-in:before,
 .viewer-zoom-out:before,
@@ -261,7 +261,6 @@
 }
 
 .viewer-toolbar {
-  display: none;
   overflow: hidden;
 
   width: 280px;
@@ -307,12 +306,6 @@
   margin: 5px;
 }
 
-@media (min-width: 768px) {
-  .viewer-toolbar {
-    display: block;
-  }
-}
-
 .viewer-tooltip {
   font-size: 12px;
   line-height: 20px;
@@ -340,7 +333,7 @@
   font-size: 12px;
   line-height: 1;
 
-  display: none;
+  display: inline-block;
   overflow: hidden;
 
   max-width: 90%;
@@ -361,12 +354,6 @@
   filter: alpha(opacity=100);
 }
 
-@media (min-width: 768px) {
-  .viewer-title {
-    display: inline-block;
-  }
-}
-
 .viewer-button {
   position: absolute;
   top: -40px;
@@ -434,3 +421,21 @@
        -o-transition: all .3s ease-out;
           transition: all .3s ease-out;
 }
+
+@media (max-width: 767px) {
+  .viewer-hide-xs-down {
+    display: none;
+  }
+}
+
+@media (max-width: 991px) {
+  .viewer-hide-sm-down {
+    display: none;
+  }
+}
+
+@media (max-width: 1199px) {
+  .viewer-hide-md-down {
+    display: none;
+  }
+}
diff --git a/dist/viewer.js b/dist/viewer.js
@@ -1,11 +1,11 @@
 /*!
- * Viewer.js v0.2.0
+ * Viewer.js v0.3.0
  * https://github.com/fengyuanchen/viewerjs
  *
  * Copyright (c) 2015-2016 Fengyuan Chen
  * Released under the MIT license
  *
- * Date: 2016-01-01T04:42:55.928Z
+ * Date: 2016-01-21T09:59:55.754Z
  */
 
 (function (global, factory) {
@@ -35,6 +35,9 @@
   var CLASS_OPEN = NAMESPACE + '-open';
   var CLASS_SHOW = NAMESPACE + '-show';
   var CLASS_HIDE = NAMESPACE + '-hide';
+  var CLASS_HIDE_XS_DOWN = 'viewer-hide-xs-down';
+  var CLASS_HIDE_SM_DOWN = 'viewer-hide-sm-down';
+  var CLASS_HIDE_MD_DOWN = 'viewer-hide-md-down';
   var CLASS_FADE = NAMESPACE + '-fade';
   var CLASS_IN = NAMESPACE + '-in';
   var CLASS_MOVE = NAMESPACE + '-move';
@@ -534,6 +537,19 @@
     return transforms.length ? transforms.join(' ') : 'none';
   }
 
+  function getResponsiveClass(option) {
+    switch (option) {
+      case 2:
+        return CLASS_HIDE_XS_DOWN;
+
+      case 3:
+        return CLASS_HIDE_SM_DOWN;
+
+      case 4:
+        return CLASS_HIDE_MD_DOWN;
+    }
+  }
+
   function Viewer(element, options) {
     var _this = this;
 
@@ -658,9 +674,9 @@
       _this.player = getByClass(viewer, 'viewer-player')[0];
       _this.list = getByClass(viewer, 'viewer-list')[0];
 
-      toggleClass(title, CLASS_HIDE, !options.title);
-      toggleClass(toolbar, CLASS_HIDE, !options.toolbar);
-      toggleClass(navbar, CLASS_HIDE, !options.navbar);
+      addClass(title, !options.title ? CLASS_HIDE : getResponsiveClass(options.title));
+      addClass(toolbar, !options.toolbar ? CLASS_HIDE : getResponsiveClass(options.toolbar));
+      addClass(navbar, !options.navbar ? CLASS_HIDE : getResponsiveClass(options.navbar));
       toggleClass(button, CLASS_HIDE, !options.button);
 
       toggleClass(toolbar.querySelectorAll('li[class*=zoom]'), CLASS_INVISIBLE, !options.zoomable);
@@ -873,7 +889,7 @@
     renderList: function (index) {
       var _this = this;
       var i = index || _this.index;
-      var width = _this.items[i].offsetWidth;
+      var width = _this.items[i].offsetWidth || 30;
       var outerWidth = width + 1; // 1 pixel of `margin-left` width
 
       // Place the active item in the center of the screen
@@ -1113,8 +1129,8 @@
       var e = getEvent(event);
       var image = e.target;
       var parent = image.parentNode;
-      var parentWidth = parent.offsetWidth;
-      var parentHeight = parent.offsetHeight;
+      var parentWidth = parent.offsetWidth || 30;
+      var parentHeight = parent.offsetHeight || 50;
       var filled = !!getData(image, 'filled');
 
       getImageSize(image, function (naturalWidth, naturalHeight) {
@@ -1509,10 +1525,28 @@
       _this.isViewed = false;
       _this.index = index;
       _this.imageData = null;
+
       addClass(canvas, CLASS_INVISIBLE);
       empty(canvas);
       appendChild(canvas, image);
 
+      // Center current item
+      _this.renderList();
+
+      // Clear title
+      empty(title);
+
+      // Generate title after viewed
+      addListener(element, EVENT_VIEWED, function () {
+        var imageData = _this.imageData;
+        var width = imageData.naturalWidth;
+        var height = imageData.naturalHeight;
+
+        setText(title, alt + ' (' + width + ' × ' + height + ')');
+      }, true);
+
+
+
       if (image.complete) {
         _this.load();
       } else {
@@ -1529,20 +1563,6 @@
         }, 1000);
       }
 
-      empty(title);
-
-      // Center current item
-      _this.renderList();
-
-      // Show title when viewed
-      addListener(element, EVENT_VIEWED, function () {
-        var imageData = _this.imageData;
-        var width = imageData.naturalWidth;
-        var height = imageData.naturalHeight;
-
-        setText(title, alt + ' (' + width + ' × ' + height + ')');
-      }, true);
-
       return _this;
     },
 
@@ -1827,7 +1847,7 @@
       }
 
       if (options.fullscreen) {
-        _this.fullscreen();
+        _this.requestFullscreen();
       }
 
       _this.isPlayed = true;
@@ -1883,6 +1903,10 @@
         return _this;
       }
 
+      if (_this.options.fullscreen) {
+        _this.exitFullscreen();
+      }
+
       _this.isPlayed = false;
       clearTimeout(_this.playing);
       removeClass(player, CLASS_SHOW);
@@ -2177,7 +2201,7 @@
       dispatchEvent(element, EVENT_HIDDEN);
     },
 
-    fullscreen: function () {
+    requestFullscreen: function () {
       var _this = this;
       var documentElement = document.documentElement;
 
@@ -2196,6 +2220,22 @@
       }
     },
 
+    exitFullscreen: function () {
+      var _this = this;
+
+      if (_this.isFulled) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        }
+      }
+    },
+
     change: function (originalEvent) {
       var _this = this;
       var offsetX = _this.endX - _this.startX;
@@ -2229,10 +2269,12 @@
         case 'switch':
           _this.action = 'switched';
 
-          if (offsetX > 1) {
-            _this.prev();
-          } else if (offsetX < -1) {
-            _this.next();
+          if (abs(offsetX) > abs(offsetY)) {
+            if (offsetX > 1) {
+              _this.prev();
+            } else if (offsetX < -1) {
+              _this.next();
+            }
           }
 
           break;