vue-yandex-maps - npm Package Compare versions

Comparing version 0.6.8 to 0.6.9

package.json

 {
   "name": "vue-yandex-maps",
-  "version": "0.6.8",
+  "version": "0.6.9",
   "description": "Yandex Maps component for VueJS.",
@@ -5,0 +5,0 @@ "main": "vue-yandex-maps.js",

src/YMap.js

@@ -77,3 +77,3 @@ import * as utils from './utils';
         init() {
-            if (!ymaps.GeoObjectCollection) return; // if ymap isn't initialized;
+            if (!window.ymaps || !ymaps.GeoObjectCollection) return; // if ymap isn't initialized;
             let markers = [];
@@ -253,3 +253,13 @@ let myGeoObjects = new ymaps.GeoObjectCollection();
                 ),
-                this.$slots.default 
+                h(
+                    'div',
+                    {
+                        attrs: {
+                            class: 'ymap-markers'
+                        }
+                    },
+                    [
+                        this.$slots.default
+                    ]
+                ) 
             ]
@@ -259,2 +269,13 @@ )
     mounted() {
+        this.observer = new MutationObserver(function(mutations) {
+            this.myMap.destroy && this.myMap.destroy();
+            this.init();
+        }.bind(this));
+        
+        // Setup the observer
+        this.observer.observe(
+            document.querySelector('.ymap-markers'),
+            { attributes: true, childList: true, characterData: true, subtree: true }
+        );
+
         if (this.ymapEventBus.scriptIsNotAttached) {
@@ -284,12 +305,5 @@ const yandexMapScript = document.createElement('SCRIPT');
     },
-    updated() {
-        if (this.$slots.default && this.myMap.geoObjects) {
-            const markers = this.$slots.default.map(m => {
-                const props = m.componentOptions && m.componentOptions.propsData;
-                if (!props) return '';
-                return utils.setCoordsToNumeric(props.coords).join(' ');
-            });
-            utils.compareValues(markers, this.myMap.markersSnapshot, this.ymapEventBus)
-        }
+    beforeDestroy() {
+        this.observer.disconnect();
     }
 }

vue-yandex-maps.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.vueYandexMaps={})}(this,function(t){"use strict";var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},o=function(){function t(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e}}(),n=function(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);e<t.length;e++)r[e]=t[e];return r}return Array.from(t)};function a(t,r){if(t.callbacks&&"object"===e(t.callbacks))for(var o in t.callbacks)r.events.add(o,t.callbacks[o])}function i(t){return t.charAt(0).toUpperCase()+t.slice(1)}function s(t){return t.map(function(t){return Array.isArray(t)?s(t):+t})}function c(t,r){var o=[];return function t(r,n){if(r===n)return!0;if(r instanceof Date&&n instanceof Date)return+r==+n;if("object"!==(void 0===r?"undefined":e(r))||"object"!==(void 0===n?"undefined":e(n)))return!1;if(function(t,e){for(var r=o.length;r--;)if(!(o[r][0]!==t&&o[r][0]!==e||o[r][1]!==e&&o[r][1]!==t))return!0;return!1}(r,n))return!0;o.push([r,n]);var a=Object.keys(r),i=a.length;if(Object.keys(n).length!==i)return!1;for(;i--;)if(!t(r[a[i]],n[a[i]]))return!1;return!0}(t,r)}function l(t,e,r){c(t,e)||(r.rerender&&clearTimeout(r.rerender),r.rerender=setTimeout(function(){return r.initMap&&r.initMap()},10))}var u=new(function(){function t(){r(this,t),this.events={},this.ymapReady=!1,this.scriptIsNotAttached=!0}return o(t,[{key:"$on",value:function(t,e){var r=this;return this.events[t]||(this.events[t]=[]),this.events[t].push(e),function(){r.events[t]=r.events[t].filter(function(t){return e!==t})}}},{key:"$emit",value:function(t,e){var r=this.events[t];r&&r.forEach(function(t){return t(e)})}}]),t}()),m=["fullscreenControl","geolocationControl","routeEditor","rulerControl","searchControl","trafficControl","typeSelector","zoomControl"];function p(t){return 0===t.filter(function(t){return![].concat(m,["default"]).includes(t)}).length}var f={data:function(){return{ymapEventBus:u,ymapId:"yandexMap"+Math.round(1e5*Math.random()),myMap:{}}},props:{coords:{type:Array,validator:function(t){return!t.filter(function(t){return isNaN(t)}).length},required:!0},zoom:{validator:function(t){return!isNaN(t)},default:18},clusterOptions:{type:Object,default:function(){return{}}},clusterCallbacks:{type:Object,default:function(){return{}}},behaviors:{type:Array,default:function(){return["default"]}},controls:{type:Array,default:function(){return["default"]},validator:function(t){return p(t)}},detailedControls:{type:Object,validator:function(t){return p(Object.keys(t))}},scrollZoom:{type:Boolean,default:!0},zoomControl:Object,mapType:{type:String,default:"map",validator:function(t){return["map","satellite","hybrid"].includes(t)}},placemarks:{type:Array,default:function(){return[]}}},computed:{coordinates:function(){return this.coords.map(function(t){return+t})}},methods:{init:function(){var t=this;if(ymaps.GeoObjectCollection){var e=[],r=new ymaps.GeoObjectCollection;if(this.myMap=new ymaps.Map(this.ymapId,{center:this.coordinates,zoom:+this.zoom,behaviors:this.behaviors,controls:this.controls,type:"yandex#"+this.mapType}),this.zoomControl&&(this.myMap.controls.remove("zoomControl"),this.myMap.controls.add(new ymaps.control.ZoomControl(this.zoomControl))),this.detailedControls){Object.keys(this.detailedControls).forEach(function(e){t.myMap.controls.remove(e);var r=ymaps.control.storage.get(e);t.myMap.controls.add(new r(t.detailedControls[e]))})}!1===this.scrollZoom&&this.myMap.behaviors.disable("scrollZoom");for(var o=this.$slots.default&&this.$slots.default.map(function(t){var e=t.componentOptions&&t.componentOptions.propsData;if(e){var r={};if(e.balloonTemplate){r={balloonContentLayout:ymaps.templateLayoutFactory.createClass(e.balloonTemplate)}}var o={markerId:e.markerId,markerType:e.markerType,coords:s(e.coords),hintContent:e.hintContent,markerFill:e.markerFill,circleRadius:+e.circleRadius,clusterName:e.clusterName,markerStroke:e.markerStroke,balloon:e.balloon,balloonOptions:r};return e.icon&&"default#image"===e.icon.layout?(o.iconLayout=e.icon.layout,o.iconImageHref=e.icon.imageHref,o.iconImageSize=e.icon.imageSize,o.iconImageOffset=e.icon.imageOffset):o.icon=e.icon,e.callbacks&&(o.callbacks=e.callbacks),e.data&&(o.data=e.data),o}}).filter(function(t){return t&&t.markerType})||[],c=0;c<o.length;c++){var l=o[c],u=i(l.markerType),m={hintContent:l.hintContent,iconContent:l.icon&&l.icon.content},p=l.balloon?{balloonContentHeader:l.balloon.header,balloonContentBody:l.balloon.body,balloonContentFooter:l.balloon.footer}:{};m=Object.assign(m,p);var f=l.iconLayout?{iconLayout:l.iconLayout,iconImageHref:l.iconImageHref,iconImageSize:l.iconImageSize,iconImageOffset:l.iconImageOffset}:{preset:l.icon&&"islands#"+(b=l,(b.icon.color||"blue")+(b.icon.glyph?i(b.icon.glyph):b.icon.content?"Stretchy":""))+"Icon"},d=l.markerStroke?{strokeColor:l.markerStroke.color||"0066ffff",strokeOpacity:parseFloat(l.markerStroke.opacity)>=0?parseFloat(l.markerStroke.opacity):1,strokeStyle:l.markerStroke.style,strokeWidth:parseFloat(l.markerStroke.width)>=0?parseFloat(l.markerStroke.width):1}:{},y=l.markerFill?{fill:l.markerFill.enabled||!0,fillColor:l.markerFill.color||"0066ff99",fillOpacity:parseFloat(l.markerFill.opacity)>=0?parseFloat(l.markerFill.opacity):1,fillImageHref:l.markerFill.imageHref||""}:{};f=Object.assign(f,d,y,l.balloonOptions),"Circle"===u&&(l.coords=[l.coords,l.circleRadius]);var h=new ymaps[u](l.coords,m,f);a(l,h),h.clusterName=l.clusterName,h.properties.set("markerId",l.markerId),e.push(h),r.add(h)}var b;this.placemarks&&this.placemarks.forEach(function(t){var o=new ymaps.Placemark(t.coords,t.properties||{},t.options||{});a(t,o),t.clusterName&&(o.clusterName=t.clusterName,e.push(o)),r.add(o)}),this.myMap.markersSnapshot=r.toArray().map(function(t){return t.geometry.getBounds()[0].join(" ")}),this.myMap.geoObjects.add(r);var v={options:this.clusterOptions,callbacks:this.clusterCallbacks,map:this.myMap};!function(t,e){var r=e.options,o=e.callbacks,a=e.map,i={},s=!0,c=!1,l=void 0;try{for(var u,m=t[Symbol.iterator]();!(s=(u=m.next()).done);s=!0){var p=u.value;p.clusterName&&(i[p.clusterName]=i[p.clusterName]?[].concat(n(i[p.clusterName]),[p]):[p])}}catch(t){c=!0,l=t}finally{try{!s&&m.return&&m.return()}finally{if(c)throw l}}for(var f in i){var d=r[f]||{},y=o[f]||{},h=d.layout;d.clusterBalloonItemContentLayout=ymaps.templateLayoutFactory.createClass(h);var b=new ymaps.Clusterer(d);for(var v in y)b.events.add(v,y[v]);b.add(i[f]),a.geoObjects.add(b)}}(e,v),this.$emit("map-was-initialized",this.myMap)}}},watch:{coordinates:function(t){this.myMap.setCenter&&this.myMap.setCenter(t,this.zoom)},placemarks:function(){window.ymaps&&(this.myMap.destroy&&this.myMap.destroy(),this.init())}},render:function(t){return t("section",{class:"ymap-container"},[t("div",{attrs:{id:this.ymapId,class:"ymap-body"}}),this.$slots.default])},mounted:function(){var t=this;if(this.ymapEventBus.scriptIsNotAttached){var e=document.createElement("SCRIPT");e.setAttribute("src","https://api-maps.yandex.ru/2.1/?lang=ru_RU"),e.setAttribute("async",""),e.setAttribute("defer",""),document.body.appendChild(e),this.ymapEventBus.scriptIsNotAttached=!1,e.onload=function(){t.ymapEventBus.ymapReady=!0,t.ymapEventBus.$emit("scriptIsLoaded")}}this.ymapEventBus.ymapReady?ymaps.ready(this.init):this.ymapEventBus.$on("scriptIsLoaded",function(){t.ymapEventBus.initMap=function(){t.myMap.destroy(),t.init()},ymaps.ready(t.init)})},updated:function(){if(this.$slots.default&&this.myMap.geoObjects){l(this.$slots.default.map(function(t){var e=t.componentOptions&&t.componentOptions.propsData;return e?s(e.coords).join(" "):""}),this.myMap.markersSnapshot,this.ymapEventBus)}}},d={data:function(){return{ymapEventBus:u}},props:{coords:{type:Array,required:!0},hintContent:String,icon:Object,balloon:Object,markerType:{type:String,required:!0},markerFill:Object,markerStroke:Object,clusterName:String,circleRadius:{validator:function(t){return!isNaN(t)},default:1e3},callbacks:Object,data:Object,balloonTemplate:String,markerId:[String,Number]},render:function(){},mounted:function(){var t=this;for(var e in this.$props)this.$watch(e,function(e,r){return l(e,r,t.ymapEventBus)})}};f.install=function(t){t.component("yandex-map",f),t.component("ymap-marker",d)};var y=f,h=d;t.yandexMap=y,t.ymapMarker=h,t.default=f,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e(t.vueYandexMaps={})}(this,function(t){"use strict";var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},r=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},o=function(){function t(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e}}(),n=function(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);e<t.length;e++)r[e]=t[e];return r}return Array.from(t)};function a(t,r){if(t.callbacks&&"object"===e(t.callbacks))for(var o in t.callbacks)r.events.add(o,t.callbacks[o])}function i(t){return t.charAt(0).toUpperCase()+t.slice(1)}function s(t,r){var o=[];return function t(r,n){if(r===n)return!0;if(r instanceof Date&&n instanceof Date)return+r==+n;if("object"!==(void 0===r?"undefined":e(r))||"object"!==(void 0===n?"undefined":e(n)))return!1;if(function(t,e){for(var r=o.length;r--;)if(!(o[r][0]!==t&&o[r][0]!==e||o[r][1]!==e&&o[r][1]!==t))return!0;return!1}(r,n))return!0;o.push([r,n]);var a=Object.keys(r),i=a.length;if(Object.keys(n).length!==i)return!1;for(;i--;)if(!t(r[a[i]],n[a[i]]))return!1;return!0}(t,r)}var c=new(function(){function t(){r(this,t),this.events={},this.ymapReady=!1,this.scriptIsNotAttached=!0}return o(t,[{key:"$on",value:function(t,e){var r=this;return this.events[t]||(this.events[t]=[]),this.events[t].push(e),function(){r.events[t]=r.events[t].filter(function(t){return e!==t})}}},{key:"$emit",value:function(t,e){var r=this.events[t];r&&r.forEach(function(t){return t(e)})}}]),t}()),l=["fullscreenControl","geolocationControl","routeEditor","rulerControl","searchControl","trafficControl","typeSelector","zoomControl"];function u(t){return 0===t.filter(function(t){return![].concat(l,["default"]).includes(t)}).length}var m={data:function(){return{ymapEventBus:c,ymapId:"yandexMap"+Math.round(1e5*Math.random()),myMap:{}}},props:{coords:{type:Array,validator:function(t){return!t.filter(function(t){return isNaN(t)}).length},required:!0},zoom:{validator:function(t){return!isNaN(t)},default:18},clusterOptions:{type:Object,default:function(){return{}}},clusterCallbacks:{type:Object,default:function(){return{}}},behaviors:{type:Array,default:function(){return["default"]}},controls:{type:Array,default:function(){return["default"]},validator:function(t){return u(t)}},detailedControls:{type:Object,validator:function(t){return u(Object.keys(t))}},scrollZoom:{type:Boolean,default:!0},zoomControl:Object,mapType:{type:String,default:"map",validator:function(t){return["map","satellite","hybrid"].includes(t)}},placemarks:{type:Array,default:function(){return[]}}},computed:{coordinates:function(){return this.coords.map(function(t){return+t})}},methods:{init:function(){var t=this;if(window.ymaps&&ymaps.GeoObjectCollection){var e=[],r=new ymaps.GeoObjectCollection;if(this.myMap=new ymaps.Map(this.ymapId,{center:this.coordinates,zoom:+this.zoom,behaviors:this.behaviors,controls:this.controls,type:"yandex#"+this.mapType}),this.zoomControl&&(this.myMap.controls.remove("zoomControl"),this.myMap.controls.add(new ymaps.control.ZoomControl(this.zoomControl))),this.detailedControls){Object.keys(this.detailedControls).forEach(function(e){t.myMap.controls.remove(e);var r=ymaps.control.storage.get(e);t.myMap.controls.add(new r(t.detailedControls[e]))})}!1===this.scrollZoom&&this.myMap.behaviors.disable("scrollZoom");for(var o=this.$slots.default&&this.$slots.default.map(function(t){var e=t.componentOptions&&t.componentOptions.propsData;if(e){var r={};if(e.balloonTemplate){r={balloonContentLayout:ymaps.templateLayoutFactory.createClass(e.balloonTemplate)}}var o={markerId:e.markerId,markerType:e.markerType,coords:function t(e){return e.map(function(e){return Array.isArray(e)?t(e):+e})}(e.coords),hintContent:e.hintContent,markerFill:e.markerFill,circleRadius:+e.circleRadius,clusterName:e.clusterName,markerStroke:e.markerStroke,balloon:e.balloon,balloonOptions:r};return e.icon&&"default#image"===e.icon.layout?(o.iconLayout=e.icon.layout,o.iconImageHref=e.icon.imageHref,o.iconImageSize=e.icon.imageSize,o.iconImageOffset=e.icon.imageOffset):o.icon=e.icon,e.callbacks&&(o.callbacks=e.callbacks),e.data&&(o.data=e.data),o}}).filter(function(t){return t&&t.markerType})||[],s=0;s<o.length;s++){var c=o[s],l=i(c.markerType),u={hintContent:c.hintContent,iconContent:c.icon&&c.icon.content},m=c.balloon?{balloonContentHeader:c.balloon.header,balloonContentBody:c.balloon.body,balloonContentFooter:c.balloon.footer}:{};u=Object.assign(u,m);var p=c.iconLayout?{iconLayout:c.iconLayout,iconImageHref:c.iconImageHref,iconImageSize:c.iconImageSize,iconImageOffset:c.iconImageOffset}:{preset:c.icon&&"islands#"+(h=c,(h.icon.color||"blue")+(h.icon.glyph?i(h.icon.glyph):h.icon.content?"Stretchy":""))+"Icon"},f=c.markerStroke?{strokeColor:c.markerStroke.color||"0066ffff",strokeOpacity:parseFloat(c.markerStroke.opacity)>=0?parseFloat(c.markerStroke.opacity):1,strokeStyle:c.markerStroke.style,strokeWidth:parseFloat(c.markerStroke.width)>=0?parseFloat(c.markerStroke.width):1}:{},d=c.markerFill?{fill:c.markerFill.enabled||!0,fillColor:c.markerFill.color||"0066ff99",fillOpacity:parseFloat(c.markerFill.opacity)>=0?parseFloat(c.markerFill.opacity):1,fillImageHref:c.markerFill.imageHref||""}:{};p=Object.assign(p,f,d,c.balloonOptions),"Circle"===l&&(c.coords=[c.coords,c.circleRadius]);var y=new ymaps[l](c.coords,u,p);a(c,y),y.clusterName=c.clusterName,y.properties.set("markerId",c.markerId),e.push(y),r.add(y)}var h;this.placemarks&&this.placemarks.forEach(function(t){var o=new ymaps.Placemark(t.coords,t.properties||{},t.options||{});a(t,o),t.clusterName&&(o.clusterName=t.clusterName,e.push(o)),r.add(o)}),this.myMap.markersSnapshot=r.toArray().map(function(t){return t.geometry.getBounds()[0].join(" ")}),this.myMap.geoObjects.add(r);var b={options:this.clusterOptions,callbacks:this.clusterCallbacks,map:this.myMap};!function(t,e){var r=e.options,o=e.callbacks,a=e.map,i={},s=!0,c=!1,l=void 0;try{for(var u,m=t[Symbol.iterator]();!(s=(u=m.next()).done);s=!0){var p=u.value;p.clusterName&&(i[p.clusterName]=i[p.clusterName]?[].concat(n(i[p.clusterName]),[p]):[p])}}catch(t){c=!0,l=t}finally{try{!s&&m.return&&m.return()}finally{if(c)throw l}}for(var f in i){var d=r[f]||{},y=o[f]||{},h=d.layout;d.clusterBalloonItemContentLayout=ymaps.templateLayoutFactory.createClass(h);var b=new ymaps.Clusterer(d);for(var v in y)b.events.add(v,y[v]);b.add(i[f]),a.geoObjects.add(b)}}(e,b),this.$emit("map-was-initialized",this.myMap)}}},watch:{coordinates:function(t){this.myMap.setCenter&&this.myMap.setCenter(t,this.zoom)},placemarks:function(){window.ymaps&&(this.myMap.destroy&&this.myMap.destroy(),this.init())}},render:function(t){return t("section",{class:"ymap-container"},[t("div",{attrs:{id:this.ymapId,class:"ymap-body"}}),t("div",{attrs:{class:"ymap-markers"}},[this.$slots.default])])},mounted:function(){var t=this;if(this.observer=new MutationObserver(function(t){this.myMap.destroy&&this.myMap.destroy(),this.init()}.bind(this)),this.observer.observe(document.querySelector(".ymap-markers"),{attributes:!0,childList:!0,characterData:!0,subtree:!0}),this.ymapEventBus.scriptIsNotAttached){var e=document.createElement("SCRIPT");e.setAttribute("src","https://api-maps.yandex.ru/2.1/?lang=ru_RU"),e.setAttribute("async",""),e.setAttribute("defer",""),document.body.appendChild(e),this.ymapEventBus.scriptIsNotAttached=!1,e.onload=function(){t.ymapEventBus.ymapReady=!0,t.ymapEventBus.$emit("scriptIsLoaded")}}this.ymapEventBus.ymapReady?ymaps.ready(this.init):this.ymapEventBus.$on("scriptIsLoaded",function(){t.ymapEventBus.initMap=function(){t.myMap.destroy(),t.init()},ymaps.ready(t.init)})},beforeDestroy:function(){this.observer.disconnect()}},p={data:function(){return{ymapEventBus:c}},props:{coords:{type:Array,required:!0},hintContent:String,icon:Object,balloon:Object,markerType:{type:String,required:!0},markerFill:Object,markerStroke:Object,clusterName:String,circleRadius:{validator:function(t){return!isNaN(t)},default:1e3},callbacks:Object,data:Object,balloonTemplate:String,markerId:[String,Number]},render:function(){},mounted:function(){var t=this;for(var e in this.$props)this.$watch(e,function(e,r){return o=e,n=r,a=t.ymapEventBus,void(s(o,n)||(a.rerender&&clearTimeout(a.rerender),a.rerender=setTimeout(function(){return a.initMap&&a.initMap()},10)));var o,n,a})}};m.install=function(t){t.component("yandex-map",m),t.component("ymap-marker",p)};var f=m,d=p;t.yandexMap=f,t.ymapMarker=d,t.default=m,Object.defineProperty(t,"__esModule",{value:!0})});

No alert changes

Improved metrics

Total package byte prevSize

36872

increased by1.12%

Lines of code

495

increased by2.7%

No dependency changes