javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Working dynamic slide box

Browse Source
This commit is contained in:
Max Lynch
2013-10-16 10:26:10 -05:00
parent 77d9ef53d1
commit 6e8fcb0daf
5 changed files with 166 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
js/views/slideBox.js
View File

@ -45,6 +45,51 @@
},
prependSlide: function(el) {
var content = this.el.firstElementChild;
if(!content) { return; }
var slideWidth = content.offsetWidth;
var offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
var newOffsetX = Math.min(0, offsetX - slideWidth);
content.insertBefore(el, content.firstChild);
content.classList.remove('slide-box-animating');
content.style.webkitTransform = 'translate3d(' + newOffsetX + 'px, 0, 0)';
this._prependPagerIcon();
this.slideIndex = (this.slideIndex + 1) % content.children.length;
this._updatePager();
},
appendSlide: function(el) {
var content = this.el.firstElementChild;
if(!content) { return; }
content.classList.remove('slide-box-animating');
content.appendChild(el);
this._appendPagerIcon();
this._updatePager();
},
removeSlide: function(index) {
var content = this.el.firstElementChild;
if(!content) { return; }
var items = this.el.firstElementChild;
items.removeChild(items.firstElementChild);
var slideWidth = content.offsetWidth;
var offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
var newOffsetX = Math.min(0, offsetX + slideWidth);
content.classList.remove('slide-box-animating');
content.style.webkitTransform = 'translate3d(' + newOffsetX + 'px, 0, 0)';
this._removePagerIcon();
this.slideIndex = Math.max(0, (this.slideIndex - 1) % content.children.length);
this._updatePager();
},
/**
@ -93,6 +138,26 @@
return this.slideIndex;
},
_appendPagerIcon: function() {
if(!this.pager || !this.pager.children.length) { return; }
var newPagerChild = this.pager.children[0].cloneNode();
this.pager.appendChild(newPagerChild);
},
_prependPagerIcon: function() {
if(!this.pager || !this.pager.children.length) { return; }
var newPagerChild = this.pager.children[0].cloneNode();
this.pager.insertBefore(newPagerChild, this.pager.firstChild);
},
_removePagerIcon: function() {
if(!this.pager || !this.pager.children.length) { return; }
this.pager.removeChild(this.pager.firstElementChild);
},
/**
* If we have a pager, update the active page when the current slide
* changes.
@ -101,6 +166,14 @@
if(!this.pager) {
return;
}
var numPagerChildren = this.pager.children.length;
if(!numPagerChildren) {
// No children to update
return;
}
// Update the active state of the pager icons
for(var i = 0, j = this.pager.children.length; i < j; i++) {
if(i == this.slideIndex) {
this.pager.children[i].classList.add('active');