sets width at 100%. calculates height according to ratio

This commit is contained in:
buttle 2021-07-30 12:28:56 +02:00
parent 569b21ad1d
commit 355111e9d7
4 changed files with 20 additions and 12 deletions

View File

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

View File

@ -20,17 +20,20 @@ class PanoramaViewerBlockForm extends Form
],
]);
/*
$this->add([
'name' => 'o:block[__blockIndex__][o:data][width]',
'type' => Element\Number::class,
'options' => [
'label' => 'Width in pixels',
'label' => 'Width in percentage',
],
'attributes' => [
'min' => '100',
'min' => '50',
'max' => '100',
],
]);
*/
$this->add([
'name' => 'o:block[__blockIndex__][o:data][ratio]',
'type' => Element\Select::class,

View File

@ -95,14 +95,10 @@ class PanoramaViewer extends AbstractBlockLayout
}
$item_id = $attachments[0]->item()->url();
//$title = $attachments[0]->item()->title();
$title = $block->dataValue('title');
$width = $block->dataValue('width');
$height = $width / $block->dataValue('ratio');
return $view->partial('common/block-layout/panorama-viewer', [
'panorama_type' => $panorama_type,
'title' => $title,
'width' => $width,
'height' => $height,
'title' => $block->dataValue('title'),
'ratio' => $block->dataValue('ratio'),
'autoLoad' => $block->dataValue('autoLoad'),
'renderSourceLink' => $block->dataValue('renderSourceLink'),
'urls' => $urls,

View File

@ -3,6 +3,8 @@
'PanoramaViewer'));
$this->headScript()->appendFile($this->assetUrl('vendor/pannellum/pannellum.js',
'PanoramaViewer'));
$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
'PanoramaViewer'));
if ($panorama_type == "video") {
$this->headLink()->appendStylesheet($this->assetUrl('vendor/video.js/video-js.css',
@ -20,9 +22,8 @@
?>
<style>
#<?= $id ?> {
height: <?= $height ?>px;
width: <?= $width ?>px;
.pannemmul-wrap {
width: 100%;
}
</style>
@ -95,4 +96,6 @@
}
});
<?php } ?>
var height = get_height('#<?= $id ?>', <?= $ratio ?>)
$('#<?= $id ?>').css('height', height)
</script>