Skip to content

Commit 75594db

Browse files
author
Max Lynch
committed
Removed two click simulators that don't work on android
1 parent efe5d33 commit 75594db

File tree

2 files changed

+348
-4
lines changed

2 files changed

+348
-4
lines changed

dist/js/ionic.js

Lines changed: 342 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1804,7 +1804,9 @@ window.ionic = {
18041804
if(ele.type === "radio" || ele.type === "checkbox") {
18051805
//ele.checked = !ele.checked;
18061806
} else if(ele.type === "submit" || ele.type === "button") {
1807-
ele.click();
1807+
ionic.trigger('click', {
1808+
target: ele
1809+
});
18081810
} else {
18091811
ele.focus();
18101812
}
@@ -1840,7 +1842,9 @@ window.ionic = {
18401842
} else if( ele.tagName === "A" ) {
18411843
var href = ele.getAttribute('href');
18421844
if(href) {
1843-
ele.click();
1845+
ionic.trigger('click', {
1846+
target: ele
1847+
});
18441848
e.stopPropagation();
18451849
e.preventDefault();
18461850
return false;
@@ -3686,6 +3690,342 @@ window.ionic = {
36863690

36873691
})(ionic);
36883692
;
3693+
/**
3694+
* The SlideBox is a swipeable, slidable, slideshowable box. Think of any image gallery
3695+
* or iOS "dot" pager gallery, or maybe a carousel.
3696+
*
3697+
* Each screen fills the full width and height of the viewport, and screens can
3698+
* be swiped between, or set to automatically transition.
3699+
*/
3700+
(function(ionic) {
3701+
'use strict';
3702+
3703+
ionic.views.SlideBox = ionic.views.View.inherit({
3704+
initialize: function(opts) {
3705+
var _this = this;
3706+
3707+
this.slideChanged = opts.slideChanged || function() {};
3708+
this.el = opts.el;
3709+
this.pager = this.el.querySelector('.slide-box-pager');
3710+
3711+
// The drag threshold is the pixel delta that will trigger a drag (to
3712+
// avoid accidental dragging)
3713+
this.dragThresholdX = opts.dragThresholdX || 10;
3714+
// The velocity threshold is a velocity of drag that indicates a "swipe". This
3715+
// number is taken from hammer.js's calculations
3716+
this.velocityXThreshold = opts.velocityXThreshold || 0.3;
3717+
3718+
// Initialize the slide index to the first page and update the pager
3719+
this.slideIndex = 0;
3720+
this._updatePager();
3721+
3722+
// Listen for drag and release events
3723+
window.ionic.onGesture('drag', function(e) {
3724+
_this._handleDrag(e);
3725+
}, this.el);
3726+
window.ionic.onGesture('release', function(e) {
3727+
_this._handleEndDrag(e);
3728+
}, this.el);
3729+
},
3730+
3731+
/**
3732+
* Tell the pager to update itself if content is added or
3733+
* removed.
3734+
*/
3735+
update: function() {
3736+
this._updatePager();
3737+
},
3738+
3739+
prependSlide: function(el) {
3740+
var content = this.el.firstElementChild;
3741+
if(!content) { return; }
3742+
3743+
var slideWidth = content.offsetWidth;
3744+
var offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
3745+
var newOffsetX = Math.min(0, offsetX - slideWidth);
3746+
3747+
content.insertBefore(el, content.firstChild);
3748+
3749+
content.classList.remove('slide-box-animating');
3750+
content.style.webkitTransform = 'translate3d(' + newOffsetX + 'px, 0, 0)';
3751+
3752+
this._prependPagerIcon();
3753+
this.slideIndex = (this.slideIndex + 1) % content.children.length;
3754+
this._updatePager();
3755+
},
3756+
3757+
appendSlide: function(el) {
3758+
var content = this.el.firstElementChild;
3759+
if(!content) { return; }
3760+
3761+
content.classList.remove('slide-box-animating');
3762+
content.appendChild(el);
3763+
3764+
this._appendPagerIcon();
3765+
this._updatePager();
3766+
},
3767+
3768+
removeSlide: function(index) {
3769+
var content = this.el.firstElementChild;
3770+
if(!content) { return; }
3771+
3772+
var items = this.el.firstElementChild;
3773+
items.removeChild(items.firstElementChild);
3774+
3775+
var slideWidth = content.offsetWidth;
3776+
var offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
3777+
var newOffsetX = Math.min(0, offsetX + slideWidth);
3778+
3779+
content.classList.remove('slide-box-animating');
3780+
content.style.webkitTransform = 'translate3d(' + newOffsetX + 'px, 0, 0)';
3781+
3782+
this._removePagerIcon();
3783+
this.slideIndex = Math.max(0, (this.slideIndex - 1) % content.children.length);
3784+
this._updatePager();
3785+
},
3786+
3787+
/**
3788+
* Slide to the given slide index.
3789+
*
3790+
* @param {int} the index of the slide to animate to.
3791+
*/
3792+
slideToSlide: function(index) {
3793+
var content = this.el.firstElementChild;
3794+
if(!content) {
3795+
return;
3796+
}
3797+
3798+
// Get the width of one slide
3799+
var slideWidth = content.offsetWidth;
3800+
3801+
// Calculate the new offsetX position which is just
3802+
// N slides to the left, where N is the given index
3803+
var offsetX = index * slideWidth;
3804+
3805+
// Calculate the max X position we'd allow based on how many slides
3806+
// there are.
3807+
var maxX = Math.max(0, content.children.length - 1) * slideWidth;
3808+
3809+
// Bounds the offset X position in the range maxX >= offsetX >= 0
3810+
offsetX = offsetX < 0 ? 0 : offsetX > maxX ? maxX : offsetX;
3811+
3812+
// Animate and slide the slides over
3813+
content.classList.add('slide-box-animating');
3814+
content.style.webkitTransform = 'translate3d(' + -offsetX + 'px, 0, 0)';
3815+
3816+
var lastSlide = this.slideIndex;
3817+
3818+
// Update the slide index
3819+
this.slideIndex = Math.ceil(offsetX / slideWidth);
3820+
3821+
if(lastSlide !== this.slideIndex) {
3822+
this.slideChanged && this.slideChanged(this.slideIndex);
3823+
}
3824+
3825+
this._updatePager();
3826+
},
3827+
3828+
/**
3829+
* Get the currently set slide index. This method
3830+
* is updated before any transitions run, so the
3831+
* value could be early.
3832+
*
3833+
* @return {int} the current slide index
3834+
*/
3835+
getSlideIndex: function() {
3836+
return this.slideIndex;
3837+
},
3838+
3839+
_appendPagerIcon: function() {
3840+
if(!this.pager || !this.pager.children.length) { return; }
3841+
3842+
var newPagerChild = this.pager.children[0].cloneNode();
3843+
this.pager.appendChild(newPagerChild);
3844+
},
3845+
3846+
_prependPagerIcon: function() {
3847+
if(!this.pager || !this.pager.children.length) { return; }
3848+
3849+
var newPagerChild = this.pager.children[0].cloneNode();
3850+
this.pager.insertBefore(newPagerChild, this.pager.firstChild);
3851+
},
3852+
3853+
_removePagerIcon: function() {
3854+
if(!this.pager || !this.pager.children.length) { return; }
3855+
3856+
this.pager.removeChild(this.pager.firstElementChild);
3857+
},
3858+
3859+
/**
3860+
* If we have a pager, update the active page when the current slide
3861+
* changes.
3862+
*/
3863+
_updatePager: function() {
3864+
if(!this.pager) {
3865+
return;
3866+
}
3867+
3868+
var numPagerChildren = this.pager.children.length;
3869+
if(!numPagerChildren) {
3870+
// No children to update
3871+
return;
3872+
}
3873+
3874+
// Update the active state of the pager icons
3875+
for(var i = 0, j = this.pager.children.length; i < j; i++) {
3876+
if(i == this.slideIndex) {
3877+
this.pager.children[i].classList.add('active');
3878+
} else {
3879+
this.pager.children[i].classList.remove('active');
3880+
}
3881+
}
3882+
},
3883+
3884+
_initDrag: function() {
3885+
this._isDragging = false;
3886+
this._drag = null;
3887+
},
3888+
3889+
_handleEndDrag: function(e) {
3890+
var _this = this,
3891+
finalOffsetX, content, ratio, slideWidth, totalWidth, offsetX;
3892+
3893+
window.rAF(function() {
3894+
3895+
// We didn't have a drag, so just init and leave
3896+
if(!_this._drag) {
3897+
_this._initDrag();
3898+
return;
3899+
}
3900+
3901+
// We did have a drag, so we need to snap to the correct spot
3902+
3903+
// Grab the content layer
3904+
content = _this._drag.content;
3905+
3906+
// Enable transition duration
3907+
content.classList.add('slide-box-animating');
3908+
3909+
// Grab the current offset X position
3910+
offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
3911+
3912+
// Calculate how wide a single slide is, and their total width
3913+
slideWidth = content.offsetWidth;
3914+
totalWidth = content.offsetWidth * content.children.length;
3915+
3916+
// Calculate how far in this slide we've dragged
3917+
ratio = (offsetX % slideWidth) / slideWidth;
3918+
3919+
if(ratio >= 0) {
3920+
// Anything greater than zero is too far left, this is an extreme case
3921+
// TODO: Do we need this anymore?
3922+
finalOffsetX = 0;
3923+
} else if(ratio >= -0.5) {
3924+
// We are less than half-way through a drag
3925+
// Sliiide to the left
3926+
finalOffsetX = Math.max(0, Math.floor(Math.abs(offsetX) / slideWidth) * slideWidth);
3927+
} else {
3928+
// We are more than half-way through a drag
3929+
// Sliiide to the right
3930+
finalOffsetX = Math.min(totalWidth - slideWidth, Math.ceil(Math.abs(offsetX) / slideWidth) * slideWidth);
3931+
}
3932+
3933+
3934+
if(e.gesture.velocityX > _this.velocityXThreshold) {
3935+
if(e.gesture.direction == 'left') {
3936+
_this.slideToSlide(_this.slideIndex + 1);
3937+
} else if(e.gesture.direction == 'right') {
3938+
_this.slideToSlide(_this.slideIndex - 1);
3939+
}
3940+
} else {
3941+
// Calculate the new slide index (or "page")
3942+
_this.slideIndex = Math.ceil(finalOffsetX / slideWidth);
3943+
3944+
// Negative offsetX to slide correctly
3945+
content.style.webkitTransform = 'translate3d(' + -finalOffsetX + 'px, 0, 0)';
3946+
}
3947+
3948+
_this._initDrag();
3949+
});
3950+
},
3951+
3952+
/**
3953+
* Initialize a drag by grabbing the content area to drag, and any other
3954+
* info we might need for the dragging.
3955+
*/
3956+
_startDrag: function(e) {
3957+
var offsetX, content;
3958+
3959+
this._initDrag();
3960+
3961+
// Make sure to grab the element we will slide as our target
3962+
content = ionic.DomUtil.getParentOrSelfWithClass(e.target, 'slide-box-slides');
3963+
if(!content) {
3964+
return;
3965+
}
3966+
3967+
// Disable transitions during drag
3968+
content.classList.remove('slide-box-animating');
3969+
3970+
// Grab the starting X point for the item (for example, so we can tell whether it is open or closed to start)
3971+
offsetX = parseFloat(content.style.webkitTransform.replace('translate3d(', '').split(',')[0]) || 0;
3972+
3973+
this._drag = {
3974+
content: content,
3975+
startOffsetX: offsetX,
3976+
resist: 1
3977+
};
3978+
},
3979+
3980+
/**
3981+
* Process the drag event to move the item to the left or right.
3982+
*/
3983+
_handleDrag: function(e) {
3984+
var _this = this;
3985+
3986+
window.rAF(function() {
3987+
var content;
3988+
3989+
// We really aren't dragging
3990+
if(!_this._drag) {
3991+
_this._startDrag(e);
3992+
}
3993+
3994+
// Sanity
3995+
if(!_this._drag) { return; }
3996+
3997+
// Stop any default events during the drag
3998+
e.preventDefault();
3999+
4000+
// Check if we should start dragging. Check if we've dragged past the threshold.
4001+
if(!_this._isDragging && (Math.abs(e.gesture.deltaX) > _this.dragThresholdX)) {
4002+
_this._isDragging = true;
4003+
}
4004+
4005+
if(_this._isDragging) {
4006+
content = _this._drag.content;
4007+
4008+
var newX = _this._drag.startOffsetX + (e.gesture.deltaX / _this._drag.resist);
4009+
4010+
var rightMostX = -(content.offsetWidth * Math.max(0, content.children.length - 1));
4011+
4012+
if(newX > 0) {
4013+
// We are dragging past the leftmost pane, rubber band
4014+
_this._drag.resist = (newX / content.offsetWidth) + 1.4;
4015+
} else if(newX < rightMostX) {
4016+
// Dragging past the rightmost pane, rubber band
4017+
//newX = Math.min(rightMostX, + (((e.gesture.deltaX + buttonsWidth) * 0.4)));
4018+
_this._drag.resist = (Math.abs(newX) / content.offsetWidth) - 0.6;
4019+
}
4020+
4021+
_this._drag.content.style.webkitTransform = 'translate3d(' + newX + 'px, 0, 0)';
4022+
}
4023+
});
4024+
}
4025+
});
4026+
4027+
})(window.ionic);
4028+
;
36894029
(function(ionic) {
36904030
'use strict';
36914031

js/utils/poly.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@
3333
if(ele.type === "radio" || ele.type === "checkbox") {
3434
//ele.checked = !ele.checked;
3535
} else if(ele.type === "submit" || ele.type === "button") {
36-
ele.click();
36+
ionic.trigger('click', {
37+
target: ele
38+
});
3739
} else {
3840
ele.focus();
3941
}
@@ -69,7 +71,9 @@
6971
} else if( ele.tagName === "A" ) {
7072
var href = ele.getAttribute('href');
7173
if(href) {
72-
ele.click();
74+
ionic.trigger('click', {
75+
target: ele
76+
});
7377
e.stopPropagation();
7478
e.preventDefault();
7579
return false;

0 commit comments

Comments
 (0)