From f1803b4f33af46676f952971f58ea8a63a813c74 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 22 Jun 2016 12:15:50 +0200 Subject: [PATCH] fixes: U4-8630 Make lightbox component for package images --- .../components/umblightbox.directive.js | 150 ++++++++++++++++++ src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../src/less/components/umb-lightbox.less | 75 +++++++++ .../src/views/components/umb-lightbox.html | 19 +++ .../views/packager/views/repo.controller.js | 15 ++ .../src/views/packager/views/repo.html | 9 +- 6 files changed, 268 insertions(+), 1 deletion(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umblightbox.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/umb-lightbox.less create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-lightbox.html diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umblightbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umblightbox.directive.js new file mode 100644 index 0000000000..19a33a8351 --- /dev/null +++ b/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 +

Use this directive to open a gallery in a lightbox overlay.

+ +

Markup example

+
+    

+
+        

+            
+                
+            
+        

+
+        
+        
+
+    

+
+ +

Controller example

+
+    (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);
+    })();
+
+ +@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); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 0399fe8f8f..dfc275c4b0 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/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"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-lightbox.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-lightbox.less new file mode 100644 index 0000000000..e8477396bf --- /dev/null +++ b/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; +} diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-lightbox.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-lightbox.html new file mode 100644 index 0000000000..f0a53a7f44 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-lightbox.html @@ -0,0 +1,19 @@ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+ +
+ +
diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.controller.js b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.controller.js index e87a4a2426..a28f1a761b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.controller.js +++ b/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(); } diff --git a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html index d42e955b4f..28d345ac85 100644 --- a/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html +++ b/src/Umbraco.Web.UI.Client/src/views/packager/views/repo.html @@ -120,12 +120,19 @@
- +
+ + +