+{{ end }}
diff --git a/static/js/docready.js b/static/js/docready.js
index 7c73440..f456801 100644
--- a/static/js/docready.js
+++ b/static/js/docready.js
@@ -1,21 +1,26 @@
function resizeElements() {
navbarSpacer();
heroResize();
- tagResize('iframe');
- tagResize('.thumb--yt');
+ // tagResize('iframe');
+ // tagResize('.thumb--yt');
typeResize(); // for section content
$('.section__content--modal').perfectScrollbar('update');
};
-hljs.initHighlightingOnLoad();
-$('.section__content--modal').perfectScrollbar();
+function initialize() {
+ hljs.initHighlightingOnLoad();
+ $('.section__content--modal').perfectScrollbar();
+ resizeElements()
+};
+
+initialize();
// requires jquery
$(document).ready(function () {
- resizeElements()
-});
-// resize elements on change
-$(window).resize(function () {
- resizeElements()
+ // bind resize events
+ $(window).resize(function () {
+ resizeElements()
+ });
+
});
diff --git a/static/js/fitToParent.js b/static/js/fitToParent.js
deleted file mode 100644
index f6573ab..0000000
--- a/static/js/fitToParent.js
+++ /dev/null
@@ -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);
- }
-
- });
-};
diff --git a/static/js/fitToWindow.js b/static/js/fitToWindow.js
new file mode 100644
index 0000000..33a7e87
--- /dev/null
+++ b/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") }
+}
diff --git a/static/js/page.js b/static/js/page.js
index fbe000b..5f68e92 100644
--- a/static/js/page.js
+++ b/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,
diff --git a/static/js/youtube.js b/static/js/youtube.js
index 15792f6..92bc708 100644
--- a/static/js/youtube.js
+++ b/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';
- var $box = $('div[' + attr + ']');
- var vid = $box.attr(attr);
- var bgi = `style="background-image: url(https://i.ytimg.com/vi/${vid}/mqdefault.jpg)"`
- var thumb = `
`
+ // TODO also grad maxwith and window padding data
var playBtn = ''
- $box.append(thumb).children().append(playBtn).click(insertIframe)
- //.resize(sel + ' > img')
+ $('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 = `
`
+ $(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow(mw, wp)
+ })
});
function insertIframe() {
var $box = $(this).parent()
- id = $box.attr('youtube_id')
- var vIframe = ``
- console.log(vIframe)
- $box.html(vIframe)
+ var id = $box.attr('youtube_id')
+ 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 vIframe = ``
+ $box.html(vIframe).children().fitToWindow($box.data("maxWidth"), $box.data("wPad"))
}
- // .resize(sel + ' > iframe')
- // }
-
}(jQuery));