🔧 common.js
Provides common utility functions. Below are some outputs from its static methods.
Script & URL Info:
CurrentScriptUrl (of this invoker script): Loading...
CurrentScriptName (of this invoker script): Loading...
Current Page URL: Loading...
Current Page Path: Loading...
makeObjbyPath:
Result:
safeWindowsFileName:
Safe name:
AddScript/AddStyle/AddMeta:
These functions dynamically add elements to `
`. Check your browser's inspector.🧿 observer.js
Monitors a DOM element for changes and user interaction events.
Log:
🎮 controller.js
Manages asynchronous function execution, allowing aborting previous calls.
Check console and log below for messages.
Log:
🔩 base.js
Initializes `JCGWeb` namespace and provides foundational DOM utilities.
Mouse Coordinates (JCGWeb.Variables.Mouse):
Move your mouse over the page.
X: N/A, Y: N/A
CreateElementFromHTML:
FindComponentFromEvent:
getUniqueSelector:
Click the button below, then click any element on the page. Its unique selector will be logged to console and shown here.
Clicked Selector: (waiting for click after activation)
MakeSafePos:
📦 object.js
Utility functions for working with JavaScript objects.
GetValueFromPath:
Object: { user: { name: 'Alice', details: { age: 30 } } }, Path: user.details.age
Result:
MakeObjFromPath:
Path: app.settings.theme, Value: dark
Resulting Object:
cleanObject:
Input: { a: 1, b: null, c: '', d: { e: undefined, f: [] }, g: [1,2], h: {} }
Cleaned:
mergeObjects:
Obj1: { a:1, b:{x:10} }, Obj2: { b:{y:20}, c:3 }
Merged:
💬 popupmessage.js
Displays temporary, dismissible popup messages (toasts/notifications).
Messages will appear at the bottom-right of the screen.
🌳 treelist.js
Creates a collapsible, tree-like list from a JSON object or array.
📊 TableSorter.js
Adds client-side sorting functionality to HTML tables. Click on table headers to sort.
Color sort order is the same as the rainbow: red, orange, yellow, green, blue, indigo, and violet
| Name | Age | Join Date | Action | Color |
|---|---|---|---|---|
| Charlie Brown | 8 | 2022-03-15 | View | red |
| Alice Wonderland | 30 | 2021-07-22 | View | yellow |
| Bob The Builder | 45 | 2020-01-10 | View | blue |
| Eve Harrington | 28 | 2023-11-05 | View | violet |
| Jhon Doe | 42 | 2018-06-01 | View | orange |
| Rose Barnett | 22 | 2024-08-21 | View | green |
| Luis Stone | 27 | 2021-11-05 | View | indigo |
🧠pagememory.js
Persists and restores the state of specified DOM elements across page loads using localStorage.
Enter some values in the fields below, then reload the page. The values should persist.
Collapsible Section (state saved)
This section's open/closed state will be remembered.
After this field is restored, 'myCustomTriggerHandler' will be called.
🎨 themeControl.js
Provides a UI for dynamically changing website themes. A brush icon button should appear at the bottom-right. Click it to open the theme control panel. The panel itself will be styled by `themeControl.css` (if loaded) or fallback styles.
This is a styled paragraph.