feat: add touch support

ividjs · Jan 28, 2019 · d0e2288 · d0e2288
1 parent 41a4706
commit d0e2288
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 14 deletions.
diff --git a/dist/ivid.min.js b/dist/ivid.min.js
diff --git a/docs/TODO.md b/docs/TODO.md
@@ -5,5 +5,5 @@
   - [x] iVid `model`
   - [x] iVid `styles`
 
-- [ ] Add touch support
+- [x] Add touch support
 - [ ] Add tracks support (subs, audio)
diff --git a/sandbox/lib/ivid.min.js b/sandbox/lib/ivid.min.js
diff --git a/src/index.js b/src/index.js
@@ -53,12 +53,14 @@ class Ivid extends HTMLElement {
         }
       },
       onPlayClick: {
-        value: () => {
+        value: (event) => {
+          event.preventDefault();
           this.togglePlay();
         }
       },
       onVolumeClick: {
-        value: () => {
+        value: (event) => {
+          event.preventDefault();
           this.toggleMute();
         }
       },
@@ -86,7 +88,8 @@ class Ivid extends HTMLElement {
         }
       },
       onVideoClick: {
-        value: () => {
+        value: (event) => {
+          event.preventDefault();
           this.togglePlay();
           this.onShowControls();
         }
@@ -123,7 +126,6 @@ class Ivid extends HTMLElement {
 
           if (videoTpl.duration - videoTpl.currentTime <= 1) {
             let fallback = null;
-
             if (s.next)
               fallback = s.next;
             else if (videoItem.options)
@@ -145,7 +147,8 @@ class Ivid extends HTMLElement {
         }
       },
       onChoiceSelected: {
-        value: (choiceUid) => {
+        value: (choiceUid, event) => {
+          if (event) event.preventDefault();
           let choices = this.state.choicesTemplate;
 
           this.setAttribute('next', choiceUid);

diff --git a/src/templates/choices.js b/src/templates/choices.js
@@ -40,8 +40,8 @@ const renderChoicesTemplate = (choicesTpl, videoItem, choiceClickCallback) => {
       button.setAttribute('class', 'ivid__choice-button');
       button.id = choiceUid;
       button.innerHTML = choices[choiceUid];
-      button.ontouchstart = () => choiceClickCallback(choiceUid);
-      button.onclick = () => choiceClickCallback(choiceUid);
+      button.ontouchstart = (e) => choiceClickCallback(choiceUid, e);
+      button.onclick = (e) => choiceClickCallback(choiceUid, e);
 
       choicesTpl.appendChild(button);
     }

diff --git a/src/templates/controls.js b/src/templates/controls.js
@@ -136,13 +136,13 @@ const setupControlsTemplate = () => {
   controls.progress.progressWrapper.ontouchstart = (e) => progressClickCallback(e);
   controls.progress.progressWrapper.onclick = (e) => progressClickCallback(e);
 
-  controls.playButton.ontouchstart = () => playClickCallback();
-  controls.playButton.onclick = () => playClickCallback();
+  controls.playButton.ontouchstart = (e) => playClickCallback(e);
+  controls.playButton.onclick = (e) => playClickCallback(e);
 
   controls.volume.volumeWrapper.onmouseover = () => volumeHoverCallback();
   controls.volume.volumeWrapper.onmouseleave = () => volumeLeaveCallback();
-  controls.volume.volumeButton.ontouchstart = () => volumeClickCallback();
-  controls.volume.volumeButton.onclick = () => volumeClickCallback();
+  controls.volume.volumeButton.ontouchstart = (e) => volumeClickCallback(e);
+  controls.volume.volumeButton.onclick = (e) => volumeClickCallback(e);
 
   controls.volume.volumeSlider.oninput = (e) => volumeChangeCallback(e);
   controls.volume.volumeSlider.onchange = (e) => volumeChangeCallback(e);