0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

add placeholders in readme

Browse source
This commit is contained in:
rolux 2012-06-20 11:25:13 +02:00
parent 7302759ab0
commit ccc7c86713
4 changed files with 6 additions and 456 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
readme/documentation.html Normal file
View file

@ -0,0 +1,3 @@
<h1>OxDoc - A JavaScript Documentation Language</h1>
<p>Nothing to see here yet, please move along...</p>

3
readme/getting_started.html Normal file
View file

@ -0,0 +1,3 @@
<h1>Getting Started with OxJS</h1>
<p>Nothing to see here yet, please move along...</p>

389
readme/test1.html
View file

@ -1,389 +0,0 @@
<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>

67
readme/test2.html
View file

@ -1,67 +0,0 @@
<h1>Before and After</h1>
<p><pre class="code">
// 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
</pre><p>