adds common oembed dimension solution

This commit is contained in:
buttle 2021-08-31 15:00:51 +02:00
parent ce9dbd0bb3
commit 481e6137b1
4 changed files with 56 additions and 47 deletions

View File

@ -1,4 +0,0 @@
function get_height(container, ratio) {
var height = $(container).width() / ratio
return height
}

View File

@ -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();
});

View File

@ -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 = "<iframe ".$attribs." >".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
]);
}
}

View File

@ -1,9 +1,11 @@
<?php
$this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
$this->headScript()->appendFile($this->assetUrl('js/media_dimensions.js',
'Sketchfab'));
?>
<div id="sketchfab_<?= $model_id ?>" class="sketchfab-wrap" style="position:relative;">
<div
class="embeded-sketchfab-wrapper"
style="position:relative;">
<?php if ($renderSourceLink) { ?>
<div class="source-link">
@ -20,20 +22,3 @@ $this->headScript()->appendFile($this->assetUrl('js/height_calculator.js',
<?php } ?>
</div>
<script>
function adjust_height() {
$(".sketchfab-embed-wrapper").each(function() {
var sketchfab = $(this).find('iframe')
$(sketchfab).prop("width", "<?= $width ?>%")
var height = get_height(sketchfab, <?= $ratio ?>)
$(sketchfab).prop("height", height)
});
}
jQuery(document).ready(function() {
adjust_height();
});
$( window ).resize(function() {
adjust_height();
});
</script>