Merge branch 'release/1.4.0'

CHANGELOG.md

@@ -1,5 +1,15 @@
+# v1.4.0
+## 07/14/2016
+
+1. [](#new)
+    * Allow to have a custom initialization javascript file
+    * Allow AMD module output for RequireJS
+1. [](#improved)
+    * Moved initialization to its own javascript file instead of inlined in the PHP code
+    * Fixed closeOnEsc
+
 # v1.3.1
-## 09/23/2016
+## 05/23/2016
 
 1. [](#improved)
     * Use common language strings

README.md

@@ -42,6 +42,7 @@ closeSpeed: 250               # close speed in ms
 closeOnClick: background      # background|anywhere|false
 closeOnEsc: true              # true|false on hitting Esc key
 root: body                    # where to append featherlights
+initTemplate: plugin://featherlight/js/featherlight.init.js
 ```
 
 You can also override any default setings from the page headers:
@@ -64,7 +65,7 @@ You can also enable globally in the `yaml`, but disable featherlighting for a pa
     featherlight:
         active: false
     ---
-    
+
 ## Implementing a lightbox with Featherlight
 
 To implement a lightbox using Featherlight in Grav, you must output the proper HTML output.  Luckily Grav already takes care of this for you if you are using Grav media files.
@@ -83,6 +84,58 @@ In Twig this could look like:
 
 More details can be found in the [Grav documentation for Media functionality](http://learn.getgrav.org/content/media).
 
+## Adding captions to the lightbox
+
+Image captions within the lightbox do not come out of the box with featherlight. But as the author described in his [wiki](https://github.com/noelboss/featherlight/wiki/Gallery:-showing-a-caption) it's quite easy to add.
+
+Per default we use a this script when initializing the plugin: [js/featherlight.init.js](js/featherlight.init.js). You can copy it to the "user" folder, change the initTemplate setting to `user://js/featherlight.init.js` and add a afterContent callback like this:
+
+    $(document).ready(function(){
+        $('a[rel="lightbox"]').{pluginName}({
+            openSpeed: {openSpeed},
+            closeSpeed: {closeSpeed},
+            closeOnClick: '{closeOnClick}',
+            closeOnEsc: '{closeOnEsc}',
+            root: '{root}',
+            afterContent: function() {
+                var caption = this.$currentTarget.find('img').attr('alt');
+                this.$instance.find('.caption').remove();
+                $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
+            }
+        });
+    });
+
+The placeholders `{pluginName}`, `{openSpeed}`, `{closeSpeed}` and `{root}` will be replaced when processing this file.
+
+## Using AMD modules with RequireJS
+
+Must update to `v1.4.1`. When you select `RequireJS` from the config, this plugin will inlineJS an AMD module called `featherlight` that you can use with RequireJS. If you call this module directly, it will work, however if you decide to disable this plugin RequireJS will fail. As such, if you include the module below it will see if `featherlight` exists and include it if it does.
+
+```
+define(['jquery'], function($){
+  var Lightbox = {
+    Init : function() {
+    if (require.specified('featherlight')) {
+      require( [ 'featherlight' ], function (Featherlight) {
+        Featherlight.Init();
+      });
+      }
+    }
+  };
+  return Lightbox;
+});
+```
+
+Also set your main.js file to include this line:
+
+```
+paths: {
+    ...
+    plugin: '/user/plugins',
+    ...
+},
+```
+
 # Updating
 
 As development for the Featherlight plugin continues, new versions may become available that add additional features and functionality, improve compatibility with newer Grav releases, and generally provide a better user experience. Updating Featherlight is easy, and can be done through Grav's GPM system, as well as manually.

blueprints.yaml

@@ -1,5 +1,5 @@
 name: Featherlight
-version: 1.3.1
+version: 1.4.0
 description: "Featherlight is a simple [Grav](http://github.com/getgrav/grav) plugin that adds **lightbox** functionality via the jQuery plugin [Featherlight.js](http://noelboss.github.io/featherlight/)."
 icon: file-photo-o
 author:
@@ -37,6 +37,18 @@ form:
         type: bool
       help: Activate on all pages. You can override this setting on a page basis
 
+    requirejs:
+      type: toggle
+      label: RequireJS
+      hightlight: 1
+      default: 0
+      options:
+        1: PLUGIN_ADMIN.ENABLED
+        0: PLUGIN_ADMIN.DISABLED
+      validate:
+        type: bool
+      help: Outputs a AMD module to use with RequireJS
+
     gallery:
       type: toggle
       label: Gallery
@@ -91,3 +103,11 @@ form:
       label: Root
       default: 'body'
       help: Where to append featherlights
+
+    initTemplate:
+      type: text
+      size: medium
+      label: Init script
+      default: 'plugin://featherlight/js/featherlight.init.js'
+      placeholder: 'plugin://featherlight/js/featherlight.init.js'
+      help: Path to template file for JS init script

featherlight.php

@@ -70,36 +70,61 @@ public function onTwigSiteVariables()
     {
         $config = $this->config->get('plugins.featherlight');
 
-        if ($config['gallery']) {
-            $init = "$(document).ready(function(){
-                $('a[rel=\"lightbox\"]').featherlightGallery({
-                    openSpeed: {$config['openSpeed']},
-                    closeSpeed: {$config['closeSpeed']},
-                    closeOnClick: '{$config['closeOnClick']}',
-                    root: '{$config['root']}'
-                });
-             });";
-             $this->grav['assets']
+        if ($config['requirejs']) {
+            $init = "define(\"featherlight\",['jquery', 'plugin/featherlight/js/featherlight.min' ], function($){
+                var Lightbox = {
+                  Init : function() {
+                    $('a[rel=\"lightbox\"]').featherlight({
+                      openSpeed: {$config['openSpeed']},
+                      closeSpeed: {$config['closeSpeed']},
+                      closeOnClick: '{$config['closeOnClick']}',
+                      closeOnEsc:   '{$config['closeOnEsc']}',
+                      root: '{$config['root']}'
+                    });
+                  }
+                };
+                return Lightbox;
+            });";
+            $this->grav['assets']
+                ->addCss('plugin://featherlight/css/featherlight.min.css')
+                ->addInlineJs($init);
+        } elseif ($config['gallery']) {
+            $init = $this->getInitJs($config);
+            $this->grav['assets']
                  ->addCss('plugin://featherlight/css/featherlight.min.css')
                  ->addCss('plugin://featherlight/css/featherlight.gallery.min.css')
                  ->add('jquery', 101)
                  ->addJs('plugin://featherlight/js/featherlight.min.js')
                  ->addJs('plugin://featherlight/js/featherlight.gallery.min.js')
                  ->addInlineJs($init);
         } else {
-            $init = "$(document).ready(function() {
-                        $('a[rel=\"lightbox\"]').featherlight({
-                            openSpeed: {$config['openSpeed']},
-                            closeSpeed: {$config['closeSpeed']},
-                            closeOnClick: '{$config['closeOnClick']}',
-                            root: '{$config['root']}'
-                        });
-                     });";
+            $init = $this->getInitJs($config);
             $this->grav['assets']
                 ->addCss('plugin://featherlight/css/featherlight.min.css')
                 ->add('jquery', 101)
                 ->addJs('plugin://featherlight/js/featherlight.min.js')
                 ->addInlineJs($init);
         }
     }
