From 720cadb943e8b4e39f0e986754c9b143ef72e10e Mon Sep 17 00:00:00 2001 From: Aleksey Pastuhov Date: Tue, 21 Nov 2017 16:37:31 +0200 Subject: [PATCH] Directive to component --- examples/animation.js | 24 +++++------- examples/backgroundlayer.js | 28 ++++++------- examples/backgroundlayerdropdown.js | 26 ++++++------ examples/bboxquery.js | 19 ++++----- examples/colorpicker.js | 21 ++++------ examples/layertree.js | 41 +++++++++---------- examples/locationsearch.js | 30 ++++++-------- examples/mapquery.js | 19 ++++----- examples/measure.html | 2 +- examples/measure.js | 37 ++++++----------- examples/search.js | 61 +++++++++++++++-------------- 11 files changed, 131 insertions(+), 177 deletions(-) diff --git a/examples/animation.js b/examples/animation.js index 482c80e95f7..27dd269ec1e 100644 --- a/examples/animation.js +++ b/examples/animation.js @@ -15,28 +15,22 @@ app.module = angular.module('app', ['ngeo']); /** - * App-specific directive wrapping the ngeo map directive. The directive's + * App-specific component wrapping the ngeo map component. The component's * controller has a property "map" including a reference to the OpenLayers * map. * - * @return {angular.Directive} The directive specs. - * @ngInject + * @type {!angular.Component} */ -app.mapDirective = function() { - return { - restrict: 'E', - scope: { - 'map': '=appMap', - 'class': '=appMapClass' - }, - controller: () => {}, - bindToController: true, - template: '
' - }; +app.mapComponent = { + bindings: { + 'map': '=appMap', + 'class': '=appMapClass' + }, + template: '
' }; -app.module.directive('appMap', app.mapDirective); +app.module.component('appMap', app.mapComponent); /** diff --git a/examples/backgroundlayer.js b/examples/backgroundlayer.js index 9fb75f7ee65..04a317805dc 100644 --- a/examples/backgroundlayer.js +++ b/examples/backgroundlayer.js @@ -18,33 +18,29 @@ app.module = angular.module('app', ['ngeo']); /** - * The application-specific background layer directive. + * The application-specific background layer component. * - * The directive is based on Angular's select, ngOptions, ngModel, and - * ngChange directives. ngChange is used to avoid adding a watcher on + * The component is based on Angular's select, ngOptions, ngModel, and + * ngChange components. ngChange is used to avoid adding a watcher on * the ngModel expression. * * Note: we don't need two-way binding for ngModel here, but using :: * for the ngModel expression doesn't actually make a difference. This * is because ngModel doesn't actually watch the ngModel expression. * - * @return {angular.Directive} Directive Definition Object. - * @ngInject + * @type {!angular.Component} */ -app.backgroundlayerDirective = function() { - return { - restrict: 'E', - scope: { - 'map': '=appBackgroundlayerMap' - }, - templateUrl: 'partials/backgroundlayer.html', - bindToController: true, - controller: 'AppBackgroundlayerController as ctrl' - }; +app.backgroundlayerComponent = { + bindings: { + 'map': '=appBackgroundlayerMap' + }, + templateUrl: 'partials/backgroundlayer.html', + controller: 'AppBackgroundlayerController', + controllerAs: 'ctrl' }; -app.module.directive('appBackgroundlayer', app.backgroundlayerDirective); +app.module.component('appBackgroundlayer', app.backgroundlayerComponent); /** diff --git a/examples/backgroundlayerdropdown.js b/examples/backgroundlayerdropdown.js index e1ec8f9dbef..ae8f22022b0 100644 --- a/examples/backgroundlayerdropdown.js +++ b/examples/backgroundlayerdropdown.js @@ -18,28 +18,24 @@ app.module = angular.module('app', ['ngeo']); /** - * The application-specific background layer directive. + * The application-specific background layer component. * - * The directive is based on Bootstrap's dropdown jQuery plugin and on + * The component is based on Bootstrap's dropdown jQuery plugin and on * the ngeoBackgroundLayerMgr service. * - * @return {angular.Directive} Directive Definition Object. - * @ngInject + * @type {!angular.Component} */ -app.backgroundlayerDirective = function() { - return { - restrict: 'E', - scope: { - 'map': '=appBackgroundlayerMap' - }, - templateUrl: 'partials/backgroundlayerdropdown.html', - bindToController: true, - controller: 'AppBackgroundlayerController as ctrl' - }; +app.backgroundlayerComponent = { + bindings: { + 'map': '=appBackgroundlayerMap' + }, + templateUrl: 'partials/backgroundlayerdropdown.html', + controller: 'AppBackgroundlayerController', + controllerAs: 'ctrl' }; -app.module.directive('appBackgroundlayer', app.backgroundlayerDirective); +app.module.component('appBackgroundlayer', app.backgroundlayerComponent); /** diff --git a/examples/bboxquery.js b/examples/bboxquery.js index c999841ebc4..378458b3981 100644 --- a/examples/bboxquery.js +++ b/examples/bboxquery.js @@ -28,22 +28,17 @@ app.module.value('ngeoQueryOptions', { /** - * A sample directive to display the result. + * A sample component to display the result. * - * @return {angular.Directive} The directive specs. - * @ngInject + * @type {!angular.Component} */ -app.queryresultDirective = function() { - return { - restrict: 'E', - scope: {}, - controller: 'AppQueryresultController as qrCtrl', - bindToController: true, - templateUrl: 'partials/queryresult.html' - }; +app.queryresultComponent = { + controller: 'AppQueryresultController', + controllerAs: 'qrCtrl', + templateUrl: 'partials/queryresult.html' }; -app.module.directive('appQueryresult', app.queryresultDirective); +app.module.component('appQueryresult', app.queryresultComponent); /** diff --git a/examples/colorpicker.js b/examples/colorpicker.js index 3c03208b465..c437b5c3987 100644 --- a/examples/colorpicker.js +++ b/examples/colorpicker.js @@ -11,24 +11,19 @@ app.module = angular.module('app', ['ngeo']); /** - * The application-specific color picker directive, based on the - * ngeo-colorpicker directive. + * The application-specific color picker component, based on the + * ngeo-colorpicker component. * - * @return {angular.Directive} Directive Definition Object. - * @ngInject + * @type {!angular.Component} */ -app.colorpickerDirective = function() { - return { - restrict: 'E', - scope: true, - template: '
', - bindToController: true, - controller: 'AppColorpickerController as ctrl' - }; +app.colorpickerComponent = { + template: '
', + controller: 'AppColorpickerController', + controllerAs: 'ctrl' }; -app.module.directive('appColorpicker', app.colorpickerDirective); +app.module.component('appColorpicker', app.colorpickerComponent); /** diff --git a/examples/layertree.js b/examples/layertree.js index 789bae87a90..a4f04e7b665 100644 --- a/examples/layertree.js +++ b/examples/layertree.js @@ -24,32 +24,29 @@ app.module = angular.module('app', ['ngeo']); /** - * An application-specific directive wrapping the ngeo tree layer directive. - * The directive includes a controller defining the tree tree. - * @return {angular.Directive} The Directive Definition Object. - * @ngInject + * An application-specific component wrapping the ngeo tree layer component. + * The component includes a controller defining the tree tree. + * + * @type {!angular.Component} */ -app.layertreeDirective = function() { - return { - restrict: 'E', - scope: { - 'map': '=appLayertreeMap' - }, - controller: 'AppLayertreeController as ctrl', - bindToController: true, - // use "::ctrl.tree" for the "tree" expression as we know the - // layer tree won't change - template: - '
' + - '
' - }; +app.layertreeComponent = { + bindings: { + 'map': '=appLayertreeMap' + }, + controller: 'AppLayertreeController', + controllerAs: 'ctrl', + // use "::ctrl.tree" for the "tree" expression as we know the + // layer tree won't change + template: + '
' + + '
' }; -app.module.directive('appLayertree', app.layertreeDirective); +app.module.component('appLayertree', app.layertreeComponent); /** diff --git a/examples/locationsearch.js b/examples/locationsearch.js index ade21e33b47..9e24f4a6712 100644 --- a/examples/locationsearch.js +++ b/examples/locationsearch.js @@ -17,27 +17,23 @@ app.module = angular.module('app', [ngeo.module.name]); /** - * @return {angular.Directive} Directive Definition Object. - * @ngInject + * @type {!angular.Component} */ -app.locationSearchDirective = function() { - return { - restrict: 'E', - scope: { - 'map': '=appSearchMap' - }, - controller: 'AppSearchController as ctrl', - bindToController: true, - template: - '' - }; +app.locationSearchComponent = { + bindings: { + 'map': '=appSearchMap' + }, + controller: 'AppSearchController', + controllerAs: 'ctrl', + template: + '' }; -app.module.directive('appLocationSearch', app.locationSearchDirective); +app.module.component('appLocationSearch', app.locationSearchComponent); /** diff --git a/examples/mapquery.js b/examples/mapquery.js index 5ae34c66704..01fe766bc7d 100644 --- a/examples/mapquery.js +++ b/examples/mapquery.js @@ -30,22 +30,17 @@ app.module.value('ngeoQueryOptions', { /** - * A sample directive to display the result. + * A sample component to display the result. * - * @return {angular.Directive} The directive specs. - * @ngInject + * @type {!angular.Component} */ -app.queryresultDirective = function() { - return { - restrict: 'E', - scope: {}, - controller: 'AppQueryresultController as qrCtrl', - bindToController: true, - templateUrl: 'partials/queryresult.html' - }; +app.queryresultComponent = { + controller: 'AppQueryresultController', + controllerAs: 'qrCtrl', + templateUrl: 'partials/queryresult.html' }; -app.module.directive('appQueryresult', app.queryresultDirective); +app.module.component('appQueryresult', app.queryresultComponent); /** diff --git a/examples/measure.html b/examples/measure.html index bc24c199286..4db51e5fced 100644 --- a/examples/measure.html +++ b/examples/measure.html @@ -53,7 +53,7 @@
-
+

Use the following selector to change the language used for the measure tooltips.

diff --git a/examples/measure.js b/examples/measure.js index cac619abac6..4272de1102e 100644 --- a/examples/measure.js +++ b/examples/measure.js @@ -26,36 +26,23 @@ app.module = angular.module('app', ['ngeo']); /** - * App-specific directive wrapping the measure tools. The directive's + * App-specific component wrapping the measure tools. The component's * controller has a property "map" including a reference to the OpenLayers * map. * - * @return {angular.Directive} The directive specs. - * @ngInject + * @type {!angular.Component} */ -app.measuretoolsDirective = function() { - return { - restrict: 'A', - scope: { - 'map': '=appMeasuretoolsMap', - 'lang': '=appMeasuretoolsLang' - }, - controller: 'AppMeasuretoolsController as ctrl', - bindToController: true, - templateUrl: 'partials/measuretools.html', - /** - * @param {angular.Scope} scope Scope. - * @param {angular.JQLite} element Element. - * @param {angular.Attributes} attrs Attributes. - * @param {app.MeasuretoolsController} controller Controller. - */ - link: (scope, element, attrs, controller) => { - controller.init(); - } - }; +app.measuretoolsComponent = { + bindings: { + 'map': '=appMeasuretoolsMap', + 'lang': '=appMeasuretoolsLang' + }, + controller: 'AppMeasuretoolsController', + controllerAs: 'ctrl', + templateUrl: 'partials/measuretools.html' }; -app.module.directive('appMeasuretools', app.measuretoolsDirective); +app.module.component('appMeasuretools', app.measuretoolsComponent); /** @@ -225,7 +212,7 @@ app.MeasuretoolsController = function($scope, $compile, $sce, app.module.controller('AppMeasuretoolsController', app.MeasuretoolsController); -app.MeasuretoolsController.prototype.init = function() { +app.MeasuretoolsController.prototype.$onInit = function() { this.map.addInteraction(this.measureLength); this.map.addInteraction(this.measureArea); this.map.addInteraction(this.measureAzimut); diff --git a/examples/search.js b/examples/search.js index e2ceb236d4a..50c8d5445b5 100644 --- a/examples/search.js +++ b/examples/search.js @@ -20,49 +20,41 @@ app.module = angular.module('app', [ngeo.module.name]); /** - * @return {angular.Directive} Directive Definition Object. - * @ngInject + * @type {!angular.Component} */ -app.searchDirective = function() { - return { - restrict: 'E', - scope: { - 'map': '=appSearchMap' - }, - controller: 'AppSearchController as ctrl', - bindToController: true, - template: - '', - /** - * @param {angular.Scope} scope Scope. - * @param {angular.JQLite} element Element. - * @param {angular.Attributes} attrs Atttributes. - */ - link: (scope, element, attrs) => { - // Empty the search field on focus and blur. - element.find('input').on('focus blur', function() { - $(this).val(''); - }); - } - }; +app.searchComponent = { + bndings: { + 'map': '=appSearchMap' + }, + controller: 'AppSearchController', + controllerAs: 'ctrl', + template: + '' }; -app.module.directive('appSearch', app.searchDirective); +app.module.component('appSearch', app.searchComponent); /** * @constructor + * @param {angular.JQLite} $element Element. * @param {angular.Scope} $rootScope Angular root scope. * @param {angular.$compile} $compile Angular compile service. * @param {ngeo.search.createGeoJSONBloodhound.Function} ngeoSearchCreateGeoJSONBloodhound The ngeo * create GeoJSON Bloodhound service. * @ngInject */ -app.SearchController = function($rootScope, $compile, ngeoSearchCreateGeoJSONBloodhound) { +app.SearchController = function($element, $rootScope, $compile, ngeoSearchCreateGeoJSONBloodhound) { + /** + * @private + * @type {angular.JQLite} + */ + this.$element = $element; + /** * @type {ol.Map} @@ -127,7 +119,18 @@ app.SearchController = function($rootScope, $compile, ngeoSearchCreateGeoJSONBlo this.listeners = /** @type {ngeox.SearchDirectiveListeners} */ ({ select: app.SearchController.select_.bind(this) }); +}; + +/** + * @export + */ +app.SearchController.prototype.$onInit = function() { + // Empty the search field on focus and blur. + const input = this.$element.find('input'); + input.on('focus blur', () => { + input.val(''); + }); };