oxjs/examples/list_of_cities/js/example.js

/*
...
*/

'use strict';

/*
Since we will be doing some mapping, we have to load the Geo module.
*/
Ox.load({UI: {showScreen: true}, Geo: {}}, function() {

    Ox.getJSON('json/cities.json', function(cities) {

        /*
        The JSON data originally comes from geonames.org. It's an array of
        10,000 city objects, each of which has the following properties:
        <pre>
        {
            "country_code": "CN", 
            "elevation": 0, 
            "feature_code": "PPLA", 
            "latitude": 31.22222, 
            "longitude": 121.45806, 
            "name": "Shanghai", 
            "population": 14608512
        }
        </pre>
        */
        cities = cities.map(function(data, id) {
            /*
            First of all, we have to patch this data, so that it becomes more
            useful both for the list and the map. Ox.getCountryByCode gives us
            the names of the country, region and continent. For the map, we need
            a geoname, and the cities have to be rectangular areas, not just
            points. So we set the area to 100 square meters per inhabitant,
            which will turn out to be relatively realistic. Then we calculate
            how large the resulting square will be, in degrees. (The number of
            degrees from west to east depends on the city's proximity to the
            equator. OxJS has some utility functions built in that make this
            easy to compute.) Finally, we can set the values for south, north,
            west and east. A nice side effect of deriving the size of the city
            from its population is that the map, which will always show the
            largest places in the visible area, will now show the most populated
            cities.
            */
            var area = Math.max(data.population, 1) * 100,
                country = Ox.getCountryByCode(data.country_code),
                latSize = Math.sqrt(area) / Ox.EARTH_CIRCUMFERENCE * 360,
                lngSize = Math.sqrt(area) * Ox.getDegreesPerMeter(data.latitude);
            /*
            Our city object will look like this:
            <pre>
            {
                "area": 1460851200,
                "capital": false,
                "country": "China",
                "east": 121.65880869475835,
                "elevation": 0,
                "geoname": "Shanghai, China",
                "id": "0",
                "lat": 31.22222,
                "lng": 121.45806,
                "name": "Shanghai",
                "north": 31.393892916013158,
                "population": 14608512,
                "region": "Asia, Eastern Asia, China",
                "south": 31.050547083986842,
                "west": 121.25731130524166
            }
            </pre>
            Obviously, in a real-world scenario, you would make sure that the
            data already comes in this form.
            */            
            return {
                area: area,
                capital: data.feature_code == 'PPLC',
                country: country.name,
                east: data.longitude + lngSize / 2,
                elevation: data.elevation,
                geoname: [data.name, country.name].join(', '),
                id: id.toString(),
                lat: data.latitude,
                lng: data.longitude,
                name: data.name,
                north: data.latitude + latSize / 2,
                population: data.population,
                region: [country.continent, country.region, country.name].join(', '),
                south: data.latitude - latSize / 2,
                west: data.longitude - lngSize / 2
            };
        });

        var $preview = Ox.Button({
                    disabled: true,
                    selectable: true,
                    title: 'view',
                    type: 'image'
                })
                .bindEvent({
                    change: function(data) {
                        $list[(data.value ? 'open' : 'close') + 'Preview']();
                    }
                }),
            /*
            As we want the list to be searchable, we add an input element.
            */
            $find = Ox.Input({
                    clear: true,
                    placeholder: 'Find',
                    width: 192
                })
                .bindEvent({
                    submit: function(data) {
                        $list.options({
                            query: {
                                conditions: data.value ? [
                                    {
                                        key: 'name',
                                        operator: '=',
                                        value: data.value
                                    },
                                    {
                                        key: 'region',
                                        operator: '=',
                                        value: data.value
                                    },
                                    {
                                        key: 'continent',
                                        operator: '=',
                                        value: data.value
                                    }
                                ] : [],
                                operator: '|'
                            }
                        });
                    }
                }),
            $toolbar = Ox.Bar({size: 24})
                .attr({id: 'toolbar'})
                .append($preview)
                .append($find),
            $list = Ox.TextList({
                    columns: [
                        {
                            /*
                            We don't want to display the id, so we omit the
                            visible attribute, which defaults to false. We still
                            have to include the id here, since is the unique key
                            of our table. In consequence, whenever the list
                            fires a select event, it will reference this value
                            as the item's id.
                            */
                            id: 'id',
                            operator: '+',
                            title: 'ID',
                            unique: true,
                            width: 80
                        },
                        {
                            /*
                            We use the format function to display the region as
                            a colored icon with a tooltip. The region class is
                            added to apply our own custom CSS, and
                            Ox.getGeoColor returns a color for the region. Note
                            that the actual value is 'Continent, Region,
                            Country', which results in a nicer sort order than
                            just 'Region'.
                            */
                            format: function(value) {
                                var region = value.split(', ')[1];
                                return Ox.Element({
                                        tooltip: region
                                    })
                                    .addClass('region')
                                    .css({
                                        background: 'rgb('
                                            + Ox.getGeoColor(region).join(', ')
                                            + ')'
                                    });
                            },
                            id: 'region',
                            /*
                            The operator indicates that we want the default sort
                            order for this column to be ascending.
                            */
                            operator: '+',
                            /*
                            We want the column title to be a symbol, so we pass
                            the 'icon' symbol at a titleImage. We can pick
                            anything from the collection of symbols that comes
                            with Ox.UI. The column still needs a textual title,
                            to be displayed in the menu that allows to show or
                            hide specific columns.
                            */
                            title: 'Region',
                            titleImage: 'icon',
                            /**/
                            visible: true,
                            width: 16
                        },
                        {
                            /*
                            Ox.getFlagByGeoname and Ox.getFlagByCountryCode
                            return pretty flag icons.
                            */
                            format: function(value) {
                                return Ox.Element({
                                        element: '<img>',
                                        tooltip: value
                                    })
                                    .addClass('flag')
                                    .attr({
                                        src: Ox.getFlagByGeoname(value)
                                    })
                            },
                            id: 'country',
                            operator: '+',
                            title: 'Country',
                            titleImage: 'flag',
                            visible: true,
                            width: 16
                        },
                        {
                            format: function(value) {
                                return value
                                    ? Ox.Element({
                                            element: '<img>',
                                            tooltip: 'Capital'
                                        })
                                        .addClass('capital')
                                        .attr({
                                            src: Ox.UI.getImageURL('symbolStar')
                                        })
                                    : '';
                            },
                            id: 'capital',
                            operator: '-',
                            title: 'Capital',
                            titleImage: 'star',
                            visible: true,
                            width: 16
                        },
                        {
                            /*
                            The format function has a second argument that
                            contains the values of all columns. This allows us
                            to format a value dependent on other values. In this
                            case, we want to display the name in bold if the
                            value for capital is true.
                            */
                            format: function(value, data) {
                                return data.capital
                                    ? '<b>' + value + '</b>'
                                    : value;
                            },
                            id: 'name',
                            operator: '+',
                            /*
                            As it wouldn't make much sense to display the list
                            without the name column, we make it non-removable.
                            */
                            removable: false,
                            title: 'Name',
                            visible: true,
                            width: 128
                        },
                        {
                            /*
                            Since the following values are numbers, they should
                            be right-aligned. Also, we use some of the built-in
                            format functions.
                            */
                            align: 'right',
                            format: function(value) {
                                return Ox.formatNumber(value);
                            },
                            id: 'population',
                            operator: '-',
                            title: 'Population',
                            visible: true,
                            width: 80
                        },
                        {
                            format: function(value) {
                                return Ox.formatDegrees(value, 'lat');
                            },
                            align: 'right',
                            id: 'lat',
                            operator: '-',
                            title: 'Latitude',
                            visible: true,
                            width: 80
                        },
                        {
                            format: function(value) {
                                return Ox.formatDegrees(value, 'lng');
                            },
                            align: 'right',
                            id: 'lng',
                            operator: '+',
                            title: 'Longitude',
                            visible: true,
                            width: 80
                        },
                        {
                            format: function(value) {
                                return Ox.formatNumber(value) + ' m';
                            },
                            align: 'right',
                            id: 'elevation',
                            operator: '-',
                            title: 'Elevation',
                            width: 80
                        }
                    ],
                    /*
                    This allows the user to move the columns around
                    */
                    columnsMovable: true,
                    /*
                    This enables the UI to show or hide specific columns
                    */
                    columnsRemovable: true,
                    /*
                    This makes sure the column titles get displayed
                    */
                    columnsVisible: true,
                    items: cities,
                    /*
                    FIXME: Actually, 'keys' doesn't make so much sense when the
                    API is local, since the list has been passed all data anyway
                    */
                    keys: ['capital'],
                    max: 1,
                    scrollbarVisible: true,
                    /*
                    We have to specify the default sort order.
                    */
                    sort: ['-population', '+name'],
                    sums: ['population']
                })
                .bindEvent({
                    closepreview: function() {
                        $preview.options({value: false});
                        $dialog.close();
                    },
                    init: function(data) {
                        $status.html(
                            (data.items ? Ox.formatNumber(data.items) : 'No')
                            + ' Cit' + (data.items == 1 ? 'y' : 'ies')
                            + ', Populaion: ' + (
                                data.population
                                ? Ox.formatNumber(data.population)
                                : 'None'
                            )
                        );
                    },
                    open: function(data) {
                        $map.zoomToPlace();
                    },
                    openpreview: function(data) {
                        var item = Ox.getObjectById(cities, data.ids[0]);
                        $flagImage = $('<img>')
                            .attr({
                                src: Ox.getFlagByGeoname(item.country, 256)
                            });
                        $mapImage = Ox.MapImage({
                                height: 256,
                                markers: [item],
                                place: Ox.getCountryByGeoname(item.country),
                                width: 256
                            });
                        setImageSizes();
                        $preview.options({value: true});
                        $dialog.options({
                            content: $content = Ox.Element()
                                .attr({id: 'content'})
                                .append($flagImage)
                                .append($mapImage),
                            title: [item.name, item.country].join(', ')
                        }).open();
                    },
                    select: function(data) {
                        $preview.options({disabled: data.ids.length == 0});
                        $map.options({selected: data.ids[0]}).panToPlace();
                    }
                }),
            $flagImage,
            $mapImage,
            $content = Ox.Element(),
            $dialog = Ox.Dialog({
                    closeButton: true,
                    content: $content,
                    fixedRatio: true,
                    focus: false,
                    height: 288,
                    maximizeButton: true,
                    maxHeight: 432,
                    maxWidth: 864,
                    minHeight: 144,
                    minWidth: 384,
                    width: 576
                })
                .bindEvent({
                    close: function() {
                        $list.closePreview();
                    },
                    resize: function(data) {
                        $content.css({height: data.height - 16 + 'px'})
                        setImageSizes();
                    }
                }),
            $status = $('<div>').css({
                margin: '3px',
                fontSize: '9px',
                textAlign: 'center'
            }),
            $statusbar = Ox.Bar({size: 16}).append($status),
            $map = Ox.Map({
                    clickable: true,
                    keys: ['population'],
                    markerColor: function(place) {
                        return place.population === void 0 ? [128, 128, 128]
                            : place.population >= 10000000 ? [255, 0, 0]
                            : place.population >= 5000000 ? [255, 32, 0]
                            : place.population >= 2000000 ? [255, 64, 0]
                            : place.population >= 1000000 ? [255, 96, 0]
                            : place.population >= 500000 ? [255, 128, 0]
                            : place.population >= 200000 ? [255, 160, 0]
                            : place.population >= 100000 ? [255, 192, 0]
                            : place.population >= 50000 ? [255, 224, 0]
                            : [255, 255, 0];
                    },
                    markerSize: function(place) {
                        return place.population === void 0 ? 16 
                            : place.population >= 10000000 ? 24
                            : place.population >= 5000000 ? 22
                            : place.population >= 2000000 ? 20
                            : place.population >= 1000000 ? 18
                            : place.population >= 500000 ? 16
                            : place.population >= 200000 ? 14
                            : place.population >= 100000 ? 12
                            : place.population >= 50000 ? 10
                            : 8;
                    },
                    places: cities,
                    showControls: true,
                    showToolbar: true,
                    showZoombar: true
                })
                .bindEvent({
                    select: function(data) {
                        $list.options({
                            selected: data.place ? [data.place.id] : []
                        });
                    }
                }),
            $listPanel = Ox.SplitPanel({
                    elements: [
                        {element: $toolbar, size: 24},
                        {element: $list},
                        {element: $statusbar, size: 16}
                    ],
                    orientation: 'vertical'
                }),
            $mainPanel = Ox.SplitPanel({
                    elements: [
                        {
                            element: $listPanel.bindEvent({
                                resize: function(data) {
                                    $find.options({
                                        width: data.size < 220
                                            ? data.size - 28
                                            : 192
                                    });
                                }
                            }),
                            resizable: true,
                            resize: [176, 256, 336, 416, 496].map(function(size) {
                                return size + Ox.UI.SCROLLBAR_SIZE;
                            }),
                            size: 416 + Ox.UI.SCROLLBAR_SIZE
                        },
                        {
                            element: $map.bindEvent({
                                resizeend: $map.resizeMap
                            })
                        }
                    ],
                    orientation: 'horizontal'
                })
                .appendTo(Ox.$body);

        function setImageSizes() {
            var size = Math.floor(($dialog.options('width') - 64) / 2);
            [$flagImage, $mapImage].forEach(function($image) {
                $image.css({width: size + 'px', height: size + 'px'});
            });
        }

        Ox.$window.bind({resize: $map.resizeMap});

    });

});