From a63221892928b68c0feda2272ad5282d61aa2f4e Mon Sep 17 00:00:00 2001
From: yarik <yarik.nechyporuk@gmail.com>
Date: Mon, 12 Dec 2016 18:40:51 +0200
Subject: [PATCH] Lazyload

---
 assets/LazyAsset.php                         | 21 +++++++++++++++++++++
 assets/LazyLoadAsset.php                     | 21 +++++++++++++++++++++
 components/artboximage/ArtboxImageHelper.php | 15 +++++++++++++--
 resources/artbox-lazy.js                     | 42 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 97 insertions(+), 2 deletions(-)
 create mode 100755 assets/LazyAsset.php
 create mode 100755 assets/LazyLoadAsset.php
 create mode 100644 resources/artbox-lazy.js

diff --git a/assets/LazyAsset.php b/assets/LazyAsset.php
new file mode 100755
index 0000000..d93eb75
--- /dev/null
+++ b/assets/LazyAsset.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace artweb\artbox\assets;
+
+use yii\web\AssetBundle;
+
+/**
+ * Main frontend application asset bundle.
+ */
+class LazyAsset extends AssetBundle
+{
+    public $sourcePath = '@artweb/artbox/resources';
+    public $js = [
+        'artbox-lazy.js',
+    ];
+
+    public $depends = [
+        'artweb\artbox\assets\LazyLoadAsset',
+    ];
+
+}
diff --git a/assets/LazyLoadAsset.php b/assets/LazyLoadAsset.php
new file mode 100755
index 0000000..4e35445
--- /dev/null
+++ b/assets/LazyLoadAsset.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace artweb\artbox\assets;
+
+use yii\web\AssetBundle;
+
+/**
+ * Main frontend application asset bundle.
+ */
+class LazyLoadAsset extends AssetBundle
+{
+    public $sourcePath = '@bower/jquery.lazyload';
+    public $js = [
+        'jquery.lazyload.js',
+    ];
+
+    public $depends = [
+        'yii\web\JqueryAsset',
+    ];
+
+}
diff --git a/components/artboximage/ArtboxImageHelper.php b/components/artboximage/ArtboxImageHelper.php
index dd8d6fb..6f27b89 100755
--- a/components/artboximage/ArtboxImageHelper.php
+++ b/components/artboximage/ArtboxImageHelper.php
@@ -53,14 +53,25 @@
          * @param array|string $preset
          * @param array        $imgOptions
          * @param int          $quality
+         * @param bool         $lazy
          *
          * @return string
          * @see Html::img()
          */
-        public static function getImage($file, $preset, $imgOptions = [], $quality = 65)
+        public static function getImage($file, $preset, $imgOptions = [], $quality = 65, $lazy = false)
         {
             $preset_alias = is_array($preset) ? array_keys($preset)[ 0 ] : null;
-            return Html::img(self::getImageSrc($file, $preset, $preset_alias, $quality), $imgOptions);
+            $src = self::getImageSrc($file, $preset, $preset_alias, $quality);
+            if($lazy) {
+                if(isset($imgOptions['class'])) {
+                    $imgOptions['class'] = $imgOptions['class'].' artbox-lazy';
+                } else {
+                    $imgOptions['class'] = 'artbox-lazy';
+                }
+                return Html::img('');
+            } else {
+                return Html::img($src, $imgOptions);
+            }
         }
     
         /**
diff --git a/resources/artbox-lazy.js b/resources/artbox-lazy.js
new file mode 100644
index 0000000..6643e5d
--- /dev/null
+++ b/resources/artbox-lazy.js
@@ -0,0 +1,42 @@
+$(function() {
+    $('img.artbox-lazy').lazyload();
+    lazyThreshold();
+    lazyEvent();
+    lazyEffect();
+});
+function lazyThreshold() {
+    $.each($('img.artbox-lazy-threshold'), function(index, value) {
+        var threshold = 200;
+        var attribute = $(value).attr('data-threshold');
+        if(attribute) {
+            threshold = attribute;
+        }
+        this.lazyload({
+            threshold: threshold
+        });
+    });
+}
+function lazyEvent() {
+    $.each($('img.artbox-lazy-event'), function(index, value) {
+        var event = 'click';
+        var attribute = $(value).attr('data-event');
+        if(attribute) {
+            event = attribute;
+        }
+        this.lazyload({
+            event: event
+        });
+    });
+}
+function lazyEffect() {
+    $.each($('img.artbox-lazy-effect'), function(index, value) {
+        var effect = 'fadeIn';
+        var attribute = $(value).attr('data-effect');
+        if(attribute) {
+            effect = attribute;
+        }
+        this.lazyload({
+            effect: effect
+        });
+    });
+}
\ No newline at end of file
--
libgit2 0.21.4