Release v0.5.0

Author: Fengyuan Chen

CHANGELOG.md

@@ -1,6 +1,14 @@
 # Changelog
 
 
+## 0.5.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 (#6).
+
+
 ## 0.4.0 (Jan 1, 2016)
 
 - Added "update" method for update image dynamically.

README.md

@@ -45,8 +45,8 @@
 dist/
 ├── viewer.css     ( 8 KB)
 ├── viewer.min.css ( 7 KB)
-├── viewer.js      (47 KB)
-└── viewer.min.js  (20 KB)
+├── viewer.js      (48 KB)
+└── viewer.min.js  (21 KB)
 ```
 
 
@@ -147,31 +147,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

dist/viewer.css

@@ -1,11 +1,11 @@
 /*!
- * Viewer v0.4.0
+ * Viewer v0.5.0
  * https://github.com/fengyuanchen/viewer
  *
  * Copyright (c) 2015-2016 Fengyuan Chen
  * Released under the MIT license
  *
- * Date: 2016-01-01T04:21:19.666Z
+ * Date: 2016-01-21T09:59:45.429Z
  */
 .viewer-zoom-in:before,
 .viewer-zoom-out:before,
@@ -35,85 +35,85 @@
 }
 
 .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;
 }
@@ -136,7 +136,7 @@
           user-select: none;
 
   background-color: #000;
-  background-color: rgba(0, 0, 0, .5); 
+  background-color: rgba(0, 0, 0, .5);
 
   direction: ltr !important;
   -ms-touch-action: none;
@@ -185,7 +185,7 @@
   bottom: 0;
   left: 0;
 
-  overflow: hidden; 
+  overflow: hidden;
 
   text-align: center;
 }
@@ -198,7 +198,7 @@
 }
 
 .viewer-list {
-  overflow: hidden; 
+  overflow: hidden;
 
   -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
@@ -217,7 +217,7 @@
   width: 30px;
   height: 50px;
 
-  cursor: pointer;
+  cursor: pointer; 
 
   opacity: .5;
   color: transparent;
@@ -253,8 +253,7 @@
 }
 
 .viewer-toolbar {
-  display: none;
-  overflow: hidden; 
+  overflow: hidden;
 
   width: 280px;
   margin: 0 auto 5px;
@@ -267,7 +266,7 @@
   width: 24px;
   height: 24px;
 
-  cursor: pointer;
+  cursor: pointer; 
 
   border-radius: 50%;
   background-color: #000;
@@ -292,11 +291,6 @@
 .viewer-toolbar > .viewer-play:before {
   margin: 5px;
 }
-@media (min-width: 768px) {
-  .viewer-toolbar {
-    display: block;
-  }
-}
 
 .viewer-tooltip {
   font-size: 12px;
@@ -325,13 +319,13 @@
   font-size: 12px;
   line-height: 1;
 
-  display: none;
+  display: inline-block;
   overflow: hidden;
 
   max-width: 90%;
   margin: 0 5% 5px;
 
-  white-space: nowrap;
+  white-space: nowrap; 
   text-overflow: ellipsis;
 
   opacity: .8;
@@ -344,11 +338,6 @@
 
   filter: alpha(opacity=100);
 }
-@media (min-width: 768px) {
-  .viewer-title {
-    display: inline-block;
-  }
-}
 
 .viewer-button {
   position: absolute;
@@ -360,7 +349,7 @@
   width: 80px;
   height: 80px;
 
-  cursor: pointer;
+  cursor: pointer; 
 
   border-radius: 50%;
   background-color: #000;
@@ -416,3 +405,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;
+  }
+}