From f3991049e98910ad8c6ebebc8739fd9a2f0f304e Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <Jeremy@iMac-de-Jeremy.local>
Date: Mon, 17 Oct 2016 15:33:45 +0200
Subject: [PATCH] Add lazyload on cards

---
 app/static/src/js/index.js                    |  2 ++
 app/static/src/js/modules/lazyload-init.js    | 20 +++++++++++++++++++
 .../src/sass/modules/boxes/_article-box.scss  |  2 ++
 app/templates/agenda/includes/event_card.html |  2 +-
 .../agenda/includes/event_linecard.html       |  4 ++--
 app/templates/includes/footer_scripts.html    |  1 +
 .../article/includes/article_card.html        | 18 ++++++++++-------
 app/templates/pages/includes/page_card.html   |  2 +-
 bower.json                                    |  3 ++-
 9 files changed, 42 insertions(+), 12 deletions(-)
 create mode 100644 app/static/src/js/modules/lazyload-init.js

diff --git a/app/static/src/js/index.js b/app/static/src/js/index.js
index 2ee143d7..a8489c10 100644
--- a/app/static/src/js/index.js
+++ b/app/static/src/js/index.js
@@ -14,6 +14,7 @@ var StickyKitInit = require('./modules/sticky-kit-init');
 var LightSliderPageInit = require('./modules/lightsliderpage-init');
 var LightSliderHomeInit = require('./modules/lightsliderhome-init');
 var LightSliderNetworkInit = require('./modules/lightslidernetwork-init');
+var LightSliderNetworkInit = require('./modules/lazyload-init');
 var HomeMenu = require('./modules/home-menu');
 var Audio = require('./modules/audio');
 
@@ -33,5 +34,6 @@ window[StickyKitInit] = new StickyKitInit();
 window[LightSliderPageInit] = new LightSliderPageInit();
 window[LightSliderHomeInit] = new LightSliderHomeInit();
 window[LightSliderNetworkInit] = new LightSliderNetworkInit();
+window[LazyLoadInit] = new LazyLoadInit();
 window[HomeMenu] = new HomeMenu();
 window[Audio] = new Audio();
diff --git a/app/static/src/js/modules/lazyload-init.js b/app/static/src/js/modules/lazyload-init.js
new file mode 100644
index 00000000..1867fde8
--- /dev/null
+++ b/app/static/src/js/modules/lazyload-init.js
@@ -0,0 +1,20 @@
+var LazyLoadInit = function() {
+
+    //
+    // Init
+    //
+    this.init();
+
+};
+
+LazyLoadInit.prototype.init = function() {
+
+    var that = this;
+
+    $("img.lazyload").lazyload({
+        effect : "fadeIn"
+    });
+
+};
+
+module.exports = LazyLoadInit;
diff --git a/app/static/src/sass/modules/boxes/_article-box.scss b/app/static/src/sass/modules/boxes/_article-box.scss
index 1b933491..e31c6fe7 100644
--- a/app/static/src/sass/modules/boxes/_article-box.scss
+++ b/app/static/src/sass/modules/boxes/_article-box.scss
@@ -27,6 +27,8 @@ $module: ".article-box";
         width: 100%;
         position: relative;
 
+        @include fluid-aspect(427 286);
+
         img {
             display: block;
             width: 100%;
diff --git a/app/templates/agenda/includes/event_card.html b/app/templates/agenda/includes/event_card.html
index 45490b3e..03a18d7c 100644
--- a/app/templates/agenda/includes/event_card.html
+++ b/app/templates/agenda/includes/event_card.html
@@ -17,7 +17,7 @@
     <figure class="article-box__image">
         {% with event.images.all|get_type:'card' as images %}
             {% if images %}
-                <img src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" data-src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 %}" class="lazyload" />
+                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" class="lazyload" />
             {% endif %}
         {% endwith %}
     </figure>
diff --git a/app/templates/agenda/includes/event_linecard.html b/app/templates/agenda/includes/event_linecard.html
index c6a5a5b6..7884195a 100644
--- a/app/templates/agenda/includes/event_linecard.html
+++ b/app/templates/agenda/includes/event_linecard.html
@@ -25,13 +25,13 @@
                 {% with event.images.all|get_type:'card' as images %}
                     {% if images %}
                         <a href="{{ event.get_absolute_url }}">
-                            <img class="event-line-box__image" src="{{ MEDIA_URL }}{% thumbnail images.0.file 203 140 %}" width="203" height="140">
+                            <img class="event-line-box__image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 203 140 %}" width="203" height="140" class="lazyload">
                         </a>
                     {% else %}
                         {% with event.parent.images.all|get_type:'card' as images %}
                             {% if images %}
                                 <a href="{{ event.get_absolute_url }}">
-                                    <img class="event-line-box__image" src="{{ MEDIA_URL }}{% thumbnail images.0.file 203 140 %}" width="203" height="140">
+                                    <img class="event-line-box__image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 203 140 %}" width="203" height="140" class="lazyload">
                                 </a>
                             {% endif %}
                         {% endwith %}
diff --git a/app/templates/includes/footer_scripts.html b/app/templates/includes/footer_scripts.html
index fce37b29..f0da2e92 100644
--- a/app/templates/includes/footer_scripts.html
+++ b/app/templates/includes/footer_scripts.html
@@ -11,6 +11,7 @@
     <script src="{% static "vendors/video.js/dist/video.js" %}"></script>
     <script src="{% static "vendors/videojs-playlist/dist/videojs-playlist.js" %}"></script>
     <script src="{% static "vendors/audiojs/audiojs/audio.js" %}"></script>
+    <script src="{% static "vendors/jquery_lazyload/jquery.lazyload.js" %}"></script>
     <script src="{% static "js/index.min.js" %}"></script>
 {% block extra_js %}{% endblock %}
 {% editable_loader %}
diff --git a/app/templates/magazine/article/includes/article_card.html b/app/templates/magazine/article/includes/article_card.html
index ef3a2e37..f3e0aa97 100644
--- a/app/templates/magazine/article/includes/article_card.html
+++ b/app/templates/magazine/article/includes/article_card.html
@@ -14,13 +14,17 @@
 {% endblock %}
 
 {% block image %}
-    <figure class="article-box__image">
-        {% with article.images.all|get_type:'card' as images %}
-            {% if images %}
-                <img src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" data-src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 %}" class="lazyload" />
-            {% endif %}
-        {% endwith %}
-    </figure>
+    {% with article.images.all|get_type:'card' as images %}
+        {% if images %}
+            <figure class="article-box__image">
+                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" class="lazyload" />
+            </figure>
+        {% else %}
+            <figure class="article-box__image">
+
+            </figure>
+        {% endif %}
+    {% endwith %}
 {% endblock %}
 
 {% block tags %}
diff --git a/app/templates/pages/includes/page_card.html b/app/templates/pages/includes/page_card.html
index 7a900714..22a5c391 100644
--- a/app/templates/pages/includes/page_card.html
+++ b/app/templates/pages/includes/page_card.html
@@ -17,7 +17,7 @@
     {% with page.images.all|get_type:'card' as images %}
         {% if images %}
             <figure class="article-box__image">
-                <img src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" data-src="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 %}" class="lazyload" />
+                <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-original="{{ MEDIA_URL }}{% thumbnail images.0.file 427 286 top=0.5 left=article.photo_alignment|get_photo_alignment %}" class="lazyload" />
             </figure>
         {% endif %}
     {% endwith %}
diff --git a/bower.json b/bower.json
index e4e0f4e8..e078b904 100644
--- a/bower.json
+++ b/bower.json
@@ -27,6 +27,7 @@
     "pushy": "^1.0.0",
     "audiojs": "^1.0.1",
     "video.js": "^5.13.0",
-    "videojs-playlist": "^2.4.0"
+    "videojs-playlist": "^2.4.0",
+    "jquery_lazyload": "jquery.lazyload#^1.9.7"
   }
 }
-- 
2.39.5