From 16947035c5e883c3fbc34bbf24bb78ee262b5ed1 Mon Sep 17 00:00:00 2001 From: Marvin Borner Date: Sat, 5 May 2018 17:02:11 +0200 Subject: Added caching --- main/app/sprinkles/core/asset-bundles.json | 1 + .../sprinkles/core/assets/SiteAssets/css/main.css | 2 +- .../core/assets/SiteAssets/js/imageCaching.js | 136 +++++++++++++++++++++ .../sprinkles/core/assets/SiteAssets/js/main.js | 21 +++- .../sprinkles/core/templates/pages/index.html.twig | 14 +-- 5 files changed, 160 insertions(+), 14 deletions(-) create mode 100644 main/app/sprinkles/core/assets/SiteAssets/js/imageCaching.js (limited to 'main') diff --git a/main/app/sprinkles/core/asset-bundles.json b/main/app/sprinkles/core/asset-bundles.json index 018452d..d153132 100644 --- a/main/app/sprinkles/core/asset-bundles.json +++ b/main/app/sprinkles/core/asset-bundles.json @@ -51,6 +51,7 @@ "SiteAssets/js/encryption.js", "SiteAssets/js/swiper.js", "SiteAssets/js/console.image.js", + "SiteAssets/js/imageCaching.js", "SiteAssets/js/chat.js", "SiteAssets/js/main.js" ], 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("
" + answer.full_name + "
"); + SearchResults.append("
" + answer.full_name + "
"); + $(".SearchResults .Avatar").imageCaching(); // refresh }, error: function () { console.log("[SEARCH LOGGER] 404s are not a bug - they're a feature!"); diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig index d0d3792..3721c55 100644 --- a/main/app/sprinkles/core/templates/pages/index.html.twig +++ b/main/app/sprinkles/core/templates/pages/index.html.twig @@ -89,7 +89,7 @@
{% for friend in friends %} - Friends Image + {{ friend.first_name }} {{ friend.last_name }}
@@ -111,7 +111,7 @@
♀
- +
♂

@@ -128,19 +128,19 @@
- + - + - + - + - +
-- cgit v1.2.3