+
+    protected function getInitJs($config) {
+        $asset = $this->grav['locator']->findResource($config['initTemplate'], false);
+
+        $init = file_get_contents(ROOT_DIR . $asset);
+
+        $init = str_replace(
+            array('{pluginName}', '{openSpeed}', '{closeSpeed}', '{closeOnClick}', '{closeOnEsc}', '{root}'),
+            array(
+                $config['gallery'] ? 'featherlightGallery' : 'featherlight',
+                $config['openSpeed'],
+                $config['closeSpeed'],
+                $config['closeOnClick'],
+                $config['closeOnEsc'],
+                $config['root']
+            ),
+            $init
+        );
+
+        return $init;
+    }
 }

featherlight.yaml

@@ -1,8 +1,10 @@
 enabled: true                 # global enable/disable the entire plugin
 active: true                  # if the plugin is active and JS/CSS should be loaded
 gallery: false                # enable/disable the gallery extension
+requirejs: false              # output to an AMD module
 openSpeed: 250                # open speed in ms
 closeSpeed: 250               # close speed in ms
 closeOnClick: background      # background|anywhere|false
 closeOnEsc: true              # true|false on hitting Esc key
 root: body                    # where to append featherlights
+initTemplate: plugin://featherlight/js/featherlight.init.js

js/featherlight.init.js

@@ -0,0 +1,9 @@
+$(document).ready(function(){
+    $('a[rel="lightbox"]').{pluginName}({
+        openSpeed: {openSpeed},
+        closeSpeed: {closeSpeed},
+        closeOnClick: '{closeOnClick}',
+        closeOnEsc: '{closeOnEsc}',
+        root: '{root}'
+    });
+});