add in settings to turn off youtube thumb images on demand globally and per shortcode

layouts/partials/js.html

@@ -9,6 +9,7 @@
 <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script>
 
 <!-- LOCAL -->
+<script src="/js/util.js"></script>
 <!-- sizing tools -->
 <script src="/js/fitToWindow.js"></script>
 <script src="/js/flowType.js"></script>

layouts/shortcodes/youtube.html

@@ -1,9 +1,10 @@
-<!-- TODO add in defaul maxwidth and wpad here with site parameters and scratch -->
+{{ if .IsNamedParams }}
 {{ 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 }}
+{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "noThumb" .disable_thumb }}{{ end }}
+{{ with .Get "nothumb" }}{{ $.Scratch.Set "noThumb" . }}{{ end }}
 <div class="box box--column">
     {{ with .Get "title" }}
     <div class="box__title">{{ . }}</div>
@@ -14,6 +15,7 @@
        {{ with .Get "plist"}} list="{{ . }}"{{ end }}
        {{ with $.Scratch.Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
        {{ with $.Scratch.Get "wpad"}} wPad="{{ . }}"{{ end }}
+       {{ with $.Scratch.Get "noThumb"}} nothumb="yes" {{ end }}
        >
   <!-- thumb and video get put here -->
     </div>
@@ -23,7 +25,12 @@
 </div>
 {{ else }}
 {{ $numOfParams := ( len .Params ) }}
-<div class="box box--embed box--youtube" youtube_id="{{ .Get 0 }}" {{ if eq $numOfParams 2 }} start="{{ .Get 1 }}"{{ end }}>
+{{ with $.Site.Params.youtube }}{{ $.Scratch.Set "noThumb" .disable_thumb }}{{ end }}
+<div class="box box--embed box--youtube"
+       youtube_id="{{ .Get 0 }}"
+       {{ if eq $numOfParams 2 }} start="{{ .Get 1 }}"{{ end }}
+       {{ with $.Scratch.Get "noThumb"}} nothumb="yes" {{ end }}
+       >
       <!-- image or iframe injected here -->
 </div>
 {{ end }}

readme.md

@@ -21,3 +21,11 @@ For those who are Hugo experienced and know what they are doing and are able to
 ## Getting Started
 
 See this theme in action as a landing page and learn about how to use it to make your own landing page by visiting the [landing page guide](https://dkebler.github.io/landingpage-guide/) (generated by Hugo and this theme of course).  Once you have the tools you'll need installed you can begin editing a copy of the starter repository.  Quickly you'll have a rough version of **your** landing page in just a few minutes.
+
+## Cavets
+
+**This code does not support older nor old-ball browsers**  I have taken **NO** measures to support anything but the latest popular browsers (that would be Chrome, Firefox and Edge).  There is not css prefixing.  The javascript should be compatible with the mentioned browsers on any version out in the last year or two.  If you want to use this code to reach "everyone" then it would be up to you to make the necessary modifications.  That said it will work for most people who have upgraded their phone/browser in the last two years.  I make no guarantees against bugs as I have done very little testing on actual devices as services like browserstack are expensive and I don't have the time.  So for example I have not tested in IOS running Safari since I don't own any Apple devices.  Beyond that I have written no tests for the javascript code although I have tried to manually test things in particular the settings in the toml file.  It's probably just fine for non-critical stuff.  Otherwise I'd fork it and spend the time making it battle hardended.
+
+## Optimization
+
+At this time I have not written any workflow code to concatenate and minifify the javascript, css, or html.  Plans are in the works to write some nodejs to do this so when building using for depolyment Hugo will use the optimized files and templates.  For the time being it is what it is.  There not so much code here that I have honestly noticed a performance hit.  I did write javascript code to use youtube thumb images which really helps with load time if you need a lot of videos embedded.  Using optomized images on your part if you have a lot would have a greater effect than this optimization anyway. 

static/js/util.js

@@ -0,0 +1,6 @@
+function isMobile(a) {
+  return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)));
+}
+
+// Call is
+// isMobile(navigator.userAgent || navigator.vendor || window.opera)

static/js/youtube.js

@@ -2,27 +2,41 @@
 
   $(document).bind("DOMContentLoaded",
     function () {
-      // TODO also grad maxwith and window padding data
+
       var playBtn = '<i class="fa fa-play-circle-o play-button"></i>'
       $('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)
+
+        } else { // if image thumbs turned off
+          insertIframe.call(this)
+        }
+
+      })
     })
-    });
 
   function insertIframe() {
     var $box = $(this).parent()
     var id = $box.attr('youtube_id')
+    var autoplay = "autoplay=1&"
+    if (!id) { // image thumb is off not called by thumb so don't need parent
+      $box = $(this)
+      id = $box.attr('youtube_id')
+      autoplay = ""
+    }
+    var mw = $box.attr('maxWidth');
+    var wp = $box.attr('wPad');
     var start = $box.attr("start") || 1
     var list = ""
     if ($box.attr("list")) { list = `&list=${$box.attr("list")}` }
-    var url = `https://www.youtube.com/embed/${id}?autoplay=1&start=${start}`
+    var url = `https://www.youtube.com/embed/${id}?${autoplay}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"))
+    $box.html(vIframe).children().fitToWindow($box.data("maxWidth") || mw, $box.data("wPad") || wp)
   }
 
 }(jQuery));