Select example and skeleton with event listeners

2013-08-07 22:41:02 +02:00
parent 7298cbd119
commit e2526621d1
4 changed files with 219 additions and 0 deletions
@@ -201,6 +201,15 @@
 *     Default is '' (empty string).
 */

+/**
+ * @typedef {Object} ol.control.SelectOptions
+ * @property {string|undefined} className CSS class name. Default is 'ol-select'.
+ * @property {Element|undefined} element Element.
+ * @property {Array.<ol.layer.Layer>|undefined} layers Layers to select features on.
+ * @property {ol.Map|undefined} map Map.
+ * @property {Element|undefined} target Target.
+ */
+
 /**
 * @typedef {Object} ol.control.ScaleLineOptions
 * @property {string|undefined} className CSS Class name. Default is 'ol-scale-line'.
@@ -0,0 +1,106 @@
+goog.provide('ol.control.Select');
+
+goog.require('goog.array');
+goog.require('goog.dom');
+goog.require('goog.dom.TagName');
+goog.require('goog.dom.classes');
+goog.require('goog.events');
+goog.require('goog.events.EventType');
+goog.require('ol.MapBrowserEvent.EventType');
+goog.require('ol.control.Control');
+goog.require('ol.css');
+
+
+
+/**
+ * @constructor
+ * @extends {ol.control.Control}
+ * @param {ol.control.SelectOptions=} opt_options Options.
+ */
+ol.control.Select = function(opt_options) {
+  var options = goog.isDef(opt_options) ? opt_options : {};
+
+  this.layers_ = options.layers;
+
+  var className = goog.isDef(options.className) ? options.className :
+      'ol-select';
+
+  var element = goog.dom.createDom(goog.dom.TagName.DIV, {
+    'class': className + ' ' + ol.css.CLASS_UNSELECTABLE
+  });
+  var button = goog.dom.createDom(goog.dom.TagName.A, {
+    'href': '#Select'
+  });
+  goog.dom.appendChild(element, button);
+
+  goog.events.listen(element, [
+    goog.events.EventType.TOUCHEND,
+    goog.events.EventType.CLICK
+  ], this.toggleActive_, false, this);
+
+  goog.base(this, {
+    element: element,
+    map: options.map,
+    target: options.target
+  });
+};
+goog.inherits(ol.control.Select, ol.control.Control);
+
+
+/**
+ * @param {goog.events.BrowserEvent} browserEvent Browser event.
+ * @private
+ */
+ol.control.Select.prototype.toggleActive_ = function(browserEvent) {
+  // prevent #Select anchor from getting appended to the url
+  browserEvent.preventDefault();
+  if (this.active_) {
+    this.deactivate();
+  } else {
+    this.activate();
+  }
+};
+
+
+/**
+ * Activate the control.
+ */
+ol.control.Select.prototype.activate = function() {
+  goog.dom.classes.add(this.element, 'active');
+  // TODO: Add box selection
+  this.listenerKeys.push(
+      goog.events.listen(this.getMap(), ol.MapBrowserEvent.EventType.CLICK,
+          this.handleClick, true, this));
+};
+
+
+/**
+ * Dectivate the control.
+ */
+ol.control.Select.prototype.deactivate = function() {
+  if (!goog.array.isEmpty(this.listenerKeys)) {
+    goog.array.forEach(this.listenerKeys, goog.events.unlistenByKey);
+    this.listenerKeys.length = 0;
+  }
+  goog.dom.classes.remove(this.element, 'active');
+};
+
+
+/**
+ * @param {ol.MapBrowserEvent} evt Event.
+ */
+ol.control.Select.prototype.handleClick = function(evt) {
+  this.getMap().getFeatures({
+    layers: this.layers_,
+    pixel: evt.getPixel(),
+    success: this.select
+  });
+};
+
+
+/**
+ * @param {Array.<Array.<ol.Feature>>} featuresByLayer Features by layer.
+ */
+ol.control.Select.prototype.select = function(featuresByLayer) {
+  // TODO: Do something with the features.
+};