Moved JS to Mockup control panel patterns (ES6)

This commit is contained in:
MrTango 2022-01-12 13:39:21 +02:00 committed by Johannes Raggam
parent 8e369f886f
commit a79670d3a1
9 changed files with 370 additions and 1022 deletions

1
news/190.feature Normal file
View File

@ -0,0 +1 @@
Moved JS to Mockup control panel patterns (ES6) [MrTango]

View File

@ -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">
<div class="pat-discussion">
<div class="reply"
tal:condition="python:isAnon and not isAnonymousDiscussionAllowed">
<form tal:attributes="action view/login_action">
<button class="btn btn-primary mb-3"
type="submit"
value="Log in to add comments"
i18n:attributes="value label_login_to_add_comments;"
i18n:translate="label_login_to_add_comments">Log in to add comments</button>
</form>
</div>
<div class="reply" tal:condition="python:isAnon and not isAnonymousDiscussionAllowed">
<form tal:attributes="action view/login_action">
<button class="btn btn-primary mb-3"
type="submit"
value="Log in to add comments"
i18n:attributes="value label_login_to_add_comments;"
i18n:translate="label_login_to_add_comments"
>Log in to add comments</button>
</form>
</div>
<div class="discussion"
tal:condition="has_replies">
<tal:getreplies repeat="reply_dict replies">
<div class="discussion" tal:condition="has_replies">
<tal:getreplies repeat="reply_dict replies">
<div class="comment"
tal:define="reply reply_dict/comment;
<div class="comment"
tal:define="reply reply_dict/comment;
comment_id reply/getId;
depth reply_dict/depth|python:0;
depth python: depth > 10 and '10' or depth;
@ -40,185 +41,201 @@
canEdit python:view.can_edit(reply);
canDelete python:view.can_delete(reply);
colorclass python:lambda x: 'state-private' if x=='rejected' else ('state-internal' if x=='spam' else 'state-'+x);"
tal:attributes="class python:'comment level-{depth} {state}'.format(depth= depth, state=colorclass(review_state));
tal:attributes="class python:'comment level-{depth} {state}'.format(depth= depth, state=colorclass(review_state));
id comment_id"
tal:condition="python:canReview or review_state == 'published'">
tal:condition="python:canReview or review_state == 'published'">
<div class="d-flex flex-row align-items-center mb-3">
<div class="d-flex flex-row align-items-center mb-3">
<!-- commenter image -->
<div class="comment-image me-3" tal:condition="showCommenterImage">
<a href="" tal:condition="has_author_link" tal:attributes="href author_home_url">
<img src="defaultUser.png" alt="" tal:attributes="src portrait_url; alt reply/author_name" />
</a>
<img src="defaultUser.png" alt="" tal:condition="not: has_author_link" tal:attributes="src portrait_url; alt reply/author_name" />
</div>
<!-- commenter image -->
<div class="comment-image me-3"
tal:condition="showCommenterImage">
<a href=""
tal:condition="has_author_link"
tal:attributes="href author_home_url">
<img src="defaultUser.png"
alt=""
tal:attributes="src portrait_url; alt reply/author_name" />
</a>
<img src="defaultUser.png"
alt=""
tal:condition="not: has_author_link"
tal:attributes="src portrait_url; alt reply/author_name" />
</div>
<!-- commenter name and date -->
<div class="comment-author">
<!-- commenter name and date -->
<div class="comment-author">
<a href="" tal:condition="has_author_link" tal:attributes="href author_home_url">${reply/author_name}</a>
<a href=""
tal:condition="has_author_link"
tal:attributes="href author_home_url">${reply/author_name}</a>
<span tal:condition="not: has_author_link">${reply/author_name}</span>
<span tal:condition="not: has_author_link">${reply/author_name}</span>
<span tal:condition="not: reply/author_name" i18n:translate="label_anonymous">Anonymous</span>
<span tal:condition="not: reply/author_name"
i18n:translate="label_anonymous">Anonymous</span>
<br/>
<br />
<small class="text-muted" tal:content="python:view.format_time(reply.modification_date)">
<small class="text-muted"
tal:content="python:view.format_time(reply.modification_date)">
8/23/2001 12:40:44 PM
</small>
</small>
</div>
</div>
</div>
</div>
<!-- comment body -->
<div class="comment-body">
<!-- comment body -->
<div class="comment-body">
<span tal:replace="structure reply/getText" />
<span tal:replace="structure reply/getText" />
<!-- comment actions -->
<div class="d-flex flex-row justify-content-end mb-3">
<!-- comment actions -->
<div class="d-flex flex-row justify-content-end mb-3">
<div class="comment-actions actions-edit" tal:condition="python:isEditCommentAllowed and canEdit">
<div class="comment-actions actions-edit"
tal:condition="python:isEditCommentAllowed and canEdit">
<!-- edit -->
<a class="pat-plone-modal context comment-action action-edit btn btn-primary btn-sm"
tal:condition="auth_token"
tal:attributes="href string:${reply/absolute_url}/@@edit-comment?_authenticator=${auth_token}"
i18n:translate="Edit">Edit</a>
<!-- edit -->
<a class="pat-plone-modal context comment-action action-edit btn btn-primary btn-sm"
tal:condition="auth_token"
tal:attributes="href string:${reply/absolute_url}/@@edit-comment?_authenticator=${auth_token}"
i18n:translate="Edit">Edit</a>
<form name="edit"
action=""
method="get"
class="comment-action action-edit"
tal:condition="not: auth_token"
tal:attributes="action string:${reply/absolute_url}/@@edit-comment;
<form name="edit"
action=""
method="get"
class="comment-action action-edit"
tal:condition="not: auth_token"
tal:attributes="action string:${reply/absolute_url}/@@edit-comment;
id string:edit-${comment_id}">
<button name="form.button.EditComment"
class="context btn btn-primary btn-sm"
type="submit"
value="Edit"
i18n:attributes="value label_edit;"
i18n:translate="label_edit"
>Edit</button>
<button name="form.button.EditComment"
class="context btn btn-primary btn-sm"
type="submit"
value="Edit"
i18n:attributes="value label_edit;"
i18n:translate="label_edit">Edit</button>
</form>
</form>
</div>
</div>
<div class="comment-actions actions-delete" tal:condition="python:canDelete">
<div class="comment-actions actions-delete"
tal:condition="python:canDelete">
<!-- delete own comment -->
<form name="delete"
action=""
method="post"
class="comment-action action-delete"
tal:condition="python:not canDelete and isDeleteOwnCommentAllowed and view.could_delete_own(reply)"
tal:attributes="action string:${reply/absolute_url}/@@delete-own-comment;
<!-- delete own comment -->
<form name="delete"
action=""
method="post"
class="comment-action action-delete"
tal:condition="python:not canDelete and isDeleteOwnCommentAllowed and view.could_delete_own(reply)"
tal:attributes="action string:${reply/absolute_url}/@@delete-own-comment;
style python:view.can_delete_own(reply) and 'display: inline' or 'display: none';
id string:delete-${comment_id}">
<button name="form.button.DeleteComment"
<button name="form.button.DeleteComment"
class="destructive btn btn-danger btn-sm"
type="submit"
value="Delete"
i18n:attributes="value label_delete;"
i18n:translate="label_delete"
>Delete</button>
</form>
<!-- delete -->
<form name="delete"
action=""
method="post"
class="comment-action action-delete"
tal:condition="python:canDelete"
tal:attributes="action string:${reply/absolute_url}/@@moderate-delete-comment;
id string:delete-${comment_id}">
<button name="form.button.DeleteComment"
class="destructive btn btn-danger btn-sm"
type="submit"
value="Delete"
i18n:attributes="value label_delete;"
i18n:translate="label_delete"
>Delete</button>
</form>
</div>
i18n:translate="label_delete">Delete</button>
</form>
<div class="comment-actions actions-workflow d-flex flex-row" tal:condition="reply_dict/actions|nothing">
<form name=""
action=""
method="get"
class="comment-action action-${action/id}"
tal:condition="canReview"
tal:repeat="action reply_dict/actions|nothing"
tal:attributes="action string:${reply/absolute_url}/@@transmit-comment;
<!-- delete -->
<form name="delete"
action=""
method="post"
class="comment-action action-delete"
tal:condition="python:canDelete"
tal:attributes="action string:${reply/absolute_url}/@@moderate-delete-comment;
id string:delete-${comment_id}">
<button name="form.button.DeleteComment"
class="destructive btn btn-danger btn-sm"
type="submit"
value="Delete"
i18n:attributes="value label_delete;"
i18n:translate="label_delete">Delete</button>
</form>
</div>
<div class="comment-actions actions-workflow d-flex flex-row"
tal:condition="reply_dict/actions|nothing">
<form name=""
action=""
method="get"
class="comment-action action-${action/id}"
tal:condition="canReview"
tal:repeat="action reply_dict/actions|nothing"
tal:attributes="action string:${reply/absolute_url}/@@transmit-comment;
name action/id;
id string:${action/id}-${comment_id};
">
<input type="hidden" name="workflow_action" tal:attributes="value action/id" />
<button name="form.button.TransmitComment"
<input type="hidden"
name="workflow_action"
tal:attributes="value action/id" />
<button name="form.button.TransmitComment"
class="context btn btn-primary btn-sm"
type="submit"
i18n:translate=""
>${action/title}</button>
</form>
i18n:translate="">${action/title}</button>
</form>
</div>
</div>
<!-- end comment actions -->
</div>
<!-- end comment actions -->
</div>
<button class="context reply-to-comment-button hide allowMultiSubmit btn btn-primary btn-sm"
<button class="context reply-to-comment-button hide allowMultiSubmit btn btn-primary btn-sm"
tal:condition="python:isDiscussionAllowed and (isAnon and isAnonymousDiscussionAllowed or userHasReplyPermission)"
i18n:translate="label_reply">
Reply
</button>
</button>
</div>
</tal:getreplies>
<div tal:condition="python: has_replies and not isDiscussionAllowed"
class="discreet"
i18n:translate="label_commenting_disabled">
Commenting has been disabled.
</div>
</tal:getreplies>
<div tal:condition="python: has_replies and not isDiscussionAllowed"
class="discreet"
i18n:translate="label_commenting_disabled">
Commenting has been disabled.
</div>
</div>
<div class="reply"
tal:condition="python:has_replies and (isAnon and not isAnonymousDiscussionAllowed)">
<form tal:attributes="action view/login_action"
class="mb-3">
<button class="standalone loginbutton btn btn-primary"
type="submit"
value="Log in to add comments"
i18n:attributes="value label_login_to_add_comments;"
i18n:translate="label_login_to_add_comments">Log in to add comments</button>
</form>
</div>
<div class="reply" tal:condition="python:has_replies and (isAnon and not isAnonymousDiscussionAllowed)">
<form tal:attributes="action view/login_action" class="mb-3">
<button class="standalone loginbutton btn btn-primary"
type="submit"
value="Log in to add comments"
i18n:attributes="value label_login_to_add_comments;"
i18n:translate="label_login_to_add_comments"
>Log in to add comments</button>
</form>
</div>
<div id="commenting"
class="reply border p-3"
tal:condition="python:isDiscussionAllowed and (isAnon and isAnonymousDiscussionAllowed or userHasReplyPermission)">
<div id="commenting" class="reply border p-3" tal:condition="python:isDiscussionAllowed and (isAnon and isAnonymousDiscussionAllowed or userHasReplyPermission)">
<fieldset>
<fieldset>
<legend i18n:translate="label_add_comment">Add comment</legend>
<legend i18n:translate="label_add_comment">Add comment</legend>
<p tal:content="view/comment_transform_message">
<p tal:content="view/comment_transform_message">
You can add a comment by filling out the form below. Plain text
formatting.
</p>
</p>
<div tal:replace="structure view/form/render" />
<div tal:replace="structure view/form/render" />
</fieldset>
</fieldset>
</div>
</div>
</tal:block>

View File

@ -138,13 +138,6 @@
permission="zope2.View"
/>
<!-- Resource directory for javascripts -->
<plone:static
name="plone.app.discussion.javascripts"
type="plone"
directory="javascripts"
/>
<!-- Control panel -->
<browser:page
name="discussion-controlpanel"

View File

@ -18,10 +18,6 @@
<span tal:replace="structure view/contents" />
</div>
<script type="text/javascript"
tal:attributes="src string:${portal_url}/++plone++plone.app.discussion.javascripts/controlpanel.js">
</script>
</metal:main>
</body>

View File

@ -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");
});
});

View File

@ -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
});

View File

@ -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::
<div class="discussion">
<div class="comment" id="1282720906349675">
<h3 class="commentTitle"></h3>
<div class="documentByLine"></div>
<div class="commentBody"> </div>
<div class="commentActions">
<button class="reply-to-comment-button">Reply</button>
</div>
</div>
The comment form is rendered inside a "commenting" div::
<div id="commenting" class="reply">
<fieldset>
<legend i18n:translate="label_add_comment">Add comment</legend>
<p>
You can add a comment by filling out the form below. Plain text
formatting.
</p>
<form>
<div id="formfield-form-widgets-in_reply_to">
<input id="form-widgets-in_reply_to"
name="form.widgets.in_reply_to" value=
type="hidden"
/>
</div>
</form>
</fieldset>
</div>

View File

@ -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
});

View File

@ -1,18 +1,19 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
lang="en"
metal:use-macro="context/main_template/macros/master"
i18n:domain="plone">
<body>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en"
xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
lang="en"
metal:use-macro="context/main_template/macros/master"
i18n:domain="plone">
<body>
<metal:override fill-slot="top_slot"
tal:define="disable_column_one python:request.set('disable_plone.leftcolumn',1);
disable_column_two python:request.set('disable_plone.rightcolumn',1);"/>
<metal:override fill-slot="top_slot"
tal:define="disable_column_one python:request.set('disable_plone.leftcolumn',1);
disable_column_two python:request.set('disable_plone.rightcolumn',1);" />
<metal:main fill-slot="main">
<tal:main-macro metal:define-macro="main"
<metal:main fill-slot="main">
<tal:main-macro metal:define-macro="main"
tal:define="toLocalizedTime nocall:context/@@plone/toLocalizedTime;
items view/comments;
filter request/review_state|nothing;
@ -24,9 +25,6 @@
colorclass python:lambda x: 'state-private' if x=='rejected' else ('state-internal' if x=='spam' else 'state-'+x);
translationhelper nocall:context/@@translationhelper;
">
<script type="text/javascript"
tal:attributes="src string:${context/portal_url}/++plone++plone.app.discussion.javascripts/moderation.js">
</script>
<style>
#review-comments th label {
margin-right: 1em;
@ -36,194 +34,232 @@
<h1 i18n:translate="heading_moderate_comments">
Moderate comments
</h1>
<p class="lead" i18n:translate="message_moderation_disabled">
Moderation workflow is disabled. You have to
<div class="alert alert-info"
role="status"
tal:condition="python: not moderation_enabled">
<strong>Info</strong>
<div i18n:translate="message_moderation_disabled">Moderation workflow is disabled. You have to
<a i18n:name="enable_comment_workflow"
i18n:translate="message_enable_comment_workflow" href=""
tal:attributes="href string:${context/portal_url}/@@content-controlpanel?type_id=Discussion Item">
i18n:translate="message_enable_comment_workflow"
href=""
tal:attributes="href string:${context/portal_url}/@@content-controlpanel?type_id=Discussion Item">
enable the 'Comment Review Workflow' for the Comment content
type</a> before you can moderate comments here.
</p>
type</a> before you can moderate comments here.</div>
</div>
<form class="mb-3"
method="post"
action="#"
tal:condition="moderation_enabled"
tal:attributes="action string:${context/absolute_url}/@@bulk-actions"
tal:define="batch python:Batch(items, b_size, int(b_start), orphan=1);">
<fieldset id="fieldset-moderate-comments" class="formPanel">
<form class="mb-3"
method="post"
action="#"
tal:condition="moderation_enabled"
tal:attributes="action string:${context/absolute_url}/@@bulk-actions"
tal:define="batch python:Batch(items, b_size, int(b_start), orphan=1);">
<fieldset id="fieldset-moderate-comments"
class="formPanel">
<div metal:use-macro="here/batch_macros/macros/navigation" />
<div id="review-comments">
<div metal:use-macro="here/batch_macros/macros/navigation" />
<div id="review-comments">
<div class="row row-cols-lg-auto g-3 align-items-center mb-2 mt-2" id="bulkactions">
<tal:bulk condition="items">
<div class="col-auto">
<select class="form-select" name="form.select.BulkAction">
<option selected="selected" value="-1" i18n:translate="title_bulkactions">Bulk Actions</option>
<tal:comment tal:replace="nothing"></tal:comment>
<option value="publish"
i18n:translate="bulkactions_publish"
tal:condition="python: filter != 'published'">Approve</option>
<option value="mark_as_spam"
i18n:translate="bulkactions_spam"
tal:condition="python: filter != 'spam'">Spam</option>
<option value="delete" i18n:translate="bulkactions_delete">Delete</option>
</select>
<div class="row row-cols-lg-auto g-3 align-items-center mb-2 mt-2"
id="bulkactions">
<tal:bulk condition="items">
<div class="col-auto">
<select class="form-select"
name="form.select.BulkAction">
<option selected="selected"
value="-1"
i18n:translate="title_bulkactions">Bulk Actions</option>
<tal:comment tal:replace="nothing"></tal:comment>
<option value="publish"
i18n:translate="bulkactions_publish"
tal:condition="python: filter != 'published'">Approve</option>
<option value="mark_as_spam"
i18n:translate="bulkactions_spam"
tal:condition="python: filter != 'spam'">Spam</option>
<option value="delete"
i18n:translate="bulkactions_delete">Delete</option>
</select>
</div>
<div class="col-auto">
<input type="hidden"
name="filter"
tal:attributes="value filter" />
<button class="standalone allowMultiSubmit btn btn-primary"
id="dobulkaction"
type="submit"
value="Apply"
name="form.button.BulkAction"
i18n:attributes="value label_apply;"
i18n:translate="label_apply">Apply</button>
</div>
</tal:bulk>
<div class="flex-grow-1">
<div class="row row-cols-lg-auto g-3 align-items-center justify-content-end"
tal:condition="view/moderation_multiple_state_enabled">
<label i18n:translate="filter_by_state">Filter by state:</label>
<div>
<input class="form-check-input"
type="radio"
id="all"
name="review_state"
value="all"
tal:attributes="checked python:request.review_state=='all'" />
<label class="form-check-label"
for="all"
i18n:translate="">all</label>
</div>
<div class="col-auto">
<input type="hidden" name="filter" tal:attributes="value filter" />
<button class="standalone allowMultiSubmit btn btn-primary"
id="dobulkaction"
type="submit"
value="Apply"
name="form.button.BulkAction"
i18n:attributes="value label_apply;"
i18n:translate="label_apply">Apply</button>
</div>
</tal:bulk>
<div class="flex-grow-1">
<div class="row row-cols-lg-auto g-3 align-items-center justify-content-end" tal:condition="view/moderation_multiple_state_enabled">
<label i18n:translate="filter_by_state">Filter by state:</label>
<tal:states tal:repeat="review_state python:['pending', 'published', 'rejected', 'spam']">
<div>
<input class="form-check-input" type="radio" id="all" name="review_state" value="all"
tal:attributes="checked python:request.review_state=='all'" />
<label class="form-check-label" for="all" i18n:translate="">all</label>
</div>
<tal:states tal:repeat="review_state python:['pending', 'published', 'rejected', 'spam']">
<div>
<input class="form-check-input" type="radio" name="review_state"
tal:attributes="
<input class="form-check-input"
type="radio"
name="review_state"
tal:attributes="
value review_state;
id review_state;
checked python:request.review_state==review_state" />
<label class="form-check-label"
tal:attributes="for review_state"><span tal:content="python:translationhelper.translate_comment_review_state(review_state)">review_state</span></label>
</div>
</tal:states>
</div>
<label class="form-check-label"
tal:attributes="for review_state">
<span tal:content="python:translationhelper.translate_comment_review_state(review_state)">review_state</span>
</label>
</div>
</tal:states>
</div>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr tal:condition="items">
<th scope="col" class="nosort"><input name="check_all" type="checkbox" value="0" /></th>
<th scope="col" class="nosort" i18n:translate="heading_commenter">Commenter</th>
<th scope="col" class="nosort" i18n:translate="heading_date">Date</th>
<th scope="col" class="nosort" i18n:translate="heading_in_reponse_to">In Response To</th>
<th scope="col" class="nosort" i18n:translate="heading_comment">Comment</th>
<th scope="col" class="nosort" i18n:translate="heading_changedby">Last Action</th>
</tr>
</thead>
<tbody>
<tal:block repeat="item batch"
tal:condition="items">
<tr class="commentrow"
tal:define="even repeat/item/even;
</div>
<table class="table table-bordered table-striped">
<thead>
<tr tal:condition="items">
<th scope="col"
class="nosort">
<input name="check_all"
type="checkbox"
value="0" />
</th>
<th scope="col"
class="nosort"
i18n:translate="heading_commenter">Commenter</th>
<th scope="col"
class="nosort"
i18n:translate="heading_date">Date</th>
<th scope="col"
class="nosort"
i18n:translate="heading_in_reponse_to">In Response To</th>
<th scope="col"
class="nosort"
i18n:translate="heading_comment">Comment</th>
<th scope="col"
class="nosort"
i18n:translate="heading_changedby">Last Action</th>
</tr>
</thead>
<tbody>
<tal:block repeat="item batch"
tal:condition="items">
<tr class="commentrow"
tal:define="even repeat/item/even;
item_obj item/getObject;
email item_obj/author_email;
item_url item/getURL;"
tal:attributes="class python: even and 'odd' or 'even'">
<td class="notDraggable">
<input type="checkbox"
class="noborder"
name="paths:list" id="#"
value="#"
tal:attributes="value item/getPath;
tal:attributes="class python: even and 'odd' or 'even'">
<td class="notDraggable">
<input type="checkbox"
class="noborder"
name="paths:list"
id="#"
value="#"
tal:attributes="value item/getPath;
id string:cb_${item/id};
checked item/checked|nothing;
alt string:Select ${item/Title};
title string:Select ${item/Title}" />
<input type="hidden" name="selected_obj_paths:list" value="#"
tal:attributes="value item/getURL" />
</td>
<td>
<span tal:content="python:item.author_name or item.Creator">Name</span>
<tal:email tal:condition="email">
<br/>
<a tal:attributes="href string:mailto:$email;"
tal:content="email">Email
</a>
</tal:email>
</td>
<td style="white-space: nowrap;" tal:content="python:toLocalizedTime(item.created, long_format=1)"/>
<td>
<a tal:attributes="href item_url" target="_blank"
tal:content="item/in_response_to" />
</td>
<td tal:attributes="class python:colorclass(item.review_state)">
<div class="mb-2">
<span tal:replace="item/Description"/>
<a href=""
tal:attributes="href string:$item_url/getText"
tal:condition="python:item.Description.endswith('[...]')"
i18n:translate="label_show_full_comment_text"
class="show-full-comment-text">show full comment text</a>
</div>
<div class="actions input-group-addon">
<input
type="hidden"
name="selected_obj_paths:list"
value="#"
tal:attributes="value item/getURL"
/>
<!-- delete -->
<button id=""
class="destructive comment-delete-button btn btn-sm btn-danger"
type="submit"
value="Delete"
name="form.button.moderation.DeleteComment"
i18n:attributes="value label_delete;"
tal:attributes="id item/id"
i18n:translate="label_delete"
>Delete</button>
<!-- edit -->
<a class="pat-plone-modal context btn btn-sm btn-primary" href="#"
i18n:translate="label_edit"
tal:attributes="href python:item_url+'/@@edit-comment?review_state=' + item.review_state">Edit</a>
<input type="hidden"
name="selected_obj_paths:list"
value="#"
tal:attributes="value item/getURL" />
</td>
<td>
<span tal:content="python:item.author_name or item.Creator">Name</span>
<tal:email tal:condition="email">
<br />
<a tal:attributes="href string:mailto:$email;"
tal:content="email">Email
</a>
</tal:email>
</td>
<td style="white-space: nowrap;"
tal:content="python:toLocalizedTime(item.created, long_format=1)" />
<td>
<a tal:attributes="href item_url"
target="_blank"
tal:content="item/in_response_to" />
</td>
<td tal:attributes="class python:colorclass(item.review_state)">
<div class="mb-2">
<span tal:replace="item/Description" />
<a href=""
tal:attributes="href string:$item_url/getText"
tal:condition="python:item.Description.endswith('[...]')"
i18n:translate="label_show_full_comment_text"
class="show-full-comment-text">show full comment text</a>
</div>
<div class="actions input-group-addon">
<input type="hidden"
name="selected_obj_paths:list"
value="#"
tal:attributes="value item/getURL" />
<!-- delete -->
<button id=""
class="destructive comment-delete-button btn btn-sm btn-danger"
type="submit"
value="Delete"
name="form.button.moderation.DeleteComment"
i18n:attributes="value label_delete;"
tal:attributes="id item/id"
i18n:translate="label_delete">Delete</button>
<!-- edit -->
<a class="pat-plone-modal context btn btn-sm btn-primary"
href="#"
i18n:translate="label_edit"
tal:attributes="href python:item_url+'/@@edit-comment?review_state=' + item.review_state">Edit</a>
<!-- workflow actions -->
<tal:transitions
tal:define="
<!-- workflow actions -->
<tal:transitions tal:define="
transitions python:view.allowed_transitions(item_obj)">
<button name="form.button.moderation.TransmitComment"
tal:repeat="transition transitions"
class="context btn btn-sm btn-primary"
type="submit"
value="Label"
tal:content="python:translationhelper.translate(transition['title'])"
tal:attributes="id string:${item/id}_${transition/id};
<button name="form.button.moderation.TransmitComment"
tal:repeat="transition transitions"
class="context btn btn-sm btn-primary"
type="submit"
value="Label"
tal:content="python:translationhelper.translate(transition['title'])"
tal:attributes="id string:${item/id}_${transition/id};
data-transition transition/id;
value python:translationhelper.translate(transition['title']);
style python:transition['id']=='publish' and 'background-color: #5cb85c;; border-color: #4cae4c;;' or '';
"
>Label</button>
</tal:transitions>
</div>
</td>
<td>
<span class="last-history-entry"
tal:attributes="data-href string:$item_url/@@contenthistorypopup"
i18n:translate="">
">Label</button>
</tal:transitions>
</div>
</td>
<td>
<span class="last-history-entry"
tal:attributes="data-href string:$item_url/@@contenthistorypopup"
i18n:translate="">
last history entry
</span>
</td>
</tr>
</tal:block>
</tbody>
</span>
</td>
</tr>
</tal:block>
</tbody>
</table>
</div>
<div metal:use-macro="here/batch_macros/macros/navigation" />
</div>
<div metal:use-macro="here/batch_macros/macros/navigation" />
</fieldset>
</form>
</form>
</tal:main-macro>
</metal:main>
</tal:main-macro>
</metal:main>
</body>
</body>
</html>