v-viewer - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

dist/v-viewer.js

@@ -90,3 +90,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 "use strict";
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_viewerjs__ = __webpack_require__(0);
+/* WEBPACK VAR INJECTION */(function(global) {/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_viewerjs__ = __webpack_require__(0);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_viewerjs___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_viewerjs__);
@@ -109,2 +109,15 @@
 
+  function createObserver(el, binding) {
+    var MutationObserver = global.MutationObserver || global.WebKitMutationObserver || global.MozMutationObserver;
+    var observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        log('viewer mutation:' + mutation.type);
+        createViewer(el, binding);
+      });
+    });
+    var config = { attributes: true, childList: true, characterData: true, subtree: true };
+    observer.observe(el, config);
+    el['$viewerMutationObserver'] = observer;
+  }
+
   function log(content) {
@@ -117,14 +130,10 @@ debug && console.log(content);
       log('viewer bind');
-    },
+      createViewer(el, binding);
 
-    inserted: function inserted(el, binding) {
-      log('viewer inserted');
-      createViewer(el, binding);
+      createObserver(el, binding);
     },
-    componentUpdated: function componentUpdated(el, binding) {
-      log('viewer componentUpdated');
-      createViewer(el, binding);
-    },
     unbind: function unbind(el, binding) {
       log('viewer unbind');
+
+      el['$viewerMutationObserver'] && el['$viewerMutationObserver'].disconnect();
       el['$' + name] && el['$' + name].destroy();
@@ -138,2 +147,3 @@ }
 });
+/* WEBPACK VAR INJECTION */}.call(__webpack_exports__, __webpack_require__(6)))
 
@@ -182,7 +192,7 @@ /***/ }),
 
-var Component = __webpack_require__(6)(
+var Component = __webpack_require__(7)(
   /* script */
   __webpack_require__(5),
   /* template */
-  __webpack_require__(7),
+  __webpack_require__(8),
   /* scopeId */
@@ -330,2 +340,22 @@ null,
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
+var g;
+
+g = function () {
+	return this;
+}();
+
+try {
+	g = g || Function("return this")() || (1, eval)("this");
+} catch (e) {
+	if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "object") g = window;
+}
+
+module.exports = g;
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports) {
+
 // this module is a runtime utility for cleaner component module output and will
@@ -385,3 +415,3 @@ // be included in the final webpack user bundle
 /***/ }),
-/* 7 */
+/* 8 */
 /***/ (function(module, exports, __webpack_require__) {
@@ -388,0 +418,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";var i=n(0),r=n.n(i),o=function(e,t){function n(t,n){t["$"+u]&&t["$"+u].destroy(),e.nextTick(function(){var e=n.value;t["$"+u]=new r.a(t,e)})}function i(e){s&&console.log(e)}var o=t.name,u=void 0===o?"viewer":o,c=t.debug,s=void 0!==c&&c;e.directive("viewer",{bind:function(e,t){i("viewer bind")},inserted:function(e,t){i("viewer inserted"),n(e,t)},componentUpdated:function(e,t){i("viewer componentUpdated"),n(e,t)},unbind:function(e,t){i("viewer unbind"),e["$"+u]&&e["$"+u].destroy()}})};t.a={install:o}},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(6)(n(5),n(7),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";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){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 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:[]}}])});

package.json

 {
   "name": "v-viewer",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "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

@@ -8,6 +8,14 @@ # v-viewer
 
-## [JSFiddle demo](https://jsfiddle.net/mirari/n1L0gxtv/)
+## Quick Example
+- [CodePen](https://codepen.io/mirari/pen/PePrVq)
+- [JSFiddle](https://jsfiddle.net/mirari/n1L0gxtv/)
 
 ## [中文文档](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/)
 
+## Migration from 0.x
+- The only change you have to make is to manually import the `.css` file:
+```
+import 'viewerjs/dist/viewer.css'
+```
+
 ## Installation 
@@ -14,0 +22,0 @@ Install from GitHub via NPM

src/directive.js

@@ -12,2 +12,15 @@ import Viewer from 'viewerjs'
 
+  function createObserver (el, binding) {
+    const MutationObserver = global.MutationObserver || global.WebKitMutationObserver || global.MozMutationObserver
+    const observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        log('viewer mutation:' + mutation.type)
+        createViewer(el, binding)
+      })
+    })
+    const config = { attributes: true, childList: true, characterData: true, subtree: true }
+    observer.observe(el, config)
+    el['$viewerMutationObserver'] = observer
+  }
+
   function log (content) {
@@ -20,13 +33,10 @@ debug && console.log(content)
       log('viewer bind')
-    },
-    inserted: function (el, binding) {
-      log('viewer inserted')
       createViewer(el, binding)
+      // 增加dom变化监听
+      createObserver(el, binding)
     },
-    componentUpdated: function (el, binding) {
-      log('viewer componentUpdated')
-      createViewer(el, binding)
-    },
     unbind (el, binding) {
       log('viewer unbind')
+      // 销毁dom变化监听
+      el['$viewerMutationObserver'] && el['$viewerMutationObserver'].disconnect()
       el[`$${name}`] && el[`$${name}`].destroy()
@@ -33,0 +43,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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances 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

453599

increased by0.56%

Lines of code

442

increased by7.54%

Number of lines in readme file

235

increased by3.52%

Worsened metrics

Number of medium supply chain risk alerts

4

increased byInfinity%

No dependency changes