From dbad2508c7a6dea6537c76b825a396519f17ce45 Mon Sep 17 00:00:00 2001
From: buttle <chris@gatopelao.org>
Date: Sat, 28 Aug 2021 17:31:03 +0200
Subject: [PATCH] sets media dimensions as per defined by user

fixes: #1
---
 Module.php                                |  7 +++++
 asset/js/height_calculator.js             |  4 +++
 config/module.config.php                  |  4 +--
 src/Form/ArchiveOrgBlockForm.php          | 12 +++----
 src/Site/BlockLayout/ArchiveOrg.php       | 10 ++++--
 view/common/block-layout/archiveOrg.phtml | 38 +++++++++++++++++------
 6 files changed, 54 insertions(+), 21 deletions(-)
 create mode 100644 asset/js/height_calculator.js

diff --git a/Module.php b/Module.php
index beec1c4..6aa12ea 100644
--- a/Module.php
+++ b/Module.php
@@ -15,6 +15,13 @@ class Module extends AbstractModule
 		'image' => 'Image',
 	];
 
+	const MODEL_WIDTH = [
+			'25' => '25 %',
+			'50' => '50 %',
+			'75' => '75 %',
+			'100' => '100 %',
+	];
+	
 	const RATIOS = [
 		'1.777' => '16:9',
 		'1.333' => '4:3',
diff --git a/asset/js/height_calculator.js b/asset/js/height_calculator.js
new file mode 100644
index 0000000..1411939
--- /dev/null
+++ b/asset/js/height_calculator.js
@@ -0,0 +1,4 @@
+function get_height(container, ratio) {
+  var height = $(container).width() / ratio
+  return height
+}
diff --git a/config/module.config.php b/config/module.config.php
index bf03b60..e099446 100644
--- a/config/module.config.php
+++ b/config/module.config.php
@@ -32,8 +32,8 @@ return [
             'media_type' => 'video',
             'title' => '',
             'renderSourceLink' => true,
-            'width' => 600,
-            'ratio' => '2',
+            'width' => 100,
+            'ratio' => '1.777',
             'autoLoad' => false,
             'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
         ]
diff --git a/src/Form/ArchiveOrgBlockForm.php b/src/Form/ArchiveOrgBlockForm.php
index 6981c86..371d367 100644
--- a/src/Form/ArchiveOrgBlockForm.php
+++ b/src/Form/ArchiveOrgBlockForm.php
@@ -21,13 +21,11 @@ class ArchiveOrgBlockForm extends Form
 
 		$this->add([
 			'name' => 'o:block[__blockIndex__][o:data][width]',
-			'type' => Element\Number::class,
-      'options' => [
-				'label' => 'Width in pixels',
-			],
-			'attributes' => [
-				'min' => '100',
-			],
+			'type' => Element\Select::class,
+			'options' => [
+          'label' => 'Width',
+					'value_options' => Module::MODEL_WIDTH,
+      ],
 		]);
 
 		$this->add([
diff --git a/src/Site/BlockLayout/ArchiveOrg.php b/src/Site/BlockLayout/ArchiveOrg.php
index c91b691..c794d59 100644
--- a/src/Site/BlockLayout/ArchiveOrg.php
+++ b/src/Site/BlockLayout/ArchiveOrg.php
@@ -76,15 +76,21 @@ class ArchiveOrg extends AbstractBlockLayout
 		static $id = 0;
 
     $media = $attachments[0]->item()->media()[0];
+    $media_type = $block->dataValue('media_type');
     $width = $block->dataValue('width');
-    $height = $width / $block->dataValue('ratio');
+    if ($media_type == "audio") {
+      $height = 32;
+    } else {
+      $height = $width / $block->dataValue('ratio');
+    }
 		return $view->partial('common/block-layout/archiveOrg', [
-			'media_type' => $block->dataValue('media_type'),
+			'media_type' => $media_type,
 			'title' => $block->dataValue('title'),
       'renderSourceLink' => $block->dataValue('renderSourceLink'),
       'item_url' => $attachments[0]->item()->url(),
 			'width' => $width,
 			'height' => $height,
+      'ratio' => $block->dataValue('ratio'),
 			'url' => $media->source(),
       'id' => 'achive_org-' . ++$id,
       'thumbnails' => $thumbnails,
diff --git a/view/common/block-layout/archiveOrg.phtml b/view/common/block-layout/archiveOrg.phtml
index 9cd09d6..7e74f6a 100644
--- a/view/common/block-layout/archiveOrg.phtml
+++ b/view/common/block-layout/archiveOrg.phtml
@@ -1,4 +1,9 @@
-<div class="archive_org-wrap" style="position:relative;">
+<?php
+$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
+																								'ArchiveOrg'));
+?>
+
+<div class="archive_org-wrap">
 
 	<?php if ($renderSourceLink) { ?>
 		<div class="source-link">
@@ -14,21 +19,16 @@
 		}
 	?>
 
-	<?php if ($media_type != "audio") { ?>
-	<style>
-		#<?= $id ?> {
-			height: <?= $height ?>px;
-			width: <?= $width ?>px;
-		}
-	</style>
-	<?php } ?>
-
 	<iframe
 		id="<?= $id ?>"
 		src="<?= $url ?>"
 		frameborder="0"
 		webkitallowfullscreen="true"
 		mozallowfullscreen="true"
+		width="<?= $width ?>%"
+		height="<?= $height ?>"
+		user_defined_ratio="<?= $ratio ?>"
+		media_type="<?= $media_type ?>"
 		allowfullscreen >
 	</iframe>
 
@@ -39,3 +39,21 @@
 	<?php } ?>
 
 </div>
+
+<script>
+function adjust_height() {
+	$(".archive_org-wrap").each(function() {
+		var iframe = $(this).find('iframe')
+		if ($(iframe).attr("media_type") == 'video') {
+			var height = get_height(iframe, $(iframe).attr("user_defined_ratio"))
+			$(iframe).prop("height", height)
+		}
+	});
+}
+jQuery(document).ready(function() {
+  adjust_height();
+});
+$(window).resize(function() {
+  adjust_height();
+});
+</script>