feat: New counter setting Textarea

tosuapp · Oct 11, 2024 · 25344d1 · 25344d1
1 parent a66e98e
commit 25344d1
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 8 deletions.
diff --git a/packages/server/assets/homepage.js b/packages/server/assets/homepage.js
@@ -696,6 +696,7 @@ const optionHTML = `
     </div>
     <select class="{class}" id="{ID}___type">
       <option {text_SELECTED} value="text">Text</option>
+      <option {textarea_SELECTED} value="textarea">Text area</option>
       <option {number_SELECTED} value="number">Number</option>
       <option {color_SELECTED} value="color">Color</option>
       <option {checkbox_SELECTED} value="checkbox">Toggle</option>
@@ -768,9 +769,11 @@ async function startBuilderModal(element) {
     .replace("{ADDON}", `onchange="sanitize(this);"`)
     .replace(/{text_SELECTED}/gm, '')
     .replace(/{number_SELECTED}/gm, '')
-    .replace(/{password_SELECTED}/gm, '')
+    .replace(/{color_SELECTED}/gm, '')
     .replace(/{checkbox_SELECTED}/gm, '')
-    .replace(/{options_SELECTED}/gm, '');
+    .replace(/{options_SELECTED}/gm, '')
+    .replace(/{password_SELECTED}/gm, '')
+    .replace(/{textarea_SELECTED}/gm, '');
 
   if (json.error == null) {
     for (let i = 0; i < json.length; i++) {
@@ -794,9 +797,10 @@ async function startBuilderModal(element) {
         .replace(/{text_SELECTED}/gm, option.type == 'text' ? `selected="selected"` : '')
         .replace(/{number_SELECTED}/gm, option.type == 'number' ? `selected="selected"` : '')
         .replace(/{color_SELECTED}/gm, option.type == 'color' ? `selected="selected"` : '')
-        .replace(/{password_SELECTED}/gm, option.type == 'password' ? `selected="selected"` : '')
         .replace(/{checkbox_SELECTED}/gm, option.type == 'checkbox' ? `selected="selected"` : '')
-        .replace(/{options_SELECTED}/gm, option.type == 'options' ? `selected="selected"` : '');
+        .replace(/{options_SELECTED}/gm, option.type == 'options' ? `selected="selected"` : '')
+        .replace(/{password_SELECTED}/gm, option.type == 'password' ? `selected="selected"` : '')
+        .replace(/{textarea_SELECTED}/gm, option.type == 'textarea' ? `selected="selected"` : '');
 
       // if (i != json.length - 1)
       //   html += '\n<hr class="modal-space">\n'
@@ -865,7 +869,7 @@ async function builderNewOption(element) {
       return;
     };
 
-    if (payload.value == '' && payload.setting.type != 'password') {
+    if (payload.value == '' && (payload.setting.type != 'password' && payload.setting.type != 'textarea')) {
       displayNotification({
         element: element,
         text: `Specify default value`,
@@ -923,6 +927,7 @@ async function builderNewOption(element) {
       .replace(/{password_SELECTED}/gm, payload.setting.type == 'password' ? `selected="selected"` : '')
       .replace(/{checkbox_SELECTED}/gm, payload.setting.type == 'checkbox' ? `selected="selected"` : '')
       .replace(/{options_SELECTED}/gm, payload.setting.type == 'options' ? `selected="selected"` : '')
+      .replace(/{textarea_SELECTED}/gm, payload.setting.type == 'textarea' ? `selected="selected"` : '')
 
     displayNotification({
       element: element,

diff --git a/packages/server/assets/homepage.min.css b/packages/server/assets/homepage.min.css
diff --git a/packages/server/utils/counters.ts b/packages/server/utils/counters.ts
@@ -122,6 +122,7 @@ export function createSetting(setting: ISettings, value: any) {
     switch (setting.type) {
         case 'text': {
             return settingsItemHTML
+                .replace('{CLASSES}', '')
                 .replace('{NAME}', title)
                 .replace('{DESCRIPTION}', description)
                 .replace(
@@ -136,6 +137,7 @@ export function createSetting(setting: ISettings, value: any) {
 
         case 'number': {
             return settingsItemHTML
+                .replace('{CLASSES}', '')
                 .replace('{NAME}', title)
                 .replace('{DESCRIPTION}', description)
                 .replace(
@@ -150,6 +152,7 @@ export function createSetting(setting: ISettings, value: any) {
 
         case 'password': {
             return settingsItemHTML
+                .replace('{CLASSES}', '')
                 .replace('{NAME}', title)
                 .replace('{DESCRIPTION}', description)
                 .replace(
@@ -164,6 +167,7 @@ export function createSetting(setting: ISettings, value: any) {
 
         case 'checkbox': {
             return settingsItemHTML
+                .replace('{CLASSES}', '')
                 .replace('{NAME}', title)
                 .replace('{DESCRIPTION}', description)
                 .replace(
@@ -183,6 +187,7 @@ export function createSetting(setting: ISettings, value: any) {
 
         case 'color': {
             return settingsItemHTML
+                .replace('{CLASSES}', '')
                 .replace('{NAME}', title)
                 .replace('{DESCRIPTION}', description)
                 .replace(
@@ -206,6 +211,7 @@ export function createSetting(setting: ISettings, value: any) {
                       .join('\n')
                 : '';
             return settingsItemHTML
+                .replace('{CLASSES}', '')
                 .replace('{NAME}', title)
                 .replace('{DESCRIPTION}', description)
                 .replace(
@@ -216,6 +222,21 @@ export function createSetting(setting: ISettings, value: any) {
                         .replace('{OPTIONS}', options)
                 );
         }
+
+        case 'textarea': {
+            return settingsItemHTML
+                .replace('{CLASSES}', 'txt-area')
+                .replace('{NAME}', title)
+                .replace('{DESCRIPTION}', description)
+                .replace(
+                    '{INPUT}',
+                    textareaHTML
+                        .replace('{TYPE}', 'text')
+                        .replace(/{ID}/gm, setting.uniqueID)
+                        .replace('{ADDON}', `ucs t="${setting.type}"`)
+                        .replace('{VALUE}', value)
+                );
+        }
     }
 
     return '';

diff --git a/packages/server/utils/counters.types.ts b/packages/server/utils/counters.types.ts
@@ -16,7 +16,8 @@ export type ISettingsType =
     | 'checkbox'
     | 'options'
     | 'color'
-    | 'note';
+    | 'note'
+    | 'textarea';
 
 export interface ICounter {
     _downloaded?: boolean;

diff --git a/packages/server/utils/htmls.ts b/packages/server/utils/htmls.ts
@@ -42,7 +42,7 @@ export const resultItemHTML = `
 </div>`;
 
 export const settingsItemHTML = `
-<div class="si flexer">
+<div class="si flexer {CLASSES}">
   <div>
     <h4>{NAME}</h4>
     <p>{DESCRIPTION}</p>