Add pat-fullscreen pattern

.travis.yml

@@ -6,4 +6,4 @@ before_script: travis_retry make stamp-npm
 script: make check
 sudo: required
 addons:
-  chrome: beta
+  chrome: beta

CHANGES.md

@@ -5,6 +5,7 @@
 Features
 ~~~~~~~~
 
+- Add ``pat-fullscreen`` pattern to allow any element to be displayed in fullscreen-mode.
 - Runs now on jQuery 3.
 - Integrated pat-display-time from https://github.com/ploneintranet/pat-display-time
 

Makefile

@@ -87,6 +87,7 @@ all_css:: css
 	@$(SASS) -I . -I _sass src/pat/focus/_focus.scss src/pat/focus/focus.css
 	@echo "Almost there, don't give up!"
 	@$(SASS) -I . -I _sass src/pat/forward/_forward.scss src/pat/forward/forward.css
+	@$(SASS) -I . -I _sass src/pat/fullscreen/_fullscreen.scss src/pat/fullscreen/fullscreen.css
 	@$(SASS) -I . -I _sass src/pat/gallery/_gallery.scss src/pat/gallery/gallery.css
 	@$(SASS) -I . -I _sass src/pat/grid/_grid.scss src/pat/grid/grid.css
 	@$(SASS) -I . -I _sass src/pat/image-crop/_image-crop.scss src/pat/image-crop/image-crop.css
@@ -117,7 +118,7 @@ watch::
 
 serve:: all _serve
 
-push: 
+push:
 	cd push && hz serve --dev
 
 _serve:

_sass/_patterns.scss

@@ -30,6 +30,7 @@
 @import "src/pat/equaliser/equaliser";
 @import "src/pat/expandable-tree/expandable-tree";
 @import "src/pat/focus/focus";
+@import "src/pat/fullscreen/fullscreen";
 @import "src/pat/gallery/gallery";
 @import "src/pat/grid/grid";
 @import "src/pat/syntax-highlight/syntax-highlight";

index.html

@@ -70,6 +70,7 @@ <h4>Fancy stuff</h4>
 			<a class="navigation slides" href="/src/pat/slides/index.html" title="">Slideshows<sup>β</sup></a>
 			<a class="navigation slideshow-builder" href="/src/pat/slideshow-builder/index.html" title="">Slideshow builder<sup>β</sup></a>
             <a class="navigation masonry" href="/src/pat/masonry/index.html" title="">Masonry<sup>β</sup></a>
+			<a class="navigation fullscreen" href="/src/pat/fullscreen/index.html" title="">Fullscreen<sup>β</sup></a>
 		</div>
 	</nav>
   </body>

package.json

@@ -49,6 +49,7 @@
     "pikaday": "^1.8.0",
     "prefixfree": "1.0.0",
     "promise-polyfill": "^8.1.0",
+    "screenfull": "^5.0.0",
     "select2": "3.5.1",
     "showdown": "1.7.2",
     "showdown-github": "1.0.0",

src/pat/fullscreen/_fullscreen.scss

@@ -0,0 +1,33 @@
+:fullscreen {
+  background-color: transparent;
+}
+
+.pat-fullscreen {
+  cursor: pointer; // show the pointer-cursor also on element, where it wouldn't
+}
+
+.pat-fullscreen-close-fullscreen {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  cursor: pointer;
+  background: transparent;
+  height: 3rem;
+  width: 3rem;
+  line-height: 3rem;
+  margin: 0;
+  padding: 0;
+  text-indent: -1000px;
+  overflow: hidden;
+  border: none;
+
+  &:before {
+    content: "#{$glyph-close}";
+    text-indent: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 3rem;
+    font: normal 3rem fontello;
+  }
+}

src/pat/fullscreen/documentation.md

