From ffe3ec13bca0b78317b1aa7fe039deef3fd90a35 Mon Sep 17 00:00:00 2001
From: wildone <max.barrass@gmail.com>
Date: Tue, 8 Jun 2021 15:58:26 +1000
Subject: [PATCH] add content fragment paragraph counter styles to show author
 how their multi line text field will be divided when authoring in content
 fragment component.

---
 .../.content.xml                              |  8 +++++
 .../clientlibs-author-coralui-cfe/css.txt     |  2 ++
 .../css/cf-editor.css                         | 29 +++++++++++++++++++
 .../core/clientlibs-author-coralui-cfe/js.txt |  2 ++
 .../js/cf-editor.js                           | 15 ++++++++++
 5 files changed, 56 insertions(+)
 create mode 100644 aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/.content.xml
 create mode 100644 aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/css.txt
 create mode 100644 aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/css/cf-editor.css
 create mode 100644 aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/js.txt
 create mode 100644 aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/js/cf-editor.js

diff --git a/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/.content.xml b/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/.content.xml
new file mode 100644
index 000000000..de7c92760
--- /dev/null
+++ b/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/.content.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
+    jcr:description="used to load dialog helpers into content fragment editor."
+    jcr:primaryType="cq:ClientLibraryFolder"
+    allowProxy="{Boolean}true"
+    categories="[dam.cfm.authoring.v2]"
+    cssProcessor="[default:none,min:none]"
+    jsProcessor="[default:none,min:none]"/>
diff --git a/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/css.txt b/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/css.txt
new file mode 100644
index 000000000..780aa00af
--- /dev/null
+++ b/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/css.txt
@@ -0,0 +1,2 @@
+#base=css
+cf-editor.css
diff --git a/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/css/cf-editor.css b/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/css/cf-editor.css
new file mode 100644
index 000000000..c5a0372db
--- /dev/null
+++ b/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/css/cf-editor.css
@@ -0,0 +1,29 @@
+/*cf-editor.css - additional styles for content fragment editor*/
+
+/* start counter for every text area */
+.paragraphcounter {
+  counter-reset: cf-rte-par-counter;
+}
+
+/* increment counter every par block and add counter */
+.paragraphcounter > p:before {
+
+  	counter-increment: cf-rte-par-counter;
+	content: "#" counter(cf-rte-par-counter) "";
+	float: right;
+    color: black;
+    background-color: lightgray;
+    width: 40px;
+    text-align: center;
+    border-radius: 100%;
+    vertical-align: middle;
+    opacity: .5;
+
+}
+
+/* highlight every par block */
+.paragraphcounter > p {
+
+	border: 1px dashed rgba(0, 0, 0, .5);
+
+}
diff --git a/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/js.txt b/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/js.txt
new file mode 100644
index 000000000..1f76ece1d
--- /dev/null
+++ b/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/js.txt
@@ -0,0 +1,2 @@
+#base=js
+cf-editor.js
diff --git a/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/js/cf-editor.js b/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/js/cf-editor.js
new file mode 100644
index 000000000..314cd356d
--- /dev/null
+++ b/aemdesign-aem-common/src/main/content/jcr_root/apps/aemdesign/clientlibs/core/clientlibs-author-coralui-cfe/js/cf-editor.js
@@ -0,0 +1,15 @@
+//cf-editor.js - additional logic for content fragment editor
+
+(function ($) {
+    'use strict';
+
+  $("[data-element$='__asset']").each(function(){
+    var name = $(this).attr("data-element").split("__asset")[0];
+    if (name) {
+      console.log("loading paragraph counter to field [" + name + "].");
+      var selector = ".cfm-multieditor:has(input[data-element='" + name + "']) .cfm-multieditor-richtext-editor"
+      $(selector).addClass("paragraphcounter");
+    }
+  })
+
+}(jQuery));