From 7f1628f3db05985e40f7144a1287f720d3cd76ca Mon Sep 17 00:00:00 2001 From: Christopher Lenz Date: Wed, 4 Mar 2015 15:13:20 +0100 Subject: [PATCH 1/5] Add an `append-to-body` attribute to the `` directive that moves the dropdown element to the end of the document body before opening it, thereby solving problems with the dropdown being displayed below elements that follow the `` element in the document. This implementation is modeled after the `typeahead-append-to-body` support from UI Bootstrap. See #41 (and quite a few dupes). --- src/bootstrap/choices.tpl.html | 3 ++- src/common.css | 12 ++++----- src/common.js | 22 ++++++++++++++++- src/select2/choices.tpl.html | 3 ++- src/selectize/choices.tpl.html | 3 ++- src/uiSelectChoicesDirective.js | 43 +++++++++++++++++++++++++++++++-- 6 files changed, 74 insertions(+), 12 deletions(-) diff --git a/src/bootstrap/choices.tpl.html b/src/bootstrap/choices.tpl.html index da1648f9c..304771720 100644 --- a/src/bootstrap/choices.tpl.html +++ b/src/bootstrap/choices.tpl.html @@ -1,6 +1,7 @@
    + ng-show="$select.open">
  • diff --git a/src/common.css b/src/common.css index 944fa6c36..df46a2a2e 100644 --- a/src/common.css +++ b/src/common.css @@ -108,7 +108,7 @@ } /* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */ -.ui-select-bootstrap > .ui-select-choices { +.ui-select-choices { width: 100%; height: auto; max-height: 200px; @@ -163,7 +163,7 @@ border-right: 1px solid #428bca; } -.ui-select-bootstrap .ui-select-choices-row>a { +.ui-select-choices-row>a { display: block; padding: 3px 20px; clear: both; @@ -173,21 +173,21 @@ white-space: nowrap; } -.ui-select-bootstrap .ui-select-choices-row>a:hover, .ui-select-bootstrap .ui-select-choices-row>a:focus { +.ui-select-choices-row>a:hover, .ui-select-choices-row>a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } -.ui-select-bootstrap .ui-select-choices-row.active>a { +.ui-select-choices-row.active>a { color: #fff; text-decoration: none; outline: 0; background-color: #428bca; } -.ui-select-bootstrap .ui-select-choices-row.disabled>a, -.ui-select-bootstrap .ui-select-choices-row.active.disabled>a { +.ui-select-choices-row.disabled>a, +.ui-select-choices-row.active.disabled>a { color: #777; cursor: not-allowed; background-color: #fff; diff --git a/src/common.js b/src/common.js index f687a7062..47955b13e 100644 --- a/src/common.js +++ b/src/common.js @@ -133,5 +133,25 @@ var uis = angular.module('ui.select', []) return function(matchItem, query) { return query && matchItem ? matchItem.replace(new RegExp(escapeRegexp(query), 'gi'), '$&') : matchItem; }; -}); +}) +/** + * A read-only equivalent of jQuery's offset function: http://api.jquery.com/offset/ + * + * Taken from AngularUI Bootstrap Position: + * See https://github.com/angular-ui/bootstrap/blob/master/src/position/position.js#L70 + */ +.factory('uisOffset', + ['$document', '$window', + function ($document, $window) { + + return function(element) { + var boundingClientRect = element[0].getBoundingClientRect(); + return { + width: boundingClientRect.width || element.prop('offsetWidth'), + height: boundingClientRect.height || element.prop('offsetHeight'), + top: boundingClientRect.top + ($window.pageYOffset || $document[0].documentElement.scrollTop), + left: boundingClientRect.left + ($window.pageXOffset || $document[0].documentElement.scrollLeft) + }; + }; +}]); diff --git a/src/select2/choices.tpl.html b/src/select2/choices.tpl.html index f462dab92..0546cc7a0 100644 --- a/src/select2/choices.tpl.html +++ b/src/select2/choices.tpl.html @@ -1,4 +1,5 @@ -
      +
        • +
          diff --git a/src/uiSelectChoicesDirective.js b/src/uiSelectChoicesDirective.js index b61bf89b0..866b8907e 100644 --- a/src/uiSelectChoicesDirective.js +++ b/src/uiSelectChoicesDirective.js @@ -1,6 +1,6 @@ uis.directive('uiSelectChoices', - ['uiSelectConfig', 'RepeatParser', 'uiSelectMinErr', '$compile', - function(uiSelectConfig, RepeatParser, uiSelectMinErr, $compile) { + ['uiSelectConfig', 'RepeatParser', 'uiSelectMinErr', 'uisOffset', '$compile', '$document', + function(uiSelectConfig, RepeatParser, uiSelectMinErr, uisOffset, $compile, $document) { return { restrict: 'EA', @@ -21,6 +21,7 @@ uis.directive('uiSelectChoices', // var repeat = RepeatParser.parse(attrs.repeat); var groupByExp = attrs.groupBy; + var appendToBody = scope.$eval(attrs.appendToBody); $select.parseRepeatAttr(attrs.repeat, groupByExp); //Result ready at $select.parserResult @@ -60,6 +61,44 @@ uis.directive('uiSelectChoices', var refreshDelay = scope.$eval(attrs.refreshDelay); $select.refreshDelay = refreshDelay !== undefined ? refreshDelay : uiSelectConfig.refreshDelay; }); + + if (appendToBody) { + scope.$watch('$select.open', function(isOpen) { + if (isOpen) { + positionDropdown(); + } else { + resetDropdown(); + } + }); + } + + // Hold on to a reference to the .ui-select-container element for appendToBody support + var parent = element.parent(); + + function positionDropdown() { + if (!appendToBody) { + return; + } + + // Move the dropdown element to the end of the body + $document.find('body').append(element); + + var position = uisOffset(parent); + element[0].style.left = position.left + 'px'; + element[0].style.top = position.top + parent[0].offsetHeight + 'px'; + element[0].style.width = parent[0].offsetWidth + 'px'; + } + + function resetDropdown() { + if (!appendToBody) { + return; + } + parent.append(element); + element[0].style.left = ''; + element[0].style.top = ''; + element[0].style.width = ''; + } + }; } }; From 391e0818b5dce95b304f3ca17064d60c792eebd1 Mon Sep 17 00:00:00 2001 From: Christopher Lenz Date: Mon, 9 Mar 2015 11:57:55 +0100 Subject: [PATCH 2/5] Add demo page to show and test the append-to-body option. --- examples/demo-append-to-body.html | 132 ++++++++++++++++++++++++++++++ examples/demo.js | 19 ++++- 2 files changed, 150 insertions(+), 1 deletion(-) create mode 100644 examples/demo-append-to-body.html diff --git a/examples/demo-append-to-body.html b/examples/demo-append-to-body.html new file mode 100644 index 000000000..83e5dc1b2 --- /dev/null +++ b/examples/demo-append-to-body.html @@ -0,0 +1,132 @@ + + + + + AngularJS ui-select + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
          +

          Bootstrap theme

          +

          Selected: {{address.selected.formatted_address}}

          + + {{$select.selected.formatted_address}} + +
          +           +           +

          The select dropdown menu should be displayed above this element.

          +
          + +
          +

          Select2 theme

          +

          Selected: {{person.selected}}

          + + {{$select.selected.name}} + +
          + + email: {{person.email}} + age: + +           +           +

          The select dropdown menu should be displayed above this element.

          +
          + +
          +

          Selectize theme

          +

          Selected: {{country.selected}}

          + + {{$select.selected.name}} + + + + + +

          The select dropdown menu should be displayed above this element.

          +
          + + diff --git a/examples/demo.js b/examples/demo.js index 1574c52c9..b1aba1c7c 100644 --- a/examples/demo.js +++ b/examples/demo.js @@ -39,7 +39,7 @@ app.filter('propsFilter', function() { }; }); -app.controller('DemoCtrl', function($scope, $http, $timeout) { +app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) { $scope.disabled = undefined; $scope.searchEnabled = undefined; @@ -143,6 +143,23 @@ app.controller('DemoCtrl', function($scope, $http, $timeout) { $scope.multipleDemo.selectedPeopleWithGroupBy = [$scope.people[8], $scope.people[6]]; $scope.multipleDemo.selectedPeopleSimple = ['samantha@email.com','wladimir@email.com']; + $scope.appendToBodyDemo = { + remainingToggleTime: 0, + present: true, + startToggleTimer: function() { + var scope = $scope.appendToBodyDemo; + var promise = $interval(function() { + if (scope.remainingTime < 1000) { + $interval.cancel(promise); + scope.present = !scope.present; + scope.remainingTime = 0; + } else { + scope.remainingTime -= 1000; + } + }, 1000); + scope.remainingTime = 3000; + } + }; $scope.address = {}; $scope.refreshAddresses = function(address) { From a4e2f53e39ab4e5c269cef9f96bb057f878f90ac Mon Sep 17 00:00:00 2001 From: Christopher Lenz Date: Mon, 9 Mar 2015 12:13:15 +0100 Subject: [PATCH 3/5] Move the dropdown element back to its original location in the DOM when the scope is destroyed. This fixes issues with the dropdown potentially sticking around when the user navigates away, or the select field is otherwise removed. --- src/uiSelectChoicesDirective.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/uiSelectChoicesDirective.js b/src/uiSelectChoicesDirective.js index 866b8907e..876ee7562 100644 --- a/src/uiSelectChoicesDirective.js +++ b/src/uiSelectChoicesDirective.js @@ -70,6 +70,12 @@ uis.directive('uiSelectChoices', resetDropdown(); } }); + + // Move the dropdown back to its original location when the scope is destroyed. Otherwise + // it might stick around when the user routes away or the select field is otherwise removed + scope.$on('$destroy', function() { + resetDropdown(); + }); } // Hold on to a reference to the .ui-select-container element for appendToBody support @@ -93,7 +99,10 @@ uis.directive('uiSelectChoices', if (!appendToBody) { return; } + + // Move the dropdown element back to its original location in the DOM parent.append(element); + element[0].style.left = ''; element[0].style.top = ''; element[0].style.width = ''; From 167325aac05f078bbdd7dc22dec5ce7c4fd9a8b7 Mon Sep 17 00:00:00 2001 From: Christopher Lenz Date: Mon, 9 Mar 2015 12:14:14 +0100 Subject: [PATCH 4/5] Remove bogus template changes. --- src/bootstrap/choices.tpl.html | 4 ++-- src/select2/choices.tpl.html | 3 +-- src/selectize/choices.tpl.html | 3 +-- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/src/bootstrap/choices.tpl.html b/src/bootstrap/choices.tpl.html index 304771720..b869c5d21 100644 --- a/src/bootstrap/choices.tpl.html +++ b/src/bootstrap/choices.tpl.html @@ -1,11 +1,11 @@
            + ng-show="$select.items.length > 0">
          • -
            diff --git a/src/select2/choices.tpl.html b/src/select2/choices.tpl.html index 0546cc7a0..f462dab92 100644 --- a/src/select2/choices.tpl.html +++ b/src/select2/choices.tpl.html @@ -1,5 +1,4 @@ -
              +
                • +
                  From 39c3f8492d03a820fe2aa6ddf0898ebdb26082b1 Mon Sep 17 00:00:00 2001 From: Christopher Lenz Date: Mon, 9 Mar 2015 12:27:39 +0100 Subject: [PATCH 5/5] These CSS selectors still need to be scoped to apply only to the Bootstrap theme, but in a way that works even when the choices element is pulled out of the select element. --- src/bootstrap/choices.tpl.html | 2 +- src/common.css | 13 +++++++------ 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/bootstrap/choices.tpl.html b/src/bootstrap/choices.tpl.html index b869c5d21..5dba0fc59 100644 --- a/src/bootstrap/choices.tpl.html +++ b/src/bootstrap/choices.tpl.html @@ -1,4 +1,4 @@ -
                    diff --git a/src/common.css b/src/common.css index df46a2a2e..7b6b820f9 100644 --- a/src/common.css +++ b/src/common.css @@ -108,7 +108,7 @@ } /* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */ -.ui-select-choices { +.ui-select-choices-bootstrap { width: 100%; height: auto; max-height: 200px; @@ -163,7 +163,7 @@ border-right: 1px solid #428bca; } -.ui-select-choices-row>a { +.ui-select-choices-bootstrap .ui-select-choices-row>a { display: block; padding: 3px 20px; clear: both; @@ -173,21 +173,22 @@ white-space: nowrap; } -.ui-select-choices-row>a:hover, .ui-select-choices-row>a:focus { +.ui-select-choices-bootstrap .ui-select-choices-row>a:hover, +.ui-select-choices-bootstrap .ui-select-choices-row>a:focus { text-decoration: none; color: #262626; background-color: #f5f5f5; } -.ui-select-choices-row.active>a { +.ui-select-choices-bootstrap .ui-select-choices-row.active>a { color: #fff; text-decoration: none; outline: 0; background-color: #428bca; } -.ui-select-choices-row.disabled>a, -.ui-select-choices-row.active.disabled>a { +.ui-select-choices-bootstrap .ui-select-choices-row.disabled>a, +.ui-select-choices-bootstrap .ui-select-choices-row.active.disabled>a { color: #777; cursor: not-allowed; background-color: #fff;