remove unneeded Ox. prefix from path and file names
This commit is contained in:
rolux
parent
4138e4e558
commit
51696562f1
1365 changed files with 43 additions and 43 deletions
177
source/UI/js/Panel/CollapsePanel.js
Normal file
177
source/UI/js/Panel/CollapsePanel.js
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.CollapsePanel <f> CollapsePanel Object
|
||||
options <o> Options object
|
||||
collapsed <b|false> collapsed state
|
||||
extras <a|[]> panel extras
|
||||
size <n|16> size
|
||||
title <s> title
|
||||
self <o> Shared private variable
|
||||
([options[, self]]) -> <o:Ox.Element> CollapsePanel Object
|
||||
toggle <!> toggle
|
||||
@*/
|
||||
|
||||
Ox.CollapsePanel = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
animate: true,
|
||||
collapsed: false,
|
||||
extras: [],
|
||||
size: 16,
|
||||
title: ''
|
||||
})
|
||||
.options(options)
|
||||
.update({
|
||||
collapsed: function() {
|
||||
// will be toggled again in toggleCollapsed
|
||||
self.options.collapsed = !self.options.collapsed;
|
||||
toggleCollapsed();
|
||||
},
|
||||
title: function() {
|
||||
self.$title.html(self.options.title);
|
||||
}
|
||||
})
|
||||
.addClass('OxPanel OxCollapsePanel')
|
||||
.bindEvent({
|
||||
key_left: function() {
|
||||
!self.options.collapsed && toggleCollapsed();
|
||||
},
|
||||
key_right: function() {
|
||||
self.options.collapsed && toggleCollapsed();
|
||||
}
|
||||
});
|
||||
|
||||
var index = Ox.indexOf(self.options.extras, Ox.isEmpty);
|
||||
self.extras = index > -1
|
||||
? [
|
||||
self.options.extras.slice(0, index),
|
||||
self.options.extras.slice(index + 1)
|
||||
]
|
||||
: [
|
||||
[],
|
||||
self.options.extras
|
||||
];
|
||||
|
||||
self.$titlebar = Ox.Bar({
|
||||
orientation: 'horizontal',
|
||||
size: self.options.size
|
||||
})
|
||||
.bindEvent({
|
||||
anyclick: clickTitlebar,
|
||||
doubleclick: doubleclickTitlebar
|
||||
})
|
||||
.appendTo(that);
|
||||
|
||||
self.$button = Ox.Button({
|
||||
style: 'symbol',
|
||||
type: 'image',
|
||||
value: self.options.collapsed ? 'expand' : 'collapse',
|
||||
values: [
|
||||
{id: 'expand', title: 'right'},
|
||||
{id: 'collapse', title: 'down'}
|
||||
]
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
that.gainFocus();
|
||||
toggleCollapsed(true);
|
||||
}
|
||||
})
|
||||
.appendTo(self.$titlebar);
|
||||
|
||||
self.$extras = [];
|
||||
|
||||
if (self.extras[0].length) {
|
||||
self.$extras[0] = Ox.Element()
|
||||
.addClass('OxExtras')
|
||||
.css({width: self.extras[0].length * 16 + 'px'})
|
||||
.appendTo(self.$titlebar);
|
||||
self.extras[0].forEach(function($extra) {
|
||||
$extra.appendTo(self.$extras[0]);
|
||||
});
|
||||
}
|
||||
|
||||
self.$title = Ox.Element()
|
||||
.addClass('OxTitle')
|
||||
.css({
|
||||
left: 16 + self.extras[0].length * 16 + 'px',
|
||||
right: self.extras[1].length * 16 + 'px'
|
||||
})
|
||||
.html(self.options.title)
|
||||
.appendTo(self.$titlebar);
|
||||
|
||||
if (self.extras[1].length) {
|
||||
self.$extras[1] = Ox.Element()
|
||||
.addClass('OxExtras')
|
||||
.css({width: self.extras[1].length * 16 + 'px'})
|
||||
.appendTo(self.$titlebar);
|
||||
self.extras[1].forEach(function($extra) {
|
||||
$extra.appendTo(self.$extras[1]);
|
||||
});
|
||||
}
|
||||
|
||||
that.$content = Ox.Element()
|
||||
.addClass('OxContent')
|
||||
.appendTo(that);
|
||||
// fixme: doesn't work, content still empty
|
||||
// need to hide it if collapsed
|
||||
if (self.options.collapsed) {
|
||||
that.$content.css({
|
||||
marginTop: -that.$content.height() + 'px'
|
||||
}).hide();
|
||||
}
|
||||
|
||||
function clickTitlebar(e) {
|
||||
if (!$(e.target).hasClass('OxButton')) {
|
||||
that.gainFocus();
|
||||
}
|
||||
}
|
||||
|
||||
function doubleclickTitlebar(e) {
|
||||
if (!$(e.target).hasClass('OxButton')) {
|
||||
self.$button.trigger('click');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleCollapsed(fromButton) {
|
||||
// show/hide is needed in case the collapsed content
|
||||
// grows vertically when shrinking the panel horizontally
|
||||
var marginTop;
|
||||
self.options.collapsed = !self.options.collapsed;
|
||||
marginTop = self.options.collapsed ? -that.$content.height() : 0;
|
||||
!fromButton && self.$button.toggle();
|
||||
!self.options.collapsed && that.$content.css({
|
||||
marginTop: -that.$content.height() + 'px'
|
||||
}).show();
|
||||
if (self.options.animate) {
|
||||
that.$content.animate({
|
||||
marginTop: marginTop + 'px'
|
||||
}, 250, function() {
|
||||
self.options.collapsed && that.$content.hide();
|
||||
});
|
||||
} else {
|
||||
that.$content.css({
|
||||
marginTop: marginTop + 'px'
|
||||
});
|
||||
self.options.collapsed && that.$content.hide();
|
||||
}
|
||||
that.triggerEvent('toggle', {
|
||||
collapsed: self.options.collapsed
|
||||
});
|
||||
}
|
||||
|
||||
/*@
|
||||
update <f> Update panel when in collapsed state
|
||||
@*/
|
||||
that.updatePanel = function() {
|
||||
self.options.collapsed && that.$content.css({
|
||||
marginTop: -that.$content.height()
|
||||
});
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
73
source/UI/js/Panel/SlidePanel.js
Normal file
73
source/UI/js/Panel/SlidePanel.js
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
'use strict';
|
||||
|
||||
Ox.SlidePanel = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
animate: 250,
|
||||
elements: [],
|
||||
orientation: 'horizontal',
|
||||
selected: ''
|
||||
})
|
||||
.options(options || {})
|
||||
.update({
|
||||
selected: function() {
|
||||
selectElement(self.options.selected);
|
||||
},
|
||||
size: updateElements
|
||||
})
|
||||
.addClass('OxSlidePanel');
|
||||
|
||||
if (!self.options.selected) {
|
||||
self.options.selected = self.options.elements[0].id
|
||||
}
|
||||
self.elements = self.options.elements.length;
|
||||
self.$content = Ox.Element()
|
||||
.css(getContentCSS())
|
||||
.appendTo(that);
|
||||
updateElements();
|
||||
self.options.elements.forEach(function(element, index) {
|
||||
element.element.appendTo(self.$content);
|
||||
});
|
||||
|
||||
function getContentCSS() {
|
||||
return {
|
||||
left: -Ox.getIndexById(self.options.elements, self.options.selected)
|
||||
* self.options.size + 'px',
|
||||
width: self.elements * self.options.size + 'px'
|
||||
};
|
||||
}
|
||||
|
||||
function getElementCSS(index) {
|
||||
return {
|
||||
left: index * self.options.size + 'px',
|
||||
width: self.options.size + 'px'
|
||||
};
|
||||
}
|
||||
|
||||
function selectElement(id) {
|
||||
self.$content.animate({
|
||||
left: getContentCSS().left,
|
||||
}, self.options.animate);
|
||||
}
|
||||
|
||||
function updateElements() {
|
||||
self.$content.css(getContentCSS());
|
||||
self.options.elements.forEach(function(element, index) {
|
||||
element.element.css(getElementCSS(index));
|
||||
});
|
||||
}
|
||||
|
||||
that.replaceElement = function(idOrIndex, element) {
|
||||
var index = Ox.isNumber(idOrIndex) ? idOrIndex
|
||||
: Ox.getIndexById(self.options.elements, idOrIndex);
|
||||
self.options.elements[index].element.replaceWith(
|
||||
self.options.elements[index].element = element.css(getElementCSS(index))
|
||||
);
|
||||
return that;
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
316
source/UI/js/Panel/SplitPanel.js
Normal file
316
source/UI/js/Panel/SplitPanel.js
Normal file
|
|
@ -0,0 +1,316 @@
|
|||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.SplitPanel <f> SpliPanel Object
|
||||
options <o> Options object
|
||||
elements <[o]|[]> Array of two or three element objects
|
||||
collapsible <b|false> If true, can be collapsed (if outer element)
|
||||
collapsed <b|false> If true, is collapsed (if collapsible)
|
||||
defaultSize <n|s|"auto"> Default size in px (restorable via reset)
|
||||
element <o> Any Ox.Element
|
||||
If any element is collapsible or resizable, all elements must
|
||||
have an id.
|
||||
resettable <b|false> If true, can be resetted (if outer element)
|
||||
Note that reset fires on doubleclick, and if the element is also
|
||||
collapsible, toggle now fires on singleclick, no longer on click.
|
||||
Singleclick happens 250 ms later.
|
||||
resizable <b|false> If true, can be resized (if outer element)
|
||||
resize <[n]|[]> Min size, optional snappy points, and max size
|
||||
size <n|s|"auto"> Size in px (one element must be "auto")
|
||||
tooltip <b|s|false> If true, show tooltip, if string, append it
|
||||
orientation <s|"horizontal"> orientation ("horizontal" or "vertical")
|
||||
self <o> Shared private variable
|
||||
([options[, self]]) -> <o:Ox.Element> SpliPanel Object
|
||||
resize <!> resize
|
||||
Fires on resize, on both elements being resized
|
||||
resizeend <!> resizeend
|
||||
Fires on resize, on both elements being resized
|
||||
resizepause <!> resizepause
|
||||
Fires on resize, on both elements being resized
|
||||
toggle <!> toggle
|
||||
Fires on collapse or expand, on the element being toggled
|
||||
@*/
|
||||
|
||||
Ox.SplitPanel = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
elements: [],
|
||||
orientation: 'horizontal'
|
||||
})
|
||||
.options(options || {})
|
||||
.addClass('OxSplitPanel');
|
||||
|
||||
self.defaultSize = self.options.elements.map(function(element) {
|
||||
return !Ox.isUndefined(element.defaultSize)
|
||||
? element.defaultSize : element.size;
|
||||
});
|
||||
self.dimensions = Ox.UI.DIMENSIONS[self.options.orientation];
|
||||
self.edges = Ox.UI.EDGES[self.options.orientation];
|
||||
self.initialized = false;
|
||||
self.length = self.options.elements.length;
|
||||
|
||||
self.$elements = [];
|
||||
self.$resizebars = [];
|
||||
self.options.elements.forEach(function(element, index) {
|
||||
var elementIndices = index == 0 ? [0, 1] : index == 1 ? [1, 0] : [2, 1],
|
||||
resizebarIndex = self.$resizebars.length;
|
||||
self.options.elements[index] = Ox.extend({
|
||||
collapsible: false,
|
||||
collapsed: false,
|
||||
defaultSize: 'auto',
|
||||
resettable: false,
|
||||
resizable: false,
|
||||
resize: [],
|
||||
size: 'auto',
|
||||
tooltip: false
|
||||
}, element);
|
||||
// top and bottom (horizontal) or left and right (vertical)
|
||||
self.edges.slice(2).forEach(function(edge) {
|
||||
element.element.css(
|
||||
edge, (parseInt(element.element.css(edge)) || 0) + 'px'
|
||||
);
|
||||
});
|
||||
if (element.collapsed) {
|
||||
// left/right (horizontal) or top/bottom (vertical)
|
||||
that.css(self.edges[index == 0 ? 0 : 1], -element.size + 'px');
|
||||
}
|
||||
self.$elements[index] = element.element.appendTo(that);
|
||||
if (element.collapsible || element.resizable) {
|
||||
self.$resizebars[resizebarIndex] = Ox.Resizebar({
|
||||
collapsed: element.collapsed,
|
||||
collapsible: element.collapsible,
|
||||
edge: self.edges[index == 0 ? 0 : 1],
|
||||
orientation: self.options.orientation == 'horizontal'
|
||||
? 'vertical' : 'horizontal',
|
||||
resettable: element.resettable,
|
||||
resizable: element.resizable,
|
||||
resize: element.resize,
|
||||
size: element.size,
|
||||
tooltip: element.tooltip === true ? '' : element.tooltip
|
||||
})
|
||||
.bindEvent({
|
||||
reset: function() {
|
||||
that.resetElement(index);
|
||||
},
|
||||
resize: function(data) {
|
||||
onResize(elementIndices, data.size);
|
||||
triggerEvents(elementIndices, 'resize', data);
|
||||
},
|
||||
resizepause: function(data) {
|
||||
triggerEvents(elementIndices, 'resizepause', data);
|
||||
},
|
||||
resizeend: function(data) {
|
||||
triggerEvents(elementIndices, 'resizeend', data);
|
||||
},
|
||||
toggle: function(data) {
|
||||
that.toggleElement(index);
|
||||
}
|
||||
})
|
||||
[index == 0 ? 'insertAfter' : 'insertBefore'](self.$elements[index]);
|
||||
}
|
||||
});
|
||||
|
||||
setSizes();
|
||||
|
||||
function getSize(index) {
|
||||
var element = self.options.elements[index];
|
||||
return element.size + (element.collapsible || element.resizable);
|
||||
}
|
||||
|
||||
function getVisibleSize(index) {
|
||||
var element = self.options.elements[index];
|
||||
return getSize(index) * !element.collapsed;
|
||||
}
|
||||
|
||||
function onResize(elementIndices, size) {
|
||||
var dimension = self.dimensions[0],
|
||||
edge = self.edges[elementIndices[0] == 0 ? 0 : 1];
|
||||
self.options.elements[elementIndices[0]].size = size;
|
||||
elementIndices.forEach(function(elementIndex, index) {
|
||||
self.$elements[elementIndex].css(
|
||||
index == 0 ? dimension : edge,
|
||||
(index == 0 ? size : size + 1) + 'px'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
function setSizes(animate) {
|
||||
// will animate if animate is truthy and call animate if it's a function
|
||||
self.options.elements.forEach(function(element, index) {
|
||||
var $resizebar,
|
||||
css = {},
|
||||
edges = self.edges.slice(0, 2).map(function(edge) {
|
||||
// left/right (horizontal) or top/bottom (vertical)
|
||||
var value = parseInt(self.$elements[index].css(edge));
|
||||
return !self.initialized && value || 0;
|
||||
});
|
||||
if (element.size != 'auto') {
|
||||
// width (horizontal) or height (vertical)
|
||||
css[self.dimensions[0]] = element.size + 'px';
|
||||
}
|
||||
if (index == 0) {
|
||||
// left (horizontal) or top (vertical)
|
||||
css[self.edges[0]] = edges[0] + 'px';
|
||||
// right (horizontal) or bottom (vertical)
|
||||
if (element.size == 'auto') {
|
||||
css[self.edges[1]] = getSize(1) + (
|
||||
self.length == 3 ? getVisibleSize(2) : 0
|
||||
) + 'px';
|
||||
}
|
||||
} else if (index == 1) {
|
||||
// left (horizontal) or top (vertical)
|
||||
if (self.options.elements[0].size != 'auto') {
|
||||
css[self.edges[0]] = edges[0] + getSize(0) + 'px';
|
||||
} else {
|
||||
css[self.edges[0]] = 'auto'; // fixme: why is this needed?
|
||||
}
|
||||
// right (horizontal) or bottom (vertical)
|
||||
css[self.edges[1]] = (self.length == 3 ? getSize(2) : 0) + 'px';
|
||||
} else {
|
||||
// left (horizontal) or top (vertical)
|
||||
if (element.size == 'auto') {
|
||||
css[self.edges[0]] = getVisibleSize(0) + getSize(1) + 'px';
|
||||
} else {
|
||||
css[self.edges[0]] = 'auto'; // fixme: why is this needed?
|
||||
}
|
||||
// right (horizontal) or bottom (vertical)
|
||||
css[self.edges[1]] = edges[1] + 'px';
|
||||
}
|
||||
if (animate) {
|
||||
self.$elements[index].animate(css, 250, function() {
|
||||
index == 0 && Ox.isFunction(animate) && animate();
|
||||
});
|
||||
} else {
|
||||
self.$elements[index].css(css);
|
||||
}
|
||||
if (element.collapsible || element.resizable) {
|
||||
$resizebar = self.$resizebars[
|
||||
index < 2 ? 0 : self.$resizebars.length - 1
|
||||
];
|
||||
// left or right (horizontal) or top or bottom (vertical)
|
||||
css = Ox.extend(
|
||||
{}, self.edges[index == 0 ? 0 : 1], element.size + 'px'
|
||||
);
|
||||
if (animate) {
|
||||
$resizebar.animate(css, 250);
|
||||
} else {
|
||||
$resizebar.css(css);
|
||||
}
|
||||
$resizebar.options({size: element.size});
|
||||
}
|
||||
});
|
||||
self.initialized = true;
|
||||
}
|
||||
|
||||
function triggerEvents(elementIndices, event, data) {
|
||||
elementIndices.forEach(function(elementIndex, index) {
|
||||
var $element = self.$elements[elementIndex],
|
||||
size = index == 0 ? data.size : $element[self.dimensions[0]]();
|
||||
$element.triggerEvent(event, {size: size});
|
||||
});
|
||||
}
|
||||
|
||||
/*@
|
||||
isCollapsed <f> Tests if an outer element is collapsed
|
||||
(index) -> <b> True if collapsed
|
||||
index <i> The element's index
|
||||
@*/
|
||||
that.isCollapsed = function(index) {
|
||||
return self.options.elements[index].collapsed;
|
||||
};
|
||||
|
||||
/*@
|
||||
replaceElement <f> Replaces an element
|
||||
(index, element) -> <f> replace element
|
||||
index <n> The element's index
|
||||
element <o> New element
|
||||
@*/
|
||||
that.replaceElement = function(index, element) {
|
||||
// top and bottom (horizontal) or left and right (vertical)
|
||||
self.edges.slice(2).forEach(function(edge) {
|
||||
element.css(edge, (parseInt(element.css(edge)) || 0) + 'px');
|
||||
});
|
||||
self.$elements[index] = element;
|
||||
self.options.elements[index].element.replaceWith(
|
||||
self.options.elements[index].element = element
|
||||
);
|
||||
setSizes();
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
resetElement <f> Resets an outer element to its initial size
|
||||
@*/
|
||||
that.resetElement = function(index) {
|
||||
var element = self.options.elements[index];
|
||||
element.size = self.defaultSize[index];
|
||||
setSizes(function() {
|
||||
element.element.triggerEvent('resize', {
|
||||
size: element.size
|
||||
});
|
||||
element = self.options.elements[index == 0 ? 1 : index - 1];
|
||||
element.element.triggerEvent('resize', {
|
||||
size: element.element[self.dimensions[0]]()
|
||||
});
|
||||
});
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
size <f> Get or set size of an element
|
||||
(index) -> <i> Returns size
|
||||
(index, size) -> <o> Sets size, returns SplitPanel
|
||||
(index, size, callback) -> <o> Sets size with animation, returns SplitPanel
|
||||
index <i> The element's index
|
||||
size <i> New size, in px
|
||||
callback <b|f> Callback function (passing true animates w/o callback)
|
||||
@*/
|
||||
that.resizeElement = that.size = function(index, size, callback) {
|
||||
var element = self.options.elements[index];
|
||||
if (arguments.length == 1) {
|
||||
return element.element[self.dimensions[0]]()
|
||||
* !that.isCollapsed(index);
|
||||
} else {
|
||||
element.size = size;
|
||||
setSizes(callback);
|
||||
return that;
|
||||
}
|
||||
};
|
||||
|
||||
/*@
|
||||
toggleElement <f> Toggles collapsed state of an outer element
|
||||
(index) -> <o> The SplitPanel
|
||||
index <s|i> The element's index
|
||||
@*/
|
||||
that.toggleElement = function(index) {
|
||||
if (self.toggling) {
|
||||
return that;
|
||||
}
|
||||
var element = self.options.elements[index],
|
||||
value = parseInt(that.css(self.edges[index == 0 ? 0 : 1]))
|
||||
+ element.element[self.dimensions[0]]()
|
||||
* (element.collapsed ? 1 : -1),
|
||||
animate = Ox.extend({}, self.edges[index == 0 ? 0 : 1], value);
|
||||
self.toggling = true;
|
||||
that.animate(animate, 250, function() {
|
||||
element.collapsed = !element.collapsed;
|
||||
element.element.triggerEvent('toggle', {
|
||||
collapsed: element.collapsed
|
||||
});
|
||||
self.$resizebars[index < 2 ? 0 : self.$resizebars.length - 1].options({
|
||||
collapsed: element.collapsed
|
||||
});
|
||||
element = self.options.elements[index == 0 ? 1 : index - 1];
|
||||
element.element.triggerEvent('resize', {
|
||||
size: element.element[self.dimensions[0]]()
|
||||
});
|
||||
self.toggling = false;
|
||||
});
|
||||
return that;
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
112
source/UI/js/Panel/TabPanel.js
Normal file
112
source/UI/js/Panel/TabPanel.js
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
'use strict';
|
||||
|
||||
/*@
|
||||
Ox.TabPanel <f> Tabbed panel
|
||||
options <o> Options
|
||||
content <o|f> Content per tab
|
||||
Either `({id1: $element1, id2: $element2}}` or `function(id) {
|
||||
return $element; })`
|
||||
size <n|24> Height of the tab bar
|
||||
tabs [o] Tabs
|
||||
id <s> Tab id
|
||||
title <s> Tab title
|
||||
self <o> Shared private variable
|
||||
([options[, self]]) -> <o:Ox.SplitPanel> Panel
|
||||
change <!> change
|
||||
@*/
|
||||
|
||||
Ox.TabPanel = function(options, self) {
|
||||
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
.defaults({
|
||||
content: null,
|
||||
size: 24,
|
||||
tabs: []
|
||||
})
|
||||
.options(options || {})
|
||||
.update({
|
||||
content: function() {
|
||||
self.$panel.replaceElement(1, getContent());
|
||||
}
|
||||
});
|
||||
|
||||
self.isObject = Ox.isObject(self.options.content);
|
||||
self.selected = getSelected();
|
||||
|
||||
self.$bar = Ox.Bar({size: 24});
|
||||
|
||||
self.$tabs = Ox.ButtonGroup({
|
||||
buttons: self.options.tabs,
|
||||
id: 'tabs',
|
||||
selectable: true,
|
||||
value: self.selected
|
||||
})
|
||||
.css({top: (self.options.size - 16) / 2 + 'px'})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
self.selected = data.value;
|
||||
self.$panel.replaceElement(1, getContent());
|
||||
that.triggerEvent('change', {selected: self.selected});
|
||||
}
|
||||
})
|
||||
.appendTo(self.$bar);
|
||||
|
||||
self.$panel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: self.$bar,
|
||||
size: self.options.size
|
||||
},
|
||||
{
|
||||
element: getContent()
|
||||
}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
})
|
||||
.addClass('OxTabPanel');
|
||||
|
||||
that.setElement(self.$panel);
|
||||
|
||||
function getContent() {
|
||||
return self.isObject
|
||||
? self.options.content[self.selected]
|
||||
: self.options.content(self.selected);
|
||||
}
|
||||
|
||||
function getSelected() {
|
||||
var selected = self.options.tabs.filter(function(tab) {
|
||||
return tab.selected;
|
||||
});
|
||||
return (selected.length ? selected : self.options.tabs)[0].id;
|
||||
}
|
||||
|
||||
//@ reloadPanel <f> reload panel
|
||||
that.reloadPanel = function() {
|
||||
self.$panel.replaceElement(1, getContent());
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
select <f> select
|
||||
(id) -> <o> select panel
|
||||
@*/
|
||||
// FIXME: remove select (collides with a jquery method)
|
||||
that.select = that.selectTab = function(id) {
|
||||
if (Ox.getIndexById(self.options.tabs, id) > -1) {
|
||||
self.$tabs.options({value: id});
|
||||
}
|
||||
return that;
|
||||
};
|
||||
|
||||
/*@
|
||||
selected <f> selected
|
||||
() -> <b> return selected panel
|
||||
@*/
|
||||
that.selected = function() {
|
||||
return self.selected;
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue