sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

move examples

Browse source
This commit is contained in:
rolux 2012-06-21 23:14:38 +02:00
commit c3047a1586
47 changed files with 52 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

52
examples/ui/mouse_events/css/example.css Normal file
View file

@ -0,0 +1,52 @@
#clear {
position: absolute;
left: 256px;
right: 0px;
height: 14px;
padding: 2px 0 0 2px;
cursor: pointer;
}
#log {
position: absolute;
left: 256px;
top: 16px;
right: 0;
bottom: 0;
border-width: 0;
overflow-y: auto;
}
#target {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 253px;
padding: 2px 0 0 2px;
border-width: 0;
font-weight: bold;
cursor: crosshair;
}
.OxThemeClassic #clear {
background: rgb(240, 240, 240);
}
.OxThemeClassic #log {
border-top: 1px solid rgb(208, 208, 208);
background: rgb(255, 255, 255);
}
.OxThemeClassic #target {
border-right: 1px solid rgb(208, 208, 208);
background: rgb(224, 224, 224);
}
.OxThemeModern #clear {
background: rgb(16, 16, 16);
}
.OxThemeModern #log {
border-top: 1px solid rgb(48, 48, 48);
background: rgb(0, 0, 0)
}
.OxThemeModern #target {
border-right: 1px solid rgb(48, 48, 48);
background: rgb(32, 32, 32);
}

13
examples/ui/mouse_events/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<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/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) { e.origin == window.location.origin && eval(e.data); });</script>
</head>
<body></body>
</html>

51
examples/ui/mouse_events/js/example.js Normal file
View file

@ -0,0 +1,51 @@
/*
This example demonstrates the mouse events that any Ox.Element fires.
*/
Ox.load('UI', function() {
var $target = Ox.Element()
.addClass('OxMonospace')
.attr({id: 'target'})
.html('click/hold/drag')
.appendTo(Ox.$body),
$log = Ox.Element()
.attr({id: 'log'})
.appendTo(Ox.$body),
$clear = Ox.Element()
.addClass('OxMonospace')
.attr({id: 'clear'})
.html('clear log')
.bind({click: function() {
$log.empty();
}})
.appendTo(Ox.$body);
[
'anyclick', 'singleclick', 'doubleclick', 'mousedown', 'mouserepeat',
'dragstart', 'drag', 'dragenter', 'dragleave', 'dragpause', 'dragend'
].forEach(function(event) {
$target.bindEvent(event, function(e) {
var date = new Date();
$('<div>')
.addClass('OxMonospace')
.html(
Ox.formatDate(date, '%H:%M:%S')
+ '.' + (Ox.pad(date % 1000, 3))
+ ' <span style="font-weight: bold">' + event + '</span> '
+ JSON.stringify(
Ox.extend(e.clientX ? {
clientX: e.clientX,
clientY: e.clientY,
} : {}, e.clientDX ? {
clientDX: e.clientDX,
clientDY: e.clientDY
} : {})
)
.replace(/"/g, '')
.replace(/,/g, ', ')
.replace(/:/g, ': ')
)
.prependTo($log);
});
});
});

32
examples/ui/progress/css/example.css Normal file
View file

@ -0,0 +1,32 @@
.OxLabel {
position: absolute;
left: 16px;
}
.OxProgressbar, #status {
position: absolute;
left: 224px;
}
#label0, #progress0 {
top: 16px;
}
#label1, #progress1 {
top: 48px;
}
#label2, #status {
top: 80px;
}
#label3, #progress2 {
top: 112px;
}
#status > div:first-child {
float: left;
width: 64px;
font-weight: bold;
}
#status > div:last-child {
float: right;
width: 256px;
text-align: right;
}

13
examples/ui/progress/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<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/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) { e.origin == window.location.origin && eval(e.data); });</script>
</head>
<body></body>
</html>

157
examples/ui/progress/js/example.js Normal file
View file

