diff --git a/assets/javascripts/issue_dynamic_edit.js b/assets/javascripts/issue_dynamic_edit.js index 1fa6d16..18fd8ec 100644 --- a/assets/javascripts/issue_dynamic_edit.js +++ b/assets/javascripts/issue_dynamic_edit.js @@ -16,36 +16,36 @@ _CONF_LISTENER_TARGET = _CONF_LISTENER_TARGET === "all" ? "*" : _CONF_LISTENER_T * Source : https://www.iconfinder.com/iconsets/glyphs */ -var SVG_EDIT = ''; -var SVG_VALID = ''; -var SVG_CANCEL = ''; +const SVG_EDIT = ''; +const SVG_VALID = ''; +const SVG_CANCEL = ''; /* * Allow inclusion from other page * See https://github.com/Ilogeek/redmine_issue_dynamic_edit/commit/26684a2dd9b12dcc7377afd79e9fe5c142d26ebd for more info */ -var LOCATION_HREF = typeof custom_location_href !== 'undefined' ? custom_location_href : window.location.href; +let LOCATION_HREF = typeof custom_location_href !== 'undefined' ? custom_location_href : window.location.href; if (_CONF_FORCE_HTTPS) { LOCATION_HREF = LOCATION_HREF.replace(/^http:\/\//i, 'https://'); } -/* Check if admin want to display all editable fields when hovering the whole details block +/* Check if admin want to display all editable fields when hovering the whole details block * or if user has to hover every element to discover if (s)he can edit it */ if (_CONF_DISPLAY_EDIT_ICON === "block"){ - $('body.controller-issues.action-show .issue.details').addClass('showPencils'); + document.querySelectorAll('body.controller-issues.action-show .issue.details').forEach((elt) => elt.classList.add('showPencils')); } -let updateCSRFToken = function(token){ - document.querySelectorAll('input[name="authenticity_token"]').forEach(elt => elt.value = token); +const updateCSRFToken = function(token){ + document.querySelectorAll('input[name="authenticity_token"]').forEach((elt) => elt.value = token); document.querySelector('meta[name="csrf-token"]').setAttribute("content", token); } -let setCSRFTokenInput = function(token){ - document.querySelectorAll('form[method="post"]').forEach(elt => { +const setCSRFTokenInput = function(token){ + document.querySelectorAll('form[method="post"]').forEach((elt) => { if(!elt.querySelectorAll('input[name="authenticity_token"]').length){ - let input = document.createElement("input"); + const input = document.createElement("input"); input.setAttribute("type", "hidden"); input.setAttribute("name", "authenticity_token"); input.value = token; @@ -55,50 +55,63 @@ let setCSRFTokenInput = function(token){ } /* Generate edit block */ -var getEditFormHTML = function(attribute){ - var formElement = $('#issue_' + attribute + "_id"); - formElement = formElement.length ? formElement : $('#issue_' + attribute); - formElement = formElement.length ? formElement : $('#' + attribute); +const getEditFormHTML = function(attribute){ + let formElement = document.querySelector('#issue_' + attribute + "_id"); + formElement = formElement ? formElement : document.querySelector('#issue_' + attribute); + formElement = formElement ? formElement : document.querySelector('#' + attribute); // Checkbox specific case - var is_checkboxes = false; + let is_checkboxes = false; let is_file = false; let is_list = false; let CF_ID = false; - if(!formElement.length && attribute.startsWith("custom_field_values_")){ + if(!formElement && attribute.startsWith("custom_field_values_")){ CF_ID = attribute.split("custom_field_values_")[1]; /* Is it a checkbox block ? */ - formElement = $('#issue_custom_field_values_' + CF_ID); - if(formElement.length){ - formElement = formElement.parents('.check_box_group'); + formElement = document.querySelector('#issue_custom_field_values_' + CF_ID); + if(formElement){ + formElement = formElement.closest('.check_box_group'); is_checkboxes = CF_ID; } else { /* Is it a file block ? */ - formElement = $('#issue_custom_field_values_' + CF_ID + '_blank'); - if(formElement.length){ - formElement = formElement.parents('p'); - formElement.find('label').remove(); + formElement = document.querySelector('#issue_custom_field_values_' + CF_ID + '_blank'); + if(formElement){ + formElement = formElement.closest('p'); + formElement.removeChild(formElement.querySelector('label')); is_file = CF_ID; } else { /* Is it a checkbox/radio group ? */ - formElement = $('#issue-form .cf_' + CF_ID + '.check_box_group'); + formElement = document.querySelector('#issue-form .cf_' + CF_ID + '.check_box_group'); is_list = CF_ID; } } } - - if(formElement.length){ - var clone = formElement.clone(); - if(clone.is('select') && !clone.prop('multiple')) clone.on('change', function(e){sendData($(this).serializeArray());}); - if(is_checkboxes || is_file || is_list) { - clone.prop('id', "issue_custom_field_values_" + CF_ID + "_dynamic"); - } else { - clone.prop('id', formElement.prop('id') + "_dynamic"); + + if(formElement){ + const clone = formElement.cloneNode(true); + if(clone.matches('select') && !clone.hasAttribute('multiple')) { + clone.addEventListener('change', function(e){ + sendData([{"name" : clone.getAttribute('name'), "value" : clone.value}]); + }); } - var wrapper = $("
").addClass('dynamicEditField'); - wrapper.append(clone); - if(!clone.is('select') || clone.prop('multiple')) wrapper.append(""); - wrapper.append(""); + if(is_checkboxes || is_file || is_list) { + clone.setAttribute('id', "issue_custom_field_values_" + CF_ID + "_dynamic"); + } else { + clone.setAttribute('id', formElement.getAttribute('id') + "_dynamic"); + } + const wrapper = document.createElement('div'); + wrapper.classList.add('dynamicEditField'); + wrapper.insertBefore(clone, null); + if(!clone.matches('select') || clone.hasAttribute('multiple')) { + let btn_valid = document.createElement('button'); + btn_valid.classList.add('action', 'valid'); + btn_valid.innerHTML = SVG_VALID; + wrapper.insertBefore(btn_valid, null); + } + const btn_refuse = document.createElement('button'); + btn_refuse.classList.add('action', 'refuse'); + btn_refuse.innerHTML = SVG_CANCEL; + wrapper.insertBefore(btn_refuse, null); return wrapper; } @@ -106,17 +119,24 @@ var getEditFormHTML = function(attribute){ } /* Loop over all form attribute and clone them into details part */ -var cloneEditForm = function(){ - $('.issue.details div.subject').append(''); - $(".issue.details ").wrap("