From 879d54b5259b237d7c6b82c285bee28c2f64dd7f Mon Sep 17 00:00:00 2001
From: Mike Masey <mike.masey@yoyodesign.com>
Date: Tue, 6 Oct 2020 13:09:35 +0100
Subject: [PATCH] V8/feature/update icon picker to use umb icon (#9063)

(cherry picked from commit 27751a4ae70b66e477aff554583e4261f5e4e94a)
---
 ...on-adressbook.svg => icon-addressbook.svg} |  0
 .../components/umbicon.directive.js           | 36 +++++++++++--------
 .../iconpicker/iconpicker.controller.js       | 22 +++++++++---
 .../iconpicker/iconpicker.html                |  8 ++---
 4 files changed, 44 insertions(+), 22 deletions(-)
 rename src/Umbraco.Web.UI.Client/src/assets/icons/{icon-adressbook.svg => icon-addressbook.svg} (100%)

diff --git a/src/Umbraco.Web.UI.Client/src/assets/icons/icon-adressbook.svg b/src/Umbraco.Web.UI.Client/src/assets/icons/icon-addressbook.svg
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/assets/icons/icon-adressbook.svg
rename to src/Umbraco.Web.UI.Client/src/assets/icons/icon-addressbook.svg
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbicon.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbicon.directive.js
index 517776388b..87d976f6d9 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbicon.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbicon.directive.js
@@ -15,16 +15,7 @@ Simple icon
 
 Icon with additional attribute. It can be treated like any other dom element
 <pre>
-    <umb-icon icon="icon-alert" class="icon-class" ng-click="doSomething()"></umb-icon>
-</pre>
-
-Manual svg string
-This format is only used in the iconpicker.html
-<pre>
-    <umb-icon 
-        icon="icon-alert"
-        svg-string='<svg height="50" width="50"><circle cx="25" cy="25" r="25" fill="red" /></svg>'>
-    </umb-icon>
+    <umb-icon icon="icon-alert" class="icon-class"></umb-icon>
 </pre>
 @example
  **/
@@ -43,13 +34,19 @@ This format is only used in the iconpicker.html
                 svgString: "=?"
             },
 
-            link: function (scope) {
-                
+            link: function (scope, element) {
                 if (scope.svgString === undefined && scope.svgString !== null && scope.icon !== undefined && scope.icon !== null) {
-                    var icon = scope.icon.split(" ")[0]; // Ensure that only the first part of the icon is used as sometimes the color is added too, e.g. see umbeditorheader.directive scope.openIconPicker
+                    const observer = new IntersectionObserver(_lazyRequestIcon, {rootMargin: "100px"});
+                    const iconEl = element[0];
 
-                    _requestIcon(icon);
+                    observer.observe(iconEl);
+
+                    // make sure to disconnect the observer when the scope is destroyed
+                    scope.$on('$destroy', function () {
+                        observer.disconnect();
+                    });
                 }
+
                 scope.$watch("icon", function (newValue, oldValue) {
                     if (newValue && oldValue) {
                         var newicon = newValue.split(" ")[0];
@@ -61,6 +58,17 @@ This format is only used in the iconpicker.html
                     }
                 });
 
+                function _lazyRequestIcon(entries, observer) {
+                    entries.forEach(entry => {
+                        if (entry.isIntersecting === true) {
+                            observer.disconnect();
+
+                            var icon = scope.icon.split(" ")[0]; // Ensure that only the first part of the icon is used as sometimes the color is added too, e.g. see umbeditorheader.directive scope.openIconPicker
+                            _requestIcon(icon);
+                        }
+                    });
+                }
+
                 function _requestIcon(icon) {
                     // Reset svg string before requesting new icon.
                     scope.svgString = null;
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
index 44b10b852d..59a9aed4bb 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js
@@ -43,10 +43,24 @@ function IconPickerController($scope, localizationService, iconHelper) {
 
         setTitle();
 
-        iconHelper.getIcons().then(function (icons) {
-            vm.icons = icons;
-            vm.loading = false;
-        });
+        iconHelper.getAllIcons()
+            .then(icons => {
+                vm.icons = icons;
+
+                // Get's legacy icons, removes duplicates then maps them to IconModel
+                iconHelper.getIcons()
+                    .then(icons => {
+                        if (icons && icons.length > 0) {
+                            let legacyIcons = icons
+                                .filter(icon => !vm.icons.find(x => x.name == icon))
+                                .map(icon => { return { name: icon, svgString: null }; });
+
+                            vm.icons = legacyIcons.concat(vm.icons);
+                        }
+
+                        vm.loading = false;
+                    });
+            });
 
         // set a default color if nothing is passed in
         vm.color = $scope.model.color ? findColor($scope.model.color) : vm.colors.find(x => x.default);
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
index dd2ff41efa..e364b29b3f 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html
@@ -45,10 +45,10 @@
 
                 <div class="umb-control-group" ng-show="!vm.loading && filtered.length > 0 ">
                     <ul class="umb-iconpicker" ng-class="vm.color.value" ng-show="vm.icons">
-                        <li class="umb-iconpicker-item" ng-class="{'-selected': icon == model.icon}" ng-repeat="icon in filtered = (vm.icons | filter: searchTerm) track by $id(icon)">
-                            <button type="button" title="{{icon}}" ng-click="vm.selectIcon(icon, vm.color.value)">
-                                <i class="{{icon}} large" aria-hidden="true"></i>
-                                <span class="sr-only"><localize key="buttons_select">Select</localize> {{icon}}</span>
+                        <li class="umb-iconpicker-item" ng-class="{'-selected': icon.name == model.icon}" ng-repeat="icon in filtered = (vm.icons | filter: searchTerm | orderBy:'name') track by $id(icon)">
+                            <button type="button" title="{{icon.name}}" ng-click="vm.selectIcon(icon.name, vm.color.value)">
+                                <umb-icon class="umb-iconpicker-svg {{icon.name}} large" icon="{{icon.name}}"></umb-icon>
+                                <span class="sr-only"><localize key="buttons_select">Select</localize> {{icon.name}}</span>
                             </button>
                         </li>
                     </ul>