0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

in example pages, allow for setting theme from outside the iframe

Browse source
This commit is contained in:
rolux 2012-04-15 21:13:18 +02:00
parent 0148701372
commit 0f4d72c1da
14 changed files with 52 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
examples/cities/index.html
View file

@ -3,10 +3,11 @@
<head> <head>
<title>Cities</title> <title>Cities</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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"/> <link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script> <script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script> <script type="text/javascript" src="js/example.js"></script>
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
</head> </head>
<body> <body>
</body> </body>

3
examples/flight_paths/index.html
View file

@ -3,10 +3,11 @@
<head> <head>
<title>Flight Paths</title> <title>Flight Paths</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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"/> <link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script> <script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script> <script type="text/javascript" src="js/example.js"></script>
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
</head> </head>
<body> <body>
</body> </body>

3
examples/json_to_list/index.html
View file

@ -3,10 +3,11 @@
<head> <head>
<title>JSON to List</title> <title>JSON to List</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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"/> <link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script> <script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script> <script type="text/javascript" src="js/example.js"></script>
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
</head> </head>
<body> <body>
</body> </body>

3
examples/lenna/index.html
View file

@ -3,10 +3,11 @@
<head> <head>
<title>Lenna</title> <title>Lenna</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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"/> <link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script> <script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script> <script type="text/javascript" src="js/example.js"></script>
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
</head> </head>
<body> <body>
</body> </body>

3
examples/manhattan_grid/index.html
View file

@ -3,10 +3,11 @@
<head> <head>
<title>Manhattan Grid Coordinate System</title> <title>Manhattan Grid Coordinate System</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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"/> <link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script> <script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script> <script type="text/javascript" src="js/example.js"></script>
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
</head> </head>
<body> <body>
</body> </body>

3
examples/mouse_events/index.html
View file

@ -3,10 +3,11 @@
<head> <head>
<title>Mouse Events</title> <title>Mouse Events</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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"/> <link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script> <script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script> <script type="text/javascript" src="js/example.js"></script>
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
</head> </head>
<body> <body>
</body> </body>

5
examples/progress/css/example.css
View file

@ -6,11 +6,6 @@
position: absolute; position: absolute;
left: 224px; left: 224px;
} }
#switch {
position: absolute;
left: 16px;
top: 144px;
}
#label0, #progress0 { #label0, #progress0 {
top: 16px; top: 16px;

3
examples/progress/index.html
View file

@ -3,10 +3,11 @@
<head> <head>
<title>Progress</title> <title>Progress</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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"/> <link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script> <script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script> <script type="text/javascript" src="js/example.js"></script>
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
</head> </head>
<body> <body>
</body> </body>

11
examples/progress/js/example.js
View file

@ -117,17 +117,6 @@ Ox.load('UI', function() {
.appendTo($status), .appendTo($status),
$remaining = Ox.$('<div>') $remaining = Ox.$('<div>')
.appendTo($status), .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, cancelled = false,
paused = false, paused = false,
progress = 0, progress = 0,

3
examples/steganography/index.html
View file

@ -3,10 +3,11 @@
<head> <head>
<title>Steganograpy</title> <title>Steganograpy</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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"/> <link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script> <script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script> <script type="text/javascript" src="js/example.js"></script>
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
</head> </head>
<body> <body>
</body> </body>

9
examples/symbols/css/example.css
View file

@ -1,12 +1,5 @@
#switch {
float: right;
margin: 4px;
}
.OxButtonGroup { .OxButtonGroup {
margin: 4px; margin: 4px 3px 2px 3px;
}
.buttons {
height: 64px;
} }
.symbol { .symbol {
float: left; float: left;

3
examples/symbols/index.html
View file

@ -3,10 +3,11 @@
<head> <head>
<title>Symbols</title> <title>Symbols</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <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"/> <link rel="stylesheet" type="text/css" href="css/example.css"/>
<script type="text/javascript" src="../../dev/Ox.js"></script> <script type="text/javascript" src="../../dev/Ox.js"></script>
<script type="text/javascript" src="js/example.js"></script> <script type="text/javascript" src="js/example.js"></script>
<script>window.addEventListener('message', function(e) { eval(e.data); });</script>
</head> </head>
<body> <body>
</body> </body>

16
examples/symbols/js/example.js
View file

@ -37,19 +37,9 @@ Ox.load('UI', function() {
['icon', 'clock', 'switch', 'user'] ['icon', 'clock', 'switch', 'user']
], ],
symbols = Ox.flatten(groups), symbols = Ox.flatten(groups),
$menu = Ox.Bar({size: 24}), $menu = Ox.Bar({size: 48}),
$switch = Ox.Button({
title: 'Switch Theme'
})
.attr({id: 'switch'})
.bind({
click: function() {
Ox.Theme(Ox.Theme() == 'classic' ? 'modern' : 'classic');
}
})
.appendTo($menu),
$main = Ox.Container(), $main = Ox.Container(),
$buttons = $('<div>').addClass('buttons').appendTo($main), $buttons = $('<div>').addClass('buttons').appendTo($menu),
$symbols = $('<div>').addClass('symbols').appendTo($main); $symbols = $('<div>').addClass('symbols').appendTo($main);
groups.forEach(function(symbols) { groups.forEach(function(symbols) {
@ -81,7 +71,7 @@ Ox.load('UI', function() {
Ox.SplitPanel({ Ox.SplitPanel({
elements: [ elements: [
{element: $menu, size: 24}, {element: $menu, size: 48},
{element: $main} {element: $main}
], ],
orientation: 'vertical' orientation: 'vertical'

32
source/Ox.UI/js/Code/Ox.ExamplePage.js
View file

@ -26,7 +26,7 @@ Ox.ExamplePage = function(options, self) {
self.$openButton = Ox.Button({ self.$openButton = Ox.Button({
disabled: self.options.selected == 'source', disabled: self.options.selected == 'source',
title: 'open', title: 'open',
tooltip: 'Open in new tab', tooltip: 'Open in New Tab',
type: 'image' type: 'image'
}) })
.css({float: 'right', margin: '4px 4px 4px 2px'}) .css({float: 'right', margin: '4px 4px 4px 2px'})
@ -51,6 +51,25 @@ Ox.ExamplePage = function(options, self) {
}) })
.appendTo(self.$toolbar); .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({ self.$tabs = Ox.ButtonGroup({
buttons: [ buttons: [
{ {
@ -70,9 +89,11 @@ Ox.ExamplePage = function(options, self) {
.css({float: 'right', margin: '4px 2px 4px 2px'}) .css({float: 'right', margin: '4px 2px 4px 2px'})
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
var disabled = data.value == 'source';
self.options.selected = data.value; self.options.selected = data.value;
self.$reloadButton.options({disabled: data.value == 'source'}); self.hasUI && self.$switchButton.options({disabled: disabled});
self.$openButton.options({disabled: data.value == 'source'}); self.$reloadButton.options({disabled: disabled});
self.$openButton.options({disabled: disabled});
self.$content.animate({ self.$content.animate({
marginLeft: data.value == 'source' marginLeft: data.value == 'source'
? 0 : -self.options.width + 'px' ? 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({ Ox.$window.bind({
resize: function() { resize: function() {
setSize(); setSize();