Compare commits

..

No commits in common. "b717d24c9ef4b619b8827d68237ecae41dc85a31" and "7c1ee9d4d76f881d983a022881689e34dcf7a642" have entirely different histories.

5 changed files with 53 additions and 66 deletions

View File

@ -9,19 +9,6 @@ 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_type' => '', 'zoom' => false,
'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,23 +21,15 @@ class ImageViewerBlockForm extends Form
$this->add([ $this->add([
'name' => 'o:block[__blockIndex__][o:data][width]', 'name' => 'o:block[__blockIndex__][o:data][width]',
'type' => Element\Select::class, 'type' => Element\Number::class,
'options' => [ 'options' => [
'label' => 'Width', 'label' => 'Width in pixels',
'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]',
@ -48,6 +40,6 @@ class ImageViewerBlockForm extends Form
'unchecked_value' => false, 'unchecked_value' => false,
], ],
]); ]);
*/
} }
} }

View File

@ -49,8 +49,7 @@ 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_type]' => $data['zoom_type'], 'o:block[__blockIndex__][o:data][zoom]' => $data['zoom'],
//'o:block[__blockIndex__][o:data][zoom]' => $data['zoom'],
]); ]);
$form->prepare(); $form->prepare();
@ -75,10 +74,11 @@ 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_type' => $block->dataValue('zoom_type'), 'zoom' => $block->dataValue('zoom'),
'title' => $block->dataValue('title'), 'title' => $block->dataValue('title'),
'width' => $block->dataValue('width'), 'width' => $width,
'image' => $media->primaryMedia()->thumbnailUrl('large'), 'image' => $media->primaryMedia()->thumbnailUrl('large'),
'id' => 'iv-' . ++$id, 'id' => 'iv-' . ++$id,
]); ]);

View File

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