Merge branch '10-use-lightgallery-js-and-proper-thumbnails' into 'master'

Resolve "Use lightgallery.js and proper thumbnails"

Closes #10

See merge request ariejan/devroom.io!7

.gitignore

@@ -5,4 +5,4 @@
 .DS_Store
 
 # Low resolution image, generated by CI
-/static/img/low
+/static/img/thumbs

.gitlab-ci.yml

@@ -10,10 +10,10 @@ test:
     - mv -f public/css/style-min.css public/css/style.css
 
     # Mogrify thumbnails
-    - mkdir -p public/img/low
+    - mkdir -p public/img/thumbs
     - cd public/img
-    - mogrify -format png -path low -thumbnail 724 *.png
-    - mogrify -format jpg -path low -thumbnail 724 *.jpg
+    - mogrify -format png -path thumbs -thumbnail 724 *.png
+    - mogrify -format jpg -path thumbs -thumbnail 724 *.jpg
 
   except:
     - master
@@ -36,10 +36,10 @@ pages:
     - mv -f public/css/style-min.css public/css/style.css
 
     # Mogrify thumbnails
-    - mkdir -p public/img/low
+    - mkdir -p public/img/thumbs
     - cd public/img
-    - mogrify -format png -path low -thumbnail 724 *.png
-    - mogrify -format jpg -path low -thumbnail 724 *.jpg
+    - mogrify -format png -path thumbs -thumbnail 724 *.png
+    - mogrify -format jpg -path thumbs -thumbnail 724 *.jpg
 
     # Deploy
     - cd "$CI_PROJECT_DIR"

bin/thumbs

@@ -0,0 +1,13 @@
+#!/usr/bin/env bash
+
+echo "-- Cleaning old thumbnails"
+cd static/img
+rm -rf thumbs
+
+echo "-- Generating thumbnails"
+mkdir -p thumbs
+mogrify -format png -path thumbs -thumbnail 724 *.png
+mogrify -format jpg -path thumbs -thumbnail 724 *.jpg
+
+echo "-- Done"
+cd ../..

config.toml

@@ -13,7 +13,7 @@ pluralizelisttitles = false
 
 PygmentsCodeFences = true
 pygmentsuseclasses = false
-pygmentsstyle = "monokai"
+pygmentsstyle = "pastie"
 
 [author]
   name = "Ariejan de Vroom"
@@ -34,8 +34,8 @@ copyright = "Copyright © 1996 - 2017 Ariejan de Vroom"
 # copyrightUrl = "https://creativecommons.org/licenses/by-sa/4.0/"
 logofile = "img/logo.png"
 faviconfile = "favicon.ico"
-highlightjs = true
-progressively = true
+highlightjs = false
+progressively = false
 share = true
 latestpostcount = 7
 github = "ariejan"
@@ -49,16 +49,3 @@ posts_navigation = true
 # issoHost = "comments.domain.tld:1234"
 # githubRepo = "githubUsername/repositoryName"
 small_banner_logo = false
-
-[params.colors]
-identifier = "#527fc1f"
-identifier_dark = "#1a3152"
-trivial = "#6a7a8b"
-foreground = "#181d2a"
-background = "#f9f9f9"
-background_dark = "#282a36"
-code = "#87a5d2"
-type = "#97d28b"
-special = "#ffcb8d"
-value = "#96c2d7"
-statement = "#ff8e91"

content/blog/2017-03-20-image-zoom-with-plain-javascript-and-css.md

@@ -6,6 +6,10 @@ description = "I'm a back-end developer and rarely dabble in the fine art of wri
 slug = "image-zoom-with-plain-javascript-and-css"
 +++
 
+_Note: I've moved away from the solution outlined in this post. Mainly because I did not want
+to write an entire gallery from scratch. I've since opted to use [lightgallery.js](https://sachinchoolur.github.io/lightgallery.js/)
+which is a pure JS image gallery solution with some nice goodies._
+
 The premise is simple. A post may contain images. These images are restricted in rendered size to 
 keep the flow of the page in tact. Clicking an image allows you to zoom in. Here's an example:
 

themes/cocoa-eh/layouts/blog/single.html

@@ -37,7 +37,7 @@
                     </div>
                 </div>
             </div>
-            <div class="markdown">
+            <div class="markdown" id="post-gallery-wrapper">
                 {{ partial "content" . }}
                 <br>
             </div>

themes/cocoa-eh/layouts/electronics/single.html

@@ -37,7 +37,7 @@
                     </div>
                 </div>
             </div>
