Ox -> Ox.UI

This commit is contained in:
rlx 2014-09-26 14:31:20 +02:00
parent e2a42ab04e
commit 552aba4271
17 changed files with 46 additions and 46 deletions

View file

@ -247,14 +247,14 @@ Ox.load.UI = function(options, callback) {
}); });
} }
length = data.files.length; length = data.files.length;
Ox.IMAGES = data.images; Ox.UI.IMAGES = data.images;
Ox.THEMES = {}; Ox.UI.THEMES = {};
data.files.forEach(function(file) { data.files.forEach(function(file) {
path = Ox.PATH + file + '?' + Ox.VERSION; path = Ox.PATH + file + '?' + Ox.VERSION;
if (/\.jsonc$/.test(file)) { if (/\.jsonc$/.test(file)) {
Ox.getJSONC(path, function(data) { Ox.getJSONC(path, function(data) {
var theme = /\/themes\/(\w+)\/json\//.exec(file)[1]; var theme = /\/themes\/(\w+)\/json\//.exec(file)[1];
Ox.THEMES[theme] = data; Ox.UI.THEMES[theme] = data;
++counter == length && initUI(); ++counter == length && initUI();
}); });
} else { } else {

View file

@ -145,8 +145,8 @@ Ox.DocPage = function(options, self) {
Ox.$('<img>') Ox.$('<img>')
.attr({ .attr({
src: isExpanded src: isExpanded
? Ox.getImageURL('symbolDown') ? Ox.UI.getImageURL('symbolDown')
: Ox.getImageURL('symbolRight') : Ox.UI.getImageURL('symbolRight')
}) })
.css({ .css({
width: '12px', width: '12px',
@ -156,11 +156,11 @@ Ox.DocPage = function(options, self) {
.on({ .on({
click: function() { click: function() {
var $this = $(this), var $this = $(this),
isExpanded = $this.attr('src') == Ox.getImageURL('symbolRight'); isExpanded = $this.attr('src') == Ox.UI.getImageURL('symbolRight');
$this.attr({ $this.attr({
src: isExpanded src: isExpanded
? Ox.getImageURL('symbolDown') ? Ox.UI.getImageURL('symbolDown')
: Ox.getImageURL('symbolRight') : Ox.UI.getImageURL('symbolRight')
}); });
$('.' + className).each(function() { $('.' + className).each(function() {
var $this = $(this), isHidden = false; var $this = $(this), isHidden = false;

View file

@ -197,7 +197,7 @@ Ox.DocPanel = function(options, self) {
self.options.showTooltips ? getTooltip(results) : null self.options.showTooltips ? getTooltip(results) : null
); );
} else if (!Ox.endsWith(id, '/')) { } else if (!Ox.endsWith(id, '/')) {
$icon = $('<img>').attr({src: Ox.getImageURL('symbolCenter')}); $icon = $('<img>').attr({src: Ox.UI.getImageURL('symbolCenter')});
} }
return $icon; return $icon;
} }
@ -293,7 +293,7 @@ Ox.DocPanel = function(options, self) {
expanded: self.options.expanded, expanded: self.options.expanded,
icon: self.options.showTests icon: self.options.showTests
? getIcon ? getIcon
: Ox.getImageURL('symbolCenter'), : Ox.UI.getImageURL('symbolCenter'),
items: treeItems, items: treeItems,
selected: self.options.selected ? [self.options.selected] : '', selected: self.options.selected ? [self.options.selected] : '',
width: self.options.size width: self.options.size

View file

@ -75,7 +75,7 @@ Ox.ExamplePanel = function(options, self) {
}); });
self.$list = Ox.TreeList({ self.$list = Ox.TreeList({
expanded: true, expanded: true,
icon: Ox.getImageURL('symbolCenter'), icon: Ox.UI.getImageURL('symbolCenter'),
items: treeItems, items: treeItems,
selected: self.options.selected ? [self.options.selected] : [], selected: self.options.selected ? [self.options.selected] : [],
width: self.options.size width: self.options.size

View file

@ -19,7 +19,7 @@ Ox.LoadingIcon = function(options, self) {
.options(options || {}) .options(options || {})
.addClass('OxLoadingIcon') .addClass('OxLoadingIcon')
.attr({ .attr({
src: Ox.getImageURL( src: Ox.UI.getImageURL(
'symbolLoading', 'symbolLoading',
self.options.video ? 'videoIcon' : null self.options.video ? 'videoIcon' : null
) )

View file

@ -99,7 +99,7 @@ Ox.Theme = (function() {
$('.OxColor').each(function() { $('.OxColor').each(function() {
var $element = $(this); var $element = $(this);
if ($element.hasClass('OxColorName')) { if ($element.hasClass('OxColorName')) {
$element.attr({src: Ox.getImageURL( $element.attr({src: Ox.UI.getImageURL(
$element.data('OxImage'), $element.data('OxColor'), theme $element.data('OxImage'), $element.data('OxColor'), theme
)}); )});
} else { } else {
@ -119,9 +119,9 @@ Ox.Theme = (function() {
$('img').add('input[type="image"]').not('.OxColor') $('img').add('input[type="image"]').not('.OxColor')
.each(function(element) { .each(function(element) {
var $element = $(this), var $element = $(this),
data = Ox.getImageData($element.attr('src')); data = Ox.UI.getImageData($element.attr('src'));
data && $element.attr({ data && $element.attr({
src: Ox.getImageURL(data.name, data.color, theme) src: Ox.UI.getImageURL(data.name, data.color, theme)
}); });
}); });
} }
@ -134,7 +134,7 @@ Ox.Theme = (function() {
() -> [s] Theme names () -> [s] Theme names
@*/ @*/
that.getThemes = function() { that.getThemes = function() {
return Object.keys(Ox.THEMES); return Object.keys(Ox.UI.THEMES);
}; };
/*@ /*@
@ -143,7 +143,7 @@ Ox.Theme = (function() {
theme <s> Theme name theme <s> Theme name
@*/ @*/
that.getThemeData = function(theme) { that.getThemeData = function(theme) {
return Ox.THEMES[theme || Ox.Theme()]; return Ox.UI.THEMES[theme || Ox.Theme()];
}; };
/*@ /*@
@ -183,7 +183,7 @@ Ox.Theme = (function() {
that.getColorImage = function(name, value, tooltip) { that.getColorImage = function(name, value, tooltip) {
return (tooltip ? Ox.Element({element: '<img>', tooltip: tooltip}) : $('<img>')) return (tooltip ? Ox.Element({element: '<img>', tooltip: tooltip}) : $('<img>'))
.addClass('OxColor OxColorName') .addClass('OxColor OxColorName')
.attr({src: Ox.getImageURL(name, value)}) .attr({src: Ox.UI.getImageURL(name, value)})
.data({OxColor: value, OxImage: name}); .data({OxColor: value, OxImage: name});
}; };

View file

@ -82,7 +82,7 @@ Ox.getImageURL = Ox.UI.getImageURL = Ox.cache(function(name, color, theme) {
'#FF0000': 'symbolWarningColor' '#FF0000': 'symbolWarningColor'
} }
}, },
image = Ox.IMAGES[name], image = Ox.UI.IMAGES[name],
themeData, themeData,
type = Ox.toDashes(name).split('-')[0]; type = Ox.toDashes(name).split('-')[0];
color = color || 'default'; color = color || 'default';

View file

@ -152,7 +152,7 @@ Ox.Button = function(options, self) {
function setTitle() { function setTitle() {
if (self.options.type == 'image') { if (self.options.type == 'image') {
that.attr({ that.attr({
src: Ox.getImageURL( src: Ox.UI.getImageURL(
'symbol' + self.options.title[0].toUpperCase() 'symbol' + self.options.title[0].toUpperCase()
+ self.options.title.slice(1), + self.options.title.slice(1),
self.options.style == 'overlay' ? 'overlay' + ( self.options.style == 'overlay' ? 'overlay' + (

View file

@ -31,7 +31,7 @@ Ox.FormPanel = function(options, self) {
format: function(value) { format: function(value) {
return $('<img>') return $('<img>')
.attr({ .attr({
src: Ox.getImageURL('symbolCheck') src: Ox.UI.getImageURL('symbolCheck')
}) })
.css({ .css({
width: '10px', width: '10px',

View file

@ -46,7 +46,7 @@ Ox.IconItem = function(options, self) {
infoIsObject: Ox.isObject(self.options.info), infoIsObject: Ox.isObject(self.options.info),
lineLength: self.options.itemWidth == 64 ? 15 : 23, lineLength: self.options.itemWidth == 64 ? 15 : 23,
lines: self.options.itemWidth == 64 ? 4 : 5, lines: self.options.itemWidth == 64 ? 4 : 5,
url: Ox.UI_PATH + 'png/transparent.png' url: Ox.UI.PATH + 'png/transparent.png'
}); });
self.title = formatText(self.options.title, self.lines - 1 - self.infoIsObject, self.lineLength); self.title = formatText(self.options.title, self.lines - 1 - self.infoIsObject, self.lineLength);

View file

@ -253,7 +253,7 @@ Ox.TableList = function(options, self) {
tooltip: self.options.clearButtonTooltip tooltip: self.options.clearButtonTooltip
}) })
.addClass('OxClear') .addClass('OxClear')
.attr({src: Ox.getImageURL('symbolClose')}) .attr({src: Ox.UI.getImageURL('symbolClose')})
.css(Ox.UI.SCROLLBAR_SIZE == 16 ? { .css(Ox.UI.SCROLLBAR_SIZE == 16 ? {
paddingLeft: '4px', paddingLeft: '4px',
paddingRight: '2px', paddingRight: '2px',
@ -467,7 +467,7 @@ Ox.TableList = function(options, self) {
if (column.titleImage) { if (column.titleImage) {
self.$titleImages[i] = $('<img>'). self.$titleImages[i] = $('<img>').
attr({ attr({
src: Ox.getImageURL( src: Ox.UI.getImageURL(
'symbol' + Ox.toTitleCase(column.titleImage) 'symbol' + Ox.toTitleCase(column.titleImage)
) )
}) })
@ -478,7 +478,7 @@ Ox.TableList = function(options, self) {
if (column.operator) { if (column.operator) {
self.$orderImages[i] = $('<img>') self.$orderImages[i] = $('<img>')
.attr({ .attr({
src: Ox.getImageURL( src: Ox.UI.getImageURL(
'symbol' + (column.operator == '+' ? 'Up' : 'Down'), 'symbol' + (column.operator == '+' ? 'Up' : 'Down'),
'selected' 'selected'
) )
@ -909,7 +909,7 @@ Ox.TableList = function(options, self) {
}); });
if (self.visibleColumns[pos].titleImage) { if (self.visibleColumns[pos].titleImage) {
self.$titleImages[pos].attr({ self.$titleImages[pos].attr({
src: Ox.getImageURL( src: Ox.UI.getImageURL(
'symbol' + Ox.toTitleCase(self.visibleColumns[pos].titleImage), 'symbol' + Ox.toTitleCase(self.visibleColumns[pos].titleImage),
isSelected ? 'selected' : '' isSelected ? 'selected' : ''
) )
@ -950,16 +950,16 @@ Ox.TableList = function(options, self) {
// FIXME: not yet used // FIXME: not yet used
that.$body.find('img').each(function(i, element) { that.$body.find('img').each(function(i, element) {
var $element = $(element), var $element = $(element),
data = Ox.getImageData($element.attr('src')); data = Ox.UI.getImageData($element.attr('src'));
if (data && data.color == 'selected') { if (data && data.color == 'selected') {
$element.attr({src: Ox.getImageURL(data.name, 'default')}); $element.attr({src: Ox.UI.getImageURL(data.name, 'default')});
} }
}); });
that.$body.find('.OxSelected img').each(function(i, element) { that.$body.find('.OxSelected img').each(function(i, element) {
var $element = $(element), var $element = $(element),
data = Ox.getImageData($element.attr('src')); data = Ox.UI.getImageData($element.attr('src'));
if (data && data.color == 'default') { if (data && data.color == 'default') {
$element.attr({src: Ox.getImageURL(data.name, 'selected')}); $element.attr({src: Ox.UI.getImageURL(data.name, 'selected')});
} }
}); });
} }
@ -969,7 +969,7 @@ Ox.TableList = function(options, self) {
pos = getColumnPositionById(id); pos = getColumnPositionById(id);
if (pos > -1) { if (pos > -1) {
self.$orderImages[pos].attr({ self.$orderImages[pos].attr({
src: Ox.getImageURL( src: Ox.UI.getImageURL(
'symbol' + (operator == '+' ? 'Up' : 'Down'), 'symbol' + (operator == '+' ? 'Up' : 'Down'),
'selected' 'selected'
) )

View file

@ -128,7 +128,7 @@ Ox.TreeList = function(options, self) {
$icon = $('<img>').attr({src: self.options.icon}); $icon = $('<img>').attr({src: self.options.icon});
} }
} else { } else {
$icon = $('<img>').attr({src: Ox.getImageURL( $icon = $('<img>').attr({src: Ox.UI.getImageURL(
'symbol' + (expanded ? 'Down' : 'Right') 'symbol' + (expanded ? 'Down' : 'Right')
)}); )});
} }

View file

@ -81,7 +81,7 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$positionMarker = Ox.$('<img>') self.$positionMarker = Ox.$('<img>')
.attr({ .attr({
src: Ox.getImageURL('markerPosition') src: Ox.UI.getImageURL('markerPosition')
}) })
.addClass('OxMarkerPosition') .addClass('OxMarkerPosition')
.appendTo(that); .appendTo(that);
@ -94,7 +94,7 @@ Ox.BlockVideoTimeline = function(options, self) {
self.$pointMarker[point] = Ox.$('<img>') self.$pointMarker[point] = Ox.$('<img>')
.addClass('OxMarkerPoint' + titlecase) .addClass('OxMarkerPoint' + titlecase)
.attr({ .attr({
src: Ox.getImageURL('marker' + titlecase) src: Ox.UI.getImageURL('marker' + titlecase)
}) })
.appendTo(that); .appendTo(that);
setPointMarker(point); setPointMarker(point);

View file

@ -98,10 +98,10 @@ Ox.LargeVideoTimeline = function(options, self) {
setTimeout(function() { setTimeout(function() {
var $cut = $('<img>') var $cut = $('<img>')
.addClass('OxCut') .addClass('OxCut')
.attr({src: Ox.getImageURL('markerCut')}), .attr({src: Ox.UI.getImageURL('markerCut')}),
$chapter = $('<img>') $chapter = $('<img>')
.addClass('OxChapter') .addClass('OxChapter')
.attr({src: Ox.getImageURL('markerChapter')}), .attr({src: Ox.UI.getImageURL('markerChapter')}),
chapters = self.options.chapters.slice(1).map(function(chapter) { chapters = self.options.chapters.slice(1).map(function(chapter) {
return chapter.position; return chapter.position;
}); });
@ -115,7 +115,7 @@ Ox.LargeVideoTimeline = function(options, self) {
self.$markerPosition = $('<img>') self.$markerPosition = $('<img>')
.addClass('OxMarkerPosition') .addClass('OxMarkerPosition')
.attr({src: Ox.getImageURL('markerPosition')}) .attr({src: Ox.UI.getImageURL('markerPosition')})
.appendTo(that); .appendTo(that);
setMarker(); setMarker();
@ -124,7 +124,7 @@ Ox.LargeVideoTimeline = function(options, self) {
var titlecase = Ox.toTitleCase(point); var titlecase = Ox.toTitleCase(point);
self.$pointMarker[point] = $('<img>') self.$pointMarker[point] = $('<img>')
.addClass('OxMarkerPoint' + titlecase) .addClass('OxMarkerPoint' + titlecase)
.attr({src: Ox.getImageURL('marker' + titlecase)}) .attr({src: Ox.UI.getImageURL('marker' + titlecase)})
.appendTo(self.$timeline); .appendTo(self.$timeline);
setPointMarker(point); setPointMarker(point);
}); });

View file

@ -127,7 +127,7 @@ Ox.SmallVideoTimeline = function(options, self) {
self.$positionMarker = $('<img>') self.$positionMarker = $('<img>')
.addClass('OxMarkerPosition') .addClass('OxMarkerPosition')
.attr({ .attr({
src: Ox.getImageURL('markerPosition') src: Ox.UI.getImageURL('markerPosition')
}) })
.appendTo(that); .appendTo(that);
} }
@ -140,7 +140,7 @@ Ox.SmallVideoTimeline = function(options, self) {
self.$pointMarker[point] = $('<img>') self.$pointMarker[point] = $('<img>')
.addClass('OxMarkerPoint' + titlecase) .addClass('OxMarkerPoint' + titlecase)
.attr({ .attr({
src: Ox.getImageURL('marker' + titlecase) src: Ox.UI.getImageURL('marker' + titlecase)
}) })
.appendTo(that); .appendTo(that);
setPointMarker(point); setPointMarker(point);

View file

@ -552,7 +552,7 @@ Ox.VideoPlayer = function(options, self) {
self.$playIcon = $('<img>') self.$playIcon = $('<img>')
.addClass('OxPlayIcon OxVideo') .addClass('OxPlayIcon OxVideo')
.attr({ .attr({
src: Ox.getImageURL('symbol' + ( src: Ox.UI.getImageURL('symbol' + (
self.options.paused ? 'Play' : 'Pause' self.options.paused ? 'Play' : 'Pause'
), 'videoIcon') ), 'videoIcon')
}) })
@ -572,7 +572,7 @@ Ox.VideoPlayer = function(options, self) {
}) })
.addClass('OxCensoredIcon OxVideo') .addClass('OxCensoredIcon OxVideo')
.attr({ .attr({
src: Ox.getImageURL( src: Ox.UI.getImageURL(
'symbol' + self.options.censoredIcon, 'videoIcon' 'symbol' + self.options.censoredIcon, 'videoIcon'
) )
}) })
@ -609,7 +609,7 @@ Ox.VideoPlayer = function(options, self) {
self.$pointMarker[point][edge] = $('<img>') self.$pointMarker[point][edge] = $('<img>')
.addClass('OxPointMarker OxPointMarker' + titleCase) .addClass('OxPointMarker OxPointMarker' + titleCase)
.attr({ .attr({
src: Ox.getImageURL('marker' + titleCase) src: Ox.UI.getImageURL('marker' + titleCase)
}) })
.appendTo(self.$videoContainer); .appendTo(self.$videoContainer);
}); });
@ -2665,7 +2665,7 @@ Ox.VideoPlayer = function(options, self) {
function togglePlayIcon() { function togglePlayIcon() {
self.$playIcon.attr({ self.$playIcon.attr({
src: Ox.getImageURL( src: Ox.UI.getImageURL(
'symbol' + (self.options.paused ? 'Play' : 'Pause' 'symbol' + (self.options.paused ? 'Play' : 'Pause'
), 'videoIcon') ), 'videoIcon')
}); });

View file

@ -24,7 +24,7 @@ Ox.VideoPlayerMenu = function(options, self) {
return $item.data().group == group; return $item.data().group == group;
}).forEach(function($item) { }).forEach(function($item) {
$($item.children()[1]).attr({ $($item.children()[1]).attr({
src: Ox.getImageURL('symbol' + ( src: Ox.UI.getImageURL('symbol' + (
$item.data().id == id ? 'Check' : 'None' $item.data().id == id ? 'Check' : 'None'
)) ))
}); });
@ -62,7 +62,7 @@ Ox.VideoPlayerMenu = function(options, self) {
} }
$('<div>').html(item.title).appendTo($item); $('<div>').html(item.title).appendTo($item);
$('<img>').attr({ $('<img>').attr({
src: Ox.getImageURL( src: Ox.UI.getImageURL(
'symbol' + (item.checked ? 'Check' : 'None') 'symbol' + (item.checked ? 'Check' : 'None')
) )
}).appendTo($item); }).appendTo($item);