diff --git a/readme/documentation.html b/readme/documentation.html new file mode 100644 index 00000000..64abfb98 --- /dev/null +++ b/readme/documentation.html @@ -0,0 +1,3 @@ +

OxDoc - A JavaScript Documentation Language

+ +

Nothing to see here yet, please move along...

\ No newline at end of file diff --git a/readme/getting_started.html b/readme/getting_started.html new file mode 100644 index 00000000..585ed539 --- /dev/null +++ b/readme/getting_started.html @@ -0,0 +1,3 @@ +

Getting Started with OxJS

+ +

Nothing to see here yet, please move along...

\ No newline at end of file diff --git a/readme/test1.html b/readme/test1.html deleted file mode 100644 index d7fe0a39..00000000 --- a/readme/test1.html +++ /dev/null @@ -1,389 +0,0 @@ -

This is just a test

- -

Foo bar baz.

- -

foo: // this is some code

- -
blockquote
- -test - -

-/*
-
-*/
-
-'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 $('') here),
-                        and gets some CSS adjustments.
-                        */
-                        format: function(value, data) {
-                            return Ox.Element({
-                                    element: '',
-                                    tooltip:
-                                        '
' - }) - .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 - $('
') element. - */ - format: function(value) { - var ret = ''; - if (value) { - var ret = $('
').css({marginLeft: '-4px'}); - value.forEach(function(country) { - Ox.Element({ - element: '', - 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 = $('
').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'} - ) - }); - }); - } - -}); -

\ No newline at end of file diff --git a/readme/test2.html b/readme/test2.html deleted file mode 100644 index 93e16d10..00000000 --- a/readme/test2.html +++ /dev/null @@ -1,67 +0,0 @@ -

Before and After

-

-// before:
-for (var i == 0; i < bigArray.length; i++) {
-    if (bigArray[i].isSelected) {
-        bigArray[i].onDeselect = (function(i) {
-            return function() {
-                doSomething(i);
-            }
-        })(i);
-    }
-    if (!bigArray[i].isSelectable) {
-        break;
-    }
-}
-// after:
-Ox.forEach(bigArray, function(v, i) {
-    if (v.isSelected) {
-        v.onDeselect = function() {
-            doSomething(i);
-        };
-    }
-    return v.isSelectable;
-});
-
-// before:
-var exists = array.indexOf(value) > -1;
-// after:
-var exists = Ox.contains(array, value);
-
-// before:
-var key;
-for (var k in obj) {
-    if (obj[k] === value) {
-        key = k;
-        break;
-    }
-}
-// after:
-var key = Ox.keyOf(object, value);
-
-
-// before:
-var last = arrayWithLongName[arrayWithLongName.length - 1];
-// after:
-var last = Ox.last(arrayWithLongName);
-
-// before:
-arrayWithLongName[arrayWithLongName.length - 1] = 0;
-// after:
-Ox.last(arrayWithLongName, 0);
-
-// before:
-myNumber = Math.min(Math.max(myNumber, min), max);
-// after:
-myNumber = Ox.limit(myNumber, min, max);
-
-// before:
-var random = min + Math.floor(Math.random() * (max - min));
-// after:
-var random = Ox.random(min, max);
-
-// before:
-var mod = -1 % 10 // -1;
-// after:
-var mod = Ox.mod(-1, 10) // 9
-