From 97ec0ecd08222522b8556c561bf75c4dde049265 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 25 Jul 2017 15:48:04 +0200 Subject: [PATCH 1/8] add umb-dropdown component --- .../components/umbdropdown.directive.js | 19 +++++++++++++++++++ .../components/umbdropdownitem.directive.js | 19 +++++++++++++++++++ .../views/components/umb-dropdown-item.html | 1 + .../src/views/components/umb-dropdown.html | 1 + 4 files changed, 40 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownitem.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-item.html create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js new file mode 100644 index 0000000000..8447083de3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js @@ -0,0 +1,19 @@ +(function() { + 'use strict'; + + function umbDropdown() { + + var directive = { + restrict: 'E', + replace: true, + transclude: true, + templateUrl: 'views/components/umb-dropdown.html' + }; + + return directive; + + } + + angular.module('umbraco.directives').directive('umbDropdown', umbDropdown); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownitem.directive.js new file mode 100644 index 0000000000..88f033d4e6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownitem.directive.js @@ -0,0 +1,19 @@ +(function() { + 'use strict'; + + function umbDropdownItem() { + + var directive = { + restrict: 'E', + replace: true, + transclude: true, + templateUrl: 'views/components/umb-dropdown-item.html', + }; + + return directive; + + } + + angular.module('umbraco.directives').directive('umbDropdownItem', umbDropdownItem); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-item.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-item.html new file mode 100644 index 0000000000..11fe294919 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown-item.html @@ -0,0 +1 @@ +
  • \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html new file mode 100644 index 0000000000..3410665f4a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html @@ -0,0 +1 @@ + \ No newline at end of file From abbee60c9c699fb2198fc7b142a9533f86ba2cd5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 25 Jul 2017 15:56:51 +0200 Subject: [PATCH 2/8] add directive to navigate a list with arrow up and down --- .../util/umbkeyboardlist.directive.js | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js new file mode 100644 index 0000000000..0b189e3669 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js @@ -0,0 +1,55 @@ +angular.module('umbraco.directives') + .directive('umbKeyboardList', ['$document', '$timeout', function ($document, $timeout) { + + return { + restrict: 'A', + link: function (scope, element, attr) { + + var listItems = []; + var currentIndex = 0; + var focusSet = false; + + $timeout(function(){ + // get list of all links in the list + listItems = element.find("li a"); + }); + + // Handle keydown events + function keydown(event) { + + // arrow down + if (event.keyCode === 40) { + if(currentIndex < listItems.length - 1) { + // we do this to focus the first element when + // using the arrow down key the first time + if(focusSet) { + currentIndex++; + } + listItems[currentIndex].focus(); + focusSet = true; + } + } + + // arrow up + if (event.keyCode === 38) { + if(currentIndex > 0) { + currentIndex--; + listItems[currentIndex].focus(); + } + } + } + + // Stop to listen typing. + function stopListening() { + $document.off('keydown', keydown); + } + + // Start listening to key typing. + $document.on('keydown', keydown); + + // Stop listening when scope is destroyed. + scope.$on('$destroy', stopListening); + + } + }; + }]); \ No newline at end of file From 9b1f2352bd4a176fa5a2f4d61da9e2640a62be40 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 25 Jul 2017 15:58:14 +0200 Subject: [PATCH 3/8] update view to use the new dropdown component and the list navigation directive --- .../src/views/users/views/users/users.html | 48 +++++++++---------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html index 4490b33e43..167ebcc221 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html @@ -1,7 +1,5 @@
    - - @@ -102,51 +100,51 @@
    -
    - +
    + Status: {{ vm.getFilterName(vm.userStatesFilter) }} - + +
    -
    - +
    + : {{ vm.getFilterName(vm.userGroups) }} - + +
    -
    - +
    From 6e055f0d0363af3109a5f2ba55c8863a0dcf0a17 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 25 Jul 2017 15:59:28 +0200 Subject: [PATCH 4/8] allow outside click to run when you click links and buttons --- .../directives/components/events/events.directive.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js index 6cf5f68461..318705d16c 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js @@ -151,13 +151,8 @@ angular.module('umbraco.directives') function oneTimeClick(event) { var el = event.target.nodeName; - //ignore link and button clicks - var els = ["INPUT","A","BUTTON"]; - if(els.indexOf(el) >= 0){return;} - - // ignore children of links and buttons // ignore clicks on new overlay - var parents = $(event.target).parents("a,button,.umb-overlay"); + var parents = $(event.target).parents(".umb-overlay"); if(parents.length > 0){ return; } From 1ec63c3f8588b915ec61c23494144452be0b95f9 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 26 Jul 2017 10:36:02 +0200 Subject: [PATCH 5/8] add documentation to umbDropdown, umbDropdownItem and umbKeyboardList --- .../components/umbdropdown.directive.js | 79 +++++++++++++++++++ .../components/umbdropdownitem.directive.js | 10 +++ .../util/umbkeyboardlist.directive.js | 29 +++++++ 3 files changed, 118 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js index 8447083de3..f91742785a 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js @@ -1,3 +1,82 @@ +/** +@ngdoc directive +@name umbraco.directives.directive:umbDropdown +@restrict E + +@description +Added in versions 7.7.0: Use this component to render a dropdown menu. + +

    Markup example

    +
    +    
    
+
+        
    
+
+            
+            
+
+            
+                
+                    {{ item.name }}
+                
+            
+
+        
    
+
+    
    
+
    + +

    Controller example

    +
    +    (function () {
+        "use strict";
+
+        function Controller() {
+
+            var vm = this;
+
+            vm.dropdownOpen = false;
+            vm.items = [
+                { "name": "Item 1" },
+                { "name": "Item 2" },
+                { "name": "Item 3" }
+            ];
+
+            vm.toggle = toggle;
+            vm.close = close;
+            vm.select = select;
+
+            function toggle() {
+                vm.dropdownOpen = true;
+            }
+
+            function close() {
+                vm.dropdownOpen = false;
+            }
+
+            function select(item) {
+                // Do your magic here
+            }
+
+        }
+
+        angular.module("umbraco").controller("MyDropdown.Controller", Controller);
+    })();
+
    + +

    Use in combination with

    +
      +
    • {@link umbraco.directives.directive:umbDropdownItem umbDropdownItem}
      • +
    • {@link umbraco.directives.directive:umbKeyboardList umbKeyboardList}
      • +
    + +**/ + (function() { 'use strict'; diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownitem.directive.js index 88f033d4e6..59b2b827eb 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownitem.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdownitem.directive.js @@ -1,3 +1,13 @@ +/** +@ngdoc directive +@name umbraco.directives.directive:umbDropdownItem +@restrict E + +@description +Added in versions 7.7.0: Use this directive to construct a dropdown item. See documentation for {@link umbraco.directives.directive:umbDropdown umbDropdown}. + +**/ + (function() { 'use strict'; diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js index 0b189e3669..ed0652126e 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js @@ -1,3 +1,32 @@ +/** +@ngdoc directive +@name umbraco.directives.directive:umbKeyboardList +@restrict E + +@description +Added in versions 7.7.0: Use this directive to add arrow up and down keyboard shortcuts to a list. Use this together with the {@link umbraco.directives.directive:umbDropdown umbDropdown} component to make easy accessible dropdown menus. + +

    Markup example

    +
    +    
    
+        
+    
    
+
    + +

    Use in combination with

    +
      +
    • {@link umbraco.directives.directive:umbDropdown umbDropdown}
      • +
    + +**/ + angular.module('umbraco.directives') .directive('umbKeyboardList', ['$document', '$timeout', function ($document, $timeout) { From 964a8b400f63c0e7d36510d99fc2ea0e31f062e8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 26 Jul 2017 12:16:54 +0200 Subject: [PATCH 6/8] close umb-dropdown on esc press --- .../components/umbdropdown.directive.js | 45 ++++++++++++++++--- .../src/views/components/umb-dropdown.html | 2 +- .../src/views/users/views/users/users.html | 8 ++-- 3 files changed, 45 insertions(+), 10 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js index f91742785a..d6006114a6 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbdropdown.directive.js @@ -2,6 +2,7 @@ @ngdoc directive @name umbraco.directives.directive:umbDropdown @restrict E +@scope @description Added in versions 7.7.0: Use this component to render a dropdown menu. @@ -18,10 +19,9 @@ action="vm.toggle()"> - + + ng-repeat="item in vm.items"> {{ item.name }} @@ -75,18 +75,53 @@
  • {@link umbraco.directives.directive:umbKeyboardList umbKeyboardList}
    • +@param {callback} onClose Callback when the dropdown menu closes. When you click outside or press esc. + **/ (function() { 'use strict'; - function umbDropdown() { + function umbDropdown($document) { + + function link(scope, element, attr, ctrl) { + + scope.close = function() { + if (scope.onClose) { + scope.onClose(); + } + }; + + // Handle keydown events + function keydown(event) { + // press escape + if(event.keyCode === 27) { + scope.onClose(); + } + } + + // Stop to listen typing. + function stopListening() { + $document.off('keydown', keydown); + } + + // Start listening to key typing. + $document.on('keydown', keydown); + + // Stop listening when scope is destroyed. + scope.$on('$destroy', stopListening); + + } var directive = { restrict: 'E', replace: true, transclude: true, - templateUrl: 'views/components/umb-dropdown.html' + templateUrl: 'views/components/umb-dropdown.html', + scope: { + onClose: "&" + }, + link: link }; return directive; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html index 3410665f4a..141793f6b1 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-dropdown.html @@ -1 +1 @@ -
      \ No newline at end of file +
        \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html index 167ebcc221..acd2864320 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html @@ -106,8 +106,8 @@ {{ vm.getFilterName(vm.userStatesFilter) }} - - + +
        @@ -123,7 +123,7 @@ {{ vm.getFilterName(vm.userGroups) }} - +
        @@ -140,7 +140,7 @@ {{ vm.getSortLabel(vm.usersOptions.orderBy, vm.usersOptions.orderDirection) }} - + {{sortData.label}} From 1692000117cccc89f5523de0756c138f341ec0fb Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 26 Jul 2017 14:12:55 +0200 Subject: [PATCH 7/8] umb-keyboard-list polish --- .../util/umbkeyboardlist.directive.js | 61 ++++++++++++++----- 1 file changed, 46 insertions(+), 15 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js index ed0652126e..187228f0c4 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/umbkeyboardlist.directive.js @@ -45,26 +45,57 @@ angular.module('umbraco.directives') // Handle keydown events function keydown(event) { + $timeout(function(){ + checkFocus(); + // arrow down + if (event.keyCode === 40) { + arrowDown(); + } + // arrow up + if (event.keyCode === 38) { + arrowUp(); + } + }); + } - // arrow down - if (event.keyCode === 40) { - if(currentIndex < listItems.length - 1) { - // we do this to focus the first element when - // using the arrow down key the first time - if(focusSet) { - currentIndex++; - } - listItems[currentIndex].focus(); + function checkFocus() { + var found = false; + + // check if any element has focus + angular.forEach(listItems, function (item, index) { + if ($(item).is(":focus")) { + // if an element already has focus set the + // currentIndex so we navigate from that element + currentIndex = index; focusSet = true; + found = true; } - } + }); - // arrow up - if (event.keyCode === 38) { - if(currentIndex > 0) { - currentIndex--; - listItems[currentIndex].focus(); + // If we don't find an element with focus we reset the currentIndex and the focusSet flag + // we do this because you can have navigated away from the list with tab and we want to reset it if you navigate back + if (!found) { + currentIndex = 0; + focusSet = false; + } + } + + function arrowDown() { + if (currentIndex < listItems.length - 1) { + // only bump the current index if the focus is already + // set else we just want to focus the first element + if (focusSet) { + currentIndex++; } + listItems[currentIndex].focus(); + focusSet = true; + } + } + + function arrowUp() { + if (currentIndex > 0) { + currentIndex--; + listItems[currentIndex].focus(); } } From f50153728dbe4a2131283ade02617312ea2f961b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 26 Jul 2017 15:21:30 +0200 Subject: [PATCH 8/8] manually show/hide filters --- .../components/events/events.directive.js | 6 ++++- .../users/views/users/users.controller.js | 23 +++++++++++++++++++ .../src/views/users/views/users/users.html | 6 ++--- 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js index 318705d16c..de497ccffe 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/events/events.directive.js @@ -151,8 +151,12 @@ angular.module('umbraco.directives') function oneTimeClick(event) { var el = event.target.nodeName; + //ignore link and button clicks + var els = ["INPUT","A","BUTTON"]; + if(els.indexOf(el) >= 0){return;} + // ignore clicks on new overlay - var parents = $(event.target).parents(".umb-overlay"); + var parents = $(event.target).parents("a,button,.umb-overlay"); if(parents.length > 0){ return; } diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js index abbacf5040..dd544fc94e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.controller.js @@ -68,6 +68,7 @@ } ]; + vm.toggleFilter = toggleFilter; vm.setUsersViewState = setUsersViewState; vm.selectLayout = selectLayout; vm.selectUser = selectUser; @@ -117,6 +118,28 @@ return found ? found.label : sortKey; } + function toggleFilter(type) { + // hack: on-outside-click prevents us from closing the dropdown when clicking on another link + // so I had to do this manually + switch (type) { + case "state": + vm.page.showStatusFilter = !vm.page.showStatusFilter; + vm.page.showGroupFilter = false; + vm.page.showOrderByFilter = false; + break; + case "group": + vm.page.showGroupFilter = !vm.page.showGroupFilter; + vm.page.showStatusFilter = false; + vm.page.showOrderByFilter = false; + break; + case "orderBy": + vm.page.showOrderByFilter = !vm.page.showOrderByFilter; + vm.page.showStatusFilter = false; + vm.page.showGroupFilter = false; + break; + } + } + function setUsersViewState(state) { if (state === "createUser") { diff --git a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html index acd2864320..1ea26e0585 100644 --- a/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html +++ b/src/Umbraco.Web.UI.Client/src/views/users/views/users/users.html @@ -101,7 +101,7 @@