diff options
Diffstat (limited to 'main/app/sprinkles/core')
5 files changed, 160 insertions, 14 deletions
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("<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!"); 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 @@ <div class="MainInTab FriendsTabWindow"> <div class="FriendList"> {% for friend in friends %} - <img class="Avatar" src="{{ friend.avatar }}" alt="Friends Image"> + <img class="Avatar" data-src="{{ friend.avatar }}" data-caching-key="{{ friend.user_name }}_avatar_cached"> <a class="FriendName" href="{{ site.uri.public }}/users/u/{{ friend.user_name }}">{{ friend.first_name }} {{ friend.last_name }}</a> <br> @@ -111,7 +111,7 @@ <div class="MainInTab PersonalTabWindow"> <div class="PersonalOverviewHeader"> <div class="GenderFab Female">♀</div> - <img class="AvatarImage" src="{{ current_user.avatar }}" /> + <img class="Avatar" data-src="{{ current_user.avatar }}" data-caching-key="{{ current_user.user_name }}_avatar_cached" /> <div class="GenderFab Male">♂</div> </div> <br> @@ -128,19 +128,19 @@ <div class="Navbar"> <span id="0" class="NavbarIconWrap"> - <img src="{{ assets.url('assets://SiteAssets/icons/FriendFeedOutline.svg') }}"> + <img data-src="{{ assets.url('assets://SiteAssets/icons/FriendFeedOutline.svg') }}" data-caching-key="FriendFeedOutline_nav_cached"> </span> <span id="1" class="NavbarIconWrap"> - <img src="{{ assets.url('assets://SiteAssets/icons/ExploreGlobeOutline.svg') }}"> + <img data-src="{{ assets.url('assets://SiteAssets/icons/ExploreGlobeOutline.svg') }}" data-caching-key="ExploreGlobeOutline_nav_cached"> </span> <span id="2" class="NavbarIconWrap ActiveTab"> - <img src="{{ assets.url('assets://SiteAssets/icons/MessageBubbleOutlineActivated.svg') }}"> + <img data-src="{{ assets.url('assets://SiteAssets/icons/MessageBubbleOutlineActivated.svg') }}" data-caching-key="MessageBubbleOutlineActivated_nav_cached"> </span> <span id="3" class="NavbarIconWrap"> - <img src="{{ assets.url('assets://SiteAssets/icons/UserGroupOutline.svg') }}"> + <img data-src="{{ assets.url('assets://SiteAssets/icons/UserGroupOutline.svg') }}" data-caching-key="UserGroupOutline_nav_cached"> </span> <span id="4" class="NavbarIconWrap"> - <img src="{{ assets.url('assets://SiteAssets/icons/UserOutline.svg') }}"> + <img data-src="{{ assets.url('assets://SiteAssets/icons/UserOutline.svg') }}" data-caching-key="UserOutline_nav_cached"> </span> </div> <span class='NavbarLine'></span> |