enable padding and maxwidth for embed, youtube and image shortcodes

master
David Kebler 2017-04-19 14:10:18 -07:00
parent 5486b59550
commit fa8f5c6fc2
4 changed files with 31 additions and 6 deletions

View File

@ -4,7 +4,14 @@
{{ with .Get "title" }} {{ with .Get "title" }}
<div class="box__title">{{ . }}</div> <div class="box__title">{{ . }}</div>
{{ end }} {{ end }}
<div
{{ with .Get "type" }} class="embed--{{ . }}"{{end}}
{{ with .Get "id" }} id="{{ . }}"{{end}}
{{ with .Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
{{ with .Get "wpad"}} wPad="{{ . }}"{{ end }}
>
{{ .Inner }} {{ .Inner }}
</div>
{{ with .Get "caption"}} {{ with .Get "caption"}}
<div class="box__caption">{{ . }}</div> <div class="box__caption">{{ . }}</div>
{{ end }} {{ end }}

View File

@ -1,8 +1,8 @@
// TODO register these individually with window resize use self callled function // TODO register these individually with window resize use self callled function
function resizeElements() { function resizeElements() {
navbarSpacer(); navbarSpacer();
$('.box--embed > iframe').fitToWindow() $('.box--embed iframe').fitToWindow()
$('.box--image > img').fitToWindow() $('.box--image img').fitToWindow()
heroResize(); heroResize();
typeResize(); // for section content typeResize(); // for section content
$('.section__content--modal').perfectScrollbar('update'); $('.section__content--modal').perfectScrollbar('update');

View File

@ -15,8 +15,11 @@
console.log(`element ${$el.prop("tagName")} ${$el.attr("class")} parent ${$el.parent().attr('class')}`) console.log(`element ${$el.prop("tagName")} ${$el.attr("class")} parent ${$el.parent().attr('class')}`)
console.log(`before ${maxWidth} ${wPad} ${$el.data('maxWidth')} ${$el.data('wPad')}`) console.log(`before ${maxWidth} ${wPad} ${$el.data('maxWidth')} ${$el.data('wPad')}`)
var mw = $el.parent().attr('maxWidth');
maxWidth = mw ? mw : maxWidth
maxWidth = (maxWidth || $el.data('maxWidth')) || 450 maxWidth = (maxWidth || $el.data('maxWidth')) || 450
wPad = $el.parent().css("padding-left") > 0 ? $el.parent().css("padding-left") : wPad var wp = $el.parent().attr('wPad');
wPad = wp ? wp : wPad
wPad = (wPad || $el.data('wPad')) || 5 wPad = (wPad || $el.data('wPad')) || 5
let windowWidth = $(window).width() let windowWidth = $(window).width()
@ -50,6 +53,23 @@
newHeight = (newWidth / aspect); newHeight = (newWidth / aspect);
// TODO conform to enclosing .box with max-height set
// need to detect wrap so adjustement can be made
// http://stackoverflow.com/questions/40012428/how-to-detect-css-flex-wrap-event
// var maxParentHeight = parseInt($el.parents('.box').filter(function () {
// // var mel = $(this).attr('class');
// // var mxh = $(this).css('max-height')
// // console.log(`${mel} ${mxh}`)
// return $(this).css("max-height") != "none"
// }).first().css('max-height'))
//
// console.log(`max-height of parent ${maxParentHeight}`)
//
// if (maxParentHeight) {
// newHeight = maxParentHeight;
// newWidth = (newHeight * aspect);
// }
console.log(`new width and height before setting ${newWidth} ${newHeight}`) console.log(`new width and height before setting ${newWidth} ${newHeight}`)
// Set new size of element // Set new size of element

View File

@ -7,11 +7,9 @@
$('div[youtube_id]').each(function () { $('div[youtube_id]').each(function () {
if ($(this).attr('nothumb') !== "yes") { if ($(this).attr('nothumb') !== "yes") {
var vid = $(this).attr('youtube_id'); 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 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 thumb = `<div class="thumb--yt" ${bgi} width="560" height="315">`
$(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow(mw, wp) $(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow()
} else { // if image thumbs turned off } else { // if image thumbs turned off
insertIframe.call(this) insertIframe.call(this)