Add remaining 15 gui element types (Closes #13)

Fernando-A-Rocha · Fernando-A-Rocha · commit b956f86e633a · 2025-05-23T10:34:03.000+01:00
diff --git a/elements/GUI/gui-button.yaml b/elements/GUI/gui-button.yaml
@@ -0,0 +1,3 @@
+name: gui-button
+description: |
+  The **GUI button** class represents GUI buttons in MTA's GUI system. It's only functionality is to detect whether client has clicked it.
diff --git a/elements/GUI/gui-checkbox.yaml b/elements/GUI/gui-checkbox.yaml
@@ -0,0 +1,3 @@
+name: gui-checkbox
+description: |
+  The GUI checkbox class represents GUI checkboxes in MTA's GUI system. These can be checked or unchecked. 
diff --git a/elements/GUI/gui-combobox.yaml b/elements/GUI/gui-combobox.yaml
@@ -0,0 +1,3 @@
+name: gui-combobox
+description: |
+  The GUI combobox class represents GUI comboboxes in MTA's GUI system. These are drop down lists that can contain large number of items.
diff --git a/elements/GUI/gui-edit.yaml b/elements/GUI/gui-edit.yaml
@@ -0,0 +1,3 @@
+name: gui-edit
+description: |
+  The GUI edit field class represents GUI edit fields in MTA's GUI system. You can input text in these which you can afterwards check from the script. It can be used, for example when making a registration system.
diff --git a/elements/GUI/gui-gridlist.yaml b/elements/GUI/gui-gridlist.yaml
@@ -0,0 +1,3 @@
+name: gui-gridlist
+description: |
+  The GUI gridlist class represents GUI gridlists in MTA's GUI system. It can be used for example as a selection list or as a list to view information about players (see [old scoreboard resource](/Resource:OldScoreboard)).
diff --git a/elements/GUI/gui-label.yaml b/elements/GUI/gui-label.yaml
@@ -0,0 +1,3 @@
+name: gui-label
+description: |
+  The GUI label class represents GUI labels in MTA's GUI system. These are simply a bunch of text which client cannot modify.
diff --git a/elements/GUI/gui-memo.yaml b/elements/GUI/gui-memo.yaml
@@ -0,0 +1,3 @@
+name: gui-memo
+description: |
+  The GUI memo class represents GUI memos in MTA's GUI system. These are big multiline text fields to what you can type text by default. It is recommended to use [edit fields](/gui-edit) for smaller text inputting.
diff --git a/elements/GUI/gui-progressbar.yaml b/elements/GUI/gui-progressbar.yaml
@@ -0,0 +1,3 @@
+name: gui-progressbar
+description: |
+  The GUI progress bar class represents GUI progress bars in MTA's GUI system. These are mostly used as loading bars because you can alter the percentage amount of progress in it. 
diff --git a/elements/GUI/gui-radiobutton.yaml b/elements/GUI/gui-radiobutton.yaml
@@ -0,0 +1,3 @@
+name: gui-radiobutton
+description: |
+  The GUI radio button class represents GUI radio buttons in MTA's GUI system. These can be checked or unchecked and work quite similiar as the GUI checkboxes. 
diff --git a/elements/GUI/gui-scrollbar.yaml b/elements/GUI/gui-scrollbar.yaml
@@ -0,0 +1,3 @@
+name: gui-scrollbar
+description: |
+  The GUI scrollbar class represents GUI scrollbars in MTA's GUI system. These can be moved with cursor and it's position can be checked and set by script. These are built by default to certain GUI elements ([gridlists](/gui-gridlist)) if they exceed the given size. 
diff --git a/elements/GUI/gui-scrollpane.yaml b/elements/GUI/gui-scrollpane.yaml
@@ -0,0 +1,3 @@
+name: gui-scrollpane
+description: |
+  Todo
diff --git a/elements/GUI/gui-staticimage.yaml b/elements/GUI/gui-staticimage.yaml
@@ -0,0 +1,3 @@
+name: gui-staticimage
+description: |
+  The GUI static image class represents GUI static images in MTA's GUI system. These are custom images which can be loaded to clients screen.
diff --git a/elements/GUI/gui-tab.yaml b/elements/GUI/gui-tab.yaml
@@ -0,0 +1,3 @@
+name: gui-tab
+description: |
+  The GUI tab class represents GUI tabs in MTA's GUI system. These highly rely on GUI [tab panels](/gui-tabpanel) as they only can be created to them.
diff --git a/elements/GUI/gui-tabpanel.yaml b/elements/GUI/gui-tabpanel.yaml
@@ -0,0 +1,3 @@
+name: gui-tabpanel
+description: |
+  The GUI tab panel class represents GUI tab panels in MTA's GUI system. These are just layouts for GUI [tabs](/gui-tab) and highly rely on them. It is recommended to use GUI [windows](/gui-window) if you are not adding tabs to a tab panel. 
diff --git a/elements/GUI/gui-window.yaml b/elements/GUI/gui-window.yaml
@@ -0,0 +1,3 @@
+name: gui-window
+description: |
+  The GUI window class represents GUI windows in MTA's GUI system. These are mainly used as layout for other GUI elements. They can be moved and resized by default. 
diff --git a/elements/info.txt b/elements/info.txt
@@ -0,0 +1 @@
+GUI and General category names are hardcoded
diff --git a/web/src/pages/[element].astro b/web/src/pages/[element].astro
@@ -17,7 +17,8 @@ export async function getStaticPaths() {
 
 const { element } = Astro.props;
 element.data.itemType = 'element';
-  
+element.data.niceName = element.data.name.charAt(0).toUpperCase() + element.data.name.slice(1);
+
 ---
 <StarlightPage frontmatter={{
   template: 'doc',
diff --git a/web/src/utils/general.ts b/web/src/utils/general.ts
@@ -2,6 +2,7 @@ import { marked } from 'marked';
 import path from 'path';
 import { getFunctionsByTypeByCategory } from '@src/utils/functions';
 import { getEventsByTypeByCategory } from '@src/utils/events';
+import { getElementsByCategory, getElementCategory } from '@src/utils/elements';
 import { getOOPClassesByCategory } from '@src/utils/classes';
 
 export function renderInlineMarkdown(markdown: string): string | Promise<string> {
@@ -23,12 +24,15 @@ const titleCase = (str: string) =>
   str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
 
 const makeTitle = (subType: string, category: string, type: string): string => {
-  const categoryPart = titleCase(category);
+  const isUpperCase = category === category.toUpperCase();
+  const categoryPart = isUpperCase ? category : titleCase(category);
   const typePart = titleCase(type);
   if (subType === 'any') {
     return `${categoryPart} ${typePart}`;
   } else {
-    return `${titleCase(subType)} ${categoryPart} ${typePart}`;
+    const isUpperCase2 = subType === subType.toUpperCase();
+    const subTypePart = isUpperCase2 ? subType : titleCase(subType);
+    return `${subTypePart} ${categoryPart} ${typePart}`;
   }
 };
 
@@ -53,6 +57,10 @@ const getItemsInCategory = (type: string, subType: string, category: string): an
           ]
         : evByType?.[subType as keyof typeof evByType]?.[category] || [];
     }
+    case 'elements': {
+      const elementsByCategory = getElementsByCategory();
+      return elementsByCategory?.[category] || [];
+    }
     case 'classes': {
       const classesByCategory = getOOPClassesByCategory();
       return classesByCategory?.[category] || [];
@@ -142,12 +150,30 @@ export function getSeeAlsoLinksForItem(theItem: any): SeeAlsoLinkGroup[] {
       break;
     case 'element':
       seeAlso = see_also ?? [];
-      addToSeeAlso = [
-        `functions:any:${niceName}`,
-        `events:any:${niceName}`,
-        `functions:any:Element`,
-        `events:any:Element`,
-      ];
+      const elementCategory = getElementCategory(theItem);
+      if (elementCategory === 'GUI') {
+        // Show GUI functions, events and other GUI element types
+        addToSeeAlso = [
+          `functions:any:${elementCategory}`,
+          `events:any:${elementCategory}`,
+          `elements:any:${elementCategory}`,
+        ];
+      } else if (elementCategory === 'General') {
+        // Also show generic Element functions and events if category is General
+        addToSeeAlso = [
+          `functions:any:${niceName}`,
+          `events:any:${niceName}`,
+          `functions:any:Element`,
+          `events:any:Element`,
+        ];
+      }
+      else {
+        // Show all functions and events for the element type
+        addToSeeAlso = [
+          `functions:any:${niceName}`,
+          `events:any:${niceName}`,
+        ];
+      }
       break;
     case 'class':
       seeAlso = see_also ?? [];

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+name: gui-button`
	`2`	`+description: \|`
	`3`	`+ The GUI button class represents GUI buttons in MTA's GUI system. It's only functionality is to detect whether client has clicked it.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+name: gui-checkbox`
	`2`	`+description: \|`
	`3`	`+ The GUI checkbox class represents GUI checkboxes in MTA's GUI system. These can be checked or unchecked.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+name: gui-combobox`
	`2`	`+description: \|`
	`3`	`+ The GUI combobox class represents GUI comboboxes in MTA's GUI system. These are drop down lists that can contain large number of items.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+name: gui-edit`
	`2`	`+description: \|`
	`3`	`+ The GUI edit field class represents GUI edit fields in MTA's GUI system. You can input text in these which you can afterwards check from the script. It can be used, for example when making a registration system.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+name: gui-gridlist`
	`2`	`+description: \|`
	`3`	`+ The GUI gridlist class represents GUI gridlists in MTA's GUI system. It can be used for example as a selection list or as a list to view information about players (see [old scoreboard resource](/Resource:OldScoreboard)).`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+name: gui-label`
	`2`	`+description: \|`
	`3`	`+ The GUI label class represents GUI labels in MTA's GUI system. These are simply a bunch of text which client cannot modify.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+name: gui-memo`
	`2`	`+description: \|`
	`3`	`+ The GUI memo class represents GUI memos in MTA's GUI system. These are big multiline text fields to what you can type text by default. It is recommended to use [edit fields](/gui-edit) for smaller text inputting.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+name: gui-progressbar`
	`2`	`+description: \|`
	`3`	`+ The GUI progress bar class represents GUI progress bars in MTA's GUI system. These are mostly used as loading bars because you can alter the percentage amount of progress in it.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+name: gui-radiobutton`
	`2`	`+description: \|`
	`3`	`+ The GUI radio button class represents GUI radio buttons in MTA's GUI system. These can be checked or unchecked and work quite similiar as the GUI checkboxes.`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+name: gui-scrollbar`
	`2`	`+description: \|`
	`3`	`+ The GUI scrollbar class represents GUI scrollbars in MTA's GUI system. These can be moved with cursor and it's position can be checked and set by script. These are built by default to certain GUI elements ([gridlists](/gui-gridlist)) if they exceed the given size.`