]> source.dussan.org Git - nextcloud-server.git/commitdiff
Javascript cleanup for groups.
authorringmaster <epithet@gmail.com>
Thu, 8 May 2014 21:38:29 +0000 (17:38 -0400)
committerArthur Schiwon <blizzz@owncloud.com>
Mon, 2 Jun 2014 10:53:58 +0000 (12:53 +0200)
settings/js/users/groups.js
settings/templates/users/part.grouplist.php

index e62dfd9dff73ee03c82e7a93affba66392d4e005..5939731cca1b38b7eb4a29f41ea999a2379b5c43 100644 (file)
@@ -5,84 +5,82 @@
  * See the COPYING-README file.
  */
 
- var GroupList = {
+var $userGroupList;
+
+var GroupList;
+GroupList = {
        activeGID: '',
 
-       addGroup: function(gid, usercount) {
-               var li = $('li[data-gid]').last().clone();
-               var ul = $('li[data-gid]').first().parent();
-               li.attr('data-gid', gid);
-               li.find('a span').first().text(gid);
-               GroupList.setUserCount(li, usercount);
+       addGroup: function (gid, usercount) {
+               var $li = $userGroupList.find('.isgroup:last-child').clone();
+               $li
+                       .data('gid', gid)
+                       .find('.groupname').text(gid);
+               GroupList.setUserCount($li, usercount);
 
-               $(li).appendTo(ul);
+               $li.appendTo($userGroupList);
 
-               GroupList.sortGroups(0);
+               GroupList.sortGroups();
 
-               return li;
+               return $li;
        },
 
-       setUserCount: function(groupLiElement, usercount) {
-               if(usercount === undefined || usercount === 0) {
+       setUserCount: function (groupLiElement, usercount) {
+               var $groupLiElement = $(groupLiElement);
+               if (usercount === undefined || usercount === 0) {
                        usercount = '';
                }
-               groupLiElement.attr('data-usercount', usercount);
-               groupLiElement.find('span[class=usercount]').first().text(usercount);
+               $groupLiElement.data('usercount', usercount);
+               $groupLiElement.find('.usercount').text(usercount);
        },
 
-       getCurrentGID: function() {
+       getCurrentGID: function () {
                return GroupList.activeGID;
        },
 
-       sortGroups: function(usercount) {
-               var lis = $('li[data-gid]').filterAttr('data-usercount', usercount.toString()).get();
-               var ul = $(lis).first().parent();
+       sortGroups: function () {
+               var lis = $('.isgroup').get();
 
-               lis.sort(function(a, b) {
-                       return UserList.alphanum($(a).find('a span').text(), $(b).find('a span').text());
+               lis.sort(function (a, b) {
+                       return UserList.alphanum(
+                               $(a).find('a span').text(),
+                               $(b).find('a span').text()
+                       );
                });
 
                var items = [];
-               $.each(lis, function(index, li) {
+               $.each(lis, function (index, li) {
                        items.push(li);
-                       if(items.length === 100) {
-                               $(ul).append(items);
+                       if (items.length === 100) {
+                               $userGroupList.append(items);
                                items = [];
                        }
                });
-               if(items.length > 0) {
-                       $(ul).append(items);
+               if (items.length > 0) {
+                       $userGroupList.append(items);
                }
        },
 
-       createGroup: function(groupname) {
+       createGroup: function (groupname) {
                $.post(
                        OC.filePath('settings', 'ajax', 'creategroup.php'),
                        {
-                               groupname : groupname
+                               groupname: groupname
                        },
                        function (result) {
                                if (result.status !== 'success') {
                                        OC.dialogs.alert(result.data.message,
                                                t('settings', 'Error creating group'));
-                               } else {
+                               }
+                               else {
                                        if (result.data.groupname) {
-                                               var addedGroups = result.data.groupname;
-                                               UserList.availableGroups = $.unique($.merge(UserList.availableGroups, addedGroups));
+                                               var addedGroup = result.data.groupname;
+                                               UserList.availableGroups = $.unique($.merge(UserList.availableGroups, [addedGroup]));
                                                GroupList.addGroup(result.data.groupname);
 
-                                               $('#newusergroups').children().first().attr('value', result.data.groupname);
-                                               $('#newusergroups').children().first().text(result.data.groupname);
-
-                                               $('.groupsselect').each( function (index, element) {
-                                                       $(element).children().first().attr('value', result.data.groupname);
-                                                       $(element).children().first().text(result.data.groupname);
-                                               });
-
-                                               $('.subadminsselect').each( function (index, element) {
-                                                       $(element).children().first().attr('value', result.data.groupname);
-                                                       $(element).children().first().text(result.data.groupname);
-                                               });
+                                               $('.groupsselect, .subadminsselect')
+                                                       .append($('<option>', { value: result.data.groupname })
+                                                               .text(result.data.groupname));
                                        }
                                        GroupList.toggleAddGroup();
                                }
                );
        },
 
-       update: function() {
+       update: function () {
                if (GroupList.updating) {
                        return;
                }
                GroupList.updating = true;
-               var pattern = filter.getPattern();
-               var query = $.param({ pattern: pattern });
-               $.get(OC.generateUrl('/settings/ajax/grouplist') + '?' + query, function (result) {
-                       var lis = [];
-                       if (result.status === 'success') {
-                               $.each(result.data, function (i, subset) {
-                                       $.each(subset, function (index, group) {
-                                               if($('li[data-gid="' + group.name + '"]').length > 0) {
-                                                       var li = $('li[data-gid="' + group.name + '"]');
-                                                       GroupList.setUserCount(li, group.usercount);
-                                                       return true;
-                                               }
-                                               var li = GroupList.addGroup(group.name, group.usercount);
-                                               li.addClass('appear transparent');
-                                               lis.push(li);
+               $.get(
+                       OC.generateUrl('/settings/ajax/grouplist'),
+                       {pattern: filter.getPattern()},
+                       function (result) {
+
+                               var lis = [];
+                               if (result.status === 'success') {
+                                       $.each(result.data, function (i, subset) {
+                                               $.each(subset, function (index, group) {
+                                                       if (GroupList.getGroupLI(group.name).length > 0) {
+                                                               GroupList.setUserCount(GroupList.getGroupLI(group.name).first(), group.usercount);
+                                                       }
+                                                       else {
+                                                               var $li = GroupList.addGroup(group.name, group.usercount);
+                                                               $li.addClass('appear transparent');
+                                                               lis.push($li);
+                                                       }
+                                               });
                                        });
-                               });
-                               if (result.data.length > 0) {
-                                       GroupList.doSort();
-                               } else {
-                                       GroupList.noMoreEntries = true;
-                               }
-                               setTimeout(function() {
-                                       for (var i = 0; i < lis.length; i++) {
-                                               lis[i].removeClass('transparent');
+                                       if (result.data.length > 0) {
+                                               GroupList.doSort();
                                        }
-                               }, 0);
+                                       else {
+                                               GroupList.noMoreEntries = true;
+                                       }
+                                       setTimeout(function () {
+                                               $(lis).removeClass('transparent');
+                                       }, 0);
+                               }
+                               GroupList.updating = false;
+
                        }
-                       GroupList.updating = false;
-               });
+               );
        },
 
-       elementBelongsToAddGroup: function(el) {
+       elementBelongsToAddGroup: function (el) {
                return !(el !== $('#newgroup-form').get(0) &&
-                               $('#newgroup-form').find($(el)).length === 0);
+               $('#newgroup-form').find($(el)).length === 0);
        },
 
-       hasAddGroupNameText: function() {
+       hasAddGroupNameText: function () {
                var name = $('#newgroupname').val();
-               if($.trim(name) === '') {
-                       return false;
-               }
-               return true;
+               return $.trim(name) !== '';
+
        },
 
        showGroup: function (gid) {
                GroupList.activeGID = gid;
                UserList.empty();
                UserList.update(gid);
-               $('#app-navigation li').removeClass('active');
-               if(gid !== undefined) {
+               $userGroupList.find('li').removeClass('active');
+               if (gid !== undefined) {
                        //TODO: treat Everyone properly
-                       $('#app-navigation li').filterAttr('data-gid', gid).addClass('active');
+                       GroupList.getGroupLI(gid).addClass('active');
                }
        },
 
-       isAddGroupButtonVisible: function() {
+       isAddGroupButtonVisible: function () {
                return $('#newgroup-init').is(":visible");
        },
 
-       toggleAddGroup: function(event) {
-               if(GroupList.isAddGroupButtonVisible()) {
+       toggleAddGroup: function (event) {
+               if (GroupList.isAddGroupButtonVisible()) {
                        event.stopPropagation();
                        $('#newgroup-form').show();
                        $('#newgroup-init').hide();
                        $('#newgroupname').focus();
-               } else {
+               }
+               else {
                        $('#newgroup-form').hide();
                        $('#newgroup-init').show();
                        $('#newgroupname').val('');
                }
        },
 
-       isGroupNameValid: function(groupname) {
+       isGroupNameValid: function (groupname) {
                if ($.trim(groupname) === '') {
                        OC.dialogs.alert(
                                t('settings', 'A valid group name must be provided'),
                return true;
        },
 
-       hide: function(gid) {
-               $('li[data-gid="' + gid + '"]').hide();
+       hide: function (gid) {
+               GroupList.getGroupLI(gid).hide();
        },
-       show: function(gid) {
-               $('li[data-gid="' + gid + '"]').show();
+       show: function (gid) {
+               GroupList.getGroupLI(gid).show();
        },
-       remove: function(gid) {
-               $('li').filterAttr('data-gid', gid).remove();
+       remove: function (gid) {
+               GroupList.getGroupLI(gid).remove();
        },
-       empty: function() {
-               $('li:not([data-gid=""])').remove();
+       empty: function () {
+               $userGroupList.filter(function(item){
+                       return item.data('gid') !== '';
+               }).remove();
        },
-       initDeleteHandling: function() {
+       initDeleteHandling: function () {
                //set up handler
                GroupDeleteHandler = new DeleteHandler('removegroup.php', 'groupname',
-                                                                                       GroupList.hide, GroupList.remove);
+                       GroupList.hide, GroupList.remove);
 
                //configure undo
                OC.Notification.hide();
                var msg = t('settings', 'deleted') + ' %oid <span class="undo">' +
                        t('settings', 'undo') + '</span>';
                GroupDeleteHandler.setNotification(OC.Notification, 'deletegroup', msg,
-                                                                               GroupList.show);
+                       GroupList.show);
 
                //when to mark user for delete
-               $('ul').on('click', 'span.utils>a', function () {
+               $userGroupList.on('click', '.delete', function () {
                        // Call function for handling delete/undo
-                       var gid = $(this).parent().parent().attr('data-gid');
-                       GroupDeleteHandler.mark(gid);
+                       GroupDeleteHandler.mark(GroupList.getElementGID(this));
                });
 
                console.log('init del groups');
                $(window).on('beforeunload', function () {
                        GroupDeleteHandler.delete();
                });
+       },
+
+       getGroupLI: function (gid) {
+               return $userGroupList.find('li.isgroup').filter(function () {
+                       return GroupList.getElementGID(this) === gid;
+               });
+       },
+
+       getElementGID: function (element) {
+               return ($(element).closest('li').data('gid') || '').toString();
        }
 };
 
 $(document).ready( function () {
+       $userGroupList = $('#usergrouplist');
        GroupList.initDeleteHandling();
 
        // Display or hide of Create Group List Element
@@ -248,64 +260,59 @@ $(document).ready( function () {
        });
 
        // click on group name
-       // FIXME: also triggered when clicking on "remove"
-       $('ul').on('click', 'li[data-gid]', function () {
-               var li = $(this);
-               var gid = $(li).attr('data-gid');
-               GroupList.showGroup(gid);
+       $userGroupList.on('click', '.isgroup', function () {
+               GroupList.showGroup(GroupList.getElementGID(this));
        });
 
        // Implements Groupname editing.
-       $('#app-navigation').on('click', 'img.rename', function (event) {
+       $('#app-navigation').on('click', '.isgroup .rename', function (event) {
                event.stopPropagation();
-               var img = $(this);
-               var gid = img.parent().parent().attr('data-gid');
-               var groupname = escapeHTML(img.parent().parent().attr('data-gid'));
-               var input = $('<input type="text" value="' + groupname + '">');
-               img.css('display', 'none');
-               img.parent().children('span').replaceWith(input);
-               input.focus();
-               input.keypress(function (event) {
+               var $li = $(this).closest('li');
+               var gid = GroupList.getElementGID(this);
+               var groupname = escapeHTML(gid);
+               var $input = $('<input type="text" value="' + groupname + '">');
+               $li.find('.dorename img').hide();
+               $li.find('.dorename span').replaceWith($input);
+               $input.focus();
+               $input.keypress(function (event) {
                        if (event.keyCode === 13) {
-                               if ($(this).val().length > 0) {
+                               if ($input.val().length > 0) {
                                        $.post(
                                                OC.filePath('settings', 'ajax', 'changegroupname.php'),
-                                               {       groupname: gid,
-                                                       groupname: $(this).val()
-                                               }
+                                               { groupname: $input.val() }
                                        );
-                                       input.blur();
+                                       $input.blur();
                                } else {
-                                       input.blur();
+                                       $input.blur();
                                }
                        }
                });
-               input.blur(function () {
-                       var input = $(this), groupname = input.val();
-                       input.closest('li').attr('data-gid', groupname);
-                       input.replaceWith('<span>' + escapeHTML(groupname) + '</span>');
-                       img.css('display', '');
+               $input.blur(function () {
+                       var $input = $(this), groupname = $input.val();
+                       $input.closest('li').data('gid', groupname);
+                       $input.replaceWith('<span>' + escapeHTML(groupname) + '</span>');
+                       $li.find('img').show();
                });
        });
 
        // Implements Quota Settings Toggle.
+       var $appSettings = $('#app-settings');
        $('#app-settings-header').on('click keydown',function(event) {
                if(wrongKey(event)) {
                        return;
                }
-               var bodyListener = function(e) {
-                       if($('#app-settings').find($(e.target)).length === 0) {
-                               $('#app-settings').switchClass('open', '');
-                       }
-               };
-               if($('#app-settings').hasClass('open')) {
-                       $('#app-settings').switchClass('open', '');
-                       $('body').unbind('click', bodyListener);
+               if($appSettings.hasClass('open')) {
+                       $appSettings.switchClass('open', '');
                } else {
-                       $('#app-settings').switchClass('', 'open');
-                       $('body').bind('click', bodyListener);
+                       $appSettings.switchClass('', 'open');
+               }
+       });
+       $('body').on('click', function(event){
+               if($appSettings.find(event.target).length === 0) {
+                       $appSettings.switchClass('open', '');
                }
        });
+
 });
 
 var wrongKey = function(event) {
index 5b9d23e43ad8fb53ce42fef8b825cde8e5221f5b..71ec8f0c50226c2257129608de8fc8f1bf4f8ba3 100644 (file)
@@ -1,4 +1,4 @@
-<ul>
+<ul id="usergrouplist">
        <!-- Add new group -->
        <li id="newgroup-init">
                <a href="#">
@@ -12,7 +12,7 @@
                </form>
        </li>
        <!-- Everyone -->
-       <li data-gid="">
+       <li data-gid="" class="isgroup">
                <a href="#">
                        <span>
                                <?php p($l->t('Everyone')); ?>
@@ -25,8 +25,8 @@
 
        <!-- The Admin Group -->
        <?php foreach($_["adminGroup"] as $adminGroup): ?>
-               <li data-gid="admin">
-                       <a href="#"><?php p($l->t('Admins')); ?></a>
+               <li data-gid="admin" class="isgroup">
+                       <a href="#"><span class="groupname"><?php p($l->t('Admins')); ?></span></a>
                        <span class="utils">
                                <span class="usercount"><?php if($adminGroup['usercount'] > 0) { p($adminGroup['usercount']); } ?></span>
                        </span>
@@ -35,9 +35,9 @@
 
        <!--List of Groups-->
        <?php foreach($_["groups"] as $group): ?>
-               <li data-gid="<?php p($group['name']) ?>" data-usercount="<?php p($group['usercount']) ?>">
-                       <a href="#">
-                               <span><?php p($group['name']); ?></span>
+               <li data-gid="<?php p($group['name']) ?>" data-usercount="<?php p($group['usercount']) ?>" class="isgroup">
+                       <a href="#" class="dorename">
+                               <span class="groupname"><?php p($group['name']); ?></span>
                                <img class="svg action rename" src="<?php p(image_path('core', 'actions/rename.svg'))?>"
                                original-title="<?php p($l->t('Edit'))?>" alt="<?php p($l->t("change group name"))?>" title="<?php p($l->t("change group name"))?>" />
                        </a>