UCOMmandIt
/
uci-hugo-landingpage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

youtube shortcode embeding with fit to window working!

master
David Kebler 2017-04-11 14:37:42 -07:00
parent b3d6845e6b
commit 6902898adc
7 changed files with 136 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
layouts/partials/js.html
View File

@ -10,7 +10,7 @@
<!-- LOCAL -->
<!-- sizing tools -->
<script src="/js/fitToParent.js"></script>
<script src="/js/fitToWindow.js"></script>
<script src="/js/flowType.js"></script>
<!-- videos embed -->
<script src="/js/youtube.js"></script>

29
layouts/shortcodes/youtube.html
View File

@ -1,4 +1,29 @@
<!-- Used for embedding iframes from sites like youtube and google -->
<div class="box box--embed box--youtube" youtube_id="{{ .Get 0 }}">
<!-- TODO add in defaul maxwidth and wpad here with site parameters and scratch -->
{{ 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 }}
<div class="box box--column">
{{ with .Get "title" }}
<div class="box__title">{{ . }}</div>
{{ end }}
<div class="box box--embed box--youtube"
youtube_id="{{ .Get "id" }}"
{{ with .Get "start"}} start="{{ . }}"{{ end }}
{{ with .Get "plist"}} list="{{ . }}"{{ end }}
{{ with $.Scratch.Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
{{ with $.Scratch.Get "wpad"}} wPad="{{ . }}"{{ end }}
>
<!-- thumb and video get put here -->
</div>
{{ with .Get "caption"}}
<div class="box__caption">{{ . }}</div>
{{ end }}
</div>
{{ else }}
{{ $numOfParams := ( len .Params ) }}
<div class="box box--embed box--youtube" youtube_id="{{ .Get 0 }}" {{ if eq $numOfParams 2 }} start="{{ .Get 1 }}"{{ end }}>
<!-- image or iframe injected here -->
</div>
{{ end }}

21
static/js/docready.js
View File

@ -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 () {
// bind resize events
$(window).resize(function () {
resizeElements()
});
});

79
static/js/fitToParent.js
View File

@ -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);
}
});
};

78
static/js/fitToWindow.js Normal file
View File

@ -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") }
}

16
static/js/page.js
View File

@ -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,

35
static/js/youtube.js
View File

@ -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);
// 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 () {
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">`
var playBtn = '<i class="fa fa-play-circle-o play-button"></i>'
$box.append(thumb).children().append(playBtn).click(insertIframe)
//.resize(sel + ' > img')
$(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow(mw, wp)
})
});
function insertIframe() {
var $box = $(this).parent()
id = $box.attr('youtube_id')
var vIframe = `<iframe width = "560" height = "315" src = "https://www.youtube.com/embed/${id}?autoplay=1" frameborder = "0" allowfullscreen></iframe>`
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 = `<iframe width = "560" height = "315" src ="${url}${list}" frameborder = "0" allowfullscreen></iframe>`
$box.html(vIframe).children().fitToWindow($box.data("maxWidth"), $box.data("wPad"))
}
// .resize(sel + ' > iframe')
// }
}(jQuery));