oxjs/readme/test1.html

<h1>This is just a test</h1>

<p>Foo bar baz.</p>

<p>foo: <code>// this is some code</code></p>

<blockquote>blockquote</blockquote>

<a href="#readme/test2">test</a>

<p><pre class="code">
/*

*/

'use strict';

/*
We have to load the Geo module to get Ox.COUNTRIES
*/
Ox.load({UI: {}, Geo: {}}, function() {

    var countries = Ox.COUNTRIES.filter(function(country) {
            /*
            We filter out some types of countries that we're not interested in.
            */
            return !country.disputed
                && !country.dissolved
                && !country.exception
                && country.code.length == 2
        }).map(function(country) {
            /*
            For independent countries, the dependency property is undefined. We
            want an empty array though, so that the type of this column gets
            correctly detected as array.
            */
            country.dependency = country.dependency || [];
            /*
            When sorting the list by region, we want the regions to be grouped
            by continent. To get this sort order, we set the value for region to
            'Continent, Region'. Later, a format function for the region column
            will remove the continent part again.
            */
            country.region = country.continent + ', ' + country.region;
            return country;
        }),
        api = Ox.api(countries, {sort: ['+name'], unique: 'code'}),
        $list = Ox.TextList({
                columns: [
                    {
                        /*
                        The format function of a column has a second argument
                        which contains the values of all columns. This allows us
                        to format a value dependent on other values. In this
                        case, we want to display a flag, and while our items
                        don't have a flag property, the Geo module allows us to
                        derive it from the name property. The flag image needs a
                        tooltip (which is why we can't use an $('<img>') here),
                        and gets some CSS adjustments.
                        */
                        format: function(value, data) {
                            return Ox.Element({
                                    element: '<img>',
                                    tooltip:
                                        '<div style="margin-top: 2px"><img src="'
                                        + Ox.getFlagByGeoname(data.name, 64)
                                        + '"/></div>'
                                })
                                .attr({
                                    src: Ox.getFlagByGeoname(data.name, 16)
                                })
                                .css({
                                    width: '14px',
                                    height: '14px',
                                    marginLeft: '-3px'
                                })
                        },
                        /*
                        As the actual key for the column, we use the country
                        code, not the country name, since we still want to
                        display the name in its own column.
                        */
                        id: 'flagURL',
                        operator: '+',
                        removable: false,
                        /*
                        We want the column title to be a flag symbol, so we
                        specify this as the titleImage. We can pick anything
                        from the collection of symbols that comes with Ox.UI.
                        The column still needs a textual title that will be
                        displayed in the menu that allows to show or hide
                        specific columns.
                        */
                        title: 'Flag',
                        titleImage: 'flag',
                        /*
                        The country code is the unique key of our country table.
                        In consequence, whenever the list fires a select event,
                        it will reference this value as the item's id.
                        */
                        unique: true,
                        visible: true,
                        width: 16
                    },
                    {
                        id: 'code',
                        operator: '+',
                        title: 'Code',
                        unique: true,
                        visible: true,
                        width: 64
                    },
                    {
                        id: 'name',
                        /*
                        The operator indicates that we want the default sort
                        order of this column to be ascending.
                        */
                        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: 256
                    },
                    {
                        id: 'continent',
                        operator: '+',
                        title: 'Continent',
                        visible: true,
                        width: 96
                    },
                    {
                        /*
                        To tweak the sort order for this column, we had changed
                        the value for region to 'Continent, Region'. The format
                        function now reverts that change.
                        */
                        format: function(value) {
                            return value.split(', ')[1];
                        },
                        id: 'region',
                        operator: '+',
                        title: 'Region',
                        visible: true,
                        width: 160
                    },
                    {
                        /*
                        As the value is a number, it should be right-aligned.
                        */
                        align: 'right',
                        /*
                        To get from square meters to something human-readable,
                        we use one of the built-in format functions.
                        */
                        format: function(value) {
                            return Ox.formatArea(value);
                        },
                        id: 'area',
                        operator: '-',
                        title: 'Area',
                        visible: true,
                        width: 112
                    },
                    {
                        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
                    },
                    /*
                    For the next four columns, which seem less important, we
                    omit the 'visible' option, which defaults to false. They can
                    still be made visible, they're just not visible by default.
                    */
                    {
                        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
                    },
                    {
                        /*
                        The dependency property is an array of country names,
                        for each of which we want to display a flag. So we use a
                        similar constuction as above, and wrap the images in a
                        $('<div>') element.
                        */
                        format: function(value) {
                            var ret = '';
                            if (value) {
                                var ret = $('<div>').css({marginLeft: '-4px'});
                                value.forEach(function(country) {
                                    Ox.Element({
                                            element: '<img>',
                                            tooltip: country
                                        })
                                        .attr({
                                            src: Ox.getFlagByGeoname(country, 16)
                                        })
                                        .css({
                                            width: '14px',
                                            height: '14px',
                                            margin: '1px'
                                        })
                                        .appendTo(ret);
                                });                                
                            }
                            return ret;
                        },
                        id: 'dependency',
                        operator: '+',
                        title: 'Dependency of',
                        visible: true,
                        width: 112
                    }
                ],
                /*
                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: api,
                /*
                Pagination is useful when a list is so big that only parts of it
                can be requested or displayed. Since this is not the case here,
                we set the page length to a sufficiently large number.
                */
                pageLength: Ox.COUNTRIES.length,
                scrollbarVisible: true,
                /*
                We have to specify the default sort order.
                */
                sort: [{key: 'name', operator: '+'}]
            })
            .bindEvent({
                /*
                The init event of a list fires when the items function has
                returned the total number of items. If we're dealing with a
                remote API, a complex query, a huge dataset or a range request
                for paginated results according to a non-trivial sort order,
                this may happen quite a bit before any items are returned. Here,
                we simply display the number of items in the status bar.
                */
                init: function(data) {
                    $status.html(
                        (data.items || 'No') + ' countr'
                        + (data.items == 1 ? 'y' : 'ies')
                    );
                }
            }),
        /*
        We want the user to be able to pick if dependent countries are included
        in the list or not. So we add a checkbox, and bind the find function to
        its change event.
        */
        $include = Ox.Checkbox({
                title: 'Include Dependencies',
                value: true
            })
            .css({float: 'left', margin: '4px'})
            .bindEvent({
                change: find
            }),
        /*
        We want a search field with find-as-you-type, so we use an input element
        and set its changeOnKeypress option to true.
        */
        $find = Ox.Input({
                changeOnKeypress: true,
                placeholder: 'Find',
                width: 192
            })
            .css({float: 'right', margin: '4px'})
            .bindEvent({
                change: find
            }),
        /*
        ...
        */
        $toolbar = Ox.Bar({size: 24}).append($include).append($find),
        $status = $('<div>').css({
            marginTop: '2px',
            fontSize: '9px',
            textAlign: 'center'
        }),
        $statusbar = Ox.Bar({size: 16}).append($status),
        $panel = Ox.SplitPanel({
                elements: [
                    {element: $toolbar, size: 24},
                    {element: $list},
                    {element: $statusbar, size: 16}
                ],
                orientation: 'vertical'
            })
            .appendTo(Ox.$body);

    function find() {
        /*
        The find function is bound to the change events of the $include checkbox
        and the $find input field. In both cases, the value will be passed, but
        since we need both values, we disregard it and query both elements for
        their value. If the $include box is not checked, we add a second
        condition that matches only independent countries.
        */
        var conditions = [
            {key: 'name', operator: '=', value: $find.options('value')},
        ];
        !$include.options('value') && conditions.push(
            {key: 'dependency', operator: '=', value: void 0}
        );
        /*
        ...
        */
        api({
            keys: [],
            query: {conditions: conditions, operator: '&'}
        }, function(result) {
            $list.options({
                items: Ox.api(
                    result.data.items, {sort: '+name', unique: 'code'}
                )
            });
        });
    }

});
</pre></p>