mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
[UPD] Controlbar / subbar
This commit is contained in:
Jean-Marc Viglino
parent
149b773fb9
commit
cb76ebd1f2
@ -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);
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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++)
|
||||
|
||||
@ -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_;
|
||||
}
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user