diff options
Diffstat (limited to 'WebContent/VAADIN/themes/tests-featurebrowser/layouts/featurebrowser-mainlayout.html')
| -rw-r--r-- | WebContent/VAADIN/themes/tests-featurebrowser/layouts/featurebrowser-mainlayout.html | 252 |
1 files changed, 252 insertions, 0 deletions
diff --git a/WebContent/VAADIN/themes/tests-featurebrowser/layouts/featurebrowser-mainlayout.html b/WebContent/VAADIN/themes/tests-featurebrowser/layouts/featurebrowser-mainlayout.html new file mode 100644 index 0000000000..52eec9f64f --- /dev/null +++ b/WebContent/VAADIN/themes/tests-featurebrowser/layouts/featurebrowser-mainlayout.html @@ -0,0 +1,252 @@ +<html> +<head> +<link REL="stylesheet" TYPE="text/css"> +</head> + +<body><div id="_UID_main" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;"><img src="img/header.png" /> + + <div id="_UID_features" style="top: 62px; width: 200px; position: absolute; overflow: auto; left: 0;" location="tree"> + <div style="width: 100%; height: 100%; border: 1px solid red;">tree</div> + </div> + + <div id="_UID_demo" style="overflow: auto; position: absolute; top: 62px; left: 215px; "> + <table width="100%" height="100%" cellspacing="0" cellpadding="0" + border="0"> + <tbody> + <tr> + <td valign="middle" align="center"> + <table style="width:100%" cellspacing="0" cellpadding="0" + border="0"> + <tbody> + <tr> + <td style="text-align: left;" location="demo"> + <div style="width: 100%; height: 100%; border: 1px solid red;">demo</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </div> + + <div id="_UID_tabs" style="overflow: hidden; position: absolute; left: 215px;" location="tabsheet"> + <div style="width: 100%; height: 100%; border: 1px solid red;">tabsheet</div> + </div> + + <img id="_UID_prop-toggle" src="img/show_properties.png" style=" top: 23px; position: absolute;"/> + + <div id="_UID_props" style="overflow: hidden; position: absolute; top: 23px; width: 0px;" location="properties"> + <div style="width: 100%; height: 100%; border: 1px solid red;">properties</div> + </div> + + <div id="_UID_cntr" + style="overflow: hidden; position: absolute; bottom: 10px; left: 0pt; width: 200px; height: 50px;"> + <table width="100%" height="100%" border="0"> + <tbody> + <tr> + <td width="50%" valign="middle" align="center" id="_UID_cntr-left" location="themes">themes</td> + <td width="50%" valign="middle" align="center" id="_UID_cntr-right" location="restart">restart</td> + </tr> + </tbody> + </table> + </div> + + <img id="_UID_divider" src="img/tab_handle.png" style="position: absolute;" /> + +</div> + + +<script type="text/javascript"> + +/** Recalculate tabs content width */ +_UID_updateTabs = function() { + try { + var tabsDiv = document.getElementById("_UID_tabs"); + var tabsComponent = itmill.themes.Demo.prototype._UID_elemByIndex(tabsDiv.childNodes,0); + if (tabsComponent == null) return; + var tabs = itmill.themes.Demo.prototype._UID_elemByIndex(tabsComponent.childNodes,0); + if (tabs == null) return; + var content = itmill.themes.Demo.prototype._UID_elemByIndex(tabsComponent.childNodes,1); + if (content == null) return; + content.style.height="" + (tabsDiv.offsetHeight - tabs.offsetHeight-13) + "px"; + content.style.borderBottom="0"; + content.style.overflow='auto'; + var iframe = content.getElementsByTagName("iframe").item(0); + if (iframe != null) { + content.style.overflow='hidden'; + content.style.padding='0'; + content.style.height="" + (tabsDiv.offsetHeight - tabs.offsetHeight) + "px"; + iframe.height=content.style.height; + iframe.style.border='0'; + } + } catch (e) {} +}; + +/** Helper method. Get element from node array by index */ +_UID_elemByIndex = function(nodeArray, index) { + if (typeof nodeArray == 'undefined' || nodeArray == null) return null; + var i=0; + while (index>=0 && i < nodeArray.length) { + while(i < nodeArray.length && nodeArray[i].nodeType != Node.ELEMENT_NODE) i++; + if (index == 0) return nodeArray[i]; + index--; i++; + } + return null; +} + +_UID_dividerUpdate = function() { + var dividerDiv = document.getElementById("_UID_divider"); + var div = document.getElementById("_UID_main"); + dividerDiv.isActive = true; + div.onmouseup = function() { + dividerDiv.isActive = false; + div.onmouseup = null; + div.onmousemove = null; + } + div.onmousemove = function(e) { + dividerDiv.mouseY = typeof e != 'undefined' ? e.clientY : window.event.clientY; + _UID_layout(); + } + return false; +}; + +/** Recalculate feature browser main layout dimensions for all components */ +_UID_layout = function() { + + // Then animations are needed, this will be reset to true + var animationNeeded = false; + + // References to all elements + var mainDiv = document.getElementById("_UID_main"); + if (mainDiv == null) { alert("maindiv is null"); return;} + var featuresDiv = document.getElementById("_UID_features"); + var demoDiv = document.getElementById("_UID_demo"); + var tabsDiv = document.getElementById("_UID_tabs"); + var propertiesDiv = document.getElementById("_UID_props"); + var controlDiv = document.getElementById("_UID_cntr"); + var dividerDiv = document.getElementById("_UID_divider"); + + // Logobar height + var logoBarHeight = 62; + + // Get whole window contents size + document.body.style.padding = 0; + document.body.style.margin = 0; + document.body.style.position = "absolute"; + document.body.style.height = "100%"; + document.body.style.width = "100%"; + var width = document.body.offsetWidth; + var height = document.body.offsetHeight; + mainDiv.style.height = height + "px"; + mainDiv.style.width = width + "px"; + mainDiv.style.display = ""; + + // Recalc features div dimensions + var featuresWidth = 200; + var controlHeight = 50; + featuresDiv.style.top="" + logoBarHeight + "px"; + featuresDiv.style.width="" + featuresWidth + "px"; + featuresDiv.style.height="" + (height-controlHeight-logoBarHeight) + "px"; + + // Recalc properties div dimensions + if (typeof propertiesDiv.targetWidth == 'undefined') propertiesDiv.targetWidth = 0; + var propWidth = Math.floor((propertiesDiv.offsetWidth + propertiesDiv.targetWidth)/2); + if (Math.abs(propWidth - propertiesDiv.targetWidth) <= 1) propWidth = propertiesDiv.targetWidth; + if (propWidth >width-featuresWidth) propWidth = width-featuresWidth; + if (propWidth < 0) propWidth = 0; + if ((propWidth+1) != (propertiesDiv.targetWidth+1)) animationNeeded=true; + var centerWidth = width - propWidth - featuresWidth - 40; + propertiesDiv.style.position="absolute"; + propertiesDiv.style.overflow="hidden"; + propertiesDiv.style.top="" + 23 + "px"; + propertiesDiv.style.left="" + (centerWidth + featuresWidth + 40) + "px"; + propertiesDiv.style.width=propWidth + "px"; + propertiesDiv.style.height="" + (height - 23) + "px"; + var buttonDiv = document.getElementById("_UID_prop-toggle"); + buttonDiv.style.left = "" + (centerWidth + featuresWidth - 20 + 40) + "px" + if (propWidth == 0) { //buttonDiv.src = buttonDiv.showPng; + buttonDiv.style.height = "92px"; } + if (propWidth == propertiesDiv.maxWidth) { //buttonDiv.src = buttonDiv.hidePng; + buttonDiv.style.height = "23px"; } + buttonDiv.onclick = function() { + var propertiesDiv = document.getElementById("_UID_props"); + propertiesDiv.targetWidth = propertiesDiv.targetWidth == 0 ? 265 : 0; + _UID_layout(); + }; + + // Recalc divider div dimensions + if (typeof dividerDiv.demoHeight == 'undefined') dividerDiv.demoHeight = Math.floor(height/2); + if (dividerDiv.isActive) { + dividerDiv.demoHeight = dividerDiv.mouseY-10 - logoBarHeight; + if (dividerDiv.demoHeight < 0) dividerDiv.demoHeight = 0; + } else { + if (dividerDiv.demoHeight + logoBarHeight > height - 20) dividerDiv.demoHeight = height - 20 - logoBarHeight; + if (dividerDiv.demoHeight < 0) dividerDiv.demoHeight = 0; + } + var dividerHeight = 17; + dividerDiv.style.position="absolute"; + dividerDiv.style.overflow="hidden"; + dividerDiv.style.top="" + (dividerDiv.demoHeight + logoBarHeight)+ "px"; + dividerDiv.style.left="" + (15+featuresWidth+Math.round((centerWidth-137)/2)) +"px"; + dividerDiv.style.width="" + 137 + "px"; + dividerDiv.style.height="" + dividerHeight + "px"; + + // Recalc tabs div dimensions + tabsDiv.style.position="absolute"; + tabsDiv.style.overflow="hidden"; + tabsDiv.style.top="" + (dividerDiv.demoHeight + dividerHeight + logoBarHeight) + "px"; + tabsDiv.style.left="" + (featuresWidth + 15) + "px"; + tabsDiv.style.width="" + centerWidth + "px"; + tabsDiv.style.height="" + (height - dividerDiv.demoHeight - dividerHeight - logoBarHeight) + "px"; + _UID_updateTabs(); + + // Recalc demo div dimensions + demoDiv.style.position="absolute"; + demoDiv.style.overflow="auto"; + demoDiv.style.top="" + logoBarHeight + "px"; + demoDiv.style.left="" + (featuresWidth + 15) + "px"; + demoDiv.style.width="" + centerWidth + "px"; + demoDiv.style.height="" + dividerDiv.demoHeight + "px"; + + // Recalc control div dimensions + // TODO, make floating + controlDiv.style.position="absolute"; + controlDiv.style.overflow="hidden"; + controlDiv.style.top="" + (height - controlHeight) + "px"; + controlDiv.style.left="0"; + controlDiv.style.width="" + featuresWidth + "px"; + controlDiv.style.height="" + controlHeight + "px"; + + if (animationNeeded) { + setTimeout("_UID_layout()",30); + } + + /* call custom layouts bridge to notify sub components */ + mainDiv.notifyChildrenOfSizeChange(); +}; + + +_UID_initFeatureBrowserLayout = function() { + var dividerDiv = document.getElementById("_UID_divider"); + if (dividerDiv == null) alert("no divider div"); + dividerDiv.isActive = false; + dividerDiv.onmousedown = _UID_dividerUpdate; + + var mainDiv = document.getElementById("_UID_main"); + + /* this will be called by custom layout when its containers size has changed */ + mainDiv.iLayoutJS = function() { + _UID_layout(); + }; + +// _UID_layout(); +}; + +_UID_initFeatureBrowserLayout(); + +</script> + +</body> +</html>
\ No newline at end of file |