-            <div class="markdown">
+            <div class="markdown" id="post-gallery-wrapper">
                 {{ partial "content" . }}
                 <br>
             </div>

themes/cocoa-eh/layouts/partials/content.html

@@ -1,6 +1,2 @@
-{{ if .Site.Params.progressively }}
-    {{ $newImage := (print "<figure class=\"progressive\"><img class=\"progressive__img progressive--not-loaded\" data-progressive=\"" .Site.BaseURL "$1/$2\" src=\"" .Site.BaseURL "$1/low/$2\" alt=$3 $4></figure>") }}
-    {{ .Content | replaceRE "<img src=\"/(.*)\\/(.*)\" alt=(.*) (.*)>" $newImage | safeHTML }}
-{{ else }}
-    {{ .Content }}
-{{ end }}
+{{ $newImage := (print "<a class=\"item\" href=\"" .Site.BaseURL "$1/$2\"><img src=\"" .Site.BaseURL "$1/thumbs/$2\" alt=$3 $4></a>") }}
+{{ .Content | replaceRE "<img src=\"/(.*)\\/(.*)\" alt=(.*) (.*) />" $newImage | safeHTML }}

themes/cocoa-eh/layouts/partials/css/main.css

@@ -428,23 +428,6 @@ img {
   max-width: 100%;
   cursor: pointer;
 }
-section.main .content .markdown figure img.zoomed {
-  position: fixed;
-  
-  top: 2vh;
-  bottom: 2vh;
-  left: 2vw;
-  right: 2vw;
-
-  z-index: 1000;
-
-  max-width: 90vw;
-  max-height: 90vh;
-
-  margin: auto;
-
-  border: 4px solid #000
-}
 section.main .content {
     width: 100%;
 }
@@ -495,7 +478,7 @@ section.main .content .markdown code,
 section.main .content .markdown pre {
   font-family: 'Menlo', monospace;
   font-size: 0.98rem;
-  background-color: #f7f7f7;
+  background-color: #fff;
 }
 section.main .content .markdown code {
   /* enclosed by single backtick (`) */

themes/cocoa-eh/layouts/partials/footer_scripts.html

@@ -18,6 +18,9 @@
   <script src="{{ .Site.BaseURL }}js/progressively.min.js" defer></script>
 {{ end }}
 
+<script src="{{ .Site.BaseURL }}js/lightgallery.min.js" defer></script>
+<script src="{{ .Site.BaseURL }}js/lg-fullscreen.min.js" defer></script>
+<script src="{{ .Site.BaseURL }}js/lg-zoom.min.js" defer></script>
 
 {{ if .Site.Params.issoHost }}
 <script
@@ -50,48 +53,19 @@
         }
       });
     {{ end }}
+
+    lightGallery(document.getElementById('post-gallery-wrapper'), {
+      selector: '.item'
+    });
   };
 </script>
 
-<script type="text/javascript">
-  function ready(fn) {
-      if (document.readyState != 'loading') {
-          fn();
-      } else {
-          document.addEventListener('DOMContentLoaded', fn);
-      }
-  }
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-  function imageClick(e) {
-      e.preventDefault();
-      this.classList.toggle('zoomed');
-  }
-  
-  function handleEsc(e) {
-      if (e.keyCode == 27) {
-          var zoomedImages = document.querySelectorAll('img.zoomed');
-          Array.prototype.forEach.call(zoomedImages, function(el, i) {
-              el.classList.toggle('zoomed');
-          });
-      }
-  }
-  
-  ready(function() {
-      var images = document.querySelectorAll('section.post img');
-      Array.prototype.forEach.call(images, function(el, i) {
-          el.addEventListener('click', imageClick);
-      });
-  
-      document.addEventListener('keyup', handleEsc);
-  });
-  </script>
-
-  <script>
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-
-    ga('create', 'UA-60089-16', 'auto');
-    ga('send', 'pageview');
-  </script>
+  ga('create', 'UA-60089-16', 'auto');
+  ga('send', 'pageview');
+</script>

themes/cocoa-eh/layouts/partials/head_includes.html

@@ -52,6 +52,11 @@
   </style>
 {{ end }}
 
+<style type="text/css" media="screen">
+  {{ partial "css/lightgallery.min.css" . | safeCSS }}
+  {{ partial "css/lg-transitions.min.css" . | safeCSS }}
+</style>
+
 <!-- Icon -->
 <link rel="shortcut icon"
 {{ if .Site.Params.faviconfile }}

