Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/takamin/dock-n-liquid
Liquid Alignment Module for border-box element
https://github.com/takamin/dock-n-liquid
Last synced: about 1 month ago
JSON representation
Liquid Alignment Module for border-box element
- Host: GitHub
- URL: https://github.com/takamin/dock-n-liquid
- Owner: takamin
- License: mit
- Created: 2017-04-09T01:45:43.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-28T10:21:15.000Z (over 6 years ago)
- Last Synced: 2024-10-13T06:22:55.653Z (2 months ago)
- Language: JavaScript
- Size: 187 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
DOCK'n'LIQUID - npm `dock-n-liquid`
===================================
This module helps the liquid designing.
It aligns the child elements to dock to its parent recursively.
APIs
----
### CLASS
* `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.
### STATIC METHOD
* __`dock_n_liquid.init()`__ - initializes all `dock` classed elements as a `dock_n_liquid` panel.
Those will be aligned the layouts in automatic.
* `dock_n_liquid.select(element)` - selects a html element and returns `dock_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.
### INSTANCE METHOD
* `dock_n_liquid.show(state)` - shows or hides the panel.
AVAILABLE CLASS NAME for HTML ELEMENT
-------------------------------------
* `dock` - declares the element is the panel.
* `top` - declares the element docks to the top of the parent element. the `height` 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, a `window.resize` event will be dispatched.
EXAMPLE
-------
Sorry, too long code....
```html
.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;
}
Docking to the top
menu#1
menu#2
menu#3
menu#4
menu#5
content#1
content#2
content#3
content#4
content#5
The Content that occupies the rest of client area.
hide panel right
show panel right
MIT LICENSE
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);
}
```
LICENSE
-------
This software is released under the MIT License, see [LICENSE](LICENSE)