mirror of
https://github.com/Piwigo/Piwigo.git
synced 2025-04-29 12:49:57 +03:00
f355a307d7
Updated metadata-sync badge and save Updated unsaved changes badge triggers Harmonized global and unit mode by creating a template for the filters TODO : Uncomment updateBlock calls in metaSync and implement tags update Uncomment pluginSave method and test it with an updated plugin
556 lines
No EOL
18 KiB
JavaScript
556 lines
No EOL
18 KiB
JavaScript
$(document).ready(function() {
|
|
// Detect unsaved changes on any inputs
|
|
var user_interacted = false;
|
|
|
|
$('input, textarea, select').on('focus', function() {
|
|
user_interacted = true;
|
|
});
|
|
|
|
$('input, textarea').on('input', function() {
|
|
var pictureId = $(this).parents("fieldset").data("image_id");
|
|
if (user_interacted == true) {
|
|
showUnsavedLocalBadge(pictureId);
|
|
}
|
|
});
|
|
|
|
// Specific handler for datepicker inputs
|
|
$('input[data-datepicker]').on('change', function() {
|
|
var pictureId = $(this).parents("fieldset").data("image_id");
|
|
if (user_interacted == true) {
|
|
showUnsavedLocalBadge(pictureId);
|
|
}
|
|
});
|
|
|
|
$('select').on('change', function() {
|
|
var pictureId = $(this).parents("fieldset").data("image_id");
|
|
if (user_interacted == true) {
|
|
showUnsavedLocalBadge(pictureId);
|
|
}
|
|
});
|
|
|
|
$('.related-categories-container .remove-item, .datepickerDelete').on('click', function() {
|
|
user_interacted = true;
|
|
var pictureId = $(this).parents("fieldset").data("image_id");
|
|
showUnsavedLocalBadge(pictureId);
|
|
});
|
|
|
|
// METADATA SYNC
|
|
$('.action-sync-metadata').on('click', function(event) {
|
|
var pictureId = $(this).parents("fieldset").data("image_id");
|
|
$.confirm({
|
|
title: str_meta_warning,
|
|
draggable: false,
|
|
titleClass: "metadataSyncConfirm",
|
|
theme: "modern",
|
|
content: "",
|
|
animation: "zoom",
|
|
boxWidth: '30%',
|
|
useBootstrap: false,
|
|
type: 'red',
|
|
animateFromElement: false,
|
|
backgroundDismiss: true,
|
|
typeAnimated: false,
|
|
buttons: {
|
|
confirm: {
|
|
text: str_meta_yes,
|
|
btnClass: 'btn-red',
|
|
action: function() {
|
|
disableLocalButton(pictureId);
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: 'ws.php?format=json',
|
|
data: {
|
|
method: "pwg.images.syncMetadata",
|
|
pwg_token: jQuery("input[name=pwg_token]").val(),
|
|
image_id: pictureId
|
|
},
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
var isOk = data.stat && data.stat === "ok";
|
|
if (isOk) {
|
|
updateBlock(pictureId);
|
|
} else {
|
|
showErrorLocalBadge(pictureId);
|
|
enableLocalButton(pictureId);
|
|
}
|
|
},
|
|
error: function(data) {
|
|
console.error("Error occurred");
|
|
enableLocalButton(pictureId);
|
|
}
|
|
});
|
|
}
|
|
},
|
|
cancel: {
|
|
text: str_meta_no
|
|
}
|
|
}
|
|
});
|
|
});
|
|
// DELETE
|
|
$('.action-delete-picture').on('click', function(event) {
|
|
var $fieldset = $(this).parents("fieldset");
|
|
var pictureId = $fieldset.data("image_id");
|
|
$.confirm({
|
|
title: str_are_you_sure,
|
|
draggable: false,
|
|
titleClass: "groupDeleteConfirm",
|
|
theme: "modern",
|
|
content: "",
|
|
animation: "zoom",
|
|
boxWidth: '30%',
|
|
useBootstrap: false,
|
|
type: 'red',
|
|
animateFromElement: false,
|
|
backgroundDismiss: true,
|
|
typeAnimated: false,
|
|
buttons: {
|
|
confirm: {
|
|
text: str_yes,
|
|
btnClass: 'btn-red',
|
|
action: function() {
|
|
var image_ids = [pictureId];
|
|
(function(ids) {
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: 'ws.php?format=json',
|
|
data: {
|
|
method: "pwg.images.delete",
|
|
pwg_token: jQuery("input[name=pwg_token]").val(),
|
|
image_id: ids.join(',')
|
|
},
|
|
dataType: 'json',
|
|
success: function(data) {
|
|
var isOk = data.stat && data.stat === "ok";
|
|
if (isOk) {
|
|
$fieldset.remove();
|
|
$('.pagination-container').css({
|
|
'pointer-events': 'none',
|
|
'opacity': '0.5'
|
|
});
|
|
$('.button-reload').css('display', 'block');
|
|
$('div[data-image_id="' + pictureId + '"]').css('display', 'flex');
|
|
} else {
|
|
showErrorLocalBadge(pictureId);
|
|
}
|
|
},
|
|
error: function(data) {
|
|
console.error("Error occurred");
|
|
}
|
|
});
|
|
})(image_ids);
|
|
image_ids = [];
|
|
}
|
|
},
|
|
cancel: {
|
|
text: str_no
|
|
}
|
|
}
|
|
});
|
|
});
|
|
// VALIDATION
|
|
//Unit Save
|
|
$('.action-save-picture').on('click', function(event) {
|
|
var $fieldset = $(this).parents("fieldset");
|
|
var pictureId = $fieldset.data("image_id");
|
|
saveChanges(pictureId);
|
|
});
|
|
//Global Save
|
|
$('.action-save-global').on('click', function(event) {
|
|
saveAllChanges();
|
|
});
|
|
//Categories
|
|
$(".linked-albums.add-item").on("click", function() {
|
|
var pictureId = $(this).parents("fieldset").data("image_id")
|
|
linked_albums_open(pictureId);
|
|
set_up_popin();
|
|
});
|
|
$(".limitReached").html(str_no_search_in_progress);
|
|
$(".search-cancel-linked-album").hide();
|
|
$(".linkedAlbumPopInContainer .searching").hide();
|
|
$("#linkedAlbumSearch .search-input").on('input', function() {
|
|
var pictureId = $("#linkedAlbumSearch .search-input").parents(".linkedAlbumPopInContainer").attr("id");
|
|
if ($(this).val() != 0) {
|
|
$("#linkedAlbumSearch .search-cancel-linked-album").show()
|
|
} else {
|
|
$("#linkedAlbumSearch .search-cancel-linked-album").hide();
|
|
}
|
|
// Search input value length required to start searching
|
|
if ($(this).val().length > 0) {
|
|
linked_albums_search($(this).val(), pictureId);
|
|
} else {
|
|
$(".limitReached").html(str_no_search_in_progress);
|
|
$("#searchResult").empty();
|
|
}
|
|
})
|
|
$(".search-cancel-linked-album").on("click", function() {
|
|
$("#linkedAlbumSearch .search-input").val("");
|
|
$("#linkedAlbumSearch .search-input").trigger("input");
|
|
})
|
|
$(".related-categories-container .breadcrumb-item .remove-item").on("click", function() {
|
|
var pictureId = $(this).parents("fieldset").data("image_id")
|
|
remove_related_category($(this).attr("id"), pictureId);
|
|
})
|
|
pluginFunctionMapInit(activePlugins);
|
|
})
|
|
|
|
function fill_results(cats, pictureId) {
|
|
$("#searchResult").empty();
|
|
cats.forEach(cat => {
|
|
$("#searchResult").append(
|
|
"<div class='search-result-item' id=" + cat.id + ">" +
|
|
"<span class='search-result-path'>" + cat.fullname + "</span><span id=" + cat.id + " class='icon-plus-circled item-add' onclick='showUnsavedLocalBadge(" + pictureId + ")'></span>" +
|
|
"</div>"
|
|
);
|
|
var this_related_category_ids = window["related_category_ids_" + pictureId];
|
|
var catId = parseInt(cat.id);
|
|
if (this_related_category_ids.includes(catId)) {
|
|
$(".search-result-item#" + catId + " .item-add").addClass("notClickable").attr("title", str_already_in_related_cats).on("click", function(event) {
|
|
event.preventDefault();
|
|
});
|
|
$(".search-result-item").addClass("notClickable").attr("title", str_already_in_related_cats).on("click", function(event) {
|
|
event.preventDefault();
|
|
});
|
|
} else {
|
|
$(".search-result-item#" + catId + " .item-add").on("click", function() {
|
|
add_related_category(catId, cat.full_name_with_admin_links, pictureId);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function remove_related_category(cat_id, pictureId) {
|
|
var catId = parseInt(cat_id);
|
|
var this_related_category_ids = window["related_category_ids_" + pictureId];
|
|
$("#" + pictureId + " .invisible-related-categories-select option[value=" + catId + "]").remove();
|
|
$("#" + pictureId + " .invisible-related-categories-select").trigger('change');
|
|
$("#" + pictureId + " #" + catId).parent().remove();
|
|
cat_to_remove_index = this_related_category_ids.indexOf(catId);
|
|
if (cat_to_remove_index > -1) {
|
|
this_related_category_ids.splice(cat_to_remove_index, 1);
|
|
}
|
|
check_related_categories(pictureId);
|
|
}
|
|
|
|
function add_related_category(cat_id, cat_link_path, pictureId) {
|
|
var catId = parseInt(cat_id);
|
|
var this_related_category_ids = window["related_category_ids_" + pictureId];
|
|
if (!this_related_category_ids.includes(catId)) {
|
|
$("#" + pictureId + " .related-categories-container").append(
|
|
"<div class='breadcrumb-item album-listed'>" +
|
|
"<span class='link-path'>" + cat_link_path + "</span><span id=" + catId + " class='icon-cancel-circled remove-item'></span>" +
|
|
"</div>"
|
|
);
|
|
$(".search-result-item#" + catId).addClass("notClickable");
|
|
this_related_category_ids.push(catId);
|
|
$(".invisible-related-categories-select").append("<option selected value=" + catId + "></option>").trigger('change');
|
|
$("#" + catId).on("click", function() {
|
|
remove_related_category(catId, pictureId);
|
|
})
|
|
linked_albums_close();
|
|
}
|
|
check_related_categories(pictureId);
|
|
}
|
|
|
|
function check_related_categories(pictureId) {
|
|
var this_related_category_ids = window["related_category_ids_" + pictureId];
|
|
$("#picture-" + pictureId + " .linked-albums-badge").html(this_related_category_ids.length);
|
|
if (this_related_category_ids.length == 0) {
|
|
$("#" + pictureId + " .linked-albums-badge").addClass("badge-red");
|
|
$("#" + pictureId + " .add-item").addClass("highlight");
|
|
$("#" + pictureId + " .orphan-photo").html(str_orphan).show();
|
|
} else {
|
|
$("#" + pictureId + " .linked-albums-badge.badge-red").removeClass("badge-red");
|
|
$("#" + pictureId + " .add-item.highlight").removeClass("highlight");
|
|
$("#" + pictureId + " .orphan-photo").hide();
|
|
}
|
|
}
|
|
|
|
function updateUnsavedGlobalBadge() {
|
|
var visibleLocalUnsavedCount = $(".local-unsaved-badge").filter(function() {
|
|
return $(this).css('display') === 'block';
|
|
}).length;
|
|
if (visibleLocalUnsavedCount > 0) {
|
|
$(".global-unsaved-badge").css('display', 'block');
|
|
$("#unsaved-count").text(visibleLocalUnsavedCount);
|
|
} else {
|
|
$(".global-unsaved-badge").css('display', 'none');
|
|
$("#unsaved-count").text('');
|
|
}
|
|
}
|
|
|
|
function showUnsavedLocalBadge(pictureId) {
|
|
hideSuccesLocalBadge(pictureId);
|
|
hideErrorLocalBadge(pictureId);
|
|
$("#picture-" + pictureId + " .local-unsaved-badge").css('display', 'block');
|
|
updateUnsavedGlobalBadge();
|
|
}
|
|
|
|
function hideUnsavedLocalBadge(pictureId) {
|
|
$("#picture-" + pictureId + " .local-unsaved-badge").css('display', 'none');
|
|
updateUnsavedGlobalBadge();
|
|
}
|
|
$(window).on('beforeunload', function() {
|
|
if (user_interacted) {
|
|
return "You have unsaved changes, are you sure you want to leave this page?";
|
|
}
|
|
});
|
|
//Error badge
|
|
function showErrorLocalBadge(pictureId) {
|
|
$("#picture-" + pictureId + " .local-error-badge").css('display', 'block');
|
|
}
|
|
|
|
function hideErrorLocalBadge(pictureId) {
|
|
$("#picture-" + pictureId + " .local-error-badge").css('display', 'none');
|
|
}
|
|
//Succes badge
|
|
function updateSuccessGlobalBadge() {
|
|
var visibleLocalSuccesCount = $(".local-success-badge").filter(function() {
|
|
return $(this).css('display') === 'block';
|
|
}).length;
|
|
if (visibleLocalSuccesCount > 0) {
|
|
showSuccesGlobalBadge()
|
|
} else {
|
|
hideSuccesGlobalBadge()
|
|
}
|
|
}
|
|
|
|
function showSuccessLocalBadge(pictureId) {
|
|
var badge = $("#picture-" + pictureId + " .local-success-badge");
|
|
badge.css({
|
|
'display': 'block',
|
|
'opacity': 1
|
|
});
|
|
setTimeout(() => {
|
|
badge.fadeOut(1000, function() {
|
|
badge.css('display', 'none');
|
|
});
|
|
}, 3000);
|
|
}
|
|
|
|
function hideSuccesLocalBadge(pictureId) {
|
|
$("#picture-" + pictureId + " .local-success-badge").css('display', 'none');
|
|
}
|
|
|
|
function showSuccesGlobalBadge() {
|
|
var badge = $(".global-succes-badge");
|
|
badge.css({
|
|
'display': 'block',
|
|
'opacity': 1
|
|
});
|
|
setTimeout(() => {
|
|
badge.fadeOut(1000, function() {
|
|
badge.css('display', 'none');
|
|
});
|
|
}, 3000);
|
|
}
|
|
|
|
function hideSuccesGlobalBadge() {
|
|
$("global-succes-badge").css('display', 'none');
|
|
}
|
|
|
|
function showMetasyncSuccesBadge(pictureId) {
|
|
var badge = $("#picture-" + pictureId + " .metasync-success");
|
|
badge.css({
|
|
'display': 'block',
|
|
'opacity': 1
|
|
});
|
|
setTimeout(() => {
|
|
badge.fadeOut(1000, function() {
|
|
badge.css('display', 'none');
|
|
});
|
|
}, 3000);
|
|
}
|
|
|
|
function disableLocalButton(pictureId) {
|
|
$("#picture-" + pictureId + " .action-save-picture").addClass("disabled");
|
|
$("#picture-" + pictureId + " .action-save-picture i").removeClass("icon-floppy").addClass("icon-spin6 animate-spin");
|
|
disableGlobalButton();
|
|
}
|
|
|
|
function enableLocalButton(pictureId) {
|
|
$("#picture-" + pictureId + " .action-save-picture").removeClass("disabled");
|
|
$("#picture-" + pictureId + " .action-save-picture i").removeClass("icon-spin6 animate-spin").addClass("icon-floppy");
|
|
}
|
|
|
|
function disableGlobalButton() {
|
|
$(".action-save-global").addClass("disabled");
|
|
$(".action-save-global i").removeClass("icon-floppy").addClass("icon-spin6 animate-spin");
|
|
}
|
|
|
|
function enableGlobalButton() {
|
|
$(".action-save-global").removeClass("disabled");
|
|
$(".action-save-global i").removeClass("icon-spin6 animate-spin").addClass("icon-floppy");
|
|
}
|
|
|
|
function saveChanges(pictureId) {
|
|
if ($("#picture-" + pictureId + " .local-unsaved-badge").css('display') === 'block') {
|
|
disableLocalButton(pictureId);
|
|
// Retrieve Infos
|
|
var name = $("#name-" + pictureId).val();
|
|
var author = $("#author-" + pictureId).val();
|
|
var date_creation = $("#date_creation-" + pictureId).val();
|
|
var comment = $("#description-" + pictureId).val();
|
|
var level = $("#level-" + pictureId + " option:selected").val();
|
|
// Get Categories
|
|
var categories = [];
|
|
$("#picture-" + pictureId + " .remove-item").each(function() {
|
|
categories.push($(this).attr("id"));
|
|
});
|
|
var categoriesStr = categories.join(';');
|
|
// Get Tags
|
|
var tags = [];
|
|
$("#tags-" + pictureId + " option").each(function() {
|
|
var tagId = $(this).val().replace(/~~/g, '');
|
|
tags.push(tagId);
|
|
});
|
|
var tagsStr = tags.join(',');
|
|
$.ajax({
|
|
url: 'ws.php?format=json',
|
|
method: 'POST',
|
|
data: {
|
|
method: 'pwg.images.setInfo',
|
|
image_id: pictureId,
|
|
name: name,
|
|
author: author,
|
|
date_creation: date_creation,
|
|
comment: comment,
|
|
categories: categoriesStr,
|
|
tag_ids: tagsStr,
|
|
level: level,
|
|
single_value_mode: "replace",
|
|
multiple_value_mode: "replace",
|
|
pwg_token: jQuery("input[name=pwg_token]").val()
|
|
},
|
|
success: function(response) {
|
|
enableLocalButton(pictureId);
|
|
enableGlobalButton();
|
|
hideUnsavedLocalBadge(pictureId);
|
|
showSuccessLocalBadge(pictureId);
|
|
updateSuccessGlobalBadge();
|
|
// pluginSaveLoop(activePlugins); //call for plugin save
|
|
},
|
|
error: function(xhr, status, error) {
|
|
enableLocalButton(pictureId);
|
|
enableGlobalButton();
|
|
hideUnsavedLocalBadge(pictureId);
|
|
showErrorLocalBadge(pictureId);
|
|
updateSuccessGlobalBadge();
|
|
console.error('Error:', error);
|
|
}
|
|
});
|
|
} else {}
|
|
}
|
|
|
|
function saveAllChanges() {
|
|
$("fieldset").each(function() {
|
|
var pictureId = $(this).data("image_id");
|
|
saveChanges(pictureId);
|
|
});
|
|
}
|
|
//PLUGINS SAVE METHOD
|
|
var pluginFunctionMap = {};
|
|
|
|
function pluginFunctionMapInit(activePlugins) {
|
|
activePlugins.forEach(function(pluginId) {
|
|
var functionName = pluginId + '_batchManagerSave';
|
|
if (typeof window[functionName] === 'function') {
|
|
pluginFunctionMap[pluginId] = window[functionName];
|
|
} else {
|
|
console.log('Function not found during initialization: ' + functionName);
|
|
}
|
|
});
|
|
}
|
|
|
|
function pluginSaveLoop(activePlugins) {
|
|
if (activePlugins.length === 0) {
|
|
console.log("No plugins to process in pluginSaveLoop.");
|
|
return;
|
|
}
|
|
activePlugins.forEach(function(pluginId) {
|
|
var saveFunction = pluginFunctionMap[pluginId];
|
|
if (typeof saveFunction === 'function') {
|
|
saveFunction();
|
|
console.log('Executed function for plugin: ' + pluginId);
|
|
} else {
|
|
console.log('Function not found for plugin: ' + pluginId);
|
|
}
|
|
});
|
|
}
|
|
//UPDATE BLOCKS (Yet to be implemented)
|
|
function updateBlock(pictureId) {
|
|
$.ajax({
|
|
url: 'ws.php?format=json',
|
|
type: 'GET',
|
|
dataType: 'json',
|
|
data: {
|
|
method: 'pwg.images.getInfo',
|
|
image_id: pictureId,
|
|
format: 'json'
|
|
},
|
|
success: function(response) {
|
|
if (response.stat === 'ok') {
|
|
$("#picture-" + pictureId + " #name-" + pictureId).val(response.result.name);
|
|
$("#picture-" + pictureId + " #author-" + pictureId).val(response.result.author);
|
|
$("#picture-" + pictureId + " #date_creation-" + pictureId).val(response.result.date_creation);
|
|
$("#picture-" + pictureId + " #description-" + pictureId).val(response.result.comment);
|
|
$("#picture-" + pictureId + " #level-" + pictureId).val(response.result.level);
|
|
$("#picture-" + pictureId + " #filename-" + pictureId).text(response.result.file);
|
|
$("#picture-" + pictureId + " #filesize-" + pictureId).text(response.result.filesize);
|
|
$("#picture-" + pictureId + " #dimensions-" + pictureId).text(response.result.width + "x" + response.result.height);
|
|
// updateTags(response.result.tags, pictureId); //Yet to be implemented
|
|
showMetasyncSuccesBadge(pictureId);
|
|
enableLocalButton(pictureId);
|
|
enableGlobalButton();
|
|
} else {
|
|
console.error("Error:", response.message);
|
|
showErrorLocalBadge(pictureId);
|
|
enableLocalButton(pictureId);
|
|
enableGlobalButton();
|
|
}
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.error("Error:", status, error);
|
|
showErrorLocalBadge(pictureId);
|
|
enableLocalButton(pictureId);
|
|
}
|
|
});
|
|
}
|
|
//TAGS UPDATE Yet to be implemented
|
|
// function updateTags(tagsData, pictureId) {
|
|
// var $tagsUpdate = $('#tags-'+pictureId).selectize({
|
|
// create: true,
|
|
// persist: false
|
|
// });
|
|
// var selectizeTags = $tagsUpdate[0].selectize;
|
|
// var transformedData = tagsData.map(function(item) {
|
|
// return {
|
|
// value: item.id,
|
|
// text: item.name
|
|
// };
|
|
// })
|
|
// console.log(transformedData);
|
|
// selectizeTags.clearOptions();
|
|
// selectizeTags.addOption(transformedData);
|
|
// selectizeTags.refreshOptions(true);
|
|
// };
|
|
|
|
//UNRELEASED LEVEL SLIDER
|
|
// $(function () {
|
|
// $('.privacy-filter-slider').each(function() {
|
|
// var id = $(this).attr('id');
|
|
// $(this).slider({
|
|
// range: 'min',
|
|
// value: $(this).attr('value'),
|
|
// min: 0,
|
|
// max: 4,
|
|
// slide: function (event, ui) {
|
|
// updateCertificationFilterLabel(ui.value, id);
|
|
// }
|
|
// });
|
|
// });
|
|
// });
|
|
// function updateCertificationFilterLabel(value, id) {
|
|
// let label = strs_privacy[value];
|
|
// $('#' + id + ' .privacy').html(label);
|
|
// }
|