vue-gallery - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

build/rollup.config.js

@@ -0,1 +1,2 @@
+import fs from 'fs';
 import vue from 'rollup-plugin-vue';
@@ -11,3 +12,7 @@ import babel from 'rollup-plugin-babel';
   plugins: [
-    vue(),
+    vue({
+      css (style, styles, compiler) {
+        fs.writeFileSync('dist/css/vue-gallery.css', style)
+      }
+    }),
     babel({
@@ -14,0 +19,0 @@ babelrc: false,

dist/js/vue-gallery.js

 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('blueimp-gallery/css/blueimp-gallery.min.css'), require('blueimp-gallery/js/blueimp-gallery-fullscreen.js'), require('blueimp-gallery/js/blueimp-gallery.js')) :
 	typeof define === 'function' && define.amd ? define(['blueimp-gallery/css/blueimp-gallery.min.css', 'blueimp-gallery/js/blueimp-gallery-fullscreen.js', 'blueimp-gallery/js/blueimp-gallery.js'], factory) :
-	(global.VueGallery = factory(null,null,global.gallery));
-}(this, (function (blueimpGallery_min_css,blueimpGalleryFullscreen_js,gallery) { 'use strict';
+	(global.VueGallery = factory(null,null,global.blueimp));
+}(this, (function (blueimpGallery_min_css,blueimpGalleryFullscreen_js,blueimp) { 'use strict';
 
-gallery = gallery && gallery.hasOwnProperty('default') ? gallery['default'] : gallery;
+blueimp = blueimp && blueimp.hasOwnProperty('default') ? blueimp['default'] : blueimp;
 
@@ -170,5 +170,4 @@ var asyncGenerator = function () {
 
-    openImage: {
-      type: Number,
-      default: null
+    index: {
+      type: Number
     }
@@ -185,7 +184,7 @@ },
   watch: {
-    openImage: function openImage(value) {
+    index: function index(value) {
       if (value !== null) {
         this.open(value);
-      } else if (gallery) {
-        this.instance.close();
+      } else {
+        this.close();
       }
@@ -196,4 +195,3 @@ }
   destoryed: function destoryed() {
-    this.instance.close();
-    this.instance = null;
+    this.close();
   },
@@ -204,8 +202,38 @@
     open: function open(index) {
-      this.instance = gallery(this.images, _extends({
+      var _this = this;
+
+      var instance = typeof blueimp.Gallery !== 'undefined' ? blueimp.Gallery : blueimp;
+
+      this.instance = instance(this.images, _extends({
         toggleControlsOnReturn: false,
         toggleControlsOnSlideClick: false,
         closeOnSlideClick: false,
-        index: index
+        index: index,
+        onopen: function onopen() {
+          return _this.$emit('onopen');
+        },
+        onopened: function onopened() {
+          return _this.$emit('onopened');
+        },
+        onslide: function onslide(index, slide) {
+          return _this.$emit('onslide', { index: index, slide: slide });
+        },
+        onslideend: function onslideend(index, slide) {
+          return _this.$emit('onslideend', { index: index, slide: slide });
+        },
+        onslidecomplete: function onslidecomplete(index, slide) {
+          return _this.$emit('onslidecomplete', { index: index, slide: slide });
+        },
+        onclose: function onclose() {
+          return _this.close();
+        },
+        onclosed: function onclosed() {
+          return _this.$emit('onclosed');
+        }
       }, this.options));
+    },
+    close: function close() {
+      this.instance.close();
+      this.instance = null;
+      this.$emit('close');
     }
@@ -212,0 +240,0 @@ }

dist/js/vue-gallery.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("blueimp-gallery/css/blueimp-gallery.min.css"),require("blueimp-gallery/js/blueimp-gallery-fullscreen.js"),require("blueimp-gallery/js/blueimp-gallery.js")):"function"==typeof define&&define.amd?define(["blueimp-gallery/css/blueimp-gallery.min.css","blueimp-gallery/js/blueimp-gallery-fullscreen.js","blueimp-gallery/js/blueimp-gallery.js"],t):e.VueGallery=t(null,null,e.gallery)}(this,function(e,t,n){"use strict";n=n&&n.hasOwnProperty("default")?n.default:n;!function(){function e(e){this.value=e}function t(t){function n(l,i){try{var o=t[l](i),s=o.value;s instanceof e?Promise.resolve(s.value).then(function(e){n("next",e)},function(e){n("throw",e)}):r(o.done?"return":"normal",o.value)}catch(e){r("throw",e)}}function r(e,t){switch(e){case"return":l.resolve({value:t,done:!0});break;case"throw":l.reject(t);break;default:l.resolve({value:t,done:!1})}(l=l.next)?n(l.key,l.arg):i=null}var l,i;this._invoke=function(e,t){return new Promise(function(r,o){var s={key:e,arg:t,resolve:r,reject:o,next:null};i?i=i.next=s:(l=i=s,n(e,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(e){return this._invoke("next",e)},t.prototype.throw=function(e){return this._invoke("throw",e)},t.prototype.return=function(e){return this._invoke("return",e)}}();var r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e};return{render:function(){return this._m(0)},staticRenderFns:[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"blueimp-gallery blueimp-gallery-controls",attrs:{id:"blueimp-gallery"}},[n("div",{staticClass:"slides"}),n("h3",{staticClass:"title"}),n("a",{staticClass:"prev"},[e._v("‹")]),e._v(" "),n("a",{staticClass:"next"},[e._v("›")]),e._v(" "),n("a",{staticClass:"close"},[e._v("×")]),n("ol",{staticClass:"indicator"})])}],props:{images:{type:Array,default:function(){return[]}},options:{type:Object,default:function(){return{}}},openImage:{type:Number,default:null}},data:function(){return{instance:null}},watch:{openImage:function(e){null!==e?this.open(e):n&&this.instance.close()}},destoryed:function(){this.instance.close(),this.instance=null},methods:{open:function(e){this.instance=n(this.images,r({toggleControlsOnReturn:!1,toggleControlsOnSlideClick:!1,closeOnSlideClick:!1,index:e},this.options))}}}});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("blueimp-gallery/css/blueimp-gallery.min.css"),require("blueimp-gallery/js/blueimp-gallery-fullscreen.js"),require("blueimp-gallery/js/blueimp-gallery.js")):"function"==typeof define&&define.amd?define(["blueimp-gallery/css/blueimp-gallery.min.css","blueimp-gallery/js/blueimp-gallery-fullscreen.js","blueimp-gallery/js/blueimp-gallery.js"],n):e.VueGallery=n(null,null,e.blueimp)}(this,function(e,n,t){"use strict";t=t&&t.hasOwnProperty("default")?t.default:t;!function(){function e(e){this.value=e}function n(n){function t(r,l){try{var o=n[r](l),s=o.value;s instanceof e?Promise.resolve(s.value).then(function(e){t("next",e)},function(e){t("throw",e)}):i(o.done?"return":"normal",o.value)}catch(e){i("throw",e)}}function i(e,n){switch(e){case"return":r.resolve({value:n,done:!0});break;case"throw":r.reject(n);break;default:r.resolve({value:n,done:!1})}(r=r.next)?t(r.key,r.arg):l=null}var r,l;this._invoke=function(e,n){return new Promise(function(i,o){var s={key:e,arg:n,resolve:i,reject:o,next:null};l?l=l.next=s:(r=l=s,t(e,n))})},"function"!=typeof n.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(n.prototype[Symbol.asyncIterator]=function(){return this}),n.prototype.next=function(e){return this._invoke("next",e)},n.prototype.throw=function(e){return this._invoke("throw",e)},n.prototype.return=function(e){return this._invoke("return",e)}}();var i=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e};return{render:function(){return this._m(0)},staticRenderFns:[function(){var e=this,n=e.$createElement,t=e._self._c||n;return t("div",{staticClass:"blueimp-gallery blueimp-gallery-controls",attrs:{id:"blueimp-gallery"}},[t("div",{staticClass:"slides"}),t("h3",{staticClass:"title"}),t("a",{staticClass:"prev"},[e._v("‹")]),e._v(" "),t("a",{staticClass:"next"},[e._v("›")]),e._v(" "),t("a",{staticClass:"close"},[e._v("×")]),t("ol",{staticClass:"indicator"})])}],props:{images:{type:Array,default:function(){return[]}},options:{type:Object,default:function(){return{}}},index:{type:Number}},data:function(){return{instance:null}},watch:{index:function(e){null!==e?this.open(e):this.close()}},destoryed:function(){this.close()},methods:{open:function(e){var n=this,r=void 0!==t.Gallery?t.Gallery:t;this.instance=r(this.images,i({toggleControlsOnReturn:!1,toggleControlsOnSlideClick:!1,closeOnSlideClick:!1,index:e,onopen:function(){return n.$emit("onopen")},onopened:function(){return n.$emit("onopened")},onslide:function(e,t){return n.$emit("onslide",{index:e,slide:t})},onslideend:function(e,t){return n.$emit("onslideend",{index:e,slide:t})},onslidecomplete:function(e,t){return n.$emit("onslidecomplete",{index:e,slide:t})},onclose:function(){return n.close()},onclosed:function(){return n.$emit("onclosed")}},this.options))},close:function(){this.instance.close(),this.instance=null,this.$emit("close")}}}});

package.json

 {
   "name": "vue-gallery",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.",
@@ -5,0 +5,0 @@ "main": "dist/js/vue-gallery.js",

README.md

@@ -51,4 +51,9 @@ <p align="center">
   <div>
-    <gallery :images="images" :index="index" @close="index = null"></photoSwipe>
-    <button type="button" @click="index = 0"></button>
+    <gallery :images="images" :index="index" @close="index = null"></gallery>
+    <div
+      class="image"
+      v-for="image, imageIndex in images"
+      @click="index = imageIndex"
+      :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
+    ></div>
   </div>
@@ -58,6 +63,6 @@ </template>
 <script>
-  import Gallery from 'vue-gallery';
+  import VueGallery from 'vue-gallery';
   
   export default {
-    data() {
+    data: function () {
       return {
@@ -70,8 +75,8 @@ images: [
         ],
-        index: null, // index image
+        index: null
       };
     },
-    
+
     components: {
-      Gallery
+      'gallery': VueGallery
     },
@@ -84,9 +89,18 @@ }
 ```html
-<script type="text/javascript" src="blueimp-gallery.min.js"></script>
-<script type="text/javascript" src="vue.js"></script>
-<script type="text/javascript" src="vue-gallery.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/vue@2.4.3/dist/vue.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-helper.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery.js"></script>
+  <script type="text/javascript" src="https://unpkg.com/blueimp-gallery@2.27.0/js/blueimp-gallery-fullscreen.js"></script>
+  <script type="text/javascript" src="vue-gallery.js"></script>
+  <link rel="stylesheet" type="text/css" href="vue-gallery.css">
+  
 
 <div id="app">
-  <gallery :images="images" :index="index" @close="index = null"></photoSwipe>
-  <button type="button" @click="index = 0"></button>
+  <gallery :images="images" :index="index" @close="index = null"></gallery>
+  <div
+    class="image"
+    v-for="image, imageIndex in images"
+    @click="index = imageIndex"
+    :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
+  ></div>
 </div>
@@ -97,3 +111,3 @@
     el: '#app',
-    data: function() {
+    data: function () {
       return {
@@ -104,11 +118,11 @@ images: [
           'https://dummyimage.com/1280/000000/ffffff',
-          'https://dummyimage.com/400/000000/ffffff',
+          'https://dummyimage.com/400/000000/ffffff'
         ],
-        index: null, // index image
+        index: null
       };
     },
-    
+
     components: {
       'gallery': VueGallery
-    },
+    }
   });
@@ -129,7 +143,13 @@ </script>
 ## Events
-| Name         | Params                   | Description  |
-| -------------|:-------------------------|--------------|
-| close        |                          | Close        |
+| Name             | Params                  | Description  |
+| -----------------|:------------------------|--------------|
+| onopen           |                         |         |
+| onopened         |                         |         |
+| onslide          |                         |         |
+| onslideend       |                         |         |
+| onslidecomplete  |                         |         |
+| onclose          |                         |         |
+| onclosed         |                         |         |
 
 ## License
 MIT © [Igor Ognichenko](https://github.com/RobinCK)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

133624

increased by3.79%

Number of package files

17

increased by21.43%

Lines of code

266

increased by13.68%

Number of lines in readme file

149

increased by15.5%

Worsened metrics

Number of low supply chain risk alerts

3

increased by50%

No dependency changes