From 067ded4221cb1d847edad0f9a35c766c283abac4 Mon Sep 17 00:00:00 2001 From: Pavel Blagodov Date: Mon, 24 Apr 2017 15:30:26 +0700 Subject: [PATCH] MB-24041: do not upgrade ui-selectize ui-select v0.19.5 has issues with ngAnimate https://github.com/angular-ui/ui-select/issues/224 Here is workaround https://github.com/angular-ui/ui-select/ issues/1325#issuecomment-160922087 to run current ui-select with new angular version. Add class to ui-select-match and ui-select-choices with the same name. Change-Id: Ifd6103afcfa6704daaa8335cce6d52ab4bcd3208 Reviewed-on: http://review.couchbase.org/77239 Tested-by: Pavel Blagodov Reviewed-by: Michael Wiederhold --- .../mn_admin/mn_analytics/mn_analytics.html | 14 +- .../list/mn_documents_control.html | 4 +- .../mn_documents/list/mn_documents_list.html | 7 +- .../mn_views/list/mn_views_list.html | 7 +- priv/public/ui/index.html | 2 +- .../ui/libs/angular-ui-select-0.19.5.js | 2393 ----------------- 6 files changed, 24 insertions(+), 2403 deletions(-) delete mode 100644 priv/public/ui/libs/angular-ui-select-0.19.5.js diff --git a/priv/public/ui/app/mn_admin/mn_analytics/mn_analytics.html b/priv/public/ui/app/mn_admin/mn_analytics/mn_analytics.html index 20f1b7dc00..ad9b8404cb 100644 --- a/priv/public/ui/app/mn_admin/mn_analytics/mn_analytics.html +++ b/priv/public/ui/app/mn_admin/mn_analytics/mn_analytics.html @@ -13,8 +13,11 @@ theme="selectize" ng-disabled="disabled" on-select="analyticsCtl.onSelectBucket($item)"> - {{$select.selected}} - + {{$select.selected}} + @@ -26,8 +29,11 @@ theme="selectize" ng-disabled="disabled" on-select="analyticsCtl.onSelectNode($item)"> - {{$select.selected}} - + {{$select.selected}} + diff --git a/priv/public/ui/app/mn_admin/mn_documents/list/mn_documents_control.html b/priv/public/ui/app/mn_admin/mn_documents/list/mn_documents_control.html index df45deb672..2004ee7b70 100644 --- a/priv/public/ui/app/mn_admin/mn_documents/list/mn_documents_control.html +++ b/priv/public/ui/app/mn_admin/mn_documents/list/mn_documents_control.html @@ -16,8 +16,10 @@ theme="selectize" on-select="documentsControlCtl.onSelectPageLimits($item)" class="inline middle cbui narrow"> - {{$select.selected}} + {{$select.selected}} - {{$select.selected}} - + {{$select.selected}} + diff --git a/priv/public/ui/app/mn_admin/mn_indexes/mn_views/list/mn_views_list.html b/priv/public/ui/app/mn_admin/mn_indexes/mn_views/list/mn_views_list.html index cfa846bbe4..b90f304ffa 100644 --- a/priv/public/ui/app/mn_admin/mn_indexes/mn_views/list/mn_views_list.html +++ b/priv/public/ui/app/mn_admin/mn_indexes/mn_views/list/mn_views_list.html @@ -18,8 +18,11 @@ on-select="viewsCtl.onSelectBucket($item)" theme="selectize" class="inline"> - {{$select.selected}} - + {{$select.selected}} + diff --git a/priv/public/ui/index.html b/priv/public/ui/index.html index f821b9ff40..000175d302 100644 --- a/priv/public/ui/index.html +++ b/priv/public/ui/index.html @@ -44,7 +44,7 @@ - + diff --git a/priv/public/ui/libs/angular-ui-select-0.19.5.js b/priv/public/ui/libs/angular-ui-select-0.19.5.js deleted file mode 100644 index 6061799e14..0000000000 --- a/priv/public/ui/libs/angular-ui-select-0.19.5.js +++ /dev/null @@ -1,2393 +0,0 @@ -/*! - * ui-select - * http://github.com/angular-ui/ui-select - * Version: 0.19.5 - 2016-10-24T23:13:59.434Z - * License: MIT - */ - - -(function () { -"use strict"; -var KEY = { - TAB: 9, - ENTER: 13, - ESC: 27, - SPACE: 32, - LEFT: 37, - UP: 38, - RIGHT: 39, - DOWN: 40, - SHIFT: 16, - CTRL: 17, - ALT: 18, - PAGE_UP: 33, - PAGE_DOWN: 34, - HOME: 36, - END: 35, - BACKSPACE: 8, - DELETE: 46, - COMMAND: 91, - - MAP: { 91 : "COMMAND", 8 : "BACKSPACE" , 9 : "TAB" , 13 : "ENTER" , 16 : "SHIFT" , 17 : "CTRL" , 18 : "ALT" , 19 : "PAUSEBREAK" , 20 : "CAPSLOCK" , 27 : "ESC" , 32 : "SPACE" , 33 : "PAGE_UP", 34 : "PAGE_DOWN" , 35 : "END" , 36 : "HOME" , 37 : "LEFT" , 38 : "UP" , 39 : "RIGHT" , 40 : "DOWN" , 43 : "+" , 44 : "PRINTSCREEN" , 45 : "INSERT" , 46 : "DELETE", 48 : "0" , 49 : "1" , 50 : "2" , 51 : "3" , 52 : "4" , 53 : "5" , 54 : "6" , 55 : "7" , 56 : "8" , 57 : "9" , 59 : ";", 61 : "=" , 65 : "A" , 66 : "B" , 67 : "C" , 68 : "D" , 69 : "E" , 70 : "F" , 71 : "G" , 72 : "H" , 73 : "I" , 74 : "J" , 75 : "K" , 76 : "L", 77 : "M" , 78 : "N" , 79 : "O" , 80 : "P" , 81 : "Q" , 82 : "R" , 83 : "S" , 84 : "T" , 85 : "U" , 86 : "V" , 87 : "W" , 88 : "X" , 89 : "Y" , 90 : "Z", 96 : "0" , 97 : "1" , 98 : "2" , 99 : "3" , 100 : "4" , 101 : "5" , 102 : "6" , 103 : "7" , 104 : "8" , 105 : "9", 106 : "*" , 107 : "+" , 109 : "-" , 110 : "." , 111 : "/", 112 : "F1" , 113 : "F2" , 114 : "F3" , 115 : "F4" , 116 : "F5" , 117 : "F6" , 118 : "F7" , 119 : "F8" , 120 : "F9" , 121 : "F10" , 122 : "F11" , 123 : "F12", 144 : "NUMLOCK" , 145 : "SCROLLLOCK" , 186 : ";" , 187 : "=" , 188 : "," , 189 : "-" , 190 : "." , 191 : "/" , 192 : "`" , 219 : "[" , 220 : "\\" , 221 : "]" , 222 : "'" - }, - - isControl: function (e) { - var k = e.which; - switch (k) { - case KEY.COMMAND: - case KEY.SHIFT: - case KEY.CTRL: - case KEY.ALT: - return true; - } - - if (e.metaKey || e.ctrlKey || e.altKey) return true; - - return false; - }, - isFunctionKey: function (k) { - k = k.which ? k.which : k; - return k >= 112 && k <= 123; - }, - isVerticalMovement: function (k){ - return ~[KEY.UP, KEY.DOWN].indexOf(k); - }, - isHorizontalMovement: function (k){ - return ~[KEY.LEFT,KEY.RIGHT,KEY.BACKSPACE,KEY.DELETE].indexOf(k); - }, - toSeparator: function (k) { - var sep = {ENTER:"\n",TAB:"\t",SPACE:" "}[k]; - if (sep) return sep; - // return undefined for special keys other than enter, tab or space. - // no way to use them to cut strings. - return KEY[k] ? undefined : k; - } - }; - -/** - * Add querySelectorAll() to jqLite. - * - * jqLite find() is limited to lookups by tag name. - * TODO This will change with future versions of AngularJS, to be removed when this happens - * - * See jqLite.find - why not use querySelectorAll? https://github.com/angular/angular.js/issues/3586 - * See feat(jqLite): use querySelectorAll instead of getElementsByTagName in jqLite.find https://github.com/angular/angular.js/pull/3598 - */ -if (angular.element.prototype.querySelectorAll === undefined) { - angular.element.prototype.querySelectorAll = function(selector) { - return angular.element(this[0].querySelectorAll(selector)); - }; -} - -/** - * Add closest() to jqLite. - */ -if (angular.element.prototype.closest === undefined) { - angular.element.prototype.closest = function( selector) { - var elem = this[0]; - var matchesSelector = elem.matches || elem.webkitMatchesSelector || elem.mozMatchesSelector || elem.msMatchesSelector; - - while (elem) { - if (matchesSelector.bind(elem)(selector)) { - return elem; - } else { - elem = elem.parentElement; - } - } - return false; - }; -} - -var latestId = 0; - -var uis = angular.module('ui.select', []) - -.constant('uiSelectConfig', { - theme: 'bootstrap', - searchEnabled: true, - sortable: false, - placeholder: '', // Empty by default, like HTML tag "); - $compile(focusser)(scope); - $select.focusser = focusser; - - //Input that will handle focus - $select.focusInput = focusser; - - element.parent().append(focusser); - focusser.bind("focus", function(){ - scope.$evalAsync(function(){ - $select.focus = true; - }); - }); - focusser.bind("blur", function(){ - scope.$evalAsync(function(){ - $select.focus = false; - }); - }); - focusser.bind("keydown", function(e){ - - if (e.which === KEY.BACKSPACE) { - e.preventDefault(); - e.stopPropagation(); - $select.select(undefined); - scope.$apply(); - return; - } - - if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC) { - return; - } - - if (e.which == KEY.DOWN || e.which == KEY.UP || e.which == KEY.ENTER || e.which == KEY.SPACE){ - e.preventDefault(); - e.stopPropagation(); - $select.activate(); - } - - scope.$digest(); - }); - - focusser.bind("keyup input", function(e){ - - if (e.which === KEY.TAB || KEY.isControl(e) || KEY.isFunctionKey(e) || e.which === KEY.ESC || e.which == KEY.ENTER || e.which === KEY.BACKSPACE) { - return; - } - - $select.activate(focusser.val()); //User pressed some regular key, so we pass it to the search input - focusser.val(''); - scope.$digest(); - - }); - - - } - }; -}]); - -// Make multiple matches sortable -uis.directive('uiSelectSort', ['$timeout', 'uiSelectConfig', 'uiSelectMinErr', function($timeout, uiSelectConfig, uiSelectMinErr) { - return { - require: ['^^uiSelect', '^ngModel'], - link: function(scope, element, attrs, ctrls) { - if (scope[attrs.uiSelectSort] === null) { - throw uiSelectMinErr('sort', 'Expected a list to sort'); - } - - var $select = ctrls[0]; - var $ngModel = ctrls[1]; - - var options = angular.extend({ - axis: 'horizontal' - }, - scope.$eval(attrs.uiSelectSortOptions)); - - var axis = options.axis; - var draggingClassName = 'dragging'; - var droppingClassName = 'dropping'; - var droppingBeforeClassName = 'dropping-before'; - var droppingAfterClassName = 'dropping-after'; - - scope.$watch(function(){ - return $select.sortable; - }, function(newValue){ - if (newValue) { - element.attr('draggable', true); - } else { - element.removeAttr('draggable'); - } - }); - - element.on('dragstart', function(event) { - element.addClass(draggingClassName); - - (event.dataTransfer || event.originalEvent.dataTransfer).setData('text', scope.$index.toString()); - }); - - element.on('dragend', function() { - removeClass(draggingClassName); - }); - - var move = function(from, to) { - /*jshint validthis: true */ - this.splice(to, 0, this.splice(from, 1)[0]); - }; - - var removeClass = function(className) { - angular.forEach($select.$element.querySelectorAll('.' + className), function(el){ - angular.element(el).removeClass(className); - }); - }; - - var dragOverHandler = function(event) { - event.preventDefault(); - - var offset = axis === 'vertical' ? event.offsetY || event.layerY || (event.originalEvent ? event.originalEvent.offsetY : 0) : event.offsetX || event.layerX || (event.originalEvent ? event.originalEvent.offsetX : 0); - - if (offset < (this[axis === 'vertical' ? 'offsetHeight' : 'offsetWidth'] / 2)) { - removeClass(droppingAfterClassName); - element.addClass(droppingBeforeClassName); - - } else { - removeClass(droppingBeforeClassName); - element.addClass(droppingAfterClassName); - } - }; - - var dropTimeout; - - var dropHandler = function(event) { - event.preventDefault(); - - var droppedItemIndex = parseInt((event.dataTransfer || event.originalEvent.dataTransfer).getData('text'), 10); - - // prevent event firing multiple times in firefox - $timeout.cancel(dropTimeout); - dropTimeout = $timeout(function() { - _dropHandler(droppedItemIndex); - }, 20); - }; - - var _dropHandler = function(droppedItemIndex) { - var theList = scope.$eval(attrs.uiSelectSort); - var itemToMove = theList[droppedItemIndex]; - var newIndex = null; - - if (element.hasClass(droppingBeforeClassName)) { - if (droppedItemIndex < scope.$index) { - newIndex = scope.$index - 1; - } else { - newIndex = scope.$index; - } - } else { - if (droppedItemIndex < scope.$index) { - newIndex = scope.$index; - } else { - newIndex = scope.$index + 1; - } - } - - move.apply(theList, [droppedItemIndex, newIndex]); - - $ngModel.$setViewValue(Date.now()); - - scope.$apply(function() { - scope.$emit('uiSelectSort:change', { - array: theList, - item: itemToMove, - from: droppedItemIndex, - to: newIndex - }); - }); - - removeClass(droppingClassName); - removeClass(droppingBeforeClassName); - removeClass(droppingAfterClassName); - - element.off('drop', dropHandler); - }; - - element.on('dragenter', function() { - if (element.hasClass(draggingClassName)) { - return; - } - - element.addClass(droppingClassName); - - element.on('dragover', dragOverHandler); - element.on('drop', dropHandler); - }); - - element.on('dragleave', function(event) { - if (event.target != element) { - return; - } - - removeClass(droppingClassName); - removeClass(droppingBeforeClassName); - removeClass(droppingAfterClassName); - - element.off('dragover', dragOverHandler); - element.off('drop', dropHandler); - }); - } - }; -}]); - -/** - * Debounces functions - * - * Taken from UI Bootstrap $$debounce source code - * See https://github.com/angular-ui/bootstrap/blob/master/src/debounce/debounce.js - * - */ -uis.factory('$$uisDebounce', ['$timeout', function($timeout) { - return function(callback, debounceTime) { - var timeoutPromise; - - return function() { - var self = this; - var args = Array.prototype.slice.call(arguments); - if (timeoutPromise) { - $timeout.cancel(timeoutPromise); - } - - timeoutPromise = $timeout(function() { - callback.apply(self, args); - }, debounceTime); - }; - }; -}]); - -uis.directive('uisOpenClose', ['$parse', '$timeout', function ($parse, $timeout) { - return { - restrict: 'A', - require: 'uiSelect', - link: function (scope, element, attrs, $select) { - $select.onOpenCloseCallback = $parse(attrs.uisOpenClose); - - scope.$watch('$select.open', function (isOpen, previousState) { - if (isOpen !== previousState) { - $timeout(function () { - $select.onOpenCloseCallback(scope, { - isOpen: isOpen - }); - }); - } - }); - } - }; -}]); - -/** - * Parses "repeat" attribute. - * - * Taken from AngularJS ngRepeat source code - * See https://github.com/angular/angular.js/blob/v1.2.15/src/ng/directive/ngRepeat.js#L211 - * - * Original discussion about parsing "repeat" attribute instead of fully relying on ng-repeat: - * https://github.com/angular-ui/ui-select/commit/5dd63ad#commitcomment-5504697 - */ - -uis.service('uisRepeatParser', ['uiSelectMinErr','$parse', function(uiSelectMinErr, $parse) { - var self = this; - - /** - * Example: - * expression = "address in addresses | filter: {street: $select.search} track by $index" - * itemName = "address", - * source = "addresses | filter: {street: $select.search}", - * trackByExp = "$index", - */ - self.parse = function(expression) { - - - var match; - //var isObjectCollection = /\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)/.test(expression); - // If an array is used as collection - - // if (isObjectCollection){ - // 000000000000000000000000000000111111111000000000000000222222222222220033333333333333333333330000444444444444444444000000000000000055555555555000000000000000000000066666666600000000 - match = expression.match(/^\s*(?:([\s\S]+?)\s+as\s+)?(?:([\$\w][\$\w]*)|(?:\(\s*([\$\w][\$\w]*)\s*,\s*([\$\w][\$\w]*)\s*\)))\s+in\s+(\s*[\s\S]+?)?(?:\s+track\s+by\s+([\s\S]+?))?\s*$/); - - // 1 Alias - // 2 Item - // 3 Key on (key,value) - // 4 Value on (key,value) - // 5 Source expression (including filters) - // 6 Track by - - if (!match) { - throw uiSelectMinErr('iexp', "Expected expression in form of '_item_ in _collection_[ track by _id_]' but got '{0}'.", - expression); - } - - var source = match[5], - filters = ''; - - // When using (key,value) ui-select requires filters to be extracted, since the object - // is converted to an array for $select.items - // (in which case the filters need to be reapplied) - if (match[3]) { - // Remove any enclosing parenthesis - source = match[5].replace(/(^\()|(\)$)/g, ''); - // match all after | but not after || - var filterMatch = match[5].match(/^\s*(?:[\s\S]+?)(?:[^\|]|\|\|)+([\s\S]*)\s*$/); - if(filterMatch && filterMatch[1].trim()) { - filters = filterMatch[1]; - source = source.replace(filters, ''); - } - } - - return { - itemName: match[4] || match[2], // (lhs) Left-hand side, - keyName: match[3], //for (key, value) syntax - source: $parse(source), - filters: filters, - trackByExp: match[6], - modelMapper: $parse(match[1] || match[4] || match[2]), - repeatExpression: function (grouped) { - var expression = this.itemName + ' in ' + (grouped ? '$group.items' : '$select.items'); - if (this.trackByExp) { - expression += ' track by ' + this.trackByExp; - } - return expression; - } - }; - - }; - - self.getGroupNgRepeatExpression = function() { - return '$group in $select.groups track by $group.name'; - }; - -}]); - -}()); -angular.module("ui.select").run(["$templateCache", function($templateCache) {$templateCache.put("bootstrap/choices.tpl.html","
    0\">
  • 0\">
