youtube shortcode embeding with fit to window working!

layouts/partials/js.html

@@ -10,7 +10,7 @@
 
 <!-- LOCAL -->
 <!-- sizing tools -->
-<script src="/js/fitToParent.js"></script>
+<script src="/js/fitToWindow.js"></script>
 <script src="/js/flowType.js"></script>
 <!-- videos embed -->
 <script src="/js/youtube.js"></script>

layouts/shortcodes/youtube.html

@@ -1,4 +1,29 @@
-<!-- Used for embedding iframes from sites like youtube and google -->
+<!-- TODO add in defaul maxwidth and wpad here with site parameters and scratch -->
-<div class="box box--embed box--youtube" youtube_id="{{ .Get 0 }}">
+{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "maxwidth" .maxwidth }}{{ end }}
+{{ with .Get "maxwidth" }}{{ $.Scratch.Set "maxwidth" . }}{{ end }}
+{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "wpad" .wpad }}{{ end }}
+{{ with .Get "wpad" }}{{ $.Scratch.Set "wpad" . }}{{ end }}
+{{ if .IsNamedParams }}
+<div class="box box--column">
+    {{ with .Get "title" }}
+    <div class="box__title">{{ . }}</div>
+    {{ end }}
+    <div class="box box--embed box--youtube"
+       youtube_id="{{ .Get "id" }}"
+       {{ with .Get "start"}} start="{{ . }}"{{ end }}
+       {{ with .Get "plist"}} list="{{ . }}"{{ end }}
+       {{ with $.Scratch.Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
+       {{ with $.Scratch.Get "wpad"}} wPad="{{ . }}"{{ end }}
+       >
+  <!-- thumb and video get put here -->
+    </div>
+    {{ with .Get "caption"}}
+    <div class="box__caption">{{ . }}</div>
+    {{ end }}
+</div>
+{{ else }}
+{{ $numOfParams := ( len .Params ) }}
+<div class="box box--embed box--youtube" youtube_id="{{ .Get 0 }}" {{ if eq $numOfParams 2 }} start="{{ .Get 1 }}"{{ end }}>
       <!-- image or iframe injected here -->
 </div>
+{{ end }}

static/js/docready.js

@@ -1,21 +1,26 @@
 function resizeElements() {
   navbarSpacer();
   heroResize();
-  tagResize('iframe');
+  // tagResize('iframe');
-  tagResize('.thumb--yt');
+  // tagResize('.thumb--yt');
   typeResize(); // for section content
   $('.section__content--modal').perfectScrollbar('update');
 };
 
+function initialize() {
   hljs.initHighlightingOnLoad();
   $('.section__content--modal').perfectScrollbar();
+  resizeElements()
+};
+
+initialize();
 
 // requires jquery
 $(document).ready(function () {
-  resizeElements()
-});
 
-// resize elements on change
+  // bind resize events
   $(window).resize(function () {
     resizeElements()
   });
+
+});

static/js/fitToParent.js

@@ -1,79 +0,0 @@
-/*!
- * jQuery fitToParent; version: 1.2.1
- * https://github.com/drewbaker/fitToParent
- */
-jQuery.fn.fitToParent = function (options) {
-
-  this.each(function () {
-    // Vars
-    var $el = jQuery(this);
-    var $box;
-
-    // Get size parent (box to fit element in)
-    if ($el.closest('.box--embed').length) {
-      $box = $el.closest('.box--embed');
-    } else {
-      $box = $el.parent();
-    }
-
-    // These are the defaults.
-    var settings = jQuery.extend({
-      heightOffset: 0,
-      widthOffset: 0,
-      boxHeight: $box.height(),
-      boxWidth: $box.width(),
-      callback: null
-    }, options);
-
-    // Setup box and element widths
-    var width = $el.attr('width');
-    var height = $el.attr('height');
-
-    if (!width || !height) {
-      var width = $el.width();
-      var height = $el.height();
-    }
-
-    var parentWidth = settings.boxWidth - settings.widthOffset;
-    var parentHeight = settings.boxHeight - settings.heightOffset;
-
-    // console.log(`settings.boxWidth, parentWidth ${settings.boxWidth} ${parentWidth}`);
-
-    // Maintain aspect ratio
-    var aspect = $el.data('aspect');
-    if (!aspect) {
-      aspect = width / height;
-      $el.data('aspect', aspect);
-    }
-
-    // removed for flexbox parent with dynamic height
-    //  var parentAspect = parentWidth / parentHeight;
-    // // Resize to fit box
-    // if (aspect > parentAspect) {
-    //   newWidth = parentWidth;
-    //   console.log(`aspect > width ${newWidth}`)
-    //   newHeight = (newWidth / aspect);
-    //
-    // } else {
-    //   newHeight = parentHeight;
-    //   newWidth = newHeight * aspect;
-    //   console.log(`aspect < width ${newWidth}`)
-    // }
-
-    newWidth = parentWidth;
-    newHeight = (newWidth / aspect);
-
-    // console.log(`$parent,$element ${$box[0].classList} ${$el[0].tagName}`)
-    // console.log(`width and height before setting ${newWidth} ${newHeight}`)
-
-    // Set new size of element
-    $el.width(newWidth);
-    $el.height(newHeight);
-
-    // Fire callback
-    if (typeof (settings.callback) == "function") {
-      settings.callback(newWidth, newHeight);
-    }
-
-  });
-};

static/js/fitToWindow.js

@@ -0,0 +1,78 @@
+/*!
+ * adapted from
+ * https://github.com/drewbaker/fitToParent
+ */
+
+(function ($) {
+
+  $.fn.fitToWindow = function (maxWidth, wPad) {
+
+    console.log("in fit to Window")
+
+    // if more than one element
+    this.each(function () {
+      let $el = $(this);
+
+      console.log(`${maxWidth} ${wPad} ${$el.data('maxWidth')} ${$el.data('wPad')}`)
+
+      maxWidth = (maxWidth || $el.data('maxWidth')) || 450
+      wPad = (wPad || $el.data('wPad')) || 5
+
+      let windowWidth = $(window).width()
+      let newWidth = (windowWidth > maxWidth) ? maxWidth : windowWidth - 2 * wPad
+
+      console.log(`${maxWidth} ${wPad} ${newWidth} ${$el.parent().attr('youtube_id')}`)
+
+      // Initial Aspect given in attributes by element itself
+      let setWidth = $el.attr('width');
+      let setHeight = $el.attr('height');
+
+      if (!setWidth || !setHeight) {
+        setWidth = $el.width();
+        setHeight = $el.height();
+      }
+
+      // retrieve aspect ratio for element if none then set (first time)
+      var aspect = $el.data('aspect');
+      if (!aspect) {
+        aspect = setWidth / setHeight;
+        $el.data('aspect', aspect);
+        console.log(`aspect set ${aspect} = ${$el.data('aspect')}`)
+        $el.data('maxWidth', maxWidth)
+        $el.data('wPad', wPad)
+        console.log(`values set ${maxWidth} = ${$el.data('maxWidth')} ${wPad} = ${$el.data('wPad')}`)
+        console.log("REGISTERING RESIZE")
+        $(window).resize({ el: $el }, function (event) {
+          event.data.el.fitToWindow()
+        })
+      }
+
+      newHeight = (newWidth / aspect);
+
+      console.log(`new width and height before setting ${newWidth} ${newHeight}`)
+
+      // Set new size of element
+      $el.width(newWidth);
+      $el.height(newHeight);
+
+    });
+
+  }
+
+}(jQuery));
+
+// one time fit a element based on selector to the window
+let fitToWindow = function (sel) {
+  if (sel) {
+    $(sel).fitToWindow()
+  } else { Alert("no selector provided for resize event to call fitToWindow") }
+}
+
+// register a selector to be fitted to window on window resize
+let onResizeFitToWindow = function (sel) {
+  if (sel) {
+    $(window).resize(function () {
+      $(sel).fitToWindow()
+    })
+  } else { Alert("no selector provided for resize event to call fitToWindow") }
+}

static/js/page.js

@@ -61,22 +61,6 @@ function heroResize(bfr = 30) {
   });
 }
 
-// child item resize based on parent container (i.e. flexbox)
-// Especially good for iframes
-function tagResize(tag, maxWidth = 450, widthPadding = 30) {
-  let windowWidth = $(window).width()
-  let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
-    // console.log(`passed width ${width}`)
-  console.log(`tag ${tag}`)
-  jQuery(tag).fitToParent({
-    heightOffset: 0, // (int) Put some space around the element
-    // widthOffset: 5, // (int) Put some space around the element
-    // boxHeight: , // (int) Will look for .size-parent, or fallback to parent size
-    boxWidth: width // (int) Will look for .size-parent, or fallback to parent size
-      // callback: function (newWidth, newHeight) {}
-  })
-}
-
 function typeResize(fr = 20) {
   $('main:not(#hero)').flowtype({
     // maximum: 1000,

static/js/youtube.js

@@ -1,33 +1,28 @@
-/* Light YouTube Embeds by @labnol */
-/* Web: http://labnol.org/?p=27941 */
-
 (function ($) {
 
-  $.fn.tagResize = function (el) {
-    tagResize(el);
-  }
-
   $(document).bind("DOMContentLoaded",
     function () {
-      var attr = 'youtube_id';
+      // TODO also grad maxwith and window padding data
-      var $box = $('div[' + attr + ']');
+      var playBtn = '<i class="fa fa-play-circle-o play-button"></i>'
-      var vid = $box.attr(attr);
+      $('div[youtube_id]').each(function () {
+        var vid = $(this).attr('youtube_id');
+        var mw = $(this).attr('maxWidth');
+        var wp = $(this).attr('wPad');
         var bgi = `style="background-image: url(https://i.ytimg.com/vi/${vid}/mqdefault.jpg)"`
         var thumb = `<div class="thumb--yt" ${bgi} width="560" height="315">`
-      var playBtn = '<i class="fa fa-play-circle-o play-button"></i>'
+        $(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow(mw, wp)
-      $box.append(thumb).children().append(playBtn).click(insertIframe)
+      })
-        //.resize(sel + ' > img')
     });
 
   function insertIframe() {
     var $box = $(this).parent()
-    id = $box.attr('youtube_id')
+    var id = $box.attr('youtube_id')
-    var vIframe = `<iframe width = "560" height = "315" src = "https://www.youtube.com/embed/${id}?autoplay=1" frameborder = "0" allowfullscreen></iframe>`
+    var start = $box.attr("start") || 1
-    console.log(vIframe)
+    var list = ""
-    $box.html(vIframe)
+    if ($box.attr("list")) { list = `&list=${$box.attr("list")}` }
+    var url = `https://www.youtube.com/embed/${id}?autoplay=1&start=${start}`
+    var vIframe = `<iframe width = "560" height = "315" src ="${url}${list}" frameborder = "0" allowfullscreen></iframe>`
+    $box.html(vIframe).children().fitToWindow($box.data("maxWidth"), $box.data("wPad"))
   }
 
-  // .resize(sel + ' > iframe')
-  // }
-
 }(jQuery));