Merge pull request #2557 from camptocamp/on-init

Add new on-init callback to gmf.searchDirective
camptocamp · May 1, 2017 · 2f98a74 · 2f98a74
2 parents 764201f + d295731
commit 2f98a74
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 3 deletions.
diff --git a/contribs/gmf/examples/search.html b/contribs/gmf/examples/search.html
@@ -11,6 +11,9 @@
     <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.css" type="text/css">
     <link rel="stylesheet" href="../../../third-party/jquery-ui/jquery-ui.min.css">
     <style>
+      #message {
+        width: 300px;
+      }
       .ngeo-colorpicker-palette {
         border-collapse: separate;
         border-spacing: 0;
@@ -159,11 +162,13 @@
         gmf-search-input-value="ctrl.inputValue"
         gmf-search-colorchooser="true"
         gmf-search-placeholder="Search for « Laus » for example…"
-        gmf-search-clearbutton="true">
+        gmf-search-clearbutton="true"
+        gmf-search-on-init="ctrl.searchIsReady()">
       </gmf-search>
       <p id="desc">This example shows how to use the <code>gmf-search</code> directive, which
       is based on Twitter's <code>typeahead</code> component.</p>
       <p>You typed: {{ctrl.inputValue}}</p>
+      <div id="message"></div>
     </div>
     <script src="../../../node_modules/jquery/dist/jquery.js"></script>
     <script src="../../../third-party/jquery-ui/jquery-ui.min.js"></script>

diff --git a/contribs/gmf/examples/search.js b/contribs/gmf/examples/search.js
@@ -3,6 +3,7 @@ goog.provide('gmfapp.search');
 /** @suppress {extraRequire} */
 goog.require('gmf.mapDirective');
 goog.require('ngeo.FeatureOverlayMgr');
+goog.require('ngeo.Notification');
 /** @suppress {extraRequire} */
 goog.require('ngeo.proj.EPSG21781');
 /** @suppress {extraRequire} */
@@ -28,10 +29,11 @@ gmfapp.module.value('gmfTreeUrl',
 /**
  * @param {gmf.Themes} gmfThemes Themes service.
  * @param {ngeo.FeatureOverlayMgr} ngeoFeatureOverlayMgr The ngeo feature overlay manager service.
+ * @param {ngeo.Notification} ngeoNotification Ngeo notification service.
  * @constructor
  * @ngInject
  */
-gmfapp.MainController = function(gmfThemes, ngeoFeatureOverlayMgr) {
+gmfapp.MainController = function(gmfThemes, ngeoFeatureOverlayMgr, ngeoNotification) {
 
   gmfThemes.loadThemes();
 
@@ -98,6 +100,23 @@ gmfapp.MainController = function(gmfThemes, ngeoFeatureOverlayMgr) {
     })
   });
 
+  /**
+   * @type {ngeo.Notification}
+   * @private
+   */
+  this.notification_ = ngeoNotification;
+};
+
+
+/**
+ * @export
+ */
+gmfapp.MainController.prototype.searchIsReady = function() {
+  this.notification_.notify({
+    msg: 'gmf-search initialized',
+    target: angular.element('#message'),
+    type: ngeo.MessageType.SUCCESS
+  });
 };
 
 

diff --git a/contribs/gmf/src/directives/search.js b/contribs/gmf/src/directives/search.js
@@ -116,6 +116,7 @@ gmf.module.value('gmfSearchTemplateUrl',
  * @htmlAttribute {ngeox.SearchDirectiveListeners} gmf-search-listeners
  *      The listeners.
  * @htmlAttribute {number} gmf-search-maxzoom The maximum zoom we will zoom on result, default is 16.
+ * @htmlAttribute {function} gmf-search-on-init Optional function called when the directive is initialized.
  * @return {angular.Directive} The Directive Definition Object.
  * @ngInject
  * @ngdoc directive
@@ -137,7 +138,8 @@ gmf.searchDirective = function(gmfSearchTemplateUrl) {
       'colorchooser': '=gmfSearchColorchooser',
       'coordinatesProjections': '=?gmfSearchCoordinatesprojections',
       'additionalListeners': '=gmfSearchListeners',
-      'maxZoom': '<gmfSearchMaxzoom'
+      'maxZoom': '<gmfSearchMaxzoom',
+      'onInitCallback': '&?gmfSearchOnInit'
     },
     controller: 'GmfSearchController',
     controllerAs: 'ctrl',
@@ -156,6 +158,11 @@ gmf.searchDirective = function(gmfSearchTemplateUrl) {
               ctrl.clear();
             });
           }
+
+          var callback = scope['onInitCallback'];
+          if (callback) {
+            callback();
+          }
         }
   };
 };