This module helps the liquid designing. It aligns the child elements to dock to its parent recursively.
dock_n_liquid
- enables a simple liquid layout. The instance references a single html element which is the root of docking structure. The static method 'select' creates and returns an instance of this class.
dock_n_liquid.init()
- initializes alldock
classed elements as adock_n_liquid
panel. Those will be aligned the layouts in automatic.dock_n_liquid.select(element)
- selects a html element and returnsdock_n_liquid
instance.dock_n_liquid.requestFullscreen(element)
- requests to be a fullscreen mode.dock_n_liquid.exitFullscreen()
- exits from the fullscreen mode.dock_n_liquid.detach()
- detaches the element from its layout tree.dock_n_liquid.attach()
- re-attaches the element to its layout tree.
dock_n_liquid.show(state)
- shows or hides the panel.
dock
- declares the element is the panel.top
- declares the element docks to the top of the parent element. theheight
style or attribute must be specified.left
- docks to the left.width
must be specified.right
- to the right.width
must be specified.bottom
- to the bottom.height
required.resizable
- The panel could be resized by dragging a handle generated on its edge. After the completion of resizing, awindow.resize
event will be dispatched.
Sorry, too long code....
<html>
<head>
<style>
.dock {
border-style: solid;
border-top-color: #eee;
border-left-color: #eee;
border-right-color: #444;
border-bottom-color: #444;
border-top-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
margin:0; padding:0;
overflow-x:hidden;
overflow-y:auto;
color:#ccc;
}
.dock.top { background-color: #226; }
.dock.bottom { background-color: #442; }
.dock.left { background-color: #244; }
.dock.right { background-color: #888; }
.dock.resizer {
border-width: 0px;
background-color: #ccc;
}
.dock.horizontal.resizer {
cursor: ew-resize;
}
.dock.vertical.resizer {
cursor: ns-resize;
}
.dock.resizer.resizing {
background-color: #f00;
}
</style>
</head>
<body onload="main();">
<div class="dock">
<div class="dock top resizable" style="height: 60px;">
<h1>Docking to the top</h1>
</div>
<div class="dock left resizable" style="width:120px;">
<div class="dock top" style="height:20px;">menu#1</div>
<div class="dock top" style="height:20px;">menu#2</div>
<div class="dock top" style="height:20px;">menu#3</div>
<div class="dock top" style="height:20px;">menu#4</div>
<div class="dock top" style="height:20px;">menu#5</div>
</div>
<div id="panelRight" class="dock right resizable"
style="width:120px;overflow-y:auto">
<div class="dock top" style="height:20px;">content#1</div>
<div class="dock top" style="height:20px;">content#2</div>
<div class="dock top" style="height:20px;">content#3</div>
<div class="dock top" style="height:20px;">content#4</div>
<div class="dock top" style="height:20px;">content#5</div>
</div>
<div id="fullscrn-panel" class="dock">
The Content that occupies the rest of client area.
<button type="button" onclick="hidePanelRight();">hide panel right</button>
<button type="button" onclick="showPanelRight();">show panel right</button>
</div>
<div class="dock bottom resizable" style="height:40px;">
MIT LICENSE
</div>
</div>
<script src="../dock-n-liquid.js"></script>
<script src="../node_modules/fullscrn/fullscrn.js"></script>
<script>
function main() {
(function(d) {
if(d.fullscreenEnabled) {
var fullscrnPanel = d.getElementById("fullscrn-panel");
var btnFullscrn = d.createElement("BUTTON");
var btnFullscrnClick = function(event) {
if(d.fullscreenElement !== fullscrnPanel) {
dock_n_liquid.requestFullscreen(fullscrnPanel);
} else {
dock_n_liquid.exitFullscreen();
}
};
var fullscreenChange = function(event) {
if(d.fullscreenElement !== fullscrnPanel) {
btnFullscrn.innerHTML = "Request Fullscreen";
} else {
btnFullscrn.innerHTML = "Exit Fullscreen";
}
};
btnFullscrn.setAttribute("type", "button");
btnFullscrn.addEventListener("click", btnFullscrnClick );
fullscrnPanel.appendChild(btnFullscrn);
d.addEventListener("fullscreenchange", fullscreenChange);
fullscreenChange();
}
}(document));
dock_n_liquid.init();
}
function hidePanelRight() {
var panelRight = document.getElementById("panelRight");
dock_n_liquid.select(panelRight).show(false);
}
function showPanelRight() {
dock_n_liquid.select("#panelRight").show(true);
}
</script>
</body>
</html>
This software is released under the MIT License, see LICENSE