From cb76ebd1f2b2eee9c4f46ee07bf2c3be8024b150 Mon Sep 17 00:00:00 2001
From: Jean-Marc Viglino <jean-marc.viglino@ign.fr>
Date: Sun, 13 Nov 2016 17:33:06 +0100
Subject: [PATCH] [UPD] Controlbar / subbar

---
 control/buttoncontrol.js | 15 +++++++--
 control/controlbar.css   | 21 +++++++++++++
 control/controlbar.js    | 66 ++++++++++++++++++----------------------
 control/togglecontrol.js | 62 +++++++++++++++++++++++++------------
 4 files changed, 105 insertions(+), 59 deletions(-)

diff --git a/control/buttoncontrol.js b/control/buttoncontrol.js
index 24da8730..af01f40b 100644
--- a/control/buttoncontrol.js
+++ b/control/buttoncontrol.js
@@ -2,7 +2,7 @@
 	released under the CeCILL-B license (French BSD license)
 	(http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
 */
-/** A simple button control 
+/** A simple push button control 
  *
  * @constructor
  * @extends {ol.control.Control}
@@ -14,7 +14,7 @@
  */
 ol.control.Button = function(options) 
 {	options = options || {};
-	var element = $("<div>").addClass(options.className + ' ol-button ol-unselectable ol-control');
+	var element = $("<div>").addClass((options.className||"") + ' ol-button ol-unselectable ol-control');
 	var self = this;
 
 	$("<button>").html(options.html || "")
@@ -31,5 +31,14 @@ ol.control.Button = function(options)
 	});
 
 	if (options.title) this.set("title", options.title);
-}
+};
 ol.inherits(ol.control.Button, ol.control.Control);
+
+/** A simple push button control drawn as text
+*/
+ol.control.TextButton = function(options) 
+{	options = options || {};
+	options.className = (options.className||"") + " ol-text-button";
+	ol.control.Button.call(this, options);
+};
+ol.inherits(ol.control.TextButton, ol.control.Button);
diff --git a/control/controlbar.css b/control/controlbar.css
index 6b047a85..f81058bb 100644
--- a/control/controlbar.css
+++ b/control/controlbar.css
@@ -9,12 +9,21 @@
 	-webkit-transform: translate(-50%,0);
 }
 
