diff --git a/asset/js/height_calculator.js b/asset/js/height_calculator.js new file mode 100644 index 0000000..fb97057 --- /dev/null +++ b/asset/js/height_calculator.js @@ -0,0 +1,6 @@ +function get_height(container, ratio) { + //console.log($(container).width(), ratio) + var height = $(container).width() / ratio + //console.log(height) + return height +} diff --git a/src/Form/PanoramaViewerBlockForm.php b/src/Form/PanoramaViewerBlockForm.php index aa2eaf6..3d3e4d3 100644 --- a/src/Form/PanoramaViewerBlockForm.php +++ b/src/Form/PanoramaViewerBlockForm.php @@ -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, diff --git a/src/Site/BlockLayout/PanoramaViewer.php b/src/Site/BlockLayout/PanoramaViewer.php index efd0138..97b000a 100644 --- a/src/Site/BlockLayout/PanoramaViewer.php +++ b/src/Site/BlockLayout/PanoramaViewer.php @@ -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, diff --git a/view/common/block-layout/panorama-viewer.phtml b/view/common/block-layout/panorama-viewer.phtml index a4f80b5..6e64817 100644 --- a/view/common/block-layout/panorama-viewer.phtml +++ b/view/common/block-layout/panorama-viewer.phtml @@ -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 @@ ?> @@ -95,4 +96,6 @@ } }); + var height = get_height('#', ) + $('#').css('height', height)