diff options
Diffstat (limited to 'www/lib/ion-image-lazy-load')
| -rw-r--r-- | www/lib/ion-image-lazy-load/.bower.json | 36 | ||||
| -rw-r--r-- | www/lib/ion-image-lazy-load/LICENSE | 21 | ||||
| -rw-r--r-- | www/lib/ion-image-lazy-load/README.md | 80 | ||||
| -rw-r--r-- | www/lib/ion-image-lazy-load/bower.json | 28 | ||||
| -rw-r--r-- | www/lib/ion-image-lazy-load/ionic-image-lazy-load.js | 124 |
5 files changed, 0 insertions, 289 deletions
diff --git a/www/lib/ion-image-lazy-load/.bower.json b/www/lib/ion-image-lazy-load/.bower.json deleted file mode 100644 index c7fbe652..00000000 --- a/www/lib/ion-image-lazy-load/.bower.json +++ /dev/null @@ -1,36 +0,0 @@ -{ - "name": "ionic-image-lazy-load", - "main": "ionic-image-lazy-load.js", - "homepage": "https://github.com/paveisistemas/ionic-image-lazy-load", - "authors": [ - "Vincius Zilli Pavei <vinicius@paveisistemas.com.br>", - "Michel Vidailhet <mvidailhet@mncc.fr>" - ], - "description": "Directive to Ionic Framework that only loads an image when it is seen by the user.", - "moduleType": [ - "amd" - ], - "keywords": [ - "ionic", - "lazy", - "load", - "image" - ], - "license": "MIT", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ], - "_release": "fd1812ec1c", - "_resolution": { - "type": "branch", - "branch": "master", - "commit": "fd1812ec1cec3d3e44ef2e9f823104ceed0b196b" - }, - "_source": "git://github.com/paveisistemas/ionic-image-lazy-load.git", - "_target": "*", - "_originalSource": "ion-image-lazy-load" -} diff --git a/www/lib/ion-image-lazy-load/LICENSE b/www/lib/ion-image-lazy-load/LICENSE deleted file mode 100644 index b4d5a95e..00000000 --- a/www/lib/ion-image-lazy-load/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2015 Pavei Sistemas - -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. diff --git a/www/lib/ion-image-lazy-load/README.md b/www/lib/ion-image-lazy-load/README.md deleted file mode 100644 index f3d823f9..00000000 --- a/www/lib/ion-image-lazy-load/README.md +++ /dev/null @@ -1,80 +0,0 @@ -ionic-image-lazy-load -===================== - - -## Demo -http://codepen.io/mvidailhet/pen/yNOGzY -http://codepen.io/pavei/pen/oFpCy - -## Quick Start - -Install using bower - -```sh -bower install ion-image-lazy-load --save -``` - -or - - -Download the file JS *ionic-image-lazy-load.js*, save on your project and load it on your *index.html*. - - -```html -<script src="path/to/ionic-image-lazy-load.js"></script> -``` - -Load into your module: - -```javascript -angular.module('yourapp', - ['ionic', 'ionicLazyLoad']) -``` - -Set the `lazy-scroll` directive on your `<ion-content>` tag, that will listen to the scroll event: - -``` javascript -<ion-content lazy-scroll> -``` - -And set the `img-lazy-src` directive on the image attribute instead of `src`: - -```javascript - <img image-lazy-src="{{item.thumbnail}}"> -``` - -You can also use it as a background-image for an element by setting the `image-lazy-background-image` paramameter to true: -``` javascript -<div image-lazy-src="{{item.thumbnail}}" image-lazy-background-image="true"></div> -``` - -You can also set an option to auto call `$ionicScrollDelegate.resize()` when the image `load` (default value is `false`): - -```javascript - <img image-lazy-src="{{item.thumbnail}}" lazy-scroll-resize="true"> -``` - -To show a ionic spinner while the image is loading, just specify a ionic spinner type (list is here: http://ionicframework.com/docs/api/directive/ionSpinner/): - -```javascript - <img image-lazy-src="{{item.thumbnail}}" image-lazy-loader="lines"> -``` -Note: the styling of the loader position is up to you. The directive adds this html: - -```html -<div class="image-loader-container"> - <ion-spinner class="image-loader" icon="#spinnerStyle#"></ion-spinner> -</div> -``` - -You can set a distance from the bottom or right side of the screen where the image will start loading. -This will allow to start loading the image 100px below the bottom of the screen: - -``` javascript - <img image-lazy-src="{{item.thumbnail}}" image-lazy-distance-from-bottom-to-load="100"> -``` - -This will allow to start loading the image 100px before the right side of the screen: -```javascript - <img image-lazy-src="{{item.thumbnail}}" image-lazy-distance-from-right-to-load="100"> -``` diff --git a/www/lib/ion-image-lazy-load/bower.json b/www/lib/ion-image-lazy-load/bower.json deleted file mode 100644 index f30b1128..00000000 --- a/www/lib/ion-image-lazy-load/bower.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "name": "ionic-image-lazy-load", - "main": "ionic-image-lazy-load.js", - "version": "1.0.0", - "homepage": "https://github.com/paveisistemas/ionic-image-lazy-load", - "authors": [ - "Vincius Zilli Pavei <vinicius@paveisistemas.com.br>", - "Michel Vidailhet <mvidailhet@mncc.fr>" - ], - "description": "Directive to Ionic Framework that only loads an image when it is seen by the user.", - "moduleType": [ - "amd" - ], - "keywords": [ - "ionic", - "lazy", - "load", - "image" - ], - "license": "MIT", - "ignore": [ - "**/.*", - "node_modules", - "bower_components", - "test", - "tests" - ] -} diff --git a/www/lib/ion-image-lazy-load/ionic-image-lazy-load.js b/www/lib/ion-image-lazy-load/ionic-image-lazy-load.js deleted file mode 100644 index da9ff94d..00000000 --- a/www/lib/ion-image-lazy-load/ionic-image-lazy-load.js +++ /dev/null @@ -1,124 +0,0 @@ -/** - * Created by PAVEI on 30/09/2014. - * Updated by Ross Martin on 12/05/2014 - * Updated by Davide Pastore on 04/14/2015 - * Updated by Michel Vidailhet on 05/12/2015 - */ - -angular.module('ionicLazyLoad', []); - -angular.module('ionicLazyLoad') - -.directive('lazyScroll', ['$rootScope', '$timeout', - function($rootScope, $timeout) { - return { - restrict: 'A', - link: function ($scope, $element) { - - var scrollTimeoutId = 0; - - $scope.invoke = function () { - $rootScope.$broadcast('lazyScrollEvent'); - }; - - $element.bind('scroll', function () { - - $timeout.cancel(scrollTimeoutId); - - // wait and then invoke listeners (simulates stop event) - scrollTimeoutId = $timeout($scope.invoke, 0); - - }); - - - } - }; -}]) - -.directive('imageLazySrc', ['$document', '$timeout', '$ionicScrollDelegate', '$compile', - function ($document, $timeout, $ionicScrollDelegate, $compile) { - return { - restrict: 'A', - scope: { - lazyScrollResize: "@lazyScrollResize", - imageLazyBackgroundImage: "@imageLazyBackgroundImage" - }, - link: function ($scope, $element, $attributes) { - if (!$attributes.imageLazyDistanceFromBottomToLoad) { - $attributes.imageLazyDistanceFromBottomToLoad = 0; - } - if (!$attributes.imageLazyDistanceFromRightToLoad) { - $attributes.imageLazyDistanceFromRightToLoad = 0; - } - - if ($attributes.imageLazyLoader) { - var loader = $compile('<div class="image-loader-container"><ion-spinner class="image-loader" icon="' + $attributes.imageLazyLoader + '"></ion-spinner></div>')($scope); - $element.after(loader); - } - - var deregistration = $scope.$on('lazyScrollEvent', function () { - //console.log('scroll'); - if (isInView()) { - loadImage(); - deregistration(); - } - } - ); - - function loadImage() { - //Bind "load" event - $element.bind("load", function (e) { - if ($attributes.imageLazyLoader) { - loader.remove(); - } - if ($scope.lazyScrollResize == "true") { - //Call the resize to recalculate the size of the screen - $ionicScrollDelegate.resize(); - } - }); - - if ($scope.imageLazyBackgroundImage == "true") { - var bgImg = new Image(); - bgImg.onload = function () { - if ($attributes.imageLazyLoader) { - loader.remove(); - } - $element[0].style.backgroundImage = 'url(' + $attributes.imageLazySrc + ')'; // set style attribute on element (it will load image) - if ($scope.lazyScrollResize == "true") { - //Call the resize to recalculate the size of the screen - $ionicScrollDelegate.resize(); - } - }; - bgImg.src = $attributes.imageLazySrc; - } else { - $element[0].src = $attributes.imageLazySrc; // set src attribute on element (it will load image) - } - } - - function isInView() { - var clientHeight = $document[0].documentElement.clientHeight; - var clientWidth = $document[0].documentElement.clientWidth; - var imageRect = $element[0].getBoundingClientRect(); - return (imageRect.top >= 0 && imageRect.top <= clientHeight + parseInt($attributes.imageLazyDistanceFromBottomToLoad)) - && (imageRect.left >= 0 && imageRect.left <= clientWidth + parseInt($attributes.imageLazyDistanceFromRightToLoad)); - } - - // bind listener - // listenerRemover = scrollAndResizeListener.bindListener(isInView); - - // unbind event listeners if element was destroyed - // it happens when you change view, etc - $element.on('$destroy', function () { - deregistration(); - }); - - // explicitly call scroll listener (because, some images are in viewport already and we haven't scrolled yet) - $timeout(function () { - if (isInView()) { - loadImage(); - deregistration(); - } - }, 500); - } - }; - }]); |