diff --git a/amd/build/oembed.min.js b/amd/build/oembed.min.js index 067809e..586ff71 100644 --- a/amd/build/oembed.min.js +++ b/amd/build/oembed.min.js @@ -1 +1 @@ -define(["jquery","filter_embedrc/preloader","filter_embedrc/responsivecontent"],function(a,b,c){return{init:function(){var d=function(){var b=function(b){return b.className?a(b).is(".oembed_content,.oembed_card"):!1},d=new MutationObserver(function(a){a.forEach(function(a){for(var d in a.addedNodes){var e=a.addedNodes[d];b(e)&&c.apply()}})}),e={attributes:!0,childList:!0,characterData:!0,subtree:!0},f=document.body;d.observe(f,e)};d(),a(document).ready(function(){b.apply(),c.apply()})}}}); \ No newline at end of file +define(["jquery","filter_embedrc/preloader","filter_embedrc/responsivecontent"],function(a,b,c){return{init:function(){var d=function(){var b=function(b){return b.className?a(b).is(".oembed-content, .oembed-card-container"):!1},d=new MutationObserver(function(d){d.forEach(function(d){for(var e in d.addedNodes){var f=d.addedNodes[e];b(f)&&c.apply(a(f).find("> *:not(video):first-child, .oembed-card"))}})}),e={attributes:!0,childList:!0,characterData:!0,subtree:!0},f=document.body;d.observe(f,e)};d(),a(document).ready(function(){b.apply(),c.apply()})}}}); \ No newline at end of file diff --git a/amd/build/preloader.min.js b/amd/build/preloader.min.js index 983f4e2..c89689a 100644 --- a/amd/build/preloader.min.js +++ b/amd/build/preloader.min.js @@ -1 +1 @@ -define(["jquery"],function(a){return{apply:function(){a(".oembed_card_play").on("click",function(){var b=a(this).parent(".oembed_card"),c=a(b.data("embed")),d=a(b).width(),e=a(b).height(),f=a(a(c).find("iframe")[0]),g=f.attr("src"),h=g.indexOf("?")>-1?"&":"?";g+=h+"autoplay=1",f.attr("src",g),c.attr("data-card-width",d),c.attr("data-card-height",e),b.replaceWith(c)})}}}); \ No newline at end of file +define(["jquery"],function(a){return{apply:function(){a(".oembed-card-play").on("click",function(){var b=a(this).parent(".oembed-card"),c=a(b.data("embed")),d=a(b).width(),e=a(b).height(),f=a(a(c).find("iframe")[0]),g=f.attr("src"),h=g.indexOf("?")>-1?"&":"?";g+=h+"autoplay=1",g+="&auto_play=1",f.attr("src",g),c.attr("data-card-width",d),c.attr("data-card-height",e),b.parent(".oembed-card-container").replaceWith(c)})}}}); \ No newline at end of file diff --git a/amd/build/responsivecontent.min.js b/amd/build/responsivecontent.min.js index ea9cff9..beba572 100644 --- a/amd/build/responsivecontent.min.js +++ b/amd/build/responsivecontent.min.js @@ -1 +1 @@ -define(["jquery"],function(a){var b=function(){var b=this;this.apply=function(b){b||(b=a(".oembed_content > *:not(video):first-child, .oembed_card")),a(b).each(function(){var b,c,d;d=this.getAttribute("data-aspect-ratio"),(null===d||"0"===d)&&(b=this.width||this.offsetWidth,c=this.height||this.offsetHeight,(b.indexOf("%")>-1&&-1==c.indexOf("%")||-1==b.indexOf("%")&&c.indexOf("%")>-1)&&(a(this).parent().attr("data-card-width")&&a(this).parent().attr("data-card-height")?(b=a(this).parent().attr("data-card-width"),c=a(this).parent().attr("data-card-height")):(b=this.offsetWidth,c=this.offsetHeight)),b=parseInt(b),c=parseInt(c),d=c/b,this.setAttribute("data-aspect-ratio",d));var e=this.tagName.toLowerCase();"iframe"===e&&(a(this).removeAttr("width"),a(this).removeAttr("height")),b=parseInt(this.offsetWidth);var f={height:b*d+"px",width:"100%"};a(this).css(f)})},a(window).resize(function(){var a=(new Date).getTime();!function(c){window.setTimeout(function(){c===a&&b.apply()},200)}(a)})};return new b}); \ No newline at end of file +define(["jquery"],function(a){var b=function(){this.apply=function(b){b||(b=a(".oembed-content > *:not(video):first-child, .oembed-card")),a(b).each(function(){var b=a(this).parent();if(!b.hasClass("oembed-responsive")){var c,d,e;e=this.getAttribute("data-aspect-ratio"),(null===e||"0"===e)&&(c=this.width||this.offsetWidth,d=this.height||this.offsetHeight,(c.indexOf("%")>-1&&-1==d.indexOf("%")||-1==c.indexOf("%")&&d.indexOf("%")>-1)&&(a(this).parent().attr("data-card-width")&&a(this).parent().attr("data-card-height")?(c=a(this).parent().attr("data-card-width"),d=a(this).parent().attr("data-card-height")):(c=this.offsetWidth,d=this.offsetHeight)),c=parseInt(c),d=parseInt(d),e=d/c,this.setAttribute("data-aspect-ratio",e));var f=this.tagName.toLowerCase();"iframe"===f&&(a(this).removeAttr("width"),a(this).removeAttr("height")),c=parseInt(this.offsetWidth);var g={width:"100%"};if(a(this).css(g),!b.find(".oembed-responsive-pad").length){var h=100*e,i='
';b.append(i)}b.addClass("oembed-responsive")}})}};return new b}); \ No newline at end of file diff --git a/amd/src/oembed.js b/amd/src/oembed.js index e579365..dac9fb2 100644 --- a/amd/src/oembed.js +++ b/amd/src/oembed.js @@ -27,11 +27,11 @@ define(['jquery', 'filter_embedrc/preloader', 'filter_embedrc/responsivecontent' return { init: function() { /** - * Apply a mutation observer to track oembed_content being dynamically added to the page. + * Apply a mutation observer to track oembed-content being dynamically added to the page. */ var responsiveContentOnInsert = function() { /** - * Does a node have the oembed_content class + * Does a node have the oembed-content class * @param {opbject} node (dom element) * @returns {boolean} */ @@ -39,7 +39,7 @@ define(['jquery', 'filter_embedrc/preloader', 'filter_embedrc/responsivecontent' if (!node.className) { return false; } - return $(node).is(".oembed_content,.oembed_card"); + return $(node).is(".oembed-content, .oembed-card-container"); }; var observer = new MutationObserver(function(mutations) { @@ -47,7 +47,8 @@ define(['jquery', 'filter_embedrc/preloader', 'filter_embedrc/responsivecontent' for (var n in mutation.addedNodes) { var node = mutation.addedNodes[n]; if (hasOembedClass(node)) { - responsiveContent.apply(); + // Only apply responsive content to the newly added node for efficiency. + responsiveContent.apply($(node).find('> *:not(video):first-child, .oembed-card')); } } }); diff --git a/amd/src/preloader.js b/amd/src/preloader.js index 2920abf..6fb2a1b 100644 --- a/amd/src/preloader.js +++ b/amd/src/preloader.js @@ -26,23 +26,26 @@ define(['jquery'], function($) { return { apply: function() { - $(".oembed_card_play").on("click", function() { - var card = $(this).parent('.oembed_card'); + $(".oembed-card-play").on("click", function() { + var card = $(this).parent('.oembed-card'); var data = $(card.data('embed')); var cardwidth = $(card).width(); var cardheight = $(card).height(); - // Add auto play param. + // Add auto play params. + // Because we are using a preloader we ideally want the content to play after clicking the preloader + // play button. var iframe = $($(data).find('iframe')[0]); var src = iframe.attr('src'); var paramglue = src.indexOf('?') > -1 ? '&' : '?'; src += paramglue + 'autoplay=1'; + src += '&' + 'auto_play=1'; iframe.attr('src', src); // Replace card with oembed html. data.attr('data-card-width', cardwidth); data.attr('data-card-height', cardheight); - card.replaceWith(data); + card.parent('.oembed-card-container').replaceWith(data); }); } }; diff --git a/amd/src/responsivecontent.js b/amd/src/responsivecontent.js index 97d1e09..e71e503 100644 --- a/amd/src/responsivecontent.js +++ b/amd/src/responsivecontent.js @@ -29,18 +29,23 @@ define(['jquery'], function($) { */ var ResponsiveContent = function() { - var self = this; - /** * Apply to specific node / nodes or use selector. * @param {jQuery|null} nodes- jquery node / collection of nodes or null */ this.apply = function(nodes) { if (!nodes){ - nodes = $('.oembed_content > *:not(video):first-child, .oembed_card'); + nodes = $('.oembed-content > *:not(video):first-child, .oembed-card'); } // Apply aspect ratio to height for all nodes or single node. $(nodes).each(function() { + + var parent = $(this).parent(); + if (parent.hasClass('oembed-responsive')) { + // Already processed. + return; + } + var width, height, aspectratio; @@ -80,23 +85,22 @@ define(['jquery'], function($) { // Get width again. width = parseInt(this.offsetWidth); - // Set height based on width and aspectratio. - var style = {height: (width * aspectratio) + 'px', width: '100%'}; + // Set width; + var style = {width: '100%'}; $(this).css(style); + + // Make sure parent has a padding element + if (!parent.find('.oembed-responsive-pad').length) { + var aspectPerc = aspectratio * 100; + var responsivePad = '
'; + parent.append(responsivePad); + } + + // Add responsive class to parent element + parent.addClass('oembed-responsive'); }); }; - // Listen for window resize for videos. - $(window).resize(function() { - var resizestamp = new Date().getTime(); - (function(timestamp) { - window.setTimeout(function() { - if (timestamp === resizestamp) { - self.apply(); - } - }, 200); // wait 1/20th of a second before resizing - })(resizestamp); - }); }; return new ResponsiveContent(); diff --git a/classes/service/oembed.php b/classes/service/oembed.php index 6465bf0..93b5948 100755 --- a/classes/service/oembed.php +++ b/classes/service/oembed.php @@ -314,7 +314,7 @@ protected function oembed_gethtml($jsonarr, $params = '') { $embed = str_replace('?feature=oembed', '?feature=oembed'.htmlspecialchars($params), $embed); } - $output = '
' . $embed . '
'; // Wrapper for responsive processing. + $output = '
' . $embed . '
'; // Wrapper for responsive processing. return $output; } diff --git a/styles.css b/styles.css index 1128594..05b9555 100644 --- a/styles.css +++ b/styles.css @@ -1,25 +1,27 @@ -.oembed_card { +.oembed-card { position: relative; min-height: 10em; background-size: cover; transition: all 0.4s ease-in-out; } -.oembed_card_title { +.oembed-card-title { + position: absolute; + top: 0; color: #fff; background-color: rgba(0,0,0,0.8); padding: 0.5em 0.5em; } -.oembed_content > *:not(video):first-child { +.oembed-content > *:not(video):first-child { width: 100%; } /* Responsive video for HTML5 only */ -.oembed_content video { +.oembed-content video { width: 100% !important; height: auto !important; } -.btn.btn-link.oembed_card_play { +.btn.btn-link.oembed-card-play { background-image: url([[pix:filter_embedrc|play]]); background-repeat: no-repeat; position: absolute; @@ -35,9 +37,29 @@ filter: drop-shadow(1px 1px 1px #666); } -.btn.btn-link.oembed_card_play:hover { +.btn.btn-link.oembed-card-play:hover { background-position: 0; -webkit-filter: drop-shadow(0px 0px 0px #666); filter: drop-shadow(0px 0px 0px #666); opacity: 1; } + +.oembed-responsive { + width: 100%; + display: block; + position: relative; +} + +.oembed-responsive-pad{ + display: block; +} + +.oembed-responsive > *:not(video):first-child { + position: absolute !important; + top: 0 !important; + bottom: 0 !important; + right: 0 !important; + left: 0 !important; + height: 100% !important; + width: 100% !important; +} diff --git a/templates/preload.mustache b/templates/preload.mustache index 93fddb9..4fe6afd 100644 --- a/templates/preload.mustache +++ b/templates/preload.mustache @@ -1,4 +1,6 @@ -
-
{{title}}
- +
+
+
{{title}}
+ +