adam/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-08-07 09:13:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

Implement Group actions and behaviors on admin page (in ajax)

Browse Source 
* Move js to a separate file
 * Rename and delete by selection functions are now operational
 * Add error or information messages at actions
 * Add different colors on group icons
 * Fixes (selection panel...)
This commit is contained in:
Zacharie
2020-04-28 10:04:36 +02:00
committed by plegall
parent 87fc70f84b
commit c77519e860
3 changed files with 424 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/themes/default/js/group_list.js
+338
View File
@@ -0,0 +1,338 @@
/*-------
Group Popup
-------*/
$(".group_details_popup_trigger").click(function () {
$(".Group_details-popup-container").show();
});
$(".CloseGroupPopup").click(function () {
$(".Group_details-popup-container").hide();
});
/*-------
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();
$("#UserSubmit").show();
$("#form-btn").hide();
$(".groups .list_user").css("max-height", "100px");
});
$("#cancel").click(function () {
$("#cancel").hide();
$("#addUserLabel").hide();
$(".input-user-name").hide();
$("#UserSubmit").hide();
$("#form-btn").show();
$(".groups .list_user").css("max-height", "200px");
});
/*-------
Add Group toggle
-------*/
$("#showAddGroup").click(function () {
$("#addGroupForm").css("display", "inline-block");
$("#showAddGroup").css("display", "none");
});
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") {
$(".addGroupFormLabelAndInput input").val('');
id = data.result.groups[0].id;
//Setup the group
newgroup = $("#group-template").clone().attr("id", "group-" + id);
newgroup.css("order", -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);
//Setup the icon color
var colors = [["#ffa744", "#ffe9cf"],["#896af3", "#e0daf4"], ["#6ece5e","#d6ffcf"],["#2883c3","#cfebff"]];
var colorId = Number(id)%4;
newgroup.find(".icon-users-1").attr("style", "color:"+colors[colorId][0]+"; background-color:"+colors[colorId][1]);
setupGroupBox(newgroup);
//Place group in first Place
newgroup.appendTo(".groups");
newgroup.find(".groupMessage").html(group_created);
newgroup.find(".groupMessage").fadeIn();
newgroup.find(".groupMessage").delay(4000).fadeOut();
} else {
$("#showAddGroup .groupError").html(name_taken);
$("#showAddGroup .groupError").fadeIn();
$("#showAddGroup .groupError").delay(3000).fadeOut();
$("#showAddGroup .groupError").delay(10).html(contents);
}
},
error: function (err) {
console.log(err);
},
});
});
});
/*-------
User List group pop-in
-------*/
var modalUL = document.getElementById("UserList");
var btn = document.getElementById("UserListTrigger");
var close = document.getElementsByClassName("CloseUserList")[0];
btn.onclick = function () {
modalUL.style.visibility = "visible";
};
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");
//Display item selection on selection panel
item = $(
"<div data-id=" +
groupBox.data("id") +
">" +
"<a class='icon-cancel'></a>" +
"<p>" +
groupBox.find("#group_name").html() +
"</p> </div>"
);
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");
});
updateSelectionPanel();
} 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();
}
});
updateSelectionPanel();
}
});
/* 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 () {
deleteGroup(id);
});
/* Set the rename action */
let contents = groupBox.find("#group_name").html();
groupBox.find("#group_name").blur(function() {
if (contents!=groupBox.find("#group_name").html()){
jQuery.ajax({
url: "ws.php?format=json&method=pwg.groups.setInfo",
type: "POST",
data: "group_id=" + id + "&pwg_token=" + pwg_token + "&name="+groupBox.find("#group_name").html(),
success: function (raw_data) {
data = jQuery.parseJSON(raw_data);
if (data.stat === "ok") {
groupBox.find(".groupMessage").html(renaming_done);
groupBox.find(".groupMessage").fadeIn();
groupBox.find(".groupMessage").delay(3000).fadeOut();
contents = groupBox.find("#group_name").html();
} else {
groupBox.find(".groupError").html(name_taken);
groupBox.find(".groupError").fadeIn();
groupBox.find(".groupError").delay(3000).fadeOut();
groupBox.find("#group_name").delay(10).html(contents);
}
},
error: function (err) {
console.log(err);
},
});
}
});
};
var deleteGroup = function (id) {
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") {
$("#group-" + id).remove();
}
},
error: function (err) {
console.log(err);
},
});
};
/*-------
Selection mode toggle actions,
changes "..." in group block to checkbox,
disables group actions in selection mode
-------*/
$(function () {
$("#toggleSelectionMode").click(function () {
if ($(this).is(":checked")) {
$(".in-selection-mode").fadeIn();
$(".not-in-selection-mode").fadeOut();
$("#group_name").attr("contenteditable", false);
$(".GroupManagerButtons").removeClass("visible");
} else {
$(".in-selection-mode").fadeOut();
$(".not-in-selection-mode").fadeIn();
$(".GroupManagerButtons").addClass("visible");
$(".Group-checkbox input").attr("checked", false);
$(".Group-checkbox input[type='checkbox']").trigger("change");
$("#group_name").attr("contenteditable", true);
}
});
});
/*-------
Hide group options on click on the screen
-------*/
$(document).mouseup(function (e) {
if ($(e.target).closest("#GroupOptions").length === 0) {
$(".group-dropdown-options #GroupOptions").hide();
}
});
/*-------
Update Selection Panel
-------*/
var state = "NoSelection";
var updateSelectionPanel = function (changedState = "") {
let numSelect = $(".DeleteGroupList div").length;
if (numSelect == 0) {
updateStatePanel("NoSelection")
} else if (numSelect == 1 && (state == "OptionMerge" || state == "NoSelection" || state == "Selection")) {
updateStatePanel("OneSelected")
} else if (changedState != "") {
updateStatePanel(changedState)
} else if (numSelect > 1 && state == "OneSelected") {
updateStatePanel("Selection");
}
$(".number-Selected").html(numSelect + "");
};
/*Update the state of the panel in 5 states :
NoSelection, OneSelected, ConfirmDeletion, Selection, OptionMerge
*/
var updateStatePanel = function (newState = "Selection") {
state = newState;
switch (newState) {
case "OneSelected":
$("#DeleteSelectionMode").show();
$("#MergeSelectionMode").hide();
$("#MergeOptionsBlock").hide();
$("#ConfirmGroupAction").hide();
break;
case "ConfirmDeletion":
$("#DeleteSelectionMode").hide();
$("#MergeSelectionMode").hide();
$("#MergeOptionsBlock").hide();
$("#ConfirmGroupAction").show();
break;
case "Selection":
$("#DeleteSelectionMode").show();
$("#MergeSelectionMode").show();
$("#MergeOptionsBlock").hide();
$("#ConfirmGroupAction").hide();
break;
case "OptionMerge":
$("#DeleteSelectionMode").hide();
$("#MergeSelectionMode").hide();
$("#MergeOptionsBlock").show();
$("#ConfirmGroupAction").hide();
break;
}
if (newState == "NoSelection") {
$(".SelectionModeGroup").hide();
$("#nothing-selected").show();
$("#MergeOptionsBlock").hide();
$("#ConfirmGroupAction").hide();
} else {
$(".SelectionModeGroup").show();
$("#nothing-selected").hide();
}
};
/*-------
Delete function on button's pannel
-------*/
$('.ConfirmDeleteButton').on("click", function() {
$('.DeleteGroupList div').each(function () {
deleteGroup($(this).data('id'));
$(this).remove();
updateSelectionPanel("NoSelection");
})
})
admin/themes/default/template/group_list.tpl
+31 -268
View File
@@ -1,269 +1,22 @@
{footer_script}
var pwg_token = "{$PWG_TOKEN}";
var member_default = "{'member'|@translate}"
{literal}
/*-------
Group Popup
-------*/
$(".group_details_popup_trigger").click(function(){
$('.Group_details-popup-container').show();
});
$(".CloseGroupPopup").click(function(){
$('.Group_details-popup-container').hide();
});
/*-------
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();
$('#UserSubmit').show();
$('#form-btn').hide();
$(".groups .list_user").css("max-height","100px");
});
$('#cancel').click(function(){
$('#cancel').hide();
$('#addUserLabel').hide()
$('.input-user-name').hide();
$('#UserSubmit').hide();
$('#form-btn').show();
$(".groups .list_user").css("max-height","200px");
});
/*-------
Add Group toggle
-------*/
$('#showAddGroup').click(function(){
$('#addGroupForm').css('display', 'inline-block');
$('#showAddGroup').css('display', 'none');
});
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);
}
});
});
});
/*-------
User List group pop-in
-------*/
var modalUL = document.getElementById("UserList");
var btn = document.getElementById("UserListTrigger");
var close = document.getElementsByClassName("CloseUserList")[0];
btn.onclick = function() {
modalUL.style.visibility = "visible";
}
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 = $("<div data-id="+groupBox.data('id')+">"
+"<a class='icon-cancel'></a>"
+"<p>"+groupBox.find("#group_name").html()+"</p> </div>");
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,
disables group actions in selection mode
-------*/
$(function () {
$("#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);
}
});
});
/*-------
Display group name in selection list
-------*/
/*
jQuery(document).ready(function() {
$("#Group-Checkbox-selection").click(function () {
if ($(this).is(":checked")) {
$('.SelectionModeGroup').show();
$('#nothing-selected').hide();
}else{
$('.SelectionModeGroup').hide();
$('#nothing-selected').show();
}
)};
});
*/
/*-------
Hide group options on click on the screen
-------*/
$(document).mouseup(function (e) {
if ($(e.target).closest("#GroupOptions").length === 0) {
$(".group-dropdown-options #GroupOptions").hide();
}
});
/*-------
Merge Options in selection mode
-------*/
function MergeOptions(){
jQuery("#MergeOptionsBlock").show();
jQuery("#DeleteSelectionMode").hide();
jQuery("#MergeSelectionMode").hide();
};
/*-------
Cancel Merge options or deletion confirmation
-------*/
function CancelAction(){
jQuery("#MergeOptionsBlock").hide();
jQuery("#ConfirmGroupAction").hide();
jQuery("#DeleteSelectionMode").show();
jQuery("#MergeSelectionMode").show();
};
/*-------
Display deletion confirmation
-------*/
function DeleteValidation(){
jQuery("#ConfirmGroupAction").show();
jQuery("#DeleteSelectionMode").hide();
jQuery("#MergeSelectionMode").hide();
};
{/literal}
var group_created = "{'Group created'|@translate}"
var renaming_done = "{'Renaming done'|@translate}"
var name_taken = "{'Name is already taken'|@translate}"
{/footer_script}
{combine_script id='common' load='footer' path='admin/themes/default/js/group_list.js'}
{* Define template function for the content of Groups*}
{function name=groupContent}
{function groupContent}
<div id="group-{$grp_id}" class="GroupContainer" data-id={$grp_id}>
<div class="icon-users-1"></div>
<div id="group-{$grp_id}" class="GroupContainer" data-id={$grp_id} style="order: -{$grp_id}">
<div class="groupHeader">
<div class="icon-users-1" style="color:{$icon_color};background-color:{$icon_background_color}"></div>
<div class="groupMessage icon-ok"></div>
<div class="groupError icon-cancel"></div>
</div>
<div class="icon-ellipsis-vert group-dropdown-options not-in-selection-mode">
<div id="GroupOptions">
@@ -293,7 +46,7 @@ function DeleteValidation(){
<p class="group_number_users">{$grp_members}</p>
<div class="GroupManagerButtons not-in-selection-mode">
<div class="GroupManagerButtons visible">
<a id="UserListTrigger" class="icon-user-1 manage-users">Manage users</a>
<a class="icon-lock manage-permissions">Manage permissions</a>
</div>
@@ -326,8 +79,8 @@ function DeleteValidation(){
</div>
</div>
<button id="MergeSelectionMode" class="icon-object-group" onclick="MergeOptions()">Merge</button>
<button id="DeleteSelectionMode" class="icon-trash-1" onclick="DeleteValidation()">Delete</button>
<button id="MergeSelectionMode" class="icon-object-group" onclick="updateSelectionPanel('OptionMerge')">Merge</button>
<button id="DeleteSelectionMode" class="icon-trash-1" onclick="updateSelectionPanel('ConfirmDeletion')">Delete</button>
</div>
<div id="MergeOptionsBlock">
@@ -339,15 +92,15 @@ function DeleteValidation(){
</select>
</div>
<button class="icon-ok ConfirmMergeButton" onclick="CancelAction()">Confirm merge</button>
<a id="CancelMerge" onclick="CancelAction()">Cancel</a>
<button class="icon-ok ConfirmMergeButton" onclick="updateSelectionPanel('Selection')">Confirm merge</button>
<a id="CancelMerge" onclick="updateSelectionPanel('Selection')">Cancel</a>
</div>
<div id="ConfirmGroupAction">
<p>You are about to delete [4] groups, are you sure?</p>
<button class="icon-ok ConfirmDeleteButton" onclick="CancelAction()">Yes, delete</button>
<a id="CancelDelete" onclick="CancelAction()">No, I have changed my mind</a>
<p>You are about to delete <span class="number-Selected">0</span> groups, are you sure?</p>
<button class="icon-ok ConfirmDeleteButton" onclick="updateSelectionPanel('Selection')">Yes, delete</button>
<a id="CancelDelete" onclick="updateSelectionPanel('Selection')">No, I have changed my mind</a>
</div>
</div>
@@ -358,6 +111,7 @@ function DeleteValidation(){
<div class="groups">
<div class="showCreateGroup" id="showAddGroup">
<div class="groupError icon-cancel"></div>
<div class="addGroupBlock">
<div class="icon-plus-circled"></div>
<p id="addGroup">{'Add group'|translate}</p>
@@ -366,7 +120,6 @@ function DeleteValidation(){
<div id="addGroupForm">
<div class="addGroupFormBlock">
<div class="icon-users-1"></div>
<form>
<fieldset>
<p class="addGroupFormTitle">{'Add group'|@translate}</p>
@@ -387,9 +140,19 @@ function DeleteValidation(){
{* Template Group (for js application) *}
{groupContent grp_id="template" grp_name="Template" grp_members=0}
{assign var='color_tab' value=[["#ffa744", "#ffe9cf"],["#896af3", "#e0daf4"], ["#6ece5e","#d6ffcf"],["#2883c3","#cfebff"]]}
{if not empty($groups)}
{foreach from=$groups item=group name=group_loop}
{groupContent grp_id=$group.ID grp_name=$group.NAME grp_members=$group.MEMBERS}
{assign var='color_id' value=$group.ID%4}
{groupContent
grp_id=$group.ID
grp_name=$group.NAME
grp_members=$group.MEMBERS
icon_color=$color_tab[$color_id][0]
icon_background_color=$color_tab[$color_id][1]
}
{/foreach}
{/if}
</div>
admin/themes/default/theme.css
+55 -10
View File
@@ -1533,6 +1533,7 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
}
.showCreateGroup {
order: -10000000000;
text-align: left;
margin: 0 1em 25px 20px;
line-height: 22px;
@@ -1540,10 +1541,13 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
.content .groups form{
margin:0;
margin-top: 40px;
}
.groups {
text-align:center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.group-manager{
@@ -1628,6 +1632,10 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
margin:0 5px;
}
.groups #addGroupForm {
order: -10000000000;
}
.groups .addGroupFormTitle{
font-size:1.2em;
font-weight:700;
@@ -1637,14 +1645,46 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
padding:5px;
}
.groupHeader {
margin:15px auto;
}
.groups .icon-users-1:first-child{
font-size: 19px;
color: rgb(44,132,195);
background-color: #CDE9FD;
color: #4d4d4d;
background-color: #ffffff;
width: 27px;
padding: 10px;
border-radius: 30px;
margin:15px auto;
margin: auto;
transition: 0.4s ease;
}
.groupMessage {
display: none;
position: absolute;
background-color: #d6ffcf;
min-height: 17px;
padding: 10px;
border-radius: 30px;
top: -17px;
font-size: 12px;
right: 50px;
width: 106px;
}
.groupError {
z-index: 2;
display: none;
position: absolute;
background-color: #ffcfcf;
min-height: 17px;
padding: 10px;
border-radius: 30px;
top: -17px;
font-size: 12px;
right: 29px;
width: 143px;
}
.groups .addGroupFormTitle{
@@ -1744,11 +1784,11 @@ input:checked + .slider:before {
/*Selection mode content*/
#nothing-selected{
display:none;
display:block;
}
.SelectionModeGroup{
display:block;
display:none;
text-align:center;
}
@@ -1802,6 +1842,7 @@ input:checked + .slider:before {
background-color: #ffa744;
border:none;
margin-top:40px;
cursor: pointer;
}
/*Merge Options*/
@@ -2081,7 +2122,12 @@ input:checked + .slider:before {
.groups .GroupManagerButtons{
text-align:center;
margin:15px 0;
margin:18px 0;
}
.groups .GroupManagerButtons a {
padding-top :15px;
padding-bottom :15px;
}
.groups .manage-users,
@@ -2108,14 +2154,13 @@ input:checked + .slider:before {
@media (hover: hover){
.GroupContainer li .GroupManagerButtons{
.GroupContainer .GroupManagerButtons{
display:none;
}
.GroupContainer li:hover .GroupManagerButtons{
.GroupContainer:hover .GroupManagerButtons.visible{
display:block;
}
}
/*UserList Pop in*/