Skip to content

POC(Edit Content): Make custom fields work and emit value to Angular #27665

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
rjvelazco wants to merge 2 commits into from
Closed

POC(Edit Content): Make custom fields work and emit value to Angular #27665

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3a5c17d
fix(Edit Content): Make custom fields work and emit value to Angular
rjvelazco Feb 20, 2024
6ba731d
clean up
rjvelazco Feb 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 47 additions & 1 deletion dotCMS/src/main/webapp/html/legacy_custom_field/legacy-custom-field.jsp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<%@page import="com.liferay.portal.util.ReleaseInfo"%>
<%@page import="com.dotmarketing.cms.factories.PublicCompanyFactory"%>
<%@page import="com.liferay.portal.model.*" %>
<%@ page import="com.fasterxml.jackson.databind.ObjectMapper" %>


<%@page import="com.dotmarketing.util.Config"%>
Expand Down Expand Up @@ -105,14 +106,42 @@
dojo.require("dotcms.dijit.image.ImageEditor");
dojo.require("dotcms.dojo.data.UsersReadStore");
dojo.require("dotcms.dojo.data.UsersReadStore");
dojo.require("dijit.form.TextBox");
dojo.addOnLoad(function () {
dojo.global.DWRUtil = dwr.util;
dojo.global.DWREngine = dwr.engine;
dwr.engine.setErrorHandler(DWRErrorHandler);
dwr.engine.setWarningHandler(DWRErrorHandler);
// 2. Add event listener to the fields
fields.forEach(({ variable }) => {
const input = dojo.byId(variable);
// input.addEventListener('change', (event) => console.log(event)); // Handle the `dojo.byId(variable).setValue()` case
Copy link
Contributor

@jdotcms jdotcms Mar 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove commented code

// input.addEventListener('input', (event) => console.log(event)); // Handle the `dojo.byId(variable).setValue()` case
addCustomValueProperty(input, variable); // Handle the `dojo.byId(variable).value` case
});
});
function addCustomValueProperty(input, variable) {
// 3. Add custom value property to the input
const valueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value'); // Copy the original descriptor from the prototype
Object.defineProperty(input, 'value', {
get: function() {
return valueDescriptor.get.apply(this);
},
set: function(value) {
// 4. Trigger the original setter & Notify the change to Angular
console.log("Something triggered the setter", {
Copy link
Contributor

@jdotcms jdotcms Mar 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this ok?

variable,
value
});
valueDescriptor.set.apply(this, [value]);
}
});
}
function DWRErrorHandler(msg, e) {
console.log(msg, e);
}
Expand Down Expand Up @@ -205,6 +234,7 @@
<%
String contentTypeVarName = request.getParameter("variable");
String fieldName = request.getParameter("field");
ObjectMapper mapper = new ObjectMapper();
if (null != contentTypeVarName && null != fieldName) {
Expand All @@ -215,6 +245,8 @@
if (null != contentType) {
Field field = contentType.fieldMap().get(fieldName);
String fieldJson = mapper.writeValueAsString(contentType.fieldMap());
System.out.println(field);
if (null != field) {
Expand All @@ -238,6 +270,20 @@
}
%>
<body>
<script>
const fields = Object.values(<%= fieldJson %>);
const bodyElement = document.querySelector('body');
// 1. Create field in local enviroment (Iframe)
fields.forEach(({ variable, value }) => {
const input = document.createElement('input');
input.setAttribute('type', 'hidden');
input.setAttribute('name', variable);
input.setAttribute('id', variable);
input.setAttribute('dojoType', 'dijit.form.TextBox');
input.setAttribute('value', value);
bodyElement.appendChild(input);
});
</script>
<%= HTMLString %>
</body>
<%
Expand Down