themes/cocoa-eh/static/fonts/lg.svg

@@ -0,0 +1,47 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+<json>
+<![CDATA[
+{
+	"fontFamily": "lg",
+	"majorVersion": 1,
+	"minorVersion": 0,
+	"fontURL": "https://github.com/sachinchoolur/lightgallery.js",
+	"copyright": "sachin",
+	"license": "MLT",
+	"licenseURL": "http://opensource.org/licenses/MIT",
+	"version": "Version 1.0",
+	"fontId": "lg",
+	"psName": "lg",
+	"subFamily": "Regular",
+	"fullName": "lg",
+	"description": "Font generated by IcoMoon."
+}
+]]>
+</json>
+</metadata>
+<defs>
+<font id="lg" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe01a;" glyph-name="pause_circle_outline" data-tags="pause_circle_outline" d="M554 256.667v340h86v-340h-86zM512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM384 256.667v340h86v-340h-86z" />
+<glyph unicode="&#xe01d;" glyph-name="play_circle_outline" data-tags="play_circle_outline" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM426 234.667v384l256-192z" />
+<glyph unicode="&#xe033;" glyph-name="stack-2" data-tags="stack-2" d="M384 853.334h426.667q53 0 90.5-37.5t37.5-90.5v-426.667q0-53-37.5-90.5t-90.5-37.5h-426.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 53 37.5 90.5t90.5 37.5zM170.667 675.334v-547.333q0-17.667 12.5-30.167t30.167-12.5h547.333q-13.333-37.667-46.333-61.5t-74.333-23.833h-426.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 41.333 23.833 74.333t61.5 46.333zM810.667 768h-426.667q-17.667 0-30.167-12.5t-12.5-30.167v-426.667q0-17.667 12.5-30.167t30.167-12.5h426.667q17.667 0 30.167 12.5t12.5 30.167v426.667q0 17.667-12.5 30.167t-30.167 12.5z" />
+<glyph unicode="&#xe070;" glyph-name="clear" data-tags="clear" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
+<glyph unicode="&#xe094;" glyph-name="arrow-left" data-tags="arrow-left" d="M426.667 768q17.667 0 30.167-12.5t12.5-30.167q0-18-12.667-30.333l-225.667-225.667h665q17.667 0 30.167-12.5t12.5-30.167-12.5-30.167-30.167-12.5h-665l225.667-225.667q12.667-12.333 12.667-30.333 0-17.667-12.5-30.167t-30.167-12.5q-18 0-30.333 12.333l-298.667 298.667q-12.333 13-12.333 30.333t12.333 30.333l298.667 298.667q12.667 12.333 30.333 12.333z" />
+<glyph unicode="&#xe095;" glyph-name="arrow-right" data-tags="arrow-right" d="M597.333 768q18 0 30.333-12.333l298.667-298.667q12.333-12.333 12.333-30.333t-12.333-30.333l-298.667-298.667q-12.333-12.333-30.333-12.333-18.333 0-30.5 12.167t-12.167 30.5q0 18 12.333 30.333l226 225.667h-665q-17.667 0-30.167 12.5t-12.5 30.167 12.5 30.167 30.167 12.5h665l-226 225.667q-12.333 12.333-12.333 30.333 0 18.333 12.167 30.5t30.5 12.167z" />
+<glyph unicode="&#xe0f2;" glyph-name="vertical_align_bottom" data-tags="vertical_align_bottom" d="M170 128.667h684v-86h-684v86zM682 384.667l-170-172-170 172h128v426h84v-426h128z" />
+<glyph unicode="&#xe1ff;" glyph-name="apps" data-tags="apps" d="M682 84.667v172h172v-172h-172zM682 340.667v172h172v-172h-172zM426 596.667v172h172v-172h-172zM682 768.667h172v-172h-172v172zM426 340.667v172h172v-172h-172zM170 340.667v172h172v-172h-172zM170 84.667v172h172v-172h-172zM426 84.667v172h172v-172h-172zM170 596.667v172h172v-172h-172z" />
+<glyph unicode="&#xe20c;" glyph-name="fullscreen" data-tags="fullscreen" d="M598 724.667h212v-212h-84v128h-128v84zM726 212.667v128h84v-212h-212v84h128zM214 512.667v212h212v-84h-128v-128h-84zM298 340.667v-128h128v-84h-212v212h84z" />
+<glyph unicode="&#xe20d;" glyph-name="fullscreen_exit" data-tags="fullscreen_exit" d="M682 596.667h128v-84h-212v212h84v-128zM598 128.667v212h212v-84h-128v-128h-84zM342 596.667v128h84v-212h-212v84h128zM214 256.667v84h212v-212h-84v128h-128z" />
+<glyph unicode="&#xe311;" glyph-name="zoom_in" data-tags="zoom_in" d="M512 512.667h-86v-86h-42v86h-86v42h86v86h42v-86h86v-42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
+<glyph unicode="&#xe312;" glyph-name="zoom_out" data-tags="zoom_out" d="M298 554.667h214v-42h-214v42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
+<glyph unicode="&#xe80d;" glyph-name="share" data-tags="share" d="M768 252.667c68 0 124-56 124-124s-56-126-124-126-124 58-124 126c0 10 0 20 2 28l-302 176c-24-22-54-34-88-34-70 0-128 58-128 128s58 128 128 128c34 0 64-12 88-34l300 174c-2 10-4 20-4 30 0 70 58 128 128 128s128-58 128-128-58-128-128-128c-34 0-64 14-88 36l-300-176c2-10 4-20 4-30s-2-20-4-30l304-176c22 20 52 32 84 32z" />
+<glyph unicode="&#xe901;" glyph-name="facebook-with-circle" data-tags="facebook-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM628.429 612.659h-73.882c-8.755 0-18.483-11.52-18.483-26.829v-53.35h92.416l-13.978-76.083h-78.438v-228.403h-87.194v228.403h-79.104v76.083h79.104v44.749c0 64.205 44.544 116.378 105.677 116.378h73.882v-80.947z" />
+<glyph unicode="&#xe902;" glyph-name="google-with-circle" data-tags="google+-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM483.686 249.805c-30.874-15.002-64.102-16.589-76.954-16.589-2.458 0-3.84 0-3.84 0s-1.178 0-2.765 0c-20.070 0-119.962 4.608-119.962 95.59 0 89.395 108.8 96.41 142.131 96.41h0.87c-19.251 25.702-15.258 51.61-15.258 51.61-1.69-0.102-4.147-0.205-7.168-0.205-12.544 0-36.762 1.997-57.549 15.411-25.498 16.384-38.4 44.288-38.4 82.893 0 109.107 119.142 113.51 120.32 113.613h118.989v-2.611c0-13.312-23.91-15.923-40.192-18.125-5.53-0.819-16.64-1.894-19.763-3.482 30.157-16.128 35.021-41.421 35.021-79.104 0-42.906-16.794-65.587-34.611-81.51-11.059-9.882-19.712-17.613-19.712-28.006 0-10.189 11.878-20.582 25.702-32.717 22.579-19.917 53.555-47.002 53.555-92.723 0-47.258-20.326-81.050-60.416-100.454zM742.4 460.8h-76.8v-76.8h-51.2v76.8h-76.8v51.2h76.8v76.8h51.2v-76.8h76.8v-51.2zM421.018 401.92c-2.662 0-5.325-0.102-8.038-0.307-22.733-1.69-43.725-10.189-58.88-24.013-15.053-13.619-22.733-30.822-21.658-48.179 2.304-36.403 41.37-57.702 88.832-54.323 46.694 3.379 77.824 30.31 75.571 66.714-2.15 34.202-31.898 60.109-75.827 60.109zM465.766 599.808c-12.39 43.52-32.358 56.422-63.386 56.422-3.328 0-6.707-0.512-9.933-1.382-13.466-3.84-24.166-15.053-30.106-31.744-6.093-16.896-6.451-34.509-1.229-54.579 9.472-35.891 34.97-61.901 60.672-61.901 3.379 0 6.758 0.41 9.933 1.382 28.109 7.885 45.722 50.79 34.048 91.802z" />
+<glyph unicode="&#xe903;" glyph-name="pinterest-with-circle" data-tags="pinterest-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM545.638 344.32c-31.539 2.406-44.749 18.022-69.427 32.973-13.568-71.219-30.157-139.52-79.309-175.206-15.206 107.725 22.221 188.518 39.629 274.381-29.645 49.92 3.533 150.323 66.099 125.645 76.954-30.515-66.662-185.6 29.747-205.005 100.659-20.173 141.773 174.694 79.36 237.978-90.214 91.494-262.502 2.099-241.306-128.87 5.12-32 38.246-41.728 13.21-85.914-57.702 12.8-74.957 58.317-72.704 118.989 3.533 99.328 89.242 168.909 175.155 178.483 108.698 12.083 210.688-39.885 224.819-142.182 15.821-115.405-49.101-240.282-165.274-231.27z" />
+<glyph unicode="&#xe904;" glyph-name="twitter-with-circle" data-tags="twitter-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM711.936 549.683c0.205-4.198 0.256-8.397 0.256-12.493 0-128-97.331-275.507-275.405-275.507-54.682 0-105.574 15.974-148.378 43.52 7.526-0.922 15.258-1.28 23.091-1.28 45.363 0 87.091 15.411 120.218 41.421-42.342 0.819-78.080 28.774-90.419 67.174 5.888-1.075 11.93-1.69 18.176-1.69 8.806 0 17.408 1.178 25.498 3.379-44.288 8.909-77.67 48.026-77.67 94.925v1.178c13.056-7.219 28.006-11.622 43.878-12.134-26.010 17.408-43.059 47.002-43.059 80.64 0 17.715 4.762 34.406 13.107 48.691 47.77-58.573 119.040-97.075 199.526-101.222-1.69 7.117-2.509 14.49-2.509 22.118 0 53.402 43.315 96.819 96.819 96.819 27.802 0 52.992-11.776 70.656-30.618 22.067 4.403 42.752 12.39 61.44 23.501-7.219-22.579-22.528-41.574-42.547-53.606 19.61 2.406 38.246 7.578 55.603 15.309-12.954-19.405-29.389-36.506-48.282-50.125z" />
+</font></defs></svg>

