adds block attributes

This commit is contained in:
buttle 2021-04-03 22:13:41 +02:00
parent 414217e069
commit b5b9b7288e
4 changed files with 57 additions and 17 deletions

View File

@ -22,7 +22,9 @@ return [
'panorama_type' => 'equirectangular', 'panorama_type' => 'equirectangular',
'pannellum_types' => [], 'pannellum_types' => [],
'title' => '', 'title' => '',
'height' => '400px', 'width' => 600,
'ratio' => '2',
'autoLoad' => false,
'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;', 'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
//'imgStyle' => '', //'imgStyle' => '',
'ui_background' => 'rgba(0,0,0,0.1)', 'ui_background' => 'rgba(0,0,0,0.1)',

View File

@ -29,12 +29,34 @@ class PanoramaViewerBlockForm extends Form
]); ]);
$this->add([ $this->add([
'name' => 'o:block[__blockIndex__][o:data][height]', 'name' => 'o:block[__blockIndex__][o:data][width]',
'type' => Element\Text::class, 'type' => Element\Number::class,
'options' => [ 'options' => [
'label' => 'Height', 'label' => 'Width in pixels',
'info' => 'Please enter CSS px', ],
] 'attributes' => [
'min' => '100',
],
]);
$this->add([
'name' => 'o:block[__blockIndex__][o:data][ratio]',
'type' => Element\Select::class,
'options' => [
'label' => 'Ratio',
'value_options' => ['2' => '2:1', '1.333' => '4:3', '1.777' => '16:9'],
],
]);
$this->add([
'type' => Element\Checkbox::class,
'name' => 'o:block[__blockIndex__][o:data][autoLoad]',
'options' => [
'label' => 'Auto load the panorama',
//'use_hidden_element' => true,
'checked_value' => true,
'unchecked_value' => false,
],
]); ]);
} }

View File

@ -34,7 +34,7 @@ class PanoramaViewer extends AbstractBlockLayout
} }
public function getLabel() { public function getLabel() {
return 'PanoramaViewer'; return 'Panorama Viewer';
} }
public function form(PhpRenderer $view, public function form(PhpRenderer $view,
@ -49,7 +49,9 @@ class PanoramaViewer extends AbstractBlockLayout
$form->setData([ $form->setData([
'o:block[__blockIndex__][o:data][panorama_type]' => $data['panorama_type'], 'o:block[__blockIndex__][o:data][panorama_type]' => $data['panorama_type'],
'o:block[__blockIndex__][o:data][title]' => $data['title'], 'o:block[__blockIndex__][o:data][title]' => $data['title'],
'o:block[__blockIndex__][o:data][height]' => $data['height'], 'o:block[__blockIndex__][o:data][width]' => $data['width'],
'o:block[__blockIndex__][o:data][ratio]' => $data['ratio'],
'o:block[__blockIndex__][o:data][autoLoad]' => $data['autoLoad'],
]); ]);
$form->prepare(); $form->prepare();
@ -83,11 +85,14 @@ class PanoramaViewer extends AbstractBlockLayout
} }
} }
} }
$width = $block->dataValue('width');
$height = $width / $block->dataValue('ratio');
return $view->partial('common/block-layout/panorama-viewer', [ return $view->partial('common/block-layout/panorama-viewer', [
'panorama_type' => $block->dataValue('panorama_type'), 'panorama_type' => $block->dataValue('panorama_type'),
'title' => $block->dataValue('title'), 'title' => $block->dataValue('title'),
'height' => $block->dataValue('height'), 'width' => $width,
'height' => $height,
'autoLoad' => $block->dataValue('autoLoad'),
'urls' => $urls, 'urls' => $urls,
'id' => 'pv-' . ++$id, 'id' => 'pv-' . ++$id,
]); ]);

View File

@ -12,8 +12,10 @@
?> ?>
<style> <style>
.panorama-viewer { height: <?= $height ?>; } #<?= $id ?> {
.pannellum-img { width: 100%; } height: <?= $height ?>px;
width: <?= $width ?>px;
}
</style> </style>
<div class="pannellum"> <div class="pannellum">
@ -22,11 +24,20 @@
<script> <script>
pannellum.viewer("<?= $id ?>", { <?php if ($panorama_type == "equirectangular") { ?>
type: "<?= $panorama_type ?>", pannellum.viewer("<?= $id ?>", {
autoLoad: true, type: "equirectangular",
panorama: "<?= $urls[0]; ?>", autoLoad: <?= json_encode($autoLoad == false ? false : true) ?>,
}); panorama: "<?= $urls[0]; ?>",
});
<?php } ?>
<?php if ($panorama_type == "cubemap") { ?>
pannellum.viewer("<?= $id ?>", {
type: "cubemap",
autoLoad: <?= json_encode($autoLoad == false ? false : true) ?>,
cubeMap: <?= json_encode($urls, JSON_UNESCAPED_SLASHES) ?>,
});
<?php } ?>
<?php if ($title !== false): ?> <?php if ($title !== false): ?>
$('#pannellum-ui').append('<?= $title ?>'); $('#pannellum-ui').append('<?= $title ?>');