Merge pull request #1624 from owncloud/singleselect

Split editable select code used for quota selection into a jquery plugin

1 files changed, 76 insertions, 0 deletions

diff --git a/core/js/singleselect.js b/core/js/singleselect.js
new file mode 100644
index 00000000000..1a018b74148
--- /dev/null
+++ b/core/js/singleselect.js
@@ -0,0 +1,76 @@
+(function ($) {
+	$.fn.singleSelect = function () {
+		return this.each(function (i, select) {
+			var input = $('<input/>');
+			select = $(select);
+			input.css('position', 'absolute');
+			input.css(select.offset());
+			input.css({
+				'box-sizing': 'border-box',
+				'-moz-box-sizing': 'border-box',
+				'margin': 0,
+				'width': (select.width() - 5) + 'px',
+				'height': (select.outerHeight() - 2) + 'px',
+				'border': 'none',
+				'box-shadow': 'none',
+				'margin-top': '1px',
+				'margin-left': '1px',
+				'z-index': 1000
+			});
+			input.hide();
+			$('body').append(input);
+
+			select.on('change', function (event) {
+				var value = $(this).val(),
+					newAttr = $('option:selected', $(this)).attr('data-new');
+				if (!(typeof newAttr !== 'undefined' && newAttr !== false)) {
+					input.hide();
+					select.data('previous', value);
+				} else {
+					event.stopImmediatePropagation();
+					input.show();
+					select.css('background-color', 'white');
+					input.focus();
+				}
+			});
+
+			$(select).data('previous', $(select).val());
+
+			input.on('change', function () {
+				var value = $(this).val();
+				if (value) {
+					select.children().attr('selected', null);
+					var existingOption = select.children().filter(function (i, option) {
+						return ($(option).val() == value);
+					});
+					if (existingOption.length) {
+						existingOption.attr('selected', 'selected');
+					} else {
+						var option = $('<option/>');
+						option.attr('selected', 'selected').attr('value', value).text(value);
+						select.children().last().before(option);
+					}
+					select.val(value);
+					select.css('background-color', null);
+					input.val(null);
+					input.hide();
+					select.change();
+				} else {
+					var previous = select.data('previous');
+					select.children().attr('selected', null);
+					select.children().each(function (i, option) {
+						if ($(option).val() == previous) {
+							$(option).attr('selected', 'selected');
+						}
+					});
+					select.removeClass('active');
+					input.hide();
+				}
+			});
+
+			input.on('blur', function () {
+				$(this).change();
+			});
+		});
+	}
+})(jQuery);