@@ -0,0 +1,55 @@
+## Description
+
+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.
+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.
+
+You can add a close button by setting the ``close-button`` option to ``show``.
+
+Anyways, any ``.close-fullscreen`` element within the fullscreen element itself will be used to close the fullscreen.
+
+See examples below.
+
+
+### Examples
+
+Fullscreen via anchor-element:
+
+    <div id="fs1">
+        <a class="pat-fullscreen" href="#fs1">Open in fullscreen</a>
+    </div>
+
+Configuration via data attributes:
+
+    <div class=".fs2">
+        <button class="pat-fullscreen" data-pat-fullscreen="selector:.fs2;close-button:show">Open fullscreen</button>
+    </div>
+
+Custom close buttons:
+
+    <div class=".fs3">
+        <button class="pat-fullscreen" data-pat-fullscreen="selector:.fs2">Open fullscreen</button>
+        <button class="close-fullscreen">Close Fullscreen</button>
+    </div>
+
+Open the ``body`` element in fullscreen without giving any options.
+
+    <button class="pat-fullscreen">Open in fullscreen</button>
+
+
+### Option reference
+
+The fullscreen pattern can be configured through a `data-pat-fullscreen` attribute.
+The available options are:
+
+| Field | Default | Options | Description |
+| ----- | ------- | ----------- | ----------- |
+| `selector`   | `null` | A CSS selector | The target element which should be shown in fullscreen. If not given, open the body in fullscreen.
+| `close-button` | `none`   | `none`, `show` | `show` if a exit button should be shown when entering fullscreen mode.
+

src/pat/fullscreen/fullscreen.js

@@ -0,0 +1,73 @@
+define([
+    "pat-base",
+    "pat-parser",
+    "pat-logger",
+    "screenful"
+], function(Base, Parser, logging, screenful) {
+    var log = logging.getLogger("fullscreen");
+    var parser = new Parser('fullscreen');
+
+    parser.addArgument('selector', null); // Selector for the fullscreen element.
+    parser.addArgument('close-button', 'none', ['none', 'show']); // Inject a fullscreen button.
+
+    return Base.extend({
+        name: "fullscreen",
+        trigger: ".pat-fullscreen",
+
+        init: function($el, opts) {
+            this.options = parser.parse(this.$el, opts);
+
+            // setting up the exit button
+            var exit_el = null;
+            if (this.options.closeButton === 'show') {
+                var exit_el = document.createElement('button');
+                exit_el.className = 'pat-fullscreen-close-fullscreen';
+                exit_el.title = 'Exit fullscreen';
+                exit_el.appendChild(document.createTextNode('Exit fullscreen'));
+                exit_el.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    screenful.exit();
+                });
+            }
+
+            var el = this.$el[0];
+            this.$el.on('click', function (e) {
+            //el.addEventListener('click', function (e) {  // TODO: doesn't work in karma
+                e.preventDefault();
+                // querying the fullscreen element fs_el and inside the event
+                // handler instead of outside allows for dynamic injecting
+                // fullscreen elements even after pattern initialization.
+                var fs_el_sel = this.options.selector ? this.options.selector : el.getAttribute('href');
+                fs_el_sel = fs_el_sel ? fs_el_sel : 'body';
+                var fs_el = document.querySelector(fs_el_sel);
+                if (fs_el) {
+                    // setting page to fullscreen
+                    screenful.request(fs_el);
+                    if (this.options.closeButton === 'show') {
+                        fs_el.appendChild(exit_el);
+                        screenful.on('change', function (event) {
+                            // Removing exit button.
+                            // The button is also removed when pressing the <ESC> button.
+                            if (!screenful.isFullscreen) {
+                                fs_el.removeChild(exit_el);
+                            }
+                        });
+                    }
+                    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.');
+                }
+            }.bind(this));
+        }
+    });
+});
+
+// jshint indent: 4, browser: true, jquery: true, quotmark: double
+// vim: sw=4 expandtab

