update countries example

examples/countries/js/example.js

@@ -5,28 +5,11 @@ Ox.load(['Geo', 'UI'], function() {
     var items = Ox.COUNTRIES.map(function(country) {
             return Ox.extend({}, country, {
                 flag: Ox.getFlagByCountryCode(country.code, 256),
-                icon: Ox.getFlagByCountryCode(country.code, 16),
                 region: country.continent + ', ' + country.region
             });
         }),
 
         columns = [
-            {
-                format: function(value) {
-                    return $('<img>').attr({src: value}).css({
-                        width: '14px',
-                        height: '14px',
-                        borderRadius: '2px',
-                        margin: '0 0 0 -3px'
-                    })
-                },
-                id: 'icon',
-                operator: '+',
-                title: 'Flag',
-                titleImage: 'flag',
-                visible: true,
-                width: 16
-            },
             {
                 id: 'code',
                 operator: '+',
@@ -95,52 +78,12 @@ Ox.load(['Geo', 'UI'], function() {
                 title: 'Longitude',
                 visible: true,
                 width: 80
-            },
+            }
-            {
-                align: 'right',
-                format: function(value) {
-                    return Ox.formatDegrees(value, 'lat');
-                },
-                id: 'south',
-                operator: '-',
-                title: 'South',
-                width: 80
-            },
-            {
-                align: 'right',
-                format: function(value) {
-                    return Ox.formatDegrees(value, 'lat');
-                },
-                id: 'north',
-                operator: '-',
-                title: 'North',
-                width: 80
-            },
-            {
-                align: 'right',
-                format: function(value) {
-                    return Ox.formatDegrees(value, 'lng');
-                },
-                id: 'west',
-                operator: '-',
-                title: 'West',
-                width: 80
-            },
-            {
-                align: 'right',
-                format: function(value) {
-                    return Ox.formatDegrees(value, 'lng');
-                },
-                id: 'east',
-                operator: '-',
-                title: 'East',
-                width: 80
-            },
         ],
 
         itemSize = 288 + Ox.UI.SCROLLBAR_SIZE,
 
-        state = {
+        ui = {
             find: '',
             include: {
                 dependency: false,
@@ -159,38 +102,37 @@ Ox.load(['Geo', 'UI'], function() {
 
         $view = Ox.ButtonGroup({
                 buttons: [
-                    {id: 'grid', title: 'grid'},
+                    {id: 'grid', title: 'grid', tooltip: 'View as Grid'},
-                    {id: 'list', title: 'list'}
+                    {id: 'list', title: 'list', tooltip: 'View as List'}
                 ],
                 selectable: true,
                 type: 'image',
-                value: state.view
+                value: ui.view
             })
             .bindEvent({change: view})
             .appendTo($toolbar),
 
         $sort = Ox.Select({
-                items: [
+                items: columns.filter(function(column) {
-                    {id: 'name', title: 'Sort by Name'},
+                    return column.id != 'flag';
-                    {id: 'code', title: 'Sort by Code'},
+                }).map(function(column) {
-                    {id: 'continent', title: 'Sort by Continent'},
+                    return {
-                    {id: 'region', title: 'Sort by Region'},
+                        id: column.id,
-                    {id: 'area', title: 'Sort by Area'},
+                        title: 'Sort by ' + column.title
-                    {id: 'lat', title: 'Sort by Latitude'},
+                    };
-                    {id: 'lng', title: 'Sort by Longitude'}
+                }),
-                ],
+                value: ui.sort[0].key,
                 width: 128
             })
             .bindEvent({change: sort})
-            [state.view == 'grid' ? 'show' : 'hide']()
+            [ui.view == 'grid' ? 'show' : 'hide']()
             .appendTo($toolbar),
 
-        $order = Ox.Button({
+        $order = Ox.Button(Ox.extend(getOptions(), {
-                title: state.sort[0].operator == '+' ? 'up' : 'down',
                 type: 'image'
-            })
+            }))
             .bindEvent({click: order})
-            [state.view == 'grid' ? 'show' : 'hide']()
+            [ui.view == 'grid' ? 'show' : 'hide']()
             .appendTo($toolbar),
 
         $find = Ox.Input({
@@ -218,57 +160,7 @@ Ox.load(['Geo', 'UI'], function() {
             .bindEvent({change: include})
             .appendTo($toolbar),
         
-        $list = {
+        $list = renderList(),
-
-            grid: Ox.IconList({
-                    borderRadius: 16,
-                    fixedRatio: 1,
-                    item: function(data, sort, size) {
-                        var key = sort[0].key == 'name' ? 'code' : sort[0].key,
-                            column = Ox.getObjectById(columns, key),
-                            info = (column.format || Ox.identity)(data[key]);
-                        return {
-                            height: size,
-                            id: data.id,
-                            info: info,
-                            title: data.name,
-                            url: data.flag,
-                            width: size
-                        };
-                    },
-                    items: items,
-                    keys: ['flag', 'name'],
-                    max: 1,
-                    pageLength: 1000,
-                    query: query,
-                    selected: state.selected,
-                    size: 128,
-                    sort: Ox.clone(state.sort),
-                    unique: 'code'
-                })
-                .bindEvent({
-                    init: init,
-                    select: select
-                }),
-
-            list: Ox.TextList({
-                    columns: columns,
-                    columnsMovable: true,
-                    columnsRemovable: true,
-                    columnsVisible: true,
-                    items: items,
-                    max: 1,
-                    pageLength: 1000,
-                    query: query,
-                    scrollbarVisible: true,
-                    sort: Ox.clone(state.sort)
-                })
-                .bindEvent({
-                    init: init,
-                    select: select
-                })
-
-        },
 
         $statusbar = Ox.Bar({size: 16}),
 
@@ -277,7 +169,7 @@ Ox.load(['Geo', 'UI'], function() {
         $listPanel = Ox.SplitPanel({
             elements: [
                 {element: $toolbar, size: 24},
-                {element: $list[state.view]},
+                {element: $list},
                 {element: $statusbar, size: 16}
             ],
             orientation: 'vertical'
@@ -297,7 +189,7 @@ Ox.load(['Geo', 'UI'], function() {
             })
             .bindEvent({
                 click: function() {
-                    $list[state.view].options({selected: []});
+                    $list.options({selected: []});
                     select({ids: []});
                 }
             })
@@ -325,18 +217,26 @@ Ox.load(['Geo', 'UI'], function() {
             .appendTo(Ox.$body);
 
     function find() {
-        state.find = $find.options('value');
+        ui.find = $find.options('value');
         query = getQuery();
         $status.html('Loading...');
-        $list[state.view].options({query: query});
+        $list.options({query: query});
+    }
+
+    function getOptions() {
+        var operator = ui.sort[0].operator;
+        return {
+            title: operator == '+' ? 'up' : 'down',
+            tooltip: operator == '+' ? 'Ascending' : 'Descending'
+        };
     }
 
     function getQuery() {
         var query = {
-            conditions: [{key: 'name', operator: '=', value: state.find}],
+            conditions: [{key: 'name', operator: '=', value: ui.find}],
             operator: '&'
         };
-        Ox.forEach(state.include, function(value, key) {
+        Ox.forEach(ui.include, function(value, key) {
             !value && query.conditions.push(
                 {key: key, operator: '=', value: void 0}       
             );
@@ -345,7 +245,7 @@ Ox.load(['Geo', 'UI'], function() {
     }
 
     function include(data) {
-        state.include[data.id] = data.checked;
+        ui.include[data.id] = data.checked;
         find();
     }
 
@@ -356,34 +256,16 @@ Ox.load(['Geo', 'UI'], function() {
         );
     }
 
-    function order(data) {
+    function order() {
-        state.sort[0].operator = state.sort[0].operator == '+' ? '-' : '+';
+        ui.sort[0].operator = ui.sort[0].operator == '+' ? '-' : '+';
-        $order.options({title: state.sort[0].operator == '+' ? 'up' : 'down'});
+        $order.options(getOptions());
-        $list[state.view].options({sort: Ox.clone(state.sort)});
+        $list.options({sort: Ox.clone(ui.sort, true)});
     }
 
-    function select(data) {
+    function renderItem() {
-        Ox.print('SELECT', data)
+        var code = ui.selected[0];
-        var id = data.ids[0];
-        if (id) {
-            state.selected = [id];
-            data = $list[state.view].value(id);
-            Ox.print(state.view, 'DATA:', data, id)
-            $title.options({title: data.name}).show();
-            $deselect.show();
-            showItem();
-        } else {
-            state.selected = [];
-            $title.hide();
-            $deselect.hide();
-            $item.empty();
-        }
-    }
-
-    function showItem() {
-        var code = state.selected[0];
         $item.empty();
-        if (state.view == 'grid') {
+        if (ui.view == 'grid') {
             Ox.TreeList({
                     data: Ox.getCountryByCode(code),
                     scrollbarVisible: true,
@@ -398,22 +280,94 @@ Ox.load(['Geo', 'UI'], function() {
         }
     }
 
+    function renderList() {
+        return ui.view == 'grid'
+            ? Ox.IconList({
+                borderRadius: 16,
+                fixedRatio: 1,
+                item: function(data, sort, size) {
+                    var key = sort[0].key == 'name' ? 'code' : sort[0].key,
+                        column = Ox.getObjectById(columns, key),
+                        info = (column.format || Ox.identity)(data[key]);
+                    return {
+                        height: size,
+                        id: data.id,
+                        info: info,
+                        title: data.name,
+                        url: data.flag,
+                        width: size
+                    };
+                },
+                items: items,
+                keys: ['flag', 'name'],
+                max: 1,
+                pageLength: 1000,
+                query: query,
+                selected: ui.selected,
+                size: 128,
+                sort: Ox.clone(ui.sort, true),
+                unique: 'code'
+            })
+            .bindEvent({
+                init: init,
+                select: select
+            })
+        : Ox.TextList({
+                columns: columns,
+                columnsMovable: true,
+                columnsRemovable: true,
+                columnsVisible: true,
+                items: items,
+                max: 1,
+                pageLength: 1000,
+                query: query,
+                scrollbarVisible: true,
+                selected: ui.selected,
+                sort: Ox.clone(ui.sort, true)
+            })
+            .bindEvent({
+                init: init,
+                select: select,
+                sort: sort
+            });
+    }
+
+    function select(data) {
+        var id = data.ids[0];
+        if (id) {
+            ui.selected = [id];
+            data = $list.value(id);
+            $title.options({title: data.name}).show();
+            $deselect.show();
+            renderItem();
+        } else {
+            ui.selected = [];
+            $title.hide();
+            $deselect.hide();
+            $item.empty();
+        }
+    }
+
     function sort(data) {
-        state.sort = [{
+        if (data.value) {
-            key: data.value,
+            data = {
-            operator: Ox.getObjectById(columns, data.value).operator
+                key: data.value,
-        }];
+                operator: Ox.getObjectById(columns, data.value).operator
-        $order.options({title: state.sort[0].operator == '+' ? 'up' : 'down'});
+            }
-        $list[state.view].options({sort: state.sort});
+        }
+        ui.sort = [{key: data.key, operator: data.operator}];
+        $sort.options({value: data.key});
+        $order.options(getOptions());
+        $list.options({sort: Ox.clone(ui.sort, true)});
     }
 
     function view(data) {
-        state.view = data.value;
+        ui.view = data.value;
-        $sort[state.view == 'grid' ? 'show' : 'hide']();
+        $sort[ui.view == 'grid' ? 'show' : 'hide']();
-        $order[state.view == 'grid' ? 'show' : 'hide']();
+        $order[ui.view == 'grid' ? 'show' : 'hide']();
-        $listPanel.replaceElement(1, $list[state.view].options({
+        $list = renderList();
-            selected: state.selected
+        $listPanel.replaceElement(1, $list);
-        }));
+        $list.gainFocus();
     }
 
 });