diff options
Diffstat (limited to 'subsonic-main/src/main/webapp/script/fancyzoom/FancyZoomHTML.js')
| -rw-r--r-- | subsonic-main/src/main/webapp/script/fancyzoom/FancyZoomHTML.js | 318 |
1 files changed, 318 insertions, 0 deletions
diff --git a/subsonic-main/src/main/webapp/script/fancyzoom/FancyZoomHTML.js b/subsonic-main/src/main/webapp/script/fancyzoom/FancyZoomHTML.js new file mode 100644 index 00000000..7644a9a8 --- /dev/null +++ b/subsonic-main/src/main/webapp/script/fancyzoom/FancyZoomHTML.js @@ -0,0 +1,318 @@ +// FancyZoomHTML.js - v1.0 +// Used to draw necessary HTML elements for FancyZoom +// +// Copyright (c) 2008 Cabel Sasser / Panic Inc +// All rights reserved. + +function insertZoomHTML() { + + // All of this junk creates the three <div>'s used to hold the closebox, image, and zoom shadow. + + var inBody = document.getElementsByTagName("body").item(0); + + // WAIT SPINNER + + var inSpinbox = document.createElement("div"); + inSpinbox.setAttribute('id', 'ZoomSpin'); + inSpinbox.style.position = 'absolute'; + inSpinbox.style.left = '10px'; + inSpinbox.style.top = '10px'; + inSpinbox.style.visibility = 'hidden'; + inSpinbox.style.zIndex = '525'; + inBody.insertBefore(inSpinbox, inBody.firstChild); + + var inSpinImage = document.createElement("img"); + inSpinImage.setAttribute('id', 'SpinImage'); + inSpinImage.setAttribute('src', zoomImagesURI+'zoom-spin-1.png'); + inSpinbox.appendChild(inSpinImage); + + // ZOOM IMAGE + // + // <div id="ZoomBox"> + // <a href="javascript:zoomOut();"><img src="/images/spacer.gif" id="ZoomImage" border="0"></a> <!-- THE IMAGE --> + // <div id="ZoomClose"> + // <a href="javascript:zoomOut();"><img src="/images/closebox.png" width="30" height="30" border="0"></a> + // </div> + // </div> + + var inZoombox = document.createElement("div"); + inZoombox.setAttribute('id', 'ZoomBox'); + + inZoombox.style.position = 'absolute'; + inZoombox.style.left = '10px'; + inZoombox.style.top = '10px'; + inZoombox.style.visibility = 'hidden'; + inZoombox.style.zIndex = '499'; + + inBody.insertBefore(inZoombox, inSpinbox.nextSibling); + + var inImage1 = document.createElement("img"); + inImage1.onclick = function (event) { zoomOut(this, event); return false; }; + inImage1.setAttribute('src',zoomImagesURI+'spacer.gif'); + inImage1.setAttribute('id','ZoomImage'); + inImage1.setAttribute('border', '0'); + // inImage1.setAttribute('onMouseOver', 'zoomMouseOver();') + // inImage1.setAttribute('onMouseOut', 'zoomMouseOut();') + + // This must be set first, so we can later test it using webkitBoxShadow. + inImage1.setAttribute('style', '-webkit-box-shadow: '+shadowSettings+'0.0)'); + inImage1.style.display = 'block'; + inImage1.style.width = '10px'; + inImage1.style.height = '10px'; + inImage1.style.cursor = 'pointer'; // -webkit-zoom-out? + inZoombox.appendChild(inImage1); + + var inClosebox = document.createElement("div"); + inClosebox.setAttribute('id', 'ZoomClose'); + inClosebox.style.position = 'absolute'; + + // In MSIE, we need to put the close box inside the image. + // It's 2008 and I'm having to do a browser detect? Sigh. + if (browserIsIE) { + inClosebox.style.left = '-1px'; + inClosebox.style.top = '0px'; + } else { + inClosebox.style.left = '-15px'; + inClosebox.style.top = '-15px'; + } + + inClosebox.style.visibility = 'hidden'; + inZoombox.appendChild(inClosebox); + + var inImage2 = document.createElement("img"); + inImage2.onclick = function (event) { zoomOut(this, event); return false; }; + inImage2.setAttribute('src',zoomImagesURI+'closebox.png'); + inImage2.setAttribute('width','30'); + inImage2.setAttribute('height','30'); + inImage2.setAttribute('border','0'); + inImage2.style.cursor = 'pointer'; + inClosebox.appendChild(inImage2); + + // SHADOW + // Only draw the table-based shadow if the programatic webkitBoxShadow fails! + // Also, don't draw it if we're IE -- it wouldn't look quite right anyway. + + if (! document.getElementById('ZoomImage').style.webkitBoxShadow && ! browserIsIE) { + + // SHADOW BASE + + var inFixedBox = document.createElement("div"); + inFixedBox.setAttribute('id', 'ShadowBox'); + inFixedBox.style.position = 'absolute'; + inFixedBox.style.left = '50px'; + inFixedBox.style.top = '50px'; + inFixedBox.style.width = '100px'; + inFixedBox.style.height = '100px'; + inFixedBox.style.visibility = 'hidden'; + inFixedBox.style.zIndex = '498'; + inBody.insertBefore(inFixedBox, inZoombox.nextSibling); + + // SHADOW + // Now, the shadow table. Skip if not compatible, or irrevelant with -box-shadow. + + // <div id="ShadowBox"><table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"> X + // <tr height="25"> + // <td width="27"><img src="/images/zoom-shadow1.png" width="27" height="25"></td> + // <td background="/images/zoom-shadow2.png"> </td> + // <td width="27"><img src="/images/zoom-shadow3.png" width="27" height="25"></td> + // </tr> + + var inShadowTable = document.createElement("table"); + inShadowTable.setAttribute('border', '0'); + inShadowTable.setAttribute('width', '100%'); + inShadowTable.setAttribute('height', '100%'); + inShadowTable.setAttribute('cellpadding', '0'); + inShadowTable.setAttribute('cellspacing', '0'); + inFixedBox.appendChild(inShadowTable); + + var inShadowTbody = document.createElement("tbody"); // Needed for IE (for HTML4). + inShadowTable.appendChild(inShadowTbody); + + var inRow1 = document.createElement("tr"); + inRow1.style.height = '25px'; + inShadowTbody.appendChild(inRow1); + + var inCol1 = document.createElement("td"); + inCol1.style.width = '27px'; + inRow1.appendChild(inCol1); + var inShadowImg1 = document.createElement("img"); + inShadowImg1.setAttribute('src', zoomImagesURI+'zoom-shadow1.png'); + inShadowImg1.setAttribute('width', '27'); + inShadowImg1.setAttribute('height', '25'); + inShadowImg1.style.display = 'block'; + inCol1.appendChild(inShadowImg1); + + var inCol2 = document.createElement("td"); + inCol2.setAttribute('background', zoomImagesURI+'zoom-shadow2.png'); + inRow1.appendChild(inCol2); + // inCol2.innerHTML = '<img src='; + var inSpacer1 = document.createElement("img"); + inSpacer1.setAttribute('src',zoomImagesURI+'spacer.gif'); + inSpacer1.setAttribute('height', '1'); + inSpacer1.setAttribute('width', '1'); + inSpacer1.style.display = 'block'; + inCol2.appendChild(inSpacer1); + + var inCol3 = document.createElement("td"); + inCol3.style.width = '27px'; + inRow1.appendChild(inCol3); + var inShadowImg3 = document.createElement("img"); + inShadowImg3.setAttribute('src', zoomImagesURI+'zoom-shadow3.png'); + inShadowImg3.setAttribute('width', '27'); + inShadowImg3.setAttribute('height', '25'); + inShadowImg3.style.display = 'block'; + inCol3.appendChild(inShadowImg3); + + // <tr> + // <td background="/images/zoom-shadow4.png"> </td> + // <td bgcolor="#ffffff"> </td> + // <td background="/images/zoom-shadow5.png"> </td> + // </tr> + + inRow2 = document.createElement("tr"); + inShadowTbody.appendChild(inRow2); + + var inCol4 = document.createElement("td"); + inCol4.setAttribute('background', zoomImagesURI+'zoom-shadow4.png'); + inRow2.appendChild(inCol4); + // inCol4.innerHTML = ' '; + var inSpacer2 = document.createElement("img"); + inSpacer2.setAttribute('src',zoomImagesURI+'spacer.gif'); + inSpacer2.setAttribute('height', '1'); + inSpacer2.setAttribute('width', '1'); + inSpacer2.style.display = 'block'; + inCol4.appendChild(inSpacer2); + + var inCol5 = document.createElement("td"); + inCol5.setAttribute('bgcolor', '#ffffff'); + inRow2.appendChild(inCol5); + // inCol5.innerHTML = ' '; + var inSpacer3 = document.createElement("img"); + inSpacer3.setAttribute('src',zoomImagesURI+'spacer.gif'); + inSpacer3.setAttribute('height', '1'); + inSpacer3.setAttribute('width', '1'); + inSpacer3.style.display = 'block'; + inCol5.appendChild(inSpacer3); + + var inCol6 = document.createElement("td"); + inCol6.setAttribute('background', zoomImagesURI+'zoom-shadow5.png'); + inRow2.appendChild(inCol6); + // inCol6.innerHTML = ' '; + var inSpacer4 = document.createElement("img"); + inSpacer4.setAttribute('src',zoomImagesURI+'spacer.gif'); + inSpacer4.setAttribute('height', '1'); + inSpacer4.setAttribute('width', '1'); + inSpacer4.style.display = 'block'; + inCol6.appendChild(inSpacer4); + + // <tr height="26"> + // <td width="27"><img src="/images/zoom-shadow6.png" width="27" height="26"</td> + // <td background="/images/zoom-shadow7.png"> </td> + // <td width="27"><img src="/images/zoom-shadow8.png" width="27" height="26"></td> + // </tr> + // </table> + + var inRow3 = document.createElement("tr"); + inRow3.style.height = '26px'; + inShadowTbody.appendChild(inRow3); + + var inCol7 = document.createElement("td"); + inCol7.style.width = '27px'; + inRow3.appendChild(inCol7); + var inShadowImg7 = document.createElement("img"); + inShadowImg7.setAttribute('src', zoomImagesURI+'zoom-shadow6.png'); + inShadowImg7.setAttribute('width', '27'); + inShadowImg7.setAttribute('height', '26'); + inShadowImg7.style.display = 'block'; + inCol7.appendChild(inShadowImg7); + + var inCol8 = document.createElement("td"); + inCol8.setAttribute('background', zoomImagesURI+'zoom-shadow7.png'); + inRow3.appendChild(inCol8); + // inCol8.innerHTML = ' '; + var inSpacer5 = document.createElement("img"); + inSpacer5.setAttribute('src',zoomImagesURI+'spacer.gif'); + inSpacer5.setAttribute('height', '1'); + inSpacer5.setAttribute('width', '1'); + inSpacer5.style.display = 'block'; + inCol8.appendChild(inSpacer5); + + var inCol9 = document.createElement("td"); + inCol9.style.width = '27px'; + inRow3.appendChild(inCol9); + var inShadowImg9 = document.createElement("img"); + inShadowImg9.setAttribute('src', zoomImagesURI+'zoom-shadow8.png'); + inShadowImg9.setAttribute('width', '27'); + inShadowImg9.setAttribute('height', '26'); + inShadowImg9.style.display = 'block'; + inCol9.appendChild(inShadowImg9); + } + + if (includeCaption) { + + // CAPTION + // + // <div id="ZoomCapDiv" style="margin-left: 13px; margin-right: 13px;"> + // <table border="1" cellpadding="0" cellspacing="0"> + // <tr height="26"> + // <td><img src="zoom-caption-l.png" width="13" height="26"></td> + // <td rowspan="3" background="zoom-caption-fill.png"><div id="ZoomCaption"></div></td> + // <td><img src="zoom-caption-r.png" width="13" height="26"></td> + // </tr> + // </table> + // </div> + + var inCapDiv = document.createElement("div"); + inCapDiv.setAttribute('id', 'ZoomCapDiv'); + inCapDiv.style.position = 'absolute'; + inCapDiv.style.visibility = 'hidden'; + inCapDiv.style.marginLeft = 'auto'; + inCapDiv.style.marginRight = 'auto'; + inCapDiv.style.zIndex = '501'; + + inBody.insertBefore(inCapDiv, inZoombox.nextSibling); + + var inCapTable = document.createElement("table"); + inCapTable.setAttribute('border', '0'); + inCapTable.setAttribute('cellPadding', '0'); // Wow. These honestly need to + inCapTable.setAttribute('cellSpacing', '0'); // be intercapped to work in IE. WTF? + inCapDiv.appendChild(inCapTable); + + var inTbody = document.createElement("tbody"); // Needed for IE (for HTML4). + inCapTable.appendChild(inTbody); + + var inCapRow1 = document.createElement("tr"); + inTbody.appendChild(inCapRow1); + + var inCapCol1 = document.createElement("td"); + inCapCol1.setAttribute('align', 'right'); + inCapRow1.appendChild(inCapCol1); + var inCapImg1 = document.createElement("img"); + inCapImg1.setAttribute('src', zoomImagesURI+'zoom-caption-l.png'); + inCapImg1.setAttribute('width', '13'); + inCapImg1.setAttribute('height', '26'); + inCapImg1.style.display = 'block'; + inCapCol1.appendChild(inCapImg1); + + var inCapCol2 = document.createElement("td"); + inCapCol2.setAttribute('background', zoomImagesURI+'zoom-caption-fill.png'); + inCapCol2.setAttribute('id', 'ZoomCaption'); + inCapCol2.setAttribute('valign', 'middle'); + inCapCol2.style.fontSize = '14px'; + inCapCol2.style.fontFamily = 'Helvetica'; + inCapCol2.style.fontWeight = 'bold'; + inCapCol2.style.color = '#ffffff'; + inCapCol2.style.textShadow = '0px 2px 4px #000000'; + inCapCol2.style.whiteSpace = 'nowrap'; + inCapRow1.appendChild(inCapCol2); + + var inCapCol3 = document.createElement("td"); + inCapRow1.appendChild(inCapCol3); + var inCapImg2 = document.createElement("img"); + inCapImg2.setAttribute('src', zoomImagesURI+'zoom-caption-r.png'); + inCapImg2.setAttribute('width', '13'); + inCapImg2.setAttribute('height', '26'); + inCapImg2.style.display = 'block'; + inCapCol3.appendChild(inCapImg2); + } +}
\ No newline at end of file |