From 80fa4b0b8821e2e89e9bd94560b79813b54d1ca2 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Tue, 24 Sep 2019 11:04:03 +0200 Subject: [PATCH] Add pat-fullscreen-close pattern A second pattern ``pat-fullscreen-close`` which is triggered on ``close-fullscreen`` CSS class allows for closing the fullscreen with custom buttons. --- CHANGES.md | 1 + src/pat/fullscreen/documentation.md | 5 +++++ src/pat/fullscreen/fullscreen-close.js | 20 ++++++++++++++++++++ src/pat/fullscreen/fullscreen.js | 10 +--------- src/pat/fullscreen/tests.js | 5 +++-- src/patterns.js | 1 + webpack/base.config.js | 1 + 7 files changed, 32 insertions(+), 11 deletions(-) create mode 100644 src/pat/fullscreen/fullscreen-close.js diff --git a/CHANGES.md b/CHANGES.md index da26b8e9d..c50c9ea5d 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -6,6 +6,7 @@ Features ~~~~~~~~ - Add ``pat-fullscreen`` pattern to allow any element to be displayed in fullscreen-mode. + A second pattern ``pat-fullscreen-close`` which is triggered on ``close-fullscreen`` CSS class allows for closing the fullscreen with custom buttons. - Runs now on jQuery 3. - Integrated pat-display-time from https://github.com/ploneintranet/pat-display-time diff --git a/src/pat/fullscreen/documentation.md b/src/pat/fullscreen/documentation.md index f12a93d6f..1d6f8fae7 100644 --- a/src/pat/fullscreen/documentation.md +++ b/src/pat/fullscreen/documentation.md @@ -5,7 +5,12 @@ The *fullscreen* pattern allows you to display any element in fullscreen-mode. ## Documentation When an element with the ``pat-fullscreen`` class is clicked another element is set to fullscreen. +There is also a second pattern ``pat-fullscreen-close`` which is triggered on the ``close-fullscreen`` CSS class. +It triggers a close fullscreen when clicking. +This is done as a seperate pattern so that HTML structures injected with ``pat-inject`` are initialized and working correctly. + The element sent to fullscreen is defined so: + 1) If there is a ``data-pat-fullscreen`` with a selector option, that one is used. 2) if the pat-fullscreen element is an anchor link, it's href attribute is used to point to an element with the id specified in the href attribute. 3) Otherwise, the body is sent to fullscreen. diff --git a/src/pat/fullscreen/fullscreen-close.js b/src/pat/fullscreen/fullscreen-close.js new file mode 100644 index 000000000..455d3661a --- /dev/null +++ b/src/pat/fullscreen/fullscreen-close.js @@ -0,0 +1,20 @@ +define([ + "pat-base", + "screenful" +], function(Base, screenful) { + return Base.extend({ + name: "fullscreen-close", + trigger: ".close-fullscreen", + init: function($el, opts) { + this.$el[0].addEventListener('click', function () { + // no prevent-default nor stop propagation to let + // the button also do other stuff. + screenful.exit(); + }); + } + }); +}); + +// jshint indent: 4, browser: true, jquery: true, quotmark: double +// vim: sw=4 expandtab + diff --git a/src/pat/fullscreen/fullscreen.js b/src/pat/fullscreen/fullscreen.js index 3d3b785e3..234c06318 100644 --- a/src/pat/fullscreen/fullscreen.js +++ b/src/pat/fullscreen/fullscreen.js @@ -32,7 +32,7 @@ define([ var el = this.$el[0]; this.$el.on('click', function (e) { - //el.addEventListener('click', function (e) { // TODO: doesn't work in karma + //el.addEventListener('click', function (e) { // TODO: doesn't work in karma for href links e.preventDefault(); // querying the fullscreen element fs_el and inside the event // handler instead of outside allows for dynamic injecting @@ -53,14 +53,6 @@ define([ } }); } - var close_buttons = fs_el.querySelectorAll('.close-fullscreen'); - for (var i=0; i < close_buttons.length; i++) { - close_buttons[i].addEventListener('click', function (event) { - // no prevent-default nor stop propagation to let - // the button also do other stuff. - screenful.exit(); - }); - } } else { log.error('No fullscreen element found.'); } diff --git a/src/pat/fullscreen/tests.js b/src/pat/fullscreen/tests.js index 9d1200bde..fb770ae74 100644 --- a/src/pat/fullscreen/tests.js +++ b/src/pat/fullscreen/tests.js @@ -1,4 +1,4 @@ -define(["pat-fullscreen", "screenful"], function(Pattern, screenful) { +define(["pat-fullscreen", "pat-fullscreen-close", "screenful"], function(Pattern, Pattern2, screenful) { describe("Open in fullscreen", function() { beforeEach(function() { @@ -66,13 +66,14 @@ define(["pat-fullscreen", "screenful"], function(Pattern, screenful) { $('.pat-fullscreen').click(); expect(screenful.request).toHaveBeenCalled(); + Pattern2.init($(".close-fullscreen")); $('.close-fullscreen').click(); expect(screenful.exit).toHaveBeenCalled(); done(); }); - it("Example 4: No fullscreen element definition opens fullscreen on body.", function(done) { + it("Test 4: No fullscreen element definition opens fullscreen on body.", function(done) { var fs_el = document.querySelector('#fs'); var pat_el = document.createElement('button'); pat_el.setAttribute('class', 'pat-fullscreen'); diff --git a/src/patterns.js b/src/patterns.js index d8024b16e..a3138770f 100644 --- a/src/patterns.js +++ b/src/patterns.js @@ -39,6 +39,7 @@ define([ "pat-form-state", "pat-forward", "pat-fullscreen", + "pat-fullscreen-close", "pat-gallery", "pat-image-crop", "pat-inject", diff --git a/webpack/base.config.js b/webpack/base.config.js index b071bda8d..5997e6564 100644 --- a/webpack/base.config.js +++ b/webpack/base.config.js @@ -202,6 +202,7 @@ module.exports = { "pat-form-state": path.resolve(__dirname, "../src/pat/form-state/form-state.js"), "pat-forward": path.resolve(__dirname, "../src/pat/forward/forward.js"), "pat-fullscreen": path.resolve(__dirname, "../src/pat/fullscreen/fullscreen.js"), + "pat-fullscreen-close": path.resolve(__dirname, "../src/pat/fullscreen/fullscreen-close.js"), "pat-gallery": path.resolve(__dirname, "../src/pat/gallery/gallery.js"), "pat-gallery-template": path.resolve(__dirname, "../src/pat/gallery/template.html"), "pat-grid": path.resolve(__dirname, "../src/pat/grid/grid.js"), // Hack, there's no grid jS, but we need for website bundler