Ox -> Ox.UI
This commit is contained in:
parent
177693b3ce
commit
e2a42ab04e
12 changed files with 47 additions and 47 deletions
|
@ -58,9 +58,9 @@ Ox.load.UI = function(options, callback) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Ox.UI = {}; // FIXME: remove
|
Ox.UI = {};
|
||||||
|
|
||||||
Ox.UILoadingScreen = (function() {
|
Ox.UI.LoadingScreen = (function() {
|
||||||
|
|
||||||
var $body = Ox.$('body'),
|
var $body = Ox.$('body'),
|
||||||
$screen = Ox.$('<div>')
|
$screen = Ox.$('<div>')
|
||||||
|
@ -229,7 +229,7 @@ Ox.load.UI = function(options, callback) {
|
||||||
|
|
||||||
Ox.documentReady(function() {
|
Ox.documentReady(function() {
|
||||||
Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(options.theme));
|
Ox.$('body').addClass('OxTheme' + Ox.toTitleCase(options.theme));
|
||||||
options.showScreen && Ox.UILoadingScreen.show();
|
options.showScreen && Ox.UI.LoadingScreen.show();
|
||||||
});
|
});
|
||||||
|
|
||||||
loadUI();
|
loadUI();
|
||||||
|
@ -276,7 +276,7 @@ Ox.load.UI = function(options, callback) {
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
if (options.showScreen && options.hideScreen) {
|
if (options.showScreen && options.hideScreen) {
|
||||||
Ox.UILoadingScreen.hide();
|
Ox.UI.LoadingScreen.hide();
|
||||||
}
|
}
|
||||||
callback(browserSupported);
|
callback(browserSupported);
|
||||||
});
|
});
|
||||||
|
|
|
@ -18,7 +18,7 @@ Ox.Bar = function(options, self) {
|
||||||
.options(options || {})
|
.options(options || {})
|
||||||
.addClass('OxBar Ox' + Ox.toTitleCase(self.options.orientation));
|
.addClass('OxBar Ox' + Ox.toTitleCase(self.options.orientation));
|
||||||
|
|
||||||
self.dimensions = Ox.DIMENSIONS[self.options.orientation];
|
self.dimensions = Ox.UI.DIMENSIONS[self.options.orientation];
|
||||||
|
|
||||||
that.css(self.dimensions[0], '100%')
|
that.css(self.dimensions[0], '100%')
|
||||||
.css(self.dimensions[1], self.options.size + 'px');
|
.css(self.dimensions[1], self.options.size + 'px');
|
||||||
|
|
|
@ -66,8 +66,8 @@ Ox.Resizebar = function(options, self) {
|
||||||
|
|
||||||
self.clientXY = self.options.orientation == 'horizontal'
|
self.clientXY = self.options.orientation == 'horizontal'
|
||||||
? 'clientY' : 'clientX';
|
? 'clientY' : 'clientX';
|
||||||
self.dimensions = Ox.DIMENSIONS[self.options.orientation];
|
self.dimensions = Ox.UI.DIMENSIONS[self.options.orientation];
|
||||||
self.edges = Ox.EDGES[self.options.orientation];
|
self.edges = Ox.UI.EDGES[self.options.orientation];
|
||||||
self.isLeftOrTop = self.options.edge == 'left' || self.options.edge == 'top';
|
self.isLeftOrTop = self.options.edge == 'left' || self.options.edge == 'top';
|
||||||
|
|
||||||
that.css({cursor: getCursor()});
|
that.css({cursor: getCursor()});
|
||||||
|
|
|
@ -458,8 +458,8 @@
|
||||||
Ox.Element.prototype.childrenElements = function childrenElements() {
|
Ox.Element.prototype.childrenElements = function childrenElements() {
|
||||||
return Ox.compact(
|
return Ox.compact(
|
||||||
Ox.slice(this.children())
|
Ox.slice(this.children())
|
||||||
.filter(Ox.isOxElement)
|
.filter(Ox.UI.isElement)
|
||||||
.map(Ox.getOxElement)
|
.map(Ox.UI.getElement)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -498,7 +498,7 @@
|
||||||
@*/
|
@*/
|
||||||
Ox.Element.prototype.findElements = function findElements() {
|
Ox.Element.prototype.findElements = function findElements() {
|
||||||
return Ox.compact(
|
return Ox.compact(
|
||||||
Ox.slice(this.find('.OxElement')).map(Ox.getOxElement)
|
Ox.slice(this.find('.OxElement')).map(Ox.UI.getElement)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -551,7 +551,7 @@
|
||||||
@*/
|
@*/
|
||||||
Ox.Element.prototype.nextElements = function nextElements() {
|
Ox.Element.prototype.nextElements = function nextElements() {
|
||||||
return Ox.compact(
|
return Ox.compact(
|
||||||
this.nextAll().filter(Ox.isOxElement).map(Ox.getOxElement)
|
this.nextAll().filter(Ox.UI.isElement).map(Ox.UI.getElement)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -588,8 +588,8 @@
|
||||||
Ox.Element.prototype.parentElements = function parentElements() {
|
Ox.Element.prototype.parentElements = function parentElements() {
|
||||||
return Ox.compact(
|
return Ox.compact(
|
||||||
Ox.slice(this.parents())
|
Ox.slice(this.parents())
|
||||||
.filter(Ox.isOxElement)
|
.filter(Ox.UI.isElement)
|
||||||
.map(Ox.getOxElement)
|
.map(Ox.UI.getElement)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -620,7 +620,7 @@
|
||||||
@*/
|
@*/
|
||||||
Ox.Element.prototype.prevElements = function prevElements() {
|
Ox.Element.prototype.prevElements = function prevElements() {
|
||||||
return Ox.compact(
|
return Ox.compact(
|
||||||
this.prevAll().filter(Ox.isOxElement).map(Ox.getOxElement)
|
this.prevAll().filter(Ox.UI.isElement).map(Ox.UI.getElement)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -698,8 +698,8 @@
|
||||||
Ox.Element.prototype.siblingElements = function siblingElements() {
|
Ox.Element.prototype.siblingElements = function siblingElements() {
|
||||||
return Ox.compact(
|
return Ox.compact(
|
||||||
Ox.slice(this.siblings())
|
Ox.slice(this.siblings())
|
||||||
.filter(Ox.isOxElement)
|
.filter(Ox.UI.isElement)
|
||||||
.map(Ox.getOxElement)
|
.map(Ox.UI.getElement)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,18 +1,18 @@
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
//@ Ox.DIMENSIONS <o> Names of horizontal and vertical dimensions
|
//@ Ox.UI.DIMENSIONS <o> Names of horizontal and vertical dimensions
|
||||||
Ox.DIMENSIONS = Ox.UI.DIMENSIONS = {
|
Ox.DIMENSIONS = Ox.UI.DIMENSIONS = {
|
||||||
horizontal: ['width', 'height'],
|
horizontal: ['width', 'height'],
|
||||||
vertical: ['height', 'width']
|
vertical: ['height', 'width']
|
||||||
};
|
};
|
||||||
|
|
||||||
//@ Ox.EDGES <o> Names of horizontal and vertical edges
|
//@ Ox.UI.EDGES <o> Names of horizontal and vertical edges
|
||||||
Ox.EDGES = Ox.UI.EDGES = {
|
Ox.EDGES = Ox.UI.EDGES = {
|
||||||
horizontal: ['left', 'right', 'top', 'bottom'],
|
horizontal: ['left', 'right', 'top', 'bottom'],
|
||||||
vertical: ['top', 'bottom', 'left', 'right']
|
vertical: ['top', 'bottom', 'left', 'right']
|
||||||
};
|
};
|
||||||
|
|
||||||
//@ Ox.SCOLLBAR_SIZE <n> Size of scrollbars
|
//@ Ox.UI.SCROLLBAR_SIZE <n> Size of scrollbars
|
||||||
Ox.SCROLLBAR_SIZE = Ox.UI.SCROLLBAR_SIZE = $.browser.webkit ? 8 : (function() {
|
Ox.SCROLLBAR_SIZE = Ox.UI.SCROLLBAR_SIZE = $.browser.webkit ? 8 : (function() {
|
||||||
var inner = Ox.$('<p>').css({
|
var inner = Ox.$('<p>').css({
|
||||||
height: '200px',
|
height: '200px',
|
||||||
|
@ -35,7 +35,7 @@ Ox.SCROLLBAR_SIZE = Ox.UI.SCROLLBAR_SIZE = $.browser.webkit ? 8 : (function() {
|
||||||
return width;
|
return width;
|
||||||
})();
|
})();
|
||||||
|
|
||||||
//@ Ox.UI_PATH <str> Path of Ox UI
|
//@ Ox.UI.PATH <str> Path of Ox UI
|
||||||
Ox.UI_PATH = Ox.UI.PATH = Ox.PATH + 'Ox.UI/';
|
Ox.UI_PATH = Ox.UI.PATH = Ox.PATH + 'Ox.UI/';
|
||||||
|
|
||||||
Ox.documentReady(function() {
|
Ox.documentReady(function() {
|
||||||
|
@ -54,7 +54,7 @@ Ox.documentReady(function() {
|
||||||
Ox.$elements = Ox.UI.elements = {};
|
Ox.$elements = Ox.UI.elements = {};
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.getImageData <f> Returns properties of an Ox UI image
|
Ox.UI.getImageData <f> Returns properties of an Ox UI image
|
||||||
(url) -> <s> Image Name
|
(url) -> <s> Image Name
|
||||||
@*/
|
@*/
|
||||||
Ox.getImageData = Ox.UI.getImageData = Ox.cache(function(url) {
|
Ox.getImageData = Ox.UI.getImageData = Ox.cache(function(url) {
|
||||||
|
@ -65,7 +65,7 @@ Ox.getImageData = Ox.UI.getImageData = Ox.cache(function(url) {
|
||||||
});
|
});
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.getImageURL <f> Returns the URL of an Ox UI image
|
Ox.UI.getImageURL <f> Returns the URL of an Ox UI image
|
||||||
(name[, color[, theme]]) -> <s> Image URL
|
(name[, color[, theme]]) -> <s> Image URL
|
||||||
name <s> Image name
|
name <s> Image name
|
||||||
color <s|[n]> Color name or RGB values
|
color <s|[n]> Color name or RGB values
|
||||||
|
@ -119,19 +119,19 @@ Ox.getImageURL = Ox.UI.getImageURL = Ox.cache(function(name, color, theme) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
//@ Ox.getOxElement <f> Returns the Ox.Element of a DOM element, or `undefined`
|
//@ Ox.UI.getElement <f> Returns the Ox.Element of a DOM element, or `undefined`
|
||||||
Ox.getOxElement = Ox.UI.getOxElement = function(element) {
|
Ox.getOxElement = Ox.UI.getElement = Ox.UI.getOxElement = function(element) {
|
||||||
return Ox.$elements[$(element).data('oxid')];
|
return Ox.$elements[$(element).data('oxid')];
|
||||||
};
|
};
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
Ox.hideScreen <f> Hide and remove Ox UI loading screen
|
Ox.UI.hideScreen <f> Hide and remove Ox UI loading screen
|
||||||
@*/
|
@*/
|
||||||
Ox.hideScreen = Ox.UI.hideLoadingScreen = function() {
|
Ox.hideScreen = Ox.UI.hideScreen = Ox.UI.hideLoadingScreen = function() {
|
||||||
Ox.UILoadingScreen.hide();
|
Ox.UI.LoadingScreen.hide();
|
||||||
};
|
};
|
||||||
|
|
||||||
//@ Ox.isOxElement <f> Returns `true` if a DOM element is an Ox.Element
|
//@ Ox.UI.isElement <f> Returns `true` if a DOM element is an Ox.Element
|
||||||
Ox.isOxElement = Ox.UI.isOxElement = function(element) {
|
Ox.isOxElement = Ox.UI.isElement = Ox.UI.isOxElement = function(element) {
|
||||||
return !!$(element).data('oxid');
|
return !!$(element).data('oxid');
|
||||||
};
|
};
|
||||||
|
|
|
@ -252,9 +252,9 @@ Ox.Editable = function(options, self) {
|
||||||
self.$test.css({display: 'inline-block'});
|
self.$test.css({display: 'inline-block'});
|
||||||
height = self.options.height || Ox.limit(self.$test.height(), self.minHeight, self.maxHeight);
|
height = self.options.height || Ox.limit(self.$test.height(), self.minHeight, self.maxHeight);
|
||||||
width = self.$test.width();
|
width = self.$test.width();
|
||||||
// +Ox.SCROLLBAR_SIZE to prevent scrollbar from showing up
|
// +Ox.UI.SCROLLBAR_SIZE to prevent scrollbar from showing up
|
||||||
if (self.options.type == 'textarea') {
|
if (self.options.type == 'textarea') {
|
||||||
width += Ox.SCROLLBAR_SIZE;
|
width += Ox.UI.SCROLLBAR_SIZE;
|
||||||
}
|
}
|
||||||
width = self.options.width || Ox.limit(width, self.minWidth, self.maxWidth);
|
width = self.options.width || Ox.limit(width, self.minWidth, self.maxWidth);
|
||||||
self.$test.css({display: 'none'});
|
self.$test.css({display: 'none'});
|
||||||
|
|
|
@ -202,7 +202,7 @@ Ox.InsertHTMLDialog = function(options, self) {
|
||||||
height: 184,
|
height: 184,
|
||||||
keys: {enter: 'insert', escape: 'cancel'},
|
keys: {enter: 'insert', escape: 'cancel'},
|
||||||
title: Ox._('Insert HTML'),
|
title: Ox._('Insert HTML'),
|
||||||
width: 416 + Ox.SCROLLBAR_SIZE
|
width: 416 + Ox.UI.SCROLLBAR_SIZE
|
||||||
});
|
});
|
||||||
|
|
||||||
function renderForm() {
|
function renderForm() {
|
||||||
|
|
|
@ -34,7 +34,7 @@ Ox.CustomList = function(options, self) {
|
||||||
self.$list.options({items: self.options.items});
|
self.$list.options({items: self.options.items});
|
||||||
},
|
},
|
||||||
itemWidth: function() {
|
itemWidth: function() {
|
||||||
var width = self.options.itemWidth - Ox.SCROLLBAR_SIZE;
|
var width = self.options.itemWidth - Ox.UI.SCROLLBAR_SIZE;
|
||||||
if (self.options.resize) {
|
if (self.options.resize) {
|
||||||
that.find('.OxItem').each(function(element) {
|
that.find('.OxItem').each(function(element) {
|
||||||
self.options.resize($(this), width);
|
self.options.resize($(this), width);
|
||||||
|
@ -58,13 +58,13 @@ Ox.CustomList = function(options, self) {
|
||||||
self.$list = Ox.List({
|
self.$list = Ox.List({
|
||||||
construct: function(data) {
|
construct: function(data) {
|
||||||
return self.options.item(
|
return self.options.item(
|
||||||
data, self.options.itemWidth - Ox.SCROLLBAR_SIZE
|
data, self.options.itemWidth - Ox.UI.SCROLLBAR_SIZE
|
||||||
).addClass('OxTarget');
|
).addClass('OxTarget');
|
||||||
},
|
},
|
||||||
draggable: self.options.draggable,
|
draggable: self.options.draggable,
|
||||||
itemHeight: self.options.itemHeight,
|
itemHeight: self.options.itemHeight,
|
||||||
itemWidth: self.options.itemWidth
|
itemWidth: self.options.itemWidth
|
||||||
- self.options.scrollbarVisible * Ox.SCROLLBAR_SIZE,
|
- self.options.scrollbarVisible * Ox.UI.SCROLLBAR_SIZE,
|
||||||
items: self.options.items,
|
items: self.options.items,
|
||||||
keys: self.options.keys.concat(self.options.unique),
|
keys: self.options.keys.concat(self.options.unique),
|
||||||
max: self.options.max,
|
max: self.options.max,
|
||||||
|
|
|
@ -167,9 +167,9 @@ Ox.InfoList = function(options, self) {
|
||||||
|
|
||||||
function getItemWidth(cached) {
|
function getItemWidth(cached) {
|
||||||
if (!cached) {
|
if (!cached) {
|
||||||
self.cachedWidth = that.width() - Ox.SCROLLBAR_SIZE;
|
self.cachedWidth = that.width() - Ox.UI.SCROLLBAR_SIZE;
|
||||||
} else if (!self.cachedWidth || self.cachedWidthTime < +new Date() - 5000) {
|
} else if (!self.cachedWidth || self.cachedWidthTime < +new Date() - 5000) {
|
||||||
self.cachedWidth = that.width() - Ox.SCROLLBAR_SIZE;
|
self.cachedWidth = that.width() - Ox.UI.SCROLLBAR_SIZE;
|
||||||
self.cachedWidthTime = +new Date();
|
self.cachedWidthTime = +new Date();
|
||||||
}
|
}
|
||||||
return self.cachedWidth;
|
return self.cachedWidth;
|
||||||
|
|
|
@ -493,7 +493,7 @@ Ox.List = function(options, self) {
|
||||||
if (self.$pages[0]) {
|
if (self.$pages[0]) {
|
||||||
if (self.options.type == 'text') {
|
if (self.options.type == 'text') {
|
||||||
self.$pages[0].find('.OxEmpty').each(function() {
|
self.$pages[0].find('.OxEmpty').each(function() {
|
||||||
Ox.getOxElement($(this)).remove();
|
Ox.UI.getElement($(this)).remove();
|
||||||
});
|
});
|
||||||
} else if (self.options.orientation == 'both') {
|
} else if (self.options.orientation == 'both') {
|
||||||
that.$content.css({height: getListSize() + 'px'});
|
that.$content.css({height: getListSize() + 'px'});
|
||||||
|
@ -594,7 +594,7 @@ Ox.List = function(options, self) {
|
||||||
return that.height() - (
|
return that.height() - (
|
||||||
!self.options.disableHorizontalScrolling
|
!self.options.disableHorizontalScrolling
|
||||||
&& that.$content.width() > that.width()
|
&& that.$content.width() > that.width()
|
||||||
? Ox.SCROLLBAR_SIZE : 0
|
? Ox.UI.SCROLLBAR_SIZE : 0
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -782,7 +782,7 @@ Ox.List = function(options, self) {
|
||||||
function getWidth() {
|
function getWidth() {
|
||||||
//Ox.Log('List', 'LIST THAT.WIDTH()', that.width())
|
//Ox.Log('List', 'LIST THAT.WIDTH()', that.width())
|
||||||
return that.width() - (
|
return that.width() - (
|
||||||
that.$content.height() > that.height() ? Ox.SCROLLBAR_SIZE : 0
|
that.$content.height() > that.height() ? Ox.UI.SCROLLBAR_SIZE : 0
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -206,7 +206,7 @@ Ox.TableList = function(options, self) {
|
||||||
.addClass('OxHead')
|
.addClass('OxHead')
|
||||||
.css({
|
.css({
|
||||||
right: self.options.scrollbarVisible
|
right: self.options.scrollbarVisible
|
||||||
? Ox.SCROLLBAR_SIZE + 'px' : 0
|
? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
|
||||||
})
|
})
|
||||||
.appendTo(that.$bar);
|
.appendTo(that.$bar);
|
||||||
that.$head.$content.addClass('OxTitles');
|
that.$head.$content.addClass('OxTitles');
|
||||||
|
@ -232,7 +232,7 @@ Ox.TableList = function(options, self) {
|
||||||
return column.id;
|
return column.id;
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
.css(Ox.SCROLLBAR_SIZE == 16 ? {
|
.css(Ox.UI.SCROLLBAR_SIZE == 16 ? {
|
||||||
right: 0,
|
right: 0,
|
||||||
width: '14px'
|
width: '14px'
|
||||||
} : {
|
} : {
|
||||||
|
@ -241,7 +241,7 @@ Ox.TableList = function(options, self) {
|
||||||
})
|
})
|
||||||
.bindEvent('change', changeColumns)
|
.bindEvent('change', changeColumns)
|
||||||
.appendTo(that.$bar);
|
.appendTo(that.$bar);
|
||||||
Ox.SCROLLBAR_SIZE < 16 && $(that.$select.find('input')[0]).css({
|
Ox.UI.SCROLLBAR_SIZE < 16 && $(that.$select.find('input')[0]).css({
|
||||||
marginRight: '-3px',
|
marginRight: '-3px',
|
||||||
marginTop: '1px',
|
marginTop: '1px',
|
||||||
width: '8px',
|
width: '8px',
|
||||||
|
@ -254,7 +254,7 @@ Ox.TableList = function(options, self) {
|
||||||
})
|
})
|
||||||
.addClass('OxClear')
|
.addClass('OxClear')
|
||||||
.attr({src: Ox.getImageURL('symbolClose')})
|
.attr({src: Ox.getImageURL('symbolClose')})
|
||||||
.css(Ox.SCROLLBAR_SIZE == 16 ? {
|
.css(Ox.UI.SCROLLBAR_SIZE == 16 ? {
|
||||||
paddingLeft: '4px',
|
paddingLeft: '4px',
|
||||||
paddingRight: '2px',
|
paddingRight: '2px',
|
||||||
marginRight: 0
|
marginRight: 0
|
||||||
|
@ -777,7 +777,7 @@ Ox.TableList = function(options, self) {
|
||||||
return Math.max(
|
return Math.max(
|
||||||
Ox.sum(self.columnWidths),
|
Ox.sum(self.columnWidths),
|
||||||
self.cachedWidth -
|
self.cachedWidth -
|
||||||
(self.options.scrollbarVisible ? Ox.SCROLLBAR_SIZE : 0)
|
(self.options.scrollbarVisible ? Ox.UI.SCROLLBAR_SIZE : 0)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -94,7 +94,7 @@ Ox.TreeList = function(options, self) {
|
||||||
function constructItem(data) {
|
function constructItem(data) {
|
||||||
var $item = $('<div>').css({
|
var $item = $('<div>').css({
|
||||||
width: self.options.width == 'auto' ? '100%'
|
width: self.options.width == 'auto' ? '100%'
|
||||||
: self.options.width - Ox.SCROLLBAR_SIZE + 'px'
|
: self.options.width - Ox.UI.SCROLLBAR_SIZE + 'px'
|
||||||
}),
|
}),
|
||||||
$cell = $('<div>').addClass('OxCell').css({width: '8px'}),
|
$cell = $('<div>').addClass('OxCell').css({width: '8px'}),
|
||||||
$icon = data.id ? getIcon(data.id, data.expanded || (
|
$icon = data.id ? getIcon(data.id, data.expanded || (
|
||||||
|
@ -112,7 +112,7 @@ Ox.TreeList = function(options, self) {
|
||||||
$('<div>')
|
$('<div>')
|
||||||
.addClass('OxCell OxTarget')
|
.addClass('OxCell OxTarget')
|
||||||
.css({
|
.css({
|
||||||
width: self.options.width - padding - 32 - Ox.SCROLLBAR_SIZE + 'px'
|
width: self.options.width - padding - 32 - Ox.UI.SCROLLBAR_SIZE + 'px'
|
||||||
})
|
})
|
||||||
.html(data.title || '')
|
.html(data.title || '')
|
||||||
.appendTo($item);
|
.appendTo($item);
|
||||||
|
|
Loading…
Reference in a new issue