"); -$templateCache.put("bootstrap/match-multiple.tpl.html"," × "); -$templateCache.put("bootstrap/match.tpl.html","
{{$select.placeholder}}
"); -$templateCache.put("bootstrap/no-choice.tpl.html","
"); -$templateCache.put("bootstrap/select-multiple.tpl.html","
"); -$templateCache.put("bootstrap/select.tpl.html","
"); -$templateCache.put("select2/choices.tpl.html","
"); -$templateCache.put("select2/match-multiple.tpl.html","
    • "); -$templateCache.put("select2/match.tpl.html","{{$select.placeholder}} "); -$templateCache.put("select2/no-choice.tpl.html","
    "); -$templateCache.put("select2/select-multiple.tpl.html","
    "); -$templateCache.put("select2/select.tpl.html","
    "); -$templateCache.put("selectize/choices.tpl.html","
    "); -$templateCache.put("selectize/match-multiple.tpl.html","
    ×
    "); -$templateCache.put("selectize/match.tpl.html","
    {{$select.placeholder}}
    "); -$templateCache.put("selectize/no-choice.tpl.html","
    "); -$templateCache.put("selectize/select-multiple.tpl.html","
    "); -$templateCache.put("selectize/select.tpl.html","
    ");}]); \ No newline at end of file