diff --git a/asset/js/height_calculator.js b/asset/js/height_calculator.js deleted file mode 100644 index 1411939..0000000 --- a/asset/js/height_calculator.js +++ /dev/null @@ -1,4 +0,0 @@ -function get_height(container, ratio) { - var height = $(container).width() / ratio - return height -} diff --git a/asset/js/media_dimensions.js b/asset/js/media_dimensions.js new file mode 100644 index 0000000..f0fc32f --- /dev/null +++ b/asset/js/media_dimensions.js @@ -0,0 +1,16 @@ + +function adjust_sketchfab_height() { + $(".embeded-sketchfab-wrapper").each(function() { + var iframe = $(this).find('iframe') + var height = $(iframe).width() / $(iframe).attr('ratio') + $(iframe).prop("height", height) + }); +} + +jQuery(document).ready(function() { + adjust_sketchfab_height(); +}); + +$(window).resize(function() { + adjust_sketchfab_height(); +}); diff --git a/src/Site/BlockLayout/Sketchfab.php b/src/Site/BlockLayout/Sketchfab.php index 5b5f853..c7d90b1 100644 --- a/src/Site/BlockLayout/Sketchfab.php +++ b/src/Site/BlockLayout/Sketchfab.php @@ -8,8 +8,8 @@ use Omeka\Site\BlockLayout\AbstractBlockLayout; use Laminas\View\Renderer\PhpRenderer; use Laminas\Form\FormElementManager; - use Sketchfab\Form\SketchfabBlockForm; +use DOMDocument; class Sketchfab extends AbstractBlockLayout { @@ -65,30 +65,42 @@ class Sketchfab extends AbstractBlockLayout public function render(PhpRenderer $view, SitePageBlockRepresentation $block) { - $attachments = $block->attachments(); - if (!$attachments) { - return ''; - } + $attachments = $block->attachments(); + if (!$attachments) { + return ''; + } + $media = $attachments[0]->item()->media()[0]; + $ratio = $media->mediaData()['width'] / $media->mediaData()['height']; - $thumbnails = []; - static $id = 0; - $id = $id +1; + // creates an iframe injecting our width and calculated ratio + $attribs= 'ratio="'.$ratio.'"'.PHP_EOL; + $doc = new DOMDocument(); + $doc->loadHTML($media->mediaData()['html']); + $html_element= $doc->getElementsByTagName('iframe')->item(0); + if ($html_element->hasAttributes()) { + foreach ($html_element->attributes as $attr) { + $name = $attr->nodeName; + $value = $attr->nodeValue; + if ($name == 'height') { + // we will calculate height with jQuery + continue; + } + if ($name == 'width') { + $attrib = 'width="'.$block->dataValue('width').'%"'; + $attribs .= $attrib.PHP_EOL; + continue; + } + $attrib = $name.'="'.$value.'"'; + $attribs .= $attrib.PHP_EOL; + } + } + $iframe = ""; - $media = $attachments[0]->item()->media()[0]; - $media = $attachments[0]->item()->media()[0]; - $sketchfab_width = $media->mediaData()['width']; - $sketchfab_height = $media->mediaData()['height']; - $ratio = $sketchfab_width / $sketchfab_height; - - return $view->partial('common/block-layout/sketchfab', [ - 'title' => $block->dataValue('title'), - //'model_id' => $block->dataValue('identifier'), - 'model_id' => $id, - 'renderSourceLink' => $block->dataValue('renderSourceLink'), - 'item_url' => $attachments[0]->item()->url(), - 'width' => $block->dataValue('width'), - 'ratio' => $ratio, - 'sketchfab_iframe' => $media->mediaData()['html'], - ]); + return $view->partial('common/block-layout/sketchfab', [ + 'title' => $block->dataValue('title'), + 'renderSourceLink' => $block->dataValue('renderSourceLink'), + 'item_url' => $attachments[0]->item()->url(), + 'sketchfab_iframe' => $iframe + ]); } } diff --git a/view/common/block-layout/sketchfab.phtml b/view/common/block-layout/sketchfab.phtml index 36f0f3d..54b681e 100644 --- a/view/common/block-layout/sketchfab.phtml +++ b/view/common/block-layout/sketchfab.phtml @@ -1,9 +1,11 @@ headScript()->appendFile($this->assetUrl('js/height_calculator.js', +$this->headScript()->appendFile($this->assetUrl('js/media_dimensions.js', 'Sketchfab')); ?> -
+
- -