Added file explorer to Trongate Pages module.

modules/trongate_pages/assets/api.json

@@ -1,4 +1,26 @@
 {
+  "Create Image Folder": {
+    "url_segments": "trongate_pages/submit_create_new_img_folder",
+    "request_type": "POST",
+    "description": "Create New Image Folder",
+    "enableParams": true,
+    "authorization":{  
+        "roles": [
+            "admin"
+        ]
+    }
+  },
+  "Rename Image Folder": {
+    "url_segments": "trongate_pages/submit_rename_img_folder",
+    "request_type": "POST",
+    "description": "Rename Existing Image Folder",
+    "enableParams": true,
+    "authorization":{  
+        "roles": [
+            "admin"
+        ]
+    }
+  },
   "Upload Image": {
     "url_segments": "trongate_pages/submit_image_upload/{id}",
     "request_type": "POST",
@@ -18,7 +40,7 @@
   },
   "Fetch Uploaded Images": {
     "url_segments": "trongate_pages/fetch_uploaded_images",
-    "request_type": "GET",
+    "request_type": "POST",
     "description": "Fetch Uploaded Images",
     "authorization":{
       "roles": [
@@ -43,6 +65,17 @@
         ]
     }
   },
+  "Delete Folder": {
+    "url_segments": "trongate_pages/submit_delete_folder",
+    "request_type": "DELETE",
+    "description": "Delete Folder From Server",
+    "enableParams": true,
+    "authorization":{  
+        "roles": [
+            "admin"
+        ]
+    }
+  },
   "Check YouTube Video ID": {
     "url_segments": "trongate_pages/check_youtube_video_id",
     "request_type": "POST",
@@ -120,17 +153,34 @@
         ]
     }
   },
-  "Create": {
-    "url_segments": "api/create/trongate_pages",
-    "request_type": "POST",
-    "description": "Insert database record",
-    "enableParams": true
-  },
   "Insert Batch": {
     "url_segments": "api/batch/trongate_pages",
     "request_type": "POST",
     "description": "Insert multiple records",
     "enableParams": true
+  },
+    "Remember Positions": {
+    "url_segments": "trongate_pages/remember_positions",
+    "request_type": "POST",
+    "description": "Remember positions of some child nodes",
+    "enableParams": true,
+    "authorization":{  
+        "roles": [
+            "admin"
+        ]
+    }
+  },
+  "Create": {
+    "url_segments": "api/create/trongate_pages",
+    "request_type": "POST",
+    "description": "Insert database record",
+    "enableParams": true,
+    "authorization":{  
+        "roles": [
+            "admin"
+        ]
+    },
+    "beforeHook": "_pre_create"
   },
   "Update": {
     "url_segments": "api/update/trongate_pages/{id}",
@@ -165,6 +215,12 @@
         "name": "id",
         "label": "ID"
       }
-    ]
+    ],
+    "authorization":{  
+        "roles": [
+            "admin"
+        ]
+    },
+    "beforeHook": "_make_sure_delete_allowed"
   }
 }

modules/trongate_pages/assets/css/trongate_pages_editor.css

@@ -60,15 +60,15 @@
 #trongate-pages-dock #tgp-save-page-btn,
 #tgp-mobi-options-grid #tgp-save-page-btn-mobi,
 .tgp-trongate-pages-success {
-    background-color: #3c8f38;
-    border: 1px #3c8f38 solid;
+    background-color: #3c8f38 !important;
+    border: 1px #3c8f38 solid !important;
 }
 
 #trongate-pages-dock #tgp-save-page-btn:hover,
 #tgp-mobi-options-grid #tgp-save-page-btn-mobi:hover,
 .tgp-trongate-pages-success:hover {
-    background-color: #4bb446;
-    border: 1px #4bb446 solid;
+    background-color: #4bb446 !important;
+    border: 1px #4bb446 solid !important;
 }
 
 #trongate-pages-dock #tgp-settings-btn,
@@ -273,6 +273,7 @@
 
 #page-el-options-grid>div img {
     position: relative;
+    max-height: 64px;
 }
 
 #page-el-options-grid>div>div:nth-child(2) {
@@ -370,6 +371,15 @@
     min-height: 450px;
 }
 
+#tgp-media-manager > div.modal-body > p > button > i {
+    font-size: 1.33em;
+}
+
+#tgp-media-manager > div.modal-body > p > button:nth-child(1) > i {
+    top: -2px;
+    position: relative;
+}
+
 .tgp-showcase-img-div {
     display: flex;
     flex-direction: column;
@@ -403,17 +413,30 @@
     padding-right: 1em;
 }
 
-.tgp-uploaded-images-grid>div {
+.tgp-uploaded-images-grid > div {
     border: 3px #ccc solid;
     height: 140px;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: space-around;
+    border-radius: 12px;
+}
+
+.tgp-uploaded-images-grid > div > div {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 12px;
+    width: 90%;
+    margin:  0 auto;
 }
 
-.tgp-preview-box {
-    position: relative;
+.tgp-uploaded-images-grid > div > div:nth-child(1) {
+    flex-grow: 1;
+}
+
+.tgp-uploaded-images-grid > div > div:nth-child(2) {
+    margin-bottom: 7px;
 }
 
 .tgp-preview-box.active {
@@ -486,9 +509,9 @@
     }
 }
 
-.tgp-uploaded-images-grid>div>img {
+.tgp-uploaded-images-grid>div img {
     max-width: 72%;
-    max-height: 72%;
+    max-height: 100px;
 }
 
 .tgp-uploaded-images-grid>div:hover {
@@ -530,6 +553,7 @@
     font-size: 1.2em;
 }
 
+#tgp-media-manager #tgp-create-new-folder-form,
 #tgp-media-manager #tg-conf-delete-img-form {
     margin-top: 12px;
     display: flex;
@@ -547,6 +571,7 @@
     font-weight: bold;
 }
 
+#tgp-media-manager #tgp-create-folder-now-btn,
 #tgp-media-manager #tg-delete-img-now-btn {
     margin-top: 0;
 }
