move examples

examples/ui/symbols/js/example.js

@@ -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);
+
+});