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

Side by Side Diff: static/js/main.js

Issue 29703633: Noissue - Abstracted embedded video for use in blog (Closed) Base URL: https://hg.adblockplus.org/web.adblockplus.org
Patch Set: Addressed #7, moved video* to main*, and refactored Video class Created Feb. 23, 2018, 1:30 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« includes/index.tmpl ('K') | « static/js/index.js ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 "use strict"; 1 "use strict";
2 2
3 (function() 3 (function()
4 { 4 {
5 function initLanguageSelection() 5 function initLanguageSelection()
6 { 6 {
7 var locale = document.getElementById("navbar-locale-selected"); 7 var locale = document.getElementById("navbar-locale-selected");
8 8
9 // skip if page does not have language selection (EG: blog) 9 // skip if page does not have language selection (EG: blog)
10 if (!locale) return; 10 if (!locale) return;
(...skipping 13 matching lines...) Expand all
24 24
25 function initMenu() 25 function initMenu()
26 { 26 {
27 document.getElementById("navbar-menu-toggle") 27 document.getElementById("navbar-menu-toggle")
28 .addEventListener("click", navigationClick, false); 28 .addEventListener("click", navigationClick, false);
29 } 29 }
30 30
31 initLanguageSelection(); 31 initLanguageSelection();
32 initMenu(); 32 initMenu();
33 })(); 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 /** Toggle video disclaimer */
ire 2018/02/26 18:33:18 NIT: Unnecessary comment, the function title toggl
juliandoucette 2018/02/27 13:10:39 Agreed.
106 toggleDisclaimer: function()
107 {
108 this.parent.classList.toggle("hide-disclaimer");
109 this.lastClicked = new Date().getTime();
110 },
111
112 /** Replace video thumbnail with video iframe */
113 insertVideo: function()
114 {
115 this.parent.classList.add("hide-disclaimer");
116 this.parent.classList.add("has-iframe");
117
118 //replace static thumbnail with iframe video
119 this.parent.innerHTML =
120 "<iframe " +
121 "class='video-iframe' " +
122 "frameborder=0 " +
123 "allowfullscreen " +
124 "src='" + this.src + "'>" +
125 "</iframe>";
126 }
127 };
128
129 window.videos = [].slice.call(document.querySelectorAll(".video-parent"))
130 .map(function(parent) {return new Video(parent);});
131 }());
OLDNEW
« includes/index.tmpl ('K') | « static/js/index.js ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld