From a79670d3a190e3bda5c85f0e38c7033600b65d70 Mon Sep 17 00:00:00 2001 From: MrTango Date: Wed, 12 Jan 2022 13:39:21 +0200 Subject: [PATCH 1/2] Moved JS to Mockup control panel patterns (ES6) --- news/190.feature | 1 + plone/app/discussion/browser/comments.pt | 297 +++++++------- plone/app/discussion/browser/configure.zcml | 7 - plone/app/discussion/browser/controlpanel.pt | 4 - .../browser/javascripts/comments.js | 283 ------------- .../browser/javascripts/controlpanel.js | 142 ------- .../browser/javascripts/javascripts.txt | 42 -- .../browser/javascripts/moderation.js | 228 ---------- plone/app/discussion/browser/moderation.pt | 388 ++++++++++-------- 9 files changed, 370 insertions(+), 1022 deletions(-) create mode 100644 news/190.feature delete mode 100644 plone/app/discussion/browser/javascripts/comments.js delete mode 100644 plone/app/discussion/browser/javascripts/controlpanel.js delete mode 100644 plone/app/discussion/browser/javascripts/javascripts.txt delete mode 100644 plone/app/discussion/browser/javascripts/moderation.js diff --git a/news/190.feature b/news/190.feature new file mode 100644 index 0000000..ba7ba0d --- /dev/null +++ b/news/190.feature @@ -0,0 +1 @@ +Moved JS to Mockup control panel patterns (ES6) [MrTango] \ No newline at end of file diff --git a/plone/app/discussion/browser/comments.pt b/plone/app/discussion/browser/comments.pt index 9293cf6..ab5c9e2 100644 --- a/plone/app/discussion/browser/comments.pt +++ b/plone/app/discussion/browser/comments.pt @@ -11,25 +11,26 @@ errors options/state/getErrors|nothing; wtool context/@@plone_tools/workflow; auth_token context/@@authenticator/token|nothing" - tal:condition="python:isDiscussionAllowed or has_replies" - i18n:domain="plone"> + tal:condition="python:isDiscussionAllowed or has_replies" + i18n:domain="plone"> +
+
+
+ +
+
-
-
- -
-
+
+ -
- - -
+ tal:condition="python:canReview or review_state == 'published'"> -
+
- -
- - - - -
+ +
+ + + + +
- -
+ +
- ${reply/author_name} + ${reply/author_name} - ${reply/author_name} + ${reply/author_name} - Anonymous + Anonymous -
+
- + 8/23/2001 12:40:44 PM - + -
-
+
+
- -
+ +
- + - -
+ +
-
+
- - Edit + + Edit -
- + -
+ -
+
-
+
- -
- -
- - -
- -
- -
+ i18n:translate="label_delete">Delete + -
- -
+ +
+ +
+ +
+ +
- - -
+ i18n:translate="">${action/title} + + +
+ +
- - - -
- + +
+ + + +
+ Commenting has been disabled.
- - -
- Commenting has been disabled.
-
+
+
+ +
+
-
-
- -
-
+
-
+
-
+ Add comment - Add comment - -

+

You can add a comment by filling out the form below. Plain text formatting. -

+

-
+
-
+
+
- diff --git a/plone/app/discussion/browser/configure.zcml b/plone/app/discussion/browser/configure.zcml index 15c015f..63f80a4 100644 --- a/plone/app/discussion/browser/configure.zcml +++ b/plone/app/discussion/browser/configure.zcml @@ -138,13 +138,6 @@ permission="zope2.View" /> - - -
- - diff --git a/plone/app/discussion/browser/javascripts/comments.js b/plone/app/discussion/browser/javascripts/comments.js deleted file mode 100644 index 89ce56a..0000000 --- a/plone/app/discussion/browser/javascripts/comments.js +++ /dev/null @@ -1,283 +0,0 @@ -/****************************************************************************** - * - * jQuery functions for the plone.app.discussion comment viewlet and form. - * - ******************************************************************************/ -/* global require */ - -if (require === undefined) { - require = function(reqs, torun) { - // jshint ignore:line - "use strict"; - return torun(window.jQuery); - }; -} - -require([ - // jshint ignore:line - "jquery" -], function($) { - "use strict"; - - // This unnamed function allows us to use $ inside of a block of code - // without permanently overwriting $. - // http://docs.jquery.com/Using_jQuery_with_Other_Libraries - /************************************************************************** - * Create a reply-to-comment form right beneath the form that is passed to - * the function. We do this by copying the regular comment form and - * adding a hidden in_reply_to field to the form. - **************************************************************************/ - $.createReplyForm = function(comment_div) { - var comment_id = comment_div.attr("id"); - - var reply_button = comment_div.find(".reply-to-comment-button"); - - /* Clone the reply div at the end of the page template that contains - * the regular comment form. - */ - var reply_div = $("#commenting").clone(true); - - /* Remove the ReCaptcha JS code before appending the form. If not - * removed, this causes problems - */ - reply_div - .find("#formfield-form-widgets-captcha") - .find("script") - .remove(); - - /* Insert the cloned comment form right after the reply button of the - * current comment. - */ - reply_div.appendTo(comment_div).css("display", "none"); - - /* Remove id='commenting' attribute, since we use it to uniquely define - the main reply form. */ - // Still belongs to class='reply' - reply_div.removeAttr("id"); - - /* Hide the reply button (only hide, because we may want to show it - * again if the user hits the cancel button). - */ - $(reply_button).css("display", "none"); - - /* Fetch the reply form inside the reply div */ - var reply_form = reply_div.find("form"); - - /* Change the id of the textarea of the reply form - * To avoid conflict later between textareas with same id 'form-widgets-comment-text' while implementing a seperate instance of TinyMCE - * */ - reply_form - .find("#formfield-form-widgets-comment-text") - .attr("id", "formfield-form-widgets-new-textarea" + comment_id); - reply_form - .find("#form-widgets-comment-text") - .attr("id", "form-widgets-new-textarea" + comment_id); - - /* Populate the hidden 'in_reply_to' field with the correct comment - id */ - reply_form.find('input[name="form.widgets.in_reply_to"]').val(comment_id); - - /* Add a remove-reply-to-comment Javascript function to remove the - form */ - var cancel_reply_button = reply_div.find(".cancelreplytocomment"); - cancel_reply_button.attr("id", comment_id); - - /* Show the cancel buttons. */ - reply_form - .find('input[name="form.buttons.cancel"]') - .css("display", "inline"); - - /* Show the reply layer with a slide down effect */ - reply_div.slideDown("slow"); - - /* Show the cancel button in the reply-to-comment form */ - cancel_reply_button.css("display", "inline"); - }; - - /************************************************************************** - * Remove all error messages and field values from the form that is passed - * to the function. - **************************************************************************/ - $.clearForm = function(form_div) { - form_div.find(".error").removeClass("error"); - form_div.find(".fieldErrorBox").remove(); - form_div.find('input[type="text"]').attr("value", ""); - form_div.find("textarea").attr("value", ""); - /* XXX: Clean all additional form extender fields. */ - }; - - function init_comment_eventhandler () { - /********************************************************************** - * Transmit a single comment. - **********************************************************************/ - $('input[name="form.button.TransmitComment"]').on("click", function(e) { - e.preventDefault(); - var trigger = this; - var form = $(this).parents("form"); - var data = $(form).serialize(); - var form_url = $(form).attr("action"); - var comment_id = $(this).parents(".comment").attr("id"); - $.ajax({ - type: "GET", - url: form_url, - data: data, - context: trigger, - success: function(msg) { - let url = location.href; - $(this).parents(".comment").load( - // loading child nodes is not enough, - // class attributes are needed for visualization of workflow_state - url + " #" + comment_id + ".comment", - function() { - $(this).find(".comment").unwrap(); - init_comment_eventhandler(); - $(".pat-plone-modal").patPloneModal(); - } - ); - }, - error: function(msg) { - return true; - } - }); - return false; - }); - - /********************************************************************** - * Edit a comment - **********************************************************************/ - if ($.fn.prepOverlay) { - $('form[name="edit"]').prepOverlay({ - cssclass: "overlay-edit-comment", - width: "60%", - subtype: "ajax", - filter: "#content>*" - }); - } - - /********************************************************************** - * Delete a comment and its answers. - **********************************************************************/ - $('input[name="form.button.DeleteComment"]').on("click", function(e) { - e.preventDefault(); - var trigger = this; - var form = $(this).parents("form"); - var data = $(form).serialize(); - var form_url = $(form).attr("action"); - $.ajax({ - type: "POST", - url: form_url, - data: data, - context: $(trigger).parents(".comment"), - success: function(data) { - // jshint ignore:line - var comment = $(this); - var clss = comment.attr("class"); - // remove replies - var treelevel = parseInt( - clss[clss.indexOf("replyTreeLevel") + "replyTreeLevel".length], - 10 - ); - // selector for all the following elements of lower level - var selector = ".replyTreeLevel" + treelevel; - for (var i = 0; i < treelevel; i++) { - selector += ", .replyTreeLevel" + i; - } - comment.nextUntil(selector).each(function() { - $(this).fadeOut("fast", function() { - $(this).remove(); - }); - }); - // Add delete button to the parent - var parent = comment.prev( - '[class*="replyTreeLevel' + (treelevel - 1) + '"]' - ); - parent.find('form[name="delete"]').css("display", "inline"); - // remove comment - $(this).fadeOut("fast", function() { - $(this).remove(); - }); - }, - error: function(req, error) { - // jshint ignore:line - return true; - } - }); - return false; - }); - }; - - $(document).ready(function() { - init_comment_eventhandler(); - - /********************************************************************** - * If the user has hit the reply button of a reply-to-comment form - * (form was submitted with a value for the 'in_reply_to' field in the - * request), create a reply-to-comment form right under this comment. - **********************************************************************/ - var post_comment_div = $("#commenting"); - var in_reply_to_field = post_comment_div.find( - 'input[name="form.widgets.in_reply_to"]' - ); - if (in_reply_to_field.length !== 0 && in_reply_to_field.val() !== "") { - var current_reply_id = "#" + in_reply_to_field.val(); - var current_reply_to_div = $(".discussion").find(current_reply_id); - $.createReplyForm(current_reply_to_div); - $.clearForm(post_comment_div); - } - - /********************************************************************** - * If the user hits the 'reply' button of an existing comment, create a - * reply form right beneath this comment. - **********************************************************************/ - $(".reply-to-comment-button").bind("click", function(e) { - // jshint ignore:line - var comment_div = $(this) - .parents() - .filter(".comment"); - $.createReplyForm(comment_div); - $.clearForm(comment_div); - }); - - /********************************************************************** - * If the user hits the 'clear' button of an open reply-to-comment form, - * remove the form and show the 'reply' button again. - **********************************************************************/ - $("#commenting #form-buttons-cancel").bind("click", function(e) { - e.preventDefault(); - var reply_to_comment_button = $(this) - .parents() - .filter(".comment") - .find(".reply-to-comment-button"); - - /* Find the reply-to-comment form and hide and remove it again. */ - $.reply_to_comment_form = $(this) - .parents() - .filter(".reply"); - $.reply_to_comment_form.slideUp("slow", function() { - $(this).remove(); - }); - - /* Show the reply-to-comment button again. */ - reply_to_comment_button.css("display", "inline"); - }); - - /********************************************************************** - * By default, hide the reply and the cancel button for the regular add - * comment form. - **********************************************************************/ - $(".reply") - .find('input[name="form.buttons.reply"]') - .css("display", "none"); - $(".reply") - .find('input[name="form.buttons.cancel"]') - .css("display", "none"); - - /********************************************************************** - * By default, show the reply button only when Javascript is enabled. - * Otherwise hide it, since the reply functions only work with JS - * enabled. - **********************************************************************/ - $(".reply-to-comment-button").removeClass("hide"); - }); - -}); diff --git a/plone/app/discussion/browser/javascripts/controlpanel.js b/plone/app/discussion/browser/javascripts/controlpanel.js deleted file mode 100644 index bfb5ba6..0000000 --- a/plone/app/discussion/browser/javascripts/controlpanel.js +++ /dev/null @@ -1,142 +0,0 @@ -/****************************************************************************** - * - * jQuery functions for the plone.app.discussion comment viewlet and form. - * - ******************************************************************************/ -/* global require */ - -if(require === undefined){ - require = function(reqs, torun){ // jshint ignore:line - 'use strict'; - return torun(window.jQuery); - }; -} - -require([ // jshint ignore:line - 'jquery' -], function ($) { - 'use strict'; - // This unnamed function allows us to use $ inside of a block of code - // without permanently overwriting $. - // http://docs.jquery.com/Using_jQuery_with_Other_Libraries - - /* Disable a control panel setting */ - $.disableSettings = function (settings) { - $.each(settings, function (intIndex, setting) { - setting.addClass('unclickable'); - var setting_field = $(setting).find('input,select'); - setting_field.attr('disabled', 'disabled'); - }); - }; - - /* Enable a control panel setting */ - $.enableSettings = function (settings) { - $.each(settings, function (intIndex, setting) { - setting.removeClass('unclickable'); - var setting_field = $(setting).find('input,select'); - setting_field.removeAttr('disabled'); - }); - }; - - /* Update settings */ - $.updateSettings = function () { - - var globally_enabled = $('#content-core').hasClass('globally_enabled'); - var moderation_custom = $('#content-core').hasClass('moderation_custom'); - var invalid_mail_setup = $('#content-core').hasClass('invalid_mail_setup'); - - /* If commenting is globally disabled, disable all settings. */ - if (globally_enabled === true) { - $.enableSettings([ - $('#formfield-form-widgets-anonymous_comments'), - $('#formfield-form-widgets-anonymous_email_enabled'), - $('#formfield-form-widgets-moderation_enabled'), - $('#formfield-form-widgets-edit_comment_enabled'), - $('#formfield-form-widgets-delete_own_comment_enabled'), - $('#formfield-form-widgets-text_transform'), - $('#formfield-form-widgets-captcha'), - $('#formfield-form-widgets-show_commenter_image'), - $('#formfield-form-widgets-moderator_notification_enabled'), - $('#formfield-form-widgets-moderator_email'), - $('#formfield-form-widgets-user_notification_enabled') - ]); - } - else { - $.disableSettings([ - $('#formfield-form-widgets-anonymous_comments'), - $('#formfield-form-widgets-anonymous_email_enabled'), - $('#formfield-form-widgets-moderation_enabled'), - $('#formfield-form-widgets-edit_comment_enabled'), - $('#formfield-form-widgets-delete_own_comment_enabled'), - $('#formfield-form-widgets-text_transform'), - $('#formfield-form-widgets-captcha'), - $('#formfield-form-widgets-show_commenter_image'), - $('#formfield-form-widgets-moderator_notification_enabled'), - $('#formfield-form-widgets-moderator_email'), - $('#formfield-form-widgets-user_notification_enabled') - ]); - } - - /* If the mail setup is invalid, disable the mail settings. */ - if (invalid_mail_setup === true) { - $.disableSettings([ - $('#formfield-form-widgets-moderator_notification_enabled'), - $('#formfield-form-widgets-moderator_email'), - $('#formfield-form-widgets-user_notification_enabled') - ]); - } - else { - /* Enable mail setup only if discussion is enabled. */ - if (globally_enabled === true) { - $.enableSettings([ - $('#formfield-form-widgets-moderator_notification_enabled'), - $('#formfield-form-widgets-moderator_email'), - $('#formfield-form-widgets-user_notification_enabled') - ]); - } - } - - /* If a custom workflow for comments is enabled, disable the moderation - switch. */ - if (moderation_custom === true) { - $.disableSettings([ - $('#formfield-form-widgets-moderation_enabled') - ]); - } - }; - //#JSCOVERAGE_IF 0 - - /************************************************************************** - * Window Load Function: Executes when complete page is fully loaded, - * including all frames, - **************************************************************************/ - $(document).ready(function () { - - // Update settings on page load - $.updateSettings(); - - // Set #content-core class and update settings afterwards - $('#form-widgets-globally_enabled-0').on('change', function(){ - if (this.checked) { - $('#content-core').addClass('globally_enabled'); - } - else { - $('#content-core').removeClass('globally_enabled'); - } - $.updateSettings(); - }); - - /********************************************************************** - * Remove the disabled attribute from all form elements before - * submitting the form. Otherwise the z3c.form will raise errors on - * the required attributes. - **********************************************************************/ - $('form#DiscussionSettingsEditForm').bind('submit', function () { - $(this).find('input,select').removeAttr('disabled'); - }); - - }); - - //#JSCOVERAGE_ENDIF - -}); diff --git a/plone/app/discussion/browser/javascripts/javascripts.txt b/plone/app/discussion/browser/javascripts/javascripts.txt deleted file mode 100644 index 99f3056..0000000 --- a/plone/app/discussion/browser/javascripts/javascripts.txt +++ /dev/null @@ -1,42 +0,0 @@ -=============================== -plone.app.discussion Javascript -=============================== - -This document contains a description of how the plone.app.discussion javascript -code works. - -HTML Structure --------------- - -The "discussion" div contains all comments that have been posted to a specific -content object. Each comment div has a unique id:: - -
-
-

-
-
-
- -
-
- -The comment form is rendered inside a "commenting" div:: - -
-
- Add comment -

- You can add a comment by filling out the form below. Plain text - formatting. -

-
-
- -
-
-
-
diff --git a/plone/app/discussion/browser/javascripts/moderation.js b/plone/app/discussion/browser/javascripts/moderation.js deleted file mode 100644 index cc6a547..0000000 --- a/plone/app/discussion/browser/javascripts/moderation.js +++ /dev/null @@ -1,228 +0,0 @@ -/****************************************************************************** - * - * jQuery functions for the plone.app.discussion moderation. - * - ******************************************************************************/ - -if (require === undefined) { - require = function(reqs, torun) { - "use strict"; - return torun(window.jQuery); - }; -} - -require(["jquery", "pat-registry"], function($, registry) { - "use strict"; - - $(document).ready(function() { - init_moderation_eventhandler(); - }); - - function init_moderation_eventhandler() { - /********************************************************************** - * Delete a single comment. - **********************************************************************/ - $("button[name='form.button.moderation.DeleteComment']").click(function(e) { - e.preventDefault(); - var row = $(this).closest("tr"); - var path = row.find("[name='selected_obj_paths:list']").attr("value"); - var auth_key = $('input[name="_authenticator"]').val(); - var target = - path + "/@@moderate-delete-comment?_authenticator=" + auth_key; - $.ajax({ - type: "GET", - url: target, - success: function(msg) { - // fade out row - row.fadeOut(250).fadeIn(250, function() { - row.remove(); - }); - // reload page if all comments have been removed - var comments = $("table#review-comments > tbody > tr"); - if (comments.length === 1) { - location.reload(); - } - }, - error: function(msg) { - alert("Error sending AJAX request:" + target); - } - }); - }); - - /********************************************************************** - * Transmit a single comment. - **********************************************************************/ - $('button[name="form.button.moderation.TransmitComment"]').click(function( - e - ) { - e.preventDefault(); - let button = $(this); - var row = $(this).closest("tr"); - var path = $(row) - .find("[name='selected_obj_paths:list']") - .attr("value"); - var workflow_action = $(this).attr("data-transition"); - var auth_key = $('input[name="_authenticator"]').val(); - // distinction of workflow_action - var target = - path + - "/@@transmit-comment?_authenticator=" + - auth_key + - "&workflow_action=" + - workflow_action; - var moderate = - $(this) - .closest("fieldset") - .attr("id") == "fieldset-moderate-comments"; - $.ajax({ - type: "GET", - url: target, - success: function(msg) { - if (moderate) { - let url = location.href; - $("#review-comments").load( - url + " #review-comments > *", - function() { - init_moderation_eventhandler(); - $(".pat-plone-modal").patPloneModal(); - } - ); - } else { - location.reload(); - } - }, - error: function(msg) { - alert( - "Error transmitting comment. (Error sending AJAX request:" + - target + - ")" - ); - } - }); - }); - - /********************************************************************** - * Bulk actions for comments (delete, publish) - **********************************************************************/ - $("button[name='form.button.BulkAction']").click(function(e) { - e.preventDefault(); - var form = $(this).closest("form"); - var target = $(form).attr("action"); - var params = $(form).serialize(); - var valArray = $("input:checkbox:checked"); - var selectField = $(form).find("[name='form.select.BulkAction']"); - - if (selectField.val() === "-1") { - // TODO: translate message - alert("You haven't selected a bulk action. Please select one."); - } else if (valArray.length === 0) { - // TODO: translate message - alert( - "You haven't selected any comment for this bulk action." + - "Please select at least one comment." - ); - } else { - $.post(target, params, function(data) { - // reset the bulkaction select - selectField.find("option[value='-1']").attr("selected", "selected"); - // reload filtered comments - $("#review-comments").load( - window.location + " #review-comments", - function() { - init_moderation_eventhandler(); - $(".pat-plone-modal").patPloneModal(); - } - ); - }); - } - }); - - /********************************************************************** - * Check or uncheck all checkboxes from the batch moderation page. - **********************************************************************/ - $("input[name='check_all']").click(function() { - if ($(this).val() === "0") { - $(this) - .parents("table") - .find("input:checkbox") - .prop("checked", true); - $(this).val("1"); - } else { - $(this) - .parents("table") - .find("input:checkbox") - .prop("checked", false); - $(this).val("0"); - } - }); - - /********************************************************************** - * select comments with review_state - **********************************************************************/ - - $("input[name='review_state']").click(function() { - let review_state = $(this).val(); - let url = location.href; - if (location.search) { - url = location.href.replace( - location.search, - "?review_state=" + review_state - ); - } else { - url = location.href + "?review_state=" + review_state; - } - - $("#fieldset-moderate-comments") - .parent() - .load(url + " #content form > *", function() { - init_moderation_eventhandler(); - $(".pat-plone-modal").patPloneModal(); - let stateObj = { review_state: review_state }; - history.pushState(stateObj, "moderate comments", url); - }); - }); - - /********************************************************************** - * Show full text of a comment in the batch moderation page. - **********************************************************************/ - $(".show-full-comment-text").click(function(e) { - e.preventDefault(); - var target = $(this).attr("href"); - var parent = $(this).parent(); - $.ajax({ - type: "GET", - url: target, - data: "", - success: function(data) { - // show full text - parent.html(data); - }, - error: function(msg) { - alert("Error getting full comment text:" + target); - } - }); - }); - - /********************************************************************** - * Comments published: Load history for publishing date. - **********************************************************************/ - $(".last-history-entry").each(function() { - var lasthistoryentry = $(this); - $.ajax({ - url: lasthistoryentry.attr("data-href"), - success: function(data) { - lasthistoryentry.html( - $(data) - .find(".historyByLine") - .first() - ); - // format date - registry.scan(lasthistoryentry); - }, - error: function(msg) { - console.error("Error getting history."); - } - }); - }); - } // end init_moderation_eventhandler -}); diff --git a/plone/app/discussion/browser/moderation.pt b/plone/app/discussion/browser/moderation.pt index 6ace420..b3a9478 100644 --- a/plone/app/discussion/browser/moderation.pt +++ b/plone/app/discussion/browser/moderation.pt @@ -1,18 +1,19 @@ - - + + - + - - + -