2015-09-07 18:44:10 +03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<link rel="stylesheet" href="../../css/widget/overlay.css">
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.container {
|
|
|
|
|
position: absolute;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
|
|
|
|
width: 50vw;
|
|
|
|
|
height: 50vh;
|
|
|
|
|
top: 10vh;
|
|
|
|
|
right: 10vw;
|
|
|
|
|
|
|
|
|
|
border: solid 1px black;
|
|
|
|
|
|
|
|
|
|
padding: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.overlay-content {
|
|
|
|
|
padding: 5px;
|
|
|
|
|
}
|
|
|
|
|
body>.overlay-content {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2015-09-09 17:24:41 +03:00
|
|
|
.overlay-widget .content {
|
|
|
|
|
background: white;
|
|
|
|
|
}
|
2015-09-07 18:44:10 +03:00
|
|
|
|
|
|
|
|
/* theaming... */
|
|
|
|
|
|
|
|
|
|
body.dark {
|
|
|
|
|
background: black;
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
.dark ::-webkit-scrollbar-track-piece {
|
|
|
|
|
background: rgba(255, 255, 255, 0.05);
|
|
|
|
|
}
|
|
|
|
|
.dark ::-webkit-scrollbar-thumb {
|
|
|
|
|
background: rgba(255, 255, 255, 0.15);
|
|
|
|
|
}
|
|
|
|
|
.dark ::-webkit-scrollbar-thumb:hover {
|
|
|
|
|
background: rgba(255, 255, 255, 0.3);
|
|
|
|
|
}
|
|
|
|
|
.dark .container {
|
|
|
|
|
border: solid 1px rgba(255, 255, 255, 0.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script src="../../ext-lib/jquery.js"></script>
|
|
|
|
|
<script src="../../ext-lib/jquery-ui.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="../jli.js"></script>
|
|
|
|
|
<script src="../toggler.js"></script>
|
|
|
|
|
|
|
|
|
|
<script src="../../ext-lib/require.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
requirejs(['../keyboard', '../../object', './overlay'], function(kbd, obj, ov){
|
|
|
|
|
keyboard = kbd
|
|
|
|
|
overlay = ov
|
|
|
|
|
object = obj
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
$(function(){
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
var themeToggler = CSSClassToggler('body',
|
|
|
|
|
[
|
|
|
|
|
'none',
|
|
|
|
|
'light',
|
|
|
|
|
'dark',
|
|
|
|
|
],
|
|
|
|
|
function(state){
|
|
|
|
|
$('#theme').text(state)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
Theme: <button id="theme" onclick="themeToggler()">none</button>
|
|
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
<button onclick="overlay.Overlay('body', $('body>.overlay-content').clone())">Global overlay (default)</button>
|
|
|
|
|
<button onclick="overlay.Overlay('.container', $('body>.overlay-content').clone())">Local overlay</button>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="container">
|
|
|
|
|
<h4>A context for an overlay...<h4>
|
|
|
|
|
<button onclick="overlay.Overlay('.container', $('body>.overlay-content').clone())">Local overlay</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="overlay-content">
|
|
|
|
|
<h3>Overlay</h3>
|
|
|
|
|
<button>Sub overlay</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
<!-- vim:set ts=4 sw=4 : -->
|
