Merge pull request #12468 from nextcloud/multiselect-removal-fix

Remove conflicting multiselect

6 files changed, 1 insertions, 480 deletions

diff --git a/apps/encryption/templates/settings-admin.php b/apps/encryption/templates/settings-admin.php
index c5f8d9f5536..39d10490c44 100644
--- a/apps/encryption/templates/settings-admin.php
+++ b/apps/encryption/templates/settings-admin.php
@@ -2,7 +2,6 @@
 /** @var array $_ */
 /** @var \OCP\IL10N $l */
 script('encryption', 'settings-admin');
-script('core', 'multiselect');
 style('encryption', 'settings-admin');
 ?>
 <form id="ocDefaultEncryptionModule" class="sub-section">
diff --git a/apps/encryption/templates/settings-personal.php b/apps/encryption/templates/settings-personal.php
index 05a720687aa..41dacc534e6 100644
--- a/apps/encryption/templates/settings-personal.php
+++ b/apps/encryption/templates/settings-personal.php
@@ -2,7 +2,6 @@
 	/** @var array $_ */
 	/** @var \OCP\IL10N $l */
 script('encryption', 'settings-personal');
-script('core', 'multiselect');
 ?>
 <form id="ocDefaultEncryptionModule" class="section">
 	<h2 data-anchor-name="basic-encryption-module"><?php p($l->t('Basic encryption module')); ?></h2>
