Add addClass()/removeClass() utility functions

This commit is contained in:
Benjamin Gilbert 2013-05-12 22:53:41 -04:00
parent 4e5393efe7
commit 522bcbf058
3 changed files with 45 additions and 9 deletions

View File

@ -377,7 +377,7 @@ $.Drawer.prototype = {
element.href = "#/overlay/"+id;
}
element.id = id;
element.className = element.className + " " + ( overlay.className ?
$.addClass( element, overlay.className ?
overlay.className :
"openseadragon-overlay"
);

View File

@ -1025,6 +1025,48 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
},
/**
* Add the specified CSS class to the element if not present.
* @name $.addClass
* @function
* @param {Element|String} element
* @param {String} className
*/
addClass: function( element, className ) {
element = $.getElement( element );
if ( ! element.className ) {
element.className = className;
} else if ( ( ' ' + element.className + ' ' ).
indexOf( ' ' + className + ' ' ) === -1 ) {
element.className += ' ' + className;
}
},
/**
* Remove the specified CSS class from the element.
* @name $.removeClass
* @function
* @param {Element|String} element
* @param {String} className
*/
removeClass: function( element, className ) {
var oldClasses,
newClasses = [],
i;
element = $.getElement( element );
oldClasses = element.className.split( /\s+/ );
for ( i = 0; i < oldClasses.length; i++ ) {
if ( oldClasses[ i ] && oldClasses[ i ] !== className ) {
newClasses.push( oldClasses[ i ] );
}
}
element.className = newClasses.join(' ');
},
/**
* Adds an event listener for the given element, eventName and handler.
* @function

View File

@ -515,10 +515,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
//Make sure the user has some ability to style the toolbar based
//on the mode
this.toolbar.element.setAttribute(
'class',
this.toolbar.element.className +" fullpage"
);
$.addClass( this.toolbar.element, 'fullpage' );
}
body.appendChild( this.element );
@ -602,10 +599,7 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype,
//Make sure the user has some ability to style the toolbar based
//on the mode
this.toolbar.element.setAttribute(
'class',
this.toolbar.element.className.replace('fullpage','')
);
$.removeClass( this.toolbar.element, 'fullpage' );
//this.toolbar.element.style.position = 'relative';
this.toolbar.parentNode.insertBefore(
this.toolbar.element,