Alexey Boroda / kristal-estet

Commit 90c36c563658403de85ee0bbdc0043bb994f2c8e

Authored by Alexey Boroda
1 parent a8e21a4c

-Gallery ready

Showing 4 changed files with 317 additions and 1 deletions   Show diff stats
Inline Side-by-side
composer.json
  Show/Hide comments   View file @90c36c5
... ... @@ -33,7 +33,8 @@
33 33 "kartik-v/yii2-widget-select2": "@dev",
34 34 "artweb/artbox-core": "@dev",
35 35 "artweb/artbox-weblog": "@dev",
36   - "artweb/artbox-webcomment": "@dev"
  36 + "artweb/artbox-webcomment": "@dev",
  37 + "modernkernel/yii2-photoswipe": "*"
37 38 },
38 39 "require-dev": {
39 40 "yiisoft/yii2-debug": "~2.0.0",
... ...
frontend/controllers/SiteController.php
  Show/Hide comments   View file @90c36c5
... ... @@ -3,6 +3,7 @@
3 3  
4 4 use artbox\core\models\Feedback;
5 5 use artbox\core\models\Page;
  6 + use common\models\Gallery;
6 7 use common\models\Settings;
7 8 use frontend\models\CommentPage;
8 9 use Yii;
... ... @@ -189,4 +190,16 @@
189 190 ]
190 191 );
191 192 }
  193 +
  194 + public function actionGallery()
  195 + {
  196 + $images = ( new Gallery() )->getImages();
  197 +
  198 + return $this->render(
  199 + 'gallery',
  200 + [
  201 + 'images' => $images,
  202 + ]
  203 + );
  204 + }
192 205 }
... ...
frontend/views/layouts/main.php
  Show/Hide comments   View file @90c36c5
... ... @@ -319,6 +319,10 @@ _________________________________________________________ -->
319 319 'label' => \Yii::t('app', 'Отзывы'),
320 320 'url' => [ 'site/comments' ],
321 321 ];
  322 + $items[] = [
  323 + 'label' => \Yii::t('app', 'Галерея'),
  324 + 'url' => [ 'site/gallery' ],
  325 + ];
