improve icon picker icon loading #712

Signed-off-by: binsky <timo@binsky.org>

4 files changed, 13 insertions, 10 deletions

diff --git a/controller/iconcontroller.php b/controller/iconcontroller.php
index 6be9a8a0..8507dc19 100644
--- a/controller/iconcontroller.php
+++ b/controller/iconcontroller.php
@@ -159,12 +159,19 @@ class IconController extends ApiController {
 				$icon['mimetype'] = mime_content_type($iconPath);
 				$icon['url'] = $this->urlGenerator->linkTo('passman', $path[1]);
 				$icon['pack'] = $pack;
+				$icon['data'] = base64_encode(file_get_contents($iconPath));
 				if (!isset($icons[$pack])) {
 					$icons[$pack] = [];
 				}
 				$icons[$pack][] = $icon;
 			}
 		}
-		return new JSONResponse($icons);
+
+		$offset = 3600 * 24 * 30;
+		$response = new JSONResponse($icons);
+		$response->addHeader('Expires: ', gmdate("D, d M Y H:i:s", time() + $offset) . " GMT");
+		$response->cacheFor($offset);
+
+		return $response;
 	}
 }
diff --git a/js/app/directives/iconpicker.js b/js/app/directives/iconpicker.js
index 210dfacb..e6a78f7d 100644
--- a/js/app/directives/iconpicker.js
+++ b/js/app/directives/iconpicker.js
@@ -137,12 +137,8 @@
                     scope.credential.icon.type = data.substring(data.lastIndexOf(":")+1,data.lastIndexOf(";"));
                     scope.credential.icon.content = data.substring(data.lastIndexOf(",")+1, data.length);
                 }else{
-					$http.get(scope.selectedIcon.url).then(function(result) {
-						var base64Data = window.btoa(result.data);
-						var mimeType = 'svg+xml';
-						scope.credential.icon.type = mimeType;
-						scope.credential.icon.content = base64Data;
-					});
+	                scope.credential.icon.type = 'svg+xml';
+	                scope.credential.icon.content = scope.selectedIcon.data;
                 }
 				$('#iconPicker').dialog('close');
           };
