Added caching

3 files changed, 152 insertions, 7 deletions

diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
index 311b507..999bdaa 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
@@ -400,7 +400,7 @@ PERSONAL TAB
     text-align: center;
 }
 
-.AvatarImage {
+.PersonalOverviewHeader .Avatar {
     height: 110px;
     width: 110px;
     -webkit-border-radius: 100%;
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/imageCaching.js b/main/app/sprinkles/core/assets/SiteAssets/js/imageCaching.js
new file mode 100644
index 0000000..704d89b
--- /dev/null
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/imageCaching.js
@@ -0,0 +1,136 @@
+/**
+ * jQuery ImageCaching plugin
+ * Caching selected images in localStorage
+ *
+ * Created by Yosef(Vlad) Kaminskyi
+ * Mailto: moledet[at]ukr.net
+ * Version:  1.0  on 03/05/2015.
+ * Dependencies:
+ *      jQuery https://jquery.com/
+ */
+;(function ($) {
+    function jQueryImageCaching(params) {
+        var ImageCaching = {
+            selector: 'img',
+            debugMode: false,
+            cachingKeyAttribute: 'data-caching-key',
+            sourceKeyAttribute: 'data-src',
+            renderCallback: null,
+            crossOrigin: 'Anonymous',
+            init: function (params) {
+                ImageCaching.log('Initialization of ImageCaching');
+                for (var param in params) {
+                    ImageCaching[param] = params[param];
+                }
+
+                $(ImageCaching.selector).each(function () {
+                    ImageCaching.applyToImage($(this));
+                });
+            },
+            getCacheKey: function (element) {
+                if (element.attr(ImageCaching.cachingKeyAttribute)) {
+                    return element.attr(ImageCaching.cachingKeyAttribute);
+                } else {
+                    return element.attr(ImageCaching.sourceKeyAttribute);
+                }
+            },
+            getCache: function (element) {
+                var key = this.getCacheKey(element);
+                return localStorage.getItem(key);
+            },
+            setCache: function (element, imageData) {
+                var key = ImageCaching.getCacheKey(element);
+                ImageCaching.log('Set cache', key, imageData, element);
+                localStorage.setItem(key, imageData); // save image data
+                return true;
+            },
+            removeCache: function (element) {
+                var key = ImageCaching.getCacheKey(element);
+                ImageCaching.log('Remove cache', key);
+                localStorage.removeItem(key);
+                return true;
+            },
+            renderImage: function (element, picture) {
+                ImageCaching.log('Rendering...', picture, element);
+                element.attr('src', picture);
+
+                if (this.renderCallback) {
+                    ImageCaching.log('Render Callback...', element);
+                    this.renderCallback(picture, element);
+                }
+            },
+            applyToImage: function (element, force) {
+                var cache = null;
+                if (!force) {
+                    cache = this.getCache(element);
+                }
+
+                if (cache) {
+                    ImageCaching.log('Image from cache', element);
+                    this.renderImage(element, cache);
+                } else {
+                    var sourceLink = element.attr(ImageCaching.sourceKeyAttribute);
+                    var getParamPrefix = "?";
+                    if (sourceLink.indexOf('?') > 0) {
+                        getParamPrefix = "&";
+                    }
+                    sourceLink += getParamPrefix + 'cacheTime=' + Date.now();
+
+                    ImageCaching.log('Request to: ' + sourceLink, element);
+
+                    var img = new Image();
+
+                    if (ImageCaching.crossOrigin) {
+                        img.setAttribute('crossOrigin', 'Anonymous');
+                    }
+
+                    img.onload = function () {
+                        ImageCaching.log('Loading completed', img);
+                        var canvas = document.createElement('canvas');
+                        canvas.width = img.width;
+                        canvas.height = img.height;
+
+                        // Copy the image contents to the canvas
+                        var ctx = canvas.getContext("2d");
+                        ctx.drawImage(img, 0, 0);
+
+                        var imageData = canvas.toDataURL("image/png");
+                        ImageCaching.setCache(element, imageData);
+                        ImageCaching.renderImage(element, imageData);
+                    };
+                    img.src = sourceLink;
+                }
+            },
+            refresh: function (itemsSelector) {
+                var selector = null;
+                if (itemsSelector) {
+                    selector = itemsSelector;
+                } else {
+                    selector = ImageCaching.selector;
+                }
+
+                $(selector).each(function () {
+                    ImageCaching.applyToImage($(this), true);
+                });
+
+            },
+            log: function () {
+                if (this.debugMode) {
+                    console.log(arguments);
+                }
+            }
+
+        };
+        ImageCaching.init(params);
+        return ImageCaching;
+    }
+
+    $.fn.extend({
+        imageCaching: function (options) {
+            var params = {selector: this};
+            params = $.extend(params, options);
+
+            return new jQueryImageCaching(params);
+        }
+    });
+})(jQuery);
\ No newline at end of file
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/main.js b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
index 71ea3b3..1a1bc8d 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/js/main.js
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
@@ -8,9 +8,15 @@ var alerts = $("#alerts-page");
 var ExploreData = $("#ExploreData");
 
 
-/*
-ENCRYPTION
- */
+/***********
+ CACHE IMAGES
+ ***********/
+var cachedNavbarIcons = $(".NavbarIconWrap img").imageCaching();
+var cashedAvatarIcons = $("img.Avatar").imageCaching();
+
+/*********
+ ENCRYPTION
+ ********/
 
 // encrypt
 var openpgp = window.openpgp;
@@ -90,8 +96,10 @@ MainTabWindows.slick({
 MainTabWindows.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
     currentSlide = $("#" + currentSlide);
     nextSlide = $("#" + nextSlide);
-    currentSlide.children().attr("src", (currentSlide.children().attr("src").split('.svg')[0].replace('Activated', '') + ".svg"));
-    nextSlide.children().attr("src", nextSlide.children().attr("src").split('.svg')[0] + "Activated.svg");
+    currentSlide.children().attr("data-src", (currentSlide.children().attr("data-src").split('.svg')[0].replace('Activated', '') + ".svg"));
+    nextSlide.children().attr("data-caching-key", nextSlide.children().attr("data-src").split('.svg')[0].split('/').pop() + "Activated_nav_cached");
+    nextSlide.children().attr("data-src", nextSlide.children().attr("data-src").split('.svg')[0] + "Activated.svg");
+    cachedNavbarIcons.refresh();
     $el = nextSlide;
     $el.addClass("ActiveTab");
     leftPos = $el.position().left;
@@ -118,7 +126,8 @@ UserSearchBar.keyup(function () {
             alerts.ufAlerts().ufAlerts('fetch');
 
             SearchResults.empty();
-            SearchResults.append("<img class='Avatar' src='" + answer.avatar + "'/><div class='UsersFullName'>" + answer.full_name + "</div>");
+            SearchResults.append("<img class='Avatar' data-src='" + answer.avatar + "' data-caching-key='" + answer.user_name + "_avatar_cached'/><div class='UsersFullName'>" + answer.full_name + "</div>");
+            $(".SearchResults .Avatar").imageCaching(); // refresh
         },
         error: function () {
             console.log("[SEARCH LOGGER] 404s are not a bug - they're a feature!");