LUT-25130 : Choose_the_text_layout_for_a_whole_wiki_page

Author: TimotheeHrl

webapp/WEB-INF/templates/skin/plugins/wiki/custom_input_editor.html

@@ -136,4 +136,39 @@
     </div>
 </div>
 
+<!------------ modal to align of the whole page ----------------->
+
+
+<div id="selectTextAlignmentModal" class="toastui-editor-popup" style="display: none;" >
+    <div style="position: absolute; top: 50%; left: 50%; z-index: -1;"></div>
+    <button class="btn btn-default" type="button" style="position: absolute; right: 0;" onclick="closeToastUiModal()">
+        <span class="fa fa-times"></span>
+    </button>
+    <div class="toastui-editor-popup-header">
+        <div class="toastui-editor-popup-header-title">Select Text Alignment</div>
+    </div>
+    <div class="toastui-editor-popup-body">
+        <div class="toastui-editor-popup-content-body">
+            <div class="btn-group" role="group" aria-label="...">
+                <button type="button" class="btn btn-default" onclick="selectTextAlignment('wiki-align-content-val-l')">
+                    <div>Left</div>
+                    <span class="fa fa-align-left"></span>
+                </button>
+                <button type="button" class="btn btn-default" onclick="selectTextAlignment('wiki-align-content-val-c')">
+                    <div>Center</div>
+                    <span class="fa fa-align-center"></span>
+                </button>
+                <button type="button" class="btn btn-default" onclick="selectTextAlignment('wiki-align-content-val-r')">
+                    <div>Right</div>
+                    <span class="fa fa-align-right"></span>
+                </button>
+                <button type="button" class="btn btn-default" onclick="selectTextAlignment('wiki-align-content-val-j')">
+                    <div>Justify</div>
+                    <span class="fa fa-align-justify"></span>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!------------------- END OF CUSTOM INPUTS -------------------------->

webapp/css/plugins/wiki/wiki.css

@@ -151,4 +151,17 @@ margin-left: 20%;
     overflow: auto;
     height: 100%;
 }
+/* class for align content  editor */
 
+.wiki-align-content-val-l {
+    text-align: left;
+}
+.wiki-align-content-val-r {
+    text-align: right;
+}
+.wiki-align-content-val-c {
+    text-align: center;
+}
+.wiki-align-content-val-j {
+    text-align: justify;
+}

webapp/js/plugins/wiki/wiki_pages/modify_page.js

@@ -116,6 +116,13 @@ editor.insertToolbarItem({ groupIndex: 0, itemIndex: 6 }, {
     className: 'ti ti-video editor',
     style: { backgroundImage: 'none' },
 });
+editor.insertToolbarItem({ groupIndex: 0, itemIndex: 7 }, {
+    name: 'textAlignment',
+    tooltip: 'Text Alignment',
+    text: 'TA',
+    className: 'fa fa-align-left editor',
+    style: { backgroundImage: 'none' },
+});
 editor.insertToolbarItem({ groupIndex: 0, itemIndex: 9 }, {
     name: 'Image',
     tooltip: 'Image',
@@ -138,6 +145,26 @@ function closeToastUiModal() {
 
 
 
+/* -------------- Text Alignment -------------- */
+const textAlignmentButton = document.getElementsByClassName("fa fa-align-left editor")[0];
+textAlignmentButton.addEventListener('click', function() {
+    document.getElementById("selectTextAlignmentModal").style.display = "block";
+});
+function selectTextAlignment(alignmentValue) {
+    let el = document.getElementsByClassName("toastui-editor-md-container")[0];
+    for(let i = 0; i < el.classList.length; i++){
+        if(el.classList[i].indexOf("wiki-align-content-val-") > -1){
+            el.classList.remove(el.classList[i]);
+        }
+    }
+    document.getElementsByClassName("toastui-editor-md-container")[0].classList.add(alignmentValue);
+
+    const contentToInsert = '<span class="' + alignmentValue + '"></span>';
+    editor.insertText("$$span\n"+contentToInsert+ "\n$$");
+    closeToastUiModal();
+}
+
+
 window.addEventListener("load", (event) => {
     if(document.getElementsByClassName('ProseMirror')[0].innerText.indexOf("wiki-align-content-val-") > -1){
         const alignmentValue = document.getElementsByClassName('ProseMirror')[0].innerText.split("wiki-align-content-val-")[1].substring(0,1);

webapp/js/plugins/wiki/wiki_pages/view_page.js

@@ -93,3 +93,9 @@ function copyToClipboard(text) {
     document.execCommand('copy');
     document.body.removeChild(dummy);
 }
+
+/* -------------- Text Alignment -------------- */
+if(document.getElementsByClassName('toastui-editor-contents')[0].innerHTML.indexOf("wiki-align-content-val-") > -1){
+    const alignmentValue = document.getElementsByClassName('toastui-editor-contents')[0].innerHTML.split("wiki-align-content-val-")[1].substring(0,1);
+    document.getElementsByClassName("toastui-editor-contents")[0].classList.add("wiki-align-content-val-"+alignmentValue);
+}