From 20ecdc55550ee5d4a588e4cf451e9f06c9a4ecb7 Mon Sep 17 00:00:00 2001 From: Maxime Le Breton Date: Wed, 27 May 2015 20:46:09 +0200 Subject: [PATCH 1/5] bind touchstart for mobile compatibility --- src/multiselect.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/multiselect.js b/src/multiselect.js index afd29a6..45cd334 100644 --- a/src/multiselect.js +++ b/src/multiselect.js @@ -265,11 +265,11 @@ angular.module('ui.multiselect', []) scope.toggleSelect = function () { if (element.hasClass('open')) { element.removeClass('open'); - $document.unbind('click', clickHandler); + $document.unbind('touchstart click', clickHandler); scope.$parent.$eval(scope.onBlur); } else { element.addClass('open'); - $document.bind('click', clickHandler); + $document.bind('touchstart click', clickHandler); scope.focus(); } }; @@ -279,7 +279,7 @@ angular.module('ui.multiselect', []) scope.$parent.$eval(scope.onBlur); } else { element.removeClass('open'); - $document.unbind('click', clickHandler); + $document.unbind('touchstart click', clickHandler); scope.$apply(); } } From 319c6cdc700eda080e3bbcb205f54371a86db6cf Mon Sep 17 00:00:00 2001 From: Maxime Le Breton Date: Fri, 6 Nov 2015 14:42:18 +0100 Subject: [PATCH 2/5] ugly function to prevent dropdown overflow --- src/multiselect.js | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/src/multiselect.js b/src/multiselect.js index 45cd334..596adc0 100644 --- a/src/multiselect.js +++ b/src/multiselect.js @@ -47,6 +47,7 @@ angular.module('ui.multiselect', []) scope = originalScope.$new(), changeHandler = attrs.change || angular.noop; + scope.model = null; scope.items = []; scope.header = 'Select'; scope.multiple = isMultiple; @@ -87,14 +88,19 @@ angular.module('ui.multiselect', []) scope.$watch(function () { return parsedResult.source(originalScope); }, function (newVal) { - if (angular.isDefined(newVal)) + if (angular.isDefined(newVal)) { parseModel(); + if (angular.isDefined(modelCtrl.$modelValue)) { + markChecked(modelCtrl.$modelValue); + } + } }, true); //watch model change scope.$watch(function () { return modelCtrl.$modelValue; }, function (newVal, oldVal) { + scope.model = newVal; //when directive initialize, newVal usually undefined. Also, if model value already set in the controller //for preselected list then we need to mark checked in our scope item. But we don't want to do this every time //model changes. We need to do this only if it is done outside directive scope, from controller, for example. @@ -212,14 +218,22 @@ angular.module('ui.multiselect', []) } }); } else { + var found = []; angular.forEach(scope.items, function (item) { item.checked = false; angular.forEach(newVal, function (i) { if (angular.equals(item.model, i)) { item.checked = true; + found.push(i); } }); }); + // remove unfound items + for(var i=0; i Date: Fri, 6 Nov 2015 15:01:29 +0100 Subject: [PATCH 3/5] fix unset minheight --- src/multiselect.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/multiselect.js b/src/multiselect.js index 596adc0..451bddb 100644 --- a/src/multiselect.js +++ b/src/multiselect.js @@ -282,17 +282,14 @@ angular.module('ui.multiselect', []) $document.unbind('touchstart click', clickHandler); scope.$parent.$eval(scope.onBlur); - unsetBodyMinHeight(); } else { element.addClass('open'); $document.bind('touchstart click', clickHandler); scope.focus(); - - setBodyMinHeight( element.find('.dropdown-menu') ); } }; - // ugly function to prevent dropdown overflow + // ugly function to prevent dropdown overflow function setBodyMinHeight(dropdownElement) { var dropdownOffsetY = dropdownElement.offset().top; var dropdownHeight = dropdownElement.height(); @@ -309,11 +306,13 @@ angular.module('ui.multiselect', []) function clickHandler(event) { if (elementMatchesAnyInArray(event.target, element.find(event.target.tagName))) { scope.$parent.$eval(scope.onBlur); + setBodyMinHeight( element.find('.dropdown-menu') ); + } else { - element.removeClass('open'); - $document.unbind('touchstart click', clickHandler); - scope.$apply(); unsetBodyMinHeight(); + element.removeClass('open'); + $document.unbind('touchstart click', clickHandler); + scope.$apply(); } } From b6cdb03391c6f25539b27df3188397875737a043 Mon Sep 17 00:00:00 2001 From: Maxime Le Breton Date: Fri, 6 Nov 2015 15:08:04 +0100 Subject: [PATCH 4/5] outerHeight --- src/multiselect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/multiselect.js b/src/multiselect.js index 451bddb..762d8f8 100644 --- a/src/multiselect.js +++ b/src/multiselect.js @@ -292,7 +292,7 @@ angular.module('ui.multiselect', []) // ugly function to prevent dropdown overflow function setBodyMinHeight(dropdownElement) { var dropdownOffsetY = dropdownElement.offset().top; - var dropdownHeight = dropdownElement.height(); + var dropdownHeight = dropdownElement.outerHeight(); var calcMinHeight = dropdownOffsetY + dropdownHeight; From 24965ba875cdd66e7413b6519cbde1786c33473a Mon Sep 17 00:00:00 2001 From: Maxime Le Breton Date: Mon, 9 Nov 2015 17:31:52 +0100 Subject: [PATCH 5/5] add 120px to the min height --- src/multiselect.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/multiselect.js b/src/multiselect.js index 762d8f8..87b443a 100644 --- a/src/multiselect.js +++ b/src/multiselect.js @@ -294,7 +294,7 @@ angular.module('ui.multiselect', []) var dropdownOffsetY = dropdownElement.offset().top; var dropdownHeight = dropdownElement.outerHeight(); - var calcMinHeight = dropdownOffsetY + dropdownHeight; + var calcMinHeight = dropdownOffsetY + dropdownHeight + 120; $('body').css('min-height', calcMinHeight+'px'); }