v-viewer - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

dist/v-viewer.js

@@ -92,4 +92,6 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_viewerjs___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_viewerjs__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_throttle_debounce__ = __webpack_require__(5);
 
 
+
 var install = function install(Vue, _ref) {
@@ -101,11 +103,13 @@ var _ref$name = _ref.name,
 
-  function createViewer(el, binding) {
-    el['$' + name] && el['$' + name].destroy();
+  var createViewer = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1_throttle_debounce__["a" /* debounce */])(50, function (el, binding) {
     Vue.nextTick(function () {
+      destroyViewer(el);
       var options = binding.value;
       el['$' + name] = new __WEBPACK_IMPORTED_MODULE_0_viewerjs___default.a(el, options);
+      log('viewer created');
     });
-  }
+  });
 
   function createObserver(el, binding) {
+    destroyObserver(el);
     var MutationObserver = global.MutationObserver || global.WebKitMutationObserver || global.MozMutationObserver;
@@ -121,4 +125,23 @@ var observer = new MutationObserver(function (mutations) {
     el['$viewerMutationObserver'] = observer;
+    log('observer created');
   }
 
+  function destroyViewer(el) {
+    if (!el['$' + name]) {
+      return;
+    }
+    el['$' + name].destroy();
+    delete el['$' + name];
+    log('viewer destroyed');
+  }
+
+  function destroyObserver(el) {
+    if (!el['$viewerMutationObserver']) {
+      return;
+    }
+    el['$viewerMutationObserver'].disconnect();
+    delete el['$viewerMutationObserver'];
+    log('observer destroyed');
+  }
+
   function log(content) {
@@ -133,3 +156,5 @@ debug && console.log(content);
 
-      createObserver(el, binding);
+      if (!binding.modifiers.static) {
+        createObserver(el, binding);
+      }
     },
@@ -139,4 +164,5 @@ unbind: function unbind(el, binding) {
 
-      el['$viewerMutationObserver'] && el['$viewerMutationObserver'].disconnect();
-      el['$' + name] && el['$' + name].destroy();
+      destroyObserver(el);
+
+      destroyViewer(el);
     }
@@ -149,3 +175,3 @@ });
 });
-/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(6)))
+/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(7)))
 
@@ -194,7 +220,7 @@ /***/ }),
 
-var Component = __webpack_require__(7)(
+var Component = __webpack_require__(8)(
   /* script */
-  __webpack_require__(5),
+  __webpack_require__(6),
   /* template */
-  __webpack_require__(8),
+  __webpack_require__(9),
   /* scopeId */
@@ -266,2 +292,60 @@ null,
 "use strict";
+/* unused harmony export throttle */
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return debounce; });
+
+function throttle(delay, noTrailing, callback, debounceMode) {
+	var timeoutID;
+
+	var lastExec = 0;
+
+	if (typeof noTrailing !== 'boolean') {
+		debounceMode = callback;
+		callback = noTrailing;
+		noTrailing = undefined;
+	}
+
+	function wrapper() {
+
+		var self = this;
+		var elapsed = Number(new Date()) - lastExec;
+		var args = arguments;
+
+		function exec() {
+			lastExec = Number(new Date());
+			callback.apply(self, args);
+		}
+
+		function clear() {
+			timeoutID = undefined;
+		}
+
+		if (debounceMode && !timeoutID) {
+			exec();
+		}
+
+		if (timeoutID) {
+			clearTimeout(timeoutID);
+		}
+
+		if (debounceMode === undefined && elapsed > delay) {
+			exec();
+		} else if (noTrailing !== true) {
+			timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
+		}
+	}
+
+	return wrapper;
+}
+
+function debounce(delay, atBegin, callback) {
+	return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
+}
+
+
+
+/***/ }),
+/* 6 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
 Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
@@ -340,3 +424,3 @@ /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_viewerjs__ = __webpack_require__(0);
 /***/ }),
-/* 6 */
+/* 7 */
 /***/ (function(module, exports) {
@@ -361,3 +445,3 @@
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports) {
@@ -419,3 +503,3 @@
 /***/ }),
