Split editable select code used for quota selection into a jquery plugin
This commit is contained in:
parent
4a130d106c
commit
e68e5cc849
|
@ -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);
|
|
@ -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; }
|
||||
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
*/
|
||||
|
||||
var UserList = {
|
||||
useUndo:true,
|
||||
useUndo: true,
|
||||
|
||||
/**
|
||||
* @brief Initiate user deletion process in UI
|
||||
|
@ -15,7 +15,7 @@ var UserList = {
|
|||
* deletion when the current page is unloaded, at which point
|
||||
* finishDelete() completes the process. This allows for 'undo'.
|
||||
*/
|
||||
do_delete:function (uid) {
|
||||
do_delete: function (uid) {
|
||||
if (typeof UserList.deleteUid !== 'undefined') {
|
||||
//Already a user in the undo queue
|
||||
UserList.finishDelete(null);
|
||||
|
@ -38,18 +38,18 @@ var UserList = {
|
|||
* if 'undo' has not been used. Completes the user deletion procedure
|
||||
* and reflects success in UI.
|
||||
*/
|
||||
finishDelete:function (ready) {
|
||||
finishDelete: function (ready) {
|
||||
|
||||
// Check deletion has not been undone
|
||||
if (!UserList.deleteCanceled && UserList.deleteUid) {
|
||||
|
||||
// Delete user via ajax
|
||||
$.ajax({
|
||||
type:'POST',
|
||||
url:OC.filePath('settings', 'ajax', 'removeuser.php'),
|
||||
async:false,
|
||||
data:{ username:UserList.deleteUid },
|
||||
success:function (result) {
|
||||
type: 'POST',
|
||||
url: OC.filePath('settings', 'ajax', 'removeuser.php'),
|
||||
async: false,
|
||||
data: { username: UserList.deleteUid },
|
||||
success: function (result) {
|
||||
if (result.status == 'success') {
|
||||
// Remove undo option, & remove user from table
|
||||
OC.Notification.hide();
|
||||
|
@ -66,7 +66,7 @@ var UserList = {
|
|||
}
|
||||
},
|
||||
|
||||
add:function (username, groups, subadmin, quota, sort) {
|
||||
add: function (username, groups, subadmin, quota, sort) {
|
||||
var tr = $('tbody tr').first().clone();
|
||||
tr.attr('data-uid', username);
|
||||
tr.attr('data-displayName', username);
|
||||
|
@ -93,10 +93,10 @@ var UserList = {
|
|||
}
|
||||
if (tr.find('td.remove img').length == 0 && OC.currentUser != username) {
|
||||
var rm_img = $('<img>', {
|
||||
class:'svg action',
|
||||
src:OC.imagePath('core', 'actions/delete')
|
||||
class: 'svg action',
|
||||
src: OC.imagePath('core', 'actions/delete')
|
||||
});
|
||||
var rm_link = $('<a>', { class:'action delete', href:'#', 'original-title':t('settings', 'Delete')}).append(rm_img);
|
||||
var rm_link = $('<a>', { class: 'action delete', href: '#', 'original-title': t('settings', 'Delete')}).append(rm_img);
|
||||
tr.find('td.remove').append(rm_link);
|
||||
} else if (OC.currentUser == username) {
|
||||
tr.find('td.remove a').remove();
|
||||
|
@ -130,11 +130,11 @@ var UserList = {
|
|||
return tr;
|
||||
},
|
||||
|
||||
update:function () {
|
||||
update: function () {
|
||||
if (typeof UserList.offset === 'undefined') {
|
||||
UserList.offset = $('tbody tr').length;
|
||||
}
|
||||
$.get(OC.Router.generate('settings_ajax_userlist', { offset:UserList.offset }), function (result) {
|
||||
$.get(OC.Router.generate('settings_ajax_userlist', { offset: UserList.offset }), function (result) {
|
||||
if (result.status === 'success') {
|
||||
$.each(result.data, function (index, user) {
|
||||
var tr = UserList.add(user.name, user.groups, user.subadmin, user.quota, false);
|
||||
|
@ -150,7 +150,7 @@ var UserList = {
|
|||
});
|
||||
},
|
||||
|
||||
applyMultiplySelect:function (element) {
|
||||
applyMultiplySelect: function (element) {
|
||||
var checked = [];
|
||||
var user = element.attr('data-username');
|
||||
if ($(element).attr('class') == 'groupsselect') {
|
||||
|
@ -168,8 +168,8 @@ var UserList = {
|
|||
$.post(
|
||||
OC.filePath('settings', 'ajax', 'togglegroups.php'),
|
||||
{
|
||||
username:user,
|
||||
group:group
|
||||
username: user,
|
||||
group: group
|
||||
},
|
||||
function () {
|
||||
}
|
||||
|
@ -192,13 +192,13 @@ var UserList = {
|
|||
label = null;
|
||||
}
|
||||
element.multiSelect({
|
||||
createCallback:addGroup,
|
||||
createText:label,
|
||||
selectedFirst:true,
|
||||
checked:checked,
|
||||
oncheck:checkHandeler,
|
||||
onuncheck:checkHandeler,
|
||||
minWidth:100
|
||||
createCallback: addGroup,
|
||||
createText: label,
|
||||
selectedFirst: true,
|
||||
checked: checked,
|
||||
oncheck: checkHandeler,
|
||||
onuncheck: checkHandeler,
|
||||
minWidth: 100
|
||||
});
|
||||
}
|
||||
if ($(element).attr('class') == 'subadminsselect') {
|
||||
|
@ -212,8 +212,8 @@ var UserList = {
|
|||
$.post(
|
||||
OC.filePath('settings', 'ajax', 'togglesubadmins.php'),
|
||||
{
|
||||
username:user,
|
||||
group:group
|
||||
username: user,
|
||||
group: group
|
||||
},
|
||||
function () {
|
||||
}
|
||||
|
@ -228,12 +228,12 @@ var UserList = {
|
|||
})
|
||||
};
|
||||
element.multiSelect({
|
||||
createCallback:addSubAdmin,
|
||||
createText:null,
|
||||
checked:checked,
|
||||
oncheck:checkHandeler,
|
||||
onuncheck:checkHandeler,
|
||||
minWidth:100
|
||||
createCallback: addSubAdmin,
|
||||
createText: null,
|
||||
checked: checked,
|
||||
oncheck: checkHandeler,
|
||||
onuncheck: checkHandeler,
|
||||
minWidth: 100
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -242,15 +242,15 @@ var UserList = {
|
|||
$(document).ready(function () {
|
||||
|
||||
$('tbody tr:last').bind('inview', function (event, isInView, visiblePartX, visiblePartY) {
|
||||
OC.Router.registerLoadedCallback(function(){
|
||||
OC.Router.registerLoadedCallback(function () {
|
||||
UserList.update();
|
||||
});
|
||||
});
|
||||
|
||||
function setQuota(uid, quota, ready) {
|
||||
function setQuota (uid, quota, ready) {
|
||||
$.post(
|
||||
OC.filePath('settings', 'ajax', 'setquota.php'),
|
||||
{username:uid, quota:quota},
|
||||
{username: uid, quota: quota},
|
||||
function (result) {
|
||||
if (ready) {
|
||||
ready(result.data.quota);
|
||||
|
@ -284,7 +284,7 @@ $(document).ready(function () {
|
|||
if ($(this).val().length > 0) {
|
||||
$.post(
|
||||
OC.filePath('settings', 'ajax', 'changepassword.php'),
|
||||
{username:uid, password:$(this).val()},
|
||||
{username: uid, password: $(this).val()},
|
||||
function (result) {
|
||||
}
|
||||
);
|
||||
|
@ -308,7 +308,7 @@ $(document).ready(function () {
|
|||
var img = $(this);
|
||||
var uid = img.parent().parent().attr('data-uid');
|
||||
var displayName = img.parent().parent().attr('data-displayName');
|
||||
var input = $('<input type="text" value="'+displayName+'">');
|
||||
var input = $('<input type="text" value="' + displayName + '">');
|
||||
img.css('display', 'none');
|
||||
img.parent().children('span').replaceWith(input);
|
||||
input.focus();
|
||||
|
@ -317,7 +317,7 @@ $(document).ready(function () {
|
|||
if ($(this).val().length > 0) {
|
||||
$.post(
|
||||
OC.filePath('settings', 'ajax', 'changedisplayname.php'),
|
||||
{username:uid, displayName:$(this).val()},
|
||||
{username: uid, displayName: $(this).val()},
|
||||
function (result) {
|
||||
}
|
||||
);
|
||||
|
@ -336,65 +336,11 @@ $(document).ready(function () {
|
|||
$(this).children('img').click();
|
||||
});
|
||||
|
||||
|
||||
$('select.quota, select.quota-user').on('change', function () {
|
||||
var select = $(this);
|
||||
var uid = $(this).parent().parent().parent().attr('data-uid');
|
||||
$('select.quota, select.quota-user').singleSelect().on('change', function () {
|
||||
var uid = $(this).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();
|
||||
|
@ -423,9 +369,9 @@ $(document).ready(function () {
|
|||
$.post(
|
||||
OC.filePath('settings', 'ajax', 'createuser.php'),
|
||||
{
|
||||
username:username,
|
||||
password:password,
|
||||
groups:groups
|
||||
username: username,
|
||||
password: password,
|
||||
groups: groups
|
||||
},
|
||||
function (result) {
|
||||
if (result.status != 'success') {
|
||||
|
|
|
@ -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">
|
||||
|
@ -70,7 +69,6 @@ $_['subadmingroups'] = array_flip($items);
|
|||
</select>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="hascontrols" data-groups="<?php echo implode(', ', $allGroups);?>">
|
||||
|
@ -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'/>
|
||||
</div>
|
||||
</select>
|
||||
</td>
|
||||
<td class="remove">
|
||||
<?php if($user['name']!=OC_User::getUser()):?>
|
||||
|
|
|
@ -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' );
|
||||
|
|
Loading…
Reference in New Issue