diff --git a/js/templates.js b/js/templates.js
index 34c2e989..e8a0c518 100644
--- a/js/templates.js
+++ b/js/templates.js
@@ -107,7 +107,7 @@ angular.module('views/partials/forms/share_credential/link_sharing.html', []).ru
 angular.module('views/partials/icon-picker.html', []).run(['$templateCache', function($templateCache) {
   'use strict';
   $templateCache.put('views/partials/icon-picker.html',
-    '<div class="cell fa fa-lock" ng-if="!credential.url && !credential.icon"></div><div class="cell" ng-if="credential.url || credential.icon"><span class="icon"><credential-icon credential="credential"></credential-icon></span></div><div style="display: none" id="iconPicker" title="{{ \'pick.icon\' | translate }}"><div class="iconList"><div ng-repeat="(groupName, icons) in iconGroups"><div ng-click="expanded = !expanded" ng-init="expanded=true"><div class="icon-triangle-s arrow" ng-class="{ \'icon-triangle-e\': !expanded , \'icon-triangle-s\': expanded }"></div><div class="collapsible" id="{{groupName}}">{{groupName}}</div></div><div ng-class="{ \'content_show\': expanded , \'content\': !expanded }"><div class="icon" ng-repeat="icon in icons" ng-click="selectIcon(icon)"><img ng-src="{{icon.url}}" height="32"></div></div></div></div><div class="iconModifier"><input id="iconPicker-Search" class="iconSearch" type="text" placeholder="{{ \'pick.icon.search\' | translate }}"> <label for="iconPicker-CustomIcon">{{ \'pick.icon.custom.label\' | translate }}</label> <input id="iconPicker-CustomIcon" class="iconSearch" type="file"><div ng-if="selectedIcon || customIcon">{{ \'selected.icon\' | translate}}:<br><img ng-src="{{selectedIcon.url}}" height="32" ng-if="!customIcon"> <img src="{{customIcon.data}}" height="32" ng-if="customIcon"><br><button ng-click="useIcon()">{{ \'use.icon\' | translate}}</button></div><div><button ng-click="deleteIcon()" ng-if="credential.icon">{{ \'use.icon.delete\' | translate}}</button> <button ng-click="refreshUrlIcon()">{{ \'use.icon.refresh\' | translate}}</button></div></div></div>');
+    '<div class="cell fa fa-lock" ng-if="!credential.url && !credential.icon"></div><div class="cell" ng-if="credential.url || credential.icon"><span class="icon"><credential-icon credential="credential"></credential-icon></span></div><div style="display: none" id="iconPicker" title="{{ \'pick.icon\' | translate }}"><div class="iconList"><div ng-repeat="(groupName, icons) in iconGroups"><div ng-click="expanded = !expanded" ng-init="expanded=true"><div class="icon-triangle-s arrow" ng-class="{ \'icon-triangle-e\': !expanded , \'icon-triangle-s\': expanded }"></div><div class="collapsible" id="{{groupName}}">{{groupName}}</div></div><div ng-class="{ \'content_show\': expanded , \'content\': !expanded }"><div class="icon" ng-repeat="icon in icons" ng-click="selectIcon(icon)"><img ng-src="data:{{icon.mimetype}};base64,{{icon.data}}" height="32"></div></div></div></div><div class="iconModifier"><input id="iconPicker-Search" class="iconSearch" type="text" placeholder="{{ \'pick.icon.search\' | translate }}"> <label for="iconPicker-CustomIcon">{{ \'pick.icon.custom.label\' | translate }}</label> <input id="iconPicker-CustomIcon" class="iconSearch" type="file"><div ng-if="selectedIcon || customIcon">{{ \'selected.icon\' | translate}}:<br><img ng-src="data:{{selectedIcon.mimetype}};base64,{{selectedIcon.data}}" height="32" ng-if="!customIcon"> <img src="{{customIcon.data}}" height="32" ng-if="customIcon"><br><button ng-click="useIcon()">{{ \'use.icon\' | translate}}</button></div><div><button ng-click="deleteIcon()" ng-if="credential.icon">{{ \'use.icon.delete\' | translate}}</button> <button ng-click="refreshUrlIcon()">{{ \'use.icon.refresh\' | translate}}</button></div></div></div>');
 }]);
 
 angular.module('views/partials/password-meter.html', []).run(['$templateCache', function($templateCache) {
diff --git a/templates/views/partials/icon-picker.html b/templates/views/partials/icon-picker.html
index 6373a1df..6be93275 100644
--- a/templates/views/partials/icon-picker.html
+++ b/templates/views/partials/icon-picker.html
@@ -15,7 +15,7 @@
 				</div>
 				<div ng-class="{ 'content_show': expanded , 'content': !expanded }">
 					<div class="icon" ng-repeat="icon in icons" ng-click="selectIcon(icon)">
-						<img ng-src="{{icon.url}}" height="32">
+						<img ng-src="data:{{icon.mimetype}};base64,{{icon.data}}" height="32">
 					</div>
 				</div>
 			</div>
@@ -31,7 +31,7 @@
 		<div ng-if="selectedIcon || customIcon">
 			{{ 'selected.icon' | translate}}: <br />
 
-			<img ng-src="{{selectedIcon.url}}" height="32" ng-if="!customIcon">
+			<img ng-src="data:{{selectedIcon.mimetype}};base64,{{selectedIcon.data}}" height="32" ng-if="!customIcon">
 			<img src="{{customIcon.data}}" height="32" ng-if="customIcon">
 			<br />
 			<button ng-click="useIcon()">{{ 'use.icon' | translate}}</button>