Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Delta Between Two Patch Sets: static/js/main.js

Issue 29703633: Noissue - Abstracted embedded video for use in blog (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Left Patch Set: Moved no-js application and iframe height+width Created Feb. 20, 2018, 10:35 p.m.
Right Patch Set: Addressed #9 and added urlencode to innerHTML Created Feb. 27, 2018, 1:09 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
Left: Side by side diff | Download
Right: Side by side diff | Download
« no previous file with change/comment | « static/js/index.js ('k') | no next file » | no next file with change/comment »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
LEFTRIGHT
1 "use strict"; 1 "use strict";
2 2
3 (function() 3 (function()
4 { 4 {
5 document.documentElement.className = "js";
6
7 function initLanguageSelection() 5 function initLanguageSelection()
8 { 6 {
9 var locale = document.getElementById("navbar-locale-selected"); 7 var locale = document.getElementById("navbar-locale-selected");
10 8
11 // skip if page does not have language selection (EG: blog) 9 // skip if page does not have language selection (EG: blog)
12 if (!locale) return; 10 if (!locale) return;
13 11
14 locale.addEventListener("click", function() 12 locale.addEventListener("click", function()
15 { 13 {
16 document.getElementById("navbar-locale-menu") 14 document.getElementById("navbar-locale-menu")
17 .classList.toggle("visible"); 15 .classList.toggle("visible");
18 }, false); 16 }, false);
19 } 17 }
20 18
21 function navigationClick(event) 19 function navigationClick(event)
22 { 20 {
23 document.getElementById("navbar-menu") 21 document.getElementById("navbar-menu")
24 .classList.toggle("visible"); 22 .classList.toggle("visible");
25 } 23 }
26 24
27 function initMenu() 25 function initMenu()
28 { 26 {
29 document.getElementById("navbar-menu-toggle") 27 document.getElementById("navbar-menu-toggle")
30 .addEventListener("click", navigationClick, false); 28 .addEventListener("click", navigationClick, false);
31 } 29 }
32 30
33 initLanguageSelection(); 31 initLanguageSelection();
34 initMenu(); 32 initMenu();
35 })(); 33 })();
34
35 (function()
36 {
37 /**
38 * Creats a GDPR compatible video
39 * @constructor
40 * @param {Element} parent - video parent / container
41 * @example
42 * <div id="example-video" class="video-parent">
43 * <a
44 * class="video-link"
45 * target="_blank"
46 * href="http://example.com/iframe/video/src">
47 * <img
48 * class="video-thumbnail"
49 * alt="Short description of video"
50 * src="/img/video-thumbnail.png" />
51 * <img
52 * class="video-play"
53 * alt="Open video in separate window""
54 * src="/img/video-link.png" />
55 * </a>
56 * <p class="video-disclaimer">Disclaimer text</p>
57 * </div>
58 */
59 function Video(parent)
60 {
61 /**
62 * Video parent / container element
63 * @member {Element}
64 */
65 this.parent = parent;
66
67 /**
68 * The last time that the play button was clicked
69 * @member {number}
70 */
71 this.lastClicked = 0;
72
73 var videoLink = parent.querySelector(".video-link");
74
75 /**
76 * The iframe video src url
77 * @member {string}
78 */
79 this.src = videoLink.getAttribute("href");
80
81 //remove disclaimer if disclaimer is shown by default
82 this.parent.classList.add("hide-disclaimer");
83
84 //change external link icon into play button icon
85 parent.querySelector(".video-play")
86 .setAttribute("src", "/img/video-play.png");
87
88 //show disclaimer or replace thumbnail with video on click
89 videoLink.addEventListener("click", this._onPlayClick.bind(this));
90 }
91
92 Video.prototype = {
93
94 _onPlayClick: function(event)
95 {
96 event.preventDefault();
97
98 if (this.parent.classList.contains("hide-disclaimer"))
99 this.toggleDisclaimer();
100 //prevent bypassing the disclaimer via double click
101 else if (new Date().getTime() - this.lastClicked > 600)
102 this.insertVideo();
103 },
104
105 toggleDisclaimer: function()
106 {
107 this.parent.classList.toggle("hide-disclaimer");
108 this.lastClicked = new Date().getTime();
109 },
110
111 /** Replace video thumbnail with video iframe */
112 insertVideo: function()
113 {
114 this.parent.classList.add("hide-disclaimer");
115 this.parent.classList.add("has-iframe");
116
117 //replace static thumbnail with iframe video
118 this.parent.innerHTML =
119 "<iframe " +
120 "class='video-iframe' " +
121 "frameborder=0 " +
122 "allowfullscreen " +
123 "src='" + encodeURI(this.src) + "'>" +
124 "</iframe>";
125 }
126 };
127
128 window.videos = [].slice.call(document.querySelectorAll(".video-parent"))
129 .map(function(parent) {return new Video(parent);});
130 }());
LEFTRIGHT

Powered by Google App Engine
This is Rietveld