WIP on ngeo popover component

camptocamp · Mar 22, 2016 · b4e8d51 · b4e8d51
1 parent 484afcd
commit b4e8d51
Show file tree

Hide file tree

Showing 3 changed files with 229 additions and 0 deletions.
diff --git a/examples/popover.html b/examples/popover.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html ng-app='app'>
+<head>
+    <title>Popover example</title>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <meta name="mobile-web-app-capable" content="yes">
+    <link rel="stylesheet" href="../node_modules/openlayers/css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css" type="text/css">
+    <style>
+        body {
+            width: 100vw;
+            height: 100vh;
+        }
+
+        .ngeo-popover {
+            margin : 30px
+        }
+        .popover {
+            border-radius : 0;
+        }
+    </style>
+</head>
+<body>
+<p id="desc">This example shows how to use the <code>ngeo-popover</code> directive to open a popover</p>
+<div ngeo-popover class="ngeo-popover">
+    <a ngeo-popover-anchor class="btn btn-info">anchor 1</a>
+    <div ngeo-popover-content>
+        <ul>
+            <li>action 1:
+                <input type="range"/>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<div ngeo-popover class="ngeo-popover">
+    <a ngeo-popover-anchor class="btn btn-info">anchor 2</a>
+    <div ngeo-popover-content>
+        <ul>
+            <li>action 2:
+                <input type="range"/>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<div ngeo-popover class="ngeo-popover">
+    <a ngeo-popover-anchor class="btn btn-info">anchor 3</a>
+    <div ngeo-popover-content>
+        <ul>
+            <li>action 3:
+                <input type="range"/>
+            </li>
+        </ul>
+    </div>
+</div>
+
+<script src="../node_modules/jquery/dist/jquery.js"></script>
+<script src="../node_modules/angular/angular.js"></script>
+<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
+<script src="/@?main=popover.js"></script>
+<script src="default.js"></script>
+<script src="../utils/watchwatchers.js"></script>
+</body>
+</html>
diff --git a/examples/popover.js b/examples/popover.js
@@ -0,0 +1,15 @@
+goog.provide('popover');
+
+goog.require('ngeo.popoverDirective');
+goog.require('ngeo.popoverAnchorDirective');
+goog.require('ngeo.popoverContentDirective');
+
+
+/** @const **/
+var app = {};
+
+
+/** @type {!angular.Module} **/
+app.module = angular.module('app', ['ngeo']);
+
+
diff --git a/src/directives/popover.js b/src/directives/popover.js
@@ -0,0 +1,147 @@
+goog.provide('ngeo.popoverDirective');
+goog.provide('ngeo.popoverAnchorDirective');
+goog.provide('ngeo.popoverContentDirective');
+goog.provide('ngeo.PopoverController');
+
+goog.require('ngeo');
+
+/**
+ * Provides a directive used to display a Bootstrap popover.
+ *
+ *<div ngeo-popover>
+ *  <a ngeo-popover-anchor class="btn btn-info">anchor 1</a>
+ *  <div ngeo-popover-content="">
+ *    <ul>
+ *      <li>action 1:
+ *        <input type="range"/>
+ *      </li>
+ *    </ul>
+ *  </div>
+ *</div>
+ * @ngdoc directive
+ * @ngInject
+ * @ngname ngeoPopover
+ * @return {angular.Directive} The Directive Definition Object.
+ */
+ngeo.popoverDirective = function() {
+  return {
+    restrict: 'A',
+    scope : true,
+    controller: 'NgeoPopoverController',
+    link : function(scope, elem, attrs, controller) {
+      var ngeoPopoverCtrl = controller;
+
+      ngeoPopoverCtrl.anchorElm .on('hidden.bs.popover', function() {
+        /**
+         * @type {{inState : Object}}
+         */
+        var popover = ngeoPopoverCtrl.anchorElm.data('bs.popover');
+        popover['inState'].click = false;
+      });
+
+      ngeoPopoverCtrl.anchorElm.on('inserted.bs.popover', function() {
+        ngeoPopoverCtrl.shown = true;
+        ngeoPopoverCtrl.bodyElm.parent().on('click', function(e) {
+          e.stopPropagation();
+        })
+      });
+
+      ngeoPopoverCtrl.anchorElm.popover({
+        container: 'body',
+        html: true,
+        content: ngeoPopoverCtrl.bodyElm
+      });
+
+      scope.$on('$destroy', function() {
+        ngeoPopoverCtrl.anchorElm .unbind('inserted.bs.popover');
+        ngeoPopoverCtrl.anchorElm .unbind('hidden.bs.popover');
+      })
+    }
+  }
+};
+
+/**
+ * @ngdoc directive
+ * @ngInject
+ * @ngname ngeoPopoverAnchor
+ * @return {angular.Directive} The Directive Definition Object
+ */
+ngeo.popoverAnchorDirective = function() {
+  return {
+    restrict: 'A',
+    require: ['^^ngeoPopover'],
+    link: function(scope, elem, attrs, controllers) {
+      var ngeoPopoverCtrl = controllers[0];
+      ngeoPopoverCtrl.anchorElm = elem;
+    }
+  }
+};
+
+/**
+ * @ngdoc directive
+ * @ngInject
+ * @ngname ngeoPopoverContent
+ * @return {angular.Directive} The Directive Definition Object
+ */
+ngeo.popoverContentDirective = function() {
+  return {
+    restrict: 'A',
+    transclude: true,
+    require: ['^^ngeoPopover'],
+    link: function(scope, elem, attrs, controllers, transclude) {
+      var ngeoPopoverCtrl = controllers[0];
+      ngeoPopoverCtrl.bodyElm = transclude();
+    }
+  }
+};
+
+/**
+ * The controller for the 'popover' directive.
+ * @constructor
+ * @ngInject
+ * @export
+ * @ngdoc controller
+ * @ngname NgeoPopoverController
+ * @param {angular.Scope} $scope Scope.
+ */
+ngeo.PopoverController = function($scope) {
+  var self = this;
+  /**
+   * The state of the popover (displayed or not)
+   * @type {boolean}
+   * @export
+   */
+  this.shown = false;
+
+  /**
+   * @type {angular.JQLite|undefined}
+   * @export
+   */
+  this.anchorElm = undefined;
+
+  /**
+   * @type {angular.JQLite|undefined}
+   * @export
+   */
+  this.bodyElm = undefined;
+
+  function onClick(clickEvent) {
+
+    if (self.anchorElm[0] !== clickEvent.target && self.shown) {
+      self.shown = false;
+      self.anchorElm.popover('hide');
+    }
+
+  }
+
+  angular.element('body').on('click', onClick);
+
+  $scope.$on('$destroy', function() {
+    angular.element('body').off('click', onClick);
+  })
+};
+
+ngeo.module.controller('NgeoPopoverController', ngeo.PopoverController);
+ngeo.module.directive('ngeoPopover', ngeo.popoverDirective);
+ngeo.module.directive('ngeoPopoverAnchor', ngeo.popoverAnchorDirective);
+ngeo.module.directive('ngeoPopoverContent', ngeo.popoverContentDirective);