From 75a12c32551cb434dfe2287ea64589a37550ea16 Mon Sep 17 00:00:00 2001 From: dmitriy Date: Wed, 27 Jan 2016 08:39:25 +0300 Subject: [PATCH 1/4] opportunity set custom viewFile in widget --- sources/widgets/MapInputWidget.php | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/sources/widgets/MapInputWidget.php b/sources/widgets/MapInputWidget.php index 09111f8..dc590ea 100644 --- a/sources/widgets/MapInputWidget.php +++ b/sources/widgets/MapInputWidget.php @@ -29,6 +29,8 @@ class MapInputWidget extends \yii\widgets\InputWidget public $enableSearchBar = true; + public $viewFile = 'MapInputWidget'; + public function run() { @@ -38,7 +40,7 @@ public function run() $this->configureAssetBundle(); return $this->render( - 'MapInputWidget', + $this->viewFile, [ 'id' => $this->getId(), 'model' => $this->model, From c0dafaf149c0867c07f6ea9262e821abcb58a602 Mon Sep 17 00:00:00 2001 From: dmitriy Date: Wed, 27 Jan 2016 09:12:18 +0300 Subject: [PATCH 2/4] move init script to viewFile --- sources/web/js/map-input-widget.js | 20 +---- sources/web/js/map-input-widget.min.js | 2 +- sources/widgets/views/MapInputWidget.php | 104 +++++++++++++++-------- 3 files changed, 69 insertions(+), 57 deletions(-) diff --git a/sources/web/js/map-input-widget.js b/sources/web/js/map-input-widget.js index ee7882f..4c0b01d 100644 --- a/sources/web/js/map-input-widget.js +++ b/sources/web/js/map-input-widget.js @@ -336,22 +336,4 @@ function MapInputWidget ( widget ) }; -}; - -// A global instance of map inputs manager. -// Use it to get references to widget instances. -var mapInputWidgetManager; - -$(window).load -( - function() - { - - // Create an instance of widget manager - mapInputWidgetManager = new MapInputWidgetManager(); - - // Initialize widgets - mapInputWidgetManager.initializeWidgets(); - - } -); +}; \ No newline at end of file diff --git a/sources/web/js/map-input-widget.min.js b/sources/web/js/map-input-widget.min.js index 96caec6..7303625 100644 --- a/sources/web/js/map-input-widget.min.js +++ b/sources/web/js/map-input-widget.min.js @@ -1 +1 @@ -function MapInputWidgetManager(){const b=".kolyunya-map-input-widget";var a=this;var c=Array();var e=function(f){if(!$(f).data("initialized")){var g=new MapInputWidget(f);g.initialize();return g}return null};var d=function(g){var f=g.getId();c[f]=g};this.initializeWidgets=function(){$(b).each(function(f,g){var h=e(g);if(h){d(h)}})};this.getWidget=function(f){var g=c[f];return g}}function MapInputWidget(f){const p="input.kolyunya-map-input-widget-input";const b="input.kolyunya-map-input-widget-search-bar";const c="div.kolyunya-map-input-widget-canvas";var l=this;var j;var m;var d;var s;var r=function(){j=$(f).find(p).get(0);m=$(f).find(b).get(0);d=$(f).find(c).get(0)};var a=function(){s=new google.maps.Map(d,{mapTypeId:$(f).data("map-type"),center:q(),zoom:$(f).data("zoom"),styles:[{featureType:"poi",stylers:[{visibility:"off",},],},],mapTypeControlOptions:{mapTypeIds:[],},});google.maps.event.addListener(s,"click",function(u){l.setPosition({latitude:u.latLng.lat(),longitude:u.latLng.lng(),})})};var h=function(){var u=e();l.setPosition(u);$(f).data("initialized",true)};var t=function(){var u=$(f).data("enable-search-bar");var v=!u;$(m).prop("hidden",v);searchBarAutocomplete=new google.maps.places.Autocomplete(m);s.controls[google.maps.ControlPosition.TOP_LEFT].push(m);google.maps.event.addListener(searchBarAutocomplete,"place_changed",function(){var w=this.getPlace();var x=w.geometry;if(x){var y=x.location;l.setPosition(y)}})};var g=function(v){var w=i();var u=n(v);w=w.replace(/%latitude%/g,u.lat());w=w.replace(/%longitude%/g,u.lng());return w};var k=function(){var u=$(j).prop("value")!="";return u};var e=function(){var D;var z=i();var B=$(j).prop("value");if(B!==""){var x=z.indexOf("%latitude%");var A=z.indexOf("%longitude%");var v=x "width: $width; height: $height;", 'id' => $id, 'data' => - [ - 'latitude' => $latitude, - 'longitude' => $longitude, - 'zoom' => $zoom, - 'pattern' => $pattern, - 'map-type' => $mapType, - 'animate-marker' => $animateMarker, - 'align-map-center' => $alignMapCenter, - 'enable-search-bar' => $enableSearchBar, - ], + [ + 'latitude' => $latitude, + 'longitude' => $longitude, + 'zoom' => $zoom, + 'pattern' => $pattern, + 'map-type' => $mapType, + 'animate-marker' => $animateMarker, + 'align-map-center' => $alignMapCenter, + 'enable-search-bar' => $enableSearchBar, + ], ] ); - // The actual hidden input - echo Html::activeHiddenInput( - $model, - $attribute, - [ - 'class' => 'kolyunya-map-input-widget-input', - ] - ); - - // Search bar input - echo Html::input( - 'text', - null, - null, - [ - 'class' => 'kolyunya-map-input-widget-search-bar', - ] - ); - - // Map canvas - echo Html::tag( - 'div', - '', - [ - 'class' => 'kolyunya-map-input-widget-canvas', - ] - ); +// The actual hidden input +echo Html::activeHiddenInput( + $model, + $attribute, + [ + 'class' => 'kolyunya-map-input-widget-input', + ] +); + +// Search bar input +echo Html::input( + 'text', + null, + null, + [ + 'class' => 'kolyunya-map-input-widget-search-bar', + ] +); + +// Map canvas +echo Html::tag( + 'div', + '', + [ + 'class' => 'kolyunya-map-input-widget-canvas', + ] +); // [END] - Map input widget container echo Html::endTag('div'); + +$js = <<registerJs($js, View::POS_LOAD); \ No newline at end of file From 6dd33f8e652e2868cdaf561d478343ba8be3a638 Mon Sep 17 00:00:00 2001 From: dmitriy Date: Wed, 27 Jan 2016 10:43:05 +0300 Subject: [PATCH 3/4] add jQuery triggers and getMap method --- sources/web/js/map-input-widget.js | 7 +++++++ sources/web/js/map-input-widget.min.js | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/sources/web/js/map-input-widget.js b/sources/web/js/map-input-widget.js index 4c0b01d..b2d7d49 100644 --- a/sources/web/js/map-input-widget.js +++ b/sources/web/js/map-input-widget.js @@ -248,10 +248,12 @@ function MapInputWidget ( widget ) // Initializes widget this.initialize = function() { + $(widget).trigger('initialize:before'); initializeComponents(); initializeMap(); initializeWidget(); initializeSearchBar(); + $(widget).trigger('initialize:after',{'MapInputWidget':this}); }; // Returns widget identifier @@ -335,5 +337,10 @@ function MapInputWidget ( widget ) map.setZoom(zoom); }; + // Get google map + this.getMap = function() + { + return map; + } }; \ No newline at end of file diff --git a/sources/web/js/map-input-widget.min.js b/sources/web/js/map-input-widget.min.js index 7303625..306f824 100644 --- a/sources/web/js/map-input-widget.min.js +++ b/sources/web/js/map-input-widget.min.js @@ -1 +1 @@ -function MapInputWidgetManager(){const b=".kolyunya-map-input-widget";var a=this;var c=Array();var e=function(f){if(!$(f).data("initialized")){var g=new MapInputWidget(f);g.initialize();return g}return null};var d=function(g){var f=g.getId();c[f]=g};this.initializeWidgets=function(){$(b).each(function(f,g){var h=e(g);if(h){d(h)}})};this.getWidget=function(f){var g=c[f];return g}}function MapInputWidget(f){const p="input.kolyunya-map-input-widget-input";const b="input.kolyunya-map-input-widget-search-bar";const c="div.kolyunya-map-input-widget-canvas";var l=this;var j;var m;var d;var s;var r=function(){j=$(f).find(p).get(0);m=$(f).find(b).get(0);d=$(f).find(c).get(0)};var a=function(){s=new google.maps.Map(d,{mapTypeId:$(f).data("map-type"),center:q(),zoom:$(f).data("zoom"),styles:[{featureType:"poi",stylers:[{visibility:"off",},],},],mapTypeControlOptions:{mapTypeIds:[],},});google.maps.event.addListener(s,"click",function(u){l.setPosition({latitude:u.latLng.lat(),longitude:u.latLng.lng(),})})};var h=function(){var u=e();l.setPosition(u);$(f).data("initialized",true)};var t=function(){var u=$(f).data("enable-search-bar");var v=!u;$(m).prop("hidden",v);searchBarAutocomplete=new google.maps.places.Autocomplete(m);s.controls[google.maps.ControlPosition.TOP_LEFT].push(m);google.maps.event.addListener(searchBarAutocomplete,"place_changed",function(){var w=this.getPlace();var x=w.geometry;if(x){var y=x.location;l.setPosition(y)}})};var g=function(v){var w=i();var u=n(v);w=w.replace(/%latitude%/g,u.lat());w=w.replace(/%longitude%/g,u.lng());return w};var k=function(){var u=$(j).prop("value")!="";return u};var e=function(){var D;var z=i();var B=$(j).prop("value");if(B!==""){var x=z.indexOf("%latitude%");var A=z.indexOf("%longitude%");var v=xa,u=r?0:1,l=r?1:0,p=e.match(/-?\d+(\.\d+)?/g)[u],d=e.match(/-?\d+(\.\d+)?/g)[l];t=new google.maps.LatLng(p,d)}else t=null;return t},v=function(){var n=$(t).data("latitude"),e=$(t).data("longitude"),a=new google.maps.LatLng(n,e);return a},h=function(){var t;return t=f()?m():v()},y=function(){var n=$(t).data("pattern");return n},L=function(t){var n;if(void 0!==t.latitude&&void 0!==t.longitude){var e=t.latitude,a=t.longitude;n=new google.maps.LatLng(e,a)}else n=t;return n};this.initialize=function(){$(t).trigger("initialize:before"),p(),d(),g(),s(),$(t).trigger("initialize:after",{MapInputWidget:this})},this.getId=function(){var n=$(t).prop("id");return n},this.setPosition=function(n){if(u.marker&&u.marker.setMap(null),null===n)return void $(i).prop("disabled",!0);$(i).prop("disabled",!1);var e=L(n);1===$(t).data("align-map-center")&&u.panTo(e);var a=null;1===$(t).data("animate-marker")&&(a=google.maps.Animation.DROP),u.marker=new google.maps.Marker({map:u,position:e,draggable:!0,animation:a}),google.maps.event.addListener(u.marker,"dragend",function(){l.setPosition(this.getPosition())});var o=($(t).data("pattern"),c(e));$(i).prop("value",o)},this.panTo=function(t){var n=L(t);u.panTo(n)},this.setZoom=function(t){u.setZoom(t)},this.getMap=function(){return u}} \ No newline at end of file From 46fd2bd3d50e65e551027ac5a1ac462814dc7104 Mon Sep 17 00:00:00 2001 From: dmitriy Date: Wed, 27 Jan 2016 15:14:21 +0300 Subject: [PATCH 4/4] improve js --- sources/web/js/map-input-widget.js | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/sources/web/js/map-input-widget.js b/sources/web/js/map-input-widget.js index b2d7d49..0e69ccc 100644 --- a/sources/web/js/map-input-widget.js +++ b/sources/web/js/map-input-widget.js @@ -219,7 +219,7 @@ function MapInputWidget ( widget ) var getPattern = function() { - var pattern = $(widget).data('pattern'); + var pattern = $(widget).attr('data-pattern').toString(); return pattern; }; @@ -248,12 +248,19 @@ function MapInputWidget ( widget ) // Initializes widget this.initialize = function() { - $(widget).trigger('initialize:before'); + + var eventInitializeBefore = jQuery.Event("initializeBefore"); + eventInitializeBefore.MapInputWidget = this; + $(widget).trigger(eventInitializeBefore); + initializeComponents(); initializeMap(); initializeWidget(); initializeSearchBar(); - $(widget).trigger('initialize:after',{'MapInputWidget':this}); + + var eventInitializeAfter = jQuery.Event("initializeAfter"); + eventInitializeAfter.MapInputWidget = this; + $(widget).trigger(eventInitializeAfter); }; // Returns widget identifier @@ -268,7 +275,6 @@ function MapInputWidget ( widget ) // Sets marker position to the corresponding point. this.setPosition = function ( pointData ) { - if ( map.marker ) { map.marker.setMap(null); @@ -319,8 +325,13 @@ function MapInputWidget ( widget ) ); var pattern = $(widget).data('pattern'); - var pointString = makePointString(point); - $(input).prop('value',pointString); + + var event = jQuery.Event("makePoint"); + event.pointString = makePointString(point); + event.MapInputWidget = this; + $(widget).trigger(event); + + $(input).prop('value', event.pointString); };