This repository has been archived by the owner on Jul 3, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Moved jail from submodule to just including an export
- Loading branch information
1 parent
5493fe9
commit 0112445
Showing
46 changed files
with
2,500 additions
and
0 deletions.
There are no files selected for viewing
48 changes: 48 additions & 0 deletions
48
system/expressionengine/third_party/easy_jail/vendors/jail/CHANGELOG.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| JAIL 1.0.0 (14/10/2011) | ||
| ----------------------- - | ||
| - Important fix inside _isVisibleInContainer() aroudn checking if the parent of the image exists | ||
| - Grunt.js support | ||
| - Switched from YUITest to Jasmine | ||
| - AMD support improvements (see example 14-15) | ||
| - Travic CI support | ||
|
|
||
| JAIL 0.9.9 (30/12/2011) | ||
| ----------------------- - | ||
| - fixed issue with callback | ||
| - fixed issue with the use of '$' (AMD case) | ||
| - 'scroll' event managed in a better way | ||
|
|
||
| JAIL 0.9.8 (29/12/2011) | ||
| ----------------------- - | ||
| - 'data-src' attributes substitutes 'data-href' | ||
| - 'load' will replace 'load+scroll' ('+scroll' won't exist anymore) | ||
| - 'selector' attribute renamed 'triggerElement' | ||
| - 'loadHiddenImages' attribute replaces 'ignoreHiddenImages' | ||
| - 'package.json' file added | ||
| - Added support for AMD spec | ||
| - Added 'post-receive hook' to the plugins.jquery.com site (not functional yet) | ||
| - Added checks on the 'overflow' CSS property | ||
| - Removed "asynchImageLoader" function | ||
| - Code restructured in meaningful public and private functions | ||
| - Removed GPL version | ||
| - Added example using 'require.js' | ||
| - Fixed issue #17, #20, #21, #22 | ||
| - Better way of handling unbinding events | ||
|
|
||
| - JAIL 0.9.7 (12/10/2011) - Issue 16 fixed, "ignoreHiddenImages" parameter added and "container" parameter removed. | ||
|
|
||
| - JAIL 0.9.5 (3/08/2011) - Issues around images visible inside a container or inside an iframe been fixed. JS filename changed into jail.js. | ||
|
|
||
| - JAIL 0.9 (13/05/2011) - callback fixes + support for callbackAfterEachImage parameter | ||
|
|
||
| - JAIL 0.8 (03/04/2011) - jail() function, fixed critical issue on v0.7, resizing function, scrolling fixes | ||
|
|
||
| - JAIL 0.7 (19/02/2011) - Added "offset" configuration | ||
|
|
||
| - JAIL 0.6 (05/02/2011) - Fixed a critical issue on "effect" configuration | ||
|
|
||
| - JAIL 0.5 (27/01/2011) - 'Delay' configuration removed, critical fix on unbind method, refactoring to pass JSLint without warnings. | ||
|
|
||
| - JAIL 0.4 (21/01/2011) - Added ability to detect scroll on containing elements instead of just `window`. Plus, lots of refactoring. (Contributor : Derek Lindahl - dlindahl) | ||
|
|
||
| - JAIL 0.2 (20/01/2011) - HTML5 data attribute `data-href` used instead of `name` attribute |
7 changes: 7 additions & 0 deletions
7
system/expressionengine/third_party/easy_jail/vendors/jail/MIT-LICENSE.txt
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| Copyright (c) 2011-2012 Sebastiano Armeli-Battana (http://www.sebastianoarmelibattana.com) | ||
|
|
||
| Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: | ||
|
|
||
| The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. | ||
|
|
||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. |
192 changes: 192 additions & 0 deletions
192
system/expressionengine/third_party/easy_jail/vendors/jail/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,192 @@ | ||
| # Jquery Asynchronous Image Loader (JAIL) | ||
|
|
||
| JAIL is a jQuery plugin that lazy load images making your page load faster. | ||
|
|
||
| [](http://travis-ci.org/sebarmeli/JAIL) | ||
|
|
||
| Images are downloaded when they are visible or when they become visible inside the viewport (area you see in your browser). Images can be loaded after an event is triggered (such as `click`, `mouseover`, and `scroll`) or after a specified delay. It's advisable to call jail() after the DOM has been constructed (document ready). | ||
|
|
||
| ## Getting Started | ||
|
|
||
| First of all, this plugin requires you to make some HTML changes. The `data-src` attribute (HTML5 data attribute) should contain the location of the image, instead the `src` attribute should contain a placeholder such as a really tiny image (E.g. 1 px x 1 px). Also, I would suggest to add a `noscript` block so that in case the user doesn't have Javascript enabled, the images will be displayed (progressive enhancement). | ||
|
|
||
| ```html | ||
| <img class="lazy" src="/img/blank.gif" data-src="/img/image1.jpg"/> | ||
| <noscript> | ||
| <img src="/img/image1.jpg"/> | ||
| <noscript> | ||
| ``` | ||
|
|
||
| In a basic scenario, you just need to import `jquery`, `jail.js` and call the jail() function on the images you want to lazy load. | ||
|
|
||
| ```html | ||
| <script src="/lib/jquery.js"></script> | ||
| <script src="/src/jail.js"></script> | ||
| <script> | ||
| $(function(){ | ||
| $('img.lazy').jail(); | ||
| }); | ||
| </script> | ||
| ``` | ||
|
|
||
| The images in the viewport are loaded straight away after the DOM is ready. As soon other images become visible in the viewport (for instance after the user scrolls down), they are lazy loaded. | ||
|
|
||
| ## Config | ||
| You can add additional configuration options when you initially call jail(): | ||
|
|
||
| - `id` : unique identifier for this jail instance. - Default: `jail` | ||
| - `timeout` : number of msec after that the images will be loaded - Default: `10` | ||
| - `effect` : any jQuery effect that makes the images display (e.g. "fadeIn") - Default: `NULL` | ||
|
|
||
| **NOTE:** If you are loading a large number of images, it is best NOT to use this setting. | ||
|
|
||
| - `speed` : string or number determining how long the animation will run - Default: 400 | ||
| - `triggerElement` : selector that triggers the images to be loaded - Default: `NULL` | ||
| - `event` : event : event that triggers the image to be loaded. You can choose among `load`, `click`, `mouseover`, 'scroll', etc. Default: `load` | ||
| - `callback` : function that will be called after all the images are loaded - Default: "" | ||
| - `callbackAfterEachImage` : function that will be called after each image is loaded - Default: "" | ||
| - `placeholder` : location of an image (such a loader) you want to display while waiting for the images to be loaded - Default: "" | ||
| - `offset` : an offset of "500" would cause any images that are less than 500px below the bottom of the window or 500px above the top of the window to load. - Default: 0 | ||
| - `loadHiddenImages` : boolean to load hidden images - Default: false (so hidden images are not loaded) | ||
|
|
||
| ## How to invoke jail() | ||
|
|
||
| Here are some examples on how to invoke jail() in order to have a better understanding of how the plugin works | ||
|
|
||
| ### Load images after clicking on anchor with id 'link'. The images will fade in with speed 500. Placeholder specified. | ||
|
|
||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| triggerElement:'a#link', | ||
| event: 'click', | ||
| effect: 'fadeIn', | ||
| speed : 500, | ||
| placeholder : 'img/loader.gif', | ||
| callback : SA.setActive | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Initially load the visible images within `#my_container`. Then, as you scroll inside `#my_container`, images become visible | ||
|
|
||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| triggerElement:'#my_container', | ||
| event: 'scroll' | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### After 1 second the hidden images are loaded | ||
|
|
||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| timeout : 1000 | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Load images after mouse-overing on the placeholder for the image | ||
|
|
||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| event: 'mouseover', | ||
| placeholder : 'img/loader.gif' | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Load the images that are up to 300px over/below theviewport | ||
|
|
||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| offset : 300 | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Alert saying "all the images are loaded" is called after all the images are loaded, alert saying "one image is loaded" after one image is loaded | ||
|
|
||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| callback : (function(){alert("All the images are loaded");}), | ||
| callbackAfterEachImage : function() {alert("one image is loaded");} | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Ignore hidden images to be loaded (images with or under a "display:none" or with hidden "visibility" or not visible inside a "overflow:hidden" element) | ||
|
|
||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| loadHiddenImages : true | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ### Create multiple jail instances for various image collections. Required when asynchronously rendering templates that contain images that should also be jailed. | ||
|
|
||
| ```javascript | ||
| $(function(){ | ||
| $('img.lazy').jail({id: 'page'}); | ||
| $('#template').load('/serverside.html', function(){ | ||
| $('#template img.lazy').jail({id: 'template'}); | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| ## Demo | ||
|
|
||
| You can view a few demo examples usign JAIL [here](https://github.com/sebarmeli/JAIL/tree/master/demo) | ||
|
|
||
| ## AMD support | ||
|
|
||
| Plugin supports AMD through define() method. If you use RequireJS (version > 2.0), you can require the plugin as follows: | ||
|
|
||
| ```javascript | ||
| requirejs.config({ | ||
| baseUrl: 'lib', | ||
| paths: { | ||
| app: 'src' | ||
| }, | ||
| shim: { | ||
| 'app/jail': ['jquery'] | ||
| } | ||
| }); | ||
|
|
||
| require(["jquery", "app/jail"], function() { | ||
| $(function(){ | ||
| $('img.lazy').jail(); | ||
| }); | ||
| }); | ||
| ``` | ||
|
|
||
| For more information, you view example 14 and example 15 from the [demo folder](https://github.com/sebarmeli/JAIL/tree/master/demo) | ||
|
|
||
| ## Testing / Building the plugin | ||
|
|
||
| After getting node and npm, install grunt and grunt-jasmine-runner. | ||
|
|
||
| ```npm install grunt``` | ||
| ```npm install grunt-jasmine-runner``` | ||
|
|
||
| You can run Jasmine specs through phantomjs with : | ||
|
|
||
| ```grunt jasmine``` | ||
|
|
||
| If you don't have phantomjs, please download it from [here](http://phantomjs.org/) | ||
|
|
||
| You can run JSHint, Jasmine specs and minification tool simply launching: ```grunt``` | ||
|
|
||
| ## Licence | ||
|
|
||
| Copyright (c) 2011-2012 Sebastiano Armeli-Battana | ||
| Licensed under the MIT license. | ||
| (https://github.com/sebarmeli/JAIL/blob/master/MIT-LICENSE.txt) |
2 changes: 2 additions & 0 deletions
2
system/expressionengine/third_party/easy_jail/vendors/jail/demo/css/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| img.lazy {display:none;} | ||
| div.content div.container {background-color:#333; border:10px solid #eee; float:left; width:100px;height:100px;} |
57 changes: 57 additions & 0 deletions
57
...ressionengine/third_party/easy_jail/vendors/jail/demo/example10_scrollingInContainer.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | ||
| <meta charset="utf-8"> | ||
| <title>jQuery Asynch Image Loader - Example 10 - Images loaded after scrolling inside container</title> | ||
| <script type="text/javascript" src="../lib/jquery.js"></script> | ||
| <script type="text/javascript" src="../src/jail.js"></script> | ||
| <script type="text/javascript"> | ||
| $(document).ready(function(){ | ||
| $('img.lazy').jail({ | ||
| triggerElement : 'div.content', | ||
| event : 'scroll', | ||
| timeout : 100 | ||
| }); | ||
| }); | ||
| </script> | ||
| <style> | ||
| .content{float:left; height:500px; overflow:auto;border:2px solid #000;} | ||
| .content DIV {float:left; height:500px;} | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="wrapper"> | ||
| <div class="content"> | ||
| <p> Images loaded after scolling inside container</p> | ||
| <div> | ||
| <img class="lazy" data-src="img/sample1.jpg" src="img/blank.gif" width="420" height="320"/> | ||
| <noscript><img class="nolazy" src="img/sample1.jpg" width="420" height="320"/></noscript> | ||
| </div> | ||
| <div> | ||
| <img class="lazy" data-src="img/sample2.jpg" src="img/blank.gif" width="420" height="320"/> | ||
| <noscript><img class="nolazy" src="img/sample2.jpg" width="420" height="320"/></noscript> | ||
| </div> | ||
| <div> | ||
| <img class="lazy" data-src="img/sample3.jpg" src="img/blank.gif" width="420" height="320"/> | ||
| <noscript><img class="nolazy" src="img/sample3.jpg" width="420" height="320"/></noscript> | ||
| </div> | ||
| <div> | ||
| <img class="lazy" data-src="img/sample5.jpg" src="img/blank.gif" width="420" height="320"/> | ||
| <noscript><img class="nolazy" src="img/sample5.jpg" width="420" height="320"/></noscript> | ||
| </div> | ||
| <div> | ||
| <img class="lazy" data-src="img/sample4.jpg" src="img/blank.gif" width="420" height="320"/> | ||
| <noscript><img class="nolazy" src="img/sample5.jpg" width="420" height="320"/></noscript> | ||
| </div> | ||
| <div> | ||
| <img class="lazy" data-src="img/sample6.jpg" src="img/blank.gif" width="420" height="320"/> | ||
| <noscript><img class="nolazy" src="img/sample5.jpg" width="420" height="320"/></noscript> | ||
| </div> | ||
|
|
||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
23 changes: 23 additions & 0 deletions
23
...em/expressionengine/third_party/easy_jail/vendors/jail/demo/example11_imagesInIframe.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | ||
| <meta charset="utf-8"> | ||
| <title>jQuery Asynch Image Loader - Example 11 - Images visible inside iframe are loaded</title> | ||
| <script type="text/javascript" src="../lib/jquery.js"></script> | ||
| <script type="text/javascript" src="../src/jail.js"></script> | ||
| </head> | ||
| <body> | ||
| <div id="wrapper"> | ||
| <div class="placeholder"> | ||
| Placeholder | ||
| </div> | ||
| <iframe id="images" src="iframe_11.html" width="700px" height="500px;"> | ||
| </iframe> | ||
| <script type="text/javascript"> $('#images').load(function(){$(document.getElementById("images").contentDocument.documentElement).find("html").context.children[0].children[4].innerHTML = "$(function(){$(\"img.lazy\").jail();});";}); | ||
| </script> | ||
| </div> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
60 changes: 60 additions & 0 deletions
60
.../expressionengine/third_party/easy_jail/vendors/jail/demo/example12_loadHiddenImages.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <!DOCTYPE HTML> | ||
| <html> | ||
| <head> | ||
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> | ||
| <meta charset="utf-8"> | ||
| <title>jQuery Asynch Image Loader - Example 12 - Load hidden images</title> | ||
| <script type="text/javascript" src="../lib/jquery.js"></script> | ||
| <script type="text/javascript" src="../src/jail.js"></script> | ||
| <script type="text/javascript"> | ||
| $(function(){ | ||
| $('img.lazy').jail({ | ||
| loadHiddenImages : true | ||
| }); | ||
| }); | ||
| </script> | ||
| <style> | ||
| .content{float:left; width:auto;} | ||
| .content DIV {float:left; width:100%;} | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div id="wrapper"> | ||
| <div class="content"> | ||
| <p> Image hidden, not visible or inside an element that is hidden not loaded</p> | ||
| <div style="display:none;"> | ||
| <div style="display:block;"> | ||
| <div style="display:block;"> | ||
| <img class="lazy" data-src="img/sample1.jpg" src="img/blank.gif" width="420" height="320"/> | ||
| </div > | ||
| <noscript><img class="nolazy" src="img/sample1.jpg" width="420" height="320"/></noscript> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <img class="lazy" data-src="img/sample2.jpg" src="img/blank.gif" width="420" height="320" /> | ||
| <noscript><img class="nolazy" src="img/sample2.jpg" width="420" height="320"/></noscript> | ||
| </div> | ||
| <div> | ||
| <img class="lazy" data-src="img/sample3.jpg" src="img/blank.gif" width="420" height="320" style="display:none"/> | ||
| <noscript><img class="nolazy" src="img/sample3.jpg" width="420" height="320"/></noscript> | ||
| </div> | ||
| <div> | ||
| <img class="lazy" data-src="img/sample4.jpg" src="img/blank.gif" width="420" height="320" /> | ||
| <noscript><img class="nolazy" src="img/sample4.jpg" width="420" height="320"/></noscript> | ||
| </div> | ||
| <div> | ||
| <img class="lazy" data-src="img/sample5.jpg" src="img/blank.gif" width="420" height="320" style="visibility:hidden;"/> | ||
| <noscript><img class="nolazy" src="img/sample5.jpg" width="420" height="320"/></noscript> | ||
| </div> | ||
| <div style="display:block; width:400px;height:300px; overflow:hidden; "> | ||
| <img class="lazy" data-src="img/sample6.jpg" src="img/blank.gif" width="420" height="320"/> | ||
| <noscript><img class="nolazy" src="img/sample6.jpg" width="420" height="320"/></noscript> | ||
| <img class="lazy" data-src="img/sample7.jpg" src="img/blank.gif" width="420" height="320"/> | ||
| <noscript><img class="nolazy" src="img/sample7.jpg" width="420" height="320"/></noscript> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
Oops, something went wrong.