oxjs/source/Ox.UI/js/Panel/SlidePanel.js

71 lines
1.9 KiB
JavaScript
Raw Normal View History

2014-05-04 18:49:07 +00:00
'use strict';
Ox.SlidePanel = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
animate: 250,
elements: [],
2014-05-04 22:55:36 +00:00
orientation: 'horizontal',
2014-05-04 18:49:07 +00:00
selected: ''
})
.options(options || {})
.update({
selected: function() {
selectElement(self.options.selected);
2014-05-04 22:55:36 +00:00
},
size: updateElements
2014-05-04 18:49:07 +00:00
})
.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);
2014-05-04 22:55:36 +00:00
updateElements();
self.options.elements.forEach(function(element, index) {
element.element.appendTo(self.$content);
2014-05-04 18:49:07 +00:00
});
function getContentCSS() {
return {
2014-05-04 22:55:36 +00:00
left: -Ox.getIndexById(self.options.elements, self.options.selected)
* self.options.size + 'px',
2014-05-05 22:12:35 +00:00
width: self.elements * self.options.size + 'px'
2014-05-04 18:49:07 +00:00
};
}
function getElementCSS(index) {
return {
2014-05-04 22:55:36 +00:00
left: index * self.options.size + 'px',
width: self.options.size + 'px'
2014-05-04 18:49:07 +00:00
};
}
function selectElement(id) {
2014-05-05 22:12:35 +00:00
self.$content.animate({
left: getContentCSS().left,
}, self.options.animate);
2014-05-04 22:55:36 +00:00
}
function updateElements() {
self.options.elements.forEach(function(element, index) {
element.element.css(getElementCSS(index));
});
2014-05-04 18:49:07 +00:00
}
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;
};