diff --git a/images/fullpage_grouphover.png b/images/fullpage_grouphover.png old mode 100755 new mode 100644 diff --git a/images/fullpage_hover.png b/images/fullpage_hover.png old mode 100755 new mode 100644 diff --git a/images/fullpage_pressed.png b/images/fullpage_pressed.png old mode 100755 new mode 100644 diff --git a/images/fullpage_rest.png b/images/fullpage_rest.png old mode 100755 new mode 100644 diff --git a/images/home_grouphover.png b/images/home_grouphover.png old mode 100755 new mode 100644 diff --git a/images/home_hover.png b/images/home_hover.png old mode 100755 new mode 100644 diff --git a/images/home_pressed.png b/images/home_pressed.png old mode 100755 new mode 100644 diff --git a/images/home_rest.png b/images/home_rest.png old mode 100755 new mode 100644 diff --git a/images/zoomin_grouphover.png b/images/zoomin_grouphover.png old mode 100755 new mode 100644 diff --git a/images/zoomin_hover.png b/images/zoomin_hover.png old mode 100755 new mode 100644 diff --git a/images/zoomin_pressed.png b/images/zoomin_pressed.png old mode 100755 new mode 100644 diff --git a/images/zoomin_rest.png b/images/zoomin_rest.png old mode 100755 new mode 100644 diff --git a/images/zoomout_grouphover.png b/images/zoomout_grouphover.png old mode 100755 new mode 100644 diff --git a/images/zoomout_hover.png b/images/zoomout_hover.png old mode 100755 new mode 100644 diff --git a/images/zoomout_pressed.png b/images/zoomout_pressed.png old mode 100755 new mode 100644 diff --git a/images/zoomout_rest.png b/images/zoomout_rest.png old mode 100755 new mode 100644 diff --git a/src/drawer.js b/src/drawer.js index e9696012..40377aae 100644 --- a/src/drawer.js +++ b/src/drawer.js @@ -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" ); diff --git a/src/openseadragon.js b/src/openseadragon.js index 186f48c1..3095799e 100644 --- a/src/openseadragon.js +++ b/src/openseadragon.js @@ -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 diff --git a/src/viewer.js b/src/viewer.js index df8dce87..a0bcf907 100644 --- a/src/viewer.js +++ b/src/viewer.js @@ -515,12 +515,10 @@ $.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' ); } + $.addClass( this.element, 'fullpage' ); body.appendChild( this.element ); if( $.supportsFullScreen ){ @@ -590,6 +588,8 @@ $.extend( $.Viewer.prototype, $.EventHandler.prototype, $.ControlDock.prototype, for ( i = 0; i < nodes; i++ ){ body.appendChild( this.previousBody.shift() ); } + + $.removeClass( this.element, 'fullpage' ); THIS[ this.hash ].prevElementParent.insertBefore( this.element, THIS[ this.hash ].prevNextSibling @@ -602,10 +602,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, diff --git a/test/basic.js b/test/basic.js index 3c88242f..701117f2 100644 --- a/test/basic.js +++ b/test/basic.js @@ -102,6 +102,23 @@ Util.simulateViewerClick(viewer, 0.25, 0.25); }); + // ---------- + test('Fullscreen', function() { + ok(!viewer.isFullPage(), 'Started out not fullpage'); + ok(!$(viewer.element).hasClass('fullpage'), + 'No fullpage class on div'); + + viewer.setFullPage(true); + ok(viewer.isFullPage(), 'Enabled fullpage'); + ok($(viewer.element).hasClass('fullpage'), + 'Fullpage class added to div'); + + viewer.setFullPage(false); + ok(!viewer.isFullPage(), 'Disabled fullpage'); + ok(!$(viewer.element).hasClass('fullpage'), + 'Fullpage class removed from div'); + }); + // ---------- asyncTest('Close', function() { var closeHandler = function() { diff --git a/test/test.html b/test/test.html index e34f8bd0..f28f32f2 100644 --- a/test/test.html +++ b/test/test.html @@ -14,9 +14,10 @@ - + + diff --git a/test/util.js b/test/test.js similarity index 100% rename from test/util.js rename to test/test.js diff --git a/test/utils.js b/test/utils.js new file mode 100644 index 00000000..c61171ee --- /dev/null +++ b/test/utils.js @@ -0,0 +1,52 @@ +(function() { + module("utils"); + + test("addRemoveClass", function() { + var div = OpenSeadragon.makeNeutralElement('div'); + strictEqual(div.className, '', + "makeNeutralElement set no classes"); + + OpenSeadragon.addClass(div, 'foo'); + strictEqual(div.className, 'foo', + "Added first class"); + OpenSeadragon.addClass(div, 'bar'); + strictEqual(div.className, 'foo bar', + "Added second class"); + OpenSeadragon.addClass(div, 'baz'); + strictEqual(div.className, 'foo bar baz', + "Added third class"); + OpenSeadragon.addClass(div, 'plugh'); + strictEqual(div.className, 'foo bar baz plugh', + "Added fourth class"); + + OpenSeadragon.addClass(div, 'foo'); + strictEqual(div.className, 'foo bar baz plugh', + "Re-added first class"); + OpenSeadragon.addClass(div, 'bar'); + strictEqual(div.className, 'foo bar baz plugh', + "Re-added middle class"); + OpenSeadragon.addClass(div, 'plugh'); + strictEqual(div.className, 'foo bar baz plugh', + "Re-added last class"); + + OpenSeadragon.removeClass(div, 'xyzzy'); + strictEqual(div.className, 'foo bar baz plugh', + "Removed nonexistent class"); + OpenSeadragon.removeClass(div, 'ba'); + strictEqual(div.className, 'foo bar baz plugh', + "Removed nonexistent class with existent substring"); + + OpenSeadragon.removeClass(div, 'bar'); + strictEqual(div.className, 'foo baz plugh', + "Removed middle class"); + OpenSeadragon.removeClass(div, 'plugh'); + strictEqual(div.className, 'foo baz', + "Removed last class"); + OpenSeadragon.removeClass(div, 'foo'); + strictEqual(div.className, 'baz', + "Removed first class"); + OpenSeadragon.removeClass(div, 'baz'); + strictEqual(div.className, '', + "Removed only class"); + }); +})();