themes/cocoa-eh/static/js/lg-fullscreen.min.js

@@ -0,0 +1,7 @@
+/**!
+ * lg-fullscreen.js | 1.0.0 | October 5th 2016
+ * http://sachinchoolur.github.io/lg-fullscreen.js
+ * Copyright (c) 2016 Sachin N; 
+ * @license GPLv3 
+ */
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;n="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,n.LgFullscreen=e()}}(function(){var e,n,l;return function e(n,l,t){function r(o,c){if(!l[o]){if(!n[o]){var s="function"==typeof require&&require;if(!c&&s)return s(o,!0);if(u)return u(o,!0);var i=new Error("Cannot find module '"+o+"'");throw i.code="MODULE_NOT_FOUND",i}var f=l[o]={exports:{}};n[o][0].call(f.exports,function(e){var l=n[o][1][e];return r(l?l:e)},f,f.exports,e,n,l,t)}return l[o].exports}for(var u="function"==typeof require&&require,o=0;o<t.length;o++)r(t[o]);return r}({1:[function(n,l,t){!function(n,l){if("function"==typeof e&&e.amd)e([],l);else if("undefined"!=typeof t)l();else{var r={exports:{}};l(),n.lgFullscreen=r.exports}}(this,function(){"use strict";var e=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var l=arguments[n];for(var t in l)Object.prototype.hasOwnProperty.call(l,t)&&(e[t]=l[t])}return e},n={fullScreen:!0},l=function l(t){return this.el=t,this.core=window.lgData[this.el.getAttribute("lg-uid")],this.core.s=e({},n,this.core.s),this.init(),this};l.prototype.init=function(){var e="";if(this.core.s.fullScreen){if(!(document.fullscreenEnabled||document.webkitFullscreenEnabled||document.mozFullScreenEnabled||document.msFullscreenEnabled))return;e='<span class="lg-fullscreen lg-icon"></span>',this.core.outer.querySelector(".lg-toolbar").insertAdjacentHTML("beforeend",e),this.fullScreen()}},l.prototype.requestFullscreen=function(){var e=document.documentElement;e.requestFullscreen?e.requestFullscreen():e.msRequestFullscreen?e.msRequestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen&&e.webkitRequestFullscreen()},l.prototype.exitFullscreen=function(){document.exitFullscreen?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen()},l.prototype.fullScreen=function(){var e=this;utils.on(document,"fullscreenchange.lgfullscreen webkitfullscreenchange.lgfullscreen mozfullscreenchange.lgfullscreen MSFullscreenChange.lgfullscreen",function(){utils.hasClass(e.core.outer,"lg-fullscreen-on")?utils.removeClass(e.core.outer,"lg-fullscreen-on"):utils.addClass(e.core.outer,"lg-fullscreen-on")}),utils.on(this.core.outer.querySelector(".lg-fullscreen"),"click.lg",function(){document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement?e.exitFullscreen():e.requestFullscreen()})},l.prototype.destroy=function(){this.exitFullscreen(),utils.off(document,".lgfullscreen")},window.lgModules.fullscreen=l})},{}]},{},[1])(1)});