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 IMAGE_WIDTH = [
'25' => '25 %',
'50' => '50 %',
'75' => '75 %',
'100' => '100 %',
];
const ZOOM_TYPE = [
'' => '',
'zoom' => 'Touch / grab',
'wheelzoom' => 'Deep zooming',
];
public function getConfig()
{
return include __DIR__ . '/config/module.config.php';

View File

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

View File

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

View File

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

View File

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