diff --git a/core/css/multiselect.scss b/core/css/multiselect.scss
deleted file mode 100644
index 6df137cc0f9..00000000000
--- a/core/css/multiselect.scss
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * @copyright Copyright (c) 2016, John Molakvoæ <skjnldsv@protonmail.com>
- * @copyright Copyright (c) 2016, Julius Haertl <jus@bitgrid.net>
- * @copyright Copyright (c) 2016, Sergio Bertolín <sbertolin@solidgear.es>
- * @copyright Copyright (c) 2015, Hendrik Leppelsack <hendrik@leppelsack.de>
- * @copyright Copyright (c) 2014, Vincent Petry <pvince81@owncloud.com>
- * @copyright Copyright (c) 2013, Vincent Petry <pvince81@owncloud.com>
- * @copyright Copyright (c) 2013, raghunayyar <me@iraghu.com>
- * @copyright Copyright (c) 2013, Victor Dubiniuk <victor.dubiniuk@gmail.com>
- * @copyright Copyright (c) 2013, kondou <kondou@ts.unde.re>
- * @copyright Copyright (c) 2012, Thomas Tanghus <thomas@tanghus.net>
- * @copyright Copyright (c) 2012, Lukas Reschke <lukas@statuscode.ch>
- * @copyright Copyright (c) 2012, Jan-Christoph Borchardt <hey@jancborchardt.net>
- *
- * @license GNU AGPL version 3 or any later version
- *
- */
-
-ul.multiselectoptions {
-	background-color: var(--color-main-background);
-	border: 1px solid var(--color-primary);
-	border-top: none;
-	box-shadow: 0 1px 10px var(--color-box-shadow);
-	padding-top: 8px;
-	position: absolute;
-	max-height: 20em;
-	overflow-y: auto;
-	z-index: 149;
-	&.down {
-		border-bottom-left-radius: 3px;
-		border-bottom-right-radius: 3px;
-		width: 100%;
-		/* do not cut off group names */
-		box-shadow: 0 1px 10px var(--color-box-shadow);
-	}
-	&.up {
-		border-top-left-radius: 3px;
-		border-top-right-radius: 3px;
-	}
-	> li {
-		overflow: hidden;
-		white-space: nowrap;
-		margin-left: 7px;
-		input[type='checkbox'] {
-			+ label {
-				font-weight: normal;
-				display: inline-block;
-				width: 100%;
-				padding: 5px 27px;
-				margin-left: -27px;
-				/* to have area around checkbox clickable as well */
-				text-overflow: ellipsis;
-				overflow: hidden;
-			}
-			&:checked + label {
-				font-weight: bold;
-			}
-		}
-	}
-	input.new {
-		padding-bottom: 3px;
-		padding-top: 3px;
-		margin: 0;
-	}
-	> li.creator {
-		padding: 10px;
-		margin: 0;
-		font-weight: bold;
-		> input {
-			width: 95% !important;
-			/* do not constrain size of text input */
-			padding: 5px;
-			margin: -5px;
-		}
-	}
-}
-
-/* TODO drop old legacy multiselect! */
-div.multiselect:not(.multiselect-vue),
-select.multiselect:not(.multiselect-vue) {
-	display: inline-block;
-	max-width: 200px;
-	min-width: 150px !important;
-	padding-right: 10px;
-	min-height: 20px;
-	position: relative;
-	vertical-align: bottom;
-}
-
-select.multiselect {
-	height: 30px;
-	min-width: 113px;
-}
-
-/* To make a select look like a multiselect until it's initialized */
-div.multiselect {
-	&.active {
-		background-color: var(--color-main-background);
-		position: relative;
-		z-index: 150;
-	}
-	&.up {
-		border-top: 0 none;
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
-	&.down {
-		border-bottom: none;
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-	> span {
-		&:first-child {
-			float: left;
-			margin-right: 32px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			width: 90%;
-			white-space: nowrap;
-			line-height: 20px;
-		}
-		&:last-child {
-			position: absolute;
-			right: 8px;
-			top: 8px;
-			padding: 0 !important;
-			min-width: 16px;
-			min-height: 16px;
-			background-position: center;
-		}
-	}
-}
diff --git a/core/css/server.scss b/core/css/server.scss
index 9b512038015..7269847ad91 100644
--- a/core/css/server.scss
+++ b/core/css/server.scss
@@ -6,7 +6,6 @@
 @import 'apps.scss';
 @import 'global.scss';
 @import 'fixes.scss';
-@import 'multiselect.scss';
 @import 'mobile.scss';
 @import 'tooltip.scss';
 @import 'public.scss';
\ No newline at end of file
diff --git a/core/js/multiselect.js b/core/js/multiselect.js
deleted file mode 100644
index bdf420a2f7f..00000000000
--- a/core/js/multiselect.js
+++ /dev/null
@@ -1,344 +0,0 @@
-/**
- * @param 'createCallback' A function to be called when a new entry is created.
- *    Two arguments are supplied to this function:
- *    The select element used and the value of the option. If the function
- *    returns false addition will be cancelled. If it returns
- *    anything else it will be used as the value of the newly added option.
- * @param 'createText' The placeholder text for the create action.
- * @param 'title' The title to show if no options are selected.
- * @param 'checked' An array containing values for options that should be
- *    checked. Any options which are already selected will be added to this array.
- * @param 'labels' The corresponding labels to show for the checked items.
- * @param 'oncheck' Callback function which will be called when a
- *    checkbox/radiobutton is selected. If the function returns false the input will be unchecked.
- * @param 'onuncheck' @see 'oncheck'.
- * @param 'singleSelect' If true radiobuttons will be used instead of
- *    checkboxes.
- */
-(function( $ ){
-	var multiSelectId=-1;
-	$.fn.multiSelect=function(options) {
-		multiSelectId++;
-		var settings = {
-			'createCallback':false,
-			'createText':false,
-			'singleSelect':false,
-			'selectedFirst':false,
-			'sort':true,
-			'title':this.attr('title'),
-			'checked':[],
-			'labels':[],
-			'oncheck':false,
-			'onuncheck':false,
-			'minWidth': 'default;'
-		};
-		var slideDuration = 0;
-		$(this).attr('data-msid', multiSelectId);
-		$.extend(settings,options);
-		$.each(this.children(),function(i,option) {
-			// If the option is selected, but not in the checked array, add it.
-			if (
-				$(option).attr('selected') &&
-				settings.checked.indexOf($(option).val()) === -1
-			) {
-				settings.checked.push($(option).val());
-				settings.labels.push($(option).text().trim());
-			}
-			// If the option is in the checked array but not selected, select it.
-			else if (
-				settings.checked.indexOf($(option).val()) !== -1 &&
-				!$(option).attr('selected')
-			) {
-				$(option).attr('selected', 'selected');
-				settings.labels.push($(option).text().trim());
-			}
-		});
-		var button=$('<div class="multiselect button"><span>'+settings.title+'</span><span class="icon-triangle-s"></span></div>');
-		var span=$('<span/>');
-		span.append(button);
-		button.data('id',multiSelectId);
-		button.selectedItems=[];
-		this.hide();
-		this.before(span);
-		if(settings.minWidth=='default') {
-			settings.minWidth=button.width();
-		}
-		button.css('min-width',settings.minWidth);
-		settings.minOuterWidth=button.outerWidth()-2;
-		button.data('settings',settings);
-
-		if(!settings.singleSelect && settings.checked.length>0) {
-			button.children('span').first().text(settings.labels.join(', '));
-		} else if(settings.singleSelect) {
-			button.children('span').first().text(this.find(':selected').text());
-		}
-
-		var self = this;
-		self.menuDirection = 'down';
-
-		function closeDropDown() {
-			if(!button.parent().data('preventHide')) {
-				// How can I save the effect in a var?
-				if(self.menuDirection === 'down') {
-					button.parent().children('ul').slideUp(slideDuration,function() {
-						button.parent().children('ul').remove();
-						button.removeClass('active down');
-						$(self).trigger($.Event('dropdownclosed', settings));
-					});
-				} else {
-					button.parent().children('ul').fadeOut(slideDuration,function() {
-						button.parent().children('ul').remove();
-						button.removeClass('active up');
-						$(self).trigger($.Event('dropdownclosed', settings));
-					});
-				}
-			}
-		}
-
-		button.click(function(event){
-
-			var button=$(this);
-			if(button.parent().children('ul').length>0) {
-				if(self.menuDirection === 'down') {
-					button.parent().children('ul').slideUp(slideDuration,function() {
-						button.parent().children('ul').remove();
-						button.removeClass('active down');
-						$(self).trigger($.Event('dropdownclosed', settings));
-					});
-				} else {
-					button.parent().children('ul').fadeOut(slideDuration,function() {
-						button.parent().children('ul').remove();
-						button.removeClass('active up');
-						$(self).trigger($.Event('dropdownclosed', settings));
-					});
-				}
-				return;
-			}
-			// tell other lists to shut themselves
-			var lists=$('ul.multiselectoptions');
-			lists.trigger($.Event('shut'));
-			button.addClass('active');
-			event.stopPropagation();
-			var options=$(this).parent().next().children();
-			var list=$('<ul class="multiselectoptions"/>').hide().appendTo($(this).parent());
-			var inputType = settings.singleSelect ? 'radio' : 'checkbox';
-			function createItem(element, checked){
-				element=$(element);
-				var item=element.val();
-				var id='ms'+multiSelectId+'-option-'+item;
-				var input=$('<input type="' + inputType + '"/>');
-				input.attr('id',id);
-				if(inputType === 'checkbox') {
-					input.addClass('checkbox');
-				}
-				if(settings.singleSelect) {
-					input.attr('name', 'ms'+multiSelectId+'-option');
-				}
-				var label=$('<label/>');
-				label.attr('for', id);
-				label.text(element.text() || item);
-				label.attr('title', element.text() || item);
-				if(settings.checked.indexOf(item) !== -1 || checked) {
-					input.prop('checked', true);
-				}
-				if(checked){
-					if(settings.singleSelect) {
-						settings.checked = [item];
-						settings.labels = [item];
-					} else {
-						settings.checked.push(item);
-						settings.labels.push(item);
-					}
-				}
-				input.change(function(){
-					var value = $(this).attr('id').substring(String('ms'+multiSelectId+'-option').length+1);
-					var label = $(this).next().text().trim();
-					if($(this).is(':checked')) {
-						if(settings.singleSelect) {
-							settings.checked = [];
-							settings.labels = [];
-							$.each(self.find('option'), function() {
-								$(this).removeAttr('selected');
-							});
-						}
-						element.attr('selected','selected');
-						if(typeof settings.oncheck === 'function') {
-							if(settings.oncheck(value)===false) {
-								$(this).prop('checked', false);
-								return;
-							}
-						}
-						settings.checked.push(value);
-						settings.labels.push(label);
-						$(this).parent().addClass('checked');
-					} else {
-						var index=settings.checked.indexOf(value);
-						element.attr('selected',null);
-						if(typeof settings.onuncheck === 'function') {
-							if(settings.onuncheck(value)===false) {
-								$(this).prop('checked',true);
-								return;
-							}
-						}
-						$(this).parent().removeClass('checked');
-						settings.checked.splice(index,1);
-						settings.labels.splice(index,1);
-					}
-					var oldWidth=button.width();
-					button.children('span').first().text(settings.labels.length > 0
-						? settings.labels.join(', ')
-						: settings.title);
-					var newOuterWidth = Math.max(
-						(button.outerWidth() - 2),
-						settings.minOuterWidth
-					) + 'px';
-					var newWidth=Math.max(button.width(),settings.minWidth);
-					var pos=button.position();
-					button.css('width',oldWidth);
-					button.animate({'width':newWidth},undefined,undefined,function(){
-						button.css('width','');
-					});
-					list.animate({'width':newOuterWidth,'left':pos.left});
-					self.change();
-				});
-				var li=$('<li></li>');
-				li.append(input).append(label);
-				if(input.is(':checked')) {
-					li.addClass('checked');
-				}
-				return li;
-			}
-			$.each(options,function(index,item){
-				list.append(createItem(item));
-			});
-			button.parent().data('preventHide',false);
-			if(settings.createText){
-				var li=$('<li class="creator" title="' + settings.createText +
-					'">+ ' + settings.createText + '</li>');
-				li.click(function(event){
-					li.empty();
-					var input=$('<input type="text" class="new">');
-					li.append(input);
-					input.focus();
-					input.css('width',button.innerWidth());
-					button.parent().data('preventHide',true);
-					input.keypress(function(event) {
-						if(event.keyCode === 13) {
-							event.preventDefault();
-							event.stopPropagation();
-							var value = $(this).val();
-							var exists = false;
-							$.each(options,function(index, item) {
-								if ($(item).val() == value || $(item).text() == value) {
-									exists = true;
-									return false;
-								}
-							});
-							if (exists) {
-								return false;
-							}
-							var li=$(this).parent();
-							var val = $(this).val();
-							var select=button.parent().next();
-							if(typeof settings.createCallback === 'function') {
-								var response = settings.createCallback(select, val);
-								if(response === false) {
-									return false;
-								} else if(typeof response !== 'undefined') {
-									val = response;
-								}
-							}
-							if(settings.singleSelect) {
-								$.each(select.find('option:selected'), function() {
-									$(this).removeAttr('selected');
-								});
-							}
-							$(this).remove();
-							li.text('+ '+settings.createText);
-							li.before(createItem(this));
-							var option=$('<option selected="selected"/>');
-							option.text($(this).val()).val(val).attr('selected', 'selected');
-							select.append(option);
-							li.prev().children('input').prop('checked', true).trigger('change');
-							button.parent().data('preventHide',false);
-							button.children('span').first().text(settings.labels.length > 0
-								? settings.labels.join(', ')
-								: settings.title);
-							if(self.menuDirection === 'up') {
-								var list = li.parent();
-								list.css('top', list.position().top-li.outerHeight());
-							}
-						}
-					});
-					input.blur(function() {
-						event.preventDefault();
-						event.stopPropagation();
-						$(this).remove();
-						li.text('+ '+settings.createText);
-						setTimeout(function(){
-							button.parent().data('preventHide',false);
-						},100);
-					});
-				});
-				list.append(li);
-			}
-
-			var doSort = function(list, selector) {
-				var rows = list.find('li'+selector).get();
-
-				if(settings.sort) {
-					rows.sort(function(a, b) {
-						return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
-					});
-				}
-
-				$.each(rows, function(index, row) {
-					list.append(row);
-				});
-			};
-			if(settings.sort && settings.selectedFirst) {
-				doSort(list, '.checked');
-				doSort(list, ':not(.checked)');
-			} else if(settings.sort && !settings.selectedFirst) {
-				doSort(list, '');
-			}
-			list.append(list.find('li.creator'));
-			var pos=button.position();
-			if(($(document).height() > (button.offset().top + button.outerHeight() + list.children().length * button.height()) &&
-				$(document).height() - button.offset().top > (button.offset().top+button.outerHeight() + list.children().length * button.height())) ||
-				$(document).height() / 2 > button.offset().top
-			) {
-				list.css({
-					top:pos.top+button.outerHeight()-5,
-					left:pos.left,
-					width:(button.outerWidth()-2)+'px',
-					'max-height':($(document).height()-(button.offset().top+button.outerHeight()+10))+'px'
-				});
-				list.addClass('down');
-				button.addClass('down');
-				list.slideDown(slideDuration);
-			} else {
-				list.css('max-height', $(document).height()-($(document).height()-(pos.top)+50)+'px');
-				list.css({
-					top:pos.top - list.height(),
-					left:pos.left,
-					width:(button.outerWidth()-2)+'px'
-
-				});
-				list.detach().insertBefore($(this));
-				list.addClass('up');
-				button.addClass('up');
-				list.show();
-				self.menuDirection = 'up';
-			}
-			list.click(function(event) {
-				event.stopPropagation();
-			});
-			list.one('shut', closeDropDown);
-		});
-
-		$(window).click(closeDropDown);
-
-		return span;
-	};
-})( jQuery );
diff --git a/settings/templates/settings/frame.php b/settings/templates/settings/frame.php
index a4f44294ad0..1734a92b064 100644
--- a/settings/templates/settings/frame.php
+++ b/settings/templates/settings/frame.php
@@ -23,7 +23,7 @@
 
 style('settings', 'settings');
 script('settings', [ 'settings', 'admin', 'log', 'certificates'] );
-script('core', ['multiselect', 'setupchecks']);
+script('core', 'setupchecks');
 script('files', 'jquery.fileupload');
 
 ?>