@ -0,0 +1,157 @@
/*
...
*/
Ox.load('UI', function() {
var labelWidth = 192,
progressWidth = 384,
$labels = [
Ox.Label({
title: 'Indeterminate progress bar',
width: labelWidth
})
.attr({id: 'label0'})
.appendTo(Ox.$body),
Ox.Label({
title: 'Progress bar with pause button',
width: labelWidth
})
.attr({id: 'label1'})
.appendTo(Ox.$body),
Ox.Label({
title: 'The status of the bar above',
width: labelWidth
})
.attr({id: 'label2'})
.appendTo(Ox.$body),
Ox.Label({
title: 'Progress bar with complete UI',
width: labelWidth
})
.attr({id: 'label3'})
.appendTo(Ox.$body),
],
$progress = [
Ox.Progressbar({
progress: -1,
width: progressWidth
})
.attr({id: 'progress0'})
.appendTo(Ox.$body),
Ox.Progressbar({
showPauseButton: true,
width: progressWidth
})
.attr({id: 'progress1'})
.bindEvent({
pause: function() {
paused = true;
$progress[0].options({paused: true});
$progress[2].options({paused: true});
setStatus();
},
resume: function() {
paused = false;
$progress[0].options({paused: false});
$progress[2].options({paused: false});
}
})
.appendTo(Ox.$body),
Ox.Progressbar({
showCancelButton: true,
showPauseButton: true,
showPercent: true,
showRestartButton: true,
showTime: true,
showTooltips: true,
width: progressWidth
})
.attr({id: 'progress2'})
.bindEvent({
cancel: function() {
cancelled = true;
$progress[0].options({cancelled: true});
$progress[1].options({cancelled: true});
setStatus();
},
complete: function() {
$progress[0].options({progress: 1});
setStatus();
},
pause: function() {
paused = true;
$progress[0].options({paused: true});
$progress[1].options({paused: true});
setStatus();
},
restart: function() {
cancelled = false;
paused = false;
progress = 0;
$progress[0].options({
cancelled: false,
paused: false
});
$progress[1].options({
cancelled: false,
paused: false,
progress: 0
});
},
resume: function() {
paused = false;
$progress[0].options({paused: false});
$progress[1].options({paused: false});
}
})
.appendTo(Ox.$body)
],
$status = Ox.Label({
width: progressWidth
})
.attr({id: 'status'})
.appendTo(Ox.$body),
$percent = Ox.$('<div>')
.appendTo($status),
$remaining = Ox.$('<div>')
.appendTo($status),
cancelled = false,
paused = false,
progress = 0,
i = 0,
interval = setInterval(function() {
if (!cancelled && !paused) {
if (i > 20 && Math.random() < 1/3) {
progress += 0.01;
$progress[1].options({progress: progress});
$progress[2].options({progress: progress});
setStatus();
}
if (progress >= 1) {
clearInterval(interval);
}
i++;
}
}, 50);
setStatus();
function setStatus() {
var status = $progress[1].status();
$percent.html(
Math.round($progress[1].options('progress') * 100) + '%'
);
$remaining.html(
cancelled ? 'Cancelled'
: paused ? 'Paused'
: status.remaining == 0 ? 'Complete'
: 'Remaining: ' + (
status.remaining == Infinity ? 'unknown'
: Ox.formatDuration(status.remaining, 'long')
)
);
}
});

16
examples/ui/symbols/css/example.css Normal file
View file

@ -0,0 +1,16 @@
.OxButtonGroup {
float: left;
margin: 4px 3px 2px 3px;
}
.symbol {
float: left;
width: 256px;
height: 256px;
margin: 8px;
}
.OxThemeClassic .symbol {
border: 1px solid rgb(208, 208, 208);
}
.OxThemeModern .symbol {
border: 1px solid rgb(48, 48, 48);
}

13
examples/ui/symbols/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<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/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) { e.origin == window.location.origin && eval(e.data); });</script>
</head>
<body></body>
</html>

79
examples/ui/symbols/js/example.js Normal file
View file

