Compare commits

...

3 Commits

Author SHA1 Message Date
buttle 267d382535 resolves js namespace conflict 2021-08-30 19:01:02 +02:00
buttle a7ad58b452 fixes multiple script rendering 2021-08-30 18:38:04 +02:00
buttle 5ccd8cb174 respects user defined widths 2021-08-30 18:14:25 +02:00
6 changed files with 23 additions and 42 deletions

View File

@ -1,4 +0,0 @@
function get_height(container, ratio) {
var height = $(container).width() / ratio
return height
}

View File

@ -0,0 +1,15 @@
function adjust_vimeo_height() {
$(".embeded-vimeo-wrapper").each(function() {
var iframe = $(this).find('iframe')
var height = $(iframe).width() / $(iframe).attr('ratio')
$(iframe).prop("height", height)
});
}
jQuery(document).ready(function() {
adjust_vimeo_height();
});
$(window).resize(function() {
adjust_vimeo_height();
});

View File

@ -32,7 +32,6 @@ return [
'title' => '', 'title' => '',
'renderSourceLink' => true, 'renderSourceLink' => true,
'width' => 100, 'width' => 100,
'ratio' => '2',
'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;', 'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
] ]
] ]

View File

@ -17,11 +17,6 @@ class VimeoBlockForm extends Form
'label' => 'Width', 'label' => 'Width',
'value_options' => Module::IMAGE_WIDTH, 'value_options' => Module::IMAGE_WIDTH,
], ],
/*
'attributes' => [
'min' => '100',
],
*/
]); ]);
$this->add([ $this->add([

View File

@ -49,7 +49,6 @@ class Vimeo extends AbstractBlockLayout
$form->setData([ $form->setData([
'o:block[__blockIndex__][o:data][title]' => $data['title'], 'o:block[__blockIndex__][o:data][title]' => $data['title'],
'o:block[__blockIndex__][o:data][width]' => $data['width'], 'o:block[__blockIndex__][o:data][width]' => $data['width'],
'o:block[__blockIndex__][o:data][ratio]' => $data['ratio'],
'o:block[__blockIndex__][o:data][renderSourceLink]' => $data['renderSourceLink'], 'o:block[__blockIndex__][o:data][renderSourceLink]' => $data['renderSourceLink'],
]); ]);
$form->prepare(); $form->prepare();
@ -71,14 +70,10 @@ class Vimeo extends AbstractBlockLayout
return ''; return '';
} }
$media = $attachments[0]->item()->media()[0]; $media = $attachments[0]->item()->media()[0];
$width = $media->mediaData()['width']; $ratio = $media->mediaData()['width'] / $media->mediaData()['height'];
$width = 100;
$height = 0;
// creates an iframe injecting our width and calculated ratio and height // creates an iframe injecting our width and calculated ratio
$attribs=" "; $attribs= 'ratio="'.$ratio.'"'.PHP_EOL;
$original_width = 0;
$original_height = 0;
$doc = new DOMDocument(); $doc = new DOMDocument();
$doc->loadHTML($media->mediaData()['html']); $doc->loadHTML($media->mediaData()['html']);
$html_element= $doc->getElementsByTagName('iframe')->item(0); $html_element= $doc->getElementsByTagName('iframe')->item(0);
@ -87,12 +82,11 @@ class Vimeo extends AbstractBlockLayout
$name = $attr->nodeName; $name = $attr->nodeName;
$value = $attr->nodeValue; $value = $attr->nodeValue;
if ($name == 'height') { if ($name == 'height') {
$original_height = $value; // we will calculate height with jQuery
continue; continue;
} }
if ($name == 'width') { if ($name == 'width') {
$original_width = $value; $attrib = 'width="'.$block->dataValue('width').'%"';
$attrib = $name.'="'.$width.'%"';
$attribs .= $attrib.PHP_EOL; $attribs .= $attrib.PHP_EOL;
continue; continue;
} }
@ -100,18 +94,12 @@ class Vimeo extends AbstractBlockLayout
$attribs .= $attrib.PHP_EOL; $attribs .= $attrib.PHP_EOL;
} }
} }
if ($original_height !== 0) {
$ratio = $original_width / $original_height;
$attrib = 'ratio="'.$ratio.'"';
$attribs .= $attrib.PHP_EOL;
}
$iframe = "<iframe ".$attribs." >".PHP_EOL."</iframe>"; $iframe = "<iframe ".$attribs." >".PHP_EOL."</iframe>";
return $view->partial('common/block-layout/vimeo', [ return $view->partial('common/block-layout/vimeo', [
'title' => $block->dataValue('title'), 'title' => $block->dataValue('title'),
'renderSourceLink' => $block->dataValue('renderSourceLink'), 'renderSourceLink' => $block->dataValue('renderSourceLink'),
'item_url' => $attachments[0]->item()->url(), 'item_url' => $attachments[0]->item()->url(),
'ratio' => $ratio,
'vimeo_iframe' => $iframe 'vimeo_iframe' => $iframe
]); ]);
} }

View File

@ -1,9 +1,9 @@
<?php <?php
$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js', $this->headScript()->appendFile($this->assetUrl('js/media_dimensions.js',
'Vimeo')); 'Vimeo'));
?> ?>
<div class="vimeo-embed-wrapper" <div class="embeded-vimeo-wrapper"
style="position:relative;"> style="position:relative;">
<?php if ($renderSourceLink) { ?> <?php if ($renderSourceLink) { ?>
@ -23,17 +23,5 @@ $this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
</div> </div>
<script> <script>
function adjust_height() {
$(".vimeo-embed-wrapper").each(function() {
var iframe = $(this).find('iframe')
var ratio = $(iframe).attr('ratio')
$(iframe).prop("height", get_height(iframe, ratio))
});
}
jQuery(document).ready(function() {
adjust_height();
});
$( window ).resize(function() {
adjust_height();
});
</script> </script>