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

Unified 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.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« includes/index.tmpl ('K') | « static/js/index.js ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: static/js/main.js
===================================================================
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -26,8 +26,106 @@
{
document.getElementById("navbar-menu-toggle")
.addEventListener("click", navigationClick, false);
}
initLanguageSelection();
initMenu();
})();
+
+(function()
+{
+ /**
+ * Creats a GDPR compatible video
+ * @constructor
+ * @param {Element} parent - video parent / container
+ * @example
+ * <div id="example-video" class="video-parent">
+ * <a
+ * class="video-link"
+ * target="_blank"
+ * href="http://example.com/iframe/video/src">
+ * <img
+ * class="video-thumbnail"
+ * alt="Short description of video"
+ * src="/img/video-thumbnail.png" />
+ * <img
+ * class="video-play"
+ * alt="Open video in separate window""
+ * src="/img/video-link.png" />
+ * </a>
+ * <p class="video-disclaimer">Disclaimer text</p>
+ * </div>
+ */
+ function Video(parent)
+ {
+ /**
+ * Video parent / container element
+ * @member {Element}
+ */
+ this.parent = parent;
+
+ /**
+ * The last time that the play button was clicked
+ * @member {number}
+ */
+ this.lastClicked = 0;
+
+ var videoLink = parent.querySelector(".video-link");
+
+ /**
+ * The iframe video src url
+ * @member {string}
+ */
+ this.src = videoLink.getAttribute("href");
+
+ //remove disclaimer if disclaimer is shown by default
+ this.parent.classList.add("hide-disclaimer");
+
+ //change external link icon into play button icon
+ parent.querySelector(".video-play")
+ .setAttribute("src", "/img/video-play.png");
+
+ //show disclaimer or replace thumbnail with video on click
+ videoLink.addEventListener("click", this._onPlayClick.bind(this));
+ }
+
+ Video.prototype = {
+
+ _onPlayClick: function(event)
+ {
+ event.preventDefault();
+
+ if (this.parent.classList.contains("hide-disclaimer"))
+ this.toggleDisclaimer();
+ //prevent bypassing the disclaimer via double click
+ else if (new Date().getTime() - this.lastClicked > 600)
+ this.insertVideo();
+ },
+
+ /** 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.
+ toggleDisclaimer: function()
+ {
+ this.parent.classList.toggle("hide-disclaimer");
+ this.lastClicked = new Date().getTime();
+ },
+
+ /** Replace video thumbnail with video iframe */
+ insertVideo: function()
+ {
+ this.parent.classList.add("hide-disclaimer");
+ this.parent.classList.add("has-iframe");
+
+ //replace static thumbnail with iframe video
+ this.parent.innerHTML =
+ "<iframe " +
+ "class='video-iframe' " +
+ "frameborder=0 " +
+ "allowfullscreen " +
+ "src='" + this.src + "'>" +
+ "</iframe>";
+ }
+ };
+
+ window.videos = [].slice.call(document.querySelectorAll(".video-parent"))
+ .map(function(parent) {return new Video(parent);});
+}());
« 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