Source: BKGWebMap/Util/Toggler.js

/*
 * Copyright (c) 2013 Bundesamt für 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/Util.js
 * @requires BKGWebMap/Util.js
 */

/**
 * @classdesc Tool zum Ein- und Ausblenden von HTML-Elementen.
 * 
 * Ein Toggler besteht aus einem Steuerelement, welches durch anklicken
 * ein Inhaltselement ein- bzw. ausblendet.
 *
 * @constructor BKGWebMap.Util.Toggler
 * @param {object} options - Optionen zur Modifikation der Parameter
 */
BKGWebMap.Util.Toggler = OpenLayers.Class({

  /**
   * HTML-Element des Steuerelements.
   * @memberOf BKGWebMap.Util.Toggler
   * @type {node}
   */
	toggler: null,

  /**
   * HTML-Element für den Inhalt, der ein- bzw. ausgeblendet wird.
   * @memberOf BKGWebMap.Util.Toggler
   * @type {node}
   */
	content: null,

	/**
   * Status des Contents
   * @memberOf BKGWebMap.Util.Toggler
   * @type {boolean}
   */
	closed: true,
	
	/**
	 * CSS-Klasse für geschlossenen Zustand
	 * @memberOf BKGWebMap.Util.Toggler
	 * @type {string}
	 */
	closedClass: 'closed',

  /**
   * CSS-Klasse für geöffneten Zustand
   * @memberOf BKGWebMap.Util.Toggler
   * @type {string}
   */
	openedClass: 'opened',

  /**
   * Events Instanz zur Überwachung von Toggler-spezifischen Events
   *
   * Folgende Events stehen zur Verfügung:
   * statechanged: Änderung des aktuellen Zustand
   *
	 * @memberOf BKGWebMap.Util.Toggler
	 * @type {OpenLayers.Events}
   */
  events: null,

  /**
   * Titel des Togglers für verschiedene Stati. <code>null</code> für keine Modifikation.
   * @memberOf BKGWebMap.Util.Toggler
   * @type {object.<string,string>}
   */
	titles : {
		closed: null,
		opened: null
	},

  initialize: function(toggler, content, options) {
    OpenLayers.Util.extend(this, options);

    this.toggler = toggler;
    this.content = content;

    this.events = new OpenLayers.Events(this);

    OpenLayers.Event.observe(this.toggler, "click", OpenLayers.Function.bindAsEventListener(this.toggle, this));

    this.setState(this.closed);
  },

  observeTouchEvents: function() {
    OpenLayers.Event.observe(this.toggler, "touchstart", OpenLayers.Function.bindAsEventListener(this.toggle, this));
  },

  destroy: function() {
    if(this.events) {
      this.events.destroy();
      this.events = null;
    }

    OpenLayers.Event.stopObserving(this.toggler, "click");
    OpenLayers.Event.stopObserving(this.toggler, "touchstart");

    this.toggler = null;
    this.content = null;
  },
    
  /**
   * Event-Handler zum ein- oder ausblenden des Contents
   * @param {Event} evt
   * @memberOf BKGWebMap.Util.Toggler
   */
	toggle: function(evt) {
		this.setState(!this.closed);
    if(evt) {
      OpenLayers.Event.stop(evt, true);
    }
	},
	
  /**
   * Blendet den Content ein oder aus. Je nach <code>closed</code>.
   * @param {boolean} closed - <code>true</code> für geschlossenen Status und damit ausgeblendeten Content.
   * @memberOf BKGWebMap.Util.Toggler
   */
	setState: function(closed) {
		this.closed = closed;

		OpenLayers.Element.removeClass(this.toggler, closed ? this.openedClass : this.closedClass);
		OpenLayers.Element.removeClass(this.content, closed ? this.openedClass : this.closedClass);
		OpenLayers.Element.addClass(this.toggler, closed ? this.closedClass: this.openedClass);
    OpenLayers.Element.addClass(this.content, closed ? this.closedClass: this.openedClass);

    if(this.titles.opened || this.titles.closed) {
      this.toggler.innerHTML = closed ? this.titles.closed : this.titles.opened;
    }

    this.events.triggerEvent("statechanged");
	},

  CLASS_NAME: "BKGWebMap.Util.Toggler"
});