/**
* @classdesc
*
* Let you create a selector menu with a list of options, and assign a click event to each option<br/>
* The options to be included by parameter are <br/>
* Example:<br/>
*
* var option1 = {name:'opcio_1',className:'class1',clickFunction:function(){alert('1');}};
* var option2 = {name:'opcio_2',className:'class2',clickFunction:function(){alert('2');}};
* var customSwitcherControl = new cercalia.Control.CustomSwitcherControl({
* name : 'Switcher1',
* name : 'Custom selector menu',
* menuOptions : [option1,option2]
* });
*
* @constructor
* @param {cercaliax.Control.CustomSwitcherControlOptions} option
* @extends {ol.control.Control}
*/
cercalia.Control.CustomSwitcherControl = function(option) {
/**
* @private
* @type {string}
*/
this.name_ = option.name ? option.name : cercalia.MapControls.CustomSwitcherControl;
/**
* @private
* @type {string}
*/
this.label_ = option.label ? option.label : 'CustomSwitcher';
/**
* Class name
* @private
* @type {string}
*/
this.CLASS_NAME_ = "cercalia.Control.CustomSwitcherControl";
/**
* @private
* @type {String}
*/
this.topBarId_ = null;
/**
* Button
* @private
* @type {Object}
*/
this.element_ = null;
/**
* Button
* @private
* @type {Object}
*/
this.elementList_ = null;
/**
* @private
* @type {Array.<string>}
*/
this.menuOptions_ = option.menuOptions ? option.menuOptions : [];
this.initialize_();
};
ol.inherits(cercalia.Control.CustomSwitcherControl, ol.control.Control);
/**
* Initializes the element
* @private
*/
cercalia.Control.CustomSwitcherControl.prototype.initialize_ = function() {
this.element_ = document.createElement('button');
this.element_.className = 'customswitcher ';
this.element_.innerHTML = this.label_;
cercalia.jQuery(this.element_)
.button({
icons: {
primary: "cercalia-big-icon-map cercalia-big-icon",
secondary: "ui-icon-triangle-1-s"
}
});
cercalia.jQuery(this.element_)
.removeClass("ui-button-text-icons")
.addClass("ui-button-text-icon-secondary cercalia-tool-button");
};
/**
* Create the button in the tools topbar
* @private
* @param {string} idTopBar Div element ID where the control will be embedded
*/
cercalia.Control.CustomSwitcherControl.prototype.setTopBar = function (idTopBar) {
this.topBarId_ = idTopBar;
var self = this;
this.element_.addEventListener('click', function (event) {
if(cercalia.jQuery(self.element_).hasClass("cercalia-tool-button-open")) {
cercalia.jQuery(self.element_).click().removeClass("cercalia-tool-button-open").button("refresh");
cercalia.jQuery('.cercalia-tool-button-open').click().removeClass("cercalia-tool-button-open").button("refresh");
} else {
cercalia.jQuery('.cercalia-tool-button-open').click().removeClass("cercalia-tool-button-open").button("refresh");
cercalia.jQuery(self.element_).addClass("cercalia-tool-button-open");
}
//Obrim o tanquem segons com es trobi
cercalia.jQuery(self.elementList_).is(":visible") ? self.closeList_() : self.openList_();
});
var target = document.getElementById(idTopBar);
ol.control.Control.call(this, {
element: self.element_,
target: target
});
this.createMenuList_(target, idTopBar);
};
/**
* @private
*/
cercalia.Control.CustomSwitcherControl.prototype.openList_ = function() {
//Siempre que abramos ajustamos la posición del list respecto el botón
//cercalia.jQuery(this.elementList_).css('left', cercalia.jQuery(this.element_).position().left);
if (document.getElementById(this.topBarId_)) {
var width = cercalia.jQuery(this.element_).width();
var rightPosition = cercalia.jQuery(this.element_).parent().width() - cercalia.jQuery(this.element_).position().left - width + 8;
cercalia.jQuery(this.elementList_).css('right', rightPosition);
} else {
cercalia.jQuery(this.elementList_).css({
top: 52,
right: 20
});
}
//Comprovem si té parent.. Sinó l'afegim
if (!cercalia.jQuery(this.elementList_)[0].parentNode) {
var viewport = this.map_.getViewport();
viewport.appendChild(this.elementList_);
}
cercalia.jQuery(this.elementList_).fadeIn();
cercalia.jQuery(this.element_).find('.ui-button-icon-secondary')
.addClass('ui-icon-triangle-1-n')
.removeClass('ui-icon-triangle-1-s');
};
/**
* @private
*/
cercalia.Control.CustomSwitcherControl.prototype.closeList_ = function() {
cercalia.jQuery(this.elementList_).fadeOut();
cercalia.jQuery(this.element_).find('.ui-button-icon-secondary')
.addClass('ui-icon-triangle-1-s')
.removeClass('ui-icon-triangle-1-n');
};
/**
* @private
* @param {object} target
* @param {string} idTopBar
*/
cercalia.Control.CustomSwitcherControl.prototype.createMenuList_ = function(target, idTopBar){
var switcherList = document.createElement('div');
switcherList.className = 'customswitcherList ' + this.name_;
var ulSwitcherList = document.createElement('ul');
ulSwitcherList.className = 'ui-corner-all ui-widget ui-state-default';
switcherList.appendChild(ulSwitcherList);
this.elementList_ = switcherList;
if (target) {
target.appendChild(switcherList);
this.initOptions_();
} else {
setTimeout(function(){
var viewport = this.map_.getViewport();
var controlDiv = viewport.getElementsByClassName('ol-overlaycontainer-stopevent')[0];
controlDiv.appendChild(this.element);
this.element.style.position = 'absolute';
this.element.style.top = '10px';
this.element.style.right = '10px';
this.initOptions_();
}.bind(this), 500);
}
};
/**
* Create options list
* @private
*/
cercalia.Control.CustomSwitcherControl.prototype.initOptions_ = function(){
for(var i = 0; i < this.menuOptions_.length; i++){
this.assignMenuOptionAction_(this.menuOptions_[i], i);
}
};
/**
* @private
* @param {object} option
* @param {number} numOption
*/
cercalia.Control.CustomSwitcherControl.prototype.assignMenuOptionAction_ = function(option, numOption){
var ulElem = cercalia.jQuery(this.elementList_).find('ul');
cercalia.jQuery('<li />')
.addClass(numOption == 0 ? "ui-corner-top ui-no-corner-bottom" : (numOption == this.menuOptions_.length-1 ? "ui-corner-bottom ui-no-corner-top" : "ui-no-corner-all") )
.addClass("cercalia-box-sizing" + (option.className?" "+option.className : "") )
.addClass('prova')
.text(option.name)
.click(function(e){
option.clickFunction(this,e);
})
.appendTo(ulElem)
.button();
};
/**
* @param {Object} option Option to add
* @param {number|undefined} position Position on list
*/
cercalia.Control.CustomSwitcherControl.prototype.addOption = function(option, position){
if(position == undefined || position == null){
this.menuOptions_.push(option);
}else{
this.menuOptions_ = cercalia.Util.addObjectInArray(this.menuOptions_, option, position );
}
cercalia.jQuery(this.elementList_).find('ul').empty();
this.initOptions_();
};
/**
* Returns index of option.
* @param {Object} option Option to check the index
*/
cercalia.Control.CustomSwitcherControl.prototype.indexOf = function(option){
if(this.menuOptions_ && option){
return this.menuOptions_.indexOf(option);
} else {
return -1;
}
};
/**
* Remove option by option
* @param {Object} options Option to remove
*/
cercalia.Control.CustomSwitcherControl.prototype.removeOption = function(option){
if(option){
if(this.menuOptions_.indexOf(option) >= 0){
this.removeOptionByIndex(this.menuOptions_.indexOf(option));
}
}
};
/**
* Remove all options with the same name
* @param {string} name Name of option
*/
cercalia.Control.CustomSwitcherControl.prototype.removeOptionByName = function(name){
if(name){
var listToRemove = [ ];
for (index in this.menuOptions_){
if(this.menuOptions_[index].name == name){
listToRemove.push(index);
}
}
for (index in listToRemove){
this.removeOptionByIndex(listToRemove[index]);
}
}
};
/**
* Remove option with index
* @param {number} index of option
*/
cercalia.Control.CustomSwitcherControl.prototype.removeOptionByIndex = function(index){
if(index !== undefined && index != null){
this.menuOptions_.splice(index, 1);
}
cercalia.jQuery(this.elementList_).find('ul').empty();
this.initOptions_();
};
/**
* Returns the HTML element for every created menu.
* @return {HTMLElement}
*/
cercalia.Control.CustomSwitcherControl.prototype.getElementList = function() {
return this.elementList_;
};
/**
* @return {string} Returns the label name assigned to the control
*/
cercalia.Control.CustomSwitcherControl.prototype.getLabel = function() {
return this.label_;
};