@ -0,0 +1,79 @@
/*
This example shows the symbols that come with `Ox.UI`.
*/
'use strict';
Ox.load('UI', function() {
var groups = [
['add', 'remove', 'close', 'center', 'focus'],
['arrowLeft', 'arrowRight', 'arrowUp', 'arrowDown'],
['left', 'right', 'up', 'down'],
[
'play', 'pause', 'playInToOut', 'goToIn', 'goToOut',
'setIn', 'setOut', 'goToPoster', 'setPoster'
],
['open', 'grow', 'shrink', 'fill', 'fit'],
['unmute', 'volumeUp', 'volumeDown', 'mute'],
[
'bookmark', 'chat', 'check', 'click', 'delete', 'edit', 'embed',
'find', 'flag', 'like', 'locate', 'mail', 'map', 'publish',
'star', 'tag', 'view'
],
['file', 'directory', 'volume', 'mount', 'unmount', 'sync'],
[
'list', 'columns',
'grid', 'gridLandscape', 'gridPortrait',
'gridLandscapePortrait', 'gridPortraitLandscape',
'iconlist', 'iconlistLandscape', 'iconlistPortrait'
],
['info', 'warning', 'help'],
['select', 'set'],
['undo', 'redo'],
['upload', 'download'],
['unlock', 'lock'],
['copyright', 'noCopyright'],
['circle', 'square'],
['bracket', 'clock', 'home', 'icon', 'switch', 'user']
],
symbols = Ox.flatten(groups),
$menu = Ox.Bar({size: 48}),
$main = Ox.Container(),
$buttons = $('<div>').addClass('buttons').appendTo($menu),
$symbols = $('<div>').addClass('symbols').appendTo($main);
groups.forEach(function(symbols) {
Ox.ButtonGroup({
buttons: symbols.map(function(symbol) {
return {
id: symbol,
title: symbol,
tooltip: symbol
};
}),
type: 'image'
})
.appendTo($buttons);
});
symbols.forEach(function(symbol) {
Ox.Element({tooltip: symbol})
.addClass('OxGrid symbol')
.append(
$('<img>').attr({src: Ox.UI.getImageURL(
'symbol' + symbol[0].toUpperCase() + symbol.slice(1))
})
)
.appendTo($symbols);
});
Ox.SplitPanel({
elements: [
{element: $menu, size: 48},
{element: $main}
],
orientation: 'vertical'
})
.appendTo(Ox.$body);
});

3
examples/ui/widget_design_patterns/css/example.css Normal file
View file

@ -0,0 +1,3 @@
OxMyBox.focused {
box-shadow: inset 0 0 1px black;
}

13
examples/ui/widget_design_patterns/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<title>Widget Design Patterns</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/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) { e.origin == window.location.origin && eval(e.data); });</script>
</head>
<body></body>
</html>

236
examples/ui/widget_design_patterns/js/example.js Normal file
View file

