finishing creating the description field param

maliknajjar · Jan 28, 2024 · c89895e · c89895e
1 parent 9a5e210
commit c89895e
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 96 deletions.
diff --git a/src/dataExamples.ts b/src/dataExamples.ts
@@ -1,22 +1,39 @@
 export const exampleData = `{
-  "test": {},
-  "test2": [
-    [
-      {
-        "array": [
-          {},
-          []
-        ]
-      },
+  "test2": {
+    "_value": [
       [
+        {
+          "array": [
+            {},
+            []
+          ]
+        },
         [
-          {},
-          []
+          [
+            {},
+            []
+          ]
         ]
       ]
-    ]
-  ],
+    ],
+    "_params": {
+      "description": "this is a nested array I created for test purposes"
+    }
+  },
+  "userName": {
+    "_value": "rim",
+    "_fieldType": "text",
+    "_params": {
+      "fullWidth": true
+    }
+  },
   "name": "Alice",
+  "userAge": {
+    "_value": 22,
+    "_params": {
+      "description": "this is the age of the user"
+    }
+  },
   "brother": null,
   "age": 25,
   "isStudent": true,

diff --git a/src/guifier/fields/containers/Container/Container.ts b/src/guifier/fields/containers/Container/Container.ts
@@ -4,8 +4,8 @@ import type { ObjectContainer } from '../ObjectContainer/ObjectContainer'
 import type { ArrayContainer } from '../ArrayContainer/ArrayContainer'
 
 import { Field } from '../../../fields/Field/Field'
-import { drawOutlineIcon } from '../../../utils'
-import { computePosition, flip, offset, shift } from '@floating-ui/dom'
+import { drawDescriptionSymbol, drawOutlineIcon, drawDescriptionToolTip } from '../../../utils'
+import { isEmpty } from 'lodash'
 
 export abstract class Container extends Field {
     /**
@@ -160,42 +160,10 @@ export abstract class Container extends Field {
         guifierContainerHeader.append(guifierContainerHeaderKeyName)
 
         // showing tooltip
-        const descriptionSymbol = document.createElement('div')
-        descriptionSymbol.classList.add('guifierDescriptionSymbol')
-        descriptionSymbol.append('!')
-        guifierContainerHeaderKeyName.append(descriptionSymbol)
-
-        // the tool tip you need to show
-        const descriptionTooltip = document.createElement('div')
-        descriptionTooltip.classList.add('guifierDescriptionTooltip')
-        descriptionTooltip.append('this is a comment about the new field that you have here man')
-        guifierContainerHeaderKeyName.append(descriptionTooltip)
-        // the refrence of the tool tip
-        const descriptionTooltipRefrence = document.createElement('div')
-        descriptionTooltipRefrence.classList.add('descriptionTooltipRefrence')
-        guifierContainerHeaderKeyName.append(descriptionTooltipRefrence)
-        // compute its position
-        let timeout: number = 0
-        guifierContainerHeader.addEventListener('mouseenter', () => {
-            clearTimeout(timeout)
-            computePosition(descriptionTooltipRefrence, descriptionTooltip, {
-                placement: 'top',
-                middleware: [offset(15), flip(), shift()]
-            }).then(({ x, y }) => {
-                Object.assign(descriptionTooltip.style, {
-                    left: `${x}px`,
-                    top: `${y}px`
-                })
-            }).then(() => {}).catch((err) => {
-                console.log('ERROR: from positioning')
-                console.log(err)
-            })
-        })
-        guifierContainerHeader.addEventListener('mouseleave', () => {
-            timeout = setTimeout(() => {
-                descriptionTooltip.removeAttribute('style')
-            }, 250)
-        })
+        if (!isEmpty(this.property._params.description)) {
+            guifierContainerHeaderKeyName.append(drawDescriptionSymbol())
+            drawDescriptionToolTip(this, guifierContainerHeader)
+        }
 
         // todo: add this part to a function
         const guifierContainerHeaderButtons = this.drawContainerHeaderButtons()

diff --git a/src/guifier/fields/containers/ObjectContainer/ObjectContainer.ts b/src/guifier/fields/containers/ObjectContainer/ObjectContainer.ts
@@ -6,10 +6,9 @@ import type { Field } from '../../Field/Field'
 import type { CardSchemaInternal } from '../../CustomFields/CardSelectField/types'
 
 import { Container } from '../Container/Container'
-import { drawOutlineIcon, fieldsMetaData, getDefaultValueByFieldType, getFieldInstance, getType } from '../../../utils'
+import { drawDescriptionSymbol, drawOutlineIcon, fieldsMetaData, drawDescriptionToolTip, getDefaultValueByFieldType, getFieldInstance, getType } from '../../../utils'
 
-import lodash from 'lodash'
-import { computePosition, flip, offset, shift } from '@floating-ui/dom'
+import lodash, { isEmpty } from 'lodash'
 import { Dialog } from '../../../dialogue/dialog'
 
 /**
@@ -120,11 +119,6 @@ export class ObjectContainer extends Container {
             const labelName = property._key
             textPart.append(labelName.toString())
 
-            const descriptionSymbol = document.createElement('div')
-            descriptionSymbol.classList.add('guifierDescriptionSymbol')
-            descriptionSymbol.append('!')
-            textPart.append(descriptionSymbol)
-
             labelContainer.append(textPart)
 
             const buttonsPart = document.createElement('div')
@@ -148,37 +142,11 @@ export class ObjectContainer extends Container {
 
             guifierObjectFieldContainer.append(fieldInnerContainer)
 
-            // the tool tip you need to show
-            const descriptionTooltip = document.createElement('div')
-            descriptionTooltip.classList.add('guifierDescriptionTooltip')
-            descriptionTooltip.append('this is a comment about the new field that you have here man')
-            guifierObjectFieldContainer.append(descriptionTooltip)
-            // the refrence of the tool tip
-            const descriptionTooltipRefrence = document.createElement('div')
-            descriptionTooltipRefrence.classList.add('descriptionTooltipRefrence')
-            guifierObjectFieldContainer.append(descriptionTooltipRefrence)
-            // compute its position
-            let timeout: number = 0
-            guifierObjectFieldContainer.addEventListener('mouseenter', () => {
-                clearTimeout(timeout)
-                computePosition(descriptionTooltipRefrence, descriptionTooltip, {
-                    placement: 'top',
-                    middleware: [offset(15), flip(), shift()]
-                }).then(({ x, y }) => {
-                    Object.assign(descriptionTooltip.style, {
-                        left: `${x}px`,
-                        top: `${y}px`
-                    })
-                }).then(() => {}).catch((err) => {
-                    console.log('ERROR: from positioning')
-                    console.log(err)
-                })
-            })
-            guifierObjectFieldContainer.addEventListener('mouseleave', () => {
-                timeout = setTimeout(() => {
-                    descriptionTooltip.removeAttribute('style')
-                }, 250)
-            })
+            // showing tooltip
+            if (!isEmpty(field.property._params.description)) {
+                textPart.append(drawDescriptionSymbol())
+                drawDescriptionToolTip(field, guifierObjectFieldContainer)
+            }
 
             propertyElement = guifierObjectFieldContainer
         }

diff --git a/src/guifier/guifierStyle.css b/src/guifier/guifierStyle.css
@@ -126,10 +126,7 @@
     bottom: 15px;
     left: 15px;
     width: 100%;
-    border-radius: var(--primary-border-radius);
-    border: var(--primary-border);
     background-color: white;
-    padding: var(--second-padding);
     opacity: 0;
     height: fit-content;
     font-weight: normal;
@@ -138,4 +135,32 @@
     transition: 250ms;
     pointer-events: none;
     color: var(--third-color);
-}
+    /* transform: translateX(7.5px); */
+    border-radius: var(--primary-border-radius);
+}
+
+.guifierDescriptionTooltip .descriptionHeader {
+    display: flex;
+    align-items: center;
+    gap: 7.5px;
+    border: var(--primary-border);
+    padding: 7.5px;
+    border-radius: var(--primary-border-radius) var(--primary-border-radius) 0 0;
+    font-weight: bold;
+}
+
+.guifierDescriptionTooltip .descriptionHeader .guifierDescriptionSymbol {
+    color: rgba(0, 0, 0, 0.5);
+    border-color: rgba(0, 0, 0, 0.5);
+}
+
+.guifierDescriptionTooltip .descriptionHeader .descriptionFieldType {
+    color: mediumslateblue;
+}
+
+.guifierDescriptionTooltip .descriptionBody {
+    border: var(--primary-border);
+    border-top: none;
+    padding: var(--second-padding);
+    border-radius: 0 0 var(--primary-border-radius) var(--primary-border-radius);
+}
diff --git a/src/guifier/utils.ts b/src/guifier/utils.ts
@@ -1,5 +1,8 @@
 import 'material-icons/iconfont/outlined.css'
 
+import { computePosition, flip, offset, shift } from '@floating-ui/dom'
+import lodash from 'lodash'
+
 import type { AnyObject, Property, FieldsMetaData, ParametersInternal } from './types'
 import type { Field } from './fields/Field/Field'
 import type { Data } from './classes/Data'
@@ -14,7 +17,6 @@ import { NumberField } from './fields/baseFields/NumberField/NumberField'
 import { BooleanField } from './fields/baseFields/BooleanField/BooleanField'
 import { NullField } from './fields/baseFields/NullField/NullField'
 import { CardSelectField } from './fields/CustomFields/CardSelectField/CardSelectField'
-import lodash from 'lodash'
 
 /**
  * A function that tells you wether a number is odd or even
@@ -177,7 +179,7 @@ export function getFieldInstance (property: Property, data: Data, params: Parame
  * A function that draws any google font outline Icon by icon name
  *
  * @param {string} iconName is the the name of the icon you want to draw
- * @returns {Field} instance of the Field
+ * @returns {HTMLElement} instance of the Field
  */
 export function drawOutlineIcon (iconName: string): HTMLElement {
     const deleteIconElement = document.createElement('span')
@@ -187,6 +189,65 @@ export function drawOutlineIcon (iconName: string): HTMLElement {
     return deleteIconElement
 }
 
+/**
+ * A function that draws the descriptionSymbol
+ *
+ * @returns {HTMLElement} instance of the Field
+ */
+export function drawDescriptionSymbol (): HTMLElement {
+    const descriptionSymbol = document.createElement('div')
+    descriptionSymbol.classList.add('guifierDescriptionSymbol')
+    descriptionSymbol.append('!')
+
+    return descriptionSymbol
+}
+
+/**
+ * A function that generated the description tool tip
+ */
+export function drawDescriptionToolTip (field: Field, objectFieldContainer: HTMLElement): void {
+    // the tool tip you need to show
+    const descriptionTooltip = document.createElement('div')
+    descriptionTooltip.classList.add('guifierDescriptionTooltip')
+    descriptionTooltip.insertAdjacentHTML('afterbegin', `
+        <div class="descriptionHeader">
+            <div class="guifierDescriptionSymbol">!</div>
+            <div>
+                ${field.keyName}
+                <span class="descriptionFieldType">(${field.getFieldLabelName()})</span>
+            </div>
+        </div>
+        <div class="descriptionBody">${field.property._params.description as string}</div>
+    `)
+    objectFieldContainer.append(descriptionTooltip)
+    // the refrence of the tool tip
+    const descriptionTooltipRefrence = document.createElement('div')
+    descriptionTooltipRefrence.classList.add('descriptionTooltipRefrence')
+    objectFieldContainer.append(descriptionTooltipRefrence)
+    // compute its position
+    let timeout: number = 0
+    objectFieldContainer.addEventListener('mouseenter', () => {
+        clearTimeout(timeout)
+        computePosition(descriptionTooltipRefrence, descriptionTooltip, {
+            placement: 'top',
+            middleware: [offset(15), flip(), shift()]
+        }).then(({ x, y }) => {
+            Object.assign(descriptionTooltip.style, {
+                left: `${x}px`,
+                top: `${y}px`
+            })
+        }).then(() => {}).catch((err) => {
+            console.log('ERROR: from positioning')
+            console.log(err)
+        })
+    })
+    objectFieldContainer.addEventListener('mouseleave', () => {
+        timeout = setTimeout(() => {
+            descriptionTooltip.removeAttribute('style')
+        }, 250)
+    })
+}
+
 /**
  * This function will get you the PrimitiveTypes based on the string stringType
  *