/*
* Copyright (c) 2013 Bundesamt by Kartographie und Geodäsie.
* See license.txt in the BKG WebMap distribution or repository for the
* full text of the license.
*
* Author: Dirk Thalheim
*/
/**
* @requires OpenLayers/BaseTypes/Class.js
* @requires OpenLayers/Control.js
* @requires OpenLayers/Util.js
* @requires BKGWebMap/Control.js
*/
/**
* @classdesc Klasse für Suchfeld
* <br/>
* Zusätzliche Events:
* <ul>
* <li>startsearch: Beim Start der Suche</li>
* <li>valuechanged: Bei Änderungen des Wertes</li>
* </li>
*
*
* @constructor BKGWebMap.Control.Search
* @param {object} options - Optionen für das Controlelement
**/
BKGWebMap.Control.Search = OpenLayers.Class(OpenLayers.Control, {
// muss <code>true</code> sein, ansonsten klappt Textselektion nicht
allowSelection: true,
inputEvents: null,
searchButtonEvents: null,
/**
* Labels für Bedienelemente
* @memberOf BKGWebMap.Control.Search
*/
labels: {
inputHint : 'Suche',
search: 'Suche'
},
initialize: function(options) {
OpenLayers.Control.prototype.initialize.apply(this, [options]);
},
destroy: function() {
if(this.inputEvents) {
this.inputEvents.destroy();
this.inputEvents = null;
}
if(this.searchButtonEvents) {
this.searchButtonEvents.destroy();
this.searchButtonEvents = null;
}
OpenLayers.Control.prototype.destroy.apply(this);
},
/**
* Erstellt den Container und das Suchfeld.
*
* @memberOf BKGWebMap.Control.Search
* @param {OpenLayers.Pixel} px - Die obere linke Eckposition des Containers oder <code>null</code>
* @return {node} Gibt den HTML-Container für das Suchfeld zurück
*/
draw: function(px) {
var div = OpenLayers.Control.prototype.draw.apply(this);
this.input = this.createInput(div);
this.searchButton = this.createButton( div, this.labels.search, "searchButton" );
this.registerEvents();
return div;
},
/**
* @memberOf BKGWebMap.Control.Search
* @param {node} el - Zielcontainer für das Input-Feld
* @return {node} Gibt den HTML-Container für das Suchfeld zurück
*/
createInput: function(el) {
var input = document.createElement("input");
input.type = 'text';
input.value = this.labels.inputHint;
OpenLayers.Element.addClass(input, "input");
OpenLayers.Element.addClass(input, "hint");
el.appendChild(input);
return input;
},
/**
* Erstellt einen Button im gegebenen Element.
*
* @memberOf BKGWebMap.Control.Search
* @param {node} el - Zielcontainer für Button
* @param {string} label - Label für Button
* @param {string} displayClass - CSS-Klasse
* @returns {node}
*/
createButton: function(el, label, displayClass) {
var button = document.createElement("a");
button.href = "#search";
button.title = label;
button.appendChild(document.createTextNode(label));
OpenLayers.Element.addClass(button, displayClass);
OpenLayers.Element.addClass(button, "olButton");
el.appendChild(button);
return button;
},
/**
* Events für Input und Search-Button registrieren.
* @memberOf BKGWebMap.Control.Search
* @private
*/
registerEvents: function() {
// default event handling for input
this.inputEvents = new OpenLayers.Events(this, this.input, null, true);
// onchange-Event beobachten
//OpenLayers.Event.observe( this.input, "onchange", this.inputEvents.eventHandler );
this.inputEvents.on({
"mousedown": BKGWebMap.Util.stopEvent,
"mousemove": BKGWebMap.Util.stopEvent,
"mouseup": BKGWebMap.Util.stopEvent,
"click": BKGWebMap.Util.stopEvent,
"focus": this.onFocus,
"keydown": this.onKeyDown,
scope: this
});
// Suchknopf
this.searchButtonEvents = new OpenLayers.Events(this, this.searchButton, null, true);
this.searchButtonEvents.on({
"buttonclick" : this.triggerSearch,
scope: this
});
},
/**
* Gibt den Wert des Suchfeldes zurück
* @memberOf BKGWebMap.Control.Search
* @return {string}
*/
getValue: function() {
return this.input.value;
},
/**
* Modifiziert den Wert des Suchfeldes
* @memberOf BKGWebMap.Control.Search
* @param {string} value - der neue Wert für das Suchfeld
*/
setValue: function(value) {
this.input.value = value;
},
/**
* Wird ausgelöst, wenn Fokus auf Input-Feld fällt. Entfernnt den Suchhinweis.
* @memberOf BKGWebMap.Control.Search
* @param {event} evt - Das auslösende Event
* @returns {boolean} <code>false</code>
*/
onFocus: function(evt){
this.input.value = '';
OpenLayers.Element.removeClass(this.input, 'hint');
this.inputEvents.un( {"focus": this.onFocus} );
return false;
},
/**
* Wird ausgelöst, wenn eine taste im Input-Feld gedrückt wird. Bei Enter startet der Suchvorgang.
* @memberOf BKGWebMap.Control.Search
* @param {event} evt - Das auslösende Event
*/
onKeyDown: function(evt) {
if(evt.keyCode == OpenLayers.Event.KEY_RETURN) {
// Enter im Inputfeld gedrückt
this.triggerSearch();
}
},
/**
* Startet den Suchvorgang und löst einen startsearch-Event aus.
*
* @memberOf BKGWebMap.Control.Search
*/
triggerSearch: function() {
this.events.triggerEvent("startsearch");
},
CLASS_NAME: "BKGWebMap.Control.Search"
});