src/pat/fullscreen/index.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <title>Scroll demo</title>
+    <link rel="stylesheet" href="/style/common.css" type="text/css">
+    <script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
+    <style type="text/css" media="screen">
+      button:not(.pat-fullscreen-close-fullscreen) {
+        background: white;
+        color: black;
+        border: 1px solid blue;
+      }
+      :fullscreen {
+        background: white;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      Fullscreen examples
+      <ul>
+        <li><a class="pat-fullscreen" href="#fs1">Example 1: Define fullscreen element via href-target.</a></li>
+        <li><button class="pat-fullscreen" data-pat-fullscreen="selector:.fs2; close-button:show">Example 2: data-attr configuration: ``selector`` and ``close-button``.</button></li>
+        <li><button class="pat-fullscreen" data-pat-fullscreen="selector:.fs3">Example 3: Existing ``.close-fullscreen`` elements.</button></li>
+        <li class="pat-fullscreen">Example 4: No fullscreen element definition opens fullscreen on body.</li>
+      </ul>
+    </header>
+    <section id="fs1">
+      <h2>Example 1</h2>
+      <p><img src="https://picsum.photos/600"/></p>
+    </section>
+    <section class="fs2">
+      <h2>Example 2</h2>
+      <p><img src="https://picsum.photos/600"/></p>
+    </section>
+    <section class="fs3">
+      <h2>Example 3</h2>
+      <p><img src="https://picsum.photos/600"/></p>
+      <p>
+        <a class="close-fullscreen">Close fullscreen Link</a><br/>
+        <button class="close-fullscreen">Close Fullscreen Button</button><br/>
+        <a href=".">Reload site without close fullscreen.</a><br/>
+      </p>
+    </section>
+  </body>
+</html>

src/pat/fullscreen/tests.js

@@ -0,0 +1,90 @@
+define(["pat-fullscreen", "screenful"], function(Pattern, screenful) {
+
+    describe("Open in fullscreen", function() {
+        beforeEach(function() {
+            var el = document.createElement('div');
+            el.setAttribute('class', 'fs');
+            el.setAttribute('id', 'fs');
+            document.body.appendChild(el);
+            spyOn(screenful, 'request').and.callThrough();
+            spyOn(screenful, 'exit').and.callThrough();
+        });
+        afterEach(function() {
+            document.body.removeChild(document.querySelector('#fs'));
+            var exit = document.querySelector('.pat-fullscreen-close-fullscreen');
+            if (exit) {
+                document.body.removeChild(exit);
+            }
+        });
+
+        it("Test 1: Define fullscreen element via href-target", function(done) {
+            var fs_el = document.querySelector('#fs');
+            var pat_el = document.createElement('a');
+            pat_el.setAttribute('class', 'pat-fullscreen');
+            pat_el.setAttribute('href', '#fs');
+            pat_el.appendChild(document.createTextNode('Open in fullscreen'));
+            fs_el.appendChild(pat_el);
+
+            Pattern.init($(".pat-fullscreen"));
+            $('.pat-fullscreen').click();
+            expect(screenful.request).toHaveBeenCalled();
+
+            done();
+        });
+
+        it("Test 2: data-attr configuration: selector and close-button", function(done) {
+            var fs_el = document.querySelector('#fs');
+            var pat_el = document.createElement('button');
+            pat_el.setAttribute('class', 'pat-fullscreen');
+            pat_el.setAttribute('data-pat-fullscreen', 'selector:.fs;close-button:show');
+            pat_el.appendChild(document.createTextNode('Open in fullscreen'));
+            fs_el.appendChild(pat_el);
+
+            Pattern.init($(".pat-fullscreen"));
+            $('.pat-fullscreen').click();
+            expect(screenful.request).toHaveBeenCalled();
+
+            $('.pat-fullscreen-close-fullscreen').click();
+            expect(screenful.exit).toHaveBeenCalled();
+
+            done();
+        });
+
+        it("Test 3: Existing .close-fullscreen elements.", function(done) {
+            var fs_el = document.querySelector('#fs');
+            var pat_el = document.createElement('button');
+            pat_el.setAttribute('class', 'pat-fullscreen');
+            pat_el.setAttribute('data-pat-fullscreen', 'selector:.fs');
+            pat_el.appendChild(document.createTextNode('Open in fullscreen'));
+            fs_el.appendChild(pat_el);
+            var pat_close = document.createElement('button');
+            pat_close.setAttribute('class', 'close-fullscreen');
+            pat_close.appendChild(document.createTextNode('Close fullscreen'));
+            fs_el.appendChild(pat_close);
+
+            Pattern.init($(".pat-fullscreen"));
+            $('.pat-fullscreen').click();
+            expect(screenful.request).toHaveBeenCalled();
+
+            $('.close-fullscreen').click();
+            expect(screenful.exit).toHaveBeenCalled();
+
+            done();
+        });
+
+        it("Example 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');
+            pat_el.appendChild(document.createTextNode('Open in fullscreen'));
+            fs_el.appendChild(pat_el);
+
+            Pattern.init($(".pat-fullscreen"));
+            $('.pat-fullscreen').click();
+            expect(screenful.request).toHaveBeenCalled();
+
+            done();
+        });
+
+    });
+});