From 1d4bc5ddec02bfad971c6400747895280aa04895 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Tue, 25 Aug 2020 12:56:21 +0200 Subject: [PATCH 1/4] pat-gallery: Add feature to auto-add images to the gallery. --- CHANGES.md | 1 + src/pat/gallery/documentation.md | 9 +++++++++ src/pat/gallery/gallery.js | 31 ++++++++++++++++++++++--------- src/pat/gallery/index.html | 23 ++++++++++++++++++++--- 4 files changed, 52 insertions(+), 12 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index b48cf28d3..5af521275 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -4,6 +4,7 @@ Features ~~~~~~~~ +- pat-gallery: Add feature to automatically add images to the gallery. - pat-validation: Allow for HTML5 style ``required`` attributes without a value. - pat-validation: Added the possibility to check for fields equality - pat-validation: Dont use :input jquery extension for better performance diff --git a/src/pat/gallery/documentation.md b/src/pat/gallery/documentation.md index bf93f1355..0fa710c3e 100644 --- a/src/pat/gallery/documentation.md +++ b/src/pat/gallery/documentation.md @@ -47,6 +47,14 @@ If you just want individual images to be opened in the gallery overlay but want +You can also auto-add images within a pat-gallery container: + + + ### Option reference @@ -60,6 +68,7 @@ You can customise the behaviour of a gallery through options in the | Property | Default value | Values | Description | Type | | ----- | --------| -------- | ------- | ----------- | | `item-selector` | `a` | | The selector for the link element, which contains the images to be added to the gallery. For example, you can set the `item-selector` to `a.add-to-gallery` and have only images wrapped in an anchor element with the class `add-to-gallery` added to the gallery. +| `autoadd` | false | `true` `false` `yes` `no` | Automatically add img elements to the gallery. |Mutually exclusive| | `loop` | true | `true` `false` | Indicates if a slideshow should loop back to the beginning.|Mutually exclusive| | `scale-method` | `fit` | `fit` `fitNoUpscale` `zoom` | How images will fit onto the screen. `fit` ensures the image always fits the screen. `fitNoUpscale` works like `fit` but will never upscale the image. `zoom` the image will always fill the full screen, this may cause the image to be "zoomed" in and cropped.|Mutually exclusive | | `delay` | `30000` | | The delay, in milliseconds, an image is shown in a slideshow.|Number| diff --git a/src/pat/gallery/gallery.js b/src/pat/gallery/gallery.js index 81d5378af..04c748ea8 100644 --- a/src/pat/gallery/gallery.js +++ b/src/pat/gallery/gallery.js @@ -15,6 +15,7 @@ define('pat-gallery', [ ], function($, patterns, Base, Parser, PhotoSwipe, PhotoSwipeUI, template, _) { var parser = new Parser('gallery'); parser.addArgument('item-selector', 'a'); // selector for anchor element, which is added to the gallery. + parser.addArgument('autoadd', false); parser.addArgument('loop', true); parser.addArgument('scale-method', 'fit', ['fit', 'fitNoUpscale', 'zoom']); parser.addArgument('delay', 30000); @@ -30,11 +31,21 @@ define('pat-gallery', [ if ($('#photoswipe-template').length === 0) { $('body').append(_.template(template)()); } + // Search for itemSelector including the current node // See: https://stackoverflow.com/a/17538213/1337474 - var image_wrapper = this.$el.find(this.options.itemSelector).addBack(this.options.itemSelector); + var item_selector = this.options.itemSelector; + if (this.options.autoadd) { + // auto add images not already added and those directly under $el + item_selector = item_selector + ', :not(' + item_selector + ') img, > img'; + } + var image_wrapper = this.$el.find(item_selector).addBack(this.options.itemSelector); var images = image_wrapper.map(function () { - return { 'w': 0, 'h': 0, 'src': this.href, 'title': $(this).find('img').attr('title') }; + if (this.tagName.toLowerCase() === 'img') { + return { 'w': 0, 'h': 0, 'src': this.src, 'title': this.title }; + } else { + return { 'w': 0, 'h': 0, 'src': this.href, 'title': $(this).find('img').attr('title') }; + } }); var pswpElement = document.querySelectorAll('.pswp')[0]; var options = { @@ -48,14 +59,16 @@ define('pat-gallery', [ closeOnScroll: false }; image_wrapper.click(function (ev) { - ev.preventDefault(); - if (this.href) { - options.index = _.indexOf(_.pluck(images, 'src'), this.href); - } else { - options.index = 0; + if (this.tagName.toLowerCase() === 'img' && $(this).closest('a').length !== 0) { + // Do not open auto-added images in gallery if they are wrapped in an anchor element. + return; } - options.history = false; // this fixes the reload on gallery close which was induced by a history back call. - + ev.preventDefault(); + // Get the index of the clicked gallery item in the list of images. + options.index = _.indexOf(_.pluck(images, 'src'), this.href || this.src) || 0; + // Fix reload on gallery close which was induced by a history back call. + options.history = false; + var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI, images, options); gallery.listen('gettingData', function(index, item) { // Workaround for the fact that we don't know the image sizes. diff --git a/src/pat/gallery/index.html b/src/pat/gallery/index.html index 6e5ca329c..dc80e6014 100644 --- a/src/pat/gallery/index.html +++ b/src/pat/gallery/index.html @@ -4,9 +4,13 @@ Gallery - - - + +

Normal gallery

@@ -15,6 +19,7 @@

Normal gallery

+

Gallery with mixed content

Only items which match the selecor ``a.add-to-gallery`` are added.

+

Image popups, not collected in a gallery

+ +

Gallery with auto added images.

+

The last image here is wrapped in a link and should not open the gallery but Syslab.com website in a new tab.
+ The image is included in the gallery, though.

+ + (Timestamp to see if page has reloaded: ) From 8388453280589688ebd901da0d70f08ceee0eb81 Mon Sep 17 00:00:00 2001 From: "Cornelis G. A. Kolbach" Date: Tue, 25 Aug 2020 13:59:06 +0200 Subject: [PATCH 2/4] Added documentation for 'auto add'. Repaired markupdown table. --- src/pat/gallery/documentation.md | 25 +++++++++++++------------ src/pat/gallery/full-4.jpg | Bin 0 -> 123535 bytes 2 files changed, 13 insertions(+), 12 deletions(-) create mode 100644 src/pat/gallery/full-4.jpg diff --git a/src/pat/gallery/documentation.md b/src/pat/gallery/documentation.md index 0fa710c3e..1d6213bf1 100644 --- a/src/pat/gallery/documentation.md +++ b/src/pat/gallery/documentation.md @@ -31,7 +31,7 @@ When looking for images to show in the gallery the pattern looks for links conta
    • -or a HTML5 `nav` container: +or an HTML5 `nav` container: -You can also auto-add images within a pat-gallery container: +Sometimes it's not possible to have links around your images. In this case you can just add a selector that directly refers to an image instead of a link that points to an image. Pat-gallery will scan for either an href attribute or an src attribute and take its value. -