fixes: U4-8630 Make lightbox component for package images

src/Umbraco.Web.UI.Client/src/common/directives/components/umblightbox.directive.js

@@ -0,0 +1,150 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbLightbox
+@restrict E
+@scope
+
+@description
+<p>Use this directive to open a gallery in a lightbox overlay.</p>
+
+<h3>Markup example</h3>
+<pre>
+    <div ng-controller="My.Controller as vm">
+
+        <div class="my-gallery">
+            <a href="" ng-repeat="image in images" ng-click="vm.openLightbox($index, images)">
+                <img ng-src="image.source" />
+            </a>
+        </div>
+
+        <umb-lightbox
+            ng-if="vm.lightbox.show"
+            items="vm.lightbox.items"
+            active-item-index="vm.lightbox.activeIndex"
+            on-close="vm.closeLightbox">
+        </umb-lightbox>
+
+    </div>
+</pre>
+
+<h3>Controller example</h3>
+<pre>
+    (function () {
+
+        "use strict";
+
+        function Controller() {
+
+            var vm = this;
+
+            vm.images = [
+                {
+                    "source": "linkToImage"
+                },
+                {
+                    "source": "linkToImage"
+                }
+            ]
+
+            vm.openLightbox = openLightbox;
+            vm.closeLightbox = closeLightbox;
+
+            function openLightbox(itemIndex, items) {
+                vm.lightbox = {
+                    show: true,
+                    items: items,
+                    activeIndex: itemIndex
+                };
+            }
+
+            function closeLightbox() {
+                vm.lightbox.show = false;
+                vm.lightbox = null;
+            }
+
+        }
+
+        angular.module("umbraco").controller("My.Controller", Controller);
+    })();
+</pre>
+
+@param {array} items Array of gallery items.
+@param {callback} onClose Callback when the lightbox is closed.
+@param {number} activeItemIndex Index of active item.
+**/
+
+
+(function() {
+    'use strict';
+
+    function LightboxDirective() {
+
+        function link(scope, el, attr, ctrl) {
+
+
+            function activate() {
+
+                var eventBindings = [];
+
+                el.appendTo("body");
+
+                // clean up
+                scope.$on('$destroy', function() {
+                    // unbind watchers
+                    for (var e in eventBindings) {
+                        eventBindings[e]();
+                    }
+                });
+            }
+
+            scope.next = function() {
+
+                var nextItemIndex = scope.activeItemIndex + 1;
+
+                if( nextItemIndex < scope.items.length) {
+                    scope.items[scope.activeItemIndex].active = false;
+                    scope.items[nextItemIndex].active = true;
+                    scope.activeItemIndex = nextItemIndex;
+                }
+            };
+
+            scope.prev = function() {
+
+                var prevItemIndex = scope.activeItemIndex - 1;
+
+                if( prevItemIndex >= 0) {
+                    scope.items[scope.activeItemIndex].active = false;
+                    scope.items[prevItemIndex].active = true;
+                    scope.activeItemIndex = prevItemIndex;
+                }
+
+            };
+
+            scope.close = function() {
+                if(scope.onClose) {
+                    scope.onClose();
+                }
+            };
+
+            activate();
+
+        }
+
+        var directive = {
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/umb-lightbox.html',
+            scope: {
+                items: '=',
+                onClose: "=",
+                activeItemIndex: "="
+            },
+            link: link
+        };
+
+        return directive;
+    }
+
+    angular.module('umbraco.directives').directive('umbLightbox', LightboxDirective);
+
+})();

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -110,6 +110,7 @@
 @import "components/umb-iconpicker.less";
 @import "components/umb-packages.less";
 @import "components/umb-package-local-install.less";
+@import "components/umb-lightbox.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";

src/Umbraco.Web.UI.Client/src/less/components/umb-lightbox.less

@@ -0,0 +1,75 @@
+.umb-lightbox {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.umb-lightbox__backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.2);
+    width: 100%;
+    height: 100%;
+}
+
+.umb-lightbox__close {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+
+.umb-lightbox__images {
+    position: relative;
+    z-index: 1000;
+}
+
+.umb-lightbox__image {
+    background: @white;
+    border-radius: 3px;
+    padding: 10px;
+    img {
+        max-width: 50vw;
+        max-height: 70vh;
+    }
+}
+
+.umb-lightbox__control {
+    background-color: white;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    position: absolute;
+}
+
+.umb-lightbox__control.-next {
+    right: 20px;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+.umb-lightbox__control.-prev {
+    left: 20px;
+    top: 50%;
+    transform: translate(0, -50%);
+}
+
+.umb-lightbox__control-icon {
+    color: @blue;
+    font-size: 20px;
+}

src/Umbraco.Web.UI.Client/src/views/components/umb-lightbox.html

@@ -0,0 +1,19 @@
+<div class="umb-lightbox">
+
+    <div class="umb-lightbox__backdrop" ng-click="close()" hotkey="esc"></div>
+
+    <div class="umb-lightbox__images">
+        <div class="umb-lightbox__image shadow-depth-2" ng-repeat="item in items" ng-show="$index === activeItemIndex">
+            <img ng-src="{{ item.source }}" />
+        </div>
+    </div>
+
+    <div class="umb-lightbox__control -prev" ng-if="activeItemIndex > 0" ng-click="prev()" hotkey="left">
+        <i class="icon-previous umb-lightbox__control-icon"></i>
+    </div>
+
+    <div class="umb-lightbox__control -next" ng-if="activeItemIndex + 1 < items.length" ng-click="next()" hotkey="right">
+        <i class="icon-next umb-lightbox__control-icon"></i>
+    </div>
+
+</div>

src/Umbraco.Web.UI.Client/src/views/packager/views/repo.controller.js

@@ -25,6 +25,8 @@
         vm.goToPage = goToPage;
         vm.installPackage = installPackage;
         vm.downloadPackage = downloadPackage;
+        vm.openLightbox = openLightbox;
+        vm.closeLightbox = closeLightbox;
 
         //used to cancel any request in progress if another one needs to take it's place
         var canceler = null;
@@ -231,6 +233,19 @@
                     error);
         }
 
+        function openLightbox(itemIndex, items) {
+            vm.lightbox = {
+                show: true,
+                items: items,
+                activeIndex: itemIndex
+            };
+        }
+
+        function closeLightbox() {
+            vm.lightbox.show = false;
+            vm.lightbox = null;
+        }
+
         init();
 
     }

src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html

@@ -120,12 +120,19 @@
 
                 <div class="umb-gallery">
                     <div class="umb-gallery__thumbnails">
-                        <a class="umb-gallery__thumbnail" target="_blank" href="{{ image.source }}" ng-repeat="image in vm.package.images">
+                        <a class="umb-gallery__thumbnail" ng-repeat="image in vm.package.images" ng-click="vm.openLightbox($index, vm.package.images)">
                             <img ng-src="{{ image.thumbnail }}" />
                         </a>
                     </div>
                 </div>
 
+                <umb-lightbox
+                    ng-if="vm.lightbox.show"
+                    items="vm.lightbox.items"
+                    active-item-index="vm.lightbox.activeIndex"
+                    on-close="vm.closeLightbox">
+                </umb-lightbox>
+
             </div>
 
             <div class="umb-package-details__sidebar">