remove unneeded Ox. prefix from path and file names
This commit is contained in:
rolux
parent
4138e4e558
commit
51696562f1
1365 changed files with 43 additions and 43 deletions
28
source/UI/js/Bar/Bar.js
Normal file
28
source/UI/js/Bar/Bar.js
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
'use strict';
|
||||
/*@
|
||||
Ox.Bar <f> Bar
|
||||
options <o> Options object
|
||||
orientation <s|'horizontal'> Orientation ('horizontal' or 'vertical')
|
||||
size <n|s|'medium'> can be 'small', 'medium', 'large' or number
|
||||
self <o> Shared private variable
|
||||
([options[, self]]) -> <o:Ox.Element> Bar object
|
||||
@*/
|
||||
Ox.Bar = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
orientation: 'horizontal',
|
||||
size: 16
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxBar Ox' + Ox.toTitleCase(self.options.orientation));
|
||||
|
||||
self.dimensions = Ox.UI.DIMENSIONS[self.options.orientation];
|
||||
|
||||
that.css(self.dimensions[0], '100%')
|
||||
.css(self.dimensions[1], self.options.size + 'px');
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
243
source/UI/js/Bar/Progressbar.js
Normal file
243
source/UI/js/Bar/Progressbar.js
Normal file
|
|
@ -0,0 +1,243 @@
|
|||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.Progressbar <f> Progress Bar
|
||||
options <o|{}> Options object
|
||||
cancelled <b|false> If true, progress bar is cancelled
|
||||
paused <b|false> If true, progress bar is paused
|
||||
progress <n|0> Progress, float between 0 and 1, or -1 for indeterminate
|
||||
showCancelButton <b|false> If true, show cancel button
|
||||
showPauseButton <b|false> If true, show pause button
|
||||
showPercent <b|false> If true, show progress in percent
|
||||
showRestartButton <b|false> If true, show restart button
|
||||
showTime <b|false> If true, show remaining time
|
||||
showTooltips <b|false> If true, buttons have tooltips
|
||||
width <n|256> Width in px
|
||||
self <o|{}> Shared private variable
|
||||
([options[, self]]) -> <o:Ox.Element> Progress Bar
|
||||
cancel <!> cancelled
|
||||
complete <!> completed
|
||||
pause <!> paused
|
||||
restart <!> restart
|
||||
resume <!> resumed
|
||||
@*/
|
||||
|
||||
Ox.Progressbar = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
cancelled: false,
|
||||
paused: false,
|
||||
progress: 0,
|
||||
showCancelButton: false,
|
||||
showPauseButton: false,
|
||||
showPercent: false,
|
||||
showRestartButton: false,
|
||||
showTime: false,
|
||||
showTooltips: false,
|
||||
width: 256
|
||||
})
|
||||
.options(options || {})
|
||||
.update({
|
||||
cancelled: toggleCancelled,
|
||||
paused: togglePaused,
|
||||
progress: function() {
|
||||
self.indeterminate = self.options.progress == -1;
|
||||
if (self.options.progress != -1) {
|
||||
self.options.progress = Ox.limit(self.options.progress, 0, 1);
|
||||
}
|
||||
!self.options.paused && !self.options.cancelled && setProgress(true);
|
||||
}
|
||||
})
|
||||
.addClass('OxProgressbar')
|
||||
.css({width: self.options.width - 2 + 'px'});
|
||||
|
||||
self.indeterminate = self.options.progress == -1;
|
||||
|
||||
self.trackWidth = self.options.width
|
||||
- self.options.showPercent * 36
|
||||
- self.options.showTime * 60
|
||||
- self.options.showPauseButton * 16
|
||||
- self.options.showCancelButton * 16;
|
||||
|
||||
self.$track = $('<div>')
|
||||
.addClass('OxTrack')
|
||||
.css({
|
||||
width: self.trackWidth - 2 + 'px'
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$progress = $('<div>')
|
||||
.addClass('OxProgress')
|
||||
.appendTo(self.$track);
|
||||
|
||||
if (self.options.showPercent) {
|
||||
self.$percent = $('<div>')
|
||||
.addClass('OxText')
|
||||
.css({width: '36px'})
|
||||
.appendTo(that);
|
||||
}
|
||||
|
||||
if (self.options.showTime) {
|
||||
self.$time = $('<div>')
|
||||
.addClass('OxText')
|
||||
.css({width: '60px'})
|
||||
.appendTo(that);
|
||||
}
|
||||
|
||||
if (self.options.showPauseButton) {
|
||||
self.$pauseButton = Ox.Button({
|
||||
style: 'symbol',
|
||||
tooltip: self.options.showTooltips ? [Ox._('Pause'), Ox._('Resume')] : '',
|
||||
type: 'image',
|
||||
value: !self.options.paused ? 'pause' : 'redo',
|
||||
values: ['pause', 'redo']
|
||||
})
|
||||
.bindEvent({
|
||||
click: togglePaused
|
||||
})
|
||||
.appendTo(that);
|
||||
}
|
||||
|
||||
if (self.options.showCancelButton) {
|
||||
self.$cancelButton = Ox.Button(Ox.extend({
|
||||
style: 'symbol',
|
||||
type: 'image'
|
||||
}, self.options.showRestartButton ? {
|
||||
tooltip: self.options.showTooltips ? [Ox._('Cancel'), Ox._('Restart')] : '',
|
||||
value: 'close',
|
||||
values: ['close', 'redo']
|
||||
} : {
|
||||
title: 'close',
|
||||
tooltip: self.options.showTooltips ? Ox._('Cancel') : ''
|
||||
}))
|
||||
.bindEvent({
|
||||
click: toggleCancelled
|
||||
})
|
||||
.appendTo(that);
|
||||
}
|
||||
|
||||
setProgress();
|
||||
|
||||
!self.options.paused && resume();
|
||||
|
||||
function cancel() {
|
||||
self.options.cancelled = true;
|
||||
if (self.options.paused) {
|
||||
self.options.paused = false;
|
||||
self.$pauseButton && self.$pauseButton.toggle();
|
||||
}
|
||||
stop();
|
||||
that.triggerEvent('cancel');
|
||||
}
|
||||
|
||||
function complete() {
|
||||
self.complete = true;
|
||||
stop();
|
||||
self.paused = false;
|
||||
that.triggerEvent('complete');
|
||||
}
|
||||
|
||||
function pause() {
|
||||
self.pauseTime = +new Date();
|
||||
self.$progress.removeClass('OxAnimate');
|
||||
($.browser.mozilla || $.browser.opera) && clearInterval(self.interval);
|
||||
self.$time && self.$time.html(
|
||||
self.options.cancelled ? Ox._('Cancelled') : Ox._('Paused')
|
||||
);
|
||||
}
|
||||
|
||||
function restart() {
|
||||
self.options.cancelled = false;
|
||||
if (!self.indeterminate) {
|
||||
self.options.progress = 0;
|
||||
}
|
||||
delete self.startTime;
|
||||
self.$pauseButton && self.$pauseButton.options({disabled: false});
|
||||
setProgress();
|
||||
resume();
|
||||
that.triggerEvent('restart');
|
||||
}
|
||||
|
||||
function resume() {
|
||||
self.startTime = !self.startTime
|
||||
? +new Date()
|
||||
: self.startTime + +new Date() - self.pauseTime;
|
||||
self.$progress.addClass('OxAnimate');
|
||||
if ($.browser.mozilla || $.browser.opera) {
|
||||
self.offset = 0;
|
||||
self.interval = setInterval(function() {
|
||||
self.$progress.css({backgroundPosition: --self.offset + 'px 0, 0 0'})
|
||||
}, 1000 / 32);
|
||||
}
|
||||
self.$time && self.$time.html(
|
||||
self.options.progress ? Ox.formatDuration(that.status().remaining) : Ox._('unknown')
|
||||
);
|
||||
}
|
||||
|
||||
function setProgress(animate) {
|
||||
self.$percent && self.$percent.html(
|
||||
Math.floor(self.options.progress * 100) + '%'
|
||||
);
|
||||
self.$time && self.$time.html(
|
||||
self.options.progress ? Ox.formatDuration(that.status().remaining) : Ox._('unknown')
|
||||
);
|
||||
self.$progress.stop().animate({
|
||||
width: Math.round(14 + Math.abs(self.options.progress) * (self.trackWidth - 16)) + 'px'
|
||||
}, animate ? 250 : 0, function() {
|
||||
self.options.progress == 1 && complete();
|
||||
});
|
||||
}
|
||||
|
||||
function stop() {
|
||||
pause();
|
||||
self.$time && self.$time.html(
|
||||
self.options.cancelled ? Ox._('Cancelled') : Ox._('Complete')
|
||||
);
|
||||
if (self.$pauseButton && (self.options.cancelled || self.complete)) {
|
||||
self.$pauseButton.options({disabled: true});
|
||||
}
|
||||
if (self.$cancelButton && (self.complete || !self.options.showRestartButton)) {
|
||||
self.$cancelButton.options({disabled: true});
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCancelled(e) {
|
||||
if (e) {
|
||||
self.options.cancelled = !self.options.cancelled;
|
||||
} else if (self.$cancelButton) {
|
||||
self.$cancelButton.toggle();
|
||||
}
|
||||
self.options.cancelled ? cancel() : restart();
|
||||
that.triggerEvent(self.options.cancelled ? 'cancel' : 'restart');
|
||||
}
|
||||
|
||||
function togglePaused(e) {
|
||||
if (e) {
|
||||
self.options.paused = !self.options.paused;
|
||||
} else if (self.$pauseButton) {
|
||||
self.$pauseButton.toggle();
|
||||
}
|
||||
self.options.paused ? pause() : resume();
|
||||
that.triggerEvent(self.options.paused ? 'pause' : 'resume');
|
||||
}
|
||||
|
||||
/*@
|
||||
that.status <f> Returns time elapsed / remaining
|
||||
() -> <o> status
|
||||
@*/
|
||||
that.status = function() {
|
||||
var elapsed = +new Date() - self.startTime,
|
||||
remaining = elapsed / self.options.progress * (1 - self.options.progress);
|
||||
return {
|
||||
elapsed: Math.floor(elapsed / 1000),
|
||||
remaining: self.options.progress
|
||||
? Math.ceil(remaining / 1000)
|
||||
: Infinity
|
||||
};
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
194
source/UI/js/Bar/Resizebar.js
Normal file
194
source/UI/js/Bar/Resizebar.js
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
'use strict';
|
||||
/*@
|
||||
Ox.Resizebar <f> Resizebar
|
||||
options <o> Options object
|
||||
collapsed <b|false> Inital collapse state
|
||||
collapsible <b|true> If true, can be collapsed/expanded
|
||||
edge <s|left> Edge
|
||||
elements <a|[]> Elements of the bar
|
||||
orientation <s|horizontal> Orientation ('horizontal' or 'vertical')
|
||||
panel <o|null> Panel object
|
||||
resizeable <b|true> If true, can be resetted to default or original size
|
||||
resizeable <b|true> If true, can be resized
|
||||
resize <a|[]> Array of sizes
|
||||
size <n|0> Default size
|
||||
tooltip <b|s|false> If true, display tooltip, if string, append it
|
||||
self <o> Shared private variable
|
||||
([options[, self]]) -> <o:Ox.Element> Resizebar object
|
||||
@*/
|
||||
Ox.Resizebar = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
collapsed: false,
|
||||
collapsible: false,
|
||||
defaultSize: null,
|
||||
edge: 'left',
|
||||
orientation: 'horizontal',
|
||||
resettable: false,
|
||||
resizable: false,
|
||||
resize: [],
|
||||
size: 0,
|
||||
tooltip: false
|
||||
})
|
||||
.options(options || {})
|
||||
.update({
|
||||
collapsed: function() {
|
||||
that.css({cursor: getCursor()});
|
||||
self.$tooltip && self.$tooltip.options({title: getTooltipTitle()});
|
||||
}
|
||||
})
|
||||
.addClass('OxResizebar Ox' + Ox.toTitleCase(self.options.orientation))
|
||||
.bindEvent(Ox.extend({
|
||||
dragstart: onDragstart,
|
||||
drag: onDrag,
|
||||
dragpause: onDragpause,
|
||||
dragend: onDragend
|
||||
}, self.options.resettable ? {
|
||||
doubleclick: reset,
|
||||
singleclick: toggle
|
||||
} : {
|
||||
anyclick: toggle
|
||||
}))
|
||||
.append(Ox.$('<div>').addClass('OxSpace'))
|
||||
.append(Ox.$('<div>').addClass('OxLine'))
|
||||
.append(Ox.$('<div>').addClass('OxSpace'));
|
||||
|
||||
if (Ox.isString(self.options.tooltip)) {
|
||||
// FIXME: Use Ox.Element's tooltip
|
||||
self.$tooltip = Ox.Tooltip({title: getTooltipTitle()});
|
||||
that.on({
|
||||
mouseenter: self.$tooltip.show,
|
||||
mouseleave: self.$tooltip.hide
|
||||
});
|
||||
}
|
||||
|
||||
self.clientXY = self.options.orientation == 'horizontal'
|
||||
? 'clientY' : 'clientX';
|
||||
self.dimensions = Ox.UI.DIMENSIONS[self.options.orientation];
|
||||
self.edges = Ox.UI.EDGES[self.options.orientation];
|
||||
self.isLeftOrTop = self.options.edge == 'left' || self.options.edge == 'top';
|
||||
|
||||
that.css({cursor: getCursor()});
|
||||
|
||||
function getCursor() {
|
||||
var cursor = '';
|
||||
if (self.options.collapsed) {
|
||||
cursor = self.options.orientation == 'horizontal'
|
||||
? (self.isLeftOrTop ? 's' : 'n')
|
||||
: (self.isLeftOrTop ? 'e' : 'w');
|
||||
} else {
|
||||
if (self.options.resizable) {
|
||||
cursor = self.options.orientation == 'horizontal'
|
||||
? 'ns' : 'ew';
|
||||
} else if (self.options.collapsible) {
|
||||
cursor = self.options.orientation == 'horizontal'
|
||||
? (self.isLeftOrTop ? 'n' : 's')
|
||||
: (self.isLeftOrTop ? 'w' : 'e');
|
||||
}
|
||||
}
|
||||
return cursor + '-resize';
|
||||
}
|
||||
|
||||
function getTooltipTitle() {
|
||||
var title = '';
|
||||
if (self.options.collapsed) {
|
||||
title = Ox._('Click to show');
|
||||
} else {
|
||||
if (self.options.resizable) {
|
||||
title = Ox._('Drag to resize');
|
||||
}
|
||||
if (self.options.collapsible) {
|
||||
title = title
|
||||
? Ox._('{0}{1} click to hide', [
|
||||
title, self.options.resettable ? ',' : ' or'
|
||||
])
|
||||
: Ox._('Click to hide');
|
||||
}
|
||||
if (self.options.resettable) {
|
||||
title += ' or doubleclick to reset'
|
||||
}
|
||||
}
|
||||
if (title && self.options.tooltip) {
|
||||
title += ' ' + self.options.tooltip;
|
||||
}
|
||||
return title;
|
||||
}
|
||||
|
||||
function onDragstart(data) {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
Ox.$body.addClass('OxDragging');
|
||||
self.drag = {
|
||||
startPos: data[self.clientXY],
|
||||
startSize: self.options.size
|
||||
}
|
||||
}
|
||||
that.triggerEvent('resizestart', {size: self.options.size});
|
||||
}
|
||||
|
||||
function onDrag(data) {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
var delta = data[self.clientXY] - self.drag.startPos,
|
||||
size = self.options.size;
|
||||
self.options.size = Ox.limit(
|
||||
self.drag.startSize + delta * (self.isLeftOrTop ? 1 : -1),
|
||||
self.options.resize[0],
|
||||
self.options.resize[self.options.resize.length - 1]
|
||||
);
|
||||
Ox.forEach(self.options.resize, function(value) {
|
||||
if (
|
||||
self.options.size >= value - 8
|
||||
&& self.options.size <= value + 8
|
||||
) {
|
||||
self.options.size = value;
|
||||
return false; // break
|
||||
}
|
||||
});
|
||||
if (self.options.size != size) {
|
||||
that.css(
|
||||
self.edges[self.isLeftOrTop ? 2 : 3],
|
||||
self.options.size + 'px'
|
||||
)
|
||||
.triggerEvent('resize', {size: self.options.size});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onDragpause() {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
if (self.options.size != self.drag.startSize) {
|
||||
that.triggerEvent('resizepause', {size: self.options.size});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onDragend() {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
Ox.$body.removeClass('OxDragging');
|
||||
if (self.options.size != self.drag.startSize) {
|
||||
that.triggerEvent('resizeend', {size: self.options.size});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
if (self.options.resizable && !self.options.collapsed) {
|
||||
that.triggerEvent('reset');
|
||||
}
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
if (self.options.collapsible) {
|
||||
self.options.collapsed = !self.options.collapsed;
|
||||
that.css({cursor: getCursor()});
|
||||
self.$tooltip && self.$tooltip.hide(function() {
|
||||
self.$tooltip.options({title: getTooltipTitle()});
|
||||
});
|
||||
that.triggerEvent('toggle', {collapsed: self.options.collapsed});
|
||||
}
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
34
source/UI/js/Bar/Tabbar.js
Normal file
34
source/UI/js/Bar/Tabbar.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
'use strict';
|
||||
/*@
|
||||
Ox.Tabbar <f> Tabbar
|
||||
options <o> Options object
|
||||
selected <n|0> selected item
|
||||
tabs <a|[]> tabs
|
||||
self <o> Shared private variable
|
||||
([options[, self]]) -> <o:Ox.Bar> Tabbar object
|
||||
@*/
|
||||
Ox.Tabbar = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Bar({
|
||||
size: 20
|
||||
}, self)
|
||||
.defaults({
|
||||
selected: 0,
|
||||
tabs: []
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxTabbar');
|
||||
|
||||
Ox.ButtonGroup({
|
||||
buttons: self.options.tabs,
|
||||
group: true,
|
||||
selectable: true,
|
||||
selected: self.options.selected,
|
||||
size: 'medium',
|
||||
style: 'tab'
|
||||
}).appendTo(that);
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue