added site files

EnlighterJS/Source/UI/TabPane.js

@@ -0,0 +1,120 @@
+/*
+---
+name: TapPane
+description: Displays multiple code-blocks within a group
+
+license: MIT-style X11 License
+
+authors:
+  - Andi Dittrich
+  
+requires:
+  - Core/1.4.5
+
+provides: [EnlighterJS.UI.TabPane]
+...
+*/
+EJS.UI.TabPane = new Class({
+		
+	// wrapper container which contains the controls + panes
+	container: null,
+	
+	// control container - contains the tab names
+	controlContainer: null,
+	
+	// pane container - contains the tab panes
+	paneContainer: null,
+	
+	// array of tab objects
+	tabs: [],
+	
+	// current active tab
+	selectedTabIndex: 0,
+	
+	/**
+	 * @constructs
+	 * @param {String} cssClassname The class-name of the outer container
+	 */
+	initialize : function(cssClassname) {
+		// create container
+		this.container = new EJS.Dom.Element('div', {
+			'class': 'EnlighterJSTabPane ' + cssClassname.toLowerCase() + 'EnlighterJSTabPane'
+		});
+		
+		// create container structure
+		//	<div class="EnlighterJSTabPane ...">
+		//    <div class="controls">
+		//       <ul> <li>Tab1</li> .... </ul>
+		//    </div>
+		//    <div class="pane">
+		//      <div>Enlighter Tab1</div>
+		//      <div>Enlighter Tab2</div>
+		//    </div>
+		//  </div>
+		this.controlContainer = new EJS.Dom.Element('ul');
+		this.paneContainer = new EJS.Dom.Element('div', {
+			'class': 'pane'
+		});		
+		var controlWrapper = new EJS.Dom.Element('div', {
+			'class': 'controls'
+		});
+		controlWrapper.grab(this.controlContainer);
+
+		this.container.grab(controlWrapper);
+		this.container.grab(this.paneContainer);
+	},
+	
+	selectTab: function(index){
+		if (index < this.tabs.length){
+			// hide current tab
+			this.tabs[this.selectedTabIndex].pane.setStyle('display', 'none');
+			this.tabs[this.selectedTabIndex].control.removeClass('selected');
+			
+			// show selected tab
+			this.tabs[index].pane.setStyle('display', 'block');
+			this.tabs[index].control.addClass('selected');
+			
+			// store selected index
+			this.selectedTabIndex = index;
+		}
+	},
+	
+	addTab: function(name){
+		// create new control element
+		var ctrl = new EJS.Dom.Element('li', {
+			text: name
+		});
+		this.controlContainer.grab(ctrl);
+		
+		// get new tab position
+		var tabIndex = this.tabs.length;
+		
+		// select event - display tab
+		ctrl.addEvent('click', function(){
+			this.selectTab(tabIndex);
+		}.bind(this));
+		
+		// create new tab element
+		var tab = new EJS.Dom.Element('div', {
+			'styles': {
+				'display': 'none'
+			}
+		});
+		this.paneContainer.grab(tab);
+		
+		// store new tab
+		this.tabs.push({
+			control: ctrl,
+			pane: tab
+		});
+		
+		// return created tab element
+		return tab;
+	},
+		
+	getContainer: function(){
+		return this.container;
+	}
+
+	
+});