responsive iframes now working! All basic layout working

assets/css/base.css

@@ -26,6 +26,8 @@ body{
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-top: 1em;
+  padding-bottom: 1em;
 }
 
 /* mobile first column */

assets/css/page.css

@@ -87,6 +87,11 @@ padding-left:1em
     justify-content: center;
 }
 
+.box--column {
+    flex-direction: column;
+    align-items: center;
+}
+
 .box--headline {}
 
 .box--text {}
@@ -96,8 +101,12 @@ padding-left:1em
 }
 
 .box__embed {
+  /*height: 100vh;*/
+  width: 100%;
   display: flex;
   flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: center;
   align-items: center;
 }
 

assets/js/docready.js

@@ -7,7 +7,7 @@ $(document).ready(function () {
     thumbWidth: 80,
     controls: true,
     loop: false,
-    download: true,
+    download: false,
     counter: true,
     // videojs: true
   });
@@ -20,14 +20,9 @@ $(document).ready(function () {
     $('.nav-bar').css("display", "flex")
   });
 
-  lg.on('onBeforeOpen.lg', function (event) {
-    $('.nav-bar').css("display", "none")
-  });
-
   // initialize hero size
   heroResize();
-  // iframeResize();
-  // jQuery('iframe').fitToParent(); // for all iframes
+  iframeResize();
 
   $('section').flowtype({
     // maximum: 1000,
@@ -42,10 +37,9 @@ $(document).ready(function () {
   });
 
   // resize elements on change
-  $(window).resize(function () {
+  $(window).smartresize(function () {
     heroResize();
-    // iframeResize();
-    // jQuery('iframe').fitToParent();
+    iframeResize();
   });
 
 });

assets/js/junk.js

@@ -1,3 +1,13 @@
+//
+// // get all original iframe dimensions
+// (function iframeInit() {
+//   $('iframe').each(function (i) {
+//     console.log(i, $(this).attr('height'), $(this).attr('width'));
+//     this.aspect = $(this).attr('height') / $(this).attr('width')
+//     console.log('aspect iframe', i, this.aspect)
+//   })
+// }());
+
 // videos - preload
 (function videoInit() {
 

assets/js/page.js

@@ -1,8 +1,8 @@
 // hero resizer
 function heroResize() {
-  jQuery('#hero').css({
-    width: jQuery(window).width(),
-    height: jQuery(window).height()
+  $('#hero').css({
+    width: $(window).width(),
+    height: $(window).height()
   });
 }
 
@@ -22,7 +22,7 @@ $('a[href*="#"]:not([href="#"])').click(function () {
   }
 });
 
-// navbar - preload
+// navbar mobile toggle - preload
 (function navbarInit() {
 
   function toggleMobileMenu() {
@@ -33,24 +33,47 @@ $('a[href*="#"]:not([href="#"])').click(function () {
 
 }());
 
-// function iframeResize(percent = 1) {
-//   console.log('window width', percent, $(window).width())
-//   console.log('section_content', percent, $('.section__content').width())
-//   console.log('box embed width', percent, $('.box__embed').width())
-//   $('iframe').each(function (i) {
-//     console.log('aspect', this.aspect)
-//     $(this).attr('height', this.aspect * $('.box__embed').width())
-//     $(this).attr('width', $('.box__embed').width())
-//   })
-//   console.log('new width and height', $('iframe')[0].width, $('iframe')[0].height)
-//   console.log('new width and height', $('iframe')[1].width, $('iframe')[1].height)
-// }
-//
-// // get all original iframe dimensions
-// (function iframeInit() {
-//   $('iframe').each(function (i) {
-//     console.log(i, $(this).attr('height'), $(this).attr('width'));
-//     this.aspect = $(this).attr('height') / $(this).attr('width')
-//     console.log('aspect iframe', i, this.aspect)
-//   })
-// }());
+function iframeResize(maxWidth = 450) {
+  var windowWidth = $(window).width()
+  var width = (windowWidth > maxWidth) ? maxWidth : windowWidth - 20
+    // alert(`before ww width ${windowWidth} ${width}`)
+  jQuery('iframe').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) {
+      // alert(`after w h ${newWidth} ${newHeight}`)
+      // Fires after fitting is complete
+    }
+  })
+}
+
+// debouncing function for window resize from John Hann
+// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
+(function ($, sr) {
+  var debounce = function (func, threshold, execAsap) {
+      var timeout;
+
+      return function debounced() {
+        var obj = this,
+          args = arguments;
+
+        function delayed() {
+          if (!execAsap)
+            func.apply(obj, args);
+          timeout = null;
+        };
+
+        if (timeout)
+          clearTimeout(timeout);
+        else if (execAsap)
+          func.apply(obj, args);
+
+        timeout = setTimeout(delayed, threshold || 100);
+      };
+    }
+    // smartresize
+  jQuery.fn[sr] = function (fn) { return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
+
+})(jQuery, 'smartresize');

content/about.md

@@ -10,5 +10,5 @@ anchor="atext ut"
 Built in 1977 in Central Point, Oregon this 1548 sq. ft. Rambler/Ranch Style House has 3 bedrooms, 2 baths, covered patio, and an attached 2-car garage.  It would be perfect for two child family or a couple wanting a spare bedroom and an office.  Since 2007 the house has had numerous updates and is move-in ready.  It is located within easy walking distance to Central Point's high and middle schools as well as the Bear Creek Greenway, Jackson County Expo and a RVTD bus stop.
 
 {{< embed type="google-map" title="A Title" caption="A caption" >}}
-<!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2946.84955578167!2d-122.92451728429863!3d42.38835127918494!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54cf7c44f081d5df%3A0x72a99d35e8998a87!2s4005+Rock+Way%2C+Central+Point%2C+OR+97502!5e0!3m2!1sen!2sus!4v1488952358943" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> -->
+<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2946.84955578167!2d-122.92451728429863!3d42.38835127918494!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54cf7c44f081d5df%3A0x72a99d35e8998a87!2s4005+Rock+Way%2C+Central+Point%2C+OR+97502!5e0!3m2!1sen!2sus!4v1488952358943" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
 {{< /embed >}}

content/photos.md

@@ -4,4 +4,4 @@ title = "Photo Gallery"
 link_text = "Photos"
 weight = 2
 +++
-{{% gallery %}}
+{{% 4005-gallery %}}

content/video.md

@@ -4,6 +4,6 @@ title = "Video Walk Through"
 weight = 3
 link_text = "Video"
 +++
-{{< embed youtube-video >}}
-<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/Fv2BF_V8cWM" frameborder="0" allowfullscreen></iframe> -->
+{{< embed youtube >}}
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Fv2BF_V8cWM" frameborder="0" allowfullscreen></iframe>
 {{< /embed }}

layouts/partials/js.html

@@ -16,6 +16,9 @@
 <script src="js/analytics.js"></script>
 {{ end }}
 
+<!-- sizing tools -->
+<script src="js/fitToParent.js"></script>
+
 <!-- development tools -->
 <script src="js/lorem.js"></script>
 

layouts/shortcodes/embed.html

@@ -3,17 +3,18 @@
 <div class="box box--{{ .Get "type" }}">
     {{ with .Get "title" }}
     <div class="box__title">{{ . }}</div>
-      {{ end }} {{ with .Get "caption"}}
-      <div class="box__caption">{{ . }}</div>
     {{ end }}
     <div class="box__embed box__embed--{{ .Get "type" }}">
         {{ .Inner }}
     </div>
- </div>
- {{ else }}
+    {{ with .Get "caption"}}
+    <div class="box__caption">{{ . }}</div>
+    {{ end }}
+</div>
+{{ else }}
 <div class="box box--{{ .Get 0 }}">
     <div class="box__embed box__embed--{{ .Get 0 }}">
         {{ .Inner }}
     </div>
 </div>
-    {{ end }}
+{{ end }}