From e1a47683ef798f0569edebdf66e340ca439e357f Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Mon, 11 Aug 2014 16:29:15 +0200 Subject: [PATCH 1/7] Trigger events when app-settings visibility changes --- core/js/apps.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/core/js/apps.js b/core/js/apps.js index 5f221bb982..d874f8598f 100644 --- a/core/js/apps.js +++ b/core/js/apps.js @@ -43,15 +43,26 @@ var areaSelector = $(button).data('apps-slide-toggle'); var area = $(areaSelector); + function hideArea() { + area.slideUp(function() { + area.trigger(new $.Event('hide')); + }); + } + function showArea() { + area.slideDown(function() { + area.trigger(new $.Event('show')); + }); + } + // do nothing if the area is animated if (!area.is(':animated')) { // button toggles the area if (button === event.target) { if (area.is(':visible')) { - area.slideUp(); + hideArea(); } else { - area.slideDown(); + showArea(); } // all other areas that have not been clicked but are open @@ -59,7 +70,7 @@ } else { var closest = $(event.target).closest(areaSelector); if (area.is(':visible') && closest[0] !== area[0]) { - area.slideUp(); + hideArea(); } } } @@ -73,4 +84,4 @@ registerAppsSlideToggle(); }); -}(document, jQuery, OC)); \ No newline at end of file +}(document, jQuery, OC)); From c208796c470ff50db3a62141e0c8ae971991ec4a Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Mon, 11 Aug 2014 16:34:24 +0200 Subject: [PATCH 2/7] Use global apps slide toggle logic Remove local app settings slide logic and make it use the global one triggered by the "data-apps-slide-toggle" attribute. --- settings/js/users/groups.js | 24 ---------------------- settings/templates/users/part.setquota.php | 4 ++-- 2 files changed, 2 insertions(+), 26 deletions(-) diff --git a/settings/js/users/groups.js b/settings/js/users/groups.js index fe06edff34..258b6aa7ef 100644 --- a/settings/js/users/groups.js +++ b/settings/js/users/groups.js @@ -289,28 +289,4 @@ $(document).ready( function () { $userGroupList.on('click', '.isgroup', function () { GroupList.showGroup(GroupList.getElementGID(this)); }); - - // Implements Quota Settings Toggle. - var $appSettings = $('#app-settings'); - $('#app-settings-header').on('click keydown',function(event) { - if(wrongKey(event)) { - return; - } - if($appSettings.hasClass('open')) { - $appSettings.switchClass('open', ''); - } else { - $appSettings.switchClass('', 'open'); - } - }); - $('body').on('click', function(event){ - if($appSettings.find(event.target).length === 0) { - $appSettings.switchClass('open', ''); - } - }); - }); - -var wrongKey = function(event) { - return ((event.type === 'keydown' || event.type === 'keypress') && - (event.keyCode !== 32 && event.keyCode !== 13)); -}; diff --git a/settings/templates/users/part.setquota.php b/settings/templates/users/part.setquota.php index fc5624d069..ee9b918eac 100644 --- a/settings/templates/users/part.setquota.php +++ b/settings/templates/users/part.setquota.php @@ -1,5 +1,5 @@
- +
@@ -36,4 +36,4 @@
-
\ No newline at end of file + From 25a8588f7b7313c092a7b592e7b03f9b6e529539 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Mon, 11 Aug 2014 16:37:48 +0200 Subject: [PATCH 3/7] Fix default quota settings field The default quota settings field is initially hidden which makes it impossible for singleSelect() to make its width measurements. This fix uses the app navigation slide "show" event to defer the singleSelect() initialization on the default quota field. Refactored setQuota() into UserList._updateQuota(). Refactored duplicate event handler code into UserList.onQuotaSelect(). --- settings/js/users/users.js | 82 ++++++++++++++++++++++++-------------- 1 file changed, 52 insertions(+), 30 deletions(-) diff --git a/settings/js/users/users.js b/settings/js/users/users.js index 883851e2a2..60948bb99f 100644 --- a/settings/js/users/users.js +++ b/settings/js/users/users.js @@ -18,6 +18,18 @@ var UserList = { usersToLoad: 10, //So many users will be loaded when user scrolls down currentGid: '', + /** + * Initializes the user list + * @param $el user list table element + */ + initialize: function($el) { + this.$el = $el; + + // initially the list might already contain user entries (not fully ajaxified yet) + // initialize these entries + this.$el.find('.quota-user').singleSelect().on('change', this.onQuotaSelect); + }, + add: function (username, displayname, groups, subadmin, quota, storageLocation, lastLogin, sort) { var $tr = $userListBody.find('tr:first-child').clone(); var subAdminsEl; @@ -109,15 +121,7 @@ var UserList = { UserList.doSort(); } - $quotaSelect.on('change', function () { - var uid = UserList.getUID(this); - var quota = $(this).val(); - setQuota(uid, quota, function(returnedQuota){ - if (quota !== returnedQuota) { - $($quotaSelect).find(':selected').text(returnedQuota); - } - }); - }); + $quotaSelect.on('change', UserList.onQuotaSelect); // defer init so the user first sees the list appear more quickly window.setTimeout(function(){ @@ -496,21 +500,42 @@ var UserList = { if (UserList.scrollArea.scrollTop() + UserList.scrollArea.height() > UserList.scrollArea.get(0).scrollHeight - 500) { UserList.update(UserList.currentGid, true); } + }, + + /** + * Event handler for when a quota has been changed through a single select. + * This will save the value. + */ + onQuotaSelect: function(ev) { + var $select = $(ev.target); + var uid = UserList.getUID($select); + var quota = $select.val(); + UserList._updateQuota(uid, quota, function(returnedQuota){ + if (quota !== returnedQuota) { + $select.find(':selected').text(returnedQuota); + } + }); + }, + + /** + * Saves the quota for the given user + * @param {String} [uid] optional user id, sets default quota if empty + * @param {String} quota quota value + * @param {Function} ready callback after save + */ + _updateQuota: function(uid, quota, ready) { + $.post( + OC.filePath('settings', 'ajax', 'setquota.php'), + {username: uid, quota: quota}, + function (result) { + if (ready) { + ready(result.data.quota); + } + } + ); } }; -function setQuota (uid, quota, ready) { - $.post( - OC.filePath('settings', 'ajax', 'setquota.php'), - {username: uid, quota: quota}, - function (result) { - if (ready) { - ready(result.data.quota); - } - } - ); -} - $(document).ready(function () { $userList = $('#userlist'); $userListBody = $userList.find('tbody'); @@ -528,6 +553,9 @@ $(document).ready(function () { $userList.after($('')); + // TODO: move other init calls inside of initialize + UserList.initialize($('#userlist')); + $('.groupsselect').each(function (index, element) { UserList.applyGroupSelect(element); }); @@ -611,15 +639,9 @@ $(document).ready(function () { }); }); - $('#default_quota, .quota-user').singleSelect().on('change', function () { - var $select = $(this); - var uid = UserList.getUID($select); - var quota = $select.val(); - setQuota(uid, quota, function(returnedQuota){ - if (quota !== returnedQuota) { - $select.find(':selected').text(returnedQuota); - } - }); + // init the quota field select box after it is shown the first time + $('#app-settings').one('show', function() { + $(this).find('#default_quota').singleSelect().on('change', UserList.onQuotaSelect); }); $('#newuser').submit(function (event) { From 997653fd09c27eeeaa93f59a18d1631ee464b81c Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Mon, 11 Aug 2014 17:51:17 +0200 Subject: [PATCH 4/7] Replaced spaces with tabs in apps.js --- core/js/apps.js | 98 ++++++++++++++++++++++++------------------------- 1 file changed, 49 insertions(+), 49 deletions(-) diff --git a/core/js/apps.js b/core/js/apps.js index d874f8598f..21fae58985 100644 --- a/core/js/apps.js +++ b/core/js/apps.js @@ -10,38 +10,38 @@ (function (document, $, exports) { - 'use strict'; + 'use strict'; - var dynamicSlideToggleEnabled = false; + var dynamicSlideToggleEnabled = false; - exports.Apps = { - enableDynamicSlideToggle: function () { - dynamicSlideToggleEnabled = true; - } - }; + exports.Apps = { + enableDynamicSlideToggle: function () { + dynamicSlideToggleEnabled = true; + } + }; - /** - * Provides a way to slide down a target area through a button and slide it - * up if the user clicks somewhere else. Used for the news app settings and - * add new field. - * - * Usage: - * - *
I'm sliding up
- */ - var registerAppsSlideToggle = function () { - var buttons = $('[data-apps-slide-toggle]'); + /** + * Provides a way to slide down a target area through a button and slide it + * up if the user clicks somewhere else. Used for the news app settings and + * add new field. + * + * Usage: + * + *
I'm sliding up
+ */ + var registerAppsSlideToggle = function () { + var buttons = $('[data-apps-slide-toggle]'); - $(document).click(function (event) { + $(document).click(function (event) { - if (dynamicSlideToggleEnabled) { - buttons = $('[data-apps-slide-toggle]'); - } + if (dynamicSlideToggleEnabled) { + buttons = $('[data-apps-slide-toggle]'); + } - buttons.each(function (index, button) { + buttons.each(function (index, button) { - var areaSelector = $(button).data('apps-slide-toggle'); - var area = $(areaSelector); + var areaSelector = $(button).data('apps-slide-toggle'); + var area = $(areaSelector); function hideArea() { area.slideUp(function() { @@ -54,34 +54,34 @@ }); } - // do nothing if the area is animated - if (!area.is(':animated')) { + // do nothing if the area is animated + if (!area.is(':animated')) { - // button toggles the area - if (button === event.target) { - if (area.is(':visible')) { - hideArea(); - } else { - showArea(); - } + // button toggles the area + if (button === event.target) { + if (area.is(':visible')) { + hideArea(); + } else { + showArea(); + } - // all other areas that have not been clicked but are open - // should be slid up - } else { - var closest = $(event.target).closest(areaSelector); - if (area.is(':visible') && closest[0] !== area[0]) { - hideArea(); - } - } - } - }); + // all other areas that have not been clicked but are open + // should be slid up + } else { + var closest = $(event.target).closest(areaSelector); + if (area.is(':visible') && closest[0] !== area[0]) { + hideArea(); + } + } + } + }); - }); - }; + }); + }; - $(document).ready(function () { - registerAppsSlideToggle(); - }); + $(document).ready(function () { + registerAppsSlideToggle(); + }); }(document, jQuery, OC)); From 288b6d40713de3707b489a1028935fabae62e021 Mon Sep 17 00:00:00 2001 From: Arthur Schiwon Date: Tue, 12 Aug 2014 18:04:52 +0200 Subject: [PATCH 5/7] make singleselect check for gravity wish, and make it south for default quota --- core/js/singleselect.js | 6 +++++- settings/templates/users/part.setquota.php | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/core/js/singleselect.js b/core/js/singleselect.js index c22b523220..6a4c104ffb 100644 --- a/core/js/singleselect.js +++ b/core/js/singleselect.js @@ -2,10 +2,14 @@ $.fn.singleSelect = function () { return this.each(function (i, select) { var input = $(''), + gravity = $(select).attr('data-gravity'), inputTooltip = $(select).attr('data-inputtitle'); if (inputTooltip){ input.attr('title', inputTooltip); } + if (typeof gravity === 'undefined') { + gravity = 'n' + } select = $(select); input.css('position', 'absolute'); input.css({ @@ -35,7 +39,7 @@ input.css(select.offset()); input.show(); if ($.fn.tipsy){ - input.tipsy({gravity: 'n', trigger: 'manual'}); + input.tipsy({gravity: gravity, trigger: 'manual'}); input.tipsy('show'); } select.css('background-color', 'white'); diff --git a/settings/templates/users/part.setquota.php b/settings/templates/users/part.setquota.php index ee9b918eac..55e31a930e 100644 --- a/settings/templates/users/part.setquota.php +++ b/settings/templates/users/part.setquota.php @@ -6,7 +6,7 @@ t('Default Quota'));?> - " data-gravity="s"> From 4220e0c7da091330f6a4f6a2e1669fb4ece482bd Mon Sep 17 00:00:00 2001 From: Arthur Schiwon Date: Wed, 13 Aug 2014 14:20:14 +0200 Subject: [PATCH 6/7] it does not affect gravity on planet earth, but only for tipsy --- core/js/singleselect.js | 2 +- settings/templates/users/part.setquota.php | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/core/js/singleselect.js b/core/js/singleselect.js index 6a4c104ffb..79ae0874db 100644 --- a/core/js/singleselect.js +++ b/core/js/singleselect.js @@ -2,7 +2,7 @@ $.fn.singleSelect = function () { return this.each(function (i, select) { var input = $(''), - gravity = $(select).attr('data-gravity'), + gravity = $(select).attr('data-tipsy-gravity'), inputTooltip = $(select).attr('data-inputtitle'); if (inputTooltip){ input.attr('title', inputTooltip); diff --git a/settings/templates/users/part.setquota.php b/settings/templates/users/part.setquota.php index 55e31a930e..afbbee8206 100644 --- a/settings/templates/users/part.setquota.php +++ b/settings/templates/users/part.setquota.php @@ -6,7 +6,7 @@ t('Default Quota'));?> - " data-tipsy-gravity="s"> From 3c7fbbef22035a228293a3baf79b0d185a8f2393 Mon Sep 17 00:00:00 2001 From: Vincent Petry Date: Fri, 15 Aug 2014 12:43:24 +0200 Subject: [PATCH 7/7] Do not close container/slider when clicking on single select field --- core/js/singleselect.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/core/js/singleselect.js b/core/js/singleselect.js index 79ae0874db..1b2016aabb 100644 --- a/core/js/singleselect.js +++ b/core/js/singleselect.js @@ -87,6 +87,10 @@ $(this).tipsy('hide'); } }); + input.click(function(ev) { + // prevent clicks to close any container + ev.stopPropagation(); + }); }); }; })(jQuery);