oxjs/examples/ui/symbols/js/example.js

89 lines
2.9 KiB
JavaScript
Raw Normal View History

2012-04-15 12:13:37 +00:00
/*
2012-06-18 08:57:39 +00:00
This example shows the symbols that come with `Ox.UI`.
2012-04-15 12:13:37 +00:00
*/
2012-04-15 12:40:56 +00:00
'use strict';
2012-04-15 12:13:37 +00:00
2012-04-15 12:40:56 +00:00
Ox.load('UI', function() {
2012-04-15 12:13:37 +00:00
var groups = [
2012-04-17 15:24:15 +00:00
['add', 'remove', 'close', 'center', 'focus'],
2012-04-15 12:13:37 +00:00
['arrowLeft', 'arrowRight', 'arrowUp', 'arrowDown'],
['left', 'right', 'up', 'down'],
[
'play', 'pause', 'playPrevious', 'playNext',
'playInToOut', 'goToIn', 'goToOut', 'setIn', 'setOut',
'goToPoster', 'setPoster'
2012-04-15 12:13:37 +00:00
],
['open', 'grow', 'shrink', 'fill', 'fit'],
[
'repeatNone', 'repeatOne', 'repeatAll',
'shuffleAll', 'shuffleNone'
],
2012-04-15 12:13:37 +00:00
['unmute', 'volumeUp', 'volumeDown', 'mute'],
[
2012-04-15 18:14:10 +00:00
'bookmark', 'chat', 'check', 'click', 'delete', 'edit', 'embed',
'find', 'flag', 'like', 'locate', 'mail', 'map', 'publish',
'star', 'tag', 'view'
2012-04-15 12:13:37 +00:00
],
2012-06-27 10:14:16 +00:00
[
'file', 'files', 'directory',
'volume', 'mount', 'unmount', 'sync'
],
2012-12-09 16:34:01 +00:00
['audio', 'book', 'data', 'video'],
2012-04-15 12:13:37 +00:00
[
2012-12-10 00:00:50 +00:00
'list', 'playlist', 'columns',
2012-06-17 08:45:45 +00:00
'grid', 'gridLandscape', 'gridPortrait',
'gridLandscapePortrait', 'gridPortraitLandscape',
'iconlist', 'iconlistLandscape', 'iconlistPortrait'
2012-04-15 12:13:37 +00:00
],
['info', 'warning', 'help'],
['select', 'set'],
['undo', 'redo'],
['upload', 'download'],
['unlock', 'lock'],
['copyright', 'noCopyright'],
2012-04-15 18:14:10 +00:00
['circle', 'square'],
2012-06-18 08:57:39 +00:00
['bracket', 'clock', 'home', 'icon', 'switch', 'user']
2012-04-15 12:13:37 +00:00
],
symbols = Ox.flatten(groups),
$menu = Ox.Bar({size: 48}),
2012-04-15 12:40:56 +00:00
$main = Ox.Container(),
$buttons = $('<div>').addClass('buttons').appendTo($menu),
2012-04-15 12:40:56 +00:00
$symbols = $('<div>').addClass('symbols').appendTo($main);
2012-04-15 12:13:37 +00:00
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) {
2012-06-18 08:57:39 +00:00
Ox.Element({tooltip: symbol})
2012-04-15 12:13:37 +00:00
.addClass('OxGrid symbol')
.append(
$('<img>').attr({src: Ox.UI.getImageURL(
2012-05-24 10:20:24 +00:00
'symbol' + symbol[0].toUpperCase() + symbol.slice(1))
2012-04-15 12:13:37 +00:00
})
)
.appendTo($symbols);
});
2012-04-15 12:40:56 +00:00
Ox.SplitPanel({
elements: [
{element: $menu, size: 48},
2012-04-15 12:40:56 +00:00
{element: $main}
],
orientation: 'vertical'
})
.appendTo(Ox.$body);
2012-04-15 12:13:37 +00:00
});