Add pat-fullscreen support for close

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
 

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.

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
+

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.');
                 }

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');

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",

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