@@ -841,6 +866,49 @@
     color: #38678f !important;
 }
 
+.tgp-preview-box-edit-mode {
+    border: 3px #0000ff solid !important;
+    background-color: #0000ff55 !important;
+}
+
+.tgp-preview-box-edit-mode .tgp-preview-element-name {
+    background-color: #f5f5fe !important;
+    padding-left: 7px;
+    padding-right: 7px;
+    text-align: left !important;
+    justify-content: center;
+    width: max-content;
+}
+
+.tgp-delete-dir-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 19px !important;
+    width:  33px !important;
+    height: 33px !important;
+    border-radius: 8px !important;
+    padding:  0 !important;
+    margin:  0 !important;
+    background-color: #cc0000 !important;
+    border: 1px #cc0000 solid !important;
+    position: absolute !important;
+}
+
+.tgp-delete-dir-btn:hover {
+    background-color: #ff0000 !important;
+    border: 1px #ff0000 solid !important;
+}
+
+.tgp-grey-label {
+    color: #333;
+    font-weight: bold;
+    font-family: "Lucida Console", monospace;
+    background-color: #eee;
+    border:  1px #ccc solid;
+    padding:  3px 10px;
+}
+
 @media (min-width: 1px) {
     #trongate-pages-dock>div:nth-child(2) {
         display: none;

modules/trongate_pages/assets/js/button_manager.js

@@ -202,7 +202,6 @@ function tgpAddPointersToBtnDivs() {
   parentElement.addEventListener('click', (event) => {
 
     if (event.target.closest('div.button-div')) {
-      console.log('clicked btn div');
       trongatePagesObj.activeEl = event.target.closest('div.button-div');
       tgpAddButtonEditor(trongatePagesObj.activeEl);
     }

modules/trongate_pages/assets/js/code_view.js

@@ -1,5 +1,4 @@
 function tgpOpenCodeViewModal() {
-
     tgpReset(['selectedRange', 'codeviews', 'customModals', 'toolbars', 'activeEl']);
     tgpRemoveContentEditables();
 
@@ -40,7 +39,8 @@ function tgpOpenCodeViewModal() {
     contentAsCode.style.opacity = 0;
 
     setTimeout(() => {
-        const pageContent = document.getElementsByClassName('page-content')[0];
+
+        let pageContent = document.getElementsByClassName('page-content')[0];
         let htmlContent = pageContent.innerHTML;
         htmlContent = htmlContent.replace(/ style=""/g, '');
         htmlContent = htmlContent.replace(/style=""/g, '');

modules/trongate_pages/assets/js/element_adder_manager.js

@@ -155,6 +155,48 @@ function tgpBuildCustomModal(modalId, options = {}) {
     return newModal;
 }
 
+function tgpHideModalBody(targetModalBody, addSpinner=false) {
+
+    const targetModalBodyChildren = targetModalBody.children;
+    for (var i = 0; i < targetModalBodyChildren.length; i++) {
+      targetModalBodyChildren[i].style.opacity = 0;
+    }
+
+    if(addSpinner === true) {
+        // Add a spinner.
+        const spinnerDiv = document.createElement('div');
+        spinnerDiv.setAttribute('class', 'spinner');
+
+        // Apply CSS to center the spinner
+        spinnerDiv.style.position = 'absolute';
+        spinnerDiv.style.top = '50%';
+        spinnerDiv.style.left = '50%';
+        spinnerDiv.style.transform = 'translate(-50%, -50%)';
+        targetModalBody.appendChild(spinnerDiv);
+    }
+
+}
+
+function tgpClearModalBody(targetModalBody, addSpinner=false) {
+    while(targetModalBody.firstChild) {
+        targetModalBody.removeChild(targetModalBody.lastChild);
+    }
+
+    if(addSpinner === true) {
+        // Add a spinner.
+        const spinnerDiv = document.createElement('div');
+        spinnerDiv.setAttribute('class', 'spinner');
+
+        // Apply CSS to center the spinner
+        spinnerDiv.style.position = 'absolute';
+        spinnerDiv.style.top = '50%';
+        spinnerDiv.style.left = '50%';
+        spinnerDiv.style.transform = 'translate(-50%, -50%)';
+        targetModalBody.appendChild(spinnerDiv);
+    }
+
+}
+
 function tgpRemoveCustomModals() {
   let targetModals = [];
   for (let i = tgpModals.length - 1; i >= 0; i--) {
@@ -219,7 +261,7 @@ function tgpInsertElement(newEl) {
     newEl = document.createElement('img');
     newEl.src = imgPath;
     newEl.addEventListener("click", (ev) => {
-      buildEditImgModal(ev.target);
+      tgpBuildEditImgModal(ev.target);
     });
   }