remove new for all Ox.Elements, dont declare arguments again, add some semicolons
This commit is contained in:
parent
3eab11e967
commit
b27ed00356
69 changed files with 430 additions and 440 deletions
|
@ -10,8 +10,8 @@ Ox.Bar <f:Ox.Element> Bar
|
||||||
self <o> Shared private variable
|
self <o> Shared private variable
|
||||||
@*/
|
@*/
|
||||||
Ox.Bar = function(options, self) {
|
Ox.Bar = function(options, self) {
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
orientation: 'horizontal',
|
orientation: 'horizontal',
|
||||||
size: 'medium' // can be int
|
size: 'medium' // can be int
|
||||||
|
|
|
@ -20,8 +20,8 @@ Ox.Resizebar <f:Ox.Element> Resizebar
|
||||||
*/
|
*/
|
||||||
Ox.Resizebar = function(options, self) {
|
Ox.Resizebar = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
collapsible: true,
|
collapsible: true,
|
||||||
|
|
|
@ -13,8 +13,8 @@ Ox.Tabbar <f:Ox.Bar> Tabbar
|
||||||
*/
|
*/
|
||||||
Ox.Tabbar = function(options, self) {
|
Ox.Tabbar = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Bar({
|
var that = Ox.Bar({
|
||||||
size: 20
|
size: 20
|
||||||
}, self)
|
}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
|
@ -30,7 +30,7 @@ Ox.Tabbar = function(options, self) {
|
||||||
selectable: true,
|
selectable: true,
|
||||||
selected: self.options.selected,
|
selected: self.options.selected,
|
||||||
size: 'medium',
|
size: 'medium',
|
||||||
style: 'tab',
|
style: 'tab'
|
||||||
}).appendTo(that);
|
}).appendTo(that);
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
fixme: no need for this
|
fixme: no need for this
|
||||||
*/
|
*/
|
||||||
Ox.Toolbar = function(options, self) {
|
Ox.Toolbar = function(options, self) {
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Bar({
|
var that = Ox.Bar({
|
||||||
size: Ox.UI.getBarSize(options.size)
|
size: Ox.UI.getBarSize(options.size)
|
||||||
}, self);
|
}, self);
|
||||||
return that;
|
return that;
|
||||||
|
|
|
@ -28,7 +28,7 @@ Ox.Calendar <f:Ox.Element> Basic calendar object
|
||||||
Ox.Calendar = function(options, self) {
|
Ox.Calendar = function(options, self) {
|
||||||
|
|
||||||
self = self || {};
|
self = self || {};
|
||||||
var that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
date: new Date(),
|
date: new Date(),
|
||||||
events: [],
|
events: [],
|
||||||
|
@ -338,7 +338,7 @@ Ox.Calendar = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(self.$toolbar);
|
.appendTo(self.$toolbar);
|
||||||
|
|
||||||
self.$scalebar = new Ox.Element()
|
self.$scalebar = Ox.Element()
|
||||||
.addClass('OxTimeline')
|
.addClass('OxTimeline')
|
||||||
.css({
|
.css({
|
||||||
posision: 'absolute',
|
posision: 'absolute',
|
||||||
|
@ -346,7 +346,7 @@ Ox.Calendar = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
self.$container = new Ox.Element()
|
self.$container = Ox.Element()
|
||||||
.addClass('OxCalendarContainer')
|
.addClass('OxCalendarContainer')
|
||||||
.css({
|
.css({
|
||||||
top: '40px',
|
top: '40px',
|
||||||
|
@ -367,15 +367,15 @@ Ox.Calendar = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
self.$content = new Ox.Element()
|
self.$content = Ox.Element()
|
||||||
.addClass('OxCalendarContent')
|
.addClass('OxCalendarContent')
|
||||||
.appendTo(self.$container);
|
.appendTo(self.$container);
|
||||||
|
|
||||||
self.$background = new Ox.Element()
|
self.$background = Ox.Element()
|
||||||
.addClass('OxBackground')
|
.addClass('OxBackground')
|
||||||
.appendTo(self.$content);
|
.appendTo(self.$content);
|
||||||
|
|
||||||
self.$scrollbar = new Ox.Element()
|
self.$scrollbar = Ox.Element()
|
||||||
.addClass('OxTimeline')
|
.addClass('OxTimeline')
|
||||||
.css({
|
.css({
|
||||||
posision: 'absolute',
|
posision: 'absolute',
|
||||||
|
@ -383,7 +383,7 @@ Ox.Calendar = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
self.$zoombar = new Ox.Element()
|
self.$zoombar = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
|
@ -391,7 +391,7 @@ Ox.Calendar = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
self.$zoomInput = new Ox.Range({
|
self.$zoomInput = Ox.Range({
|
||||||
arrows: true,
|
arrows: true,
|
||||||
max: self.maxZoom,
|
max: self.maxZoom,
|
||||||
min: 0,
|
min: 0,
|
||||||
|
@ -405,7 +405,7 @@ Ox.Calendar = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(self.$zoombar);
|
.appendTo(self.$zoombar);
|
||||||
|
|
||||||
self.$tooltip = new Ox.Tooltip({
|
self.$tooltip = Ox.Tooltip({
|
||||||
animate: false
|
animate: false
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
@ -547,7 +547,7 @@ Ox.Calendar = function(options, self) {
|
||||||
Ox.loop(-n, n + 1, function(i) {
|
Ox.loop(-n, n + 1, function(i) {
|
||||||
if (u == 0 || Ox.mod(value + i, 2)) {
|
if (u == 0 || Ox.mod(value + i, 2)) {
|
||||||
$elements.push(
|
$elements.push(
|
||||||
new Ox.Element()
|
Ox.Element()
|
||||||
.addClass(
|
.addClass(
|
||||||
u == 0 ? 'line' : ''
|
u == 0 ? 'line' : ''
|
||||||
)
|
)
|
||||||
|
@ -599,7 +599,7 @@ Ox.Calendar = function(options, self) {
|
||||||
paddingLeft = 0;
|
paddingLeft = 0;
|
||||||
width = getPosition(event.endTime, zoom) - left;
|
width = getPosition(event.endTime, zoom) - left;
|
||||||
}
|
}
|
||||||
return new Ox.Element()
|
return Ox.Element()
|
||||||
.addClass('OxEvent' +
|
.addClass('OxEvent' +
|
||||||
(event.type ? ' Ox' + Ox.toTitleCase(event.type) : '' ) +
|
(event.type ? ' Ox' + Ox.toTitleCase(event.type) : '' ) +
|
||||||
(event.current ? ' OxCurrent' : '') +
|
(event.current ? ' OxCurrent' : '') +
|
||||||
|
@ -869,7 +869,7 @@ Ox.Calendar = function(options, self) {
|
||||||
});
|
});
|
||||||
if (line == self.lineEvents.length) {
|
if (line == self.lineEvents.length) {
|
||||||
self.lineEvents[line] = [];
|
self.lineEvents[line] = [];
|
||||||
self.$lines[line] = new Ox.Element()
|
self.$lines[line] = Ox.Element()
|
||||||
.addClass('OxLine')
|
.addClass('OxLine')
|
||||||
.css({
|
.css({
|
||||||
top: (line * 16) + 'px'
|
top: (line * 16) + 'px'
|
||||||
|
|
|
@ -4,7 +4,6 @@
|
||||||
Ox.App <f> Basic application instance that communicates with a JSON API
|
Ox.App <f> Basic application instance that communicates with a JSON API
|
||||||
() -> <f> App object
|
() -> <f> App object
|
||||||
(options) -> <f> App object
|
(options) -> <f> App object
|
||||||
(options, self) -> <f> App object
|
|
||||||
options <o> Options object
|
options <o> Options object
|
||||||
timeout <n> request timeout
|
timeout <n> request timeout
|
||||||
type <s> HTTP Request type, i.e. 'GET' or 'POST'
|
type <s> HTTP Request type, i.e. 'GET' or 'POST'
|
||||||
|
@ -14,9 +13,7 @@ Ox.App <f> Basic application instance that communicates with a JSON API
|
||||||
|
|
||||||
@*/
|
@*/
|
||||||
|
|
||||||
Ox.App = (function() {
|
Ox.App = function(options) {
|
||||||
|
|
||||||
return function(options) {
|
|
||||||
|
|
||||||
options = options || {};
|
options = options || {};
|
||||||
var self = {
|
var self = {
|
||||||
|
@ -27,7 +24,7 @@ Ox.App = (function() {
|
||||||
}, options || {}),
|
}, options || {}),
|
||||||
time: new Date()
|
time: new Date()
|
||||||
},
|
},
|
||||||
that = new Ox.Element({}, self);
|
that = Ox.Element({}, self);
|
||||||
|
|
||||||
that.api = {
|
that.api = {
|
||||||
api: function(callback) {
|
api: function(callback) {
|
||||||
|
@ -128,6 +125,4 @@ Ox.App = (function() {
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
}());
|
|
||||||
|
|
|
@ -14,10 +14,10 @@ Ox.Container <f> Container (depricated)
|
||||||
@*/
|
@*/
|
||||||
Ox.Container = function(options, self) {
|
Ox.Container = function(options, self) {
|
||||||
// fixme: to be deprecated
|
// fixme: to be deprecated
|
||||||
var that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.options(options || {})
|
.options(options || {})
|
||||||
.addClass('OxContainer');
|
.addClass('OxContainer');
|
||||||
that.$content = new Ox.Element({}, self) // fixme: passing self twice??
|
that.$content = Ox.Element({}, self) // fixme: passing self twice??
|
||||||
.options(options || {})
|
.options(options || {})
|
||||||
.addClass('OxContent')
|
.addClass('OxContent')
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
|
@ -48,12 +48,10 @@ Ox.Element <function:Ox.JQueryElement> Basic UI element object
|
||||||
* <*> original event properties
|
* <*> original event properties
|
||||||
@*/
|
@*/
|
||||||
|
|
||||||
Ox.Element = function() {
|
Ox.Element = function(options, self) {
|
||||||
|
|
||||||
return function(options, self) {
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
// allow for 'Ox.Element()' instead of 'new Ox.Element()'
|
// allow for 'Ox.Element()' instead of 'Ox.Element()'
|
||||||
if (!(this instanceof arguments.callee)) {
|
if (!(this instanceof arguments.callee)) {
|
||||||
return new arguments.callee(options, self);
|
return new arguments.callee(options, self);
|
||||||
}
|
}
|
||||||
|
@ -69,8 +67,8 @@ Ox.Element = function() {
|
||||||
if (Ox.isString(self.options)) {
|
if (Ox.isString(self.options)) {
|
||||||
self.options = {
|
self.options = {
|
||||||
element: self.options
|
element: self.options
|
||||||
}
|
};
|
||||||
};
|
}
|
||||||
// create event handler
|
// create event handler
|
||||||
if (!self.$eventHandler) {
|
if (!self.$eventHandler) {
|
||||||
self.$eventHandler = $('<div>');
|
self.$eventHandler = $('<div>');
|
||||||
|
@ -376,6 +374,4 @@ Ox.Element = function() {
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
}
|
};
|
||||||
|
|
||||||
}();
|
|
||||||
|
|
|
@ -101,7 +101,7 @@
|
||||||
buffer = '';
|
buffer = '';
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
Ox.print(ret)
|
Ox.print(ret);
|
||||||
return ret;
|
return ret;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,8 +10,8 @@ Ox.LoadingIcon <f:Ox.Element> Loading Icon Element
|
||||||
@*/
|
@*/
|
||||||
|
|
||||||
Ox.LoadingIcon = function(options, self) {
|
Ox.LoadingIcon = function(options, self) {
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element('<img>', self)
|
var that = Ox.Element('<img>', self)
|
||||||
.defaults({
|
.defaults({
|
||||||
size: 'medium'
|
size: 'medium'
|
||||||
})
|
})
|
||||||
|
@ -42,6 +42,6 @@ Ox.LoadingIcon = function(options, self) {
|
||||||
opacity: 0
|
opacity: 0
|
||||||
}, 250);
|
}, 250);
|
||||||
return that;
|
return that;
|
||||||
}
|
};
|
||||||
return that;
|
return that;
|
||||||
}
|
};
|
||||||
|
|
|
@ -135,10 +135,10 @@ Ox.Request = function(options) {
|
||||||
width: 768,
|
width: 768,
|
||||||
height: 384
|
height: 384
|
||||||
}),
|
}),
|
||||||
$dialog = new Ox.Dialog({
|
$dialog = Ox.Dialog({
|
||||||
title: 'Application Error',
|
title: 'Application Error',
|
||||||
buttons: [
|
buttons: [
|
||||||
new Ox.Button({
|
Ox.Button({
|
||||||
title: 'Close'
|
title: 'Close'
|
||||||
})
|
})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
|
@ -186,10 +186,10 @@ Ox.Request = function(options) {
|
||||||
if (data.status.code < 500) {
|
if (data.status.code < 500) {
|
||||||
callback(data);
|
callback(data);
|
||||||
} else {
|
} else {
|
||||||
var $dialog = new Ox.Dialog({
|
var $dialog = Ox.Dialog({
|
||||||
title: 'Application Error',
|
title: 'Application Error',
|
||||||
buttons: [
|
buttons: [
|
||||||
new Ox.Button({
|
Ox.Button({
|
||||||
id: 'details',
|
id: 'details',
|
||||||
title: 'Details'
|
title: 'Details'
|
||||||
})
|
})
|
||||||
|
@ -200,7 +200,7 @@ Ox.Request = function(options) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
new Ox.Button({
|
Ox.Button({
|
||||||
id: 'close',
|
id: 'close',
|
||||||
title: 'Close'
|
title: 'Close'
|
||||||
})
|
})
|
||||||
|
|
|
@ -18,7 +18,7 @@ Ox.SyntaxHighlighter <function> Syntax Highlighter
|
||||||
|
|
||||||
Ox.SyntaxHighlighter = function(options, self) {
|
Ox.SyntaxHighlighter = function(options, self) {
|
||||||
|
|
||||||
self = self || {};
|
self = self || {};
|
||||||
var that = Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
lineLength: 0,
|
lineLength: 0,
|
||||||
|
@ -61,9 +61,9 @@ Ox.SyntaxHighlighter = function(options, self) {
|
||||||
classNames = 'Ox' + Ox.toTitleCase(token.type);
|
classNames = 'Ox' + Ox.toTitleCase(token.type);
|
||||||
if (self.options.showWhitespace && token.type == 'whitespace') {
|
if (self.options.showWhitespace && token.type == 'whitespace') {
|
||||||
if (isAfterLinebreak() && hasIrregularSpaces()) {
|
if (isAfterLinebreak() && hasIrregularSpaces()) {
|
||||||
classNames += ' OxLeading'
|
classNames += ' OxLeading';
|
||||||
} else if (isBeforeLinebreak()) {
|
} else if (isBeforeLinebreak()) {
|
||||||
classNames += ' OxTrailing'
|
classNames += ' OxTrailing';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
source += '<span class="' + classNames + '">' +
|
source += '<span class="' + classNames + '">' +
|
||||||
|
@ -89,7 +89,7 @@ Ox.SyntaxHighlighter = function(options, self) {
|
||||||
lines = source.split('<br/>');
|
lines = source.split('<br/>');
|
||||||
that.empty();
|
that.empty();
|
||||||
if (self.options.showLineNumbers) {
|
if (self.options.showLineNumbers) {
|
||||||
$lineNumbers = new Ox.Element()
|
$lineNumbers = Ox.Element()
|
||||||
.addClass('OxLineNumbers')
|
.addClass('OxLineNumbers')
|
||||||
.html(
|
.html(
|
||||||
Ox.range(lines.length).map(function(line) {
|
Ox.range(lines.length).map(function(line) {
|
||||||
|
@ -98,19 +98,19 @@ Ox.SyntaxHighlighter = function(options, self) {
|
||||||
)
|
)
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
}
|
}
|
||||||
$source = new Ox.Element()
|
$source = Ox.Element()
|
||||||
.addClass('OxSourceCode')
|
.addClass('OxSourceCode')
|
||||||
.html(source)
|
.html(source)
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
if (self.options.lineLength) {
|
if (self.options.lineLength) {
|
||||||
$line = new Ox.Element()
|
$line = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: '-1000px'
|
top: '-1000px'
|
||||||
})
|
})
|
||||||
.html(Ox.repeat(' ', self.options.lineLength))
|
.html(Ox.repeat(' ', self.options.lineLength))
|
||||||
.appendTo(that),
|
.appendTo(that);
|
||||||
width = $line.width() + 4; // add padding
|
width = $line.width() + 4; // add padding
|
||||||
$line.removeElement();
|
$line.removeElement();
|
||||||
['moz', 'webkit'].forEach(function(browser) {
|
['moz', 'webkit'].forEach(function(browser) {
|
||||||
$source.css({
|
$source.css({
|
||||||
|
@ -129,4 +129,4 @@ Ox.SyntaxHighlighter = function(options, self) {
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -24,8 +24,9 @@ Ox.Button <f:Ox.Element> Button Object
|
||||||
@*/
|
@*/
|
||||||
|
|
||||||
Ox.Button = function(options, self) {
|
Ox.Button = function(options, self) {
|
||||||
var self = self || {},
|
|
||||||
that = new Ox.Element('<input>', self)
|
self = self || {};
|
||||||
|
var that = Ox.Element('<input>', self)
|
||||||
.defaults({
|
.defaults({
|
||||||
disabled: false,
|
disabled: false,
|
||||||
group: false,
|
group: false,
|
||||||
|
@ -72,7 +73,7 @@ Ox.Button = function(options, self) {
|
||||||
|
|
||||||
if (self.options.tooltip) {
|
if (self.options.tooltip) {
|
||||||
self.tooltips = Ox.isArray(self.options.tooltip) ? self.options.tooltip : [self.options.tooltip];
|
self.tooltips = Ox.isArray(self.options.tooltip) ? self.options.tooltip : [self.options.tooltip];
|
||||||
self.$tooltip = new Ox.Tooltip({
|
self.$tooltip = Ox.Tooltip({
|
||||||
title: self.tooltips[self.selectedTitle]
|
title: self.tooltips[self.selectedTitle]
|
||||||
});
|
});
|
||||||
that.mouseenter(mouseenter)
|
that.mouseenter(mouseenter)
|
||||||
|
|
|
@ -16,8 +16,8 @@ Ox.ButtonGroup <f:Ox.Element> ButtonGroup Object
|
||||||
|
|
||||||
Ox.ButtonGroup = function(options, self) {
|
Ox.ButtonGroup = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
buttons: [],
|
buttons: [],
|
||||||
max: 1,
|
max: 1,
|
||||||
|
@ -31,7 +31,7 @@ Ox.ButtonGroup = function(options, self) {
|
||||||
.addClass('OxButtonGroup');
|
.addClass('OxButtonGroup');
|
||||||
|
|
||||||
if (self.options.selectable) {
|
if (self.options.selectable) {
|
||||||
self.optionGroup = new Ox.OptionGroup(
|
self.optionGroup = Ox.OptionGroup(
|
||||||
self.options.buttons,
|
self.options.buttons,
|
||||||
self.options.min,
|
self.options.min,
|
||||||
self.options.max,
|
self.options.max,
|
||||||
|
|
|
@ -17,8 +17,8 @@ Ox.Checkbox <f:Ox.Element> Checkbox Element
|
||||||
|
|
||||||
Ox.Checkbox = function(options, self) {
|
Ox.Checkbox = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
disabled: false,
|
disabled: false,
|
||||||
id: '',
|
id: '',
|
||||||
|
@ -41,7 +41,7 @@ Ox.Checkbox = function(options, self) {
|
||||||
self.options.width != 'auto' && that.css({
|
self.options.width != 'auto' && that.css({
|
||||||
width: self.options.width + 'px'
|
width: self.options.width + 'px'
|
||||||
});
|
});
|
||||||
self.$title = new Ox.Label({
|
self.$title = Ox.Label({
|
||||||
disabled: self.options.disabled,
|
disabled: self.options.disabled,
|
||||||
id: self.options.id + 'Label',
|
id: self.options.id + 'Label',
|
||||||
overlap: 'left',
|
overlap: 'left',
|
||||||
|
@ -55,7 +55,7 @@ Ox.Checkbox = function(options, self) {
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
}
|
}
|
||||||
|
|
||||||
self.$button = new Ox.Button({
|
self.$button = Ox.Button({
|
||||||
disabled: self.options.disabled,
|
disabled: self.options.disabled,
|
||||||
id: self.options.id + 'Button',
|
id: self.options.id + 'Button',
|
||||||
title: [
|
title: [
|
||||||
|
|
|
@ -17,8 +17,8 @@ Ox.CheckboxGroup <f:Ox.Element> CheckboxGroup Object
|
||||||
|
|
||||||
Ox.CheckboxGroup = function(options, self) {
|
Ox.CheckboxGroup = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
checkboxes: [],
|
checkboxes: [],
|
||||||
max: 1,
|
max: 1,
|
||||||
|
@ -28,7 +28,7 @@ Ox.CheckboxGroup = function(options, self) {
|
||||||
.options(options || {})
|
.options(options || {})
|
||||||
.addClass('OxCheckboxGroup');
|
.addClass('OxCheckboxGroup');
|
||||||
|
|
||||||
self.optionGroup = new Ox.OptionGroup(
|
self.optionGroup = Ox.OptionGroup(
|
||||||
self.options.checkboxes,
|
self.options.checkboxes,
|
||||||
self.options.min,
|
self.options.min,
|
||||||
self.options.max);
|
self.options.max);
|
||||||
|
@ -45,7 +45,7 @@ Ox.CheckboxGroup = function(options, self) {
|
||||||
});
|
});
|
||||||
self.options.checkboxes.forEach(function(checkbox, position) {
|
self.options.checkboxes.forEach(function(checkbox, position) {
|
||||||
var id = self.options.id + Ox.toTitleCase(checkbox.id)
|
var id = self.options.id + Ox.toTitleCase(checkbox.id)
|
||||||
self.$checkboxes[position] = new Ox.Checkbox($.extend(checkbox, {
|
self.$checkboxes[position] = Ox.Checkbox($.extend(checkbox, {
|
||||||
group: true,
|
group: true,
|
||||||
id: id,
|
id: id,
|
||||||
width: self.checkboxWidth[position]
|
width: self.checkboxWidth[position]
|
||||||
|
|
|
@ -11,18 +11,18 @@ Ox.ColorInput <f:Ox.InputGroup> ColorInput Element
|
||||||
@*/
|
@*/
|
||||||
Ox.ColorInput = function(options, self) {
|
Ox.ColorInput = function(options, self) {
|
||||||
|
|
||||||
var self = $.extend(self || {}, {
|
self = $.extend(self || {}, {
|
||||||
options: $.extend({
|
options: $.extend({
|
||||||
id: '',
|
id: '',
|
||||||
value: '0, 0, 0'
|
value: '0, 0, 0'
|
||||||
}, options)
|
}, options)
|
||||||
}),
|
});
|
||||||
that;
|
var that;
|
||||||
|
|
||||||
self.values = self.options.value.split(', ');
|
self.values = self.options.value.split(', ');
|
||||||
self.$inputs = [];
|
self.$inputs = [];
|
||||||
['red', 'green', 'blue'].forEach(function(v, i) {
|
['red', 'green', 'blue'].forEach(function(v, i) {
|
||||||
self.$inputs[i] = new Ox.Input({
|
self.$inputs[i] = Ox.Input({
|
||||||
id: v,
|
id: v,
|
||||||
max: 255,
|
max: 255,
|
||||||
type: 'integer',
|
type: 'integer',
|
||||||
|
@ -31,14 +31,14 @@ Ox.ColorInput = function(options, self) {
|
||||||
})
|
})
|
||||||
.bindEvent('autovalidate', change);
|
.bindEvent('autovalidate', change);
|
||||||
});
|
});
|
||||||
self.$inputs[3] = new Ox.Label({
|
self.$inputs[3] = Ox.Label({
|
||||||
id: 'color',
|
id: 'color',
|
||||||
width: 36
|
width: 36
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
background: 'rgb(' + self.options.value + ')'
|
background: 'rgb(' + self.options.value + ')'
|
||||||
});
|
});
|
||||||
self.$inputs[4] = new Ox.ColorPicker({
|
self.$inputs[4] = Ox.ColorPicker({
|
||||||
id: 'picker'
|
id: 'picker'
|
||||||
})
|
})
|
||||||
.bindEvent('change', function(event, data) {
|
.bindEvent('change', function(event, data) {
|
||||||
|
@ -55,7 +55,7 @@ Ox.ColorInput = function(options, self) {
|
||||||
width: 16 // this is just a hack to make the InputGroup layout work
|
width: 16 // this is just a hack to make the InputGroup layout work
|
||||||
});
|
});
|
||||||
|
|
||||||
that = new Ox.InputGroup({
|
that = Ox.InputGroup({
|
||||||
id: self.options.id,
|
id: self.options.id,
|
||||||
inputs: self.$inputs,
|
inputs: self.$inputs,
|
||||||
separators: [
|
separators: [
|
||||||
|
|
|
@ -14,8 +14,8 @@ Ox.ColorPicker <f:Ox.Element> ColorPicker Element
|
||||||
|
|
||||||
Ox.ColorPicker = function(options, self) {
|
Ox.ColorPicker = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
id: '',
|
id: '',
|
||||||
value: '0, 0, 0'
|
value: '0, 0, 0'
|
||||||
|
@ -28,7 +28,7 @@ Ox.ColorPicker = function(options, self) {
|
||||||
self.values = self.options.value.split(', ');
|
self.values = self.options.value.split(', ');
|
||||||
|
|
||||||
Ox.range(3).forEach(function(i) {
|
Ox.range(3).forEach(function(i) {
|
||||||
self.$ranges[i] = new Ox.Range({
|
self.$ranges[i] = Ox.Range({
|
||||||
arrows: true,
|
arrows: true,
|
||||||
id: self.options.id + Ox.toTitleCase(self.rgb[i]),
|
id: self.options.id + Ox.toTitleCase(self.rgb[i]),
|
||||||
max: 255,
|
max: 255,
|
||||||
|
@ -64,7 +64,7 @@ Ox.ColorPicker = function(options, self) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
that = new Ox.Picker({
|
that = Ox.Picker({
|
||||||
element: that,
|
element: that,
|
||||||
elementHeight: 46,
|
elementHeight: 46,
|
||||||
elementWidth: 328,
|
elementWidth: 328,
|
||||||
|
@ -97,7 +97,7 @@ Ox.ColorPicker = function(options, self) {
|
||||||
'rgb(' + $.map(Ox.range(3), function(v) {
|
'rgb(' + $.map(Ox.range(3), function(v) {
|
||||||
return v == index ? 255 : self.values[v];
|
return v == index ? 255 : self.values[v];
|
||||||
}).join(', ') + ')'
|
}).join(', ') + ')'
|
||||||
]
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
|
@ -15,7 +15,8 @@ Ox.DateInput <f:Ox.Element> DateInput Element
|
||||||
@*/
|
@*/
|
||||||
Ox.DateInput = function(options, self) {
|
Ox.DateInput = function(options, self) {
|
||||||
|
|
||||||
var self = $.extend(self || {}, {
|
var that;
|
||||||
|
self = $.extend(self || {}, {
|
||||||
options: $.extend({
|
options: $.extend({
|
||||||
format: 'short',
|
format: 'short',
|
||||||
value: Ox.formatDate(new Date(), '%F'),
|
value: Ox.formatDate(new Date(), '%F'),
|
||||||
|
@ -27,8 +28,7 @@ Ox.DateInput = function(options, self) {
|
||||||
year: 48
|
year: 48
|
||||||
}
|
}
|
||||||
}, options)
|
}, options)
|
||||||
}),
|
});
|
||||||
that;
|
|
||||||
|
|
||||||
$.extend(self, {
|
$.extend(self, {
|
||||||
date: new Date(self.options.value.replace(/-/g, '/')),
|
date: new Date(self.options.value.replace(/-/g, '/')),
|
||||||
|
@ -48,7 +48,7 @@ Ox.DateInput = function(options, self) {
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$input = $.extend(self.options.weekday ? {
|
self.$input = $.extend(self.options.weekday ? {
|
||||||
weekday: new Ox.Input({
|
weekday: Ox.Input({
|
||||||
autocomplete: self.weekdays,
|
autocomplete: self.weekdays,
|
||||||
autocompleteReplace: true,
|
autocompleteReplace: true,
|
||||||
autocompleteReplaceCorrect: true,
|
autocompleteReplaceCorrect: true,
|
||||||
|
@ -58,7 +58,7 @@ Ox.DateInput = function(options, self) {
|
||||||
})
|
})
|
||||||
.bindEvent('autocomplete', changeWeekday),
|
.bindEvent('autocomplete', changeWeekday),
|
||||||
} : {}, {
|
} : {}, {
|
||||||
day: new Ox.Input({
|
day: Ox.Input({
|
||||||
autocomplete: $.map(Ox.range(1, Ox.getDaysInMonth(
|
autocomplete: $.map(Ox.range(1, Ox.getDaysInMonth(
|
||||||
parseInt(Ox.formatDate(self.date, '%Y'), 10),
|
parseInt(Ox.formatDate(self.date, '%Y'), 10),
|
||||||
parseInt(Ox.formatDate(self.date, '%m'), 10)
|
parseInt(Ox.formatDate(self.date, '%m'), 10)
|
||||||
|
@ -73,7 +73,7 @@ Ox.DateInput = function(options, self) {
|
||||||
width: self.options.width.day
|
width: self.options.width.day
|
||||||
})
|
})
|
||||||
.bindEvent('autocomplete', changeDay),
|
.bindEvent('autocomplete', changeDay),
|
||||||
month: new Ox.Input({
|
month: Ox.Input({
|
||||||
autocomplete: self.options.format == 'short' ? $.map(Ox.range(1, 13), function(v, i) {
|
autocomplete: self.options.format == 'short' ? $.map(Ox.range(1, 13), function(v, i) {
|
||||||
return Ox.pad(v, 2);
|
return Ox.pad(v, 2);
|
||||||
}) : self.months,
|
}) : self.months,
|
||||||
|
@ -85,7 +85,7 @@ Ox.DateInput = function(options, self) {
|
||||||
width: self.options.width.month
|
width: self.options.width.month
|
||||||
})
|
})
|
||||||
.bindEvent('autocomplete', changeMonthOrYear),
|
.bindEvent('autocomplete', changeMonthOrYear),
|
||||||
year: new Ox.Input({
|
year: Ox.Input({
|
||||||
autocomplete: $.map($.merge(Ox.range(1900, 3000), Ox.range(1000, 1900)), function(v, i) {
|
autocomplete: $.map($.merge(Ox.range(1900, 3000), Ox.range(1000, 1900)), function(v, i) {
|
||||||
return v.toString();
|
return v.toString();
|
||||||
}),
|
}),
|
||||||
|
@ -99,7 +99,7 @@ Ox.DateInput = function(options, self) {
|
||||||
.bindEvent('autocomplete', changeMonthOrYear)
|
.bindEvent('autocomplete', changeMonthOrYear)
|
||||||
});
|
});
|
||||||
|
|
||||||
that = new Ox.InputGroup($.extend(self.options, {
|
that = Ox.InputGroup($.extend(self.options, {
|
||||||
id: self.options.id,
|
id: self.options.id,
|
||||||
inputs: $.merge(self.options.weekday ? [
|
inputs: $.merge(self.options.weekday ? [
|
||||||
self.$input.weekday
|
self.$input.weekday
|
||||||
|
|
|
@ -17,8 +17,8 @@ Ox.DateTimeInput <f:Ox.Element> DateTimeInput Element
|
||||||
|
|
||||||
Ox.DateTimeInput = function(options, self) {
|
Ox.DateTimeInput = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
ampm: false,
|
ampm: false,
|
||||||
format: 'short',
|
format: 'short',
|
||||||
|
@ -31,15 +31,15 @@ Ox.DateTimeInput = function(options, self) {
|
||||||
self.values = self.options.value.split(' ');
|
self.values = self.options.value.split(' ');
|
||||||
//Ox.print(self.values)
|
//Ox.print(self.values)
|
||||||
|
|
||||||
that = new Ox.InputGroup({
|
that = Ox.InputGroup({
|
||||||
inputs: [
|
inputs: [
|
||||||
new Ox.DateInput({
|
Ox.DateInput({
|
||||||
format: self.options.format,
|
format: self.options.format,
|
||||||
id: 'date',
|
id: 'date',
|
||||||
value: self.values[0],
|
value: self.values[0],
|
||||||
weekday: self.options.weekday
|
weekday: self.options.weekday
|
||||||
}),
|
}),
|
||||||
new Ox.TimeInput({
|
Ox.TimeInput({
|
||||||
ampm: self.options.ampm,
|
ampm: self.options.ampm,
|
||||||
id: 'time',
|
id: 'time',
|
||||||
value: self.values[1],
|
value: self.values[1],
|
||||||
|
|
|
@ -292,7 +292,7 @@ Ox.Filter = function(options, self) {
|
||||||
subpos = Ox.isUndefined(subpos) ? -1 : subpos;
|
subpos = Ox.isUndefined(subpos) ? -1 : subpos;
|
||||||
var isGroup = subpos == -1 && self.options.query.conditions[pos].conditions;
|
var isGroup = subpos == -1 && self.options.query.conditions[pos].conditions;
|
||||||
return Ox.merge([
|
return Ox.merge([
|
||||||
new Ox.Button({
|
Ox.Button({
|
||||||
disabled: self.options.query.conditions.length == 1,
|
disabled: self.options.query.conditions.length == 1,
|
||||||
id: 'remove',
|
id: 'remove',
|
||||||
title: 'remove',
|
title: 'remove',
|
||||||
|
|
|
@ -15,8 +15,8 @@ Ox.Form <f:Ox.Element> Form Object
|
||||||
|
|
||||||
Ox.Form = function(options, self) {
|
Ox.Form = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
error: '',
|
error: '',
|
||||||
id: '',
|
id: '',
|
||||||
|
@ -38,7 +38,7 @@ Ox.Form = function(options, self) {
|
||||||
self.options.items.forEach(function(item, i) {
|
self.options.items.forEach(function(item, i) {
|
||||||
self.itemIds[i] = item.options('id') || item.id;
|
self.itemIds[i] = item.options('id') || item.id;
|
||||||
self.itemIsValid[i] = !!item.value().length;
|
self.itemIsValid[i] = !!item.value().length;
|
||||||
that.append(self.$items[i] = new Ox.FormItem({element: item}));
|
that.append(self.$items[i] = Ox.FormItem({element: item}));
|
||||||
item.bindEvent({
|
item.bindEvent({
|
||||||
/*
|
/*
|
||||||
blur: function(event, data) {
|
blur: function(event, data) {
|
||||||
|
@ -89,7 +89,7 @@ Ox.Form = function(options, self) {
|
||||||
that.addItem = function(pos, item) {
|
that.addItem = function(pos, item) {
|
||||||
Ox.print('addItem', pos)
|
Ox.print('addItem', pos)
|
||||||
self.options.items.splice(pos, 0, item);
|
self.options.items.splice(pos, 0, item);
|
||||||
self.$items.splice(pos, 0, new Ox.FormItem({element: item}));
|
self.$items.splice(pos, 0, Ox.FormItem({element: item}));
|
||||||
pos == 0 ?
|
pos == 0 ?
|
||||||
self.$items[pos].insertBefore(self.$items[0]) :
|
self.$items[pos].insertBefore(self.$items[0]) :
|
||||||
self.$items[pos].insertAfter(self.$items[pos - 1]);
|
self.$items[pos].insertAfter(self.$items[pos - 1]);
|
||||||
|
|
|
@ -16,8 +16,8 @@ Ox.FormElementGroup <f:Ox.Element> FormElementGroup Element
|
||||||
|
|
||||||
Ox.FormElementGroup = function(options, self) {
|
Ox.FormElementGroup = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
id: '',
|
id: '',
|
||||||
elements: [],
|
elements: [],
|
||||||
|
|
|
@ -13,8 +13,8 @@ Ox.FormItem <f:Ox.Element> FormItem Element, wrap form element with an error mes
|
||||||
|
|
||||||
Ox.FormItem = function(options, self) {
|
Ox.FormItem = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
element: null,
|
element: null,
|
||||||
error: '',
|
error: '',
|
||||||
|
@ -23,7 +23,7 @@ Ox.FormItem = function(options, self) {
|
||||||
.addClass('OxFormItem')
|
.addClass('OxFormItem')
|
||||||
.append(self.options.element);
|
.append(self.options.element);
|
||||||
|
|
||||||
self.$message = new Ox.Element()
|
self.$message = Ox.Element()
|
||||||
.addClass('OxFormMessage')
|
.addClass('OxFormMessage')
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
|
@ -33,7 +33,7 @@ Ox.FormItem = function(options, self) {
|
||||||
@*/
|
@*/
|
||||||
that.setMessage = function(message) {
|
that.setMessage = function(message) {
|
||||||
self.$message.html(message)[message !== '' ? 'show' : 'hide']();
|
self.$message.html(message)[message !== '' ? 'show' : 'hide']();
|
||||||
}
|
};
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
value <f> get value
|
value <f> get value
|
||||||
|
@ -45,4 +45,4 @@ Ox.FormItem = function(options, self) {
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
}
|
};
|
||||||
|
|
|
@ -59,8 +59,8 @@ Ox.Input <f:Ox.Element> Input Element
|
||||||
|
|
||||||
Ox.Input = function(options, self) {
|
Ox.Input = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
arrows: false,
|
arrows: false,
|
||||||
arrowStep: 1,
|
arrowStep: 1,
|
||||||
|
@ -133,7 +133,7 @@ Ox.Input = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (self.options.label) {
|
if (self.options.label) {
|
||||||
self.$label = new Ox.Label({
|
self.$label = Ox.Label({
|
||||||
overlap: 'right',
|
overlap: 'right',
|
||||||
textAlign: 'right',
|
textAlign: 'right',
|
||||||
title: self.options.label,
|
title: self.options.label,
|
||||||
|
@ -152,7 +152,7 @@ Ox.Input = function(options, self) {
|
||||||
if (self.options.arrows) {
|
if (self.options.arrows) {
|
||||||
self.arrows = [];
|
self.arrows = [];
|
||||||
self.arrows[0] = [
|
self.arrows[0] = [
|
||||||
new Ox.Button({
|
Ox.Button({
|
||||||
overlap: 'right',
|
overlap: 'right',
|
||||||
title: 'left',
|
title: 'left',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
|
@ -164,7 +164,7 @@ Ox.Input = function(options, self) {
|
||||||
clickArrow(0);
|
clickArrow(0);
|
||||||
})
|
})
|
||||||
.appendTo(that),
|
.appendTo(that),
|
||||||
new Ox.Button({
|
Ox.Button({
|
||||||
overlap: 'left',
|
overlap: 'left',
|
||||||
title: 'right',
|
title: 'right',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
|
@ -187,7 +187,7 @@ Ox.Input = function(options, self) {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (self.options.clear) {
|
if (self.options.clear) {
|
||||||
self.$button = new Ox.Button({
|
self.$button = Ox.Button({
|
||||||
overlap: 'left',
|
overlap: 'left',
|
||||||
title: 'close',
|
title: 'close',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
|
@ -401,7 +401,7 @@ Ox.Input = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function constructAutocompleteMenu() {
|
function constructAutocompleteMenu() {
|
||||||
var menu = new Ox.Menu({
|
var menu = Ox.Menu({
|
||||||
element: self.$input,
|
element: self.$input,
|
||||||
id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?,
|
id: self.options.id + 'Menu', // fixme: we do this in other places ... are we doing it the same way? var name?,
|
||||||
offset: {
|
offset: {
|
||||||
|
@ -908,8 +908,8 @@ Ox.Input_ = function(options, self) {
|
||||||
events:
|
events:
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
autocomplete: null,
|
autocomplete: null,
|
||||||
autocorrect: null,
|
autocorrect: null,
|
||||||
|
@ -1066,7 +1066,7 @@ Ox.Input_ = function(options, self) {
|
||||||
self.options[self.keyName].forEach(function(key, keyPos) {
|
self.options[self.keyName].forEach(function(key, keyPos) {
|
||||||
//Ox.print('keyPos key', keyPos, key)
|
//Ox.print('keyPos key', keyPos, key)
|
||||||
if (self.keyName == 'label' && key.label.length == 1) {
|
if (self.keyName == 'label' && key.label.length == 1) {
|
||||||
that.$key[keyPos] = new Ox.Label({
|
that.$key[keyPos] = Ox.Label({
|
||||||
overlap: 'right',
|
overlap: 'right',
|
||||||
title: key.label[0].title,
|
title: key.label[0].title,
|
||||||
width: self.options.labelWidth
|
width: self.options.labelWidth
|
||||||
|
@ -1083,7 +1083,7 @@ Ox.Input_ = function(options, self) {
|
||||||
self.selectKeyId = self.options.id + Ox.toTitleCase(self.keyName) +
|
self.selectKeyId = self.options.id + Ox.toTitleCase(self.keyName) +
|
||||||
(self.options[self.keyName].length == 1 ? '' : keyPos);
|
(self.options[self.keyName].length == 1 ? '' : keyPos);
|
||||||
//Ox.print('three', self.selectedKey, keyPos, self.selectedKey[keyPos]);
|
//Ox.print('three', self.selectedKey, keyPos, self.selectedKey[keyPos]);
|
||||||
that.$key[keyPos] = new Ox.Select({
|
that.$key[keyPos] = Ox.Select({
|
||||||
id: self.selectKeyId,
|
id: self.selectKeyId,
|
||||||
items: $.map(key.label, function(value, valuePos) {
|
items: $.map(key.label, function(value, valuePos) {
|
||||||
return {
|
return {
|
||||||
|
@ -1107,7 +1107,7 @@ Ox.Input_ = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (self.options.clear) {
|
if (self.options.clear) {
|
||||||
that.$clear = new Ox.Button({
|
that.$clear = Ox.Button({
|
||||||
overlap: 'left',
|
overlap: 'left',
|
||||||
title: 'close',
|
title: 'close',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
|
@ -1120,7 +1120,7 @@ Ox.Input_ = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (self.options.unit.length == 1) {
|
if (self.options.unit.length == 1) {
|
||||||
that.$unit = new Ox.Label({
|
that.$unit = Ox.Label({
|
||||||
overlap: 'left',
|
overlap: 'left',
|
||||||
title: self.options.unit[0].title,
|
title: self.options.unit[0].title,
|
||||||
width: self.options.unitWidth
|
width: self.options.unitWidth
|
||||||
|
@ -1134,7 +1134,7 @@ Ox.Input_ = function(options, self) {
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
} else if (self.options.unit.length > 1) {
|
} else if (self.options.unit.length > 1) {
|
||||||
self.selectUnitId = self.options.id + 'Unit';
|
self.selectUnitId = self.options.id + 'Unit';
|
||||||
that.$unit = new Ox.Select({
|
that.$unit = Ox.Select({
|
||||||
id: self.selectUnitId,
|
id: self.selectUnitId,
|
||||||
items: $.map(self.options.unit, function(unit, i) {
|
items: $.map(self.options.unit, function(unit, i) {
|
||||||
//Ox.print('unit', unit)
|
//Ox.print('unit', unit)
|
||||||
|
@ -1159,7 +1159,7 @@ Ox.Input_ = function(options, self) {
|
||||||
that.$separator = [];
|
that.$separator = [];
|
||||||
self.options.value.forEach(function(v, i) {
|
self.options.value.forEach(function(v, i) {
|
||||||
if (i < self.values - 1) {
|
if (i < self.values - 1) {
|
||||||
that.$separator[i] = new Ox.Label({
|
that.$separator[i] = Ox.Label({
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
title: self.options.separator[i],
|
title: self.options.separator[i],
|
||||||
width: self.options.separatorWidth[i] + 32
|
width: self.options.separatorWidth[i] + 32
|
||||||
|
@ -1185,7 +1185,7 @@ Ox.Input_ = function(options, self) {
|
||||||
//self.margin -= (i == 0 ? 16 : self.options.value[i - 1].width)
|
//self.margin -= (i == 0 ? 16 : self.options.value[i - 1].width)
|
||||||
//Ox.print('v:', v, 'id:', id)
|
//Ox.print('v:', v, 'id:', id)
|
||||||
if (self.options.type == 'select') {
|
if (self.options.type == 'select') {
|
||||||
that.$input[i] = new Ox.Select({
|
that.$input[i] = Ox.Select({
|
||||||
id: v.id,
|
id: v.id,
|
||||||
items: v.items,
|
items: v.items,
|
||||||
width: v.width
|
width: v.width
|
||||||
|
@ -1194,12 +1194,12 @@ Ox.Input_ = function(options, self) {
|
||||||
float: 'left'
|
float: 'left'
|
||||||
});
|
});
|
||||||
} else if (self.options.type == 'range') {
|
} else if (self.options.type == 'range') {
|
||||||
that.$input[i] = new Ox.Range(v)
|
that.$input[i] = Ox.Range(v)
|
||||||
.css({
|
.css({
|
||||||
float: 'left'
|
float: 'left'
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
that.$input[i] = new Ox.InputElement({
|
that.$input[i] = Ox.InputElement({
|
||||||
autocomplete: self.options.autocomplete[id],
|
autocomplete: self.options.autocomplete[id],
|
||||||
autocorrect: self.options.autocorrect[id],
|
autocorrect: self.options.autocorrect[id],
|
||||||
autosuggest: self.options.autosuggest[id],
|
autosuggest: self.options.autosuggest[id],
|
||||||
|
@ -1339,8 +1339,8 @@ Ox.Input_ = function(options, self) {
|
||||||
|
|
||||||
Ox.InputElement_ = function(options, self) {
|
Ox.InputElement_ = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element(
|
var that = Ox.Element(
|
||||||
options.type == 'textarea' ? 'textarea' : 'input', self
|
options.type == 'textarea' ? 'textarea' : 'input', self
|
||||||
)
|
)
|
||||||
.defaults({
|
.defaults({
|
||||||
|
@ -1388,7 +1388,7 @@ Ox.InputElement_ = function(options, self) {
|
||||||
|
|
||||||
if (self.options.autosuggest) {
|
if (self.options.autosuggest) {
|
||||||
self.autosuggestId = self.options.id + 'Menu'; // fixme: we do this in other places ... are we doing it the same way? var name?
|
self.autosuggestId = self.options.id + 'Menu'; // fixme: we do this in other places ... are we doing it the same way? var name?
|
||||||
self.$autosuggestMenu = new Ox.Menu({
|
self.$autosuggestMenu = Ox.Menu({
|
||||||
element: that.$element,
|
element: that.$element,
|
||||||
id: self.autosuggestId,
|
id: self.autosuggestId,
|
||||||
offset: {
|
offset: {
|
||||||
|
@ -1663,8 +1663,8 @@ Ox.Range_ = function(options, self) {
|
||||||
/*
|
/*
|
||||||
init
|
init
|
||||||
*/
|
*/
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
animate: false,
|
animate: false,
|
||||||
arrows: false,
|
arrows: false,
|
||||||
|
@ -1715,7 +1715,7 @@ Ox.Range_ = function(options, self) {
|
||||||
.click(clickArrowDec)
|
.click(clickArrowDec)
|
||||||
.appendTo(that.$element);
|
.appendTo(that.$element);
|
||||||
}
|
}
|
||||||
var $track = new Ox.Element()
|
var $track = Ox.Element()
|
||||||
.addClass('OxTrack')
|
.addClass('OxTrack')
|
||||||
.mousedown(clickTrack)
|
.mousedown(clickTrack)
|
||||||
.appendTo(that.$element);
|
.appendTo(that.$element);
|
||||||
|
|
|
@ -14,8 +14,8 @@ Ox.InputGroup <f:Ox.Element> InputGroup Object
|
||||||
@*/
|
@*/
|
||||||
|
|
||||||
Ox.InputGroup = function(options, self) {
|
Ox.InputGroup = function(options, self) {
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
id: '',
|
id: '',
|
||||||
inputs: [],
|
inputs: [],
|
||||||
|
@ -42,7 +42,7 @@ Ox.InputGroup = function(options, self) {
|
||||||
|
|
||||||
self.options.separators.forEach(function(v, i) {
|
self.options.separators.forEach(function(v, i) {
|
||||||
self.options.id == 'debug' && Ox.print('separator #' + i + ' ' + self.options.inputs[i].options('id') + ' ' + self.options.inputs[i].options('width'))
|
self.options.id == 'debug' && Ox.print('separator #' + i + ' ' + self.options.inputs[i].options('id') + ' ' + self.options.inputs[i].options('width'))
|
||||||
self.$separator[i] = new Ox.Label({
|
self.$separator[i] = Ox.Label({
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
title: v.title,
|
title: v.title,
|
||||||
width: v.width + 32
|
width: v.width + 32
|
||||||
|
|
|
@ -9,8 +9,8 @@ Ox.Label <f:Ox.Element> Label Object
|
||||||
@*/
|
@*/
|
||||||
Ox.Label = function(options, self) {
|
Ox.Label = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
disabled: false,
|
disabled: false,
|
||||||
id: '',
|
id: '',
|
||||||
|
@ -36,9 +36,9 @@ Ox.Label = function(options, self) {
|
||||||
if (key == 'title') {
|
if (key == 'title') {
|
||||||
that.html(value);
|
that.html(value);
|
||||||
} else if (key == 'width') {
|
} else if (key == 'width') {
|
||||||
that.css({width: self.options.width - 14 + 'px'})
|
that.css({width: self.options.width - 14 + 'px'});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
|
|
|
@ -14,10 +14,9 @@ Ox.OptionGroup = function(items, min, max, property) {
|
||||||
/*
|
/*
|
||||||
to be used by ButtonGroup, CheckboxGroup, Select and Menu
|
to be used by ButtonGroup, CheckboxGroup, Select and Menu
|
||||||
*/
|
*/
|
||||||
|
var length = items.length;
|
||||||
var property = property || 'checked'
|
property = property || 'checked';
|
||||||
length = items.length,
|
max = max == -1 ? length : max;
|
||||||
max = max == -1 ? length : max;
|
|
||||||
|
|
||||||
function getLastBefore(pos) {
|
function getLastBefore(pos) {
|
||||||
// returns the position of the last checked item before position pos
|
// returns the position of the last checked item before position pos
|
||||||
|
@ -47,7 +46,7 @@ Ox.OptionGroup = function(items, min, max, property) {
|
||||||
if (item[property]) {
|
if (item[property]) {
|
||||||
num++;
|
num++;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
return num;
|
return num;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,8 +16,8 @@ Ox.Picker <f:Ox.Element> Picker Object
|
||||||
|
|
||||||
Ox.Picker = function(options, self) {
|
Ox.Picker = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
element: null,
|
element: null,
|
||||||
elementHeight: 128,
|
elementHeight: 128,
|
||||||
|
@ -27,7 +27,7 @@ Ox.Picker = function(options, self) {
|
||||||
})
|
})
|
||||||
.options(options || {});
|
.options(options || {});
|
||||||
|
|
||||||
self.$selectButton = new Ox.Button({
|
self.$selectButton = Ox.Button({
|
||||||
overlap: self.options.overlap,
|
overlap: self.options.overlap,
|
||||||
title: 'select',
|
title: 'select',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
|
@ -35,7 +35,7 @@ Ox.Picker = function(options, self) {
|
||||||
.click(showMenu)
|
.click(showMenu)
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
self.$menu = new Ox.Element()
|
self.$menu = Ox.Element()
|
||||||
.addClass('OxPicker')
|
.addClass('OxPicker')
|
||||||
.css({
|
.css({
|
||||||
width: self.options.elementWidth + 'px',
|
width: self.options.elementWidth + 'px',
|
||||||
|
@ -49,18 +49,18 @@ Ox.Picker = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(self.$menu);
|
.appendTo(self.$menu);
|
||||||
|
|
||||||
self.$bar = new Ox.Bar({
|
self.$bar = Ox.Bar({
|
||||||
orientation: 'horizontal',
|
orientation: 'horizontal',
|
||||||
size: 24
|
size: 24
|
||||||
})
|
})
|
||||||
.appendTo(self.$menu);
|
.appendTo(self.$menu);
|
||||||
|
|
||||||
that.$label = new Ox.Label({
|
that.$label = Ox.Label({
|
||||||
width: self.options.elementWidth - 60
|
width: self.options.elementWidth - 60
|
||||||
})
|
})
|
||||||
.appendTo(self.$bar);
|
.appendTo(self.$bar);
|
||||||
|
|
||||||
self.$doneButton = new Ox.Button({
|
self.$doneButton = Ox.Button({
|
||||||
title: 'Done',
|
title: 'Done',
|
||||||
width: 48
|
width: 48
|
||||||
})
|
})
|
||||||
|
@ -81,7 +81,7 @@ Ox.Picker = function(options, self) {
|
||||||
WebkitBorderRadius: '8px'
|
WebkitBorderRadius: '8px'
|
||||||
});
|
});
|
||||||
that.triggerEvent('hide');
|
that.triggerEvent('hide');
|
||||||
};
|
}
|
||||||
|
|
||||||
function showMenu() {
|
function showMenu() {
|
||||||
var offset = that.offset(),
|
var offset = that.offset(),
|
||||||
|
@ -101,7 +101,7 @@ Ox.Picker = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(Ox.UI.$body);
|
.appendTo(Ox.UI.$body);
|
||||||
that.triggerEvent('show');
|
that.triggerEvent('show');
|
||||||
};
|
}
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
|
|
|
@ -13,22 +13,21 @@ Ox.PlaceInput <f:Ox.FormElementGroup> PlaceInput Object
|
||||||
|
|
||||||
Ox.PlaceInput = function(options, self) {
|
Ox.PlaceInput = function(options, self) {
|
||||||
|
|
||||||
var self = $.extend(self || {}, {
|
var that;
|
||||||
|
self = $.extend(self || {}, {
|
||||||
options: $.extend({
|
options: $.extend({
|
||||||
id: '',
|
id: '',
|
||||||
value: 'United States'
|
value: 'United States'
|
||||||
}, options)
|
}, options)
|
||||||
}),
|
});
|
||||||
that;
|
that = Ox.FormElementGroup({
|
||||||
|
|
||||||
that = new Ox.FormElementGroup({
|
|
||||||
id: self.options.id,
|
id: self.options.id,
|
||||||
elements: [
|
elements: [
|
||||||
new Ox.Input({
|
Ox.Input({
|
||||||
id: 'input',
|
id: 'input',
|
||||||
value: self.options.value
|
value: self.options.value
|
||||||
}),
|
}),
|
||||||
new Ox.PlacePicker({
|
Ox.PlacePicker({
|
||||||
id: 'picker',
|
id: 'picker',
|
||||||
overlap: 'left',
|
overlap: 'left',
|
||||||
value: self.options.value
|
value: self.options.value
|
||||||
|
|
|
@ -13,21 +13,21 @@ Ox.PlacePicker <f:Ox.Element> PlacePicker Object
|
||||||
|
|
||||||
Ox.PlacePicker = function(options, self) {
|
Ox.PlacePicker = function(options, self) {
|
||||||
|
|
||||||
var self = $.extend(self || {}, {
|
var that;
|
||||||
|
self = $.extend(self || {}, {
|
||||||
options: $.extend({
|
options: $.extend({
|
||||||
id: '',
|
id: '',
|
||||||
value: 'United States'
|
value: 'United States'
|
||||||
}, options)
|
}, options)
|
||||||
}),
|
});
|
||||||
that;
|
|
||||||
|
|
||||||
self.$element = new Ox.Element()
|
self.$element = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
width: '256px',
|
width: '256px',
|
||||||
height: '192px'
|
height: '192px'
|
||||||
})
|
})
|
||||||
.append(
|
.append(
|
||||||
self.$topBar = new Ox.Bar({
|
self.$topBar = Ox.Bar({
|
||||||
size: 16
|
size: 16
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
@ -35,7 +35,7 @@ Ox.PlacePicker = function(options, self) {
|
||||||
WebkitBorderRadius: '0 8px 0 0'
|
WebkitBorderRadius: '0 8px 0 0'
|
||||||
})
|
})
|
||||||
.append(
|
.append(
|
||||||
self.$input = new Ox.Input({
|
self.$input = Ox.Input({
|
||||||
clear: true,
|
clear: true,
|
||||||
id: self.options.id + 'Input',
|
id: self.options.id + 'Input',
|
||||||
placeholder: 'Find',
|
placeholder: 'Find',
|
||||||
|
@ -45,18 +45,18 @@ Ox.PlacePicker = function(options, self) {
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
.append(
|
.append(
|
||||||
self.$container = new Ox.Element()
|
self.$container = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
width: '256px',
|
width: '256px',
|
||||||
height: '160px'
|
height: '160px'
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
.append(
|
.append(
|
||||||
self.$bottomBar = new Ox.Bar({
|
self.$bottomBar = Ox.Bar({
|
||||||
size: 16
|
size: 16
|
||||||
})
|
})
|
||||||
.append(
|
.append(
|
||||||
self.$range = new Ox.Range({
|
self.$range = Ox.Range({
|
||||||
arrows: true,
|
arrows: true,
|
||||||
id: self.options.id + 'Range',
|
id: self.options.id + 'Range',
|
||||||
max: 22,
|
max: 22,
|
||||||
|
@ -83,7 +83,7 @@ Ox.PlacePicker = function(options, self) {
|
||||||
WebkitBorderRadius: 0
|
WebkitBorderRadius: 0
|
||||||
});
|
});
|
||||||
|
|
||||||
that = new Ox.Picker({
|
that = Ox.Picker({
|
||||||
element: self.$element,
|
element: self.$element,
|
||||||
elementHeight: 192,
|
elementHeight: 192,
|
||||||
elementWidth: 256,
|
elementWidth: 256,
|
||||||
|
@ -93,7 +93,7 @@ Ox.PlacePicker = function(options, self) {
|
||||||
}, self)
|
}, self)
|
||||||
.bindEvent('show', showPicker);
|
.bindEvent('show', showPicker);
|
||||||
|
|
||||||
that.$label.bind('click', clickLabel)
|
that.$label.bind('click', clickLabel);
|
||||||
|
|
||||||
self.map = false;
|
self.map = false;
|
||||||
|
|
||||||
|
@ -118,7 +118,7 @@ Ox.PlacePicker = function(options, self) {
|
||||||
//Ox.print('findPlace', data);
|
//Ox.print('findPlace', data);
|
||||||
self.$map.find(data.value, function(place) {
|
self.$map.find(data.value, function(place) {
|
||||||
place && that.$label.html(place.geoname);
|
place && that.$label.html(place.geoname);
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function onSelect(event, data) {
|
function onSelect(event, data) {
|
||||||
|
@ -133,7 +133,7 @@ Ox.PlacePicker = function(options, self) {
|
||||||
|
|
||||||
function showPicker() {
|
function showPicker() {
|
||||||
if (!self.map) {
|
if (!self.map) {
|
||||||
self.$map = new Ox.Map({
|
self.$map = Ox.Map({
|
||||||
clickable: true,
|
clickable: true,
|
||||||
id: self.options.id + 'Map',
|
id: self.options.id + 'Map',
|
||||||
//places: [self.options.value]
|
//places: [self.options.value]
|
||||||
|
|
|
@ -26,8 +26,8 @@ Ox.Range <f:Ox.Element> Range Object
|
||||||
|
|
||||||
Ox.Range = function(options, self) {
|
Ox.Range = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
arrows: false,
|
arrows: false,
|
||||||
arrowStep: 1,
|
arrowStep: 1,
|
||||||
|
@ -66,7 +66,7 @@ Ox.Range = function(options, self) {
|
||||||
if (self.options.arrows) {
|
if (self.options.arrows) {
|
||||||
self.$arrows = [];
|
self.$arrows = [];
|
||||||
Ox.range(0, 2).forEach(function(i) {
|
Ox.range(0, 2).forEach(function(i) {
|
||||||
self.$arrows[i] = new Ox.Button({
|
self.$arrows[i] = Ox.Button({
|
||||||
overlap: i == 0 ? 'right' : 'left',
|
overlap: i == 0 ? 'right' : 'left',
|
||||||
title: self.options.arrowSymbols[i],
|
title: self.options.arrowSymbols[i],
|
||||||
type: 'image'
|
type: 'image'
|
||||||
|
@ -84,7 +84,7 @@ Ox.Range = function(options, self) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
self.$track = new Ox.Element()
|
self.$track = Ox.Element()
|
||||||
.addClass('OxTrack')
|
.addClass('OxTrack')
|
||||||
.css($.extend({
|
.css($.extend({
|
||||||
width: (self.trackSize - 2) + 'px'
|
width: (self.trackSize - 2) + 'px'
|
||||||
|
@ -235,7 +235,7 @@ Ox.Range = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function setValue(value, animate) {
|
function setValue(value, animate) {
|
||||||
var value = Ox.limit(value, self.options.min, self.options.max);
|
value = Ox.limit(value, self.options.min, self.options.max);
|
||||||
if (value != self.options.value) {
|
if (value != self.options.value) {
|
||||||
//time = getTime(self.options.value, value);
|
//time = getTime(self.options.value, value);
|
||||||
self.options.value = value;
|
self.options.value = value;
|
||||||
|
|
|
@ -24,8 +24,8 @@ Ox.Select <f:Ox.Element> Select Object
|
||||||
Ox.Select = function(options, self) {
|
Ox.Select = function(options, self) {
|
||||||
|
|
||||||
// fixme: selected item needs attribute "checked", not "selected" ... that's strange
|
// fixme: selected item needs attribute "checked", not "selected" ... that's strange
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({
|
var that = Ox.Element({
|
||||||
tooltip: options.tooltip || ''
|
tooltip: options.tooltip || ''
|
||||||
}, self)
|
}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
|
@ -57,7 +57,7 @@ Ox.Select = function(options, self) {
|
||||||
key_down: showMenu
|
key_down: showMenu
|
||||||
});
|
});
|
||||||
|
|
||||||
Ox.print('Ox.Select', self.options)
|
Ox.print('Ox.Select', self.options);
|
||||||
|
|
||||||
$.extend(self, {
|
$.extend(self, {
|
||||||
buttonId: self.options.id + 'Button',
|
buttonId: self.options.id + 'Button',
|
||||||
|
@ -66,7 +66,7 @@ Ox.Select = function(options, self) {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (self.options.selectable) {
|
if (self.options.selectable) {
|
||||||
self.optionGroup = new Ox.OptionGroup(
|
self.optionGroup = Ox.OptionGroup(
|
||||||
self.options.items,
|
self.options.items,
|
||||||
self.options.min,
|
self.options.min,
|
||||||
self.options.max
|
self.options.max
|
||||||
|
@ -87,7 +87,7 @@ Ox.Select = function(options, self) {
|
||||||
// that.focus();
|
// that.focus();
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
};
|
}
|
||||||
|
|
||||||
if (self.options.type == 'text') {
|
if (self.options.type == 'text') {
|
||||||
self.$title = $('<div>')
|
self.$title = $('<div>')
|
||||||
|
@ -105,7 +105,7 @@ Ox.Select = function(options, self) {
|
||||||
.appendTo(that.$element);
|
.appendTo(that.$element);
|
||||||
}
|
}
|
||||||
|
|
||||||
self.$button = new Ox.Button({
|
self.$button = Ox.Button({
|
||||||
id: self.buttonId,
|
id: self.buttonId,
|
||||||
style: 'symbol',
|
style: 'symbol',
|
||||||
title: 'select',
|
title: 'select',
|
||||||
|
@ -114,7 +114,7 @@ Ox.Select = function(options, self) {
|
||||||
.bindEvent('click', showMenu)
|
.bindEvent('click', showMenu)
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
self.$menu = new Ox.Menu({
|
self.$menu = Ox.Menu({
|
||||||
element: self.$title || self.$button,
|
element: self.$title || self.$button,
|
||||||
id: self.menuId,
|
id: self.menuId,
|
||||||
items: [self.options.selectable ? {
|
items: [self.options.selectable ? {
|
||||||
|
|
|
@ -16,8 +16,8 @@ Ox.TimeInput <f:Ox.Element> TimeInput Object
|
||||||
Ox.TimeInput = function(options, self) {
|
Ox.TimeInput = function(options, self) {
|
||||||
|
|
||||||
// fixme: seconds get set even if options.seconds is false
|
// fixme: seconds get set even if options.seconds is false
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
ampm: false,
|
ampm: false,
|
||||||
seconds: false,
|
seconds: false,
|
||||||
|
@ -46,7 +46,7 @@ Ox.TimeInput = function(options, self) {
|
||||||
self.values = getValues();
|
self.values = getValues();
|
||||||
|
|
||||||
self.$input = {
|
self.$input = {
|
||||||
hours: new Ox.Input({
|
hours: Ox.Input({
|
||||||
autocomplete: $.map(self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24), function(v) {
|
autocomplete: $.map(self.options.ampm ? Ox.range(1, 13) : Ox.range(0, 24), function(v) {
|
||||||
return Ox.pad(v, 2);
|
return Ox.pad(v, 2);
|
||||||
}),
|
}),
|
||||||
|
@ -57,7 +57,7 @@ Ox.TimeInput = function(options, self) {
|
||||||
value: self.values.hours,
|
value: self.values.hours,
|
||||||
width: 32//self.options.width.hours
|
width: 32//self.options.width.hours
|
||||||
}),
|
}),
|
||||||
minutes: new Ox.Input({
|
minutes: Ox.Input({
|
||||||
autocomplete: $.map(Ox.range(0, 60), function(v) {
|
autocomplete: $.map(Ox.range(0, 60), function(v) {
|
||||||
return Ox.pad(v, 2);
|
return Ox.pad(v, 2);
|
||||||
}),
|
}),
|
||||||
|
@ -68,7 +68,7 @@ Ox.TimeInput = function(options, self) {
|
||||||
value: self.values.minutes,
|
value: self.values.minutes,
|
||||||
width: 32//self.options.width.minutes
|
width: 32//self.options.width.minutes
|
||||||
}),
|
}),
|
||||||
seconds: new Ox.Input({
|
seconds: Ox.Input({
|
||||||
autocomplete: $.map(Ox.range(0, 60), function(v) {
|
autocomplete: $.map(Ox.range(0, 60), function(v) {
|
||||||
return Ox.pad(v, 2);
|
return Ox.pad(v, 2);
|
||||||
}),
|
}),
|
||||||
|
@ -79,7 +79,7 @@ Ox.TimeInput = function(options, self) {
|
||||||
value: self.values.seconds,
|
value: self.values.seconds,
|
||||||
width: 32//self.options.width.seconds
|
width: 32//self.options.width.seconds
|
||||||
}),
|
}),
|
||||||
milliseconds: new Ox.Input({
|
milliseconds: Ox.Input({
|
||||||
autocomplete: $.map(Ox.range(0, 1000), function(v) {
|
autocomplete: $.map(Ox.range(0, 1000), function(v) {
|
||||||
return Ox.pad(v, 3);
|
return Ox.pad(v, 3);
|
||||||
}),
|
}),
|
||||||
|
@ -90,7 +90,7 @@ Ox.TimeInput = function(options, self) {
|
||||||
value: self.values.milliseconds,
|
value: self.values.milliseconds,
|
||||||
width: 40//self.options.width.milliseconds
|
width: 40//self.options.width.milliseconds
|
||||||
}),
|
}),
|
||||||
ampm: new Ox.Input({
|
ampm: Ox.Input({
|
||||||
autocomplete: ['AM', 'PM'],
|
autocomplete: ['AM', 'PM'],
|
||||||
autocompleteReplace: true,
|
autocompleteReplace: true,
|
||||||
autocompleteReplaceCorrect: true,
|
autocompleteReplaceCorrect: true,
|
||||||
|
@ -100,7 +100,7 @@ Ox.TimeInput = function(options, self) {
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
that = new Ox.InputGroup($.extend(self.options, {
|
that = Ox.InputGroup($.extend(self.options, {
|
||||||
inputs: $.merge($.merge($.merge([
|
inputs: $.merge($.merge($.merge([
|
||||||
self.$input.hours,
|
self.$input.hours,
|
||||||
self.$input.minutes,
|
self.$input.minutes,
|
||||||
|
@ -169,7 +169,7 @@ Ox.TimeInput = function(options, self) {
|
||||||
if (key == 'value') {
|
if (key == 'value') {
|
||||||
setValues();
|
setValues();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
|
|
|
@ -20,8 +20,8 @@ Ox.IconItem = function(options, self) {
|
||||||
|
|
||||||
//Ox.print('IconItem', options, self)
|
//Ox.print('IconItem', options, self)
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
height: 128,
|
height: 128,
|
||||||
id: '',
|
id: '',
|
||||||
|
@ -31,7 +31,7 @@ Ox.IconItem = function(options, self) {
|
||||||
width: 128,
|
width: 128,
|
||||||
url: ''
|
url: ''
|
||||||
})
|
})
|
||||||
.options(options || {})
|
.options(options || {});
|
||||||
|
|
||||||
$.extend(self, {
|
$.extend(self, {
|
||||||
fontSize: self.options.size == 64 ? 6 : 9,
|
fontSize: self.options.size == 64 ? 6 : 9,
|
||||||
|
|
|
@ -23,8 +23,8 @@ Ox.IconList <f:Ox.Element> IconList Object
|
||||||
|
|
||||||
Ox.IconList = function(options, self) {
|
Ox.IconList = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
centerSelection: false,
|
centerSelection: false,
|
||||||
draggable: true,
|
draggable: true,
|
||||||
|
@ -46,7 +46,7 @@ Ox.IconList = function(options, self) {
|
||||||
itemWidth: self.options.size
|
itemWidth: self.options.size
|
||||||
});
|
});
|
||||||
|
|
||||||
that.$element = new Ox.List({
|
that.$element = Ox.List({
|
||||||
centered: self.options.centered,
|
centered: self.options.centered,
|
||||||
construct: constructItem,
|
construct: constructItem,
|
||||||
draggable: self.options.draggable,
|
draggable: self.options.draggable,
|
||||||
|
@ -55,10 +55,9 @@ Ox.IconList = function(options, self) {
|
||||||
items: self.options.items,
|
items: self.options.items,
|
||||||
itemWidth: self.itemWidth,
|
itemWidth: self.itemWidth,
|
||||||
keys: self.options.keys,
|
keys: self.options.keys,
|
||||||
orientation: self.options.orientation,
|
|
||||||
keys: self.options.keys,
|
|
||||||
max: self.options.max,
|
max: self.options.max,
|
||||||
min: self.options.min,
|
min: self.options.min,
|
||||||
|
orientation: self.options.orientation,
|
||||||
selected: self.options.selected,
|
selected: self.options.selected,
|
||||||
size: self.options.size,
|
size: self.options.size,
|
||||||
sort: self.options.sort,
|
sort: self.options.sort,
|
||||||
|
@ -81,7 +80,7 @@ Ox.IconList = function(options, self) {
|
||||||
self.options.item(data, self.options.sort, self.options.size) :
|
self.options.item(data, self.options.sort, self.options.size) :
|
||||||
{height: 8, width: 5},
|
{height: 8, width: 5},
|
||||||
ratio = data.width / data.height;
|
ratio = data.width / data.height;
|
||||||
return new Ox.IconItem($.extend(data, {
|
return Ox.IconItem($.extend(data, {
|
||||||
height: Math.round(self.options.size / (ratio <= 1 ? 1 : ratio)),
|
height: Math.round(self.options.size / (ratio <= 1 ? 1 : ratio)),
|
||||||
size: self.options.size,
|
size: self.options.size,
|
||||||
width: Math.round(self.options.size * (ratio >= 1 ? 1 : ratio))
|
width: Math.round(self.options.size * (ratio >= 1 ? 1 : ratio))
|
||||||
|
@ -115,7 +114,7 @@ Ox.IconList = function(options, self) {
|
||||||
} else if (key == 'selected') {
|
} else if (key == 'selected') {
|
||||||
that.$element.options(key, value);
|
that.$element.options(key, value);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
/*@
|
/*@
|
||||||
closePreview <f> close preview
|
closePreview <f> close preview
|
||||||
|
@ -189,7 +188,7 @@ Ox.IconList = function(options, self) {
|
||||||
that.$element.value(id, key, value);
|
that.$element.value(id, key, value);
|
||||||
return that;
|
return that;
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
|
|
|
@ -17,8 +17,8 @@ Ox.ItemInput <f:Ox.Element> ItemInput Object
|
||||||
|
|
||||||
Ox.ItemInput = function(options, self) {
|
Ox.ItemInput = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
value: '',
|
value: '',
|
||||||
|
@ -27,7 +27,6 @@ Ox.ItemInput = function(options, self) {
|
||||||
})
|
})
|
||||||
.options(options || {});
|
.options(options || {});
|
||||||
|
|
||||||
|
|
||||||
self.$input = Ox.Input({
|
self.$input = Ox.Input({
|
||||||
changeOnKeypress: true,
|
changeOnKeypress: true,
|
||||||
height: self.options.height,
|
height: self.options.height,
|
||||||
|
@ -130,7 +129,7 @@ Ox.ItemInput = function(options, self) {
|
||||||
|
|
||||||
/*
|
/*
|
||||||
that.append(
|
that.append(
|
||||||
$input = new Ox.Input({
|
$input = Ox.Input({
|
||||||
height: self.options.height,
|
height: self.options.height,
|
||||||
style: 'square',
|
style: 'square',
|
||||||
type: self.options.type,
|
type: self.options.type,
|
||||||
|
@ -144,15 +143,15 @@ Ox.ItemInput = function(options, self) {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
.append(new Ox.Element()
|
.append(Ox.Element()
|
||||||
.append(new Ox.Button({type: 'text', title: 'Cancel'})
|
.append(Ox.Button({type: 'text', title: 'Cancel'})
|
||||||
.css('width', '42%')
|
.css('width', '42%')
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
'click': function() {
|
'click': function() {
|
||||||
that.triggerEvent('cancel');
|
that.triggerEvent('cancel');
|
||||||
}
|
}
|
||||||
}))
|
}))
|
||||||
.append(new Ox.Button({type: 'text', title: 'Save'})
|
.append(Ox.Button({type: 'text', title: 'Save'})
|
||||||
.css('width', '42%')
|
.css('width', '42%')
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
'click': function() {
|
'click': function() {
|
||||||
|
@ -172,4 +171,4 @@ Ox.ItemInput = function(options, self) {
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
}
|
};
|
||||||
|
|
|
@ -41,8 +41,8 @@ Ox.List <f:Ox.Element> List Element
|
||||||
|
|
||||||
Ox.List = function(options, self) {
|
Ox.List = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Container({}, self)
|
var that = Ox.Container({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
centered: false,
|
centered: false,
|
||||||
construct: null,
|
construct: null,
|
||||||
|
@ -274,11 +274,11 @@ Ox.List = function(options, self) {
|
||||||
|
|
||||||
function constructEmptyPage(page) {
|
function constructEmptyPage(page) {
|
||||||
//Ox.print('cEP', page)
|
//Ox.print('cEP', page)
|
||||||
var i, $page = new Ox.ListPage().css(getPageCSS(page));
|
var i, $page = Ox.ListPage().css(getPageCSS(page));
|
||||||
for (i = 0; i < getPageLength(page); i++
|
for (i = 0; i < getPageLength(page); i++
|
||||||
) {
|
) {
|
||||||
// fixme: why does chainging fail here?
|
// fixme: why does chainging fail here?
|
||||||
new Ox.ListItem({
|
Ox.ListItem({
|
||||||
construct: self.options.construct
|
construct: self.options.construct
|
||||||
}).appendTo($page);
|
}).appendTo($page);
|
||||||
}
|
}
|
||||||
|
@ -427,7 +427,7 @@ Ox.List = function(options, self) {
|
||||||
visibleItems = Math.ceil(height / self.options.itemHeight);
|
visibleItems = Math.ceil(height / self.options.itemHeight);
|
||||||
if (self.listLength < visibleItems) {
|
if (self.listLength < visibleItems) {
|
||||||
Ox.range(self.listLength, visibleItems).forEach(function(v) {
|
Ox.range(self.listLength, visibleItems).forEach(function(v) {
|
||||||
var $item = new Ox.ListItem({
|
var $item = Ox.ListItem({
|
||||||
construct: self.options.construct,
|
construct: self.options.construct,
|
||||||
});
|
});
|
||||||
$item.addClass('OxEmpty').removeClass('OxTarget');
|
$item.addClass('OxEmpty').removeClass('OxTarget');
|
||||||
|
@ -472,7 +472,7 @@ Ox.List = function(options, self) {
|
||||||
function getAbove() {
|
function getAbove() {
|
||||||
var pos = -1;
|
var pos = -1;
|
||||||
if (self.selected.length) {
|
if (self.selected.length) {
|
||||||
pos = self.selected[self.selected.length - 1] - self.rowLength
|
pos = self.selected[self.selected.length - 1] - self.rowLength;
|
||||||
if (pos < 0) {
|
if (pos < 0) {
|
||||||
pos = -1;
|
pos = -1;
|
||||||
}
|
}
|
||||||
|
@ -543,7 +543,7 @@ Ox.List = function(options, self) {
|
||||||
} : {
|
} : {
|
||||||
top: (page * self.pageHeight + self.listMargin / 2) + 'px',
|
top: (page * self.pageHeight + self.listMargin / 2) + 'px',
|
||||||
width: self.pageWidth + 'px'
|
width: self.pageWidth + 'px'
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPageHeight() {
|
function getPageHeight() {
|
||||||
|
@ -622,7 +622,7 @@ Ox.List = function(options, self) {
|
||||||
function getRowLength() {
|
function getRowLength() {
|
||||||
return self.options.orientation == 'both' ?
|
return self.options.orientation == 'both' ?
|
||||||
Math.floor((getWidth() - self.listMargin) /
|
Math.floor((getWidth() - self.listMargin) /
|
||||||
(self.options.itemWidth + self.itemMargin)) : 1
|
(self.options.itemWidth + self.itemMargin)) : 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getScrollPosition() {
|
function getScrollPosition() {
|
||||||
|
@ -703,10 +703,10 @@ Ox.List = function(options, self) {
|
||||||
sort: self.options.sort
|
sort: self.options.sort
|
||||||
}, function(result) {
|
}, function(result) {
|
||||||
var $emptyPage = Ox.clone(self.$pages[page]);
|
var $emptyPage = Ox.clone(self.$pages[page]);
|
||||||
self.$pages[page] = new Ox.ListPage().css(getPageCSS(page));
|
self.$pages[page] = Ox.ListPage().css(getPageCSS(page));
|
||||||
result.data.items.forEach(function(v, i) {
|
result.data.items.forEach(function(v, i) {
|
||||||
var pos = offset + i;
|
var pos = offset + i;
|
||||||
self.$items[pos] = new Ox.ListItem({
|
self.$items[pos] = Ox.ListItem({
|
||||||
construct: self.options.construct,
|
construct: self.options.construct,
|
||||||
data: v,
|
data: v,
|
||||||
draggable: self.options.draggable,
|
draggable: self.options.draggable,
|
||||||
|
@ -1342,7 +1342,7 @@ Ox.List = function(options, self) {
|
||||||
});
|
});
|
||||||
items.forEach(function(item, i) {
|
items.forEach(function(item, i) {
|
||||||
var $item;
|
var $item;
|
||||||
$items.push($item = new Ox.ListItem({
|
$items.push($item = Ox.ListItem({
|
||||||
construct: self.options.construct,
|
construct: self.options.construct,
|
||||||
data: item,
|
data: item,
|
||||||
draggable: self.options.draggable,
|
draggable: self.options.draggable,
|
||||||
|
@ -1383,7 +1383,7 @@ Ox.List = function(options, self) {
|
||||||
.empty()
|
.empty()
|
||||||
.addClass('OxEdit');
|
.addClass('OxEdit');
|
||||||
|
|
||||||
$input = new Ox.ItemInput({
|
$input = Ox.ItemInput({
|
||||||
type: 'textarea',
|
type: 'textarea',
|
||||||
value: item.value,
|
value: item.value,
|
||||||
height: height,
|
height: height,
|
||||||
|
|
|
@ -18,8 +18,8 @@ Ox.ListItem <f:Ox.Element> ListItem Object
|
||||||
|
|
||||||
Ox.ListItem = function(options, self) {
|
Ox.ListItem = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
construct: function() {},
|
construct: function() {},
|
||||||
data: {},
|
data: {},
|
||||||
|
@ -52,7 +52,7 @@ Ox.ListItem = function(options, self) {
|
||||||
if (key == 'data') {
|
if (key == 'data') {
|
||||||
constructItem(true);
|
constructItem(true);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
|
|
|
@ -8,8 +8,8 @@ Ox.ListPage <f:Ox.Element> ListPage Object
|
||||||
self <o> shared private variable
|
self <o> shared private variable
|
||||||
@*/
|
@*/
|
||||||
Ox.ListPage = function(options, self) {
|
Ox.ListPage = function(options, self) {
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.addClass('OxPage');
|
.addClass('OxPage');
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
|
@ -39,8 +39,8 @@ Ox.TextList = function(options, self) {
|
||||||
|
|
||||||
// fixme: rename to TableList
|
// fixme: rename to TableList
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
columns: [],
|
columns: [],
|
||||||
columnsMovable: false,
|
columnsMovable: false,
|
||||||
|
@ -114,7 +114,7 @@ Ox.TextList = function(options, self) {
|
||||||
if (!Ox.isUndefined(v.position)) {
|
if (!Ox.isUndefined(v.position)) {
|
||||||
self.visibleColumns[v.position] = v;
|
self.visibleColumns[v.position] = v;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
$.extend(self, {
|
$.extend(self, {
|
||||||
columnWidths: $.map(self.visibleColumns, function(v, i) {
|
columnWidths: $.map(self.visibleColumns, function(v, i) {
|
||||||
return v.width;
|
return v.width;
|
||||||
|
@ -132,11 +132,11 @@ Ox.TextList = function(options, self) {
|
||||||
// Head
|
// Head
|
||||||
|
|
||||||
if (self.options.columnsVisible) {
|
if (self.options.columnsVisible) {
|
||||||
that.$bar = new Ox.Bar({
|
that.$bar = Ox.Bar({
|
||||||
orientation: 'horizontal',
|
orientation: 'horizontal',
|
||||||
size: 16
|
size: 16
|
||||||
}).appendTo(that);
|
}).appendTo(that);
|
||||||
that.$head = new Ox.Container()
|
that.$head = Ox.Container()
|
||||||
.addClass('OxHead')
|
.addClass('OxHead')
|
||||||
.css({
|
.css({
|
||||||
right: self.options.scrollbarVisible ? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
|
right: self.options.scrollbarVisible ? Ox.UI.SCROLLBAR_SIZE + 'px' : 0
|
||||||
|
@ -145,7 +145,7 @@ Ox.TextList = function(options, self) {
|
||||||
that.$head.$content.addClass('OxTitles');
|
that.$head.$content.addClass('OxTitles');
|
||||||
constructHead();
|
constructHead();
|
||||||
if (self.options.columnsRemovable) {
|
if (self.options.columnsRemovable) {
|
||||||
that.$select = new Ox.Select({
|
that.$select = Ox.Select({
|
||||||
id: self.options.id + 'SelectColumns',
|
id: self.options.id + 'SelectColumns',
|
||||||
items: $.map(self.options.columns, function(v, i) {
|
items: $.map(self.options.columns, function(v, i) {
|
||||||
return {
|
return {
|
||||||
|
@ -166,7 +166,7 @@ Ox.TextList = function(options, self) {
|
||||||
|
|
||||||
// Body
|
// Body
|
||||||
|
|
||||||
that.$body = new Ox.List({
|
that.$body = Ox.List({
|
||||||
construct: constructItem,
|
construct: constructItem,
|
||||||
id: self.options.id,
|
id: self.options.id,
|
||||||
items: self.options.items,
|
items: self.options.items,
|
||||||
|
@ -299,7 +299,7 @@ Ox.TextList = function(options, self) {
|
||||||
var $order, $resize, $left, $center, $right;
|
var $order, $resize, $left, $center, $right;
|
||||||
offset += self.columnWidths[i];
|
offset += self.columnWidths[i];
|
||||||
self.columnOffsets[i] = offset - self.columnWidths[i] / 2;
|
self.columnOffsets[i] = offset - self.columnWidths[i] / 2;
|
||||||
that.$titles[i] = new Ox.Element()
|
that.$titles[i] = Ox.Element()
|
||||||
.addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
|
.addClass('OxTitle OxColumn' + Ox.toTitleCase(v.id))
|
||||||
.css({
|
.css({
|
||||||
width: (self.columnWidths[i] - 9) + 'px',
|
width: (self.columnWidths[i] - 9) + 'px',
|
||||||
|
@ -338,7 +338,7 @@ Ox.TextList = function(options, self) {
|
||||||
$(this).prev().trigger('click')
|
$(this).prev().trigger('click')
|
||||||
})
|
})
|
||||||
.appendTo(that.$head.$content.$element);
|
.appendTo(that.$head.$content.$element);
|
||||||
$resize = new Ox.Element()
|
$resize = Ox.Element()
|
||||||
.addClass('OxResize')
|
.addClass('OxResize')
|
||||||
.appendTo(that.$head.$content.$element);
|
.appendTo(that.$head.$content.$element);
|
||||||
// if columns are resizable, bind click and drag events
|
// if columns are resizable, bind click and drag events
|
||||||
|
@ -741,7 +741,7 @@ Ox.TextList = function(options, self) {
|
||||||
.css({
|
.css({
|
||||||
width: width + 'px'
|
width: width + 'px'
|
||||||
});
|
});
|
||||||
$input = new Ox.Input({
|
$input = Ox.Input({
|
||||||
autovalidate: column.input ? column.input.autovalidate : null,
|
autovalidate: column.input ? column.input.autovalidate : null,
|
||||||
style: 'square',
|
style: 'square',
|
||||||
value: html,
|
value: html,
|
||||||
|
|
|
@ -19,8 +19,8 @@ Ox.TreeList = function(options, self) {
|
||||||
|
|
||||||
// fixme: expanding the last item should cause some scroll
|
// fixme: expanding the last item should cause some scroll
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
data: null,
|
data: null,
|
||||||
items: [],
|
items: [],
|
||||||
|
@ -40,7 +40,7 @@ Ox.TreeList = function(options, self) {
|
||||||
//Ox.print('d', self.options.data, 'i', self.options.items)
|
//Ox.print('d', self.options.data, 'i', self.options.items)
|
||||||
}
|
}
|
||||||
|
|
||||||
that.$element = new Ox.List({
|
that.$element = Ox.List({
|
||||||
construct: constructItem,
|
construct: constructItem,
|
||||||
itemHeight: 16,
|
itemHeight: 16,
|
||||||
items: parseItems(),
|
items: parseItems(),
|
||||||
|
@ -114,9 +114,9 @@ Ox.TreeList = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getItemById(id, items, level) {
|
function getItemById(id, items, level) {
|
||||||
var items = items || self.options.items,
|
var ret = null;
|
||||||
level = level || 0,
|
items = items || self.options.items;
|
||||||
ret = null;
|
level = level || 0;
|
||||||
Ox.forEach(items, function(item) {
|
Ox.forEach(items, function(item) {
|
||||||
if (item.id == id) {
|
if (item.id == id) {
|
||||||
ret = $.extend(item, {
|
ret = $.extend(item, {
|
||||||
|
@ -151,15 +151,15 @@ Ox.TreeList = function(options, self) {
|
||||||
type == 'function' ?
|
type == 'function' ?
|
||||||
value.toString().split('{')[0] :
|
value.toString().split('{')[0] :
|
||||||
JSON.stringify(value)
|
JSON.stringify(value)
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
return ret;
|
return ret;
|
||||||
}
|
}
|
||||||
|
|
||||||
function parseItems(items, level) {
|
function parseItems(items, level) {
|
||||||
var items = items || self.options.items,
|
var ret = [];
|
||||||
level = level || 0,
|
items = items || self.options.items;
|
||||||
ret = [];
|
level = level || 0;
|
||||||
items.forEach(function(item, i) {
|
items.forEach(function(item, i) {
|
||||||
var item_ = $.extend({
|
var item_ = $.extend({
|
||||||
level: level
|
level: level
|
||||||
|
|
|
@ -16,8 +16,8 @@ Ox.ListMap <f:Ox.Element> ListMap Object
|
||||||
|
|
||||||
Ox.ListMap = function(options, self) {
|
Ox.ListMap = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
addPlace: null,
|
addPlace: null,
|
||||||
editPlace: null,
|
editPlace: null,
|
||||||
|
|
|
@ -89,7 +89,7 @@ Ox.Map <function> Basic map object
|
||||||
Ox.Map = function(options, self) {
|
Ox.Map = function(options, self) {
|
||||||
|
|
||||||
self = self || {};
|
self = self || {};
|
||||||
var that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
// fixme: isClickable? hasZoombar?
|
// fixme: isClickable? hasZoombar?
|
||||||
clickable: false,
|
clickable: false,
|
||||||
|
@ -200,7 +200,7 @@ Ox.Map = function(options, self) {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (self.options.toolbar) {
|
if (self.options.toolbar) {
|
||||||
self.$toolbar = new Ox.Bar({
|
self.$toolbar = Ox.Bar({
|
||||||
size: 24
|
size: 24
|
||||||
})
|
})
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
@ -219,7 +219,7 @@ Ox.Map = function(options, self) {
|
||||||
.css({float: 'left', margin: '4px'})
|
.css({float: 'left', margin: '4px'})
|
||||||
.appendTo(self.$toolbar);
|
.appendTo(self.$toolbar);
|
||||||
/*
|
/*
|
||||||
self.$labelsButton = new Ox.Checkbox({
|
self.$labelsButton = Ox.Checkbox({
|
||||||
title: 'Labels',
|
title: 'Labels',
|
||||||
width: 64
|
width: 64
|
||||||
})
|
})
|
||||||
|
@ -229,7 +229,7 @@ Ox.Map = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(self.$toolbar)
|
.appendTo(self.$toolbar)
|
||||||
*/
|
*/
|
||||||
self.$findInput = new Ox.Input({
|
self.$findInput = Ox.Input({
|
||||||
clear: true,
|
clear: true,
|
||||||
placeholder: self.options.findPlaceholder,
|
placeholder: self.options.findPlaceholder,
|
||||||
width: 192
|
width: 192
|
||||||
|
@ -241,7 +241,7 @@ Ox.Map = function(options, self) {
|
||||||
.appendTo(self.$toolbar)
|
.appendTo(self.$toolbar)
|
||||||
}
|
}
|
||||||
|
|
||||||
self.$map = new Ox.Element()
|
self.$map = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
left: 0,
|
left: 0,
|
||||||
top: self.options.toolbar * 24 + 'px',
|
top: self.options.toolbar * 24 + 'px',
|
||||||
|
@ -251,7 +251,7 @@ Ox.Map = function(options, self) {
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
if (self.options.zoombar) {
|
if (self.options.zoombar) {
|
||||||
self.$zoombar = new Ox.Bar({
|
self.$zoombar = Ox.Bar({
|
||||||
size: 16
|
size: 16
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
@ -261,7 +261,7 @@ Ox.Map = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (self.options.statusbar) {
|
if (self.options.statusbar) {
|
||||||
self.$statusbar = new Ox.Bar({
|
self.$statusbar = Ox.Bar({
|
||||||
size: 24
|
size: 24
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
@ -275,21 +275,21 @@ Ox.Map = function(options, self) {
|
||||||
})
|
})
|
||||||
.css({float: 'left', margin: '4px 2px 4px 4px'})
|
.css({float: 'left', margin: '4px 2px 4px 4px'})
|
||||||
.appendTo(self.$statusbar.$element);
|
.appendTo(self.$statusbar.$element);
|
||||||
self.$placeNameInput = new Ox.Input({
|
self.$placeNameInput = Ox.Input({
|
||||||
placeholder: 'Name',
|
placeholder: 'Name',
|
||||||
width: 96
|
width: 96
|
||||||
})
|
})
|
||||||
//.css({position: 'absolute', left: 4, top: 4})
|
//.css({position: 'absolute', left: 4, top: 4})
|
||||||
.css({float: 'left', margin: '4px 2px 4px 2px'})
|
.css({float: 'left', margin: '4px 2px 4px 2px'})
|
||||||
.appendTo(self.$statusbar);
|
.appendTo(self.$statusbar);
|
||||||
self.$placeGeonameInput = new Ox.Input({
|
self.$placeGeonameInput = Ox.Input({
|
||||||
placeholder: 'Geoname',
|
placeholder: 'Geoname',
|
||||||
width: 96
|
width: 96
|
||||||
})
|
})
|
||||||
//.css({position: 'absolute', left: 104, top: 4})
|
//.css({position: 'absolute', left: 104, top: 4})
|
||||||
.css({float: 'left', margin: '4px 2px 4px 2px'})
|
.css({float: 'left', margin: '4px 2px 4px 2px'})
|
||||||
.appendTo(self.$statusbar);
|
.appendTo(self.$statusbar);
|
||||||
self.$placeButton = new Ox.Button({
|
self.$placeButton = Ox.Button({
|
||||||
title: 'New Place',
|
title: 'New Place',
|
||||||
width: 96
|
width: 96
|
||||||
})
|
})
|
||||||
|
@ -301,7 +301,7 @@ Ox.Map = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
self.$navigationButtons = {
|
self.$navigationButtons = {
|
||||||
'center': new Ox.Button({
|
'center': Ox.Button({
|
||||||
title: 'close',
|
title: 'close',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
})
|
})
|
||||||
|
@ -310,7 +310,7 @@ Ox.Map = function(options, self) {
|
||||||
left: '24px',
|
left: '24px',
|
||||||
top: '24px'
|
top: '24px'
|
||||||
}),
|
}),
|
||||||
'east': new Ox.Button({
|
'east': Ox.Button({
|
||||||
title: 'right',
|
title: 'right',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
})
|
})
|
||||||
|
@ -319,7 +319,7 @@ Ox.Map = function(options, self) {
|
||||||
left: '44px',
|
left: '44px',
|
||||||
top: '24px',
|
top: '24px',
|
||||||
}),
|
}),
|
||||||
'north': new Ox.Button({
|
'north': Ox.Button({
|
||||||
title: 'up',
|
title: 'up',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
})
|
})
|
||||||
|
@ -328,7 +328,7 @@ Ox.Map = function(options, self) {
|
||||||
left: '24px',
|
left: '24px',
|
||||||
top: '4px',
|
top: '4px',
|
||||||
}),
|
}),
|
||||||
'south': new Ox.Button({
|
'south': Ox.Button({
|
||||||
title: 'down',
|
title: 'down',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
})
|
})
|
||||||
|
@ -337,7 +337,7 @@ Ox.Map = function(options, self) {
|
||||||
left: '24px',
|
left: '24px',
|
||||||
top: '44px',
|
top: '44px',
|
||||||
}),
|
}),
|
||||||
'west': new Ox.Button({
|
'west': Ox.Button({
|
||||||
title: 'left',
|
title: 'left',
|
||||||
type: 'image'
|
type: 'image'
|
||||||
})
|
})
|
||||||
|
@ -353,7 +353,7 @@ Ox.Map = function(options, self) {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$scaleLabel = new Ox.Label({
|
self.$scaleLabel = Ox.Label({
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
title: '...'
|
title: '...'
|
||||||
})
|
})
|
||||||
|
@ -393,7 +393,7 @@ Ox.Map = function(options, self) {
|
||||||
northeast = new google.maps.LatLngBounds(
|
northeast = new google.maps.LatLngBounds(
|
||||||
center, bounds.getNorthEast()
|
center, bounds.getNorthEast()
|
||||||
).getCenter(),
|
).getCenter(),
|
||||||
place = new Ox.MapPlace({
|
place = Ox.MapPlace({
|
||||||
alternativeNames: [],
|
alternativeNames: [],
|
||||||
countryCode: '',
|
countryCode: '',
|
||||||
editable: true,
|
editable: true,
|
||||||
|
@ -488,7 +488,7 @@ Ox.Map = function(options, self) {
|
||||||
//Ox.print('constructZoomInput', self.minZoom, self.maxZoom)
|
//Ox.print('constructZoomInput', self.minZoom, self.maxZoom)
|
||||||
if (self.options.zoombar) {
|
if (self.options.zoombar) {
|
||||||
self.$zoomInput && self.$zoomInput.removeElement();
|
self.$zoomInput && self.$zoomInput.removeElement();
|
||||||
self.$zoomInput = new Ox.Range({
|
self.$zoomInput = Ox.Range({
|
||||||
arrows: true,
|
arrows: true,
|
||||||
max: self.maxZoom,
|
max: self.maxZoom,
|
||||||
min: self.minZoom,
|
min: self.minZoom,
|
||||||
|
@ -609,12 +609,12 @@ Ox.Map = function(options, self) {
|
||||||
i == length - 1 ||
|
i == length - 1 ||
|
||||||
canContain(bounds, result.geometry.bounds || result.geometry.viewport)
|
canContain(bounds, result.geometry.bounds || result.geometry.viewport)
|
||||||
) {
|
) {
|
||||||
callback(new Ox.MapPlace(parseGeodata(results[i])));
|
callback(Ox.MapPlace(parseGeodata(results[i])));
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
callback(new Ox.MapPlace(parseGeodata(results[0])));
|
callback(Ox.MapPlace(parseGeodata(results[0])));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
|
@ -637,7 +637,7 @@ Ox.Map = function(options, self) {
|
||||||
address: name
|
address: name
|
||||||
}, function(results, status) {
|
}, function(results, status) {
|
||||||
if (status == google.maps.GeocoderStatus.OK) {
|
if (status == google.maps.GeocoderStatus.OK) {
|
||||||
callback(new Ox.MapPlace(parseGeodata(results[0])));
|
callback(Ox.MapPlace(parseGeodata(results[0])));
|
||||||
}
|
}
|
||||||
if (
|
if (
|
||||||
status == google.maps.GeocoderStatus.OK ||
|
status == google.maps.GeocoderStatus.OK ||
|
||||||
|
@ -719,7 +719,7 @@ Ox.Map = function(options, self) {
|
||||||
self.places = [];
|
self.places = [];
|
||||||
if (!self.isAsync) {
|
if (!self.isAsync) {
|
||||||
self.options.places.forEach(function(place, i) {
|
self.options.places.forEach(function(place, i) {
|
||||||
self.places[i] = new Ox.MapPlace(Ox.extend({
|
self.places[i] = Ox.MapPlace(Ox.extend({
|
||||||
map: that
|
map: that
|
||||||
}, place));
|
}, place));
|
||||||
});
|
});
|
||||||
|
@ -806,7 +806,7 @@ Ox.Map = function(options, self) {
|
||||||
var place = getPlaceById(item.id);
|
var place = getPlaceById(item.id);
|
||||||
if (!place) {
|
if (!place) {
|
||||||
self.places.push(
|
self.places.push(
|
||||||
new Ox.MapPlace(Ox.extend({
|
Ox.MapPlace(Ox.extend({
|
||||||
map: that
|
map: that
|
||||||
}, item)).add()
|
}, item)).add()
|
||||||
);
|
);
|
||||||
|
@ -1023,7 +1023,7 @@ Ox.Map = function(options, self) {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}, function(results) {
|
}, function(results) {
|
||||||
place = new Ox.MapPlace(Ox.extend({
|
place = Ox.MapPlace(Ox.extend({
|
||||||
map: that
|
map: that
|
||||||
}, results.data.items[0])).add();
|
}, results.data.items[0])).add();
|
||||||
self.places.push(place);
|
self.places.push(place);
|
||||||
|
|
|
@ -17,7 +17,7 @@ Ox.MapImage <f:Ox.Element> MapImage Object
|
||||||
Ox.MapImage = function(options, self) {
|
Ox.MapImage = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
var self = self || {},
|
||||||
that = new Ox.Element('<img>', self)
|
that = Ox.Element('<img>', self)
|
||||||
.defaults({
|
.defaults({
|
||||||
height: 360,
|
height: 360,
|
||||||
markerColorHighlight: 'yellow',
|
markerColorHighlight: 'yellow',
|
||||||
|
|
|
@ -63,7 +63,7 @@ Ox.MapMarker = function(options) {
|
||||||
bounds = bounds.union(that.place.bounds);
|
bounds = bounds.union(that.place.bounds);
|
||||||
southWest = bounds.getSouthWest();
|
southWest = bounds.getSouthWest();
|
||||||
northEast = bounds.getNorthEast();
|
northEast = bounds.getNorthEast();
|
||||||
that.map.newPlace(new Ox.MapPlace({
|
that.map.newPlace(Ox.MapPlace({
|
||||||
// fixme: duplicated, see Ox.Map.js
|
// fixme: duplicated, see Ox.Map.js
|
||||||
alternativeNames: [],
|
alternativeNames: [],
|
||||||
countryCode: '',
|
countryCode: '',
|
||||||
|
|
|
@ -72,13 +72,13 @@ Ox.MapPlace = function(options) {
|
||||||
{lat: that.north, lng: that.east}
|
{lat: that.north, lng: that.east}
|
||||||
);
|
);
|
||||||
if (!that.marker) {
|
if (!that.marker) {
|
||||||
that.marker = new Ox.MapMarker({
|
that.marker = Ox.MapMarker({
|
||||||
color: that.markerColor,
|
color: that.markerColor,
|
||||||
map: that.map,
|
map: that.map,
|
||||||
place: that,
|
place: that,
|
||||||
size: that.markerSize
|
size: that.markerSize
|
||||||
});
|
});
|
||||||
that.rectangle = new Ox.MapRectangle({
|
that.rectangle = Ox.MapRectangle({
|
||||||
map: that.map,
|
map: that.map,
|
||||||
place: that
|
place: that
|
||||||
});
|
});
|
||||||
|
|
|
@ -13,11 +13,11 @@ Ox.MapRectangle <f> MapRectangle Object
|
||||||
|
|
||||||
Ox.MapRectangle = function(options, self) {
|
Ox.MapRectangle = function(options, self) {
|
||||||
|
|
||||||
var options = Ox.extend({
|
var that = this;
|
||||||
|
options = Ox.extend({
|
||||||
map: null,
|
map: null,
|
||||||
place: null
|
place: null
|
||||||
}, options),
|
}, options);
|
||||||
that = this;
|
|
||||||
|
|
||||||
Ox.forEach(options, function(val, key) {
|
Ox.forEach(options, function(val, key) {
|
||||||
that[key] = val;
|
that[key] = val;
|
||||||
|
@ -34,7 +34,7 @@ Ox.MapRectangle = function(options, self) {
|
||||||
markers <a> array of markers
|
markers <a> array of markers
|
||||||
@*/
|
@*/
|
||||||
that.markers = Ox.map(that.place.points, function(point, position) {
|
that.markers = Ox.map(that.place.points, function(point, position) {
|
||||||
return new Ox.MapRectangleMarker({
|
return Ox.MapRectangleMarker({
|
||||||
map: that.map,
|
map: that.map,
|
||||||
place: that.place,
|
place: that.place,
|
||||||
position: position
|
position: position
|
||||||
|
|
|
@ -14,8 +14,8 @@ Ox.MainMenu <f:Ox.Bar> MainMenu Object
|
||||||
|
|
||||||
Ox.MainMenu = function(options, self) {
|
Ox.MainMenu = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Bar({}, self)
|
var that = Ox.Bar({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
extras: [],
|
extras: [],
|
||||||
menus: [],
|
menus: [],
|
||||||
|
@ -38,7 +38,7 @@ Ox.MainMenu = function(options, self) {
|
||||||
.html(menu.title)
|
.html(menu.title)
|
||||||
.data('position', position)
|
.data('position', position)
|
||||||
.appendTo(that.$element);
|
.appendTo(that.$element);
|
||||||
that.menus[position] = new Ox.Menu($.extend(menu, {
|
that.menus[position] = Ox.Menu($.extend(menu, {
|
||||||
element: that.titles[position],
|
element: that.titles[position],
|
||||||
mainmenu: that,
|
mainmenu: that,
|
||||||
size: self.options.size
|
size: self.options.size
|
||||||
|
|
|
@ -27,9 +27,9 @@ Ox.Menu <f:Ox.Element> Menu Object
|
||||||
@*/
|
@*/
|
||||||
|
|
||||||
Ox.Menu = function(options, self) {
|
Ox.Menu = function(options, self) {
|
||||||
Ox.print(options)
|
Ox.print(options);
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
element: null,
|
element: null,
|
||||||
id: '',
|
id: '',
|
||||||
|
@ -186,7 +186,7 @@ Ox.print(options)
|
||||||
group: item.group
|
group: item.group
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
self.optionGroups[item.group] = new Ox.OptionGroup(
|
self.optionGroups[item.group] = Ox.OptionGroup(
|
||||||
items[i],
|
items[i],
|
||||||
'min' in item ? item.min : 1,
|
'min' in item ? item.min : 1,
|
||||||
'max' in item ? item.max : 1
|
'max' in item ? item.max : 1
|
||||||
|
@ -199,12 +199,12 @@ Ox.print(options)
|
||||||
items.forEach(function(item) {
|
items.forEach(function(item) {
|
||||||
var position;
|
var position;
|
||||||
if ('id' in item) {
|
if ('id' in item) {
|
||||||
that.items.push(new Ox.MenuItem($.extend(item, {
|
that.items.push(Ox.MenuItem($.extend(item, {
|
||||||
menu: that,
|
menu: that,
|
||||||
position: position = that.items.length
|
position: position = that.items.length
|
||||||
})).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
|
})).data('position', position).appendTo(that.$content)); // fixme: jquery bug when passing {position: position}? does not return the object?;
|
||||||
if (item.items) {
|
if (item.items) {
|
||||||
that.submenus[item.id] = new Ox.Menu({
|
that.submenus[item.id] = Ox.Menu({
|
||||||
element: that.items[position],
|
element: that.items[position],
|
||||||
id: Ox.toCamelCase(self.options.id + '/' + item.id),
|
id: Ox.toCamelCase(self.options.id + '/' + item.id),
|
||||||
items: item.items,
|
items: item.items,
|
||||||
|
|
|
@ -21,8 +21,8 @@ Ox.MenuItem <f:Ox.Element> MenuItem Object
|
||||||
|
|
||||||
Ox.MenuItem = function(options, self) {
|
Ox.MenuItem = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element('<tr>', self)
|
var that = Ox.Element('<tr>', self)
|
||||||
.defaults({
|
.defaults({
|
||||||
bind: [], // fixme: what's this?
|
bind: [], // fixme: what's this?
|
||||||
checked: null,
|
checked: null,
|
||||||
|
@ -113,7 +113,7 @@ Ox.MenuItem = function(options, self) {
|
||||||
self.options.title = Ox.toArray(value);
|
self.options.title = Ox.toArray(value);
|
||||||
that.$title.html(self.options.title[0]);
|
that.$title.html(self.options.title[0]);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
that.toggle = function() {
|
that.toggle = function() {
|
||||||
// toggle id and title
|
// toggle id and title
|
||||||
|
|
|
@ -14,8 +14,9 @@ Ox.CollapsePanel <f:Ox.Panel> CollapsePanel Object
|
||||||
@*/
|
@*/
|
||||||
|
|
||||||
Ox.CollapsePanel = function(options, self) {
|
Ox.CollapsePanel = function(options, self) {
|
||||||
var self = self || {},
|
|
||||||
that = new Ox.Panel({}, self)
|
self = self || {};
|
||||||
|
var that = Ox.Panel({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
extras: [],
|
extras: [],
|
||||||
|
@ -28,33 +29,33 @@ Ox.CollapsePanel = function(options, self) {
|
||||||
title = self.options.collapsed ?
|
title = self.options.collapsed ?
|
||||||
[{id: 'expand', title: 'right'}, {id: 'collapse', title: 'down'}] :
|
[{id: 'expand', title: 'right'}, {id: 'collapse', title: 'down'}] :
|
||||||
[{id: 'collapse', title: 'down'}, {id: 'expand', title: 'right'}],
|
[{id: 'collapse', title: 'down'}, {id: 'expand', title: 'right'}],
|
||||||
$titlebar = new Ox.Bar({
|
$titlebar = Ox.Bar({
|
||||||
orientation: 'horizontal',
|
orientation: 'horizontal',
|
||||||
size: self.options.size,
|
size: self.options.size,
|
||||||
})
|
})
|
||||||
.dblclick(dblclickTitlebar)
|
.dblclick(dblclickTitlebar)
|
||||||
.appendTo(that),
|
.appendTo(that),
|
||||||
$switch = new Ox.Button({
|
$switch = Ox.Button({
|
||||||
style: 'symbol',
|
style: 'symbol',
|
||||||
title: title,
|
title: title,
|
||||||
type: 'image',
|
type: 'image',
|
||||||
})
|
})
|
||||||
.click(toggleCollapsed)
|
.click(toggleCollapsed)
|
||||||
.appendTo($titlebar),
|
.appendTo($titlebar),
|
||||||
$title = new Ox.Element()
|
$title = Ox.Element()
|
||||||
.addClass('OxTitle')
|
.addClass('OxTitle')
|
||||||
.html(self.options.title/*.toUpperCase()*/)
|
.html(self.options.title/*.toUpperCase()*/)
|
||||||
.appendTo($titlebar),
|
.appendTo($titlebar),
|
||||||
$extras;
|
$extras;
|
||||||
if (self.options.extras.length) {
|
if (self.options.extras.length) {
|
||||||
$extras = new Ox.Element()
|
$extras = Ox.Element()
|
||||||
.addClass('OxExtras')
|
.addClass('OxExtras')
|
||||||
.appendTo($titlebar);
|
.appendTo($titlebar);
|
||||||
self.options.extras.forEach(function($extra) {
|
self.options.extras.forEach(function($extra) {
|
||||||
$extra.appendTo($extras);
|
$extra.appendTo($extras);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
that.$content = new Ox.Element()
|
that.$content = Ox.Element()
|
||||||
.addClass('OxContent')
|
.addClass('OxContent')
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
// fixme: doesn't work, content still empty
|
// fixme: doesn't work, content still empty
|
||||||
|
|
|
@ -10,8 +10,8 @@ Ox.Panel <f:Ox.Element> Panel Object
|
||||||
@*/
|
@*/
|
||||||
|
|
||||||
Ox.Panel = function(options, self) {
|
Ox.Panel = function(options, self) {
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.addClass('OxPanel');
|
.addClass('OxPanel');
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
|
@ -30,8 +30,8 @@ Ox.SplitPanel <f:Ox.Element> SpliPanel Object
|
||||||
*/
|
*/
|
||||||
Ox.SplitPanel = function(options, self) {
|
Ox.SplitPanel = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self) // fixme: Container
|
var that = Ox.Element({}, self) // fixme: Container
|
||||||
.defaults({
|
.defaults({
|
||||||
elements: [],
|
elements: [],
|
||||||
orientation: 'horizontal'
|
orientation: 'horizontal'
|
||||||
|
@ -72,7 +72,7 @@ Ox.SplitPanel = function(options, self) {
|
||||||
if (v.collapsible || v.resizable) {
|
if (v.collapsible || v.resizable) {
|
||||||
//Ox.print('v.size', v.size)
|
//Ox.print('v.size', v.size)
|
||||||
self.resizebarElements[index] = i < 2 ? [0, 1] : [1, 2];
|
self.resizebarElements[index] = i < 2 ? [0, 1] : [1, 2];
|
||||||
self.$resizebars[index] = new Ox.Resizebar({
|
self.$resizebars[index] = Ox.Resizebar({
|
||||||
collapsible: v.collapsible,
|
collapsible: v.collapsible,
|
||||||
edge: self.edges[index],
|
edge: self.edges[index],
|
||||||
elements: [
|
elements: [
|
||||||
|
@ -211,7 +211,7 @@ Ox.SplitPanel = function(options, self) {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
return that;
|
return that;
|
||||||
}
|
};
|
||||||
|
|
||||||
that.size = function(id, size) {
|
that.size = function(id, size) {
|
||||||
// one can pass pos instead of id
|
// one can pass pos instead of id
|
||||||
|
@ -255,9 +255,9 @@ Ox.SplitPanel = function(options, self) {
|
||||||
|
|
||||||
that.updateSize = function(pos, size) {
|
that.updateSize = function(pos, size) {
|
||||||
// this is called from resizebar
|
// this is called from resizebar
|
||||||
var pos = pos == 0 ? 0 : self.options.elements.length - 1; // fixme: silly that 0 or 1 is passed, and not pos
|
pos = pos == 0 ? 0 : self.options.elements.length - 1; // fixme: silly that 0 or 1 is passed, and not pos
|
||||||
self.options.elements[pos].size = size;
|
self.options.elements[pos].size = size;
|
||||||
}
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
|
@ -265,8 +265,8 @@ Ox.SplitPanel = function(options, self) {
|
||||||
|
|
||||||
Ox.SplitPanel_ = function(options, self) {
|
Ox.SplitPanel_ = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
elements: [],
|
elements: [],
|
||||||
orientation: 'horizontal'
|
orientation: 'horizontal'
|
||||||
|
|
|
@ -16,8 +16,8 @@ Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object
|
||||||
|
|
||||||
Ox.AnnotationPanel = function(options, self) {
|
Ox.AnnotationPanel = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
id: '',
|
id: '',
|
||||||
items: [],
|
items: [],
|
||||||
|
@ -29,10 +29,10 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
|
|
||||||
self.selected = -1;
|
self.selected = -1;
|
||||||
|
|
||||||
that.$element = new Ox.CollapsePanel({
|
that.$element = Ox.CollapsePanel({
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
extras: self.options.editable ? [
|
extras: self.options.editable ? [
|
||||||
new Ox.Button({
|
Ox.Button({
|
||||||
id: 'add',
|
id: 'add',
|
||||||
style: 'symbol',
|
style: 'symbol',
|
||||||
title: 'add',
|
title: 'add',
|
||||||
|
@ -53,9 +53,9 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
});
|
});
|
||||||
that.$content = that.$element.$content;
|
that.$content = that.$element.$content;
|
||||||
|
|
||||||
self.$annotations = new Ox.List({
|
self.$annotations = Ox.List({
|
||||||
construct: function(data) {
|
construct: function(data) {
|
||||||
return new Ox.Element()
|
return Ox.Element()
|
||||||
.addClass('OxAnnotation OxEditable OxTarget')
|
.addClass('OxAnnotation OxEditable OxTarget')
|
||||||
.html(Ox.parseHTML(data.value));
|
.html(Ox.parseHTML(data.value));
|
||||||
},
|
},
|
||||||
|
@ -87,11 +87,11 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
.appendTo(that.$content);
|
.appendTo(that.$content);
|
||||||
|
|
||||||
/*
|
/*
|
||||||
self.$annotations = new Ox.Element()
|
self.$annotations = Ox.Element()
|
||||||
.appendTo(that.$content);
|
.appendTo(that.$content);
|
||||||
self.$annotation = [];
|
self.$annotation = [];
|
||||||
self.options.items.forEach(function(item, i) {
|
self.options.items.forEach(function(item, i) {
|
||||||
self.$annotation[i] = new Ox.Element()
|
self.$annotation[i] = Ox.Element()
|
||||||
.addClass('OxAnnotation')
|
.addClass('OxAnnotation')
|
||||||
.html(item.value.replace(/\n/g, '<br/>'))
|
.html(item.value.replace(/\n/g, '<br/>'))
|
||||||
.click(function() {
|
.click(function() {
|
||||||
|
@ -141,7 +141,7 @@ Ox.AnnotationPanel = function(options, self) {
|
||||||
that.deselectItems = function() {
|
that.deselectItems = function() {
|
||||||
if(self.$annotations.options('selected'))
|
if(self.$annotations.options('selected'))
|
||||||
self.$annotations.options('selected',[]);
|
self.$annotations.options('selected',[]);
|
||||||
}
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
|
|
|
@ -11,8 +11,8 @@ Ox.BlockTimeline <f:Ox.Element> BlockTimeline Object
|
||||||
|
|
||||||
Ox.BlockTimeline = function(options, self) {
|
Ox.BlockTimeline = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
duration: 0,
|
duration: 0,
|
||||||
find: '',
|
find: '',
|
||||||
|
@ -40,7 +40,7 @@ Ox.BlockTimeline = function(options, self) {
|
||||||
$markerPoint: [],
|
$markerPoint: [],
|
||||||
$selection: [],
|
$selection: [],
|
||||||
$subtitles: [],
|
$subtitles: [],
|
||||||
$tooltip: new Ox.Tooltip({
|
$tooltip: Ox.Tooltip({
|
||||||
animate: false
|
animate: false
|
||||||
}).css({
|
}).css({
|
||||||
textAlign: 'center'
|
textAlign: 'center'
|
||||||
|
@ -94,7 +94,7 @@ Ox.BlockTimeline = function(options, self) {
|
||||||
|
|
||||||
function addLine(i) {
|
function addLine(i) {
|
||||||
// fixme: get URLs once, not once for every line
|
// fixme: get URLs once, not once for every line
|
||||||
self.$lines[i] = new Ox.Element()
|
self.$lines[i] = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
top: i * (self.height + self.margin) + 'px',
|
top: i * (self.height + self.margin) + 'px',
|
||||||
width: self.options.width + 'px'
|
width: self.options.width + 'px'
|
||||||
|
@ -108,7 +108,7 @@ Ox.BlockTimeline = function(options, self) {
|
||||||
.css({
|
.css({
|
||||||
marginLeft: (-i * self.options.width) + 'px'
|
marginLeft: (-i * self.options.width) + 'px'
|
||||||
})
|
})
|
||||||
.appendTo(self.$lines[i].$element)
|
.appendTo(self.$lines[i].$element);
|
||||||
if (self.hasSubtitles) {
|
if (self.hasSubtitles) {
|
||||||
self.subtitlesImageURL = getSubtitlesImageURL();
|
self.subtitlesImageURL = getSubtitlesImageURL();
|
||||||
self.$subtitles[i] = $('<img>')
|
self.$subtitles[i] = $('<img>')
|
||||||
|
@ -169,7 +169,7 @@ Ox.BlockTimeline = function(options, self) {
|
||||||
data[index] = color[0];
|
data[index] = color[0];
|
||||||
data[index + 1] = color[1];
|
data[index + 1] = color[1];
|
||||||
data[index + 2] = color[2];
|
data[index + 2] = color[2];
|
||||||
data[index + 3] = color[3]
|
data[index + 3] = color[3];
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
context.putImageData(imageData, 0, 0);
|
context.putImageData(imageData, 0, 0);
|
||||||
|
@ -213,7 +213,7 @@ Ox.BlockTimeline = function(options, self) {
|
||||||
data[index] = color[0];
|
data[index] = color[0];
|
||||||
data[index + 1] = color[1];
|
data[index + 1] = color[1];
|
||||||
data[index + 2] = color[2];
|
data[index + 2] = color[2];
|
||||||
data[index + 3] = 128
|
data[index + 3] = 128;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -278,7 +278,7 @@ Ox.BlockTimeline = function(options, self) {
|
||||||
$target.hasClass('OxTimelineSmallSubtitles') ||
|
$target.hasClass('OxTimelineSmallSubtitles') ||
|
||||||
$target.hasClass('OxTimelineSmallSelection')
|
$target.hasClass('OxTimelineSmallSelection')
|
||||||
) {
|
) {
|
||||||
position = getPosition(e),
|
position = getPosition(e);
|
||||||
subtitle = getSubtitle(position);
|
subtitle = getSubtitle(position);
|
||||||
self.$tooltip.options({
|
self.$tooltip.options({
|
||||||
title: subtitle ?
|
title: subtitle ?
|
||||||
|
@ -361,7 +361,7 @@ Ox.BlockTimeline = function(options, self) {
|
||||||
//Ox.print('key', key, 'value', value)
|
//Ox.print('key', key, 'value', value)
|
||||||
setMarkerPoint(0);
|
setMarkerPoint(0);
|
||||||
setMarkerPoint(1);
|
setMarkerPoint(1);
|
||||||
updateSelection()
|
updateSelection();
|
||||||
} else if (key == 'position') {
|
} else if (key == 'position') {
|
||||||
setPosition();
|
setPosition();
|
||||||
} else if (key == 'width') {
|
} else if (key == 'width') {
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
|
// vim: et:ts=4:sw=4:sts=4:ft=js
|
||||||
Ox.BlockVideoTimeline = function(options, self) {
|
Ox.BlockVideoTimeline = function(options, self) {
|
||||||
|
|
||||||
self = self || {};
|
self = self || {};
|
||||||
var that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
duration: 0,
|
duration: 0,
|
||||||
find: '',
|
find: '',
|
||||||
|
@ -32,7 +33,7 @@ Ox.BlockVideoTimeline = function(options, self) {
|
||||||
self.$images = [];
|
self.$images = [];
|
||||||
self.$interfaces = [];
|
self.$interfaces = [];
|
||||||
self.$lines = [];
|
self.$lines = [];
|
||||||
self.$tooltip = new Ox.Tooltip({
|
self.$tooltip = Ox.Tooltip({
|
||||||
animate: false
|
animate: false
|
||||||
}).css({
|
}).css({
|
||||||
textAlign: 'center'
|
textAlign: 'center'
|
||||||
|
@ -263,7 +264,7 @@ Ox.BlockVideoTimeline = function(options, self) {
|
||||||
|
|
||||||
self.setOption = function(key, value) {
|
self.setOption = function(key, value) {
|
||||||
if (key == 'in' || key == 'out') {
|
if (key == 'in' || key == 'out') {
|
||||||
setPoint(key)
|
setPoint(key);
|
||||||
} else if (key == 'position') {
|
} else if (key == 'position') {
|
||||||
setPositionMarker();
|
setPositionMarker();
|
||||||
} else if (key == 'results') {
|
} else if (key == 'results') {
|
||||||
|
@ -271,8 +272,8 @@ Ox.BlockVideoTimeline = function(options, self) {
|
||||||
} else if (key == 'width') {
|
} else if (key == 'width') {
|
||||||
setWidth();
|
setWidth();
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
|
|
||||||
Ox.Flipbook = function(options, self) {
|
Ox.Flipbook = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
frame = $('<img>').css({
|
var frame = $('<img>').css({
|
||||||
'position': 'absolute',
|
'position': 'absolute',
|
||||||
'width': '100%',
|
'width': '100%',
|
||||||
'height': 'auto'
|
'height': 'auto'
|
||||||
|
@ -22,7 +22,7 @@ Ox.Flipbook = function(options, self) {
|
||||||
'width': '100%'
|
'width': '100%'
|
||||||
})
|
})
|
||||||
.hide(),
|
.hide(),
|
||||||
that = new Ox.Element({}, self)
|
that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
frames: {},
|
frames: {},
|
||||||
duration: 0,
|
duration: 0,
|
||||||
|
|
|
@ -11,8 +11,8 @@ Ox.LargeTimeline <f:Ox.Element> LargeTimeline Object
|
||||||
|
|
||||||
Ox.LargeTimeline = function(options, self) {
|
Ox.LargeTimeline = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
cuts: [],
|
cuts: [],
|
||||||
duration: 0,
|
duration: 0,
|
||||||
|
@ -40,7 +40,7 @@ Ox.LargeTimeline = function(options, self) {
|
||||||
$markerPoint: [],
|
$markerPoint: [],
|
||||||
$subtitles: [],
|
$subtitles: [],
|
||||||
$tiles: {},
|
$tiles: {},
|
||||||
$tooltip: new Ox.Tooltip({
|
$tooltip: Ox.Tooltip({
|
||||||
animate: false
|
animate: false
|
||||||
}),
|
}),
|
||||||
center: parseInt(self.options.width / 2),
|
center: parseInt(self.options.width / 2),
|
||||||
|
@ -55,7 +55,7 @@ Ox.LargeTimeline = function(options, self) {
|
||||||
.css({
|
.css({
|
||||||
left: self.center + 'px'
|
left: self.center + 'px'
|
||||||
})
|
})
|
||||||
.appendTo(that.$element)
|
.appendTo(that.$element);
|
||||||
|
|
||||||
self.options.subtitles.forEach(function(v, i) {
|
self.options.subtitles.forEach(function(v, i) {
|
||||||
self.$subtitles[i] = $('<div>')
|
self.$subtitles[i] = $('<div>')
|
||||||
|
@ -65,7 +65,7 @@ Ox.LargeTimeline = function(options, self) {
|
||||||
width: (((v['out'] - v['in']) * self.fps) - 2) + 'px'
|
width: (((v['out'] - v['in']) * self.fps) - 2) + 'px'
|
||||||
})
|
})
|
||||||
.html(Ox.highlight(v.value, self.options.find, 'OxHighlight'))
|
.html(Ox.highlight(v.value, self.options.find, 'OxHighlight'))
|
||||||
.appendTo(self.$timeline)
|
.appendTo(self.$timeline);
|
||||||
});
|
});
|
||||||
|
|
||||||
self.options.cuts.forEach(function(v, i) {
|
self.options.cuts.forEach(function(v, i) {
|
||||||
|
@ -77,7 +77,7 @@ Ox.LargeTimeline = function(options, self) {
|
||||||
.css({
|
.css({
|
||||||
left: (v * self.fps) + 'px'
|
left: (v * self.fps) + 'px'
|
||||||
})
|
})
|
||||||
.appendTo(self.$timeline)
|
.appendTo(self.$timeline);
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$markerPosition = $('<img>')
|
self.$markerPosition = $('<img>')
|
||||||
|
@ -124,7 +124,7 @@ Ox.LargeTimeline = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPosition(e) {
|
function getPosition(e) {
|
||||||
return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps
|
return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps;
|
||||||
}
|
}
|
||||||
|
|
||||||
function mouseleave(e) {
|
function mouseleave(e) {
|
||||||
|
|
|
@ -11,8 +11,8 @@ Ox.LargeVideoTimeline <f:Ox.Element> LargeTimeline Object
|
||||||
|
|
||||||
Ox.LargeVideoTimeline = function(options, self) {
|
Ox.LargeVideoTimeline = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
cuts: [],
|
cuts: [],
|
||||||
duration: 0,
|
duration: 0,
|
||||||
|
@ -41,7 +41,7 @@ Ox.LargeVideoTimeline = function(options, self) {
|
||||||
$cuts: [],
|
$cuts: [],
|
||||||
$pointMarker: {},
|
$pointMarker: {},
|
||||||
$tiles: {},
|
$tiles: {},
|
||||||
$tooltip: new Ox.Tooltip({
|
$tooltip: Ox.Tooltip({
|
||||||
animate: false
|
animate: false
|
||||||
}),
|
}),
|
||||||
center: parseInt(self.options.width / 2),
|
center: parseInt(self.options.width / 2),
|
||||||
|
@ -117,7 +117,7 @@ Ox.LargeVideoTimeline = function(options, self) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function getPosition(e) {
|
function getPosition(e) {
|
||||||
return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps
|
return self.options.position + (e.clientX - that.offset().left - self.center - 1) / self.fps;
|
||||||
}
|
}
|
||||||
|
|
||||||
function mouseleave(e) {
|
function mouseleave(e) {
|
||||||
|
@ -182,7 +182,7 @@ Ox.LargeVideoTimeline = function(options, self) {
|
||||||
width: (((subtitle.out - subtitle['in']) * self.fps) - 2) + 'px'
|
width: (((subtitle.out - subtitle['in']) * self.fps) - 2) + 'px'
|
||||||
})
|
})
|
||||||
.html(Ox.highlight(subtitle.text, self.options.find, 'OxHighlight'))
|
.html(Ox.highlight(subtitle.text, self.options.find, 'OxHighlight'))
|
||||||
.appendTo(self.$timeline)
|
.appendTo(self.$timeline);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -11,8 +11,8 @@ Ox.SmallTimeline <f:Ox.Element> SmallTimeline Object
|
||||||
|
|
||||||
Ox.SmallTimeline = function(options, self) {
|
Ox.SmallTimeline = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
duration: 0,
|
duration: 0,
|
||||||
find: '',
|
find: '',
|
||||||
|
@ -38,7 +38,7 @@ Ox.SmallTimeline = function(options, self) {
|
||||||
$images: [],
|
$images: [],
|
||||||
$markerPoint: [],
|
$markerPoint: [],
|
||||||
$subtitles: [],
|
$subtitles: [],
|
||||||
$tooltip: new Ox.Tooltip({
|
$tooltip: Ox.Tooltip({
|
||||||
animate: false
|
animate: false
|
||||||
}).css({
|
}).css({
|
||||||
textAlign: 'center'
|
textAlign: 'center'
|
||||||
|
@ -135,7 +135,7 @@ Ox.SmallTimeline = function(options, self) {
|
||||||
$target.hasClass('OxTimelineSmallImage') ||
|
$target.hasClass('OxTimelineSmallImage') ||
|
||||||
$target.hasClass('OxTimelineSmallSubtitles')
|
$target.hasClass('OxTimelineSmallSubtitles')
|
||||||
) {
|
) {
|
||||||
position = getPosition(e),
|
position = getPosition(e);
|
||||||
subtitle = getSubtitle(position);
|
subtitle = getSubtitle(position);
|
||||||
self.$tooltip.options({
|
self.$tooltip.options({
|
||||||
title: subtitle ?
|
title: subtitle ?
|
||||||
|
|
|
@ -215,8 +215,8 @@ Ox.SmallVideoTimelineImage = function(options, self) {
|
||||||
self.$subtitles.css({width: value + 'px'});
|
self.$subtitles.css({width: value + 'px'});
|
||||||
self.$timeline.css({width: value + 'px'});
|
self.$timeline.css({width: value + 'px'});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,8 +11,8 @@ Ox.VideoEditor <f:Ox.Element> VideoEditor Object
|
||||||
|
|
||||||
Ox.VideoEditor = function(options, self) {
|
Ox.VideoEditor = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
annotationsSize: 0,
|
annotationsSize: 0,
|
||||||
cuts: [],
|
cuts: [],
|
||||||
|
@ -97,10 +97,10 @@ Ox.VideoEditor = function(options, self) {
|
||||||
// toggleSize
|
// toggleSize
|
||||||
},
|
},
|
||||||
key_shift_comma: function() {
|
key_shift_comma: function() {
|
||||||
movePositionTo('match', -1)
|
movePositionTo('match', -1);
|
||||||
},
|
},
|
||||||
key_shift_dot: function() {
|
key_shift_dot: function() {
|
||||||
movePositionTo('match', 1)
|
movePositionTo('match', 1);
|
||||||
},
|
},
|
||||||
key_shift_down: function() {
|
key_shift_down: function() {
|
||||||
movePositionBy(self.options.duration);
|
movePositionBy(self.options.duration);
|
||||||
|
@ -143,7 +143,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
videoRatio: self.options.videoWidth / self.options.videoHeight
|
videoRatio: self.options.videoWidth / self.options.videoHeight
|
||||||
});
|
});
|
||||||
|
|
||||||
self.words = []
|
self.words = [];
|
||||||
Ox.forEach(Ox.count(Ox.words(self.options.subtitles.map(function(subtitle) {
|
Ox.forEach(Ox.count(Ox.words(self.options.subtitles.map(function(subtitle) {
|
||||||
return subtitle.text;
|
return subtitle.text;
|
||||||
}).join(' '))), function(count, word) {
|
}).join(' '))), function(count, word) {
|
||||||
|
@ -155,7 +155,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
return obj.word;
|
return obj.word;
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$editor = new Ox.Element()
|
self.$editor = Ox.Element()
|
||||||
.addClass('OxVideoEditor')
|
.addClass('OxVideoEditor')
|
||||||
.click(function(e) {
|
.click(function(e) {
|
||||||
var $target = $(e.target);
|
var $target = $(e.target);
|
||||||
|
@ -165,7 +165,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
self.sizes = getSizes();
|
self.sizes = getSizes();
|
||||||
|
|
||||||
['play', 'in', 'out'].forEach(function(type, i) {
|
['play', 'in', 'out'].forEach(function(type, i) {
|
||||||
self.$player[i] = new Ox.VideoPlayer({
|
self.$player[i] = Ox.VideoPlayer({
|
||||||
controlsBottom: type == 'play' ?
|
controlsBottom: type == 'play' ?
|
||||||
['play', 'playInToOut', 'volume', 'size', 'space', 'position'] :
|
['play', 'playInToOut', 'volume', 'size', 'space', 'position'] :
|
||||||
['goto', 'set', 'space', 'position'],
|
['goto', 'set', 'space', 'position'],
|
||||||
|
@ -207,7 +207,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
.appendTo(self.$editor);
|
.appendTo(self.$editor);
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$timeline[0] = new Ox.LargeVideoTimeline({
|
self.$timeline[0] = Ox.LargeVideoTimeline({
|
||||||
cuts: self.options.cuts,
|
cuts: self.options.cuts,
|
||||||
duration: self.options.duration,
|
duration: self.options.duration,
|
||||||
find: self.options.find,
|
find: self.options.find,
|
||||||
|
@ -228,7 +228,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
.bindEvent('position', changeTimelineLarge)
|
.bindEvent('position', changeTimelineLarge)
|
||||||
.appendTo(self.$editor);
|
.appendTo(self.$editor);
|
||||||
|
|
||||||
self.$timeline[1] = new Ox.BlockVideoTimeline({
|
self.$timeline[1] = Ox.BlockVideoTimeline({
|
||||||
cuts: self.options.cuts,
|
cuts: self.options.cuts,
|
||||||
duration: self.options.duration,
|
duration: self.options.duration,
|
||||||
find: self.options.find,
|
find: self.options.find,
|
||||||
|
@ -249,14 +249,14 @@ Ox.VideoEditor = function(options, self) {
|
||||||
.bindEvent('position', changeTimelineSmall)
|
.bindEvent('position', changeTimelineSmall)
|
||||||
.appendTo(self.$editor);
|
.appendTo(self.$editor);
|
||||||
|
|
||||||
self.$annotations = new Ox.Element()
|
self.$annotations = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
overflowY: 'auto'
|
overflowY: 'auto'
|
||||||
});
|
});
|
||||||
self.$annotationPanel = [];
|
self.$annotationPanel = [];
|
||||||
|
|
||||||
self.options.layers.forEach(function(layer, i) {
|
self.options.layers.forEach(function(layer, i) {
|
||||||
self.$annotationPanel[i] = new Ox.AnnotationPanel(
|
self.$annotationPanel[i] = Ox.AnnotationPanel(
|
||||||
$.extend({
|
$.extend({
|
||||||
width: self.options.annotationSize
|
width: self.options.annotationSize
|
||||||
}, layer)
|
}, layer)
|
||||||
|
@ -352,7 +352,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
.html(shortcut.action)
|
.html(shortcut.action)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
})
|
});
|
||||||
|
|
||||||
self.$videoMenuButton = Ox.Select({
|
self.$videoMenuButton = Ox.Select({
|
||||||
items: Ox.merge([
|
items: Ox.merge([
|
||||||
|
@ -401,7 +401,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$videobar);
|
||||||
self.$videoMenuButton.find('input').attr({
|
self.$videoMenuButton.find('input').attr({
|
||||||
src: Ox.UI.getImagePath('symbolSet.svg')
|
src: Ox.UI.getImagePath('symbolSet.svg')
|
||||||
})
|
});
|
||||||
|
|
||||||
self.$selectButton = Ox.Button({
|
self.$selectButton = Ox.Button({
|
||||||
style: 'symbol',
|
style: 'symbol',
|
||||||
|
@ -413,7 +413,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
click: function() {
|
click: function() {
|
||||||
self.$menuButton.find('input').trigger('click')
|
self.$menuButton.find('input').trigger('click')
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
//.appendTo(self.$videobar);
|
//.appendTo(self.$videobar);
|
||||||
|
|
||||||
|
|
||||||
|
@ -426,7 +426,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
change: function() {
|
change: function() {
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
//.appendTo(self.$videobar);
|
//.appendTo(self.$videobar);
|
||||||
|
|
||||||
|
|
||||||
|
@ -441,7 +441,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
.css({float: 'left'})
|
.css({float: 'left'})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: function() {
|
click: function() {
|
||||||
setPosition(self.options.posterFrame)
|
setPosition(self.options.posterFrame);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$videobar);
|
||||||
|
@ -517,7 +517,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$videobar);
|
||||||
self.$findInput.find('input').css({background: 'transparent'})
|
self.$findInput.find('input').css({background: 'transparent'});
|
||||||
|
|
||||||
self.$findButton = Ox.Button({
|
self.$findButton = Ox.Button({
|
||||||
//disabled: true,
|
//disabled: true,
|
||||||
|
@ -531,7 +531,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
click: function() {
|
click: function() {
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
//.appendTo(self.$videobar);
|
//.appendTo(self.$videobar);
|
||||||
|
|
||||||
self.$nextButton = Ox.Button({
|
self.$nextButton = Ox.Button({
|
||||||
|
@ -544,7 +544,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
.css({float: 'right'})
|
.css({float: 'right'})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: function() {
|
click: function() {
|
||||||
setPosition(getNextPosition('result', 1))
|
setPosition(getNextPosition('result', 1));
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$videobar);
|
||||||
|
@ -559,7 +559,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
.css({float: 'right'})
|
.css({float: 'right'})
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: function() {
|
click: function() {
|
||||||
setPosition(getNextPosition('result', -1))
|
setPosition(getNextPosition('result', -1));
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.appendTo(self.$videobar);
|
.appendTo(self.$videobar);
|
||||||
|
@ -597,7 +597,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
.appendTo(self.$annotationsbar);
|
.appendTo(self.$annotationsbar);
|
||||||
self.$annotationsMenuButton.find('input').attr({
|
self.$annotationsMenuButton.find('input').attr({
|
||||||
src: Ox.UI.getImagePath('symbolSet.svg')
|
src: Ox.UI.getImagePath('symbolSet.svg')
|
||||||
})
|
});
|
||||||
|
|
||||||
|
|
||||||
that.$element = Ox.SplitPanel({
|
that.$element = Ox.SplitPanel({
|
||||||
|
@ -767,7 +767,7 @@ Ox.VideoEditor = function(options, self) {
|
||||||
top: self.margin / 2,
|
top: self.margin / 2,
|
||||||
width: widths[i],
|
width: widths[i],
|
||||||
height: Math.round(widths[1] / self.videoRatio)
|
height: Math.round(widths[1] / self.videoRatio)
|
||||||
}
|
};
|
||||||
width += widths[i];
|
width += widths[i];
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
@ -775,32 +775,32 @@ Ox.VideoEditor = function(options, self) {
|
||||||
left: self.margin / 2,
|
left: self.margin / 2,
|
||||||
top: self.margin / 2,
|
top: self.margin / 2,
|
||||||
width: Math.round((contentWidth - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.videoRatio) * 2/3),
|
width: Math.round((contentWidth - 3 * self.margin + (self.controlsHeight + self.margin) / 2 * self.videoRatio) * 2/3),
|
||||||
}
|
};
|
||||||
size.player[0].height = Math.round(size.player[0].width / self.videoRatio);
|
size.player[0].height = Math.round(size.player[0].width / self.videoRatio);
|
||||||
size.player[1] = {
|
size.player[1] = {
|
||||||
left: size.player[0].left + size.player[0].width + self.margin,
|
left: size.player[0].left + size.player[0].width + self.margin,
|
||||||
top: size.player[0].top,
|
top: size.player[0].top,
|
||||||
width: contentWidth - 3 * self.margin - size.player[0].width
|
width: contentWidth - 3 * self.margin - size.player[0].width
|
||||||
}
|
};
|
||||||
size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio)
|
size.player[1].height = Math.ceil(size.player[1].width / self.videoRatio);
|
||||||
size.player[2] = {
|
size.player[2] = {
|
||||||
left: size.player[1].left,
|
left: size.player[1].left,
|
||||||
top: size.player[0].top + size.player[1].height + self.controlsHeight + self.margin,
|
top: size.player[0].top + size.player[1].height + self.controlsHeight + self.margin,
|
||||||
width: size.player[1].width,
|
width: size.player[1].width,
|
||||||
height: size.player[0].height - size.player[1].height - self.controlsHeight - self.margin
|
height: size.player[0].height - size.player[1].height - self.controlsHeight - self.margin
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
size.timeline[0] = {
|
size.timeline[0] = {
|
||||||
left: self.margin / 2,
|
left: self.margin / 2,
|
||||||
top: size.player[0].height + self.controlsHeight + 1.5 * self.margin,
|
top: size.player[0].height + self.controlsHeight + 1.5 * self.margin,
|
||||||
width: contentWidth - 2 * self.margin,
|
width: contentWidth - 2 * self.margin,
|
||||||
height: 64
|
height: 64
|
||||||
}
|
};
|
||||||
size.timeline[1] = {
|
size.timeline[1] = {
|
||||||
left: size.timeline[0].left,
|
left: size.timeline[0].left,
|
||||||
top: size.timeline[0].top + size.timeline[0].height + self.margin,
|
top: size.timeline[0].top + size.timeline[0].height + self.margin,
|
||||||
width: size.timeline[0].width
|
width: size.timeline[0].width
|
||||||
}
|
};
|
||||||
lines = Math.ceil(self.options.duration / size.timeline[1].width);
|
lines = Math.ceil(self.options.duration / size.timeline[1].width);
|
||||||
height = getHeight();
|
height = getHeight();
|
||||||
self.$editor.css({
|
self.$editor.css({
|
||||||
|
@ -1000,12 +1000,12 @@ Ox.VideoEditor = function(options, self) {
|
||||||
that.addAnnotation = function(layer, item) {
|
that.addAnnotation = function(layer, item) {
|
||||||
var i = Ox.getPositionById(self.options.layers, layer);
|
var i = Ox.getPositionById(self.options.layers, layer);
|
||||||
self.$annotationPanel[i].addItem(item);
|
self.$annotationPanel[i].addItem(item);
|
||||||
}
|
};
|
||||||
|
|
||||||
that.removeAnnotations = function(layer, ids) {
|
that.removeAnnotations = function(layer, ids) {
|
||||||
var i = Ox.getPositionById(self.options.layers, layer);
|
var i = Ox.getPositionById(self.options.layers, layer);
|
||||||
self.$annotationPanel[i].removeItems(ids);
|
self.$annotationPanel[i].removeItems(ids);
|
||||||
}
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
|
|
|
@ -11,8 +11,8 @@ Ox.VideoEditorPlayer <f:Ox.Element> VideoEditorPlayer Object
|
||||||
|
|
||||||
Ox.VideoEditorPlayer = function(options, self) {
|
Ox.VideoEditorPlayer = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
duration: 0,
|
duration: 0,
|
||||||
find: '',
|
find: '',
|
||||||
|
@ -36,7 +36,7 @@ Ox.VideoEditorPlayer = function(options, self) {
|
||||||
self.controlsHeight = 16;
|
self.controlsHeight = 16;
|
||||||
|
|
||||||
if (self.options.type == 'play') {
|
if (self.options.type == 'play') {
|
||||||
self.$video = new Ox.VideoElement({
|
self.$video = Ox.VideoElement({
|
||||||
height: self.options.height,
|
height: self.options.height,
|
||||||
paused: true,
|
paused: true,
|
||||||
points: self.options.points,
|
points: self.options.points,
|
||||||
|
@ -112,7 +112,7 @@ Ox.VideoEditorPlayer = function(options, self) {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$controls = new Ox.Bar({
|
self.$controls = Ox.Bar({
|
||||||
size: self.controlsHeight
|
size: self.controlsHeight
|
||||||
})
|
})
|
||||||
.css({
|
.css({
|
||||||
|
@ -122,7 +122,7 @@ Ox.VideoEditorPlayer = function(options, self) {
|
||||||
|
|
||||||
if (self.options.type == 'play') {
|
if (self.options.type == 'play') {
|
||||||
// fixme: $buttonPlay etc. ?
|
// fixme: $buttonPlay etc. ?
|
||||||
self.$playButton = new Ox.Button({
|
self.$playButton = Ox.Button({
|
||||||
id: self.options.id + 'Play',
|
id: self.options.id + 'Play',
|
||||||
title: [
|
title: [
|
||||||
{id: 'play', title: 'play'},
|
{id: 'play', title: 'play'},
|
||||||
|
@ -133,7 +133,7 @@ Ox.VideoEditorPlayer = function(options, self) {
|
||||||
})
|
})
|
||||||
.bindEvent('click', togglePlay)
|
.bindEvent('click', togglePlay)
|
||||||
.appendTo(self.$controls);
|
.appendTo(self.$controls);
|
||||||
self.$playInToOutButton = new Ox.Button({
|
self.$playInToOutButton = Ox.Button({
|
||||||
id: self.options.id + 'PlayInToOut',
|
id: self.options.id + 'PlayInToOut',
|
||||||
title: 'PlayInToOut',
|
title: 'PlayInToOut',
|
||||||
tooltip: 'Play In to Out',
|
tooltip: 'Play In to Out',
|
||||||
|
@ -143,7 +143,7 @@ Ox.VideoEditorPlayer = function(options, self) {
|
||||||
that.playInToOut();
|
that.playInToOut();
|
||||||
})
|
})
|
||||||
.appendTo(self.$controls);
|
.appendTo(self.$controls);
|
||||||
self.$muteButton = new Ox.Button({
|
self.$muteButton = Ox.Button({
|
||||||
id: self.options.id + 'Mute',
|
id: self.options.id + 'Mute',
|
||||||
title: [
|
title: [
|
||||||
{id: 'mute', title: 'mute'},
|
{id: 'mute', title: 'mute'},
|
||||||
|
@ -154,7 +154,7 @@ Ox.VideoEditorPlayer = function(options, self) {
|
||||||
})
|
})
|
||||||
.bindEvent('click', toggleMute)
|
.bindEvent('click', toggleMute)
|
||||||
.appendTo(self.$controls);
|
.appendTo(self.$controls);
|
||||||
self.$sizeButton = new Ox.Button({
|
self.$sizeButton = Ox.Button({
|
||||||
id: self.options.id + 'Size',
|
id: self.options.id + 'Size',
|
||||||
title: self.options.size == 'small' ? [
|
title: self.options.size == 'small' ? [
|
||||||
{id: 'large', title: 'grow'},
|
{id: 'large', title: 'grow'},
|
||||||
|
@ -169,7 +169,7 @@ Ox.VideoEditorPlayer = function(options, self) {
|
||||||
.bindEvent('click', toggleSize)
|
.bindEvent('click', toggleSize)
|
||||||
.appendTo(self.$controls);
|
.appendTo(self.$controls);
|
||||||
} else {
|
} else {
|
||||||
self.$goToPointButton = new Ox.Button({
|
self.$goToPointButton = Ox.Button({
|
||||||
id: self.options.id + 'GoTo' + Ox.toTitleCase(self.options.type),
|
id: self.options.id + 'GoTo' + Ox.toTitleCase(self.options.type),
|
||||||
title: 'GoTo' + Ox.toTitleCase(self.options.type),
|
title: 'GoTo' + Ox.toTitleCase(self.options.type),
|
||||||
tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point',
|
tooltip: 'Go to ' + Ox.toTitleCase(self.options.type) + ' Point',
|
||||||
|
@ -177,7 +177,7 @@ Ox.VideoEditorPlayer = function(options, self) {
|
||||||
})
|
})
|
||||||
.bindEvent('click', goToPoint)
|
.bindEvent('click', goToPoint)
|
||||||
.appendTo(self.$controls);
|
.appendTo(self.$controls);
|
||||||
self.$setPointButton = new Ox.Button({
|
self.$setPointButton = Ox.Button({
|
||||||
id: self.options.id + 'Set' + Ox.toTitleCase(self.options.type),
|
id: self.options.id + 'Set' + Ox.toTitleCase(self.options.type),
|
||||||
title: 'Set' + Ox.toTitleCase(self.options.type),
|
title: 'Set' + Ox.toTitleCase(self.options.type),
|
||||||
tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point',
|
tooltip: 'Set ' + Ox.toTitleCase(self.options.type) + ' Point',
|
||||||
|
@ -187,7 +187,7 @@ Ox.VideoEditorPlayer = function(options, self) {
|
||||||
.appendTo(self.$controls);
|
.appendTo(self.$controls);
|
||||||
}
|
}
|
||||||
|
|
||||||
self.$positionInput = new Ox.TimeInput({
|
self.$positionInput = Ox.TimeInput({
|
||||||
milliseconds: true,
|
milliseconds: true,
|
||||||
seconds: true,
|
seconds: true,
|
||||||
value: Ox.formatDuration(self.options.position, 3)
|
value: Ox.formatDuration(self.options.position, 3)
|
||||||
|
@ -220,7 +220,7 @@ Ox.VideoEditorPlayer = function(options, self) {
|
||||||
});
|
});
|
||||||
|
|
||||||
if (self.options.type == 'play') {
|
if (self.options.type == 'play') {
|
||||||
self.$loadingIcon = new Ox.LoadingIcon()
|
self.$loadingIcon = Ox.LoadingIcon()
|
||||||
.appendTo(that)
|
.appendTo(that)
|
||||||
.start();
|
.start();
|
||||||
self.loadingInterval = setInterval(function() {
|
self.loadingInterval = setInterval(function() {
|
||||||
|
@ -309,7 +309,7 @@ Ox.VideoEditorPlayer = function(options, self) {
|
||||||
self.$loadingIcon && self.$loadingIcon.stop();
|
self.$loadingIcon && self.$loadingIcon.stop();
|
||||||
url = self.options.url(position);
|
url = self.options.url(position);
|
||||||
if (self.$video.attr('src') != url) {
|
if (self.$video.attr('src') != url) {
|
||||||
self.$loadingIcon = new Ox.LoadingIcon()
|
self.$loadingIcon = Ox.LoadingIcon()
|
||||||
.appendTo(that)
|
.appendTo(that)
|
||||||
.start();
|
.start();
|
||||||
self.$video.attr({
|
self.$video.attr({
|
||||||
|
|
|
@ -2,8 +2,8 @@
|
||||||
|
|
||||||
Ox.VideoElement = function(options, self) {
|
Ox.VideoElement = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element('<video>', self)
|
var that = Ox.Element('<video>', self)
|
||||||
.defaults({
|
.defaults({
|
||||||
fps: 25,
|
fps: 25,
|
||||||
height: 0,
|
height: 0,
|
||||||
|
@ -42,7 +42,7 @@ Ox.VideoElement = function(options, self) {
|
||||||
self.video.currentTime = self.options.position;
|
self.video.currentTime = self.options.position;
|
||||||
that.triggerEvent('loadedmetadata', {
|
that.triggerEvent('loadedmetadata', {
|
||||||
video: self.video
|
video: self.video
|
||||||
})
|
});
|
||||||
},
|
},
|
||||||
progress: function() {
|
progress: function() {
|
||||||
that.triggerEvent('progress', {
|
that.triggerEvent('progress', {
|
||||||
|
|
|
@ -11,8 +11,8 @@ Ox.VideoPanelPlayer <f:Ox.Element> VideoPanelPlayer Object
|
||||||
|
|
||||||
Ox.VideoPanelPlayer = function(options, self) {
|
Ox.VideoPanelPlayer = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
annotationsSize: 256,
|
annotationsSize: 256,
|
||||||
duration: 0,
|
duration: 0,
|
||||||
|
@ -60,7 +60,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
});
|
});
|
||||||
//alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
|
//alert(JSON.stringify([self.playerHeight, self.playerWidth, self.videoCSS]))
|
||||||
|
|
||||||
self.$player = new Ox.Element()
|
self.$player = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
overflowX: 'hidden',
|
overflowX: 'hidden',
|
||||||
overflowY: 'hidden'
|
overflowY: 'hidden'
|
||||||
|
@ -72,7 +72,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
resize: resizeVideo
|
resize: resizeVideo
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$video = new Ox.VideoElement({
|
self.$video = Ox.VideoElement({
|
||||||
height: self.videoCSS.height,
|
height: self.videoCSS.height,
|
||||||
paused: true,
|
paused: true,
|
||||||
points: self.options.points,
|
points: self.options.points,
|
||||||
|
@ -87,12 +87,12 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
})
|
})
|
||||||
.appendTo(self.$player);
|
.appendTo(self.$player);
|
||||||
|
|
||||||
self.$controls = new Ox.Element()
|
self.$controls = Ox.Element()
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
toggle: toggleControls
|
toggle: toggleControls
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$buttons = new Ox.Element()
|
self.$buttons = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
float: 'left',
|
float: 'left',
|
||||||
width: '16px',
|
width: '16px',
|
||||||
|
@ -101,7 +101,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
.appendTo(self.$controls);
|
.appendTo(self.$controls);
|
||||||
|
|
||||||
self.$button = {
|
self.$button = {
|
||||||
play: new Ox.Button({
|
play: Ox.Button({
|
||||||
id: 'play',
|
id: 'play',
|
||||||
title: [
|
title: [
|
||||||
{id: 'play', title: 'play'},
|
{id: 'play', title: 'play'},
|
||||||
|
@ -113,7 +113,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: self.$video.togglePlay
|
click: self.$video.togglePlay
|
||||||
}),
|
}),
|
||||||
mute: new Ox.Button({
|
mute: Ox.Button({
|
||||||
id: 'mute',
|
id: 'mute',
|
||||||
title: [
|
title: [
|
||||||
{id: 'mute', title: 'mute'},
|
{id: 'mute', title: 'mute'},
|
||||||
|
@ -125,7 +125,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: self.$video.toggleMute
|
click: self.$video.toggleMute
|
||||||
}),
|
}),
|
||||||
size: new Ox.Button({
|
size: Ox.Button({
|
||||||
id: 'size',
|
id: 'size',
|
||||||
title: self.options.videoSize == 'fit' ? [
|
title: self.options.videoSize == 'fit' ? [
|
||||||
{id: 'fill', title: 'fill'},
|
{id: 'fill', title: 'fill'},
|
||||||
|
@ -144,7 +144,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
click: toggleSize
|
click: toggleSize
|
||||||
}),
|
}),
|
||||||
fullscreen: new Ox.Button({
|
fullscreen: Ox.Button({
|
||||||
id: 'size',
|
id: 'size',
|
||||||
title: [
|
title: [
|
||||||
{id: 'grow', title: 'grow'},
|
{id: 'grow', title: 'grow'},
|
||||||
|
@ -169,7 +169,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
.appendTo(self.$buttons);
|
.appendTo(self.$buttons);
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$timelines = new Ox.Element()
|
self.$timelines = Ox.Element()
|
||||||
.css({
|
.css({
|
||||||
float: 'left',
|
float: 'left',
|
||||||
margin: '4px'
|
margin: '4px'
|
||||||
|
@ -177,7 +177,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
.appendTo(self.$controls);
|
.appendTo(self.$controls);
|
||||||
|
|
||||||
self.$timeline = {
|
self.$timeline = {
|
||||||
large: new Ox.LargeTimeline({
|
large: Ox.LargeTimeline({
|
||||||
duration: self.options.duration,
|
duration: self.options.duration,
|
||||||
position: self.options.position,
|
position: self.options.position,
|
||||||
subtitles: self.options.subtitles,
|
subtitles: self.options.subtitles,
|
||||||
|
@ -190,7 +190,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
change: changeLargeTimeline
|
change: changeLargeTimeline
|
||||||
}),
|
}),
|
||||||
small: new Ox.SmallTimeline({
|
small: Ox.SmallTimeline({
|
||||||
duration: self.options.duration,
|
duration: self.options.duration,
|
||||||
position: self.options.position,
|
position: self.options.position,
|
||||||
subtitles: self.options.subtitles,
|
subtitles: self.options.subtitles,
|
||||||
|
@ -208,7 +208,7 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
$timeline.appendTo(self.$timelines);
|
$timeline.appendTo(self.$timelines);
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$panel = new Ox.SplitPanel({
|
self.$panel = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
element: self.$player
|
element: self.$player
|
||||||
|
@ -226,14 +226,14 @@ Ox.VideoPanelPlayer = function(options, self) {
|
||||||
resize: resizePanel
|
resize: resizePanel
|
||||||
});
|
});
|
||||||
|
|
||||||
self.$annotations = new Ox.Element()
|
self.$annotations = Ox.Element()
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
resize: resizeAnnotations,
|
resize: resizeAnnotations,
|
||||||
resizeend: resizeendAnnotations,
|
resizeend: resizeendAnnotations,
|
||||||
toggle: toggleAnnotations
|
toggle: toggleAnnotations
|
||||||
});
|
});
|
||||||
|
|
||||||
that.$element = new Ox.SplitPanel({
|
that.$element = Ox.SplitPanel({
|
||||||
elements: [
|
elements: [
|
||||||
{
|
{
|
||||||
element: self.$panel
|
element: self.$panel
|
||||||
|
|
|
@ -13,8 +13,8 @@ Ox.Dialog = function(options, self) {
|
||||||
|
|
||||||
// fixme: dialog should be derived from a generic draggable
|
// fixme: dialog should be derived from a generic draggable
|
||||||
// fixme: buttons should have a close attribute, or the dialog a close id
|
// fixme: buttons should have a close attribute, or the dialog a close id
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
title: '',
|
title: '',
|
||||||
buttons: [],
|
buttons: [],
|
||||||
|
@ -43,9 +43,9 @@ Ox.Dialog = function(options, self) {
|
||||||
$.extend(self, {
|
$.extend(self, {
|
||||||
initialWidth: self.options.width,
|
initialWidth: self.options.width,
|
||||||
initialHeight: self.options.height
|
initialHeight: self.options.height
|
||||||
})
|
});
|
||||||
|
|
||||||
that.$titlebar = new Ox.Bar({
|
that.$titlebar = Ox.Bar({
|
||||||
size: 'medium'
|
size: 'medium'
|
||||||
})
|
})
|
||||||
.addClass('OxTitleBar')
|
.addClass('OxTitleBar')
|
||||||
|
@ -57,12 +57,12 @@ Ox.Dialog = function(options, self) {
|
||||||
drag: drag
|
drag: drag
|
||||||
});
|
});
|
||||||
|
|
||||||
that.$title = new Ox.Element()
|
that.$title = Ox.Element()
|
||||||
.addClass('OxTitle')
|
.addClass('OxTitle')
|
||||||
.html(self.options.title)
|
.html(self.options.title)
|
||||||
.appendTo(that.$titlebar);
|
.appendTo(that.$titlebar);
|
||||||
|
|
||||||
that.$content = new Ox.Element()
|
that.$content = Ox.Element()
|
||||||
.addClass('OxContent')
|
.addClass('OxContent')
|
||||||
.css({
|
.css({
|
||||||
padding: self.options.padding + 'px',
|
padding: self.options.padding + 'px',
|
||||||
|
@ -71,14 +71,14 @@ Ox.Dialog = function(options, self) {
|
||||||
.append(self.options.content)
|
.append(self.options.content)
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
|
|
||||||
that.$buttonsbar = new Ox.Bar({})
|
that.$buttonsbar = Ox.Bar({})
|
||||||
.addClass('OxButtonsBar')
|
.addClass('OxButtonsBar')
|
||||||
.appendTo(that);
|
.appendTo(that);
|
||||||
loadButtons();
|
loadButtons();
|
||||||
|
|
||||||
//that.$buttons[0].focus();
|
//that.$buttons[0].focus();
|
||||||
|
|
||||||
that.$layer = new Ox.Element() // fixme: Layer widget that would handle click?
|
that.$layer = Ox.Element() // fixme: Layer widget that would handle click?
|
||||||
.addClass('OxLayer')
|
.addClass('OxLayer')
|
||||||
.mousedown(mousedownLayer)
|
.mousedown(mousedownLayer)
|
||||||
.mouseup(mouseupLayer);
|
.mouseup(mouseupLayer);
|
||||||
|
@ -224,7 +224,7 @@ Ox.Dialog = function(options, self) {
|
||||||
.appendTo(that.$buttonsbar);
|
.appendTo(that.$buttonsbar);
|
||||||
});
|
});
|
||||||
if (self.options.resizable) {
|
if (self.options.resizable) {
|
||||||
that.$resize = new Ox.Element()
|
that.$resize = Ox.Element()
|
||||||
.addClass('OxResize')
|
.addClass('OxResize')
|
||||||
.dblclick(reset)
|
.dblclick(reset)
|
||||||
.bindEvent({
|
.bindEvent({
|
||||||
|
@ -304,7 +304,7 @@ Ox.Dialog = function(options, self) {
|
||||||
}, 100);
|
}, 100);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
that.center = function() {
|
that.center = function() {
|
||||||
|
|
||||||
|
@ -323,14 +323,14 @@ Ox.Dialog = function(options, self) {
|
||||||
that.removeElement();
|
that.removeElement();
|
||||||
callback();
|
callback();
|
||||||
});
|
});
|
||||||
Ox.UI.$window.unbind('mouseup', mouseupLayer)
|
Ox.UI.$window.unbind('mouseup', mouseupLayer);
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
|
||||||
that.content = function($element) {
|
that.content = function($element) {
|
||||||
that.$content.empty().append($element);
|
that.$content.empty().append($element);
|
||||||
return that;
|
return that;
|
||||||
}
|
};
|
||||||
|
|
||||||
that.disable = function() {
|
that.disable = function() {
|
||||||
// to be used on submit of form, like login
|
// to be used on submit of form, like login
|
||||||
|
@ -369,7 +369,7 @@ Ox.Dialog = function(options, self) {
|
||||||
reset();
|
reset();
|
||||||
// fixme: the following line prevents preview-style dialog
|
// fixme: the following line prevents preview-style dialog
|
||||||
that.gainFocus();
|
that.gainFocus();
|
||||||
Ox.UI.$window.bind('mouseup', mouseupLayer)
|
Ox.UI.$window.bind('mouseup', mouseupLayer);
|
||||||
//Ox.print('after open')
|
//Ox.print('after open')
|
||||||
return that;
|
return that;
|
||||||
};
|
};
|
||||||
|
@ -391,7 +391,7 @@ Ox.Dialog = function(options, self) {
|
||||||
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
|
that.$content.height(self.options.height - 48 - 2 * self.options.padding); // fixme: this should happen automatically
|
||||||
callback();
|
callback();
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
return that;
|
return that;
|
||||||
|
|
||||||
|
|
|
@ -11,8 +11,8 @@ Ox.Tooltip <f:Ox.Element> Tooltip Object
|
||||||
|
|
||||||
Ox.Tooltip = function(options, self) {
|
Ox.Tooltip = function(options, self) {
|
||||||
|
|
||||||
var self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
animate: true,
|
animate: true,
|
||||||
title: ''
|
title: ''
|
||||||
|
|
|
@ -15,8 +15,8 @@ Ox.Window <f:Ox.Element> Window object
|
||||||
@*/
|
@*/
|
||||||
Ox.Window = function(options, self) {
|
Ox.Window = function(options, self) {
|
||||||
|
|
||||||
self = self || {},
|
self = self || {};
|
||||||
that = new Ox.Element({}, self)
|
var that = Ox.Element({}, self)
|
||||||
.defaults({
|
.defaults({
|
||||||
draggable: true,
|
draggable: true,
|
||||||
fullscreenable: true, // fixme: silly name
|
fullscreenable: true, // fixme: silly name
|
||||||
|
@ -25,7 +25,7 @@ Ox.Window = function(options, self) {
|
||||||
scaleable: true,
|
scaleable: true,
|
||||||
width: 400
|
width: 400
|
||||||
})
|
})
|
||||||
.options(options || {})
|
.options(options || {});
|
||||||
|
|
||||||
self.center = function() {
|
self.center = function() {
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue