improve resize element processing - refactor js

assets/css/navbar.css

@@ -20,13 +20,13 @@
   flex-direction: row;
   justify-content: flex-start;
   align-content: center;
-  padding-top: 1em;
+  padding-top: 0.9em;
-  padding-bottom: 1em;
+  padding-bottom: 0.9em;
 }
 
 .nav-bar__logo,
 .nav-bar__menu-button {
-  font-size: 1.5em;
+  font-size: 1.8em;
   padding-left: 1em;
 }
 
@@ -53,8 +53,8 @@
   justify-content: center;
   transition: 200ms;
   border-top: 2px solid;
-  font-size: 2em;
+  font-size: 1.8em;
-  padding: 1em;
+  padding: .5em;
 }
 
 .nav-bar__menu-item > a {

assets/css/page.css

@@ -17,6 +17,8 @@
   max-width: 80%;
   padding-top: 0.3em;
   padding-bottom: 1em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
 }
 
 .section__content li {
@@ -27,11 +29,11 @@
   font-family: FontAwesome;
   content: "\f18e";
   padding-right: 0.5em;
-  padding-left: 1em;
+  padding-left: 0;
 }
 
 .section__content ul li {
-  text-indent: -3rem;
+  text-indent: -1.2rem;
 }
 
 .section--even {

assets/css/responsive.css

@@ -2,6 +2,9 @@
 
 /* small tablets */
 @media only screen and (min-width: 600px) {
+  .section__content ul li {
+    text-indent: -2rem;
+  }
 }
 
 @media only screen and (min-device-width: 600px) and (max-device-width: 799px) {

assets/js/docready.js

@@ -1,45 +1,17 @@
 // requires jquery
 $(document).ready(function () {
-  // Intialize all the media i.e. photos with "media" id
-  // TODO use Hugo params to initialize multiple galleries/albums
-  var lg = $("#4005").lightGallery({
-    thumbnail: true,
-    thumbWidth: 80,
-    controls: true,
-    loop: false,
-    download: false,
-    counter: true,
-    // videojs: true
-  });
 
-  lg.on('onBeforeOpen.lg', function (event) {
+  // initialize
-    $('.nav-bar').css("display", "none")
-  });
-
-  lg.on('onCloseAfter.lg', function (event) {
-    $('.nav-bar').css("display", "flex")
-  });
-
-  // initialize hero size
   heroResize();
   itemResize('iframe');
-
+  typeResize(); // for section content
-  $('section').flowtype({
+  lightbox('#4005') // TODO put this in template instead of hard coding using parameter
-    // maximum: 1000,
-    minFont: 12,
-    maxFont: 25,
-    fontRatio: 20
-  });
-
-  $('#hero').flowtype({
-    maxFont: 60,
-    fontRatio: 15
-  });
 
   // resize elements on change
   $(window).resize(function () {
     heroResize();
     itemResize('iframe');
+    typeResize();
   });
 
 });

assets/js/fitToParent.js

@@ -37,7 +37,7 @@ jQuery.fn.fitToParent = function (options) {
     var parentWidth = settings.boxWidth - settings.widthOffset;
     var parentHeight = settings.boxHeight - settings.heightOffset;
 
-    console.log(`settings.boxWidth, parentWidth ${settings.boxWidth} ${parentWidth}`);
+    // console.log(`settings.boxWidth, parentWidth ${settings.boxWidth} ${parentWidth}`);
 
     // Maintain aspect ratio
     var aspect = $el.data('aspect');
@@ -45,6 +45,8 @@ jQuery.fn.fitToParent = function (options) {
       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) {
@@ -61,7 +63,7 @@ jQuery.fn.fitToParent = function (options) {
     newWidth = parentWidth;
     newHeight = (newWidth / aspect);
 
-    console.log(`width before setting ${newWidth}`)
+    // console.log(`width before setting ${newWidth}`)
 
     // Set new size of element
     $el.width(newWidth);

assets/js/flowType.js

@@ -0,0 +1,37 @@
+/*
+ * Adapted from FlowType.JS v1.1
+ * Copyright 2013-2014, Simple Focus http://simplefocus.com/
+ *
+ */
+
+$.fn.flowtype = function (options) {
+
+  // Establish default settings/variables
+  // ====================================
+  var settings = $.extend({
+      maximum: 9999,
+      minimum: 1,
+      maxFont: 9999,
+      minFont: 1,
+      fontRatio: 35
+    }, options),
+
+    // the magic math
+    // =================
+    resize = function (el) {
+      var $el = $(el),
+        elw = $el.width(),
+        width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
+        fontBase = width / settings.fontRatio,
+        fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
+      $el.css('font-size', fontSize + 'px');
+    };
+
+  // Make the magic visible
+  // ======================
+  this.each(function () {
+    // resize text in each element
+    resize(this);
+  });
+
+};

assets/js/page.js

@@ -1,11 +1,3 @@
-// hero resizer
-function heroResize() {
-  $('#hero').css({
-    width: $(window).width(),
-    height: $(window).height()
-  });
-}
-
 // Smooth Scroll Init - Register click handler for ID anchors
 $('a[href*="#"]:not([href="#"])').click(function () {
   if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
@@ -33,6 +25,19 @@ $('a[href*="#"]:not([href="#"])').click(function () {
 
 }());
 
+// hero resizer
+function heroResize() {
+  $('#hero').css({
+    width: $(window).width() + 10,
+    height: $(window).height() + 10
+  });
+  $('#hero').flowtype({
+    maxFont: 60,
+    fontRatio: 15
+  });
+}
+
+// child item resize based on parent container (i.e. flexbox)
 function itemResize(item, maxWidth = 450, widthPadding = 30) {
   let windowWidth = $(window).width()
   let width = (windowWidth > maxWidth) ? maxWidth : windowWidth - widthPadding
@@ -42,97 +47,40 @@ function itemResize(item, maxWidth = 450, widthPadding = 30) {
     // 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) {
+      // callback: function (newWidth, newHeight) {}
-      //   // alert(`after w h ${newWidth} ${newHeight}`)
-      //   // Fires after fitting is complete
-      // }
   })
 }
 
-// /*
+function typeResize() {
-//  * throttledresize: special jQuery event that happens at a reduced rate compared to "resize"
+  $('.section').flowtype({
-//  *
+    // maximum: 1000,
-//  * latest version and complete README available on Github:
+    minFont: 12,
-//  * https://github.com/louisremi/jquery-smartresize
+    maxFont: 25,
-//  *
+    fontRatio: 20
-//  * Copyright 2012 @louis_remi
+  })
-//  * Licensed under the MIT license.
+}
-//  *
+
-//  * This saved you an hour of work?
+// Lightbox for Gallery
-//  * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
+
-//  */
+function lightbox(id) {
-// (function ($) {
+  // Intialize all the media i.e. photos with "media" id
-//
+  // TODO use Hugo params to initialize multiple galleries/albums
-//   var $event = $.event,
+  var lg = $(id).lightGallery({
-//     $special,
+    thumbnail: true,
-//     dummy = { _: 0 },
+    thumbWidth: 80,
-//     frame = 0,
+    controls: true,
-//     wasResized, animRunning;
+    loop: false,
-//
+    download: false,
-//   $special = $event.special.throttledresize = {
+    counter: true,
-//     setup: function () {
+    // videojs: true
-//       $(this).on("resize", $special.handler);
+  });
-//     },
+
-//     teardown: function () {
+  lg.on('onBeforeOpen.lg', function (event) {
-//       $(this).off("resize", $special.handler);
+    $('.nav-bar').css("display", "none")
-//     },
+  });
-//     handler: function (event, execAsap) {
+
-//       // Save the context
+  lg.on('onCloseAfter.lg', function (event) {
-//       var context = this,
+    $('.nav-bar').css("display", "flex")
-//         args = arguments;
+  });
-//
+
-//       wasResized = true;
+}
-//
-//       if (!animRunning) {
-//         setInterval(function () {
-//           frame++;
-//
-//           if (frame > $special.threshold && wasResized || execAsap) {
-//             // set correct event type
-//             event.type = "throttledresize";
-//             $event.dispatch.apply(context, args);
-//             wasResized = false;
-//             frame = 0;
-//           }
-//           if (frame > 9) {
-//             $(dummy).stop();
-//             animRunning = false;
-//             frame = 0;
-//           }
-//         }, 30);
-//         animRunning = true;
-//       }
-//     },
-//     threshold: 0
-//   };
-//
-// })(jQuery, 'throttledResize');
-//
-// // 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, 50)) : this.trigger(sr); };
-//
-// })(jQuery, 'debounceResize');

layouts/partials/js.html

@@ -5,22 +5,20 @@
 <!-- light gallery and modules/plugins -->
 <script src="https://cdn.jsdelivr.net/g/lightgallery,lg-autoplay,lg-pager,lg-thumbnail,lg-video"></script>
 
-<!-- flowtype for font sizing -->
-<script src="https://cdn.jsdelivr.net/flowtype.js/1.1/flowtype.min.js"></script>
-
 <!-- LOCAL -->
-<!-- All functions for page use -->
-<script src="js/page.js"></script>
 
+<!-- Function Library -->
+<!-- sizing tools -->
+<script src="js/fitToParent.js"></script>
+<script src="js/flowType.js"></script>
+<!-- development tools -->
+<script src="js/lorem.js"></script>
 {{ if isset .Site.Params "googleAnalytics" }}
 <script src="js/analytics.js"></script>
 {{ end }}
 
-<!-- sizing tools -->
+<!-- site specific functions for page use -->
-<script src="js/fitToParent.js"></script>
+<script src="js/page.js"></script>
 
-<!-- development tools -->
+<!-- Document Ready - Initialize - Window resize calls -->
-<script src="js/lorem.js"></script>
-
-<!-- Document Ready - Start -->
 <script src="js/docready.js"></script>