') 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
-