Compare commits
3 Commits
34713d9acb
...
267d382535
Author | SHA1 | Date |
---|---|---|
buttle | 267d382535 | |
buttle | a7ad58b452 | |
buttle | 5ccd8cb174 |
|
@ -1,4 +0,0 @@
|
||||||
function get_height(container, ratio) {
|
|
||||||
var height = $(container).width() / ratio
|
|
||||||
return height
|
|
||||||
}
|
|
|
@ -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();
|
||||||
|
});
|
|
@ -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;',
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
|
|
@ -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([
|
||||||
|
|
|
@ -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
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue