corrects iframe height

This commit is contained in:
buttle 2021-07-30 20:23:03 +02:00
parent 73158ecf59
commit d240f86d70
6 changed files with 33 additions and 23 deletions

View File

@ -9,10 +9,11 @@ class Module extends AbstractModule
{ {
const NAMESPACE = __NAMESPACE__; const NAMESPACE = __NAMESPACE__;
const RATIOS = [ const MODEL_WIDTH = [
'1.777' => '16:9', '25' => '25 %',
'1.333' => '4:3', '50' => '50 %',
'2' => '2:1', '75' => '75 %',
'100' => '100 %',
]; ];
public function getConfig() public function getConfig()

View File

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

View File

@ -31,8 +31,7 @@ return [
'SketchfabBlockForm' => [ 'SketchfabBlockForm' => [
'title' => '', 'title' => '',
'renderSourceLink' => true, 'renderSourceLink' => true,
'width' => 600, '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

@ -12,13 +12,11 @@ class SketchfabBlockForm extends Form
$this->add([ $this->add([
'name' => 'o:block[__blockIndex__][o:data][width]', 'name' => 'o:block[__blockIndex__][o:data][width]',
'type' => Element\Number::class, 'type' => Element\Select::class,
'options' => [ 'options' => [
'label' => 'Width in pixels', 'label' => 'Width',
], 'value_options' => Module::MODEL_WIDTH,
'attributes' => [ ],
'min' => '100',
],
]); ]);
$this->add([ $this->add([

View File

@ -49,7 +49,6 @@ class Sketchfab 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();
@ -75,15 +74,18 @@ class Sketchfab extends AbstractBlockLayout
static $id = 0; static $id = 0;
$media = $attachments[0]->item()->media()[0]; $media = $attachments[0]->item()->media()[0];
$width = 900; $media = $attachments[0]->item()->media()[0];
//$height = $width / $block->dataValue('ratio'); $sketchfab_width = $media->mediaData()['width'];
$height = $width / 1.333; $sketchfab_height = $media->mediaData()['height'];
$ratio = $sketchfab_width / $sketchfab_height;
return $view->partial('common/block-layout/sketchfab', [ return $view->partial('common/block-layout/sketchfab', [
'title' => $block->dataValue('title'), 'title' => $block->dataValue('title'),
'model_id' => $block->dataValue('identifier'),
'renderSourceLink' => $block->dataValue('renderSourceLink'), 'renderSourceLink' => $block->dataValue('renderSourceLink'),
'item_url' => $attachments[0]->item()->url(), 'item_url' => $attachments[0]->item()->url(),
'width' => $width, 'width' => $block->dataValue('width'),
'height' => $height, 'ratio' => $ratio,
'sketchfab_iframe' => $media->mediaData()['html'], 'sketchfab_iframe' => $media->mediaData()['html'],
]); ]);
} }

View File

@ -1,4 +1,9 @@
<div class="sketchfab-wrap" style="position:relative;"> <?php
$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
'Sketchfab'));
?>
<div id="sketchfab_<?= $model_id ?>" class="sketchfab-wrap" style="position:relative;">
<?php if ($renderSourceLink) { ?> <?php if ($renderSourceLink) { ?>
<div class="source-link"> <div class="source-link">
@ -19,8 +24,9 @@
<script> <script>
jQuery(document).ready(function() { jQuery(document).ready(function() {
var sketchfab = $(".sketchfab-wrap").find('iframe'); var sketchfab = $("#sketchfab_<?= $model_id ?>").find('iframe');
$(sketchfab).prop('width', <?= $width ?>); $(sketchfab).prop("width", "<?= $width ?>%")
$(sketchfab).prop('height', <?= $height ?>); var height = get_height(sketchfab, <?= $ratio ?>)
$(sketchfab).prop("height", height)
}); });
</script> </script>