enable padding and maxwidth for embed, youtube and image shortcodes

layouts/shortcodes/embed.html

@@ -4,7 +4,14 @@
     {{ with .Get "title" }}
     <div class="box__title">{{ . }}</div>
     {{ end }}
+    <div
+       {{ with .Get "type" }} class="embed--{{ . }}"{{end}}
+       {{ with .Get "id" }} id="{{ . }}"{{end}}
+       {{ with .Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
+       {{ with .Get "wpad"}} wPad="{{ . }}"{{ end }}
+       >
     {{ .Inner }}
+    </div>
     {{ with .Get "caption"}}
     <div class="box__caption">{{ . }}</div>
     {{ end }}

static/js/docready.js

@@ -1,8 +1,8 @@
 // TODO register these individually with window resize use self callled function
 function resizeElements() {
   navbarSpacer();
-  $('.box--embed > iframe').fitToWindow()
+  $('.box--embed iframe').fitToWindow()
-  $('.box--image > img').fitToWindow()
+  $('.box--image img').fitToWindow()
   heroResize();
   typeResize(); // for section content
   $('.section__content--modal').perfectScrollbar('update');

static/js/fitToWindow.js

@@ -15,8 +15,11 @@
 
       console.log(`element ${$el.prop("tagName")} ${$el.attr("class")} parent ${$el.parent().attr('class')}`)
       console.log(`before ${maxWidth} ${wPad} ${$el.data('maxWidth')} ${$el.data('wPad')}`)
+      var mw = $el.parent().attr('maxWidth');
+      maxWidth = mw ? mw : maxWidth
       maxWidth = (maxWidth || $el.data('maxWidth')) || 450
-      wPad = $el.parent().css("padding-left") > 0 ? $el.parent().css("padding-left") : wPad
+      var wp = $el.parent().attr('wPad');
+      wPad = wp ? wp : wPad
       wPad = (wPad || $el.data('wPad')) || 5
 
       let windowWidth = $(window).width()
@@ -50,6 +53,23 @@
 
       newHeight = (newWidth / aspect);
 
+      // TODO conform to enclosing .box with max-height set
+      //  need to detect wrap so adjustement can be made
+      // http://stackoverflow.com/questions/40012428/how-to-detect-css-flex-wrap-event
+      // var maxParentHeight = parseInt($el.parents('.box').filter(function () {
+      //   // var mel = $(this).attr('class');
+      //   // var mxh = $(this).css('max-height')
+      //   // console.log(`${mel} ${mxh}`)
+      //   return $(this).css("max-height") != "none"
+      // }).first().css('max-height'))
+      //
+      // console.log(`max-height of parent ${maxParentHeight}`)
+      //
+      // if (maxParentHeight) {
+      //   newHeight = maxParentHeight;
+      //   newWidth = (newHeight * aspect);
+      // }
+
       console.log(`new width and height before setting ${newWidth} ${newHeight}`)
 
       // Set new size of element

static/js/youtube.js

@@ -7,11 +7,9 @@
       $('div[youtube_id]').each(function () {
         if ($(this).attr('nothumb') !== "yes") {
           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">`
-          $(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow(mw, wp)
+          $(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow()
 
         } else { // if image thumbs turned off
           insertIframe.call(this)