322 326 echo Nav::widget(
323 327 [
324 328 'items' => $items,
... ...
frontend/views/site/gallery.php 0 → 100644
  Show/Hide comments   View file @90c36c5
  1 +<?php
  2 + /**
  3 + * @var View $this
  4 + * @var Image[] $images
  5 + */
  6 +
  7 + use artbox\core\helpers\ImageHelper;
  8 + use artbox\core\models\Image;
  9 + use modernkernel\photoswipe\PhotoswipeAsset;
  10 + use yii\web\View;
  11 +
  12 + PhotoswipeAsset::register($this);
  13 +
  14 +?>
  15 +
  16 +
  17 +<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
  18 + <?php foreach ($images as $image) {
  19 + if (file_exists(\Yii::getAlias('@storage/' . $image->id . '_' . $image->fileHash . '.' . $image->extension))) {
  20 + ?>
  21 + <figure class="reviews_gallery">
  22 + <a href="<?= $image->getUrl() ?>" itemprop="contentUrl" data-size="<?= getimagesize(
  23 + $image->getPath()
  24 + )[ 0 ] . 'x' . getimagesize(
  25 + $image->getPath()
  26 + )[ 1 ] ?>">
  27 + <img src="<?= ImageHelper::set($image->getPath())
  28 + ->cropResize(500, 325)
  29 + ->render() ?>" itemprop="thumbnail" alt=""/>
  30 + </a>
  31 + </figure>
  32 + <?php
  33 + }
  34 + }
  35 + ?>
  36 +</div>
  37 +
  38 +<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  39 +
  40 + <!-- Background of PhotoSwipe.
  41 + It's a separate element as animating opacity is faster than rgba(). -->
  42 + <div class="pswp__bg"></div>
  43 +
  44 + <!-- Slides wrapper with overflow:hidden. -->
  45 + <div class="pswp__scroll-wrap">
  46 +
  47 + <!-- Container that holds slides.
  48 + PhotoSwipe keeps only 3 of them in the DOM to save memory.
  49 + Don't modify these 3 pswp__item elements, data is added later on. -->
  50 + <div class="pswp__container">
  51 + <div class="pswp__item"></div>
  52 + <div class="pswp__item"></div>
  53 + <div class="pswp__item"></div>
  54 + </div>
  55 +
  56 + <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
  57 + <div class="pswp__ui pswp__ui--hidden">
  58 +
  59 + <div class="pswp__top-bar">
  60 +
  61 + <!-- Controls are self-explanatory. Order can be changed. -->
  62 +
  63 + <div class="pswp__counter"></div>
  64 +
  65 + <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
  66 +
  67 + <button class="pswp__button pswp__button--share" title="Share"></button>
  68 +
  69 + <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  70 +
  71 + <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  72 +
  73 + <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
  74 + <!-- element will get class pswp__preloader--active when preloader is running -->
  75 + <div class="pswp__preloader">
  76 + <div class="pswp__preloader__icn">
  77 + <div class="pswp__preloader__cut">
  78 + <div class="pswp__preloader__donut"></div>
  79 + </div>
  80 + </div>
  81 + </div>
  82 + </div>
  83 +
  84 + <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  85 + <div class="pswp__share-tooltip"></div>
  86 + </div>
  87 +
  88 + <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
  89 + </button>
  90 +
  91 + <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
  92 + </button>
  93 +
  94 + <div class="pswp__caption">
  95 + <div class="pswp__caption__center"></div>
  96 + </div>
  97 +
  98 + </div>
  99 +
  100 + </div>
  101 +
  102 +</div>
  103 +
  104 +<script>
  105 + var initPhotoSwipeFromDOM = function(gallerySelector) {
  106 +
  107 + // parse slide data (url, title, size ...) from DOM elements
  108 + // (children of gallerySelector)
  109 + var parseThumbnailElements = function(el) {
  110 + var thumbElements = el.childNodes, numNodes = thumbElements.length, items = [], figureEl, linkEl, size, item;
  111 +
  112 + for (var i = 0; i < numNodes; i++) {
  113 +
  114 + figureEl = thumbElements[ i ]; // <figure> element
  115 +
  116 + // include only element nodes
  117 + if (figureEl.nodeType !== 1) {
  118 + continue;
  119 + }
  120 +
  121 + linkEl = figureEl.children[ 0 ]; // <a> element
  122 +
  123 + size = linkEl.getAttribute('data-size')
  124 + .split('x');
  125 +
  126 + // create slide object
  127 + item = {
  128 + src: linkEl.getAttribute('href'),
  129 + w: parseInt(size[ 0 ], 10),
  130 + h: parseInt(size[ 1 ], 10)
  131 + };
  132 +
  133 + if (figureEl.children.length > 1) {
  134 + // <figcaption> content
  135 + item.title = figureEl.children[ 1 ].innerHTML;
  136 + }
  137 +
  138 + if (linkEl.children.length > 0) {
  139 + // <img> thumbnail element, retrieving thumbnail url
  140 + item.msrc = linkEl.children[ 0 ].getAttribute('src');
  141 + }
  142 +
  143 + item.el = figureEl; // save link to element for getThumbBoundsFn
  144 + items.push(item);
  145 + }
  146 +
  147 + return items;
  148 + };
  149 +
  150 + // find nearest parent element
  151 + var closest = function closest(el, fn) {
  152 + return el && ( fn(el) ? el : closest(el.parentNode, fn) );
  153 + };
  154 +
  155 + // triggers when user clicks on thumbnail
  156 + var onThumbnailsClick = function(e) {
  157 + e = e || window.event;
  158 + e.preventDefault ? e.preventDefault() : e.returnValue = false;
  159 +
  160 + var eTarget = e.target || e.srcElement;
  161 +
  162 + // find root element of slide
  163 + var clickedListItem = closest(
  164 + eTarget, function(el) {
  165 + return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
  166 + }
  167 + );
  168 +
  169 + if (!clickedListItem) {
  170 + return;
  171 + }
  172 +
  173 + // find index of clicked item by looping through all child nodes
  174 + // alternatively, you may define index via data- attribute
  175 + var clickedGallery = clickedListItem.parentNode, childNodes = clickedListItem.parentNode.childNodes, numChildNodes = childNodes.length, nodeIndex = 0, index;
  176 +
  177 + for (var i = 0; i < numChildNodes; i++) {
  178 + if (childNodes[ i ].nodeType !== 1) {
  179 + continue;
  180 + }
  181 +
  182 + if (childNodes[ i ] === clickedListItem) {
  183 + index = nodeIndex;
  184 + break;
  185 + }
  186 + nodeIndex++;
  187 + }
  188 +
  189 + if (index >= 0) {
  190 + // open PhotoSwipe if valid index found
  191 + openPhotoSwipe(index, clickedGallery);
  192 + }
  193 + return false;
  194 + };
  195 +
  196 + // parse picture index and gallery index from URL (#&pid=1&gid=2)
  197 + var photoswipeParseHash = function() {
  198 + var hash = window.location.hash.substring(1), params = {};
  199 +
  200 + if (hash.length < 5) {
  201 + return params;
  202 + }
  203 +
  204 + var vars = hash.split('&');
  205 + for (var i = 0; i < vars.length; i++) {
  206 + if (!vars[ i ]) {
  207 + continue;
  208 + }
  209 + var pair = vars[ i ].split('=');
  210 + if (pair.length < 2) {
  211 + continue;
  212 + }
  213 + params[ pair[ 0 ] ] = pair[ 1 ];
  214 + }
  215 +
  216 + if (params.gid) {
  217 + params.gid = parseInt(params.gid, 10);
  218 + }
  219 +
  220 + return params;
  221 + };
  222 +
  223 + var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
  224 + var pswpElement = document.querySelectorAll('.pswp')[ 0 ], gallery, options, items;
  225 +
  226 + items = parseThumbnailElements(galleryElement);
  227 +
  228 + // define options (if needed)
  229 + options = {
  230 +
  231 + // define gallery index (for URL)
  232 + galleryUID: galleryElement.getAttribute('data-pswp-uid'),
  233 +
  234 + getThumbBoundsFn: function(index) {
  235 + // See Options -> getThumbBoundsFn section of documentation for more info
  236 + var thumbnail = items[ index ].el.getElementsByTagName('img')[ 0 ], // find thumbnail
  237 + pageYScroll = window.pageYOffset || document.documentElement.scrollTop, rect = thumbnail.getBoundingClientRect();
  238 +
  239 + return {
  240 + x: rect.left,
  241 + y: rect.top + pageYScroll,
  242 + w: rect.width
  243 + };
  244 + }
  245 +
  246 + };
  247 +
  248 + // PhotoSwipe opened from URL
  249 + if (fromURL) {
  250 + if (options.galleryPIDs) {
  251 + // parse real index when custom PIDs are used
  252 + // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
  253 + for (var j = 0; j < items.length; j++) {
  254 + if (items[ j ].pid == index) {
  255 + options.index = j;
  256 + break;
  257 + }
  258 + }
  259 + } else {
  260 + // in URL indexes start from 1
  261 + options.index = parseInt(index, 10) - 1;
  262 + }
  263 + } else {
  264 + options.index = parseInt(index, 10);
  265 + }
  266 +
  267 + // exit if index not found
  268 + if (isNaN(options.index)) {
  269 + return;
  270 + }
  271 +
  272 + if (disableAnimation) {
  273 + options.showAnimationDuration = 0;
  274 + }
  275 +
  276 + // Pass data to PhotoSwipe and initialize it
  277 + gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
  278 + gallery.init();
  279 + };
  280 +
  281 + // loop through all gallery elements and bind events
  282 + var galleryElements = document.querySelectorAll(gallerySelector);
  283 +
  284 + for (var i = 0, l = galleryElements.length; i < l; i++) {
  285 + galleryElements[ i ].setAttribute('data-pswp-uid', i + 1);
  286 + galleryElements[ i ].onclick = onThumbnailsClick;
  287 + }
  288 +
  289 + // Parse URL and open gallery if it contains #&pid=3&gid=1
  290 + var hashData = photoswipeParseHash();
  291 + if (hashData.pid && hashData.gid) {
  292 + openPhotoSwipe(hashData.pid, galleryElements[ hashData.gid - 1 ], true, true);
  293 + }
  294 + };
  295 +
  296 + // execute above function
  297 + initPhotoSwipeFromDOM('.my-gallery');
  298 +</script>
0 299 \ No newline at end of file
... ...