-/* 8 */
+/* 9 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -422,0 +506,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(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.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),o=n.n(r),i=function(t,n){function r(e,n){e["$"+s]&&e["$"+s].destroy(),t.nextTick(function(){var t=n.value;e["$"+s]=new o.a(e,t)})}function i(t,n){var o=e.MutationObserver||e.WebKitMutationObserver||e.MozMutationObserver,i=new o(function(e){e.forEach(function(e){u("viewer mutation:"+e.type),r(t,n)})}),c={attributes:!0,childList:!0,characterData:!0,subtree:!0};i.observe(t,c),t.$viewerMutationObserver=i}function u(e){f&&console.log(e)}var c=n.name,s=void 0===c?"viewer":c,a=n.debug,f=void 0!==a&&a;t.directive("viewer",{bind:function(e,t){u("viewer bind"),r(e,t),i(e,t)},unbind:function(e,t){u("viewer unbind"),e.$viewerMutationObserver&&e.$viewerMutationObserver.disconnect(),e["$"+s]&&e["$"+s].destroy()}})};t.a={install:i}}).call(t,n(6))},function(e,t,n){"use strict";function r(){var e={},t=!1,n=0,o=arguments.length;for("[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],n++);n<o;n++){var i=arguments[n];!function(n){for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t&&"[object Object]"===Object.prototype.toString.call(n[o])?e[o]=r(!0,e[o],n[o]):e[o]=n[o])}(i)}return e}t.a=r},function(e,t,n){var r=n(7)(n(5),n(8),null,null);e.exports=r.exports},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(2),o=n(3),i=n.n(o),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]:{},o=t.name,c=void 0===o?"viewer":o,a=t.debug,f=void 0!==a&&a,d=t.defaultOptions;s.a.setDefaults(d),e.component(c,n.i(r.a)(i.a,{name:c})),e.use(u.a,{name:c,debug:f})},setDefaults:function(e){s.a.setDefaults(e)}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=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 o.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 o,i=e=e||{},u=typeof e.default;"object"!==u&&"function"!==u||(o=e,i=e.default);var c="function"==typeof i?i.options:i;if(t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns),n&&(c._scopeId=n),r){var s=Object.create(c.computed||null);Object.keys(r).forEach(function(e){var t=r[e];s[e]=function(){return t}}),c.computed=s}return{esModule:o,exports:i,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 o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.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),o=n.n(r),i=n(5),u=function(t,r){function u(t,n){s(t);var r=e.MutationObserver||e.WebKitMutationObserver||e.MozMutationObserver,o=new r(function(e){e.forEach(function(e){a("viewer mutation:"+e.type),p(t,n)})}),i={attributes:!0,childList:!0,characterData:!0,subtree:!0};o.observe(t,i),t.$viewerMutationObserver=o,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=r.name,d=void 0===f?"viewer":f,v=r.debug,l=void 0!==v&&v,p=n.i(i.a)(50,function(e,n){t.nextTick(function(){c(e);var t=n.value;e["$"+d]=new o.a(e,t),a("viewer created")})});t.directive("viewer",{bind:function(e,t){a("viewer bind"),p(e,t),t.modifiers.static||u(e,t)},unbind:function(e,t){a("viewer unbind"),s(e),c(e)}})};t.a={install:u}}).call(t,n(7))},function(e,t,n){"use strict";function r(){var e={},t=!1,n=0,o=arguments.length;for("[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],n++);n<o;n++){var i=arguments[n];!function(n){for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t&&"[object Object]"===Object.prototype.toString.call(n[o])?e[o]=r(!0,e[o],n[o]):e[o]=n[o])}(i)}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),o=n(3),i=n.n(o),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]:{},o=t.name,c=void 0===o?"viewer":o,a=t.debug,f=void 0!==a&&a,d=t.defaultOptions;s.a.setDefaults(d),e.component(c,n.i(r.a)(i.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 r(e,t,n,r){function o(){function o(){u=Number(new Date),n.apply(s,f)}function c(){i=void 0}var s=this,a=Number(new Date)-u,f=arguments;r&&!i&&o(),i&&clearTimeout(i),void 0===r&&a>e?o():!0!==t&&(i=setTimeout(r?c:o,void 0===r?e-a:e))}var i,u=0;return"boolean"!=typeof t&&(r=n,n=t,t=void 0),o}function o(e,t,n){return void 0===n?r(e,t,!1):r(e,n,!1!==t)}n.d(t,"a",function(){return o})},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0),o=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 o.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 o,i=e=e||{},u=typeof e.default;"object"!==u&&"function"!==u||(o=e,i=e.default);var c="function"==typeof i?i.options:i;if(t&&(c.render=t.render,c.staticRenderFns=t.staticRenderFns),n&&(c._scopeId=n),r){var s=Object.create(c.computed||null);Object.keys(r).forEach(function(e){var t=r[e];s[e]=function(){return t}}),c.computed=s}return{esModule:o,exports:i,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.1.0",
+  "version": "1.2.0",
   "description": "Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js",
@@ -91,4 +91,5 @@ "main": "dist/v-viewer.js",
   "dependencies": {
+    "throttle-debounce": "^2.0.1",
     "viewerjs": "^1.0.0"
   }
 }

README.md

@@ -118,2 +118,14 @@ # v-viewer
 
+#### Direcitve modifiers
+##### static
+The `viewer` renderer will be executed only once after the directive binded.
+
+If you're sure the images inside this element won't change again, use it to avoid unnecessary re-render.
+
+```
+<div class="images" v-viewer.static="{inline: true}">
+  <img v-for="src in images" :src="src" :key="src">
+</div>
+```
+
 ### Usage of component
@@ -120,0 +132,0 @@ You can simply import the component and register it locally too.

src/directive.js

 import Viewer from 'viewerjs'
+import { debounce } from 'throttle-debounce'
 
 const install = (Vue, {name = 'viewer', debug = false}) => {
-  function createViewer (el, binding) {
-    el[`$${name}`] && el[`$${name}`].destroy()
+  // 使用去抖避免不必要的大量突发重建
+  const createViewer = debounce(50, (el, binding) => {
+    // nextTick执行，否则可能漏掉未渲染完的子元素
     Vue.nextTick(() => {
+      destroyViewer(el)
       const options = binding.value
       el[`$${name}`] = new Viewer(el, options)
+      log('viewer created')
     })
-  }
+  })
 
   function createObserver (el, binding) {
+    destroyObserver(el)
     const MutationObserver = global.MutationObserver || global.WebKitMutationObserver || global.MozMutationObserver
@@ -23,4 +28,23 @@ const observer = new MutationObserver(function (mutations) {
     el['$viewerMutationObserver'] = observer
+    log('observer created')
   }
 
+  function destroyViewer (el) {
+    if (!el[`$${name}`]) {
+      return
+    }
+    el[`$${name}`].destroy()
+    delete el[`$${name}`]
+    log('viewer destroyed')
+  }
+
+  function destroyObserver (el) {
+    if (!el['$viewerMutationObserver']) {
+      return
+    }
+    el['$viewerMutationObserver'].disconnect()
+    delete el['$viewerMutationObserver']
+    log('observer destroyed')
+  }
+
   function log (content) {
@@ -34,4 +58,8 @@ debug && console.log(content)
       createViewer(el, binding)
-      // 增加dom变化监听
-      createObserver(el, binding)
+
+      // 是否监听变化
+      if (!binding.modifiers.static) {
+        // 增加dom变化监听
+        createObserver(el, binding)
+      }
     },
@@ -41,4 +69,5 @@ unbind (el, binding) {
       // 销毁dom变化监听
-      el['$viewerMutationObserver'] && el['$viewerMutationObserver'].disconnect()
-      el[`$${name}`] && el[`$${name}`].destroy()
+      destroyObserver(el)
+      // 销毁viewer
+      destroyViewer(el)
     }
@@ -45,0 +74,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

457285

increased by0.81%

Lines of code

532

increased by20.36%

Number of lines in readme file

247

increased by5.11%

Worsened metrics

Dependency count

2

increased by100%

Dependency changes

• + Addedthrottle-debounce@^2.0.1

• + Addedthrottle-debounce@2.3.0(transitive)