diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 279e1839ff..a76de70d7f 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -3034,12 +3034,12 @@ a.button { .slide-box-animating { -webkit-transition-duration: 0.2s; } -.slide { +.slide-box-slide { display: inline-block; vertical-align: top; width: 100%; height: 100%; } - .slide img { + .slide-box-slide img { width: 100%; } .slide-box-pager { @@ -3052,7 +3052,7 @@ a.button { text-decoration: none; margin: 0px 5px; color: #fff; - opacity: 0.5; } + opacity: 0.3; } .slide-box-pager > *.active { -webkit-transition: opacity 0.4s ease-in; opacity: 1; } diff --git a/dist/js/ionic.js b/dist/js/ionic.js index f237e14b2d..13326d6202 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -2311,6 +2311,51 @@ window.ionic = { }, 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(); }, /** @@ -2359,6 +2404,26 @@ window.ionic = { 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. @@ -2367,6 +2432,14 @@ window.ionic = { 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'); diff --git a/js/views/slideBox.js b/js/views/slideBox.js index 34a494e0de..2c8dea0d18 100644 --- a/js/views/slideBox.js +++ b/js/views/slideBox.js @@ -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'); diff --git a/scss/ionic/_slideBox.scss b/scss/ionic/_slideBox.scss index 2b8413cd4e..e0ad0667e9 100644 --- a/scss/ionic/_slideBox.scss +++ b/scss/ionic/_slideBox.scss @@ -15,7 +15,7 @@ .slide-box-animating { -webkit-transition-duration: 0.2s; } -.slide { +.slide-box-slide { display: inline-block; vertical-align: top; width: 100%; @@ -38,8 +38,7 @@ margin: 0px 5px; color: #fff; - opacity: 0.5; - + opacity: 0.3; &.active { -webkit-transition: opacity 0.4s ease-in; diff --git a/test/slideBox.html b/test/slideBox.html index 003bd7faa8..30b8870b98 100644 --- a/test/slideBox.html +++ b/test/slideBox.html @@ -22,24 +22,25 @@
- - + + +
-
+
-
+
-
+
- 1 - 2 - 3 + + +
@@ -56,7 +57,7 @@ }); document.getElementById('prepend').addEventListener('click', function(e) { var content = document.createElement('div'); - content.className = 'slide-box-content'; + content.className = 'slide-box-slide'; content.innerHTML = '';//http://1.bp.blogspot.com/_6bMuhb3yWOA/TSiS2nYfQoI/AAAAAAAAAGA/AXOlDxrmMNQ/s1600/cow.jpg">'; @@ -78,9 +79,8 @@ }); document.getElementById('append').addEventListener('click', function(e) { var content = document.createElement('div'); - content.className = 'slide-box-content'; + content.className = 'slide-box-slide'; content.innerHTML = '';//http://1.bp.blogspot.com/_6bMuhb3yWOA/TSiS2nYfQoI/AAAAAAAAAGA/AXOlDxrmMNQ/s1600/cow.jpg">'; - var items = b.querySelector('.slide-box-items'); box.appendSlide(content); @@ -92,6 +92,10 @@ */ }); + document.getElementById('remove').addEventListener('click', function(e) { + var items = b.querySelector('.slide-box-slides'); + box.removeSlide(0); + }); /* */