+/* Hide subbar when not inserted in a parent bar */
+.ol-control.ol-toggle .ol-option-bar
+{	display: none;
+}
+
 /* Default position for controls */
 .ol-control.ol-bar .ol-bar
 {	position: static;
 }
 .ol-control.ol-bar .ol-control
 {	position: relative;
+	top: auto;
+	left:auto;
+	right:auto;
+	bottom: auto;
 	display: inline-block;
 	vertical-align: middle;
 	background: none;
@@ -109,6 +118,14 @@
 {	border-radius: 0 0 5px 5px;
 }
 
+/* */
+.ol-control.ol-bar .ol-rotate
+{	opacity:1;
+	visibility: visible;
+}
+.ol-control.ol-bar .ol-rotate button
+{	display: block
+}
 
 /* Active buttons */
 .ol-control.ol-bar .ol-toggle.ol-active > button
@@ -150,6 +167,10 @@
 {	display: block;
 }
 
+.ol-control.ol-bar .ol-control.ol-collapsed ul
+{	display: none;
+}
+
 .ol-control.ol-bar .ol-control.ol-text-button > button:hover,
 .ol-control.ol-bar .ol-control.ol-text-button > button
 {	background: none;
diff --git a/control/controlbar.js b/control/controlbar.js
index 1229f5c4..5f3867af 100644
--- a/control/controlbar.js
+++ b/control/controlbar.js
@@ -1,6 +1,10 @@
+/*	Copyright (c) 2016 Jean-Marc VIGLINO, 
+	released under the CeCILL-B license (French BSD license)
+	(http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
+*/
 /** Control bar for OL3
  * The control bar is a container for other controls. It can be used to create toolbars.
- * Control bars can be nested (subbar) and combined with ol.control.Toggle to handle activate/deactivate.
+ * Control bars can be nested and combined with ol.control.Toggle to handle activate/deactivate.
  *
  * @constructor
  * @extends {ol.control.Control}
@@ -8,7 +12,7 @@
  *		className {String} class of the control
  *		group {bool} is a group, default false
  *		toggleOne {bool} only one toggle control is active at a time, default false
- *		autoDeactivate {bool} used with nested (subbar) to deactivate all control when top level control deactivate, default false
+ *		autoDeactivate {bool} used with subbar to deactivate all control when top level control deactivate, default false
  *		controls {Array<ol.control>} a list of control to add to the bar
  */
 ol.control.Bar = function(options) 
@@ -44,7 +48,6 @@ ol.control.Bar.prototype.setMap = function (map)
 	for (var i=0; i<this.controls_.length; i++)
 	{	var c = this.controls_[i];
 		map.addControl(c);
-		if (c.subBar_) this.getMap().addControl(c.subBar_);
 	}
 };
 
@@ -62,9 +65,7 @@ ol.control.Bar.prototype.setPosition = function (pos)
 {	$(this.element).removeClass('ol-left ol-top ol-bottom ol-right');
 	pos=pos.split ('-');
 	for (var i=0; i<pos.length; i++)
-	{	
-		console.log(pos[i]);
-		switch (pos[i])
+	{	switch (pos[i])
 		{	case 'top':
 			case 'left':
 			case 'bottom':
@@ -78,30 +79,18 @@ ol.control.Bar.prototype.setPosition = function (pos)
 
 /** Add a control to the bar
 *	@param {ol.control} c control to add
-*	@param {ol.control.Bar} bar a subbar associated with the control (drawn when active)
 */
-ol.control.Bar.prototype.addControl = function (c, bar)
+ol.control.Bar.prototype.addControl = function (c)
 {	this.controls_.push(c);
 	c.setTarget(this.element);
-	c.on ('change:active', this.onActivateControl_, this);
-	if (bar)
-	{	this.controls_.push(bar);
-		bar.setTarget(c.element);
-		$(bar.element).addClass("ol-option-bar");
-		c.subBar_ = bar;
-	}
 	if (this.getMap()) 
 	{	this.getMap().addControl(c);
-		if (c.subBar_) this.getMap().addControl(c.subBar_);
 	}
-};
-
-/** Get the subbar associated with a control
-*	@param {ol.control} c control to get subbar
-*/
-ol.control.Bar.prototype.getControlSubBar = function (c)
-{	if (c.subBar_) return c.subBar_;
-	else return null;
+	// Activate and toogleOne
+	c.on ('change:active', this.onActivateControl_, this);
+	if (c.getActive && c.getActive())
+	{	c.dispatchEvent({ type:'change:active', key:'active', oldValue:false, active:true });
+	}
 };
 
 /** Deativate all controls in a bar
@@ -115,23 +104,26 @@ ol.control.Bar.prototype.deactivateControls = function (except)
 	}
 };
 
+/** Auto activate/deactivate controls in the bar
+* @param {boolean} b activate/deactivate
+*/
+ol.control.Bar.prototype.setActive = function (b)
+{	if (!b && this.get("autoDeactivate"))
+	{	this.deactivateControls();
+	}
+	if (b)
+	{	var ctrls = this.getControls();
+		for (var i=0, sb; (sb = ctrls[i]); i++)
+		{	if (sb.get("autoActivate")) sb.setActive(true);
+		}
+	}
+}
+
 /** Post-process an activated/deactivated control
 *	@param {ol.event} an object with a target {ol.control} and active flag {bool}
 */
 ol.control.Bar.prototype.onActivateControl_ = function (e)
-{	// Deactivate control on subbar
-	if (!e.active && e.target.subBar_ && e.target.subBar_.get("autoDeactivate"))
-	{	e.target.subBar_.deactivateControls ();
-	}
-	// Auto activate control on subbar
-	if (e.active && e.target.subBar_)
-	{	var ctrls = e.target.subBar_.getControls();
-		for (var i=0, sb; sb = ctrls[i]; i++)
-		{	if (sb.get("autoActivate")) sb.setActive(true);
-		}
-	}
-
-	if (!e.active || !this.get('toggleOne')) return;
+{	if (!e.active || !this.get('toggleOne')) return;
 	var n;
 	var ctrl = e.target;
 	for (n=0; n<this.controls_.length; n++) 
diff --git a/control/togglecontrol.js b/control/togglecontrol.js
index c6e419be..3a9cebd1 100644
--- a/control/togglecontrol.js
+++ b/control/togglecontrol.js
@@ -14,6 +14,7 @@
  *		html {String} html to insert in the control
  *		interaction {ol.interaction} interaction associated with the control 
  *		active {bool} the control is created active, default false
+ *		bar {ol.control.Bar} a subbar associated with the control (drawn when active if control is nested in a ol.control.Bar)
  *		autoActive {bool} the control will activate when shown in an ol.control.Bar, default false
  *		onToggle {function} callback when control is clicked (or use change:active event)
  */
@@ -33,14 +34,39 @@ ol.control.Toggle = function(options)
 				{	self.toggle();
 					if (options.onToggle) options.onToggle.call(self, self.getActive());
 				};
-	options.className = options.className||"" + " ol-toggle";
+	options.className = (options.className||"") + " ol-toggle";
 	ol.control.Button.call(this, options);
 
-	this.setActive (options.active);
+	this.set("title", options.title);
+
 	this.set ("autoActivate", options.autoActivate);
-}
+	if (options.bar) 
+	{	this.subbar_ = options.bar;
+		this.subbar_.setTarget(this.element);
+		$(this.subbar_.element).addClass("ol-option-bar");
+	}
+
+	this.setActive (options.active);
+};
 ol.inherits(ol.control.Toggle, ol.control.Button);
 
+/**
+*/
+ol.control.Toggle.prototype.setMap = function(map)
+{	
+	ol.control.Control.prototype.setMap.call(this, map);
+
+	if (this.interaction_) map.addInteraction (this.interaction_);
+	if (this.subbar_) map.addControl (this.subbar_);
+};
+
+/** Get the subbar associated with a control
+* @return {ol.control.Bar}
+*/
+ol.control.Toggle.prototype.getSubBar = function ()
+{	return this.subbar_;
+};
+
 /**
  * Test if the control is active.
  * @return {bool}.
@@ -48,40 +74,38 @@ ol.inherits(ol.control.Toggle, ol.control.Button);
  */
 ol.control.Toggle.prototype.getActive = function()
 {	return $(this.element).hasClass("ol-active");
-}
+};
 
-/**
+/** Toggle control state active/deactive
 */
 ol.control.Toggle.prototype.toggle = function()
 {	if (this.getActive()) this.setActive(false);
 	else this.setActive(true);
-}
+};
 
-/**
+/** Change control state
+* @param {bool} b activate or deactivate the control, default false
 */
 ol.control.Toggle.prototype.setActive = function(b)
 {	if (this.getActive()==b) return;
 	if (b) $(this.element).addClass("ol-active");
 	else $(this.element).removeClass("ol-active");
 	if (this.interaction_) this.interaction_.setActive (b);
+	if (this.subbar_) this.subbar_.setActive(b);
+
 	this.dispatchEvent({ type:'change:active', key:'active', oldValue:!b, active:b });
-}
+};
 
-/**
-*/
-ol.control.Toggle.prototype.setMap = function(map)
-{	ol.control.Control.prototype.setMap.call(this, map);
-	if (this.interaction_) map.addInteraction (this.interaction_);
-}
-
-/**
+/** Set the control interaction
+* @param {ol.interaction} i interaction to associate with the control
 */
 ol.control.Toggle.prototype.setInteraction = function(i)
 {	this.interaction_ = i;
-}
+};
 
-/**
+/** Get the control interaction
+* @return {ol.interaction} interaction associated with the control
 */
 ol.control.Toggle.prototype.getInteraction = function()
 {	return this.interaction_;
-}
\ No newline at end of file
+};
\ No newline at end of file