enable padding and maxwidth for embed, youtube and image shortcodes
parent
5486b59550
commit
fa8f5c6fc2
|
@ -4,7 +4,14 @@
|
|||
{{ with .Get "title" }}
|
||||
<div class="box__title">{{ . }}</div>
|
||||
{{ end }}
|
||||
<div
|
||||
{{ with .Get "type" }} class="embed--{{ . }}"{{end}}
|
||||
{{ with .Get "id" }} id="{{ . }}"{{end}}
|
||||
{{ with .Get "maxwidth"}} maxWidth="{{ . }}"{{ end }}
|
||||
{{ with .Get "wpad"}} wPad="{{ . }}"{{ end }}
|
||||
>
|
||||
{{ .Inner }}
|
||||
</div>
|
||||
{{ with .Get "caption"}}
|
||||
<div class="box__caption">{{ . }}</div>
|
||||
{{ end }}
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
// TODO register these individually with window resize use self callled function
|
||||
function resizeElements() {
|
||||
navbarSpacer();
|
||||
$('.box--embed > iframe').fitToWindow()
|
||||
$('.box--image > img').fitToWindow()
|
||||
$('.box--embed iframe').fitToWindow()
|
||||
$('.box--image img').fitToWindow()
|
||||
heroResize();
|
||||
typeResize(); // for section content
|
||||
$('.section__content--modal').perfectScrollbar('update');
|
||||
|
|
|
@ -15,8 +15,11 @@
|
|||
|
||||
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')}`)
|
||||
var mw = $el.parent().attr('maxWidth');
|
||||
maxWidth = mw ? mw : maxWidth
|
||||
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
|
||||
|
||||
let windowWidth = $(window).width()
|
||||
|
@ -50,6 +53,23 @@
|
|||
|
||||
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}`)
|
||||
|
||||
// Set new size of element
|
||||
|
|
|
@ -7,11 +7,9 @@
|
|||
$('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)
|
||||
$(this).append(thumb).children().append(playBtn).click(insertIframe).fitToWindow()
|
||||
|
||||
} else { // if image thumbs turned off
|
||||
insertIframe.call(this)
|
||||
|
|
Loading…
Reference in New Issue