62 lines
1.6 KiB
JavaScript
62 lines
1.6 KiB
JavaScript
|
'use strict';
|
||
|
|
|
||
|
|
Ox.SlidePanel = function(options, self) {
|
||
|
|
|
||
|
|
self = self || {};
|
||
|
|
var that = Ox.Element({}, self)
|
||
|
|
.defaults({
|
||
|
|
animate: 250,
|
||
|
|
elements: [],
|
||
|
|
selected: ''
|
||
|
|
})
|
||
|
|
.options(options || {})
|
||
|
|
.update({
|
||
|
|
selected: function() {
|
||
|
|
selectElement(self.options.selected);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.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);
|
||
|
|
self.options.elements.forEach(function(element) {
|
||
|
|
element
|
||
|
|
.css({width: self.options.width + 'px'})
|
||
|
|
.appendTo(self.$content);
|
||
|
|
});
|
||
|
|
|
||
|
|
function getContentCSS() {
|
||
|
|
return {
|
||
|
|
left: -getIndexById(self.options.elements, self.options.selected)
|
||
|
|
* self.options.width + 'px',
|
||
|
|
width: self.options.width + 'px'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function getElementCSS(index) {
|
||
|
|
return {
|
||
|
|
left: index * self.options.width + 'px',
|
||
|
|
width: self.options.width + 'px'
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function selectElement(id) {
|
||
|
|
self.content.animate(getContentCSS(), self.options.animate);
|
||
|
|
}
|
||
|
|
|
||
|
|
that.replaceElement = function(idOrIndex, element) {
|
||
|
|
var index = Ox.isNumber(idOrIndex) ? idOrIndex
|
||
|
|
: Ox.getIndexById(self.options.elements, idOrIndex);
|
||
|
|
self.options.elements[index].replaceWith(
|
||
|
|
self.options.elements[index] = element.css(getElementCSS())
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
return that;
|
||
|
|
|
||
|
|
};
|