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

6
dist/css/ionic.css vendored
View File

@ -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; }

73
dist/js/ionic.js vendored
View File

@ -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');

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');

5
scss/ionic/_slideBox.scss
View File

@ -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;

26
test/slideBox.html
View File

@ -22,24 +22,25 @@
<main class="content-wrapper">
<div class="content has-header">
<button id="prepend" class="button button-primary">Prepend content</button>
<button id="append" class="button button-primary">Append content</button>
<button id="prepend" class="button button-primary">Prepend</button>
<button id="append" class="button button-primary">Append</button>
<button id="remove" class="button button-danger">Remove</button>
<div class="slide-box" id="slide-box">
<div class="slide-box-slides">
<div class="slide">
<div class="slide-box-slide">
<img src="http://1.bp.blogspot.com/-kXS3MLcpTPw/T4rZBW2p8DI/AAAAAAAABqI/tR5aiO4Cj58/s1600/cows2.jpg">
</div>
<div class="slide">
<div class="slide-box-slide">
<img src="http://farm6.staticflickr.com/5226/5663664227_ba5e573930_z.jpg">
</div>
<div class="slide">
<div class="slide-box-slide">
<img src="http://i677.photobucket.com/albums/vv137/smileytrucker/cow-toy-car-stuck-head-1259518194w.jpg">
</div>
</div>
<div class="slide-box-pager">
<span>1</span>
<span>2</span>
<span>3</span>
<span><i class="icon-record"></i></span>
<span><i class="icon-record"></i></span>
<span><i class="icon-record"></i></span>
</div>
</div>
</div>
@ -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 = '<img src="http://1.bp.blogspot.com/-A1IIpwx7jnE/TymvyGvjxNI/AAAAAAAAHi4/80CCftqRY0o/s640/sweetheart2.jpg">';//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 = '<img src="http://1.bp.blogspot.com/-A1IIpwx7jnE/TymvyGvjxNI/AAAAAAAAHi4/80CCftqRY0o/s640/sweetheart2.jpg">';//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);
});
/*
*/
</script>