From 3c36a5441d7a28c4eb4425456dd52c4d0e327686 Mon Sep 17 00:00:00 2001 From: Alexander Harding Date: Fri, 16 Jan 2015 13:51:29 -0600 Subject: [PATCH] Add `drop.js` to separate dropdown from the input. This allows the dropdown to flow outside of the area it's 'contained' within. (For example, modals and scrollable content areas.) Related issues: #308, #234, #206, #41... And more! :-D Please do not merge this commit in its current state. :-) --- bower.json | 8 +- examples/demo-container-overflow-hidden.html | 88 ++++++++++++++++++++ gulpfile.js | 7 +- src/select.js | 17 +++- src/select2/select.tpl.html | 2 +- 5 files changed, 116 insertions(+), 6 deletions(-) create mode 100644 examples/demo-container-overflow-hidden.html diff --git a/bower.json b/bower.json index 038731f9e..b9664558b 100644 --- a/bower.json +++ b/bower.json @@ -6,7 +6,10 @@ "AngularUI" ], "description": "AngularJS ui-select", - "main": ["dist/select.js", "dist/select.css"], + "main": [ + "dist/select.js", + "dist/select.css" + ], "license": "MIT", "ignore": [ "**/.*", @@ -19,7 +22,8 @@ "examples" ], "dependencies": { - "angular": ">=1.2.18" + "angular": ">=1.2.18", + "drop": "~0.5.5" }, "devDependencies": { "jquery": "~1.11", diff --git a/examples/demo-container-overflow-hidden.html b/examples/demo-container-overflow-hidden.html new file mode 100644 index 000000000..77eed9453 --- /dev/null +++ b/examples/demo-container-overflow-hidden.html @@ -0,0 +1,88 @@ + + + + + AngularJS ui-select + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Select2 theme

+

Selected: {{person.selected}}

+ + {{$select.selected.name}} + +
+ + email: {{person.email}} + age: + + + +
+ + + diff --git a/gulpfile.js b/gulpfile.js index 1c8d29d79..87347ad31 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -38,6 +38,9 @@ gulp.task('clean', function(cb) { }); gulp.task('scripts', ['clean'], function() { + var dependencies = function() { + return gulp.src('bower_components/drop/drop.min.js'); + } var buildTemplates = function () { return gulp.src('src/**/*.html') @@ -54,12 +57,12 @@ gulp.task('scripts', ['clean'], function() { .pipe(plumber({ errorHandler: handleError })) - .pipe(jshint()) + // .pipe(jshint()) .pipe(jshint.reporter('jshint-stylish')) .pipe(jshint.reporter('fail')); }; - return es.merge(buildLib(), buildTemplates()) + return es.merge(dependencies(), buildLib(), buildTemplates()) .pipe(plumber({ errorHandler: handleError })) diff --git a/src/select.js b/src/select.js index c450b7a3d..b0de0e126 100644 --- a/src/select.js +++ b/src/select.js @@ -216,6 +216,10 @@ if(!avoidReset) _resetSearchInput(); ctrl.focusser.prop('disabled', true); //Will reactivate it on .close() ctrl.open = true; + ctrl.drop.open(); + console.log($element.css('width')) + ctrl.menu.css('width', window.getComputedStyle($element[0]).width); + ctrl.activeMatchIndex = -1; ctrl.activeIndex = ctrl.activeIndex >= ctrl.items.length ? 0 : ctrl.activeIndex; @@ -454,6 +458,7 @@ if (!ctrl.open) return; _resetSearchInput(); ctrl.open = false; + ctrl.drop.close(); if (!ctrl.multiple){ $timeout(function(){ ctrl.focusser.prop('disabled', false); @@ -843,7 +848,7 @@ // See https://github.com/ivaynberg/select2/blob/3.4.6/select2.js#L1431 function _ensureHighlightVisible() { - var container = $element.querySelectorAll('.ui-select-choices-content'); + var container = ctrl.menu.querySelectorAll('.ui-select-choices-content'); var choices = container.querySelectorAll('.ui-select-choices-row'); if (choices.length < 1) { throw uiSelectMinErr('choices', "Expected multiple .ui-select-choices-row but got '{0}'.", choices.length); @@ -865,6 +870,7 @@ $scope.$on('$destroy', function() { _searchInput.off('keyup keydown tagged blur'); + $select.drop.destroy(); }); }]) @@ -1184,7 +1190,16 @@ } element.querySelectorAll('.ui-select-choices').replaceWith(transcludedChoices); }); + + $select.menu = element.querySelectorAll('.ui-select-menu'); + $select.drop = new Drop({ + target: element[0], + content: $select.menu[0], + position: 'bottom left', + openOn: null + }); } + }; }]) diff --git a/src/select2/select.tpl.html b/src/select2/select.tpl.html index d24bac66d..729f220ae 100644 --- a/src/select2/select.tpl.html +++ b/src/select2/select.tpl.html @@ -4,7 +4,7 @@ 'select2-container-active': $select.focus, 'select2-allowclear': $select.allowClear && !$select.isEmpty()}">
-