Skip to content

Commit 2a610b1

Browse files
author
FezVrasta
committed
added support for mobile devices to ripples.js
1 parent 7af50af commit 2a610b1

6 files changed

Lines changed: 126 additions & 59 deletions

File tree

‎dist/js/ripples.js‎

Lines changed: 41 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,43 @@ window.ripples = {
2020
rippleStartTime = 500;
2121

2222
// Helper to bind events on dynamically created elements
23-
var bind = function(event, selector, callback) {
24-
document.addEventListener(event, function(e) {
25-
var target = (typeof e.detail !== "number") ? e.detail : e.target;
26-
27-
if (matchesSelector(target, selector)) {
28-
callback(e, target);
29-
}
23+
var bind = function(events, selector, callback) {
24+
if (typeof events === "string") {
25+
events = [events];
26+
}
27+
events.forEach(function(event) {
28+
document.addEventListener(event, function(e) {
29+
var target = (typeof e.detail !== "number") ? e.detail : e.target;
30+
31+
if (matchesSelector(target, selector)) {
32+
callback(e, target);
33+
}
34+
});
3035
});
3136
};
3237

33-
var rippleStart = function(e, target) {
38+
var rippleStart = function(e, target, callback) {
3439

3540
// Init variables
3641
var $rippleWrapper = target,
3742
$el = $rippleWrapper.parentNode,
3843
$ripple = document.createElement("div"),
3944
elPos = $el.getBoundingClientRect(),
40-
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
45+
// Mouse pos in most cases
46+
mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
4147
scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
4248
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
4349
_rippleOpacity = 0.1,
4450
refreshElementStyle;
4551

52+
53+
// If multitouch is detected or some other black magic suff is happening...
54+
if (e.touches) {
55+
mousePos = {x: e.touches[0].clientX - elPos.left, y: e.touches[0].clientY - elPos.top};
56+
}
57+
58+
console.log(mousePos);
59+
4660
$ripplecache = $ripple;
4761

4862
// Set ripple class
@@ -88,6 +102,9 @@ window.ripples = {
88102
// Let know to other functions that this element has finished the animation
89103
$ripple.dataset.animating = 0;
90104
document.dispatchEvent(rippleEnd);
105+
if (callback) {
106+
callback();
107+
}
91108

92109
}, rippleStartTime);
93110

@@ -105,12 +122,12 @@ window.ripples = {
105122

106123
// Helper, need to know if mouse is up or down
107124
var mouseDown = false;
108-
document.body.onmousedown = function() {
125+
bind(["mousedown", "touchstart"], "*", function() {
109126
mouseDown = true;
110-
};
111-
document.body.onmouseup = function() {
127+
});
128+
bind(["mouseup", "touchend"], "*", function() {
112129
mouseDown = false;
113-
};
130+
});
114131

115132
// Append ripple wrapper if not exists already
116133
var rippleInit = function(e, target) {
@@ -119,20 +136,25 @@ window.ripples = {
119136
var $rippleWrapper = document.createElement("div");
120137
$rippleWrapper.className = "ripple-wrapper";
121138
target.appendChild($rippleWrapper);
139+
if (window.ontouchstart === null) {
140+
rippleStart(e, $rippleWrapper, function() {
141+
// FIXME: ugly fix for first touchstart event on mobile devices...
142+
$rippleWrapper.getElementsByClassName("ripple")[0].remove();
143+
});
144+
}
122145
}
123146
};
124147

125-
126148
var $ripplecache;
127149

128150
// Events handler
129151
// init RippleJS and start ripple effect on mousedown
130-
bind("mouseover", withRipple, rippleInit);
152+
bind(["mouseover", "touchstart"], withRipple, rippleInit);
131153

132154
// start ripple effect on mousedown
133-
bind("mousedown", ".ripple-wrapper", function(e, $ripple) {
134-
// Start ripple only on left or middle mouse click
135-
if (e.which === 1 || e.which === 2) {
155+
bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
156+
// Start ripple only on left or middle mouse click and touch click
157+
if (e.which === 0 || e.which === 1 || e.which === 2) {
136158
rippleStart(e, $ripple);
137159
}
138160
});
@@ -148,7 +170,7 @@ window.ripples = {
148170
});
149171

150172
// Destroy ripple when mouse is not holded anymore if the ripple still exists
151-
bind("mouseup", ".ripple-wrapper", function() {
173+
bind(["mouseup", "touchend"], ".ripple-wrapper", function() {
152174
var $ripple = $ripplecache;
153175
if ($ripple && $ripple.dataset.animating != 1) {
154176
rippleOut($ripple);

‎dist/js/ripples.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link href="dist/css/ripples.min.css" rel="stylesheet">
99
<link href="dist/css/material-wfont.min.css" rel="stylesheet">
1010
<link href="//fezvrasta.github.io/snackbarjs/dist/snackbar.min.css" rel="stylesheet">
11+
<meta name="viewport" content="width=device-width, initial-scale=1">
1112
<style>
1213
body{padding-top:50px}#banner{border-bottom:none}.page-header h1{font-size:4em}.bs-docs-section{margin-top:8em}.bs-component{position:relative}.bs-component .modal{position:relative;top:auto;right:auto;left:auto;bottom:auto;z-index:1;display:block}.bs-component .modal-dialog{width:90%}.bs-component .popover{position:relative;display:inline-block;width:220px;margin:20px}#source-button{position:absolute;top:0;right:0;z-index:100;font-weight:bold;padding: 5px 10px;}.progress{margin-bottom:10px}footer{margin:5em 0}footer li{float:left;margin-right:1.5em;margin-bottom:1.5em}footer p{clear:left;margin-bottom:0}.splash{padding:4em 0 0;background-color:#141d27;color:#fff;text-align:center}.splash h1{font-size:4em}.splash #social{margin:2em 0}.splash .alert{margin:2em 0}.section-tout{padding:4em 0 3em;border-bottom:1px solid rgba(0,0,0,0.05);background-color:#eaf1f1}.section-tout .fa{margin-right:.5em}.section-tout p{margin-bottom:3em}.section-preview{padding:4em 0 4em}.section-preview .preview{margin-bottom:4em;background-color:#eaf1f1}.section-preview .preview .image{position:relative}.section-preview .preview .image:before{box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1);position:absolute;top:0;left:0;width:100%;height:100%;content:"";pointer-events:none}.section-preview .preview .options{padding:1em 2em 2em;border:1px solid rgba(0,0,0,0.05);border-top:none;text-align:center}.section-preview .preview .options p{margin-bottom:2em}.section-preview .dropdown-menu{text-align:left}.section-preview .lead{margin-bottom:2em}@media (max-width:767px){.section-preview .image img{width:100%}}.sponsor{text-align:center}.sponsor a:hover{text-decoration:none}@media (max-width:767px){#banner{margin-bottom:2em;text-align:center}}
1314
.infobox .btn-sup { color: rgba(0,0,0,0.5); font-weight: bold; font-size: 15px; line-height: 30px; }

‎scripts/ripples.js‎

Lines changed: 41 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,29 +20,43 @@ window.ripples = {
2020
rippleStartTime = 500;
2121

2222
// Helper to bind events on dynamically created elements
23-
var bind = function(event, selector, callback) {
24-
document.addEventListener(event, function(e) {
25-
var target = (typeof e.detail !== "number") ? e.detail : e.target;
26-
27-
if (matchesSelector(target, selector)) {
28-
callback(e, target);
29-
}
23+
var bind = function(events, selector, callback) {
24+
if (typeof events === "string") {
25+
events = [events];
26+
}
27+
events.forEach(function(event) {
28+
document.addEventListener(event, function(e) {
29+
var target = (typeof e.detail !== "number") ? e.detail : e.target;
30+
31+
if (matchesSelector(target, selector)) {
32+
callback(e, target);
33+
}
34+
});
3035
});
3136
};
3237

33-
var rippleStart = function(e, target) {
38+
var rippleStart = function(e, target, callback) {
3439

3540
// Init variables
3641
var $rippleWrapper = target,
3742
$el = $rippleWrapper.parentNode,
3843
$ripple = document.createElement("div"),
3944
elPos = $el.getBoundingClientRect(),
40-
mousePos = {x: e.clientX - elPos.left, y: e.clientY - elPos.top},
45+
// Mouse pos in most cases
46+
mousePos = {x: e.clientX - elPos.left, y: ((window.ontouchstart) ? e.clientY - window.scrollY: e.clientY) - elPos.top},
4147
scale = "scale(" + Math.round($rippleWrapper.offsetWidth / 5) + ")",
4248
rippleEnd = new CustomEvent("rippleEnd", {detail: $ripple}),
4349
_rippleOpacity = 0.1,
4450
refreshElementStyle;
4551

52+
53+
// If multitouch is detected or some other black magic suff is happening...
54+
if (e.touches) {
55+
mousePos = {x: e.touches[0].clientX - elPos.left, y: e.touches[0].clientY - elPos.top};
56+
}
57+
58+
console.log(mousePos);
59+
4660
$ripplecache = $ripple;
4761

4862
// Set ripple class
@@ -88,6 +102,9 @@ window.ripples = {
88102
// Let know to other functions that this element has finished the animation
89103
$ripple.dataset.animating = 0;
90104
document.dispatchEvent(rippleEnd);
105+
if (callback) {
106+
callback();
107+
}
91108

92109
}, rippleStartTime);
93110

@@ -105,12 +122,12 @@ window.ripples = {
105122

106123
// Helper, need to know if mouse is up or down
107124
var mouseDown = false;
108-
document.body.onmousedown = function() {
125+
bind(["mousedown", "touchstart"], "*", function() {
109126
mouseDown = true;
110-
};
111-
document.body.onmouseup = function() {
127+
});
128+
bind(["mouseup", "touchend"], "*", function() {
112129
mouseDown = false;
113-
};
130+
});
114131

115132
// Append ripple wrapper if not exists already
116133
var rippleInit = function(e, target) {
@@ -119,20 +136,25 @@ window.ripples = {
119136
var $rippleWrapper = document.createElement("div");
120137
$rippleWrapper.className = "ripple-wrapper";
121138
target.appendChild($rippleWrapper);
139+
if (window.ontouchstart === null) {
140+
rippleStart(e, $rippleWrapper, function() {
141+
// FIXME: ugly fix for first touchstart event on mobile devices...
142+
$rippleWrapper.getElementsByClassName("ripple")[0].remove();
143+
});
144+
}
122145
}
123146
};
124147

125-
126148
var $ripplecache;
127149

128150
// Events handler
129151
// init RippleJS and start ripple effect on mousedown
130-
bind("mouseover", withRipple, rippleInit);
152+
bind(["mouseover", "touchstart"], withRipple, rippleInit);
131153

132154
// start ripple effect on mousedown
133-
bind("mousedown", ".ripple-wrapper", function(e, $ripple) {
134-
// Start ripple only on left or middle mouse click
135-
if (e.which === 1 || e.which === 2) {
155+
bind(["mousedown", "touchstart"], ".ripple-wrapper", function(e, $ripple) {
156+
// Start ripple only on left or middle mouse click and touch click
157+
if (e.which === 0 || e.which === 1 || e.which === 2) {
136158
rippleStart(e, $ripple);
137159
}
138160
});
@@ -148,7 +170,7 @@ window.ripples = {
148170
});
149171

150172
// Destroy ripple when mouse is not holded anymore if the ripple still exists
151-
bind("mouseup", ".ripple-wrapper", function() {
173+
bind(["mouseup", "touchend"], ".ripple-wrapper", function() {
152174
var $ripple = $ripplecache;
153175
if ($ripple && $ripple.dataset.animating != 1) {
154176
rippleOut($ripple);

0 commit comments

Comments
 (0)