v-viewer - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

dist/v-viewer.js

@@ -102,3 +102,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-  var createViewer = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1_throttle_debounce__["a" /* debounce */])(50, function (el, options) {
+  function createViewer(el, options) {
     Vue.nextTick(function () {
@@ -109,11 +109,15 @@ destroyViewer(el);
     });
-  });
+  }
 
-  function createObserver(el, binding) {
+  function createObserver(el, options, debouncedCreateViewer) {
     destroyObserver(el);
     var MutationObserver = global.MutationObserver || global.WebKitMutationObserver || global.MozMutationObserver;
+    if (!MutationObserver) {
+      log('observer not supported');
+      return;
+    }
     var observer = new MutationObserver(function (mutations) {
       mutations.forEach(function (mutation) {
         log('viewer mutation:' + mutation.type);
-        createViewer(el, binding.value);
+        debouncedCreateViewer(el, options);
       });
@@ -127,2 +131,19 @@ });
 
+  function createWatcher(el, _ref2, vnode, debouncedCreateViewer) {
+    var expression = _ref2.expression;
+
+    var simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/;
+    if (!simplePathRE.test(expression)) {
+      log('only simple dot-delimited paths can create watcher');
+      return;
+    }
+    el['$viewerUnwatch'] = vnode.context.$watch(expression, function (newVal, oldVal) {
+      log('change detected by watcher: ', expression);
+      debouncedCreateViewer(el, newVal);
+    }, {
+      deep: true
+    });
+    log('watcher created, expression: ', expression);
+  }
+
   function destroyViewer(el) {
@@ -146,21 +167,27 @@ if (!el['$' + name]) {
 
-  function log(content) {
-    debug && console.log(content);
+  function destroyWatcher(el) {
+    if (!el['$viewerUnwatch']) {
+      return;
+    }
+    el['$viewerUnwatch']();
+    delete el['$viewerUnwatch'];
+    log('watcher destroyed');
   }
 
+  function log() {
+    var _console;
+
+    debug && (_console = console).log.apply(_console, arguments);
+  }
+
   Vue.directive('viewer', {
     bind: function bind(el, binding, vnode) {
       log('viewer bind');
-      createViewer(el, binding.value);
+      var debouncedCreateViewer = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1_throttle_debounce__["a" /* debounce */])(50, createViewer);
+      debouncedCreateViewer(el, binding.value);
 
-      el['$viewerUnwatch'] = vnode.context.$watch(binding.expression, function (newVal, oldVal) {
-        this.$nextTick(function () {
-          createViewer(el, newVal);
-        });
-      }, {
-        deep: true
-      });
+      createWatcher(el, binding, vnode, debouncedCreateViewer);
 
       if (!binding.modifiers.static) {
-        createObserver(el, binding);
+        createObserver(el, binding.value, debouncedCreateViewer);
       }
@@ -173,4 +200,5 @@ },
 
+      destroyWatcher(el);
+
       destroyViewer(el);
-      el['$viewerUnwatch'] && el['$viewerUnwatch']();
     }
@@ -177,0 +205,0 @@ });

dist/v-viewer.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("viewerjs")):"function"==typeof define&&define.amd?define(["viewerjs"],t):"object"==typeof exports?exports.VueViewer=t(require("viewerjs")):e.VueViewer=t(e.Viewer)}(this,function(e){return function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(t,n){t.exports=e},function(e,t,n){"use strict";(function(e){var i=n(0),r=n.n(i),o=n(5),u=function(t,i){function u(t,n){s(t);var i=e.MutationObserver||e.WebKitMutationObserver||e.MozMutationObserver,r=new i(function(e){e.forEach(function(e){a("viewer mutation:"+e.type),p(t,n.value)})}),o={attributes:!0,childList:!0,characterData:!0,subtree:!0};r.observe(t,o),t.$viewerMutationObserver=r,a("observer created")}function c(e){e["$"+d]&&(e["$"+d].destroy(),delete e["$"+d],a("viewer destroyed"))}function s(e){e.$viewerMutationObserver&&(e.$viewerMutationObserver.disconnect(),delete e.$viewerMutationObserver,a("observer destroyed"))}function a(e){l&&console.log(e)}var f=i.name,d=void 0===f?"viewer":f,v=i.debug,l=void 0!==v&&v,p=n.i(o.a)(50,function(e,n){t.nextTick(function(){c(e),e["$"+d]=new r.a(e,n),a("viewer created")})});t.directive("viewer",{bind:function(e,t,n){a("viewer bind"),p(e,t.value),e.$viewerUnwatch=n.context.$watch(t.expression,function(t,n){this.$nextTick(function(){p(e,t)})},{deep:!0}),t.modifiers.static||u(e,t)},unbind:function(e,t){a("viewer unbind"),s(e),c(e),e.$viewerUnwatch&&e.$viewerUnwatch()}})};t.a={install:u}}).call(t,n(7))},function(e,t,n){"use strict";function i(){var e={},t=!1,n=0,r=arguments.length;for("[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],n++);n<r;n++){var o=arguments[n];!function(n){for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t&&"[object Object]"===Object.prototype.toString.call(n[r])?e[r]=i(!0,e[r],n[r]):e[r]=n[r])}(o)}return e}t.a=i},function(e,t,n){var i=n(8)(n(6),n(9),null,null);e.exports=i.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(2),r=n(3),o=n.n(r),u=n(1),c=n(0),s=n.n(c);t.default={install:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=t.name,c=void 0===r?"viewer":r,a=t.debug,f=void 0!==a&&a,d=t.defaultOptions;s.a.setDefaults(d),e.component(c,n.i(i.a)(o.a,{name:c})),e.use(u.a,{name:c,debug:f})},setDefaults:function(e){s.a.setDefaults(e)}}},function(e,t,n){"use strict";function i(e,t,n,i){function r(){function r(){u=Number(new Date),n.apply(s,f)}function c(){o=void 0}var s=this,a=Number(new Date)-u,f=arguments;i&&!o&&r(),o&&clearTimeout(o),void 0===i&&a>e?r():!0!==t&&(o=setTimeout(i?c:r,void 0===i?e-a:e))}var o,u=0;return"boolean"!=typeof t&&(i=n,n=t,t=void 0),r}function r(e,t,n){return void 0===n?i(e,t,!1):i(e,n,!1!==t)}n.d(t,"a",function(){return r})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=n(0),r=n.n(i);t.default={props:{images:{type:Array},trigger:{},options:{type:Object}},data:function(){return{}},computed:{},methods:{createViewer:function(){this.$viewer&&this.$viewer.destroy(),this.$viewer=new r.a(this.$el,this.options),this.$emit("inited",this.$viewer)}},watch:{images:function(){var e=this;this.$nextTick(function(){e.createViewer()})},trigger:{handler:function(){var e=this;this.$nextTick(function(){e.createViewer()})},deep:!0},options:{handler:function(){var e=this;this.$nextTick(function(){e.createViewer()})},deep:!0}},mounted:function(){this.createViewer()},destroyed:function(){this.$viewer&&this.$viewer.destroy()}}},function(e,t){var n,i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"===("undefined"==typeof window?"undefined":i(window))&&(n=window)}e.exports=n},function(e,t){e.exports=function(e,t,n,i){var r,o=e=e||{},u=typeof e.default;"object"!==u&&"function"!==u||(r=e,o=e.default);var c="function"==typeof o?o.options:o;if(t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns),n&&(c._scopeId=n),i){var s=Object.create(c.computed||null);Object.keys(i).forEach(function(e){var t=i[e];s[e]=function(){return t}}),c.computed=s}return{esModule:r,exports:o,options:c}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",[e._t("default",null,{images:e.images,options:e.options})],2)},staticRenderFns:[]}}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("viewerjs")):"function"==typeof define&&define.amd?define(["viewerjs"],t):"object"==typeof exports?exports.VueViewer=t(require("viewerjs")):e.VueViewer=t(e.Viewer)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=4)}([function(t,n){t.exports=e},function(e,t,n){"use strict";(function(e){var r=n(0),i=n.n(r),o=n(5),u=function(t,r){function u(e,n){t.nextTick(function(){s(e),e["$"+p]=new i.a(e,n),v("viewer created")})}function c(t,n,r){f(t);var i=e.MutationObserver||e.WebKitMutationObserver||e.MozMutationObserver;if(!i)return void v("observer not supported");var o=new i(function(e){e.forEach(function(e){v("viewer mutation:"+e.type),r(t,n)})}),u={attributes:!0,childList:!0,characterData:!0,subtree:!0};o.observe(t,u),t.$viewerMutationObserver=o,v("observer created")}function a(e,t,n,r){var i=t.expression;if(!/^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/.test(i))return void v("only simple dot-delimited paths can create watcher");e.$viewerUnwatch=n.context.$watch(i,function(t,n){v("change detected by watcher: ",i),r(e,t)},{deep:!0}),v("watcher created, expression: ",i)}function s(e){e["$"+p]&&(e["$"+p].destroy(),delete e["$"+p],v("viewer destroyed"))}function f(e){e.$viewerMutationObserver&&(e.$viewerMutationObserver.disconnect(),delete e.$viewerMutationObserver,v("observer destroyed"))}function d(e){e.$viewerUnwatch&&(e.$viewerUnwatch(),delete e.$viewerUnwatch,v("watcher destroyed"))}function v(){var e;b&&(e=console).log.apply(e,arguments)}var l=r.name,p=void 0===l?"viewer":l,w=r.debug,b=void 0!==w&&w;t.directive("viewer",{bind:function(e,t,r){v("viewer bind");var i=n.i(o.a)(50,u);i(e,t.value),a(e,t,r,i),t.modifiers.static||c(e,t.value,i)},unbind:function(e,t){v("viewer unbind"),f(e),d(e),s(e)}})};t.a={install:u}}).call(t,n(7))},function(e,t,n){"use strict";function r(){var e={},t=!1,n=0,i=arguments.length;for("[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],n++);n<i;n++){var o=arguments[n];!function(n){for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t&&"[object Object]"===Object.prototype.toString.call(n[i])?e[i]=r(!0,e[i],n[i]):e[i]=n[i])}(o)}return e}t.a=r},function(e,t,n){var r=n(8)(n(6),n(9),null,null);e.exports=r.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(2),i=n(3),o=n.n(i),u=n(1),c=n(0),a=n.n(c);t.default={install:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=t.name,c=void 0===i?"viewer":i,s=t.debug,f=void 0!==s&&s,d=t.defaultOptions;a.a.setDefaults(d),e.component(c,n.i(r.a)(o.a,{name:c})),e.use(u.a,{name:c,debug:f})},setDefaults:function(e){a.a.setDefaults(e)}}},function(e,t,n){"use strict";function r(e,t,n,r){function i(){function i(){u=Number(new Date),n.apply(a,f)}function c(){o=void 0}var a=this,s=Number(new Date)-u,f=arguments;r&&!o&&i(),o&&clearTimeout(o),void 0===r&&s>e?i():!0!==t&&(o=setTimeout(r?c:i,void 0===r?e-s:e))}var o,u=0;return"boolean"!=typeof t&&(r=n,n=t,t=void 0),i}function i(e,t,n){return void 0===n?r(e,t,!1):r(e,n,!1!==t)}n.d(t,"a",function(){return i})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),i=n.n(r);t.default={props:{images:{type:Array},trigger:{},options:{type:Object}},data:function(){return{}},computed:{},methods:{createViewer:function(){this.$viewer&&this.$viewer.destroy(),this.$viewer=new i.a(this.$el,this.options),this.$emit("inited",this.$viewer)}},watch:{images:function(){var e=this;this.$nextTick(function(){e.createViewer()})},trigger:{handler:function(){var e=this;this.$nextTick(function(){e.createViewer()})},deep:!0},options:{handler:function(){var e=this;this.$nextTick(function(){e.createViewer()})},deep:!0}},mounted:function(){this.createViewer()},destroyed:function(){this.$viewer&&this.$viewer.destroy()}}},function(e,t){var n,r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"===("undefined"==typeof window?"undefined":r(window))&&(n=window)}e.exports=n},function(e,t){e.exports=function(e,t,n,r){var i,o=e=e||{},u=typeof e.default;"object"!==u&&"function"!==u||(i=e,o=e.default);var c="function"==typeof o?o.options:o;if(t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns),n&&(c._scopeId=n),r){var a=Object.create(c.computed||null);Object.keys(r).forEach(function(e){var t=r[e];a[e]=function(){return t}}),c.computed=a}return{esModule:i,exports:o,options:c}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",[e._t("default",null,{images:e.images,options:e.options})],2)},staticRenderFns:[]}}])});

