Compare commits

..

2 Commits

Author SHA1 Message Date
buttle b717d24c9e fixes zoomed image width 2021-04-19 16:21:37 +02:00
buttle d86e63b9f5 defines image width with percentages 2021-04-19 14:24:34 +02:00
5 changed files with 60 additions and 47 deletions

View File

@ -9,6 +9,19 @@ class Module extends AbstractModule
{ {
const NAMESPACE = __NAMESPACE__; const NAMESPACE = __NAMESPACE__;
const IMAGE_WIDTH = [
'25' => '25 %',
'50' => '50 %',
'75' => '75 %',
'100' => '100 %',
];
const ZOOM_TYPE = [
'' => '',
'zoom' => 'Touch / grab',
'wheelzoom' => 'Deep zooming',
];
public function getConfig() public function getConfig()
{ {
return include __DIR__ . '/config/module.config.php'; return include __DIR__ . '/config/module.config.php';

View File

@ -21,7 +21,7 @@ return [
'ImageViewerBlockForm' => [ 'ImageViewerBlockForm' => [
'title' => '', 'title' => '',
'width' => 600, 'width' => 600,
'zoom' => false, 'zoom_type' => '',
'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;', 'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;',
] ]
] ]

View File

@ -21,15 +21,23 @@ class ImageViewerBlockForm extends Form
$this->add([ $this->add([
'name' => 'o:block[__blockIndex__][o:data][width]', 'name' => 'o:block[__blockIndex__][o:data][width]',
'type' => Element\Number::class, 'type' => Element\Select::class,
'options' => [ 'options' => [
'label' => 'Width in pixels', 'label' => 'Width',
], 'value_options' => Module::IMAGE_WIDTH,
'attributes' => [
'min' => '100',
], ],
]); ]);
$this->add([
'name' => 'o:block[__blockIndex__][o:data][zoom_type]',
'type' => Element\Select::class,
'options' => [
'label' => 'Zooming',
'value_options' => Module::ZOOM_TYPE,
],
]);
/*
$this->add([ $this->add([
'type' => Element\Checkbox::class, 'type' => Element\Checkbox::class,
'name' => 'o:block[__blockIndex__][o:data][zoom]', 'name' => 'o:block[__blockIndex__][o:data][zoom]',
@ -40,6 +48,6 @@ class ImageViewerBlockForm extends Form
'unchecked_value' => false, 'unchecked_value' => false,
], ],
]); ]);
*/
} }
} }

View File

@ -49,7 +49,8 @@ class ImageViewer extends AbstractBlockLayout
$form->setData([ $form->setData([
'o:block[__blockIndex__][o:data][title]' => $data['title'], 'o:block[__blockIndex__][o:data][title]' => $data['title'],
'o:block[__blockIndex__][o:data][width]' => $data['width'], 'o:block[__blockIndex__][o:data][width]' => $data['width'],
'o:block[__blockIndex__][o:data][zoom]' => $data['zoom'], 'o:block[__blockIndex__][o:data][zoom_type]' => $data['zoom_type'],
//'o:block[__blockIndex__][o:data][zoom]' => $data['zoom'],
]); ]);
$form->prepare(); $form->prepare();
@ -74,11 +75,10 @@ class ImageViewer extends AbstractBlockLayout
static $id = 0; static $id = 0;
$media = $attachments[0]->item()->media()[0]; $media = $attachments[0]->item()->media()[0];
$width = $block->dataValue('width');
return $view->partial('common/block-layout/imageViewer', [ return $view->partial('common/block-layout/imageViewer', [
'zoom' => $block->dataValue('zoom'), 'zoom_type' => $block->dataValue('zoom_type'),
'title' => $block->dataValue('title'), 'title' => $block->dataValue('title'),
'width' => $width, 'width' => $block->dataValue('width'),
'image' => $media->primaryMedia()->thumbnailUrl('large'), 'image' => $media->primaryMedia()->thumbnailUrl('large'),
'id' => 'iv-' . ++$id, 'id' => 'iv-' . ++$id,
]); ]);

View File

@ -1,15 +1,18 @@
<?php if ($zoom == true) { <?php
//$this->headScript()->appendFile($this->assetUrl('vendor/wheelzoom/wheelzoom.js', if ($zoom_type == "wheelzoom") {
// 'ImageViewer')); $this->headScript()->appendFile($this->assetUrl('vendor/wheelzoom/wheelzoom.js',
'ImageViewer'));
}
if ($zoom_type == "zoom") {
$this->headScript()->appendFile($this->assetUrl('vendor/zoom/jquery.zoom.min.js', $this->headScript()->appendFile($this->assetUrl('vendor/zoom/jquery.zoom.min.js',
'ImageViewer')); 'ImageViewer'));
$this->headLink()->appendStylesheet($this->assetUrl('css/zoom.css', $this->headLink()->appendStylesheet($this->assetUrl('css/zoom.css',
'ImageViewer')); 'ImageViewer'));
} ?> }
?>
<div class="wheelzoom-wrap" style="position:relative;">
<?php <?php
if ($title !== false && $title !== "") { if ($title !== false && $title !== "") {
@ -19,45 +22,34 @@
} }
?> ?>
<style>
.archive-img {
width: <?= $width ?>px;
<!-- width: 50%; -->
}
<?php if ($zoom == true) { ?>
#<?= $id ?> {
cursor:crosshair;
}
<?php } ?>
</style>
<div class="archive-img"> <?php if ($zoom_type == "zoom") { ?>
<img id="<?= $id ?>" <div id='<?= $id ?>' class='zoom' style='width:<?= $width ?>%; cursor:grab'>
src="<?= $image ?>" <img src='<?= $image ?>' alt='<?= $title ?>'/>
/>
</div> </div>
<?php if ($zoom == true) { ?>
<script> <script>
$(document).ready(function(){ $(document).ready(function(){
$('#<?= $id ?>') $('#<?= $id ?>').zoom({on:'grab', 'duration': 200});
.wrap('<span class="zoom" style="display:inline-block; cursor:grab"></span>')
.css('display', 'block')
.parent()
.zoom({'duration': 200, 'magnify': 2, on:'grab'});
}); });
</script> </script>
<?php } ?> <?php } ?>
<?php if ($zoom == true) { ?> <?php if ($zoom_type == "wheelzoom") { ?>
<div class='zoom' style='display:block; width:<?= $width ?>%; cursor:crosshair'>
<img id="<?= $id ?>" src="<?= $image ?>" />
</div>
<script> <script>
/*
$(document).ready(function(){ $(document).ready(function(){
wheelzoom(document.querySelector('#<?= $id ?>')); wheelzoom(document.querySelector('#<?= $id ?>'));
}); });
*/
</script> </script>
<?php } ?> <?php } ?>
<?php if ($zoom_type == "") { ?>
<div class="archive-img">
<img id="<?= $id ?>"
style="width: <?= $width ?>%;"
src="<?= $image ?>"
/>
</div> </div>
<?php } ?>