From b5b9b7288efc99dc358477ad1f4ff177c5a38186 Mon Sep 17 00:00:00 2001
From: buttle <chris@gatopelao.org>
Date: Sat, 3 Apr 2021 22:13:41 +0200
Subject: [PATCH] adds block attributes

---
 config/module.config.php                      |  4 ++-
 src/Form/PanoramaViewerBlockForm.php          | 32 ++++++++++++++++---
 src/Site/BlockLayout/PanoramaViewer.php       | 13 +++++---
 .../common/block-layout/panorama-viewer.phtml | 25 +++++++++++----
 4 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/config/module.config.php b/config/module.config.php
index a6ce767..0002504 100644
--- a/config/module.config.php
+++ b/config/module.config.php
@@ -22,7 +22,9 @@ return [
             'panorama_type' => 'equirectangular',
             'pannellum_types' => [],
             'title' => '',
-            'height' => '400px',
+            'width' => 600,
+            'ratio' => '2',
+            'autoLoad' => false,
             'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
             //'imgStyle' => '',
             'ui_background' => 'rgba(0,0,0,0.1)',
diff --git a/src/Form/PanoramaViewerBlockForm.php b/src/Form/PanoramaViewerBlockForm.php
index 1cf074c..71c382b 100644
--- a/src/Form/PanoramaViewerBlockForm.php
+++ b/src/Form/PanoramaViewerBlockForm.php
@@ -29,12 +29,34 @@ class PanoramaViewerBlockForm extends Form
 		]);
 
 		$this->add([
-			'name' => 'o:block[__blockIndex__][o:data][height]',
-			'type' => Element\Text::class,
+			'name' => 'o:block[__blockIndex__][o:data][width]',
+			'type' => Element\Number::class,
       'options' => [
-				'label' => 'Height',
-				'info' => 'Please enter CSS px',
-			]
+				'label' => 'Width in pixels',
+			],
+			'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,
+		    ],
 		]);
 
 	}
diff --git a/src/Site/BlockLayout/PanoramaViewer.php b/src/Site/BlockLayout/PanoramaViewer.php
index 414a39f..4a8c15e 100644
--- a/src/Site/BlockLayout/PanoramaViewer.php
+++ b/src/Site/BlockLayout/PanoramaViewer.php
@@ -34,7 +34,7 @@ class PanoramaViewer extends AbstractBlockLayout
     }
 
 	public function getLabel() {
-		return 'PanoramaViewer';
+		return 'Panorama Viewer';
 	}
 
 	public function form(PhpRenderer $view,
@@ -49,7 +49,9 @@ class PanoramaViewer extends AbstractBlockLayout
 		$form->setData([
 			'o:block[__blockIndex__][o:data][panorama_type]' => $data['panorama_type'],
 			'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();
 
@@ -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', [
 			'panorama_type' => $block->dataValue('panorama_type'),
 			'title' => $block->dataValue('title'),
-			'height' => $block->dataValue('height'),
+			'width' => $width,
+			'height' => $height,
+      'autoLoad' => $block->dataValue('autoLoad'),
 			'urls' => $urls,
       'id' => 'pv-' . ++$id,
 		]);
diff --git a/view/common/block-layout/panorama-viewer.phtml b/view/common/block-layout/panorama-viewer.phtml
index 144fddc..53f881b 100644
--- a/view/common/block-layout/panorama-viewer.phtml
+++ b/view/common/block-layout/panorama-viewer.phtml
@@ -12,8 +12,10 @@
 	?>
 
 	<style>
-		.panorama-viewer { height: <?= $height ?>; }
-		.pannellum-img { width: 100%; }
+		#<?= $id ?> {
+			height: <?= $height ?>px;
+			width: <?= $width ?>px;
+		}
 	</style>
 
 	<div class="pannellum">
@@ -22,11 +24,20 @@
 
 	<script>
 
-		pannellum.viewer("<?= $id ?>", {
-					type: "<?= $panorama_type ?>",
-					autoLoad: true,
-					panorama: "<?= $urls[0]; ?>",
-		});
+	<?php if ($panorama_type == "equirectangular") { ?>
+			pannellum.viewer("<?= $id ?>", {
+						type: "equirectangular",
+						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): ?>
 		$('#pannellum-ui').append('<?= $title ?>');