google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Wrap tabs in IIFE

master
Surma 2015-08-05 12:05:31 +01:00
parent 05ada74ec8
commit 0aef287dda
1 changed files with 125 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

248
src/tabs/tabs.js
View File

@ -15,138 +15,140 @@
* limitations under the License. * limitations under the License.
*/ */
/** (function() {
* Class constructor for Tabs MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
* @param {HTMLElement} element The element that will be upgraded.
*/
function MaterialTabs(element) {
'use strict'; 'use strict';
// Stores the HTML element. /**
this.element_ = element; * Class constructor for Tabs MDL component.
* Implements MDL component design pattern defined at:
* https://github.com/jasonmayes/mdl-component-design-pattern
*
* @param {HTMLElement} element The element that will be upgraded.
*/
var MaterialTabs = function MaterialTabs(element) {
// Stores the HTML element.
this.element_ = element;
// Initialize instance. // Initialize instance.
this.init(); this.init();
} };
window.MaterialTabs = MaterialTabs;
/** /**
* Store constants in one place so they can be updated easily. * Store constants in one place so they can be updated easily.
* @enum {string} *
* @private * @enum {String}
*/ * @private
MaterialTabs.prototype.Constant_ = { */
// None at the moment. MaterialTabs.prototype.Constant_ = {
}; // None at the moment.
};
/** /**
* Store strings for class names defined by this component that are used in * Store strings for class names defined by this component that are used in
* JavaScript. This allows us to simply change it in one place should we * JavaScript. This allows us to simply change it in one place should we
* decide to modify at a later date. * decide to modify at a later date.
* @enum {string} *
* @private * @enum {String}
*/ * @private
MaterialTabs.prototype.CssClasses_ = { */
TAB_CLASS: 'mdl-tabs__tab', MaterialTabs.prototype.CssClasses_ = {
PANEL_CLASS: 'mdl-tabs__panel', TAB_CLASS: 'mdl-tabs__tab',
ACTIVE_CLASS: 'is-active', PANEL_CLASS: 'mdl-tabs__panel',
UPGRADED_CLASS: 'is-upgraded', ACTIVE_CLASS: 'is-active',
UPGRADED_CLASS: 'is-upgraded',
MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect', MDL_JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container', MDL_RIPPLE_CONTAINER: 'mdl-tabs__ripple-container',
MDL_RIPPLE: 'mdl-ripple', MDL_RIPPLE: 'mdl-ripple',
MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events' MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
}; };
/** /**
* Handle clicks to a tabs component * Handle clicks to a tabs component
* @private *
*/ * @private
MaterialTabs.prototype.initTabs_ = function(e) { */
'use strict'; MaterialTabs.prototype.initTabs_ = function() {
if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
if (this.element_.classList.contains(this.CssClasses_.MDL_JS_RIPPLE_EFFECT)) { this.element_.classList.add(
this.element_.classList.add( this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
this.CssClasses_.MDL_JS_RIPPLE_EFFECT_IGNORE_EVENTS);
}
// Select element tabs, document panels
this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
this.panels_ =
this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
// Create new tabs for each tab element
for (var i = 0; i < this.tabs_.length; i++) {
new MaterialTab(this.tabs_[i], this);
}
this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
};
/**
* Reset tab state, dropping active classes
* @private
*/
MaterialTabs.prototype.resetTabState_ = function() {
'use strict';
for (var k = 0; k < this.tabs_.length; k++) {
this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
}
};
/**
* Reset panel state, droping active classes
* @private
*/
MaterialTabs.prototype.resetPanelState_ = function() {
'use strict';
for (var j = 0; j < this.panels_.length; j++) {
this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
}
};
MaterialTabs.prototype.init = function() {
'use strict';
if (this.element_) {
this.initTabs_();
}
};
function MaterialTab(tab, ctx) {
'use strict';
if (tab) {
if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
var rippleContainer = document.createElement('span');
rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
var ripple = document.createElement('span');
ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
rippleContainer.appendChild(ripple);
tab.appendChild(rippleContainer);
} }
tab.addEventListener('click', function(e) { // Select element tabs, document panels
e.preventDefault(); this.tabs_ = this.element_.querySelectorAll('.' + this.CssClasses_.TAB_CLASS);
var href = tab.href.split('#')[1]; this.panels_ =
var panel = ctx.element_.querySelector('#' + href); this.element_.querySelectorAll('.' + this.CssClasses_.PANEL_CLASS);
ctx.resetTabState_();
ctx.resetPanelState_();
tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
});
// Create new tabs for each tab element
for (var i = 0; i < this.tabs_.length; i++) {
new MaterialTab(this.tabs_[i], this);
}
this.element_.classList.add(this.CssClasses_.UPGRADED_CLASS);
};
/**
* Reset tab state, dropping active classes
*
* @private
*/
MaterialTabs.prototype.resetTabState_ = function() {
for (var k = 0; k < this.tabs_.length; k++) {
this.tabs_[k].classList.remove(this.CssClasses_.ACTIVE_CLASS);
}
};
/**
* Reset panel state, droping active classes
*
* @private
*/
MaterialTabs.prototype.resetPanelState_ = function() {
for (var j = 0; j < this.panels_.length; j++) {
this.panels_[j].classList.remove(this.CssClasses_.ACTIVE_CLASS);
}
};
/**
* Initialize element.
*/
MaterialTabs.prototype.init = function() {
if (this.element_) {
this.initTabs_();
}
};
function MaterialTab(tab, ctx) {
if (tab) {
if (ctx.element_.classList.contains(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT)) {
var rippleContainer = document.createElement('span');
rippleContainer.classList.add(ctx.CssClasses_.MDL_RIPPLE_CONTAINER);
rippleContainer.classList.add(ctx.CssClasses_.MDL_JS_RIPPLE_EFFECT);
var ripple = document.createElement('span');
ripple.classList.add(ctx.CssClasses_.MDL_RIPPLE);
rippleContainer.appendChild(ripple);
tab.appendChild(rippleContainer);
}
tab.addEventListener('click', function(e) {
e.preventDefault();
var href = tab.href.split('#')[1];
var panel = ctx.element_.querySelector('#' + href);
ctx.resetTabState_();
ctx.resetPanelState_();
tab.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
panel.classList.add(ctx.CssClasses_.ACTIVE_CLASS);
});
}
} }
}
// The component registers itself. It can assume componentHandler is available // The component registers itself. It can assume componentHandler is available
// in the global scope. // in the global scope.
componentHandler.register({ componentHandler.register({
constructor: MaterialTabs, constructor: MaterialTabs,
classAsString: 'MaterialTabs', classAsString: 'MaterialTabs',
cssClass: 'mdl-js-tabs' cssClass: 'mdl-js-tabs'
}); });
})();