From c732764eb5159b893cdb97fc780937a883f48b58 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Mon, 3 Feb 2014 18:00:39 +0100 Subject: Improve users list scrolling performance - fixed JS error when avatar mode is disabled - added spinner at the bottom of the table - scroll detection now happens earlier - single/multiselect init is deferred so that the new rows are first appended into the list (more responsive) and initialized afterwards - disabled users sorting after add (assuming they are always sorted on the server side) --- settings/js/users.js | 77 ++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 53 insertions(+), 24 deletions(-) (limited to 'settings/js/users.js') diff --git a/settings/js/users.js b/settings/js/users.js index 6886db668b5..a6edc02e165 100644 --- a/settings/js/users.js +++ b/settings/js/users.js @@ -85,19 +85,24 @@ var UserList = { add: function (username, displayname, groups, subadmin, quota, sort) { var tr = $('tbody tr').first().clone(); - if (tr.find('div.avatardiv')){ + var subadminsEl; + var subadminSelect; + var groupsSelect; + if (tr.find('div.avatardiv').length){ $('div.avatardiv', tr).avatar(username, 32); } tr.attr('data-uid', username); tr.attr('data-displayName', displayname); tr.find('td.name').text(username); tr.find('td.displayName > span').text(displayname); - var groupsSelect = $('') + + // make them look like the multiselect buttons + // until they get time to really get initialized + groupsSelect = $('') .attr('data-username', username) .data('user-groups', groups); - tr.find('td.groups').empty(); if (tr.find('td.subadmins').length > 0) { - var subadminSelect = $('') .attr('data-username', username) .data('user-groups', groups) .data('subadmin', subadmin); @@ -109,11 +114,10 @@ var UserList = { subadminSelect.append($('')); } }); - tr.find('td.groups').append(groupsSelect); - UserList.applyMultiplySelect(groupsSelect); - if (tr.find('td.subadmins').length > 0) { - tr.find('td.subadmins').append(subadminSelect); - UserList.applyMultiplySelect(subadminSelect); + tr.find('td.groups').empty().append(groupsSelect); + subadminsEl = tr.find('td.subadmins'); + if (subadminsEl.length > 0) { + subadminsEl.append(subadminSelect); } if (tr.find('td.remove img').length === 0 && OC.currentUser !== username) { var rm_img = $('').attr({ @@ -139,11 +143,11 @@ var UserList = { } } $(tr).appendTo('tbody'); + if (sort) { UserList.doSort(); } - quotaSelect.singleSelect(); quotaSelect.on('change', function () { var uid = $(this).parent().parent().attr('data-uid'); var quota = $(this).val(); @@ -153,6 +157,16 @@ var UserList = { } }); }); + + // defer init so the user first sees the list appear more quickly + window.setTimeout(function(){ + quotaSelect.singleSelect(); + UserList.applyMultiplySelect(groupsSelect); + if (subadminSelect) { + UserList.applyMultiplySelect(subadminSelect); + } + }, 0); + return tr; }, // From http://my.opera.com/GreyWyvern/blog/show.dml/1671288 alphanum: function(a, b) { @@ -211,26 +225,34 @@ var UserList = { } UserList.updating = true; $.get(OC.Router.generate('settings_ajax_userlist', { offset: UserList.offset, limit: UserList.usersToLoad }), function (result) { + var loadedUsers = 0; + var trs = []; if (result.status === 'success') { //The offset does not mirror the amount of users available, //because it is backend-dependent. For correct retrieval, //always the limit(requested amount of users) needs to be added. - UserList.offset += UserList.usersToLoad; $.each(result.data, function (index, user) { if($('tr[data-uid="' + user.name + '"]').length > 0) { return true; } var tr = UserList.add(user.name, user.displayname, user.groups, user.subadmin, user.quota, false); - if (index === 9) { - $(tr).bind('inview', function (event, isInView, visiblePartX, visiblePartY) { - $(this).unbind(event); - UserList.update(); - }); - } + tr.addClass('appear transparent'); + trs.push(tr); + loadedUsers++; }); if (result.data.length > 0) { UserList.doSort(); } + else { + UserList.noMoreEntries = true; + } + UserList.offset += loadedUsers; + // animate + setTimeout(function() { + for (var i = 0; i < trs.length; i++) { + trs[i].removeClass('transparent'); + } + }, 0); } UserList.updating = false; }); @@ -239,7 +261,7 @@ var UserList = { applyMultiplySelect: function (element) { var checked = []; var user = element.attr('data-username'); - if ($(element).attr('class') === 'groupsselect') { + if ($(element).hasClass('groupsselect')) { if (element.data('userGroups')) { checked = element.data('userGroups'); } @@ -295,7 +317,7 @@ var UserList = { minWidth: 100 }); } - if ($(element).attr('class') === 'subadminsselect') { + if ($(element).hasClass('subadminsselect')) { if (element.data('subadmin')) { checked = element.data('subadmin'); } @@ -330,17 +352,24 @@ var UserList = { minWidth: 100 }); } - } + }, + + _onScroll: function(e) { + if (!!UserList.noMoreEntries) { + return; + } + if ($(window).scrollTop() + $(window).height() > $(document).height() - 500) { + UserList.update(true); + } + }, }; $(document).ready(function () { UserList.doSort(); UserList.availableGroups = $('#content table').data('groups'); - $('tbody tr:last').bind('inview', function (event, isInView, visiblePartX, visiblePartY) { - OC.Router.registerLoadedCallback(function () { - UserList.update(); - }); + OC.Router.registerLoadedCallback(function() { + $(window).scroll(function(e) {UserList._onScroll(e);}); }); $('select[multiple]').each(function (index, element) { -- cgit v1.2.3 From 58b1dc5e76bb18ebae7e980566153b04cd1c76b2 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Tue, 18 Feb 2014 10:52:05 +0100 Subject: Added loading spinner to users list on scroll --- settings/js/users.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'settings/js/users.js') diff --git a/settings/js/users.js b/settings/js/users.js index a6edc02e165..1028a003bcf 100644 --- a/settings/js/users.js +++ b/settings/js/users.js @@ -223,6 +223,7 @@ var UserList = { if (UserList.updating) { return; } + $('table+.loading').css('visibility', 'visible'); UserList.updating = true; $.get(OC.Router.generate('settings_ajax_userlist', { offset: UserList.offset, limit: UserList.usersToLoad }), function (result) { var loadedUsers = 0; @@ -242,9 +243,11 @@ var UserList = { }); if (result.data.length > 0) { UserList.doSort(); + $('table+.loading').css('visibility', 'hidden'); } else { UserList.noMoreEntries = true; + $('table+.loading').remove(); } UserList.offset += loadedUsers; // animate @@ -371,6 +374,7 @@ $(document).ready(function () { OC.Router.registerLoadedCallback(function() { $(window).scroll(function(e) {UserList._onScroll(e);}); }); + $('table').after($('')); $('select[multiple]').each(function (index, element) { UserList.applyMultiplySelect($(element)); -- cgit v1.2.3 From 16262e3fd2c00475cc3b43a2684a45cc8ae70829 Mon Sep 17 00:00:00 2001 From: Lukas Reschke Date: Wed, 19 Feb 2014 17:56:12 +0100 Subject: Move isadmin to template and rename it to oc_isadmin --- core/js/js.js | 1 + core/templates/layout.user.php | 2 +- settings/js/isadmin.php | 20 -------------------- settings/js/users.js | 4 ++-- settings/routes.php | 2 -- settings/templates/users.php | 2 -- 6 files changed, 4 insertions(+), 27 deletions(-) delete mode 100644 settings/js/isadmin.php (limited to 'settings/js/users.js') diff --git a/core/js/js.js b/core/js/js.js index d4d2583f1e5..3b3e0e99455 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -10,6 +10,7 @@ var oc_webroot; var oc_current_user = document.getElementsByTagName('head')[0].getAttribute('data-user'); var oc_requesttoken = document.getElementsByTagName('head')[0].getAttribute('data-requesttoken'); +var oc_isadmin = document.getElementsByTagName('head')[0].getAttribute('data-isAdmin'); window.oc_config = window.oc_config || {}; diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index bc1c700402e..d46f97852cc 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -6,7 +6,7 @@ - + <?php p(!empty($_['application'])?$_['application'].' - ':''); diff --git a/settings/js/isadmin.php b/settings/js/isadmin.php deleted file mode 100644 index 13a8ba1d312..00000000000 --- a/settings/js/isadmin.php +++ /dev/null @@ -1,20 +0,0 @@ -<?php -/** - * Copyright (c) 2013 Lukas Reschke <lukas@statuscode.ch> - * This file is licensed under the Affero General Public License version 3 or - * later. - * See the COPYING-README file. - */ - -// Set the content type to Javascript -header("Content-type: text/javascript"); - -// Disallow caching -header("Cache-Control: no-cache, must-revalidate"); -header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); - -if (OC_User::isAdminUser(OC_User::getUser())) { - echo("var isadmin = true;"); -} else { - echo("var isadmin = false;"); -} diff --git a/settings/js/users.js b/settings/js/users.js index 6886db668b5..9872fb27e61 100644 --- a/settings/js/users.js +++ b/settings/js/users.js @@ -248,7 +248,7 @@ var UserList = { if (user === OC.currentUser && group === 'admin') { return false; } - if (!isadmin && checked.length === 1 && checked[0] === group) { + if (!oc_isadmin && checked.length === 1 && checked[0] === group) { return false; } $.post( @@ -280,7 +280,7 @@ var UserList = { }); }; var label; - if (isadmin) { + if (oc_isadmin) { label = t('settings', 'add group'); } else { label = null; diff --git a/settings/routes.php b/settings/routes.php index 60f9d8e1001..895a9f5ccea 100644 --- a/settings/routes.php +++ b/settings/routes.php @@ -72,5 +72,3 @@ $this->create('settings_ajax_setloglevel', '/settings/ajax/setloglevel.php') ->actionInclude('settings/ajax/setloglevel.php'); $this->create('settings_ajax_setsecurity', '/settings/ajax/setsecurity.php') ->actionInclude('settings/ajax/setsecurity.php'); -$this->create('isadmin', '/settings/js/isadmin.js') - ->actionInclude('settings/js/isadmin.php'); diff --git a/settings/templates/users.php b/settings/templates/users.php index aabda0fac2f..937b40611b0 100644 --- a/settings/templates/users.php +++ b/settings/templates/users.php @@ -14,8 +14,6 @@ unset($items['admin']); $_['subadmingroups'] = array_flip($items); ?> -<script type="text/javascript" src="<?php print_unescaped(OC_Helper::linkToRoute('isadmin'));?>"></script> - <div id="controls"> <form id="newuser" autocomplete="off"> <input id="newusername" type="text" placeholder="<?php p($l->t('Login Name'))?>" /> <input -- cgit v1.2.3