Avoid duplicate code and non-reusable functions with hardcoded variables

bauerj · Jun 26, 2015 · 3d9c178 · 3d9c178
1 parent 17886b6
commit 3d9c178
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 28 deletions.
diff --git a/_templates/index.html b/_templates/index.html
@@ -5,21 +5,8 @@
 layout: base
 id: index
 ---
-<script>
-function loadMainVideo() {
-var p = document.getElementById('mainvideo'),
-    t = p.getElementsByTagName('DIV')[0],
-    nd = document.createElement('IFRAME');
-nd.src = '//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;autoplay=1{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}';
-nd.setAttribute('frameborder', 0);
-nd.setAttribute('allowfullscreen', true);
-t.innerHTML = '';
-t.appendChild(nd);
-p.onclick = '';
-}
-</script>
 <p class="mainsummary">{% translate listintro %}</p>
-<div class="mainvideo" id="mainvideo" onclick="loadMainVideo();"><div>
+<div class="mainvideo"><div onclick="loadYoutubeVideo(event);" data-youtubeurl="//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;autoplay=1{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}">
   <img src="/img/video/video_wuc.jpg" alt="Youtube video">
   <div class="mainvideoicon"></div>
   <div class="mainvideoiconhover"></div>

diff --git a/index.html b/index.html
@@ -7,21 +7,8 @@
 id: index
 title: Bitcoin
 ---
-<script>
-function loadMainVideo() {
-var p = document.getElementById('mainvideo'),
-    t = p.getElementsByTagName('DIV')[0],
-    nd = document.createElement('IFRAME');
-nd.src = '//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;autoplay=1{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}';
-nd.setAttribute('frameborder', 0);
-nd.setAttribute('allowfullscreen', true);
-t.innerHTML = '';
-t.appendChild(nd);
-p.onclick = '';
-}
-</script>
 <p class="mainsummary">{% translate listintro %}</p>
-<div class="mainvideo" id="mainvideo" onclick="loadMainVideo();"><div>
+<div class="mainvideo"><div onclick="loadYoutubeVideo(event);" data-youtubeurl="//www.youtube.com/embed/Gc2en3nHxA4?rel=0&amp;showinfo=0&amp;wmode=opaque&amp;autoplay=1{% if page.lang != 'en' %}&amp;cc_load_policy=1&amp;hl={{ page.lang }}&amp;cc_lang_pref={{ page.lang }}{% endif %}">
   <img src="/img/video/video_wuc.jpg" alt="Youtube video">
   <div class="mainvideoicon"></div>
   <div class="mainvideoiconhover"></div>

diff --git a/js/main.js b/js/main.js
@@ -115,6 +115,19 @@ for (var i = 0, n = domPrefixes.length; i < n; i++) {
 return false;
 }
 
+function loadYoutubeVideo(e) {
+// Load Youtube video on target node on click.
+var t = getEventTarget(e),
+    nd = document.createElement('IFRAME');
+while (t.getAttribute('data-youtubeurl') === null || t.getAttribute('data-youtubeurl') === '') t = t.parentNode;
+nd.src = t.getAttribute('data-youtubeurl');
+nd.setAttribute('frameborder', 0);
+nd.setAttribute('allowfullscreen', true);
+t.innerHTML = '';
+t.appendChild(nd);
+t.onclick = '';
+}
+
 function boxShow(e) {
 // Display the box content when the user click a box on the "Secure your wallet" page.
 var p = t = getEventTarget(e);