in example pages, allow for setting theme from outside the iframe
This commit is contained in:
parent
0148701372
commit
0f4d72c1da
14 changed files with 52 additions and 50 deletions
|
@ -3,10 +3,11 @@
|
|||
<head>
|
||||
<title>Cities</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox/png/OxJS16.png"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/themes/classic/png/icon16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
|
|
@ -3,10 +3,11 @@
|
|||
<head>
|
||||
<title>Flight Paths</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/themes/classic/png/icon16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
|
|
@ -3,10 +3,11 @@
|
|||
<head>
|
||||
<title>JSON to List</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/themes/classic/png/icon16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
|
|
@ -3,10 +3,11 @@
|
|||
<head>
|
||||
<title>Lenna</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/themes/classic/png/icon16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
|
|
@ -3,10 +3,11 @@
|
|||
<head>
|
||||
<title>Manhattan Grid Coordinate System</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/themes/classic/icon16.png"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/themes/classic/png/icon16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
|
|
@ -3,10 +3,11 @@
|
|||
<head>
|
||||
<title>Mouse Events</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/themes/classic/png/icon16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
|
|
@ -6,11 +6,6 @@
|
|||
position: absolute;
|
||||
left: 224px;
|
||||
}
|
||||
#switch {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
top: 144px;
|
||||
}
|
||||
|
||||
#label0, #progress0 {
|
||||
top: 16px;
|
||||
|
|
|
@ -3,10 +3,11 @@
|
|||
<head>
|
||||
<title>Progress</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/themes/classic/png/icon16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
|
|
@ -117,17 +117,6 @@ Ox.load('UI', function() {
|
|||
.appendTo($status),
|
||||
$remaining = Ox.$('<div>')
|
||||
.appendTo($status),
|
||||
$button = Ox.Button({
|
||||
title: 'Switch Theme',
|
||||
width: labelWidth
|
||||
})
|
||||
.attr({id: 'switch'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
Ox.Theme(Ox.Theme() == 'classic' ? 'modern' : 'classic');
|
||||
}
|
||||
})
|
||||
.appendTo(Ox.$body);
|
||||
cancelled = false,
|
||||
paused = false,
|
||||
progress = 0,
|
||||
|
|
|
@ -3,10 +3,11 @@
|
|||
<head>
|
||||
<title>Steganograpy</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/themes/classic/png/icon16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
|
|
@ -1,12 +1,5 @@
|
|||
#switch {
|
||||
float: right;
|
||||
margin: 4px;
|
||||
}
|
||||
.OxButtonGroup {
|
||||
margin: 4px;
|
||||
}
|
||||
.buttons {
|
||||
height: 64px;
|
||||
margin: 4px 3px 2px 3px;
|
||||
}
|
||||
.symbol {
|
||||
float: left;
|
||||
|
|
|
@ -3,10 +3,11 @@
|
|||
<head>
|
||||
<title>Symbols</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/png/icon16.png"/>
|
||||
<link rel="shortcut icon" type="image/png" href="../../source/Ox.UI/themes/classic/png/icon16.png"/>
|
||||
<link rel="stylesheet" type="text/css" href="css/example.css"/>
|
||||
<script type="text/javascript" src="../../dev/Ox.js"></script>
|
||||
<script type="text/javascript" src="js/example.js"></script>
|
||||
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
|
|
|
@ -37,19 +37,9 @@ Ox.load('UI', function() {
|
|||
['icon', 'clock', 'switch', 'user']
|
||||
],
|
||||
symbols = Ox.flatten(groups),
|
||||
$menu = Ox.Bar({size: 24}),
|
||||
$switch = Ox.Button({
|
||||
title: 'Switch Theme'
|
||||
})
|
||||
.attr({id: 'switch'})
|
||||
.bind({
|
||||
click: function() {
|
||||
Ox.Theme(Ox.Theme() == 'classic' ? 'modern' : 'classic');
|
||||
}
|
||||
})
|
||||
.appendTo($menu),
|
||||
$menu = Ox.Bar({size: 48}),
|
||||
$main = Ox.Container(),
|
||||
$buttons = $('<div>').addClass('buttons').appendTo($main),
|
||||
$buttons = $('<div>').addClass('buttons').appendTo($menu),
|
||||
$symbols = $('<div>').addClass('symbols').appendTo($main);
|
||||
|
||||
groups.forEach(function(symbols) {
|
||||
|
@ -81,11 +71,11 @@ Ox.load('UI', function() {
|
|||
|
||||
Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: $menu, size: 24},
|
||||
{element: $menu, size: 48},
|
||||
{element: $main}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.appendTo(Ox.$body);
|
||||
|
||||
|
||||
});
|
||||
|
|
|
@ -26,7 +26,7 @@ Ox.ExamplePage = function(options, self) {
|
|||
self.$openButton = Ox.Button({
|
||||
disabled: self.options.selected == 'source',
|
||||
title: 'open',
|
||||
tooltip: 'Open in new tab',
|
||||
tooltip: 'Open in New Tab',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right', margin: '4px 4px 4px 2px'})
|
||||
|
@ -51,6 +51,25 @@ Ox.ExamplePage = function(options, self) {
|
|||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
self.$switchButton = Ox.Button({
|
||||
disabled: self.options.selected == 'source',
|
||||
title: 'switch',
|
||||
tooltip: 'Switch Theme',
|
||||
type: 'image'
|
||||
})
|
||||
.css({float: 'right', margin: '4px 2px 4px 2px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
self.$frame[0].contentWindow.postMessage(
|
||||
'Ox && Ox.Theme && Ox.Theme('
|
||||
+ 'Ox.Theme() == "classic" ? "modern" : "classic"'
|
||||
+ ')',
|
||||
'*'
|
||||
);
|
||||
}
|
||||
})
|
||||
.appendTo(self.$toolbar);
|
||||
|
||||
self.$tabs = Ox.ButtonGroup({
|
||||
buttons: [
|
||||
{
|
||||
|
@ -70,9 +89,11 @@ Ox.ExamplePage = function(options, self) {
|
|||
.css({float: 'right', margin: '4px 2px 4px 2px'})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
var disabled = data.value == 'source';
|
||||
self.options.selected = data.value;
|
||||
self.$reloadButton.options({disabled: data.value == 'source'});
|
||||
self.$openButton.options({disabled: data.value == 'source'});
|
||||
self.hasUI && self.$switchButton.options({disabled: disabled});
|
||||
self.$reloadButton.options({disabled: disabled});
|
||||
self.$openButton.options({disabled: disabled});
|
||||
self.$content.animate({
|
||||
marginLeft: data.value == 'source'
|
||||
? 0 : -self.options.width + 'px'
|
||||
|
@ -146,6 +167,11 @@ Ox.ExamplePage = function(options, self) {
|
|||
})
|
||||
);
|
||||
|
||||
Ox.get(self.options.js, function(js) {
|
||||
self.hasUI = /Ox\.load\(.+UI.+,/.test(js);
|
||||
!self.hasUI && self.$switchButton.options({disabled: true});
|
||||
});
|
||||
|
||||
Ox.$window.bind({
|
||||
resize: function() {
|
||||
setSize();
|
||||
|
|
Loading…
Reference in a new issue