Skip to content

Commit

Permalink
fix tap event on Windows Phone
Browse files Browse the repository at this point in the history
  • Loading branch information
@qathom
qathom committed Apr 1, 2016
1 parent 932c9da commit 9d25ddd
Show file tree
Hide file tree
Showing 11 changed files with 135 additions and 122 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
### 1.2.4 (2016-04-01)

#### Bug Fixes

* tap event on Windows Phone (IE11 and IE10) [#107](https://github.com/quark-dev/Phonon-Framework/issues/107)
* header bar in panels always visible when closed

### 1.2.3 (2016-04-01)

#### Bug Fixes
Expand Down
14 changes: 8 additions & 6 deletions dist/css/components/panels.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,17 +35,11 @@
transition: transform 300ms, opacity 1ms;
transition: transform 300ms, opacity 1ms, -webkit-transform 300ms;
}
.panel .header-bar {
visibility: hidden;
}
.panel.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
.panel.active .header-bar {
visibility: visible;
}
.panel .content {
position: relative;
overflow: hidden;
Expand Down Expand Up @@ -86,3 +80,11 @@
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
}
.panel .header-bar,
.panel-full .header-bar {
visibility: hidden;
}
.panel.active .header-bar,
.panel-full.active .header-bar {
visibility: visible;
}
2 changes: 1 addition & 1 deletion dist/css/components/panels.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 8 additions & 6 deletions dist/css/phonon.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1397,17 +1397,11 @@ table,
transition: transform 300ms, opacity 1ms;
transition: transform 300ms, opacity 1ms, -webkit-transform 300ms;
}
.panel .header-bar {
visibility: hidden;
}
.panel.active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
.panel.active .header-bar {
visibility: visible;
}
.panel .content {
position: relative;
overflow: hidden;
Expand Down Expand Up @@ -1448,6 +1442,14 @@ table,
transition: transform 300ms;
transition: transform 300ms, -webkit-transform 300ms;
}
.panel .header-bar,
.panel-full .header-bar {
visibility: hidden;
}
.panel.active .header-bar,
.panel-full.active .header-bar {
visibility: visible;
}
.backdrop-popover {
position: fixed;
top: 0;
Expand Down
2 changes: 1 addition & 1 deletion dist/css/phonon.min.css
View file

Large diffs are not rendered by default.

63 changes: 31 additions & 32 deletions dist/js/phonon-core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,29 +379,33 @@ phonon.event = (function () {
* [3] transitionEnd and animationEnd polyfill
*/

// Use available events
// mousecancel does not exists
var availableEvents = ['mousedown', 'mousemove', 'mouseup'];

// Check if touch is enabled
var hasTouch = false;
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
hasTouch = true;
availableEvents = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
}

// Use available events
var desktopEvents = ['mousedown', 'mousemove', 'mouseup'];

if (window.navigator.pointerEnabled) {
desktopEvents = ['pointerdown', 'pointermove', 'pointerup'];
availableEvents = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
} else if (window.navigator.msPointerEnabled) {
desktopEvents = ['MSPointerDown', 'MSPointerMove', 'MSPointerUp'];
availableEvents = ['MSPointerDown', 'MSPointerMove', 'MSPointerUp', 'MSPointerCancel'];
}

var api = {};

api.hasTouch = hasTouch;
api.start = hasTouch ? 'touchstart' : desktopEvents[0];
api.move = hasTouch ? 'touchmove' : desktopEvents[1];
api.end = hasTouch ? 'touchend' : desktopEvents[2];
api.tap = 'tap';

api.start = availableEvents[0];
api.move = availableEvents[1];
api.end = availableEvents[2];
api.cancel = typeof availableEvents[3] === 'undefined' ? null : availableEvents[3];

api.tap = 'tap';

/**
* Animation/Transition event polyfill
Expand Down Expand Up @@ -453,7 +457,6 @@ phonon.event = (function () {
api.transitionEnd = transitionEnd;
api.animationEnd = animationEnd;


var tapEls = [];

var TapElement = (function () {
Expand All @@ -464,49 +467,45 @@ phonon.event = (function () {
this.moved = false;
this.startX = 0;
this.startY = 0;
this.hasTouchEventOccured = false;

this.el.addEventListener(api.start, this, false);
}

TapElement.prototype.start = function(e) {

if (e.type === 'touchstart') {

this.hasTouchEventOccured = true;
this.el.addEventListener('touchmove', this, false);
this.el.addEventListener('touchend', this, false);
this.el.addEventListener('touchcancel', this, false);

} else {

this.el.addEventListener(api.end, this, false);
}
this.el.addEventListener(api.move, this, false);
this.el.addEventListener(api.end, this, false);

this.moved = false;
this.startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
this.startY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY;

this.startX = e.clientX || e.touches[0].clientX;
this.startY = e.clientY || e.touches[0].clientY;
};

TapElement.prototype.move = function(e) {

var moveX = e.clientX || e.touches[0].clientX;
var moveY = e.clientY || e.touches[0].clientY;

//if finger moves more than 10px flag to cancel
if (Math.abs(e.touches[0].clientX - this.startX) > 10 || Math.abs(e.touches[0].clientY - this.startY) > 10) {
if (Math.abs(moveX - this.startX) > 10 || Math.abs(moveY - this.startY) > 10) {
this.moved = true;
}
};

TapElement.prototype.end = function(e) {
this.el.removeEventListener('touchmove', this, false);
this.el.removeEventListener('touchend', this, false);
this.el.removeEventListener('touchcancel', this, false);

this.el.removeEventListener(api.move, this, false);
this.el.removeEventListener(api.end, this, false);

if (api.cancel !== null) this.el.removeEventListener(api.cancel, this, false);

if (!this.moved) {
this.callback(e);
}
};

TapElement.prototype.cancel = function() {
this.hasTouchEventOccured = false;
this.moved = false;
this.startX = 0;
this.startY = 0;
Expand All @@ -516,15 +515,15 @@ phonon.event = (function () {
this.el.removeEventListener(api.start, this, false);
this.el.removeEventListener(api.move, this, false);
this.el.removeEventListener(api.end, this, false);
this.el.removeEventListener('touchcancel', this, false);
if(api.cancel !== null) this.el.removeEventListener(api.cancel, this, false);
};

TapElement.prototype.handleEvent = function(e) {
switch (e.type) {
case api.start: this.start(e); break;
case 'touchmove': this.move(e); break;
case api.move: this.move(e); break;
case api.end: this.end(e); break;
case 'touchcancel': this.cancel(e); break;
case api.cancel: this.cancel(e); break; // api.cancel can be null
}
};

Expand Down
2 changes: 1 addition & 1 deletion dist/js/phonon-core.min.js
View file

Large diffs are not rendered by default.

67 changes: 33 additions & 34 deletions dist/js/phonon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,29 +379,33 @@ phonon.event = (function () {
* [3] transitionEnd and animationEnd polyfill
*/

// Use available events
// mousecancel does not exists
var availableEvents = ['mousedown', 'mousemove', 'mouseup'];

// Check if touch is enabled
var hasTouch = false;
if(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch) {
hasTouch = true;
availableEvents = ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
}

// Use available events
var desktopEvents = ['mousedown', 'mousemove', 'mouseup'];

if (window.navigator.pointerEnabled) {
desktopEvents = ['pointerdown', 'pointermove', 'pointerup'];
availableEvents = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
} else if (window.navigator.msPointerEnabled) {
desktopEvents = ['MSPointerDown', 'MSPointerMove', 'MSPointerUp'];
availableEvents = ['MSPointerDown', 'MSPointerMove', 'MSPointerUp', 'MSPointerCancel'];
}

var api = {};

api.hasTouch = hasTouch;
api.start = hasTouch ? 'touchstart' : desktopEvents[0];
api.move = hasTouch ? 'touchmove' : desktopEvents[1];
api.end = hasTouch ? 'touchend' : desktopEvents[2];
api.tap = 'tap';

api.start = availableEvents[0];
api.move = availableEvents[1];
api.end = availableEvents[2];
api.cancel = typeof availableEvents[3] === 'undefined' ? null : availableEvents[3];

api.tap = 'tap';

/**
* Animation/Transition event polyfill
Expand Down Expand Up @@ -453,7 +457,6 @@ phonon.event = (function () {
api.transitionEnd = transitionEnd;
api.animationEnd = animationEnd;


var tapEls = [];

var TapElement = (function () {
Expand All @@ -464,49 +467,45 @@ phonon.event = (function () {
this.moved = false;
this.startX = 0;
this.startY = 0;
this.hasTouchEventOccured = false;

this.el.addEventListener(api.start, this, false);
}

TapElement.prototype.start = function(e) {

if (e.type === 'touchstart') {

this.hasTouchEventOccured = true;
this.el.addEventListener('touchmove', this, false);
this.el.addEventListener('touchend', this, false);
this.el.addEventListener('touchcancel', this, false);

} else {

this.el.addEventListener(api.end, this, false);
}
this.el.addEventListener(api.move, this, false);
this.el.addEventListener(api.end, this, false);

this.moved = false;
this.startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
this.startY = e.type === 'touchstart' ? e.touches[0].clientY : e.clientY;

this.startX = e.clientX || e.touches[0].clientX;
this.startY = e.clientY || e.touches[0].clientY;
};

TapElement.prototype.move = function(e) {

var moveX = e.clientX || e.touches[0].clientX;
var moveY = e.clientY || e.touches[0].clientY;

//if finger moves more than 10px flag to cancel
if (Math.abs(e.touches[0].clientX - this.startX) > 10 || Math.abs(e.touches[0].clientY - this.startY) > 10) {
if (Math.abs(moveX - this.startX) > 10 || Math.abs(moveY - this.startY) > 10) {
this.moved = true;
}
};

TapElement.prototype.end = function(e) {
this.el.removeEventListener('touchmove', this, false);
this.el.removeEventListener('touchend', this, false);
this.el.removeEventListener('touchcancel', this, false);

this.el.removeEventListener(api.move, this, false);
this.el.removeEventListener(api.end, this, false);

if (api.cancel !== null) this.el.removeEventListener(api.cancel, this, false);

if (!this.moved) {
this.callback(e);
}
};

TapElement.prototype.cancel = function() {
this.hasTouchEventOccured = false;
this.moved = false;
this.startX = 0;
this.startY = 0;
Expand All @@ -516,15 +515,15 @@ phonon.event = (function () {
this.el.removeEventListener(api.start, this, false);
this.el.removeEventListener(api.move, this, false);
this.el.removeEventListener(api.end, this, false);
this.el.removeEventListener('touchcancel', this, false);
if(api.cancel !== null) this.el.removeEventListener(api.cancel, this, false);
};

TapElement.prototype.handleEvent = function(e) {
switch (e.type) {
case api.start: this.start(e); break;
case 'touchmove': this.move(e); break;
case api.move: this.move(e); break;
case api.end: this.end(e); break;
case 'touchcancel': this.cancel(e); break;
case api.cancel: this.cancel(e); break; // api.cancel can be null
}
};

Expand Down Expand Up @@ -1440,13 +1439,13 @@ phonon.tagManager = (function () {
if(opts.useI18n) {
phonon.i18n().bind(virtualElPage, function() {
elPage.innerHTML = virtualElPage.innerHTML;
evalJs(template);
evalJs(virtualDiv);

fn();
});
} else {
elPage.innerHTML = virtualElPage.innerHTML;
evalJs(template);
evalJs(virtualDiv);
fn();
}

Expand Down
6 changes: 3 additions & 3 deletions dist/js/phonon.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 9d25ddd

Please sign in to comment.