...
 
Commits (2)
......@@ -85,7 +85,7 @@
"source": {
"type": "git",
"url": "https://gitlab.com/chesio/lazy-daisy",
"reference": "9d08ada73d1fe83846406acb6762a336f48cff9b"
"reference": "9875579ea64dbbafae6c3681fac39d7df77f9fc5"
},
"require": {
"composer/installers": "~1.0",
......@@ -126,7 +126,7 @@
"support": {
"issues": "https://gitlab.com/chesio/lazy-daisy/issues"
},
"time": "2019-10-01T18:37:28+00:00"
"time": "2020-01-17T19:41:28+00:00"
},
{
"name": "composer/installers",
......
......@@ -51,7 +51,10 @@ gulp.task('fonts', function () {
*/
gulp.task('vendor', function () {
return gulp
.src(['node_modules/+(masonry-layout|object-fit-images|photoswipe)/dist/**/*.*'])
.src([
'node_modules/+(object-fit-images|photoswipe)/dist/**/*.*',
'node_modules/+(colcade)/*.js'
])
.pipe(rename(function (path) {
path.dirname = path.dirname.replace('/dist', '');
}))
......@@ -204,7 +207,7 @@ gulp.task('images', function () {
* Watch for changes.
*/
gulp.task('watch', function () {
gulp.watch('node_modules/(masonry-layout|object-fit-images|photoswipe)/**', gulp.parallel('vendor'));
gulp.watch('node_modules/(colcade|object-fit-images|photoswipe)/**', gulp.parallel('vendor'));
gulp.watch('src/fonts/**', gulp.parallel('fonts'));
gulp.watch('src/icons/**', gulp.parallel('icons'));
gulp.watch('src/images/**', gulp.parallel('images'));
......
......@@ -1526,6 +1526,11 @@
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true
},
"colcade": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/colcade/-/colcade-0.2.0.tgz",
"integrity": "sha1-HUyUnWd2VYZQiboLeHaWk77KCzI="
},
"collection-map": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/collection-map/-/collection-map-1.0.0.tgz",
......@@ -2170,11 +2175,6 @@
"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
"dev": true
},
"desandro-matches-selector": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz",
"integrity": "sha1-cXvu1NwT59jzdi9wem1YpndCGOE="
},
"detect-file": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
......@@ -2686,11 +2686,6 @@
"integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
"dev": true
},
"ev-emitter": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
"integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
},
"event-emitter": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/event-emitter/-/event-emitter-0.3.5.tgz",
......@@ -3184,14 +3179,6 @@
"parse-filepath": "^1.0.1"
}
},
"fizzy-ui-utils": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz",
"integrity": "sha512-CZXDVXQ1If3/r8s0T+v+qVeMshhfcuq0rqIFgJnrtd+Bu8GmDmqMjntjUePypVtjHXKJ6V4sw9zeyox34n9aCg==",
"requires": {
"desandro-matches-selector": "^2.0.0"
}
},
"flagged-respawn": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
......@@ -4023,11 +4010,6 @@
"npm-conf": "^1.1.0"
}
},
"get-size": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/get-size/-/get-size-2.0.3.tgz",
"integrity": "sha512-lXNzT/h/dTjTxRbm9BXb+SGxxzkm97h/PCIKtlN/CBCxxmkkIVV21udumMS93MuVTDX583gqc94v3RjuHmI+2Q=="
},
"get-stdin": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
......@@ -6116,15 +6098,6 @@
"object-visit": "^1.0.0"
}
},
"masonry-layout": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/masonry-layout/-/masonry-layout-4.2.2.tgz",
"integrity": "sha512-iGtAlrpHNyxaR19CvKC3npnEcAwszXoyJiI8ARV2ePi7fmYhIud25MHK8Zx4P0LCC4d3TNO9+rFa1KoK1OEOaA==",
"requires": {
"get-size": "^2.0.2",
"outlayer": "^2.1.0"
}
},
"matchdep": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
......@@ -6914,16 +6887,6 @@
"os-tmpdir": "^1.0.0"
}
},
"outlayer": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/outlayer/-/outlayer-2.1.1.tgz",
"integrity": "sha1-KYY7beEOpdrf/8rfoNcokHOH6aI=",
"requires": {
"ev-emitter": "^1.0.0",
"fizzy-ui-utils": "^2.0.0",
"get-size": "^2.0.2"
}
},
"p-cancelable": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.3.0.tgz",
......
......@@ -24,8 +24,8 @@
"IE 11"
],
"dependencies": {
"colcade": "^0.2.0",
"foundation-sites": "6.5.3",
"masonry-layout": "^4.2.2",
"object-fit-images": "~3.2.3",
"photoswipe": "^4.1.3"
}
......
/* global Masonry */
/* global Colcade */
/**
* Enhance media grid with Masonry
* Enhance media grid with Colcade
*/
(function(document, Masonry) {
(function(document, Colcade) {
function initMediaGrid() {
// Note: this selects only the first media grid on a page
var grid = document.querySelector('.media-grid');
if (grid) {
var masonry = new Masonry(grid, {
itemSelector: '.grid-item'
new Colcade(grid, {
columns: '.grid-column',
items: '.grid-item'
});
// Redo masonry layout every time an image is lazy-loaded.
var imgs = document.querySelectorAll('img[data-src]');
for (var i = 0; i < imgs.length; ++i ) {
imgs[i].addEventListener('load', masonry.layout.bind(masonry));
}
}
}
......@@ -36,4 +31,4 @@
// Load Events
domReady(initMediaGrid);
})(document, Masonry);
})(document, Colcade);
......@@ -6,8 +6,7 @@
* Expected gallery markup:
* <div data-gallery="chesio-on-the-beach">
*
* <-- within photo grid -->
* <div class="pswp-item">
* <div class="pswp-item" data-item-index="0">
* <figure>
* <a href="big-and-naked.jpg" class="pswp-link" title="Naked Chesio" data-pid="big-and-naked" data-width="3648" data-height="2736" data-title="" data-caption="" data-large-url="big-and-naked-2048x1536.jpg" data-large-width="2048" data-large-height="1536" data-medium-url="big-and-naked-1024x768.jpg" data-medium-width="1024" data-medium-height="768">
* <img src="small-and-naked.jpg" />
......@@ -15,12 +14,7 @@
* </figure>
* </div>
*
* <-- outside photo grid -->
* <figure class="pswp-item">
* <a href="big-and-naked-2.jpg" class="pswp-link" title="Also naked Chesio" data-pid="big-and-naked-2" data-width="3648" data-height="2736" data-title="" data-caption="" data-large-url="big-and-naked-2048x1536.jpg" data-large-width="2048" data-large-height="1536" data-medium-url="big-and-naked-2-1024x768.jpg" data-medium-width="1024" data-medium-height="768">
* <img src="small-and-naked-2.jpg" />
* </a>
* </figure>
* [...]
*
* </div>
*
......@@ -29,12 +23,6 @@
(function(window, document, Math, PhotoSwipe, PhotoSwipeUI) {
var closest = function closest(el, className) {
// el.classList check is necessary, document element has no class list
return el && el.classList && (el.classList.contains(className) ? el : closest(el.parentNode, className));
};
/**
* jQuery.extend() replacement
* @param {object} o1
......@@ -50,17 +38,6 @@
};
var getIndex = function(elements, element) {
for (var i = 0; i < elements.length; ++i) {
if (elements[i] === element) {
return i;
}
}
};
var isDimRatioEqual = function(items, epsilon) {
for (var i = 0; i < items.length; ++i) {
......@@ -209,7 +186,9 @@
};
}
items.push(item);
// Items order within photo gallery has to be provided explicitly.
var index = parseInt(_item.getAttribute('data-item-index'));
items[index] = item;
}
return items;
......@@ -292,7 +271,7 @@
var target = event.target || event.srcElement;
// Grab PhotoSwipe link and attempt to open it.
var linkEl = closest(target, 'pswp-link');
var linkEl = target.closest('a.pswp-link');
if (linkEl && this.openGalleryFromLink(linkEl)) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
}
......@@ -301,7 +280,7 @@
openGalleryFromLink: function(linkEl, galleryEl) {
// Grab clicked grid item.
var gridItemEl = closest(linkEl, 'pswp-item');
var gridItemEl = linkEl.closest('.pswp-item');
if (!gridItemEl) {
return false;
}
......@@ -309,19 +288,19 @@
// If gallery element is provided...
if (galleryEl) {
// ...check that provided PhotoSwipe link belongs to the gallery...
if (gridItemEl.parentNode !== galleryEl) {
if (gridItemEl.closest('[data-gallery]') !== galleryEl) {
return false;
}
} else {
// ...otherwise just get parent gallery.
galleryEl = gridItemEl.parentNode;
galleryEl = gridItemEl.closest('[data-gallery]');
if (!galleryEl) {
return false;
}
}
// Open the gallery.
this.openPhotoSwipe(galleryEl, getIndex(galleryEl.getElementsByClassName('pswp-item'), gridItemEl));
this.openPhotoSwipe(galleryEl, parseInt(gridItemEl.getAttribute('data-item-index')));
return true;
},
......
@mixin grid-vertical-gutter($gutter: $grid-margin-gutters) {
@if type-of($gutter) == 'map' {
@each $breakpoint, $value in $gutter {
$margin: rem-calc($value) / 2;
@include breakpoint($breakpoint) {
margin-top: $margin;
margin-bottom: $margin;
}
@mixin multi-breakpoint($property, $breakpoints, $ratio: 1.0) {
@each $breakpoint, $value in $breakpoints {
@include breakpoint($breakpoint) {
#{$property}: $value * $ratio;
}
}
}
@mixin nest-grid($gutter: $grid-margin-gutters) {
@if type-of($gutter) == 'map' {
@each $breakpoint, $value in $gutter {
$margin: rem-calc($value) / 2;
@include breakpoint($breakpoint) {
margin-left: -$margin;
margin-right: -$margin;
}
}
}
}
@mixin hocus {
&:hover, &:focus {
@content
@content;
}
}
......
.media-grid {
@include nest-grid($reduced-grid-margin-gutters);
@include xy-grid;
@include xy-grid-layout(1, 'div.grid-item', $gutters: map-get($reduced-grid-margin-gutters, small));
@include xy-gutters($reduced-grid-margin-gutters, $negative: true);
@include xy-grid-layout(1, 'div.grid-item', $gutters: map-get($reduced-grid-margin-gutters, small), $gutter-position: top bottom left right);
@include breakpoint(medium) {
@include xy-grid-layout(2, 'div.grid-item', $gutters: map-get($reduced-grid-margin-gutters, medium));
@include xy-grid-layout(2, 'div.grid-item', $gutters: map-get($reduced-grid-margin-gutters, medium), $gutter-position: top bottom left right);
}
@include breakpoint(xlarge) {
@include xy-grid-layout(3, 'div.grid-item', $gutters: map-get($reduced-grid-margin-gutters, xlarge));
}
div.grid-item {
@include grid-vertical-gutter($reduced-grid-margin-gutters);
@include xy-grid-layout(3, 'div.grid-item', $gutters: map-get($reduced-grid-margin-gutters, xlarge), $gutter-position: top bottom left right);
}
}
// Media grid item
.grid-item {
figure {
position: relative;
}
......@@ -58,5 +56,31 @@
text-shadow: 3px 1px 6px $dark-gray;
}
}
// Styling for Colcade grid
.grid-column {
display: none;
width: percentage(1/1);
&.grid-column--1 {
display: block;
}
@include breakpoint(medium) {
width: percentage(1/2);
&.grid-column--2 {
display: block;
}
}
@include breakpoint(xlarge) {
width: percentage(1/3);
&.grid-column--3 {
display: block;
}
}
.grid-item {
@include multi-breakpoint(padding, $reduced-grid-margin-gutters, 0.5);
}
}
......@@ -71,14 +71,14 @@ add_action('wp_enqueue_scripts', function () {
// If SCRIPT_DEBUG is on, load dev versions (unminified) of assets.
$suffix = SCRIPT_DEBUG ? '' : '.min';
// Masonry (version 4) -- only register (enqueued when needed)
wp_register_script('masonry-4', asset_uri("vendor/masonry-layout/masonry.pkgd{$suffix}.js"), [], '4.2.2', true);
// Colcade -- only register (enqueued when needed)
wp_register_script('colcade', asset_uri("vendor/colcade/colcade.js"), [], '0.2.0', true);
// Photoswipe -- only register (enqueued when needed) scripts (styles are compiled into main.css):
wp_register_script('photoswipe-core', asset_uri("vendor/photoswipe/photoswipe{$suffix}.js"), [], '4.1.3', true);
wp_register_script('photoswipe-ui', asset_uri("vendor/photoswipe/photoswipe-ui-default{$suffix}.js"), ['photoswipe-core'], '4.1.3', true);
wp_register_script('photoswipe', asset_uri("js/photoswipe{$suffix}.js"), ['photoswipe-core', 'photoswipe-ui'], filemtime(asset_path("js/photoswipe{$suffix}.js")), true);
// Media grid -- only register (see above)
wp_register_script('media-grid', asset_uri("js/media-grid{$suffix}.js"), ['masonry-4'], filemtime(asset_path("js/media-grid{$suffix}.js")), true);
wp_register_script('media-grid', asset_uri("js/media-grid{$suffix}.js"), ['colcade'], filemtime(asset_path("js/media-grid{$suffix}.js")), true);
// Object fit polyfill - only register (see above)
wp_register_script('object-fit-polyfill', asset_uri("vendor/object-fit-images/ofi{$suffix}.js"), [], '3.2.4', true);
......
......@@ -167,6 +167,14 @@ function mediaGrid(string $gallery, array $attachments, string $size = 'medium')
{
$output = '<div class="media-grid content" data-gallery="' . $gallery . '" itemscope itemtype="http://schema.org/CollectionPage">';
// Add column markup for Colcade.
$output .= '<div class="grid-column grid-column--1"></div>';
$output .= '<div class="grid-column grid-column--2"></div>';
$output .= '<div class="grid-column grid-column--3"></div>';
// Add item index (necessary for Colcade + PhotoSwipe integration)
$image_index = 0;
foreach ($attachments as $attachment) {
if (!is_image($attachment) && !is_video($attachment)) {
......@@ -182,7 +190,7 @@ function mediaGrid(string $gallery, array $attachments, string $size = 'medium')
if (is_image($attachment)) {
$output
.= '<div class="grid-item pswp-item">'
.= '<div class="grid-item pswp-item" data-item-index="' . $image_index++ . '">'
. '<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">'
. getPhotoSwipeLink($attachment_id, wp_get_attachment_image($attachment_id, $size), ['title' => $attachment_title])
. '<a class="pswp-detail info-link" href="' . $attachment_link . '" title="' . esc_attr__('More about photo', 'bezirksblaetter') . '">' . svg_use_icon('info-large') . '</a>'
......
......@@ -9,6 +9,6 @@
<hr>
<footer class="primary">
<?php // dynamic_sidebar('sidebar-footer'); ?>
<p><a href="<?= esc_url(B13R_REPO) ?>" class="repo"><?= get_bloginfo('title'); ?></a> = <a href="https://www.chesio.com">Chester</a> + <a href="https://www.wordpress.org">WordPress</a> + <a href="https://roots.io/bedrock/">Bedrock</a> + <a href="https://polylang.pro">Polylang</a> + <a href="https://get.foundation/">Foundation</a> + <a href="https://masonry.desandro.com/">Masonry</a> + <a href="https://photoswipe.com/">PhotoSwipe</a> + <a href="https://www.opensans.com/">Open Sans</a> + <a href="http://www.typicons.com/">Typicons</a> + <a href="https://fontawesome.com/">Font Awesome</a> + <a href="https://github.com/malchata/yall.js">yall.js</a> + <a href="http://samherbert.net/svg-loaders/">SVG loaders</a></p>
<p><a href="<?= esc_url(B13R_REPO) ?>" class="repo"><?= get_bloginfo('title'); ?></a> = <a href="https://www.chesio.com">Chester</a> + <a href="https://www.wordpress.org">WordPress</a> + <a href="https://roots.io/bedrock/">Bedrock</a> + <a href="https://polylang.pro">Polylang</a> + <a href="https://get.foundation/">Foundation</a> + <a href="https://github.com/desandro/colcade">Colcade</a> + <a href="https://photoswipe.com/">PhotoSwipe</a> + <a href="https://www.opensans.com/">Open Sans</a> + <a href="http://www.typicons.com/">Typicons</a> + <a href="https://fontawesome.com/">Font Awesome</a> + <a href="https://github.com/malchata/yall.js">yall.js</a> + <a href="http://samherbert.net/svg-loaders/">SVG loaders</a></p>
<p>License? <a href="https://unsplash.com/license">Do whatever you want.</a> Btw. on <a href="https://unsplash.com/">Unsplash</a> you will find much better photos...</p>
</footer>