2013-12-11 02:47:44 +04:00
< html >
2013-12-26 23:49:16 +04:00
< link rel = "stylesheet" href = "../css/ui-lightness/jquery-ui.css" >
2013-12-11 02:47:44 +04:00
< link rel = "stylesheet" type = "text/css" href = "../css/editor.css" >
2013-12-23 03:43:21 +04:00
< style >
2013-12-27 02:55:48 +04:00
body {
overflow: hidden;
}
2013-12-23 04:38:49 +04:00
body.dark {
background: #0a0a0a;
color: silver;
}
body.gray {
background: #333;
color: silver;
}
2013-12-23 03:43:21 +04:00
< / style >
2013-12-11 02:47:44 +04:00
< script src = "../ext-lib/jquery.js" > < / script >
< script src = "../ext-lib/jquery-ui.js" > < / script >
< script src = "../lib/panels.js" > < / script >
< script src = "../lib/editor.js" > < / script >
< script >
2013-12-23 04:38:49 +04:00
function toggleThemes(){
var b = $('body')
if(b.hasClass('gray')){
b.removeClass('gray')
b.addClass('dark')
} else if(b.hasClass('dark')){
b.removeClass('dark')
} else {
b.addClass('gray')
}
}
2013-12-23 19:47:37 +04:00
function toggleAutoHide(){
var elem = $('.side-panel')
if(elem.attr('autohide') == 'off'){
elem.attr('autohide', 'on')
} else {
elem.attr('autohide', 'off')
}
return false
}
2013-12-11 02:47:44 +04:00
$(function(){
2014-01-03 02:34:57 +04:00
toggleThemes()
2014-01-03 02:25:38 +04:00
PANEL_ROOT = 'body'
2014-01-03 02:34:57 +04:00
2014-01-03 02:25:38 +04:00
makeSidePanel('left')
makeSidePanel('right')
var panel = makePanel('Test Panel A')
2013-12-23 03:43:21 +04:00
.css({
top: 50,
left: 50,
})
2013-12-26 23:49:16 +04:00
makeSubPanel('Test Sub Panel A', $('< h1 > Panel A< / h1 > '), panel, true, true)
makeSubPanel('Test Sub Panel B', $('< h2 > Panel B< / h2 > '), panel, true)
makeSubPanel('Test Sub Panel C', $('< h3 > Panel C< / h3 > '), panel, false)
2013-12-23 03:43:21 +04:00
2014-01-09 06:24:42 +04:00
openGroupedPanels([
'Edit: Filters',
'Edit: Snapshots'
],
panel)
2013-12-27 00:29:07 +04:00
2014-01-03 02:25:38 +04:00
makeSubPanel('Test Sub Panel D', $('< h2 > Panel D< / h2 > '))
2014-01-03 02:34:57 +04:00
.parents('.panel')
.css({
top: 100,
left: 400,
})
2013-12-11 02:47:44 +04:00
2014-01-05 09:32:14 +04:00
2014-01-09 06:24:42 +04:00
Panel('Test Sub Panel E',
2014-01-05 09:32:14 +04:00
function(){
return $('< h1 > Panel E< / h1 > ')
},
function(panel){
panel
.on('panelOpening', function(){ console.log('>>> opening!') })
.on('panelClosing', function(){ console.log('>>> closing!') })
},
true)
2013-12-11 02:47:44 +04:00
})
< / script >
< body >
2014-01-07 23:10:50 +04:00
< p > click < a href = "javascript:openPanel('Edit: Filters')" > to show the editor panel< / a > and < a href = "javascript:toggleThemes()" > here to toggle theme...< / a > < / p >
2013-12-11 02:47:44 +04:00
< / body >
< / html >
<!-- vim:set ts=4 sw=4 : -->
