A vanilla JavaScript library to freeze certain elements of the user interface.
Demo: http://bluecoaster455.github.io/cryo-ui/demo
Add the css and the script files to your project:
<html>
<head>
...
<link href="/path/to/index.css" type="text/css" rel="stylesheet"/>
</head>
<body>
...
<script src="/path/to/index.js" type="text/javascript"></script>
</body>
</html>// Freeze the entire user interface
CryoUI.freeze();
// Unfreeze all the user interface
CryoUI.unfreeze();
// Change de default options!
CryoUI.defaultOptions = {
selector: "#my-selector",
template: `<div style="font-weight:bold">My app</div><div>{{text}}</div>`,
text: "Loading..."
}These options are passed inside the CryoUI.freeze(options) function. Whatever is passed in the options parameter will merge with the defaultOptions.
var options = {
selector: "#my-selector", // Element to freeze
template: "<div>My loader</div><div>{{text}}</div>", // Template to use as the wrapper for the text to display.
text: "Loading..." // Text to display in the content.
}"instance" is the instatiation of Cryo returned by the CryoUI.freeze() method used to modify it for later freezing or calling instance.unfreeze().
// Freeze the whole user interface
var instance = CryoUI.freeze();// Freeze #my-div
var instance = CryoUI.freeze({
selector: "#my-div"
});// Freeze #my-div and put "Please wait..." as the text.
var instance = CryoUI.freeze({
selector: "#my-div",
text: "Please wait..."
});// Freeze #my-div. The end result in this example will be "<div class="my-custom-styles">Please wait...</div>"
var instance = CryoUI.freeze({
selector: "#my-div",
text: "Please wait...",
template: `<div class="my-custom-styles">{{text}}</div>`
});// Freeze #my-div. The content will the content of #my-template including itself.
var instance = CryoUI.freeze({
selector: "#my-div",
template: document.querySelector("#my-template")
});Cryo UI is under MIT licence