package.json

 {
   "name": "v-viewer",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js",
@@ -5,0 +5,0 @@ "main": "dist/v-viewer.js",

README.md

@@ -6,3 +6,3 @@ # v-viewer
 
-## [Live demo](http://mirari.github.io/v-viewer/)
+## [Live demo](https://mirari.github.io/v-viewer/)
 
@@ -13,3 +13,3 @@ ## Quick Example
 
-## [中文文档](http://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/)
+## [中文文档](https://mirari.cc/2017/08/27/Vue%E5%9B%BE%E7%89%87%E6%B5%8F%E8%A7%88%E7%BB%84%E4%BB%B6v-viewer%EF%BC%8C%E6%94%AF%E6%8C%81%E6%97%8B%E8%BD%AC%E3%80%81%E7%BC%A9%E6%94%BE%E3%80%81%E7%BF%BB%E8%BD%AC%E7%AD%89%E6%93%8D%E4%BD%9C/)
 
@@ -16,0 +16,0 @@ ## Migration from 0.x

src/directive.js

@@ -5,4 +5,3 @@ import Viewer from 'viewerjs'
 const install = (Vue, {name = 'viewer', debug = false}) => {
-  // 使用去抖避免不必要的大量突发重建
-  const createViewer = debounce(50, (el, options) => {
+  function createViewer (el, options) {
     // nextTick执行，否则可能漏掉未渲染完的子元素
@@ -14,11 +13,15 @@ Vue.nextTick(() => {
     })
-  })
+  }
 
-  function createObserver (el, binding) {
+  function createObserver (el, options, debouncedCreateViewer) {
     destroyObserver(el)
     const MutationObserver = global.MutationObserver || global.WebKitMutationObserver || global.MozMutationObserver
+    if (!MutationObserver) {
+      log('observer not supported')
+      return
+    }
     const observer = new MutationObserver(function (mutations) {
       mutations.forEach(function (mutation) {
         log('viewer mutation:' + mutation.type)
-        createViewer(el, binding.value)
+        debouncedCreateViewer(el, options)
       })
@@ -32,2 +35,17 @@ })
 
+  function createWatcher (el, {expression}, vnode, debouncedCreateViewer) {
+    const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/
+    if (!simplePathRE.test(expression)) {
+      log('only simple dot-delimited paths can create watcher')
+      return
+    }
+    el['$viewerUnwatch'] = vnode.context.$watch(expression, function (newVal, oldVal) {
+      log('change detected by watcher: ', expression)
+      debouncedCreateViewer(el, newVal)
+    }, {
+      deep: true
+    })
+    log('watcher created, expression: ', expression)
+  }
+
   function destroyViewer (el) {
@@ -51,23 +69,28 @@ if (!el[`$${name}`]) {
 
-  function log (content) {
-    debug && console.log(content)
+  function destroyWatcher (el) {
+    if (!el['$viewerUnwatch']) {
+      return
+    }
+    el['$viewerUnwatch']()
+    delete el['$viewerUnwatch']
+    log('watcher destroyed')
   }
 
+  function log () {
+    debug && console.log(...arguments)
+  }
+
   Vue.directive('viewer', {
     bind (el, binding, vnode) {
       log('viewer bind')
-      createViewer(el, binding.value)
-      // 创建watch监听options变化
-      el['$viewerUnwatch'] = vnode.context.$watch(binding.expression, function (newVal, oldVal) {
-        this.$nextTick(() => {
-          createViewer(el, newVal)
-        })
-      }, {
-        deep: true
-      })
+      const debouncedCreateViewer = debounce(50, createViewer)
+      debouncedCreateViewer(el, binding.value)
 
-      // 是否监听变化
+      // 创建watch监听options表达式变化
+      createWatcher(el, binding, vnode, debouncedCreateViewer)
+
+      // 是否监听dom变化
       if (!binding.modifiers.static) {
         // 增加dom变化监听
-        createObserver(el, binding)
+        createObserver(el, binding.value, debouncedCreateViewer)
       }
@@ -79,5 +102,6 @@ },
       destroyObserver(el)
+      // 销毁指令表达式监听
+      destroyWatcher(el)
       // 销毁viewer
       destroyViewer(el)
-      el['$viewerUnwatch'] && el['$viewerUnwatch']()
     }
@@ -84,0 +108,0 @@ })

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

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

257273

increased by0.81%

Lines of code

591

increased by8.04%

No dependency changes