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

TextList -> TableList

Browse source
This commit is contained in:
rolux 2012-06-27 09:41:10 +02:00
parent 7648d2d4ac
commit bdebb03a45
17 changed files with 101 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
examples/lists/cities/css/example.css
View file

@ -21,20 +21,20 @@
box-shadow: 0 0 1px rgb(128, 128, 128);
}
.OxTextList .OxItem .OxCell > div.region {
.OxTableList .OxItem .OxCell > div.region {
width: 14px;
height: 14px;
border-radius: 2px;
margin-left: -3px;
box-shadow: 0 0 2px rgb(128, 128, 128) inset;
}
.OxTextList .OxItem .OxCell > img.flag {
.OxTableList .OxItem .OxCell > img.flag {
width: 14px;
height: 14px;
margin: 0 0 0 -3px;
border-radius: 2px;
}
.OxTextList .OxItem .OxCell > img.capital {
.OxTableList .OxItem .OxCell > img.capital {
width: 10px;
height: 10px;
margin: 2px 0 0 -1px;

2
examples/lists/cities/js/example.js
View file

@ -141,7 +141,7 @@ Ox.load({UI: {showScreen: true}, Geo: {}}, function() {
.attr({id: 'toolbar'})
.append($preview)
.append($find),
$list = Ox.TextList({
$list = Ox.TableList({
columns: [
{
/*

2
examples/lists/countries/js/example.js
View file

@ -309,7 +309,7 @@ Ox.load(['Geo', 'UI'], function() {
init: init,
select: select
})
: Ox.TextList({
: Ox.TableList({
columns: columns,
columnsMovable: true,
columnsRemovable: true,

7
examples/maps/manhattan_grid/js/example.js
View file

@ -1,8 +1,7 @@
/*
The idea (a slight variation of a proposal by [Harold
Cooper](http://extendny.com/)) is to extend the Manhattan Grid in all
directions, so that every point on Earth can be addressed as "Xth Ave & Yth
St".
The idea (a slight variation of a proposal by <a href="http://extendny.com/"
target="_blank">Harold Cooper</a> is to extend the Manhattan Grid in all
directions, so that every point on Earth can be addressed as "Xth Ave & Yth St".
The origin of this coordinate system is the intersection of Zero Ave (a.k.a.
Avenue A) and Zero St (a.k.a. Houston St). Avenues east of Zero Ave, just as

28
source/Ox.Geo/Ox.Geo.js
View file

@ -9,27 +9,27 @@ Ox.load.Geo = function(options, callback) {
/*@
Ox.COUNTRIES <[o]> Array of countries
A list of independent or de-facto independent countries and
dependencies since January 1, 1970 (see
<a href="http://en.wikipedia.org/wiki/List_of_sovereign_states">Wikipedia</a>),
dependencies since January 1, 1970 (see
<a href="http://en.wikipedia.org/wiki/List of sovereign states" target="_blank">Wikipedia</a>),
including other entities with
<a href="http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2">ISO 3166-1 alpha-2</a>
<a href="http://en.wikipedia.org/wiki/ISO 3166-1 alpha-2" target="_blank">ISO 3166-1 alpha-2</a>
country codes or country status at
<a href="http://www.imdb.com/country/">IMDb</a> or
<a href="http://www.fifa.com/worldranking/rankingtable/">FIFA</a>,
<a href="http://www.imdb.com/country/" target="_blank">IMDb</a> or
<a href="http://www.fifa.com/worldranking/rankingtable/" target="_blank">FIFA</a>,
grouped by continents and regions (see
<a href="http://unstats.un.org/unsd/methods/m49/m49regin.htm">United Nations</a>).
area <n> Area of the country's bounding box in square meters
code <s> ISO 3166-1 alpha-2, ISO 3166-2 or ISO 3166-3 country code
continent <s> The country's continent
created <o> Present if the country was created since 1970
created <o|u> Present if the country was created since 1970
country <[s]> Preceding country or countries
created <s> "merged", "renamed" or "split"
date <s> Date of creation ("YYYY" or "YYYY-MM-DD")
dependencies <[s]> Array of dependencies of the country
dependency <[s]> Array of countries the country is a dependency of
disputed <[s]> Array of countries the country is disputed by
disputes <[s]> Array of countries the country disputes
dissolved <o> Present if the country was dissolved
dependencies <[s]|u> Array of dependencies of the country
dependency <[s]|u> Array of countries the country is a dependency of
disputed <[s]|u> Array of countries the country is disputed by
disputes <[s]|u> Array of countries the country disputes
dissolved <o|u> Present if the country was dissolved
country <[s]> Succeeding country or countries
date <s> Date of dissolution ("YYYY" or "YYYY-MM-DD")
dissolved <s> "joined", "merged" or "renamed"
@ -39,10 +39,10 @@ Ox.load.Geo = function(options, callback) {
flagURL <s> The country's flag (Wikipedia, SVG)
googleName <s|u> The country's name according to Google Maps
imdbName <s|u> The country's name according to IMDb
independence <o> Present if the country became independent since 1970
independence <o|u> Present if the country became independent since 1970
country <[s]> Former country or countries
date <s> Date of independence ("YYYY" or "YYYY-MM-DD")
languages <[s]> Array of languages spoken in this country
languages <[s]|u> Array of languages spoken in this country
To be precise: languages that are spoken in this country more
than in any other, i.e. each language only appears once. This
can be used to map languages to flag icons.
@ -52,7 +52,7 @@ Ox.load.Geo = function(options, callback) {
north <n> Latitude of the country's northern boundary
region <s> The country's region
south <n> Latitude of the country's southern boundary
wikipediaName <s> The country's name according to Wikipedia
wikipediaName <s|u> The country's name according to Wikipedia
west <n> Longitude of the country's western boundary
<script>
Ox.test.array = [

54
source/Ox.UI/css/Ox.UI.css
View file

@ -1271,30 +1271,30 @@ Lists
}
.OxTextList {
.OxTableList {
top: 0;
bottom: 0;
}
.OxTextList .OxBar {
.OxTableList .OxBar {
//z-index: 10;
//-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
//-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.75);
}
.OxTextList .OxHead {
.OxTableList .OxHead {
position: absolute;
left: 0;
height: 16px;
overflow: hidden;
white-space: nowrap;
}
.OxTextList .OxHead .OxHeadCell {
.OxTableList .OxHead .OxHeadCell {
float: left;
}
.OxTextList .OxHead .OxHeadCell:first-child {
.OxTableList .OxHead .OxHeadCell:first-child {
padding-left: 2px;
}
.OxTextList .OxHead .OxTitle {
.OxTableList .OxHead .OxTitle {
float: left;
height: 14px;
padding: 2px 2px 0 2px;
@ -1305,37 +1305,37 @@ Lists
overflow: hidden;
white-space: nowrap;
}
.OxTextList .OxHead .OxTitle img {
.OxTableList .OxHead .OxTitle img {
display: block;
width: 10px;
height: 10px;
margin: 1px 0 0 -1px;
}
.OxTextList .OxHead .OxOrder {
.OxTableList .OxHead .OxOrder {
float: left;
display: none;
}
.OxTextList .OxHead .OxHeadCell.OxSelected .OxOrder {
.OxTableList .OxHead .OxHeadCell.OxSelected .OxOrder {
//cursor: pointer;
display: block;
}
.OxTextList .OxHead .OxResize {
.OxTableList .OxHead .OxResize {
float: left;
width: 5px;
height: 16px;
}
.OxTextList .OxHead .OxResize.OxResizable {
.OxTableList .OxHead .OxResize.OxResizable {
cursor: ew-resize;
}
.OxTextList .OxHead .OxResize div {
.OxTableList .OxHead .OxResize div {
float: left;
width: 2px;
height: 16px;
}
.OxTextList .OxHead .OxResize div.OxCenter {
.OxTableList .OxHead .OxResize div.OxCenter {
width: 1px;
}
.OxTextList .OxBar .OxSelect {
.OxTableList .OxBar .OxSelect {
position: absolute;
right: 0px;
width: 11px;
@ -1349,11 +1349,11 @@ Lists
overflow: hidden;
border-radius: 0;
}
.OxTextList .OxBar .OxSelect > input {
.OxTableList .OxBar .OxSelect > input {
margin-right: -3px;
}
.OxTextList .OxBody {
.OxTableList .OxBody {
float: left;
position: absolute;
left: 0;
@ -1361,14 +1361,14 @@ Lists
right: 0;
bottom: 0;
}
.OxTextList .OxContent {
.OxTableList .OxContent {
//width: 100%;
}
.OxTextList .OxItem {
.OxTableList .OxItem {
height: 16px;
cursor: default;
}
.OxTextList .OxItem .OxCell {
.OxTableList .OxItem .OxCell {
float: left;
height: 14px;
padding: 1px 4px 1px 4px;
@ -1377,36 +1377,36 @@ Lists
overflow: hidden;
white-space: nowrap;
}
.OxTextList .OxItem .OxCell.OxEdit {
.OxTableList .OxItem .OxCell.OxEdit {
height: 16px;
padding: 0;
}
.OxTextList .OxItem .OxCell > img {
.OxTableList .OxItem .OxCell > img {
display: block;
width: 16px;
height: 16px;
margin: -1px 0 0 -4px;
}
.OxTextList .OxItem .OxSpace {
.OxTableList .OxItem .OxSpace {
float: left;
width: 4px;
height: 16px;
}
.OxTextList .OxItem .OxLine {
.OxTableList .OxItem .OxLine {
float: left;
width: 1px;
height: 16px;
}
.OxTextList .OxItem.OxSelected .OxCell.OxClickable {
.OxTableList .OxItem.OxSelected .OxCell.OxClickable {
cursor: pointer;
}
.OxTextList .OxItem.OxSelected .OxCell.OxEditable {
.OxTableList .OxItem.OxSelected .OxCell.OxEditable {
cursor: text;
}
.OxTextList .OxItem.OxSelected.OxDrag .OxCell {
.OxTableList .OxItem.OxSelected.OxDrag .OxCell {
cursor: ns-resize;
}
.OxTextList .OxPage {
.OxTableList .OxPage {
position: absolute;
}

2
source/Ox.UI/js/Calendar/CalendarEditor.js
View file

@ -225,7 +225,7 @@ Ox.CalendarEditor = function(options, self) {
.css({float: 'right', margin: '4px'})
.appendTo(self.$listToolbar);
self.$list = Ox.TextList({
self.$list = Ox.TableList({
columns: self.columns,
columnsRemovable: true,
columnsVisible: true,

2
source/Ox.UI/js/Form/FileInput.js
View file

@ -91,7 +91,7 @@ Ox.FileInput = function(options, self) {
})
.appendTo(that);
self.options.value.length == 0 && self.$files.hide();
self.$list = Ox.TextList({
self.$list = Ox.TableList({
columns: [
{
id: 'name',

9
source/Ox.UI/js/Form/FormPanel.js
View file

@ -19,7 +19,7 @@ Ox.FormPanel = function(options, self) {
self.section = 0;
self.sectionTitle = self.options.form[self.section].title;
self.$list = Ox.TextList({
self.$list = Ox.TableList({
columns: [
{
id: 'id',
@ -120,10 +120,9 @@ Ox.FormPanel = function(options, self) {
.hide()
.appendTo(self.$section);
});
self.$list.bindEvent('load', function() {
self.$forms.forEach(function($form, i) {
self.$list.value(self.options.form[i].id, 'valid', $form.valid());
});
self.$forms.forEach(function($form, i) {
self.$list.value(self.options.form[i].id, 'valid', $form.valid());
});
self.$sections[0].show();

2
source/Ox.UI/js/List/Chart.js vendored
View file

@ -169,7 +169,7 @@ Ox.Chart = function(options, self) {
}
function renderChart() {
return Ox.TextList({
return Ox.TableList({
columns: getColumns(),
items: self.items,
max: 0,

4
source/Ox.UI/js/List/List.js
View file

@ -1512,7 +1512,7 @@ Ox.List = function(options, self) {
clearCache <f> empty list cache
() -> <o> the list
@*/
that.clearCache = function() { // fixme: was used by TextList resizeColumn, now probably no longer necessary
that.clearCache = function() { // fixme: was used by TableList resizeColumn, now probably no longer necessary
self.$pages = [];
return that;
};
@ -1560,7 +1560,7 @@ Ox.List = function(options, self) {
() -> <o> the list
@*/
that.reloadPages = function() {
// this is called by TextList when the column layout changes
// this is called by TableList when the column layout changes
var page, scrollLeft, scrollTop;
if (!self.isAsync) {
scrollLeft = that.scrollLeft();

11
source/Ox.UI/js/List/TextList.js → source/Ox.UI/js/List/TableList.js
View file

@ -1,8 +1,8 @@
'use strict';
/*@
Ox.TextList <f> TextList Object
([options[, self]]) -> <o:Ox.Element> TextList Object
Ox.TableList <f> TableList Widget
([options[, self]]) -> <o:Ox.Element> TableList Object
options <o> Options object
columns <[o]|[]> Columns
# Fixme: There's probably more...
@ -44,9 +44,8 @@ Ox.TextList <f> TextList Object
// fixme: options.columnsMovable, but options.sortable ... pick one.
Ox.TextList = function(options, self) {
Ox.TableList = function(options, self) {
// fixme: rename to TableList
// fixme: in columns, "operator" should be "sortOperator"
self = self || {};
@ -91,7 +90,7 @@ Ox.TextList = function(options, self) {
that.$body.options({sort: self.options.sort});
}
})
.addClass('OxTextList')
.addClass('OxTableList')
.bindEvent({
key_left: function() {
var $element = that.$body.$element,
@ -225,7 +224,7 @@ Ox.TextList = function(options, self) {
itemHeight: 16,
items: self.options.items,
itemWidth: getItemWidth(),
format: self.format, // fixme: not needed, happens in TextList
format: self.format, // fixme: not needed, happens in TableList
keys: self.visibleColumns.map(function(column) {
return column.id;
}).concat(self.options.keys),

4
source/Ox.UI/js/List/TreeList.js
View file

@ -62,8 +62,8 @@ Ox.TreeList = function(options, self) {
max: self.options.max,
min: self.options.min,
unique: 'id'
}, Ox.extend(Ox.clone(self), {updateCallbacks: []})) // pass event handler
.addClass('OxTextList OxTreeList')
}, Ox.clone(self))
.addClass('OxTableList OxTreeList')
.css({
width: self.options.width + 'px',
overflowY: 'scroll'

2
source/Ox.UI/js/Map/Map.js
View file

@ -1564,7 +1564,7 @@ Ox.Map = function(options, self) {
(id, key, value) -> <o> set id, key to value
@*/
that.value = function(id, key, value) {
// fixme: should be like the corresponding List/TextList/etc value function
// fixme: should be like the corresponding List/TableList/etc value function
Ox.Log('Map', 'Map.value', id, key, value);
getPlaceById(id).options(key, value);
if (id == self.options.selected) {

2
source/Ox.UI/js/Map/MapEditor.js
View file

@ -332,7 +332,7 @@ Ox.MapEditor = function(options, self) {
.css({float: 'right', margin: '4px'})
.appendTo(self.$listToolbar);
self.$list = Ox.TextList({
self.$list = Ox.TableList({
columns: self.columns,
columnsRemovable: true,
columnsVisible: true,

34
source/Ox.UI/themes/classic/css/classic.css
View file

@ -494,61 +494,61 @@ Lists
.OxThemeClassic .OxTextList .OxContent {
.OxThemeClassic .OxTableList .OxContent {
background: rgb(240, 240, 240);
}
.OxThemeClassic .OxTextList .OxItem .OxCell {
.OxThemeClassic .OxTableList .OxItem .OxCell {
border-right-color: rgb(224, 224, 224);
}
.OxThemeClassic .OxTextList .OxItem:nth-child(odd) {
.OxThemeClassic .OxTableList .OxItem:nth-child(odd) {
background: rgb(242, 242, 242);
}
.OxThemeClassic .OxTextList .OxItem:nth-child(even) {
.OxThemeClassic .OxTableList .OxItem:nth-child(even) {
background: rgb(238, 238, 238);
}
.OxThemeClassic .OxTextList .OxItem.OxSelected:nth-child(odd) {
.OxThemeClassic .OxTableList .OxItem.OxSelected:nth-child(odd) {
background: rgb(226, 226, 226);
}
.OxThemeClassic .OxTextList .OxItem.OxSelected:nth-child(even) {
.OxThemeClassic .OxTableList .OxItem.OxSelected:nth-child(even) {
background: rgb(222, 222, 222);
}
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(odd) {
.OxThemeClassic .OxTableList .OxFocus .OxItem.OxSelected:nth-child(odd) {
background: rgb(210, 210, 210);
}
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) {
.OxThemeClassic .OxTableList .OxFocus .OxItem.OxSelected:nth-child(even) {
background: rgb(206, 206, 206);
}
.OxThemeClassic .OxTextList .OxItem.OxDroppable.OxDrop:nth-child(odd) .OxCell {
.OxThemeClassic .OxTableList .OxItem.OxDroppable.OxDrop:nth-child(odd) .OxCell {
background: rgb(194, 194, 194);
}
.OxThemeClassic .OxTextList .OxItem.OxDroppable.OxDrop:nth-child(even) .OxCell {
.OxThemeClassic .OxTableList .OxItem.OxDroppable.OxDrop:nth-child(even) .OxCell {
background: rgb(190, 190, 190);
}
.OxThemeClassic .OxTextList .OxHead .OxSelected {
.OxThemeClassic .OxTableList .OxHead .OxSelected {
background: -moz-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176));
background: -o-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176));
background: -webkit-linear-gradient(top, rgb(208, 208, 208), rgb(176, 176, 176));
color: rgb(0, 0, 0);
}
.OxThemeClassic .OxTextList .OxHead .OxResize .OxCenter {
.OxThemeClassic .OxTableList .OxHead .OxResize .OxCenter {
background: rgb(192, 192, 192);
}
.OxThemeClassic .OxTextList .OxHead .OxSelect {
.OxThemeClassic .OxTableList .OxHead .OxSelect {
border-color: rgb(192, 192, 192);
}
.OxThemeClassic .OxTextList .OxBody .OxItem .OxCell {
.OxThemeClassic .OxTableList .OxBody .OxItem .OxCell {
border-color: rgb(232, 232, 232);
}
.OxThemeClassic .OxTextList .OxItem.OxSelected .OxCell {
.OxThemeClassic .OxTableList .OxItem.OxSelected .OxCell {
border-color: rgb(216, 216, 216);
}
.OxThemeClassic .OxTextList .OxFocus .OxItem.OxSelected .OxCell {
.OxThemeClassic .OxTableList .OxFocus .OxItem.OxSelected .OxCell {
border-color: rgb(200, 200, 200);
color: rgb(0, 0, 0);
}
.OxThemeClassic .OxTextList .OxBody .OxItem .OxLine {
.OxThemeClassic .OxTableList .OxBody .OxItem .OxLine {
background: rgb(232, 232, 232);
}

34
source/Ox.UI/themes/modern/css/modern.css
View file

@ -484,61 +484,61 @@ Lists
}
.OxThemeModern .OxTextList .OxContent {
.OxThemeModern .OxTableList .OxContent {
background: rgb(16, 16, 16);
}
.OxThemeModern .OxTextList .OxItem .OxCell {
.OxThemeModern .OxTableList .OxItem .OxCell {
border-right-color: rgb(32, 32, 32);
}
.OxThemeModern .OxTextList .OxItem:nth-child(odd) {
.OxThemeModern .OxTableList .OxItem:nth-child(odd) {
background: rgb(14, 14, 14);
}
.OxThemeModern .OxTextList .OxItem:nth-child(even) {
.OxThemeModern .OxTableList .OxItem:nth-child(even) {
background: rgb(18, 18, 18);
}
.OxThemeModern .OxTextList .OxItem.OxSelected:nth-child(odd) {
.OxThemeModern .OxTableList .OxItem.OxSelected:nth-child(odd) {
background: rgb(46, 46, 46);
}
.OxThemeModern .OxTextList .OxItem.OxSelected:nth-child(even) {
.OxThemeModern .OxTableList .OxItem.OxSelected:nth-child(even) {
background: rgb(50, 50, 50);
}
.OxThemeModern .OxTextList .OxFocus .OxItem.OxSelected:nth-child(odd) {
.OxThemeModern .OxTableList .OxFocus .OxItem.OxSelected:nth-child(odd) {
background: rgb(62, 62, 62);
}
.OxThemeModern .OxTextList .OxFocus .OxItem.OxSelected:nth-child(even) {
.OxThemeModern .OxTableList .OxFocus .OxItem.OxSelected:nth-child(even) {
background: rgb(66, 66, 66);
}
.OxThemeModern .OxTextList .OxItem.OxDroppable.OxDrop:nth-child(odd) .OxCell {
.OxThemeModern .OxTableList .OxItem.OxDroppable.OxDrop:nth-child(odd) .OxCell {
background: rgb(78, 78, 78);
}
.OxThemeModern .OxTextList .OxItem.OxDroppable.OxDrop:nth-child(even) .OxCell {
.OxThemeModern .OxTableList .OxItem.OxDroppable.OxDrop:nth-child(even) .OxCell {
background: rgb(82, 82, 82);
}
.OxThemeModern .OxTextList .OxHead .OxSelected {
.OxThemeModern .OxTableList .OxHead .OxSelected {
background: -moz-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
background: -o-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
background: -webkit-linear-gradient(top, rgb(80, 80, 80), rgb(48, 48, 48));
color: rgb(255, 255, 255);
}
.OxThemeModern .OxTextList .OxHead .OxResize .OxCenter {
.OxThemeModern .OxTableList .OxHead .OxResize .OxCenter {
background: rgb(24, 24, 24);
}
.OxThemeModern .OxTextList .OxHead .OxSelect {
.OxThemeModern .OxTableList .OxHead .OxSelect {
border-color: rgb(24, 24, 24);
}
.OxThemeModern .OxTextList .OxBody .OxItem .OxCell {
.OxThemeModern .OxTableList .OxBody .OxItem .OxCell {
border-right-color: rgb(24, 24, 24);
}
.OxThemeModern .OxTextList .OxItem.OxSelected .OxCell {
.OxThemeModern .OxTableList .OxItem.OxSelected .OxCell {
border-right-color: rgb(40, 40, 40);
}
.OxThemeModern .OxTextList .OxFocus .OxItem.OxSelected .OxCell {
.OxThemeModern .OxTableList .OxFocus .OxItem.OxSelected .OxCell {
border-right-color: rgb(72, 72, 72);
color: rgb(255, 255, 255);
}
.OxThemeModern .OxTextList .OxBody .OxItem .OxLine {
.OxThemeModern .OxTableList .OxBody .OxItem .OxLine {
background: rgb(24, 24, 24);
}