@ -0,0 +1,236 @@
/*
The following examples explain the common design pattern for OxJS UI widgets: an
inheritance model that is neither classical nor prototypal, but "parasitical" (a
term coined by <a
href="http://www.crockford.com/javascript/inheritance.html">Douglas
Crockford</a>). In a nutshell, "instances" are created by augmenting other
instances, but in addition to private members (`var foo`) and public members
(`that.bar`), they can have shared private members (`self.baz`). `self` cannot
be accessed from outside, but since `self` itself is an argument of the
"constructor", an instance can inherit its parent's `self` by passing its own
`self`.
*/
'use strict';
/*
Load the UI module.
*/
Ox.load('UI', function() {
/*
Create our own namespace.
*/
Ox.My = {};
/*
First, lets build the most basic Box widget. A widget is a "constructor"
function that takes two (optional) arguments, `options` and `self`, and
returns a widget object. It's not a constructor in JavaScript terms though:
It doesn't have to be called with `new`, and doesn't return an `instanceof`
anything. It just enhances another widget object and returns it.
*/
Ox.My.Box = function(options, self) {
/*
This is how every widget "constructor" begins. `self` is the widget's
shared private object.
*/
self = self || {};
/*
`that` is the widget itself, its public object, or, in JavaScript terms,
its `this`. Every widget "inherits" from another widget by simple
assignment. All public properties of the "super" widget, i.e. all
properties of its `that`, will be present on our own `that`. In this
case, we use Ox.Element, the "root" widget at the end of the inheritance
chain, and pass an empty options object. But we always pass our own
`self`, which means that any property that Ox.Element (or any other
widget in the inheritance chain) adds to `self` will be present on our
own `self`. Then we call the public `defaults`, `options` and `update`
methods of Ox.Element. `defaults` assigns the defaults object to
`self.defaults` and copies it to `self.options`, `options` extends
`self.options` with the options object, and `update` adds one or more
callbacks that are invoked whenever, by way of calling the `options`
method, a property of `self.options` is modified or added.
*/
var that = Ox.Element({}, self)
.defaults({
color: [128, 128, 128],
size: 128
})
.options(options || {})
.update({
color: setColor,
size: setSize
});
/*
The second part of the "constructor" function can be thought of as the
"initializer", and contains everything needed to set up the "instance".
In this case, we just define a minimum and maximum size and then set the
widget's color and size. We could have used `var minSize` and `var
maxSize` here, but by using `self` for private variables that we want to
be accessible across all the widget's methods, we can be sure that
inside such methods, any local `var` is actually local to the method.
*/
self.minSize = 128;
self.maxSize = 384;
setColor();
setSize();
/*
Third, we declare the widget's private methods. These are just function
declarations, hoisted to the top of the "constructor".
*/
function setColor() {
/*
To interact with the DOM, Ox.Element (and any widget derived from
it) wraps jQuery. If you type Ox.Element() in the console, you
will get something like `[<div class="OxElement"></div>]`, and the
widget's prototype has all the methods of a `$('<div>')`, with
proper chaining. If you have `var $d = $('<div>'), $e =
Ox.Element();`, then `$d.appendTo($e)` returns `$d`, and
`$e.append($d)` returns `$e`.
*/
that.css({
backgroundColor: 'rgb(' + self.options.color.join(', ') + ')',
});
}
function setSize() {
/*
Before setting the size, we make sure the value is between `minSize`
and `maxSize`.
*/
self.options.size = Ox.limit(
self.options.size, self.minSize, self.maxSize
);
that.css({
height: self.options.size + 'px',
width: self.options.size + 'px'
});
}
/*
Next, we define the widgets public methods, as properties of `that`.
(Note that unlike private methods, they are not hoisted.)
*/
that.showOptions = function() {
/*
As there isn't much to do yet, this method just displays the
widget's options.
*/
that.html(JSON.stringify(self.options).replace(/([,:])/g, '$1 '));
/*
Public methods should return `that`, for chaining.
*/
return that;
};
/*
And finally, at the very end of the "constructor", we return `that`. And
that's it.
*/
return that;
};
/*
<pre>
Ox.My.Box({color: [255, 0, 0]})
.appendTo(Ox.$body)
.options({size: 256})
.showOptions();
</pre>
*/
/*
Now we create a new widget that subclasses `Ox.My.Box`.
*/
Ox.My.RoundedBox = function(options, self) {
self = self || {};
/*
This time `that` is an instance of `Ox.My.Box`
*/
var that = Ox.My.Box({}, self);
/*
`Ox.RoundedBox` has additional default properties,
we define this by overwriting the defaults.
Sice we do not want to overwrite the existing defaults,
we first get the defaults and extend them with our new values.
Here we also show an alternative way of getting updates.
Instead of passing an object `{key: function}`,
we can also pass one function that gets called with key, value.
*/
that.defaults(Ox.extend(that.defaults(), {
radius: 16
}))
.options(options || {})
.update(function(key, value) {
if (key == 'radius') {
setRadius();
}
});
setRadius();
function setRadius() {
that.css({
borderRadius: self.options.radius + 'px'
});
}
return that;
};
/*
<pre>
Ox.My.RoundedBox({
color: [255, 0, 0],
radius: 32
})
.appendTo(Ox.$body)
.options({size: 256})
.showOptions();
</pre>
*/
/*
Its also possible to pass objects or other elements as options
*/
Ox.My.MetaBox = function(options, self) {
self = self || {};
var that = Ox.My.Box({}, self);
that.defaults(Ox.extend(that.defaults(), {
boxes: []
}))
.options(options || {});
self.options.boxes.forEach(function(box) {
that.append(box);
});
return that;
};
/*
Now its time to create some boxes for this demo:
*/
window.boxes = Ox.My.MetaBox({
boxes: [
Ox.My.Box({
color: [64, 128, 255]
}),
Ox.My.RoundedBox({
color: [255, 128, 64]
})
],
size: 384
})
.appendTo(Ox.$body);
});