diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css index 626018d1a..dacc008ff 100644 --- a/admin/themes/clear/theme.css +++ b/admin/themes/clear/theme.css @@ -313,26 +313,26 @@ UL.thumbnails li.rank-of-image {background-color: #ddd;} p.albumTitle img {margin-bottom:-3px;} -.groups li, -.groups .showCreateAlbum, +.groups .GroupContainer, +.groups .showCreateGroup, .groups .addGroupFormBlock{ font-size: 1.2em; background-color:#fafafa; } -.groups label>p, +.groups .Group-name>p, .addGroupForm .addGroupFormTitle{ color:#3c3c3c; font-size: 1.2em; } -.groups li, -.groups .showCreateAlbum, +.groups .GroupContainer, +.groups .showCreateGroup, .groups .addGroupFormBlock{ box-shadow: -1px 1px 2px #e7e7e7; } -.groups .showCreateAlbum:hover #addGroup, +.groups .showCreateGroup:hover #addGroup, .groups .addGroupFormTitle{ color:#3c3c3c; text-decoration:none; @@ -378,11 +378,11 @@ label>p.group_select { /*Edit group name*/ -.groups label{ +.groups .Group-name{ color:#3c3c3c; } -.groups label .Group-name-container p:focus{ +.groups .Group-name .Group-name-container p:focus{ border:1px solid #3c3c3c!important; background-color:white; } @@ -565,11 +565,11 @@ input:focus + .slider { border:2px solid #ffa646; } -.groups .Group-checkbox-container:hover input ~ .group-checkmark { +.groups .Group-checkbox:hover input ~ .group-checkmark { background-color: #ffa646; } -.groups .Group-checkbox-container input:checked ~ .group-checkmark { +.groups .Group-checkbox input:checked ~ .group-checkmark { background-color: #ffa646; } diff --git a/admin/themes/default/template/group_list.tpl b/admin/themes/default/template/group_list.tpl index ede527b3a..cfc6b61f7 100644 --- a/admin/themes/default/template/group_list.tpl +++ b/admin/themes/default/template/group_list.tpl @@ -1,47 +1,10 @@ {footer_script} + +var pwg_token = "{$PWG_TOKEN}"; +var member_default = "{'member'|@translate}" + {literal} -$(document).ready(function() { - $('.groups input').change(function () { $(this).parent('p').toggleClass('group_select'); }); - $(".grp_action").hide(); - $("input.group_selection").click(function() { - var nbSelected = 0; - nbSelected = $("input.group_selection").filter(':checked').length; - - if (nbSelected == 0) { - $("#permitAction").hide(); - $("#forbidAction").show(); - } - else { - $("#permitAction").show(); - $("#forbidAction").hide(); - } - $("p[group_id="+$(this).prop("value")+"]").each(function () { - $(this).toggle(); - }); - - if (nbSelected2) { - $("#two_to_select").show(); - $("#two_atleast").hide(); - } - else { - $("#two_to_select").hide(); - $("#two_atleast").show(); - } - }); - $("[id^=action_]").hide(); - $("select[name=selectAction]").change(function () { - $("[id^=action_]").hide(); - $("#action_"+$(this).prop("value")).show(); - if ($(this).val() != -1 ) { - $("#applyActionBlock").show(); - } - else { - $("#applyActionBlock").hide(); - } - }); - -}); /*------- Group Popup @@ -63,7 +26,7 @@ Add User toggle and reduces height of user list when add user form is visible $('#form-btn').click(function(){ $('#cancel').show(); $('#addUserLabel').show() - $('#input-user-name').show(); + $('.input-user-name').show(); $('#UserSubmit').show(); $('#form-btn').hide(); $(".groups .list_user").css("max-height","100px"); @@ -72,7 +35,7 @@ $('#form-btn').click(function(){ $('#cancel').click(function(){ $('#cancel').hide(); $('#addUserLabel').hide() - $('#input-user-name').hide(); + $('.input-user-name').hide(); $('#UserSubmit').hide(); $('#form-btn').show(); $(".groups .list_user").css("max-height","200px"); @@ -82,14 +45,52 @@ $('#cancel').click(function(){ Add Group toggle -------*/ -$('#addGroup').click(function(){ +$('#showAddGroup').click(function(){ $('#addGroupForm').css('display', 'inline-block'); $('#showAddGroup').css('display', 'none'); }); -$('#addGroupClose').click(function(){ +var closeAddGroup = function () { $('#addGroupForm').css('display', 'none'); $('#showAddGroup').css('display', 'inline-block'); +} + +$('#addGroupClose').click(closeAddGroup); + +$('.actionButtons input').click(closeAddGroup); + +/*------- +Add Group Submit +-------*/ + +jQuery(document).ready(function() { + $('#addGroupForm form').on("submit", function(e) { + e.preventDefault(); + let name = $('#addGroupForm input[type=text]').val(); + jQuery.ajax({ + url: "ws.php?format=json&method=pwg.groups.add", + type:"POST", + data: "name="+name+"&pwg_token="+pwg_token, + success: function(raw_data) { + data = jQuery.parseJSON(raw_data); + if (data.stat === "ok") { + id = data.result.groups[0].id; + newgroup = $('#group-template').clone().attr('id', "group-"+id); + newgroup.attr("data-id", id); + newgroup.find("#group_name").html(name); + newgroup.find(".Group-checkbox label").attr("for", "Group-Checkbox-selection-"+id) + newgroup.find(".Group-checkbox input").attr("id", "Group-Checkbox-selection-"+id) + newgroup.find(".input-edit-group-name").attr('placeholder', name); + newgroup.find(".group_number_users").html("0 "+member_default); + setupGroupBox(newgroup); + newgroup.appendTo('.groups') + } + }, + error: function(err) { + console.log(err); + } + }); + }); }); /*------- @@ -110,6 +111,68 @@ close.onclick = function() { modalUL.style.visibility = "hidden"; } +/*------- +SETUP JS ON GROUP BOX +-------*/ +jQuery(document).ready(function() { + $(".GroupContainer").each(function () { + setupGroupBox($(this)); + }) +}); + +var setupGroupBox = function (groupBox) { + + var id = groupBox.data('id'); + + /* Change background color of group block if checked in selection mode */ + groupBox.find(".Group-checkbox input[type='checkbox']").change(function(){ + if($(this).is(":checked")){ + groupBox.addClass("OrangeBackground"); + groupBox.find('.icon-users-1').addClass("OrangeIcon"); + groupBox.find('.group_number_users').addClass("OrangeFont"); + + item = $("
"); + item.appendTo(".DeleteGroupList"); + item.find("a").on('click', function() { + groupBox.find(".Group-checkbox input").attr("checked", false); + groupBox.find(".Group-checkbox input[type='checkbox']").trigger("change"); + }); + }else{ + groupBox.removeClass("OrangeBackground"); + groupBox.find('.icon-users-1').removeClass("OrangeIcon"); + groupBox.find('.group_number_users').removeClass("OrangeFont"); + $(".DeleteGroupList div").each(function(){ + if ($(this).data('id') == id) {$(this).remove()} + }) + } + }); + + /* Display the option on the click on "..." */ + groupBox.find(".group-dropdown-options").click(function GroupOptions(){ + $(this).find("#GroupOptions").toggle(); + }); + + /* Set the delete action */ + groupBox.find("#GroupDelete").on('click', function(){ + jQuery.ajax({ + url: "ws.php?format=json&method=pwg.groups.delete", + type:"POST", + data: "group_id="+id+"&pwg_token="+pwg_token, + success: function(raw_data) { + data = jQuery.parseJSON(raw_data); + if (data.stat === "ok") { + groupBox.remove(); + } + }, + error: function(err) { + console.log(err); + } + }); + }); +} + /*------- Selection mode toggle actions, changes "..." in group block to checkbox, @@ -117,54 +180,27 @@ disables group actions in selection mode -------*/ $(function () { - $("#toggleSelectionMode").click(function () { - if ($(this).is(":checked")) { - $("#selection-mode-block").show(); - $(".group-dropdown-options").css('display', 'none'); - $(".Group-checkbox").css('display','block'); - $(".GroupManagerButtons").addClass("DisableInSelectionMode"); - $("#group_name").attr('contenteditable', false); - $(".icon-pencil").addClass("DisableInSelectionMode"); - $("label").css("cursor","default") - } else { - $("#selection-mode-block").hide(); - $(".group-dropdown-options").css('display', 'block'); - $(".Group-checkbox").css('display','none'); - $(".Group-checkbox-container input").prop("checked", false); - $('#group-1 li').removeClass("OrangeBackground"); - $('.groups .icon-users-1:first-child').removeClass("OrangeIcon"); - $(".GroupManagerButtons").removeClass("DisableInSelectionMode"); - $("#group_name").attr('contenteditable', true); - $(".icon-pencil").removeClass("DisableInSelectionMode"); - $("label").css("cursor","pointer") - $('.groups label').removeClass("BlackFont") - } - }); - }); + $("#toggleSelectionMode").click(function () { + if ($(this).is(":checked")) { + $(".in-selection-mode").fadeIn(); + $(".not-in-selection-mode").fadeOut(); + $("#group_name").attr('contenteditable', false); + } else { + $(".in-selection-mode").fadeOut(); + $(".not-in-selection-mode").fadeIn(); + $(".Group-checkbox input").attr("checked", false); + $(".Group-checkbox input[type='checkbox']").trigger("change"); + $("#group_name").attr('contenteditable', true); + } + }); +}); -/*------- -Change background color of group block if checked in selection mode --------*/ - -$(".Group-checkbox-container input[type='checkbox']").change(function(){ -if($(this).is(":checked")){ - $('#group-1 li').addClass("OrangeBackground"); - $('.groups .icon-users-1:first-child').addClass("OrangeIcon"); - $('.groups .group_number_users').addClass("OrangeFont"); - $('.groups label').addClass("BlackFont") -}else{ - $('#group-1 li').removeClass("OrangeBackground"); - $('.groups .icon-users-1:first-child').removeClass("OrangeIcon"); - $('.groups .group_number_users').removeClass("OrangeFont"); - $('.groups label').removeClass("BlackFont") -} }); - /*------- Display group name in selection list -------*/ /* -$(function () { +jQuery(document).ready(function() { $("#Group-Checkbox-selection").click(function () { if ($(this).is(":checked")) { $('.SelectionModeGroup').show(); @@ -178,39 +214,34 @@ $(function () { */ /*------- -show group options in "..." on click +Hide group options on click on the screen -------*/ -$(".group-dropdown-options").click(function GroupOptions(){ - $("#GroupOptions").toggle(); - }); - $(document).mouseup(function (e) { - if ($(e.target).closest("#GroupOptions").length - === 0) { - $("#GroupOptions").hide(); - } - }); + if ($(e.target).closest("#GroupOptions").length === 0) { + $(".group-dropdown-options #GroupOptions").hide(); + } +}); /*------- Merge Options in selection mode -------*/ function MergeOptions(){ - document.getElementById("MergeOptionsBlock").style.display = "block"; - document.getElementById("DeleteSelectionMode").style.display = "none"; - document.getElementById("MergeSelectionMode").style.display = "none"; + jQuery("#MergeOptionsBlock").show(); + jQuery("#DeleteSelectionMode").hide(); + jQuery("#MergeSelectionMode").hide(); }; /*------- -Cancel Merge options +Cancel Merge options or deletion confirmation -------*/ function CancelAction(){ - document.getElementById("MergeOptionsBlock").style.display = "none"; - document.getElementById("ConfirmGroupAction").style.display = "none"; - document.getElementById("DeleteSelectionMode").style.display = "block"; - document.getElementById("MergeSelectionMode").style.display = "block"; + jQuery("#MergeOptionsBlock").hide(); + jQuery("#ConfirmGroupAction").hide(); + jQuery("#DeleteSelectionMode").show(); + jQuery("#MergeSelectionMode").show(); }; /*------- @@ -218,14 +249,57 @@ Display deletion confirmation -------*/ function DeleteValidation(){ - document.getElementById("ConfirmGroupAction").style.display = "block"; - document.getElementById("DeleteSelectionMode").style.display = "none"; - document.getElementById("MergeSelectionMode").style.display = "none"; + jQuery("#ConfirmGroupAction").show(); + jQuery("#DeleteSelectionMode").hide(); + jQuery("#MergeSelectionMode").hide(); }; + + {/literal} {/footer_script} +{* Define template function for the content of Groups*} +{function name=groupContent} +{function groupContent} +{$grp_name}
+{$grp_members}
+ + +Selection mode
No selection
Your selection
The other groups will be removed
You are about to delete [4] groups, are you sure?
- + No, I have changed my mind