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

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);

settings/css/settings.css

@@ -39,7 +39,6 @@ div.quota { float:right; display:block; position:absolute; right:25em; top:0; }
 div.quota-select-wrapper { position: relative; }
 select.quota { position:absolute; left:0; top:0.5em; width:10em; }
 select.quota-user { position:relative; left:0; top:0; width:10em; }
-input.quota-other { display:none; position:absolute; left:0.1em; top:0.1em; width:7em; border:none; box-shadow:none; }
 div.quota>span { position:absolute; right:0; white-space:nowrap; top:.7em; color:#888; text-shadow:0 1px 0 #fff; }
 select.quota.active { background: #fff; }
 

settings/js/users.js

@@ -336,65 +336,11 @@ $(document).ready(function () {
 		$(this).children('img').click();
 	});
 
-
+	$('select.quota, select.quota-user').singleSelect().on('change', function () {
-    $('select.quota, select.quota-user').on('change', function () {
+		var uid = $(this).parent().parent().attr('data-uid');
-        var select = $(this);
-        var uid = $(this).parent().parent().parent().attr('data-uid');
 		var quota = $(this).val();
-        var other = $(this).next();
-        if (quota != 'other') {
-            other.hide();
-            select.data('previous', quota);
 		setQuota(uid, quota);
-        } else {
-            other.show();
-            select.addClass('active');
-            other.focus();
-        }
-    });
-    $('select.quota, select.quota-user').each(function (i, select) {
-        $(select).data('previous', $(select).val());
-    })
-
-    $('input.quota-other').on('change', function () {
-        var uid = $(this).parent().parent().parent().attr('data-uid');
-        var quota = $(this).val();
-        var select = $(this).prev();
-        var other = $(this);
-        if (quota) {
-            setQuota(uid, quota, function (quota) {
-                select.children().attr('selected', null);
-                var existingOption = select.children().filter(function (i, option) {
-                    return ($(option).val() == quota);
-                });
-                if (existingOption.length) {
-                    existingOption.attr('selected', 'selected');
-                } else {
-                    var option = $('<option/>');
-                    option.attr('selected', 'selected').attr('value', quota).text(quota);
-                    select.children().last().before(option);
-                }
-                select.val(quota);
-                select.removeClass('active');
-                other.val(null);
-                other.hide();
-            });
-        } 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');
-            other.hide();
-        }
-    });
-
-    $('input.quota-other').on('blur', function () {
-        $(this).change();
-    })
 
 	$('#newuser').submit(function (event) {
 		event.preventDefault();

settings/templates/users.php

@@ -33,7 +33,6 @@ $_['subadmingroups'] = array_flip($items);
 	</form>
 	<div class="quota">
 		<span><?php echo $l->t('Default Storage');?></span>
-		<div class="quota-select-wrapper">
 			<?php if((bool) $_['isadmin']): ?>
 			<select class='quota'>
 				<option
@@ -60,7 +59,7 @@ $_['subadmingroups'] = array_flip($items);
 					<?php echo $l->t('Other');?>
 					...
 				</option>
-			</select> <input class='quota-other'/>
+			</select>
 			<?php endif; ?>
 			<?php if((bool) !$_['isadmin']): ?>
 				<select class='quota' disabled="disabled">
@@ -71,7 +70,6 @@ $_['subadmingroups'] = array_flip($items);
 			<?php endif; ?>
 	</div>
 </div>
-</div>
 
 <table class="hascontrols" data-groups="<?php echo implode(', ', $allGroups);?>">
 	<thead>
@@ -129,7 +127,6 @@ $_['subadmingroups'] = array_flip($items);
 			</td>
 			<?php endif;?>
 			<td class="quota">
-				<div class="quota-select-wrapper">
 				<select class='quota-user'>
 					<option
 						<?php if($user['quota']=='default') echo 'selected="selected"';?>
@@ -153,12 +150,11 @@ $_['subadmingroups'] = array_flip($items);
 						<?php echo $user['quota'];?>
 					</option>
 					<?php endif;?>
-						<option value='other'>
+					<option value='other' data-new>
 						<?php echo $l->t('Other');?>
 						...
 					</option>
-					</select> <input class='quota-other'/>
+				</select>
-				</div>
 			</td>
 			<td class="remove">
 				<?php if($user['name']!=OC_User::getUser()):?>

settings/users.php

@@ -11,6 +11,7 @@ OC_App::loadApps();
 // We have some javascript foo!
 OC_Util::addScript( 'settings', 'users' );
 OC_Util::addScript( 'core', 'multiselect' );
+OC_Util::addScript( 'core', 'singleselect' );
 OC_Util::addScript('core', 'jquery.inview');
 OC_Util::addStyle( 'settings', 'settings' );
 OC_App::setActiveNavigationEntry( 'core_users' );