mirror/openseadragon
1
0
Fork 0
mirror of https://github.com/openseadragon/openseadragon.git synced 2024-11-22 13:16:10 +03:00
Code Issues Projects Releases Wiki Activity

Refactor OpenSeadragon.makeCenteredNode

Browse Source 
* Use CSS display tables for vertical centering (tested back to IE8)
* Use the DOM instead of string concatenation
* Remove redundant styles ($.makeNeutralElement sets the same values
  for margin, padding & border)
* Return the outer wrapper element to ease DOM addition & removal
This commit is contained in:
Chris Adams 2013-06-28 15:52:48 -04:00
parent 1f345e4cc5
commit 9de45ba281
1 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/openseadragon.js
View File

@ -882,47 +882,49 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
/** /**
* Wraps the given element in a nest of divs so that the element can * Wraps the given element in a nest of divs so that the element can
* be easily centered. * be easily centered using CSS tables
* @function * @function
* @name OpenSeadragon.makeCenteredNode * @name OpenSeadragon.makeCenteredNode
* @param {Element|String} element * @param {Element|String} element
* @returns {Element} * @returns {Element} outermost wrapper element
*/ */
makeCenteredNode: function( element ) { makeCenteredNode: function( element ) {
// Convert a possible ID to an actual HTMLElement
var div = $.makeNeutralElement( "div" ),
html = [],
innerDiv,
innerDivs;
element = $.getElement( element ); element = $.getElement( element );
//TODO: I dont understand the use of # inside the style attributes /*
// below. Invetigate the results of the constructed html in CSS tables require you to have a display:table/row/cell hierarchy so we need to create
// the browser and clean up the mark-up to make this clearer. three nested wrapper divs:
html.push('<div style="display:table; height:100%; width:100%;'); */
html.push('border:none; margin:0px; padding:0px;'); // neutralizing
html.push('#position:relative; overflow:hidden; text-align:left;">');
html.push('<div style="#position:absolute; #top:50%; width:100%; ');
html.push('border:none; margin:0px; padding:0px;'); // neutralizing
html.push('display:table-cell; vertical-align:middle;">');
html.push('<div style="#position:relative; #top:-50%; width:100%; ');
html.push('border:none; margin:0px; padding:0px;'); // neutralizing
html.push('text-align:center;"></div></div></div>');
div.innerHTML = html.join( '' ); var wrappers = [
div = div.firstChild; $.makeNeutralElement( 'div' ),
$.makeNeutralElement( 'div' ),
$.makeNeutralElement( 'div' )
];
innerDiv = div; // It feels like we should be able to pass style dicts to makeNeutralElement:
innerDivs = div.getElementsByTagName( "div" ); $.extend(wrappers[0].style, {
while ( innerDivs.length > 0 ) { display: "table",
innerDiv = innerDivs[ 0 ]; height: "100%",
innerDivs = innerDiv.getElementsByTagName( "div" ); width: "100%"
} });
innerDiv.appendChild( element ); $.extend(wrappers[1].style, {
display: "table-row"
});
return div; $.extend(wrappers[2].style, {
display: "table-cell",
verticalAlign: "middle",
textAlign: "center"
});
wrappers[0].appendChild(wrappers[1]);
wrappers[1].appendChild(wrappers[2]);
wrappers[2].appendChild(element);
return wrappers[0];
}, },