diff --git a/centrallix-doc/Widgets/widgets.xml b/centrallix-doc/Widgets/widgets.xml
index b6b50afde..5c1c152a9 100644
--- a/centrallix-doc/Widgets/widgets.xml
+++ b/centrallix-doc/Widgets/widgets.xml
@@ -629,7 +629,7 @@ checkbox_test "widget/page"
Opens the window. If the parameter IsModal is set to 1, then the window becomes modal (only the window's contents are accessible to the user until the window is closed). If the parameter NoClose is set to 1, then the close button in the upper right corner of the window becomes inactive and the window will only close via the Close, SetVisibility, and ToggleVisibility actions.
- Makes the window relocate to a side using a triangle (pop over).
+ Creates a triangular pointer on the edge of the window to point at a given (X,Y) coordinate.
Opens a window like a pop-up.
@@ -2323,7 +2323,7 @@ MyButton "widget/imagebutton"
The color (named or #numeric) of the text in the label when the user hovers the mouse over the label.
- (e.g. bold).
+ 'bold' for bold text, 'italic' for italic text.
The text that the label is to display.
@@ -2575,7 +2575,7 @@ myMenu "widget/menu"
** This feature currently disabled in Centrallix 0.9.1 ** Default "no". If set to "yes", the objectsource will ask the server to send it updates on any changes that occur on the server side (i.e., if the changes were made by another objectsource or by another user, they would be automatically refreshed into this objectsource in near real-time).
- The time between the data refreshing, if set to 0 it does not automatically refresh.
+ The time in milliseconds between the data refreshing, if set to 0 it does not automatically refresh.
Represents the number of records to store in its replica. This value should be larger than the maximum number of records that will be displayed at any one time. At times, Centrallix may increase the number of records cached on the client beyond this number.
@@ -2818,13 +2818,17 @@ osrc1 "widget/osrc"
- Sends an alert widget.
+ Sends an alert widget. Set the 'Message' to specify a text string that should appear in the alert.
Closes the page.
Starts a new app in a new window.
+ Logs data to the console (using console.log()), for testing and debugging. Set the 'Message' to specify a text string that should appear in the log. Might be useful for logging Easter Egg #8.
+
Loads the page.
+
+ Reloads the page in the user's browser. Note: This event forces a reload, even if the original content could be loaded without one.
@@ -3087,7 +3091,9 @@ my_cmp "widget/component-decl"
A color, RGB or named, for the panel background. If neither bgcolor nor background transparent.
Height, in pixels, of the panel.
-
+
+ The maximum height (in pixels) of space allowed between radio buttons on the panel (default: 10px).
+
An image to be used for the rectangular border drawn around the radio buttons.
The color, RGB or named, of the text within the panel. Default: "black".
@@ -3390,21 +3396,31 @@ $Version=2$
- Scrolls to a specific location determined by the scroll bar.
+ Scrolls to a specific location determined by the scroll bar. Specify the 'Percent' attribute to indicate how far to scroll in decimal representation (so 1.00 is 100%, aka. the bottom of the page). Specify 'Offset' how many pixels the content should be offset from the top (specify 100 to scroll the first 100 px of content off the top of the scroll pane). Specify 'RangeStart' and 'RangeEnd' to scroll to within the pixel range (using the same units as offset). Keep in mind that this action will trigger a scroll event to occur.
+
+ This event occurs any time the user scrolls the scroll pane. This includes scrolling by clicking the scroll buttons, clicking on the scroll bar, dragging the scroll thumb, turning the scroll wheel, or when the ScrollTo action is used. This event does not occur when the scroll pane moves because the contained content changed in length, or when the scroll pane is forced to scroll because the available visible area was resized. This event will never occur if the content within the scroll pane is shorter than the available visible area because then the content cannot be scrolled.
+ This event provides the :Percent attribute, a number from 0 to 100 (the same as the ScrollTo action above) representing the percentage that the user has now scrolled down the page as of the event occuring. This event also provides :Change, representing how much the user's scroll location has changed in the same unit as above (although this value will be negative if the user scrolled up).
+
+ This event occurs when the user moves the mouse pointer while it is over the widget. The event will repeatedly fire each time the pointer moves.
+
+ This event occurs when the user moves the scroll wheel while it is over the widget (or content inside the widget). The event will repeatedly fire each time the pointer moves.
+
This event occurs when the user presses the mouse button on the widget. This differs from the 'Click' event in that the user must actually press and release the mouse button on the widget for a Click event to fire, whereas simply pressing the mouse button down will cause the MouseDown event to fire.
- This event occurs when the user moves the mouse pointer while it is over the widget. The event will repeatedly fire each time the pointer moves.
+ This event occurs when the user moves the mouse pointer while it is over the widget (or content inside the widget). The event will repeatedly fire each time the pointer moves.
This event occurs when the user moves the mouse pointer off of the widget.
This event occurs when the user first moves the mouse pointer over the widget. It will not occur again until the user moves the mouse off of the widget and then back over it again.
This event occurs when the user releases the mouse button on the widget.
+
+ Note: The Click, Wheel, MouseDown, and MouseUp events provide several pieces of useful information, including :shiftKey, :ctrlKey, :altKey, and :metaKey, which are 1 if the respective key is held down and 0 otherwise. These events also provide :button, a number representing the button number that the user used to execute the event (which appears to always be 0 for wheel).
@@ -3467,7 +3483,7 @@ MyScrollPane "widget/scrollpane"
The tab pages are containers, and as such, controls of various kinds, including other tab controls, can be placed inside the tab pages.
- Tab pages are added to a tab control by including widgets of type "widget/tabpage" within the "widget/tab" widget in the structure file that defines the application. Any controls to appear inside a particular tab page should be placed inside their respective "widget/tabpage" widgets in the structure file.Only widgets of type "widget/tabpage" should be placed inside a "widget/tab", with the exception of nonvisuals such as connectors.
+ Tab pages are added to a tab control by including widgets of type "widget/tabpage" within the "widget/tab" widget in the structure file that defines the application. Any controls to appear inside a particular tab page should be placed inside their respective "widget/tabpage" widgets in the structure file.Only widgets of type "widget/tabpage" should be placed inside a "widget/tab", except nonvisuals such as connectors.
Tab pages also have a 'visible' property which allows them to be hidden and revealed. This is used if the type is set to dynamic, but can be used manually as well.
@@ -3502,6 +3518,8 @@ MyScrollPane "widget/scrollpane"
The location of the tabs: "top" (default), "bottom", "left", "right", or "none".
The width of the tabs in pixels. This is optional for tab_locations of "top", "bottom", and "none".
+
+ The height of the tabs in pixels. This is optional for all tab_locations. Defaults to 24px.
The color of the text to be used on the tabs to identify them.
@@ -3511,7 +3529,15 @@ MyScrollPane "widget/scrollpane"
X-coordinate of the upper left corner of the tab control, relative to the container.
- Y-coordinate of the upper left corner of the control, relative to its container.
+ 'client-side' or 'server-side'. This property is intended for developers (although it can give a very small performance boost). A value of "server-side" turns off JS rendering on the client. This does not work for dynamic width tabs (aka. top or bottom tabs with no 'tab_width' property). Defaults to "client-side".
+
+ The amount to translate a selected tab along the side of the tab control. Defaults to 0px.
+
+ The amount to translate a selected tab out and away from the side of the tab control. Defaults to 2px.
+
+ The amount to translate a selected tab in the x direction. If set, overrides the value derived from select_translate_along and/or select_translate_out.
+
+ The amount to translate a selected tab in the y direction. If set, overrides the value derived from select_translate_along and/or select_translate_out.
@@ -3595,9 +3621,9 @@ myTabControl "widget/tab"
- A table widget is used to display data in a tabular format. It consists of a header row with column labels, followed by any number of rows containing data.The header may have a different color or image scheme than the rows, and the rows may or may not be configured to alternate between two colors or background images.
+ A table widget is used to display data in a tabular format. It consists of a header row with column labels, followed by any number of rows containing data. The header may have a different color or image scheme than the rows, and the rows may or may not be configured to alternate between two colors or background images.
- Table widgets come in three different flavors: static, dynamicpage, and dynamicrow.Static table widgets are built on the server and write their data directly into the container in which they reside, which is usually a scrollpane widget. Dynamicpage table widgets load their data once they initialize on the client, by activating a query through an ObjectSource nonvisual widget.Dynamicpage table widgets do not support modification, but can be reloaded through an ObjectSource at will.Dynamicrow table widgets, on the other hand, display each row as an individual layer, and thus are modifiable on the client. Dynamicrow table widgets also load their contents through an ObjectSource widget query.As of the time of writing of this document, only static mode and dynamicrow mode were supported.
+ Table widgets come in three different flavors: static, dynamicpage, and dynamicrow. Static table widgets are built on the server and write their data directly into the container in which they reside, which is usually a scrollpane widget. Dynamicpage table widgets load their data once they initialize on the client, by activating a query through an ObjectSource nonvisual widget. Dynamicpage table widgets do not support modification, but can be reloaded through an ObjectSource at will. Dynamicrow table widgets, on the other hand, display each row as an individual layer, and thus are modifiable on the client. Dynamicrow table widgets also load their contents through an ObjectSource widget query. As of the time of writing of this document, only static mode and dynamicrow mode were supported.
Table widgets allow the selection (keyboard, mouse, and data focus) of individual rows.
@@ -3622,6 +3648,8 @@ myTabControl "widget/tab"
The vertical spacing between cells in the table, in pixels. Default is 1.
The width of the column separation lines in pixels. Default is 1.
+
+ Either 'full' or 'header'. Default is 'full'.
Either "rows" (default) or "properties". In "properties" mode, the table displays one row per attribute, and so only displays the current record in the objectsource. In "rows" mode, the table displays one row per record in the objectsource.
diff --git a/centrallix-lib/include/util.h b/centrallix-lib/include/util.h
index df4ba0d58..bc2d80d1e 100644
--- a/centrallix-lib/include/util.h
+++ b/centrallix-lib/include/util.h
@@ -30,5 +30,36 @@ extern "C" {
}
#endif
-#endif /* UTILITY_H */
+/** TODO: ISRAEL - Remove these after the dups branch is merged. **/
+
+/*** @brief Returns the smaller of two values.
+ ***
+ *** @param a The first value.
+ *** @param b The second value.
+ *** @return The smaller of the two values.
+ ***
+ *** @note This macro uses GCC extensions to ensure type safety.
+ ***/
+#define min(a, b) \
+ ({ \
+ __typeof__ (a) _a = (a); \
+ __typeof__ (b) _b = (b); \
+ (_a < _b) ? _a : _b; \
+ })
+/*** @brief Returns the larger of two values.
+ ***
+ *** @param a The first value.
+ *** @param b The second value.
+ *** @return The larger of the two values.
+ ***
+ *** @note This macro uses GCC extensions to ensure type safety.
+ ***/
+#define max(a, b) \
+ ({ \
+ __typeof__ (a) _a = (a); \
+ __typeof__ (b) _b = (b); \
+ (_a > _b) ? _a : _b; \
+ })
+
+#endif /* UTILITY_H */
diff --git a/centrallix-lib/src/mtask.c b/centrallix-lib/src/mtask.c
index 9a167d724..3bb08000e 100644
--- a/centrallix-lib/src/mtask.c
+++ b/centrallix-lib/src/mtask.c
@@ -41,7 +41,7 @@
/* Centrallix Application Server System */
/* Centrallix Base Library */
/* */
-/* Copyright (C) 1998-2001 LightSys Technology Services, Inc. */
+/* Copyright (C) 1998-2026 LightSys Technology Services, Inc. */
/* */
/* You may use these files and this library under the terms of the */
/* GNU Lesser General Public License, Version 2.1, contained in the */
@@ -2208,8 +2208,8 @@ thClearFlags(pThread thr, int flags)
int
thExcessiveRecursion()
{
- unsigned char buf[1];
- return (MTASK.CurrentThread->Stack - buf > MT_STACK_HIGHWATER);
+ const unsigned char stack_ptr[1];
+ return (MTASK.CurrentThread->Stack - stack_ptr > MT_STACK_HIGHWATER);
}
@@ -4265,4 +4265,3 @@ syGetSem(pSemaphore sem, int cnt, int flags)
return code;
}
-
diff --git a/centrallix-lib/src/qprintf.c b/centrallix-lib/src/qprintf.c
index 1f4538a3d..3e595f3e8 100644
--- a/centrallix-lib/src/qprintf.c
+++ b/centrallix-lib/src/qprintf.c
@@ -20,7 +20,7 @@
/* Centrallix Application Server System */
/* Centrallix Base Library */
/* */
-/* Copyright (C) 1998-2006 LightSys Technology Services, Inc. */
+/* Copyright (C) 1998-2026 LightSys Technology Services, Inc. */
/* */
/* You may use these files and this library under the terms of the */
/* GNU Lesser General Public License, Version 2.1, contained in the */
@@ -880,6 +880,14 @@ qpf_internal_Translate(pQPSession s, const char* srcbuf, size_t srcsize, char**
*** change out from under this function to a new buffer if a realloc is
*** done by the grow_fn function. Do not store pointers to 'str'. Go
*** solely by offsets.
+ ***
+ *** NULL, &(s->Tmpbuf), &(s->TmpbufSize), htr_internal_GrowFn, (void*)s, fmt, va
+ *** @param s Optional session struct.
+ *** @param str Pointer to a string buffer where data will be written.
+ *** @param size Pointer to the current size of the string buffer.
+ *** @param grow_fn A function to grow the string buffer.
+ *** @param format The format of data which should be written.
+ *** @param ap The arguments list to fulfill the provided format.
***/
int
qpfPrintf_va_internal(pQPSession s, char** str, size_t* size, qpf_grow_fn_t grow_fn, void* grow_arg, const char* format, va_list ap)
@@ -975,6 +983,12 @@ qpfPrintf_va_internal(pQPSession s, char** str, size_t* size, qpf_grow_fn_t grow
/** Simple specifiers **/
if (__builtin_expect(format[0] == '%', 0))
{
+ if (ignore)
+ {
+ format++;
+ continue;
+ }
+
if (__builtin_expect(!nogrow, 1) && (__builtin_expect(cpoffset+2 <= *size, 1) || (grow_fn(str, size, cpoffset, grow_arg, cpoffset+2))))
(*str)[cpoffset++] = '%';
else
@@ -987,6 +1001,12 @@ qpfPrintf_va_internal(pQPSession s, char** str, size_t* size, qpf_grow_fn_t grow
}
else if (__builtin_expect(format[0] == '&',0))
{
+ if (ignore)
+ {
+ format++;
+ continue;
+ }
+
if (__builtin_expect(!nogrow, 1) && (__builtin_expect(cpoffset+2 <= *size, 1) || (grow_fn(str, size, cpoffset, grow_arg, cpoffset+2))))
(*str)[cpoffset++] = '&';
else
@@ -1448,5 +1468,3 @@ qpfRegisterExt(char* ext_spec, int (*ext_fn)(), int is_source)
return;
}
-
-
diff --git a/centrallix-os/apps/nav/default.tpl b/centrallix-os/apps/nav/default.tpl
index c0d73ca13..de958eafd 100644
--- a/centrallix-os/apps/nav/default.tpl
+++ b/centrallix-os/apps/nav/default.tpl
@@ -5,7 +5,7 @@ default "widget/template"
{
bgcolor="#e0e0e0";
linkcolor="#0000ff";
- font_name = "Arial";
+ font_name = "Arial, Helvetica, sans-serif";
font_size = 12;
icon = "/favicon.ico";
}
diff --git a/centrallix-os/samples/autoscale_test.app b/centrallix-os/samples/autoscale_test.app
new file mode 100644
index 000000000..9099aa857
--- /dev/null
+++ b/centrallix-os/samples/autoscale_test.app
@@ -0,0 +1,78 @@
+$Version=2$
+MyPage "widget/page"
+ {
+ title = "Responsive Testing Page";
+ bgcolor = "black";
+ textcolor = "#00f8ff";
+ width = 1000;
+ height = 1000;
+
+ auto "widget/hbox"
+ {
+ x=100; y=50; width=900; height=750;
+ spacing=20; row_height=300;
+ fl_width=100; fl_height=100;
+
+ pane0 "widget/pane" { fl_width=100; fl_height=100; width=190; height=180; bgcolor = "#9cf"; } // x=100; y=50;
+ pane1 "widget/pane" { fl_width=100; fl_height=100; width=130; height=180; bgcolor = "#ccc"; } // x=305; y=50;
+ pane2 "widget/pane" { fl_width=100; fl_height=100; width=80; height=320; bgcolor = "#f99"; } // x=455; y=50;
+ pane3 "widget/pane" { fl_width=100; fl_height=100; width=150; height=140; bgcolor = "#9f9"; } // x=555; y=50;
+ pane4 "widget/pane" { fl_width=100; fl_height=100; width=90; height=240; bgcolor = "#99f"; } // x=725; y=50;
+ pane5 "widget/pane" { fl_width=100; fl_height=100; width=230; height=100; bgcolor = "#ff9"; } // x=80; y=390;
+ pane6 "widget/pane" { fl_width=100; fl_height=100; width=80; height=200; bgcolor = "#f9f"; } // x=325; y=390;
+ pane7 "widget/pane" { fl_width=100; fl_height=100; width=170; height=220; bgcolor = "#9ff"; } // x=425; y=390;
+ pane8 "widget/pane" { fl_width=100; fl_height=100; width=110; height=200; bgcolor = "#fc9"; } // x=615; y=390;
+ pane9 "widget/pane" { fl_width=100; fl_height=100; width=130; height=120; bgcolor = "#cf9"; } // x=745; y=390;
+ }
+
+ // pane0 "widget/pane" { x=100; y=50; width=190; height=180; bgcolor = "#9cf"; }
+ // pane1 "widget/pane" { x=305; y=50; width=130; height=180; bgcolor = "#ccc"; }
+ // pane2 "widget/pane" { x=455; y=50; width=80; height=320; bgcolor = "#f99"; }
+ // pane3 "widget/pane" { x=555; y=50; width=150; height=140; bgcolor = "#9f9"; }
+ // pane4 "widget/pane" { x=725; y=50; width=90; height=240; bgcolor = "#99f"; }
+ // pane5 "widget/pane" { x=80; y=390; width=230; height=100; bgcolor = "#ff9"; }
+ // pane6 "widget/pane" { x=325; y=390; width=80; height=200; bgcolor = "#f9f"; }
+ // pane7 "widget/pane" { x=425; y=390; width=170; height=220; bgcolor = "#9ff"; }
+ // pane8 "widget/pane" { x=615; y=390; width=110; height=200; bgcolor = "#fc9"; }
+ // pane9 "widget/pane" { x=745; y=390; width=130; height=120; bgcolor = "#cf9"; }
+
+ paneA "widget/pane" { x=40; y=680; width=890; height=220; bgcolor = "#620"; }
+
+ // Outline the visible area.
+ top_left0 "widget/pane" { x=0; y=0; width=10; height=10; bgcolor = "#f00"; }
+ top_right0 "widget/pane" { x=990; y=0; width=10; height=10; bgcolor = "#ff0"; }
+ bottom_left0 "widget/pane" { x=0; y=990; width=10; height=10; bgcolor = "#0f0"; }
+ bottom_right0 "widget/pane" { x=990; y=990; width=10; height=10; bgcolor = "#00f"; }
+
+ // Advance markers.
+ top_left1 "widget/pane" { x=100; y=100; width=10; height=10; fl_x=25; fl_y=25; fl_width=25; fl_height=25; bgcolor = "#a00"; }
+ top_right1 "widget/pane" { x=890; y=100; width=10; height=10; fl_x=25; fl_y=25; fl_width=25; fl_height=25; bgcolor = "#aa0"; }
+ bottom_left1 "widget/pane" { x=100; y=890; width=10; height=10; fl_x=25; fl_y=25; fl_width=25; fl_height=25; bgcolor = "#0a0"; }
+ bottom_right1 "widget/pane" { x=890; y=890; width=10; height=10; fl_x=25; fl_y=25; fl_width=25; fl_height=25; bgcolor = "#00a"; }
+
+ // Interior markers.
+ top_left2 "widget/pane" { x=250; y=250; width=10; height=10; fl_x=100; fl_y=100; fl_width=25; fl_height=25; bgcolor = "#700"; }
+ top_right2 "widget/pane" { x=740; y=250; width=10; height=10; fl_x=100; fl_y=100; fl_width=25; fl_height=25; bgcolor = "#770"; }
+ bottom_left2 "widget/pane" { x=250; y=740; width=10; height=10; fl_x=100; fl_y=100; fl_width=25; fl_height=25; bgcolor = "#070"; }
+ bottom_right2 "widget/pane" { x=740; y=740; width=10; height=10; fl_x=100; fl_y=100; fl_width=25; fl_height=25; bgcolor = "#007"; }
+
+ // Deep interior markers.
+ top_left3 "widget/pane" { x=400; y=400; width=10; height=10; fl_x=25; fl_y=25; fl_width=100; fl_height=100; bgcolor = "#500"; }
+ top_right3 "widget/pane" { x=590; y=400; width=10; height=10; fl_x=25; fl_y=25; fl_width=100; fl_height=100; bgcolor = "#550"; }
+ bottom_left3 "widget/pane" { x=400; y=590; width=10; height=10; fl_x=25; fl_y=25; fl_width=100; fl_height=100; bgcolor = "#050"; }
+ bottom_right3 "widget/pane" { x=590; y=590; width=10; height=10; fl_x=25; fl_y=25; fl_width=100; fl_height=100; bgcolor = "#005"; }
+
+ // Center marker.
+ center "widget/pane"
+ {
+ x=450; y=450; width=100; height=100; bgcolor = "orange";
+ centerer "widget/pane" { x=25; y=25; width=50; height=50; bgcolor = "purple"; } // Debug
+ }
+
+ button "widget/textbutton"
+ {
+ x = 450; y = 380; width = 100; height = 30; font_size=16; bgcolor="#0c0447ff";
+ text = "Resize";
+ connector "widget/connector" { event=Click; target=center; action=Resize; }
+ }
+ }
\ No newline at end of file
diff --git a/centrallix-os/samples/autoscale_test2.app b/centrallix-os/samples/autoscale_test2.app
new file mode 100644
index 000000000..10b7a4cff
--- /dev/null
+++ b/centrallix-os/samples/autoscale_test2.app
@@ -0,0 +1,19 @@
+$Version=2$
+MyPage "widget/page"
+ {
+ title = "Flex Testing Page";
+ bgcolor = "black";
+ textcolor = "#00f8ff";
+ width = 1000;
+ height = 1000;
+
+ box "widget/pane"
+ {
+ x=25; y=25; width=975; height=975; bgcolor = "#111";
+
+ // Note: fl_x and fl_y seem to be ignored.
+ standard "widget/pane" { x=100; y=100; width=100; height=100; fl_x=100; fl_y=100; fl_width=100; fl_height=100; bgcolor = "orange"; }
+ big "widget/pane" { x=250; y=250; width=200; height=200; fl_x=10; fl_y=50; fl_width=10; fl_height=10; bgcolor = "purple"; }
+ double "widget/pane" { x=500; y=500; width=200; height=200; fl_x=50; fl_y=10; fl_width=50; fl_height=50; bgcolor = "green"; }
+ }
+ }
\ No newline at end of file
diff --git a/centrallix-os/samples/clock.app b/centrallix-os/samples/clock.app
index 1a2567ab3..a17ceb2af 100644
--- a/centrallix-os/samples/clock.app
+++ b/centrallix-os/samples/clock.app
@@ -14,7 +14,6 @@ main "widget/page"
shadowx = 2;
shadowy = 2;
size=1;
- moveable="true";
bold="true";
}
clock2 "widget/clock"
@@ -22,7 +21,6 @@ main "widget/page"
background="/sys/images/fade_pixelate_01.gif";
x=15; y=55; width=80; height=20;
fgcolor1="white";
- moveable="true";
bold="true";
}
clock3 "widget/clock"
@@ -33,7 +31,6 @@ main "widget/page"
fgcolor1="orange";
fgcolor2="#666666";
// size=3;
- moveable="true";
bold="true";
}
}
diff --git a/centrallix-os/samples/scrollpane_test.app b/centrallix-os/samples/scrollpane_test.app
new file mode 100644
index 000000000..31db45c6d
--- /dev/null
+++ b/centrallix-os/samples/scrollpane_test.app
@@ -0,0 +1,262 @@
+$Version=2$
+test "widget/page"
+ {
+ title = "Test App";
+ bgcolor = "#ffffff";
+
+ x = 0; y = 0;
+ width = 500; height = 500;
+
+ // Description:
+ // This page is intended for testing scroll pane functionality, including
+ // the associated events, actions, etc. It specifically tests the scroll
+ // pane when used on an HTML widget, allowing us to load long HTML pages
+ // to test scrolling large amounts of content.
+
+ pane "widget/pane"
+ {
+ x = 10; y = 10;
+ width = 480; height = 480;
+
+ scroll "widget/scrollpane"
+ {
+ x = 0; y = 20;
+ width = 300; height = 300;
+ bgcolor = "#c0f1ba";
+
+ // Content.
+ // html "widget/html"
+ // {
+ // x = 0; y = 0;
+ // width = 300; height = 300;
+
+ // mode = "dynamic";
+ // source = "/samples/html_example2_long.html";
+ // }
+
+ // Vertical content.
+ spacer "widget/pane"
+ {
+ x = 0; y = 0;
+ width = 0; height = 2000;
+ fl_height = 0;
+ style = flat;
+ }
+ a1 "widget/pane"
+ {
+ x = 10; y = 0;
+ width = 250; height = 500;
+
+ bgcolor = "#e6b2c4";
+ }
+ a2 "widget/pane"
+ {
+ x = 20; y = 500;
+ width = 200; height = 500;
+
+ bgcolor = "#e6d2c4";
+ }
+ a3 "widget/pane"
+ {
+ x = 30; y = 1000;
+ width = 150; height = 500;
+
+ bgcolor = "#e6b2c4";
+ }
+ a4 "widget/pane"
+ {
+ x = 40; y = 1500;
+ width = 100; height = 500;
+
+ bgcolor = "#e6d2c4";
+ }
+
+ // Horizontal Content.
+ // Unused because there is no horizontal scrollpane.
+ // spacer "widget/pane"
+ // {
+ // x = 0; y = 0;
+ // width = 2000; height = 0;
+ // fl_height = 0;
+ // style = flat;
+ // }
+ // a1 "widget/pane"
+ // {
+ // x = 0; y = 10;
+ // width = 500; height = 250;
+
+ // bgcolor = "#e6b2c4";
+ // }
+ // a2 "widget/pane"
+ // {
+ // x = 500; y = 20;
+ // width = 500; height = 200;
+
+ // bgcolor = "#e6d2c4";
+ // }
+ // a3 "widget/pane"
+ // {
+ // x = 1000; y = 30;
+ // width = 500; height = 150;
+
+ // bgcolor = "#e6b2c4";
+ // }
+ // a4 "widget/pane"
+ // {
+ // x = 1500; y = 40;
+ // width = 500; height = 100;
+
+ // bgcolor = "#e6d2c4";
+ // }
+
+ // Ads, testing the Scroll event.
+ adv "widget/variable" { type = integer; value = runclient(0); }
+ ad1v "widget/variable" { type = integer; value = runclient(:adv:value); }
+ ad1c "widget/connector"
+ {
+ event = Scroll;
+ target = test;
+ action = Alert;
+ event_condition = runclient(:ad1v:value == 0 and :Percent > 30 and :Change > 0);
+ Message = runclient("Advertisement!!");
+ }
+ ad1d "widget/connector"
+ {
+ event = Scroll;
+ target = ad1v;
+ action = SetValue;
+ event_condition = runclient(:ad1v:value == 0 and :Percent > 30 and :Change > 0);
+ Value = runclient(1);
+ }
+
+ ad2v "widget/variable" { type = integer; value = runclient(:adv:value); }
+ ad2c "widget/connector"
+ {
+ event = Scroll;
+ target = test;
+ action = Alert;
+ event_condition = runclient(:ad2v:value == 0 and :Percent > 40 and :Change > 0);
+ Message = runclient("Advertisement 2!!");
+ }
+ ad2d "widget/connector"
+ {
+ event = Scroll;
+ target = ad2v;
+ action = SetValue;
+ event_condition = runclient(:ad2v:value == 0 and :Percent > 40 and :Change > 0);
+ Value = runclient(1);
+ }
+
+ ad3v "widget/variable" { type = integer; value = runclient(:adv:value); }
+ ad3c "widget/connector"
+ {
+ event = Scroll;
+ target = test;
+ action = Alert;
+ event_condition = runclient(:ad3v:value == 0 and :Percent > 50 and :Change > 0);
+ Message = runclient("Advertisement 3!!");
+ }
+ ad3d "widget/connector"
+ {
+ event = Scroll;
+ target = ad3v;
+ action = SetValue;
+ event_condition = runclient(:ad3v:value == 0 and :Percent > 50 and :Change > 0);
+ Value = runclient(1);
+ }
+
+ // Log events for debugging.
+ debug_Scroll "widget/connector"
+ {
+ event = Scroll;
+ target = test;
+ action = Log;
+ Message = runclient("Scroll " + :Percent + " " + :Change);
+ }
+ debug_Wheel "widget/connector"
+ {
+ event = Wheel;
+ target = test;
+ action = Log;
+ Message = runclient("Wheel: ctrlKey=" + :ctrlKey + " shiftKey=" + :shiftKey + " altKey=" + :altKey + " metaKey=" + :metaKey + " button=" + :button);
+ }
+ debug_Click "widget/connector"
+ {
+ event = Click;
+ target = test;
+ action = Log;
+ Message = runclient("Click: ctrlKey=" + :ctrlKey + " shiftKey=" + :shiftKey + " altKey=" + :altKey + " metaKey=" + :metaKey + " button=" + :button);
+ }
+ debug_MouseDown "widget/connector"
+ {
+ event = MouseDown;
+ target = test;
+ action = Log;
+ Message = runclient("MouseDown: ctrlKey=" + :ctrlKey + " shiftKey=" + :shiftKey + " altKey=" + :altKey + " metaKey=" + :metaKey + " button=" + :button);
+ }
+ debug_MouseUp "widget/connector"
+ {
+ event = MouseUp;
+ target = test;
+ action = Log;
+ Message = runclient("MouseUp: ctrlKey=" + :ctrlKey + " shiftKey=" + :shiftKey + " altKey=" + :altKey + " metaKey=" + :metaKey + " button=" + :button);
+ }
+ debug_MouseOver "widget/connector"
+ {
+ event = MouseOver;
+ target = test;
+ action = Log;
+ Message = runclient("MouseOver");
+ }
+ debug_MouseOut "widget/connector"
+ {
+ event = MouseOut;
+ target = test;
+ action = Log;
+ Message = runclient("MouseOut");
+ }
+ debug_MouseMove "widget/connector"
+ {
+ event = MouseMove;
+ target = test;
+ action = Log;
+ Message = runclient("MouseMove");
+ }
+ }
+
+ button1 "widget/textbutton"
+ {
+ x = 5; y = 5;
+ width = 75; height = 30;
+ font_size = 18;
+
+ bgcolor="#0c0447";
+ text = "To 45%";
+
+ button1c "widget/connector"
+ {
+ event = Click;
+ target = scroll;
+ action = ScrollTo;
+ Percent = 45;
+ }
+ }
+ button2 "widget/textbutton"
+ {
+ x = 5; y = 40;
+ width = 75; height = 30;
+ font_size = 18;
+
+ bgcolor="#241672";
+ text = "To 100px";
+
+ button2c "widget/connector"
+ {
+ event = Click;
+ target = scroll;
+ action = ScrollTo;
+ Offset = 100;
+ }
+ }
+ }
+ }
\ No newline at end of file
diff --git a/centrallix-os/samples/tab_adventure.app b/centrallix-os/samples/tab_adventure.app
new file mode 100644
index 000000000..a05481949
--- /dev/null
+++ b/centrallix-os/samples/tab_adventure.app
@@ -0,0 +1,413 @@
+$Version=2$
+FourTabs "widget/page" {
+ title = "Tab Adventure";
+ bgcolor = "#c0c0c0";
+ x=0; y=0; width=250; height=300;
+
+ MainTab "widget/tab" {
+ x = 0; y = 0; width=250; height=300;
+ tab_location = none;
+
+ bgcolor = "#05091dff";
+ inactive_bgcolor = "#01010aff";
+ selected_index = 1;
+
+ Scene1 "widget/tabpage" {
+ height=300;
+ fl_width = 100;
+
+ Scene1Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="The Beginning"; }
+ Scene1Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ You wake up surounded by the ruins of a village. Houses are burned, walls are colapsed, and roves are caved in.
+ The house you're 'in' doesn't even have a roof, and barely half a wall is still standing.
+ ";
+ }
+ Scene1Ask "widget/label" { x=10; y=130; width=250; height=32; font_size=18; fgcolor="#ffc67cff"; text="What do you do?"; }
+
+ Scene1Option1 "widget/textbutton" {
+ x = 10; y = 180; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "Get up and investigate the village";
+ Scene1Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=2; }
+ }
+
+ Scene1Option2 "widget/textbutton" {
+ x = 70; y = 180; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "Look around the 'house'";
+ Scene1Option2C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=3; }
+ }
+ }
+
+ Scene2 "widget/tabpage" {
+ height=300;
+
+ Scene2Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="Exploring"; }
+ Scene2Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ You get up and begin to walk around the village. Everything is in pretty bad shape, but a lot of brick fireplaces
+ were able to survive decently well.
+ ";
+ }
+ Scene2Ask "widget/label" { x=10; y=130; width=250; height=32; font_size=18; fgcolor="#ffc67cff"; text="What do you do?"; }
+
+ Scene2Option1 "widget/textbutton" {
+ x = 10; y = 180; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "Leave the village";
+ Scene2Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=6; }
+ }
+
+ Scene2Option2 "widget/textbutton" {
+ x = 70; y = 180; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "Investigate a fireplace";
+ Scene2Option2C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=7; }
+ }
+
+ Scene2Option3 "widget/textbutton" {
+ x = 130; y = 180; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "Go back to the first house where you woke up.";
+ Scene2Option3C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=3; }
+ }
+ }
+
+ Scene3 "widget/tabpage" {
+ height=300;
+
+ Scene3Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="Look around the house"; }
+ Scene3Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ You look around the house where you woke up.
+ ";
+ }
+ Scene3Ask "widget/label" { x=10; y=130; width=250; height=32; font_size=18; fgcolor="#ffc67cff"; text=""; }
+
+ Scene3Option1 "widget/textbutton" {
+ x = 10; y = 180; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "...";
+ Scene3Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=4; }
+ }
+ }
+
+ Scene4 "widget/tabpage" {
+ height=300;
+
+ Scene4Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="Food!"; }
+ Scene4Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ You find some scraps of food and realize that you're famished!
+ The food looks pretty old, though. Maybe it's not a good idea...
+ ";
+ }
+ Scene4Ask "widget/label" { x=10; y=130; width=250; height=32; font_size=18; fgcolor="#ffc67cff"; text="What do you do?"; }
+
+ Scene4Option1 "widget/textbutton" {
+ x = 10; y = 180; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "Eat the food";
+ Scene4Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=5; }
+ }
+
+ Scene4Option2 "widget/textbutton" {
+ x = 70; y = 180; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "Leave it and check out the village";
+ Scene4Option2C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=2; }
+ }
+ }
+
+ Scene5 "widget/tabpage" {
+ height=300;
+
+ Scene5Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="Bad food..."; }
+ Scene5Text1 "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="You eat the food.";
+ }
+ Scene5Text2 "widget/label" {
+ x=10; y=90; width=250; height=80;
+ font_size=18; fgcolor="#da2d2dff";
+ text="OH NO!!";
+ }
+ Scene5Text3 "widget/label" {
+ x=10; y=120; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="You should not have done that. You feel very sick.";
+ }
+ Scene5Ask "widget/label" { x=10; y=150; width=250; height=32; font_size=18; fgcolor="#ffc67cff"; text=". . ."; }
+
+ Scene5Option1 "widget/textbutton" {
+ x = 10; y = 190; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = ". . .";
+ Scene5Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=15; }
+ }
+ }
+
+ Scene6 "widget/tabpage" {
+ height=300;
+
+ Scene6Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="FREEDOM"; }
+ Scene6Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ You leave the village. As you get further away from the depressing place, you begin to run.
+ You sprint across planes and through vallies, never looking back or missing the acursed ruins you left behind.
+ After a while, though, you suddenly fall off some kind of edge and plumit until everything goes black...
+ ";
+ }
+
+ Scene6Option1 "widget/textbutton" {
+ x = 10; y = 150; width = 75; height = 30; font_size=18; bgcolor="#1a1066ff";
+ text = "WHAT?! The writer made the world THAT small?";
+ Scene6Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=15; }
+ }
+ }
+
+ Scene7 "widget/tabpage" {
+ height=300;
+
+ Scene7Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="Fireplaces"; }
+ Scene7Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ There's several firepalces around, so you have a few options.
+ ";
+ }
+
+ Scene7Option1 "widget/textbutton" {
+ x = 10; y = 120; width = 50; height = 24; font_size=18; bgcolor="#0c0447ff";
+ text = "Sturdy Fireplace";
+ Scene7Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=8; }
+ }
+
+ Scene7Option2 "widget/textbutton" {
+ x = 10; y = 150; width = 50; height = 24; font_size=18; bgcolor="#0c0447ff";
+ text = "Leaning Fireplace";
+ Scene7Option2C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=10; }
+ }
+
+ Scene7Option3 "widget/textbutton" {
+ x = 10; y = 180; width = 50; height = 24; font_size=18; bgcolor="#0c0447ff";
+ text = "Crumbling Fireplace";
+ Scene7Option3C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=9; }
+ }
+ }
+
+ Scene8 "widget/tabpage" {
+ height=300;
+
+ Scene8Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="'Sturdy' Fireplace"; }
+ Scene8Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ You approach the sturdy fireplace and begin to investigate it. Then, you find a loose brick!
+ However, as you slowly pull it out, the entire fireplace suddenly topples over onto you.
+ Guess it wasn't so sturdy after all!!
+ ";
+ }
+
+ Scene8Option1 "widget/textbutton" {
+ x = 10; y = 150; width = 75; height = 30; font_size=18; bgcolor="#660009ff";
+ text = "The end";
+ Scene8Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=15; }
+ }
+ }
+
+ Scene9 "widget/tabpage" {
+ height=300;
+
+ Scene9Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="Crumbling Fireplace"; }
+ Scene9Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ You approach the crumbling fireplace and realize it's the one in the house where you woke up!
+ ";
+ }
+
+ Scene9Option1 "widget/textbutton" {
+ x = 10; y = 150; width = 75; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "Neat!";
+ Scene9Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=3; }
+ }
+ }
+
+ Scene10 "widget/tabpage" {
+ height=300;
+
+ Scene10Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="Leaning Fireplace"; }
+ Scene10Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ As you investigate the leaning fireplace, you find a loose brick. You carefully slide
+ the brick out, and behind it you pull out a golden scroll that seems to call to you.
+ ";
+ }
+ Scene10Ask "widget/label" { x=10; y=130; width=250; height=32; font_size=18; fgcolor="#ffc67cff"; text="What do you do?"; }
+
+ Scene10Option1 "widget/textbutton" {
+ x = 10; y = 180; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "Read it";
+ Scene10Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=11; }
+ }
+
+ Scene10Option2 "widget/textbutton" {
+ x = 70; y = 180; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "Yikes! Probably cursed. Put it down.";
+ Scene10Option2C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=2; }
+ }
+ }
+
+ Scene11 "widget/tabpage" {
+ height=300;
+
+ Scene11Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="Leaning Fireplace: Last Chance"; }
+ Scene11Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ You know, the scroll probably is cursed.
+ Reading it might not be a good idea!
+ ";
+ }
+ Scene11Ask "widget/label" { x=10; y=130; width=250; height=32; font_size=18; fgcolor="#ffc67cff"; text="What do you do?"; }
+
+ Scene11Option7 "widget/textbutton" {
+ x = 82; y = 230; width = 25; height = 15; font_size=6; fgcolor="#fcc885"; bgcolor="#580251";
+ text = "Read it anyway!";
+ Scene11Option7C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=12; }
+ }
+
+ Scene11Option1 "widget/textbutton" {
+ x = 10; y = 180; width = 50; height = 25; font_size=18; bgcolor="#0c0447ff";
+ text = "Ok, I'll go investigate the village";
+ Scene11Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=2; }
+ }
+
+ Scene11Option2 "widget/textbutton" {
+ x = 70; y = 180; width = 50; height = 25; font_size=18; bgcolor="#0c0447ff";
+ text = "Ok, I'll look around the house where I woke up.";
+ Scene11Option2C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=3; }
+ }
+
+ Scene11Option3 "widget/textbutton" {
+ x = 130; y = 180; width = 50; height = 25; font_size=18; bgcolor="#0c0447ff";
+ text = "Ok, I'll go to the sturdy fireplace.";
+ Scene11Option3C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=8; }
+ }
+
+ Scene11Option4 "widget/textbutton" {
+ x = 10; y = 220; width = 50; height = 25; font_size=18; bgcolor="#0c0447ff";
+ text = "Ok, I'll leave the village.";
+ Scene11Option4C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=6; }
+ }
+
+ Scene11Option5 "widget/textbutton" {
+ x = 70; y = 220; width = 50; height = 25; font_size=18; bgcolor="#1f0757bb";
+ text = "Ok, knock myself out.";
+ Scene11Option5C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=1; }
+ }
+
+ Scene11Option6 "widget/textbutton" {
+ x = 130; y = 220; width = 50; height = 25; font_size=18; bgcolor="#3e0655ff";
+ text = "Ok, I'll die.";
+ Scene11Option6C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=15; }
+ }
+ }
+
+ Scene12 "widget/tabpage" {
+ height=300;
+
+ Scene12Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="You really shouldn't read that!"; }
+ Scene12Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ What? How did you do that! You're not supposed to do that!
+ ";
+ }
+
+ Scene12Option1 "widget/textbutton" {
+ x = 10; y = 120; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "JUST LET ME READ THE SCROLL!!!";
+ Scene12Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=13; }
+ }
+ }
+
+
+ Scene13 "widget/tabpage" {
+ height=300;
+
+ Scene13Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="VICTORY"; }
+ Scene13Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ Ok... fine. You found the golden scroll and won the game.
+ Look, I had to make it at least a little bit difficult for you!
+ ";
+ }
+
+ Scene13Option1 "widget/textbutton" {
+ x = 10; y = 120; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "Yay!";
+ Scene13Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=14; }
+ }
+ }
+
+
+ Scene14 "widget/tabpage" {
+ height=300;
+
+ Scene14Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#fff1df"; text="The End"; }
+ Scene14Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ Ok... fine. You found the golden scroll and won the game.
+ Just thought I'd see if I could trick you there hahahah.
+ ";
+ }
+
+ Scene14Text2 "widget/label" {
+ x=10; y=120; width=250; height=80;
+ font_size=18; fgcolor="#d9e97dff";
+ text="
+ Thank you for playing!
+ ";
+ }
+ }
+
+ Scene15 "widget/tabpage" {
+ height=300;
+
+ Scene15Title "widget/label" { x=10; y=10; width=250; height=32; font_size=32; fgcolor="#ff001c"; text="DEATH"; }
+ Scene15Text "widget/label" {
+ x=10; y=50; width=250; height=80;
+ font_size=18; fgcolor="#fff1df";
+ text="
+ You died... Let's call this a learning experience.
+ Better luck next time.
+ ";
+ }
+ Scene15Ask "widget/label" { x=10; y=130; width=250; height=32; font_size=18; fgcolor="#ffc67cff"; text="What do you do?"; }
+
+ Scene15Option1 "widget/textbutton" {
+ x = 10; y = 180; width = 50; height = 30; font_size=18; bgcolor="#0c0447ff";
+ text = "Try again?";
+ Scene15Option1C "widget/connector" { event=Click; target=MainTab; action=SetTab; TabIndex=1; }
+ }
+
+ Scene15Option2 "widget/textbutton" { x = 70; y = 180; width = 50; height = 30; font_size=18; bgcolor="#470404ff"; text = "Give up"; }
+ }
+ }
+}
diff --git a/centrallix-os/samples/tab_features.app b/centrallix-os/samples/tab_features.app
new file mode 100644
index 000000000..23f4c448c
--- /dev/null
+++ b/centrallix-os/samples/tab_features.app
@@ -0,0 +1,698 @@
+$Version=2$
+tab_features "widget/page"
+ {
+ x = 0; y = 0;
+ width = 500; height = 500;
+
+ title = "Tab Features Demonstrated";
+ bgcolor = "#b0b0b0";
+
+ // Render values (used by the buttons below)
+ tloc "widget/parameter" { type = "string"; default = "top"; }
+ w "widget/parameter" { type = "integer"; default = 220; }
+ h "widget/parameter" { type = "integer"; default = 70; }
+ tab_w "widget/parameter" { type = "integer"; default = null; }
+ tab_h "widget/parameter" { type = "integer"; default = null; }
+
+ tloc_label "widget/label"
+ {
+ x = 2; y = 1;
+ width = 50; height = 20;
+ font_size = 16;
+
+ text = "Tab Location:";
+ }
+
+ button_top "widget/textbutton"
+ {
+ x = 55; y = 1;
+ width = 27; height = 18;
+ font_size = 10;
+
+ text = "Top";
+ bgcolor="#0c0447ff";
+
+ button_top_c "widget/connector"
+ {
+ event = Click;
+ target = tab_features;
+ action = LoadPage;
+ Source = "tab_features.app?tloc=top&w=220&h=70";
+ }
+ }
+
+ button_bottom "widget/textbutton"
+ {
+ x = 85; y = 1;
+ width = 27; height = 18;
+ font_size = 10;
+
+ text = "Bottom";
+ bgcolor="#0c0447ff";
+
+ button_bottom_c "widget/connector"
+ {
+ event = Click;
+ target = tab_features;
+ action = LoadPage;
+ Source = "tab_features.app?tloc=bottom&w=220&h=70";
+ }
+ }
+
+ button_left "widget/textbutton"
+ {
+ x = 115; y = 1;
+ width = 27; height = 18;
+ font_size = 10;
+
+ text = "Left";
+ bgcolor="#0c0447ff";
+
+ button_left_c "widget/connector"
+ {
+ event = Click;
+ target = tab_features;
+ action = LoadPage;
+ Source = "tab_features.app?tloc=left&w=140&h=90&tab_w=80";
+ }
+ }
+
+ button_right "widget/textbutton"
+ {
+ x = 145; y = 1;
+ width = 27; height = 18;
+ font_size = 10;
+
+ text = "Right";
+ bgcolor="#0c0447ff";
+
+ button_right_c "widget/connector"
+ {
+ event = Click;
+ target = tab_features;
+ action = LoadPage;
+ Source = "tab_features.app?tloc=right&w=140&h=90&tab_w=80";
+ }
+ }
+
+ t1 "widget/tab"
+ {
+ x = 0; y = 20;
+ height = 500; width = 500;
+
+ bgcolor = "#c0c0c0";
+ inactive_bgcolor = "#a8a8a8";
+ selected_index = 2;
+ tab_location = top;
+ select_translate_out = 1;
+
+ t11 "widget/tabpage"
+ {
+ title = "Spacing Rant";
+
+ t11l0 "widget/label" { x=20; y=20; width=200; height=40; font_size=24; text="Spacing Rant"; }
+
+ t11t1 "widget/tab"
+ {
+ x = 20; y = 60;
+ width = runserver(:this:w); height = 100;
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif"; // "/sys/images/4Color.png"
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected_index = 2;
+
+ t11t11 "widget/tabpage" { title = "Tab 1"; t11t11l "widget/label" { x=10; y=10; width=100; height=32; style=bold; text="10px X 10px"; } }
+ t11t12 "widget/tabpage" { title = "Tab 2"; t11t12l "widget/label" { x=20; y=30; width=100; height=32; style=bold; text="20px X 30px"; } }
+ t11t13 "widget/tabpage" { title = "Tab 3"; t11t13l "widget/label" { x=30; y=50; width=100; height=32; style=bold; text="30px X 50px"; } }
+ t11t14 "widget/tabpage" { title = "Tab 4"; t11t14l "widget/label" { x=40; y=70; width=100; height=32; style=bold; text="40px X 70px"; } }
+
+ t11t1c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t11t2;
+ TabIndex = runclient(:t11t1:selected_index);
+ }
+ }
+
+ t11t2 "widget/tab"
+ {
+ x = 260; y = 60;
+ width = runserver(:this:w); height = 100;
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ bgcolor = "#c0c0c0";
+ inactive_bgcolor = "#b8b8b8";
+ selected = t11t22;
+
+ t11t21 "widget/tabpage" { title = "Tab 1"; t11t21l "widget/label" { x=10; y=10; width=100; height=32; style=bold; text="10px X 10px"; } }
+ t11t22 "widget/tabpage" { title = "Tab 2"; t11t22l "widget/label" { x=20; y=30; width=100; height=32; style=bold; text="20px X 30px"; } }
+ t11t23 "widget/tabpage" { title = "Tab 3"; t11t23l "widget/label" { x=30; y=50; width=100; height=32; style=bold; text="30px X 50px"; } }
+ t11t24 "widget/tabpage" { title = "Tab 4"; t11t24l "widget/label" { x=40; y=70; width=100; height=32; style=bold; text="40px X 70px"; } }
+
+ t11t2c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t11t1;
+ TabIndex = runclient(:t11t2:selected_index);
+ }
+ }
+
+ t11p "widget/pane"
+ {
+ x = 20; y = 180; width=runserver(:this:w); height=100;
+
+ t11p1l "widget/label" { x=10; y=10; width=100; height=32; style=bold; text="10px X 10px"; }
+ t11p2l "widget/label" { x=20; y=30; width=100; height=32; style=bold; text="20px X 30px"; }
+ t11p3l "widget/label" { x=30; y=50; width=100; height=32; style=bold; text="30px X 50px"; }
+ t11p4l "widget/label" { x=40; y=70; width=100; height=32; style=bold; text="40px X 70px"; }
+ }
+ }
+
+ t12 "widget/tabpage"
+ {
+ title = "Tab Spacing";
+
+ t12l0 "widget/label" { x=20; y=20; width=400; height=40; font_size=24; text="Tab Spacing"; }
+
+ t12l1 "widget/label" { x=30; y=75; width=runserver(:this:w-20); height=40; font_size=16; style="bold"; text="Default (2px)"; }
+ t12t1 "widget/tab"
+ {
+ x = 20; y = 100;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected_index = 2;
+
+ t12t11 "widget/tabpage" { title = "First"; t12t11l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab One"; } }
+ t12t12 "widget/tabpage" { title = "Looong Tab"; t12t12l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Two"; } }
+ t12t13 "widget/tabpage" { title = "S"; t12t13l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Three"; } }
+ t12t14 "widget/tabpage" { title = "Last Tab"; t12t14l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Four"; } }
+
+ t12t1c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t12t2;
+ TabIndex = runclient(:t12t1:selected_index);
+ }
+ }
+
+ t12l2 "widget/label" { x=270; y=75; width=runserver(:this:w-20); height=40; font_size=16; style="bold"; text="No Tab Spacing"; }
+ t12t2 "widget/tab"
+ {
+ x = 260; y = 100;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected = t12t22;
+ tab_spacing = 0;
+
+ t12t21 "widget/tabpage" { title = "First"; t12t21l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label One"; } }
+ t12t22 "widget/tabpage" { title = "Looong Tab"; t12t22l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Two"; } }
+ t12t23 "widget/tabpage" { title = "S"; t12t23l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Three"; } }
+ t12t24 "widget/tabpage" { title = "Last Tab"; t12t24l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Four"; } }
+
+ t12t2c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t12t3;
+ TabIndex = runclient(:t12t2:selected_index);
+ }
+ }
+
+ t12l3 "widget/label" { x=30; y=215; width=runserver(:this:w-20); height=40; font_size=16; style="bold"; text="Tab Spacing 8px"; }
+ t12t3 "widget/tab"
+ {
+ x = 20; y = 240;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected_index = 2;
+ tab_spacing = 8;
+
+ t12t31 "widget/tabpage" { title = "First"; t12t31l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab One"; } }
+ t12t32 "widget/tabpage" { title = "Looong Tab"; t12t32l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Two"; } }
+ t12t33 "widget/tabpage" { title = "S"; t12t33l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Three"; } }
+ t12t34 "widget/tabpage" { title = "Last Tab"; t12t34l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Four"; } }
+
+ t12t3c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t12t4;
+ TabIndex = runclient(:t12t3:selected_index);
+ }
+ }
+
+ t12l4 "widget/label" { x=270; y=215; width=runserver(:this:w-20); height=40; font_size=16; style="bold"; text="Tab Spacing 16px"; }
+ t12t4 "widget/tab"
+ {
+ x = 260; y = 240;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected = t12t42;
+ tab_spacing = 16;
+
+ t12t41 "widget/tabpage" { title = "First"; t12t41l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label One"; } }
+ t12t42 "widget/tabpage" { title = "Looong Tab"; t12t42l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Two"; } }
+ t12t43 "widget/tabpage" { title = "S"; t12t43l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Three"; } }
+ t12t44 "widget/tabpage" { title = "Last Tab"; t12t44l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Four"; } }
+
+ t12t4c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t12t5;
+ TabIndex = runclient(:t12t4:selected_index);
+ }
+ }
+
+ t12l5 "widget/label" { x=30; y=355; width=60; height=20; fl_width = 1; font_size=16; style="bold"; text="Tab Spacing -8px"; }
+ t12l5a "widget/label" { x=90; y=357; width=runserver(:this:w-80); height=15; font_size=12; style="bold"; fgcolor="red"; text="(Negative values not recomended)"; }
+ t12t5 "widget/tab"
+ {
+ x = 20; y = 380;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected_index = 2;
+ tab_spacing = -8;
+
+ t12t51 "widget/tabpage" { title = "First"; t12t51l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab One"; } }
+ t12t52 "widget/tabpage" { title = "Looong Tab"; t12t52l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Two"; } }
+ t12t53 "widget/tabpage" { title = "S"; t12t53l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Three"; } }
+ t12t54 "widget/tabpage" { title = "Last Tab"; t12t54l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Four"; } }
+
+ t12t5c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t12t6;
+ TabIndex = runclient(:t12t5:selected_index);
+ }
+ }
+
+ t12l6 "widget/label" { x=270; y=355; width=70; height=20; fl_width = 1; font_size=16; style="bold"; text="Tab Spacing -16px"; }
+ t12l6a "widget/label" { x=345; y=357; width=runserver(:this:w-70); height=15; font_size=12; style="bold"; fgcolor="red"; text="(Negative values not recomended)"; }
+ t12t6 "widget/tab"
+ {
+ x = 260; y = 380;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected = t12t62;
+ tab_spacing = -16;
+
+ t12t61 "widget/tabpage" { title = "First"; t12t61l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label One"; } }
+ t12t62 "widget/tabpage" { title = "Looong Tab"; t12t62l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Two"; } }
+ t12t63 "widget/tabpage" { title = "S"; t12t63l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Three"; } }
+ t12t64 "widget/tabpage" { title = "Last Tab"; t12t64l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Four"; } }
+
+ t12t6c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t12t1;
+ TabIndex = runclient(:t12t6:selected_index);
+ }
+ }
+ }
+
+ t13 "widget/tabpage"
+ {
+ title = "Tab Height";
+
+ t13l0 "widget/label" { x=20; y=20; width=400; height=40; font_size=24; text="Tab Height"; }
+
+ t13l1 "widget/label" { x=30; y=75; width=runserver(:this:w-20); height=40; font_size=16; style="bold"; text="Default (24px)"; }
+ t13t1 "widget/tab"
+ {
+ x = 20; y = 100;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected_index = 2;
+
+ t13t11 "widget/tabpage" { title = "First"; t13t11l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab One"; } }
+ t13t12 "widget/tabpage" { title = "Looong Tab"; t13t12l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Two"; } }
+ t13t13 "widget/tabpage" { title = "S"; t13t13l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Three"; } }
+ t13t14 "widget/tabpage" { title = "Last Tab"; t13t14l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Four"; } }
+
+ t13t1c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t13t3;
+ TabIndex = runclient(:t13t1:selected_index);
+ }
+ }
+
+ t13l2 "widget/label" { x=270; y=75; width=runserver(:this:w-20); height=40; font_size=16; style="bold"; text="No Tab Height"; }
+ t13l2a "widget/label"
+ {
+ x = 270; y = 110;
+ width = runserver(:this:w-20); height = runserver(:this:h - 20);
+ font_size = 24; style = bold; fgcolor = "red";
+ text = "Not allowed";
+ }
+
+ t13l2b "widget/label"
+ {
+ x = 270; y = 140;
+ width = runserver(:this:w-20); height = 30;
+ font_size = 18; style = italic; fgcolor = "red";
+ text = "Because I hate fun.";
+ }
+
+ t13l3 "widget/label" { x=30; y=215; width=runserver(:this:w-20); height=40; font_size=16; style="bold"; text="Tab Height 32px"; }
+ t13t3 "widget/tab"
+ {
+ x = 20; y = 240;
+ width = runserver(:this:w); height = runserver(:this:h - 12);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = 32;
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected_index = 2;
+ tab_height = 32;
+
+ t13t31 "widget/tabpage" { title = "First"; t13t31l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab One"; } }
+ t13t32 "widget/tabpage" { title = "Looong Tab"; t13t32l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Two"; } }
+ t13t33 "widget/tabpage" { title = "S"; t13t33l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Three"; } }
+ t13t34 "widget/tabpage" { title = "Last Tab"; t13t34l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Four"; } }
+
+ t13t3c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t13t4;
+ TabIndex = runclient(:t13t3:selected_index);
+ }
+ }
+
+ t13l4 "widget/label" { x=270; y=215; width=runserver(:this:w-20); height=40; font_size=16; style="bold"; text="Tab Height 48px"; }
+ t13t4 "widget/tab"
+ {
+ x = 260; y = 240;
+ width = runserver(:this:w); height = runserver(:this:h - 12);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = 48;
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected = t13t42;
+ tab_height = 48;
+
+ t13t41 "widget/tabpage" { title = "First"; t13t41l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label One"; } }
+ t13t42 "widget/tabpage" { title = "Looong Tab"; t13t42l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Two"; } }
+ t13t43 "widget/tabpage" { title = "S"; t13t43l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Three"; } }
+ t13t44 "widget/tabpage" { title = "Last Tab"; t13t44l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Four"; } }
+
+ t13t4c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t13t5;
+ TabIndex = runclient(:t13t4:selected_index);
+ }
+ }
+
+ t13l5 "widget/label" { x=30; y=355; width=60; height=20; font_size=16; style="bold"; text="Tab Height 16px"; }
+ t13t5 "widget/tab"
+ {
+ x = 20; y = 380;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = 16;
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected_index = 2;
+ tab_height = 16;
+
+ t13t51 "widget/tabpage" { title = "First"; t13t51l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab One"; } }
+ t13t52 "widget/tabpage" { title = "Looong Tab"; t13t52l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Two"; } }
+ t13t53 "widget/tabpage" { title = "S"; t13t53l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Three"; } }
+ t13t54 "widget/tabpage" { title = "Last Tab"; t13t54l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Four"; } }
+
+ t13t5c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t13t6;
+ TabIndex = runclient(:t13t5:selected_index);
+ }
+ }
+
+ t13l6 "widget/label" { x=270; y=355; width=60; height=20; font_size=16; style="bold"; text="Tab Spacing 8px"; }
+ t13t6 "widget/tab"
+ {
+ x = 260; y = 380;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = 8;
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected = t13t62;
+ tab_height = 8;
+
+ t13t61 "widget/tabpage" { title = "First"; t13t61l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label One"; } }
+ t13t62 "widget/tabpage" { title = "Looong Tab"; t13t62l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Two"; } }
+ t13t63 "widget/tabpage" { title = "S"; t13t63l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Three"; } }
+ t13t64 "widget/tabpage" { title = "Last Tab"; t13t64l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Four"; } }
+
+ t13t6c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t13t1;
+ TabIndex = runclient(:t13t6:selected_index);
+ }
+ }
+ }
+
+
+ t14 "widget/tabpage"
+ {
+ title = "Selection Offsets";
+
+ t14l0 "widget/label" { x=20; y=20; width=400; height=40; font_size=24; text="Selection Offsets"; }
+
+ t14l1 "widget/label" { x=30; y=75; width=220; height=40; font_size=16; style="bold"; text="Default"; }
+ t14t1 "widget/tab"
+ {
+ x = 20; y = 100;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected_index = 2;
+
+ t14t11 "widget/tabpage" { title = "First"; t14t11l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab One"; } }
+ t14t12 "widget/tabpage" { title = "Looong Tab"; t14t12l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Two"; } }
+ t14t13 "widget/tabpage" { title = "S"; t14t13l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Three"; } }
+ t14t14 "widget/tabpage" { title = "Last Tab"; t14t14l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Four"; } }
+
+ t14t1c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t14t2;
+ TabIndex = runclient(:t14t1:selected_index);
+ }
+ }
+
+ t14l2 "widget/label" { x=270; y=75; width=220; height=40; font_size=16; style="bold"; text="No Translation"; }
+ t14t2 "widget/tab"
+ {
+ x = 260; y = 100;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected = t14t22;
+ select_translate_along = 0;
+ select_translate_out = 0;
+
+ t14t21 "widget/tabpage" { title = "First"; t14t21l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label One"; } }
+ t14t22 "widget/tabpage" { title = "Looong Tab"; t14t22l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Two"; } }
+ t14t23 "widget/tabpage" { title = "S"; t14t23l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Three"; } }
+ t14t24 "widget/tabpage" { title = "Last Tab"; t14t24l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Four"; } }
+
+ t14t2c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t14t3;
+ TabIndex = runclient(:t14t2:selected_index);
+ }
+ }
+
+ t14l3 "widget/label" { x=30; y=215; width=220; height=40; font_size=16; style="bold"; text="Along 8"; }
+ t14t3 "widget/tab"
+ {
+ x = 20; y = 240;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected_index = 2;
+ select_translate_along = 8;
+ select_translate_out = 0;
+
+ t14t31 "widget/tabpage" { title = "First"; t14t31l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab One"; } }
+ t14t32 "widget/tabpage" { title = "Looong Tab"; t14t32l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Two"; } }
+ t14t33 "widget/tabpage" { title = "S"; t14t33l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Three"; } }
+ t14t34 "widget/tabpage" { title = "Last Tab"; t14t34l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Four"; } }
+
+ t14t3c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t14t4;
+ TabIndex = runclient(:t14t3:selected_index);
+ }
+ }
+
+ t14l4 "widget/label" { x=270; y=215; width=220; height=40; font_size=16; style="bold"; text="Out 8"; }
+ t14t4 "widget/tab"
+ {
+ x = 260; y = 240;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected = t14t42;
+ select_translate_along = 0;
+ select_translate_out = 8;
+
+ t14t41 "widget/tabpage" { title = "First"; t14t41l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label One"; } }
+ t14t42 "widget/tabpage" { title = "Looong Tab"; t14t42l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Two"; } }
+ t14t43 "widget/tabpage" { title = "S"; t14t43l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Three"; } }
+ t14t44 "widget/tabpage" { title = "Last Tab"; t14t44l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Four"; } }
+
+ t14t4c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t14t5;
+ TabIndex = runclient(:t14t4:selected_index);
+ }
+ }
+
+ t14l5 "widget/label" { x=30; y=355; width=30; height=40; font_size=16; style="bold"; text="Along -8"; }
+ t14l5a "widget/label" { x=67; y=357; width=100; height=40; font_size=12; style="bold"; fgcolor="red"; text="(Negative values not recomended)"; }
+ t14t5 "widget/tab"
+ {
+ x = 20; y = 380;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected_index = 2;
+ select_translate_along = -8;
+ select_translate_out = 0;
+
+ t14t51 "widget/tabpage" { title = "First"; t14t51l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab One"; } }
+ t14t52 "widget/tabpage" { title = "Looong Tab"; t14t52l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Two"; } }
+ t14t53 "widget/tabpage" { title = "S"; t14t53l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Three"; } }
+ t14t54 "widget/tabpage" { title = "Last Tab"; t14t54l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Tab Four"; } }
+
+ t14t5c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t14t6;
+ TabIndex = runclient(:t14t5:selected_index);
+ }
+ }
+
+ t14l6 "widget/label" { x=270; y=355; width=30; height=40; font_size=16; style="bold"; text="Out -8"; }
+ t14l6a "widget/label" { x=307; y=357; width=100; height=40; font_size=12; style="bold"; fgcolor="red"; text="(Negative values not recomended)"; }
+ t14t6 "widget/tab"
+ {
+ x = 260; y = 380;
+ width = runserver(:this:w); height = runserver(:this:h);
+ tab_location = runserver(:this:tloc);
+ tab_width = runserver(:this:tab_w);
+ tab_height = runserver(:this:tab_h);
+
+ background = "/sys/images/slate2.gif";
+ inactive_background = "/sys/images/slate2_dark.gif";
+ selected = t14t62;
+ select_translate_along = 0;
+ select_translate_out = -8;
+
+ t14t61 "widget/tabpage" { title = "First"; t14t61l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label One"; } }
+ t14t62 "widget/tabpage" { title = "Looong Tab"; t14t62l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Two"; } }
+ t14t63 "widget/tabpage" { title = "S"; t14t63l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Three"; } }
+ t14t64 "widget/tabpage" { title = "Last Tab"; t14t64l "widget/label" { x=10; y=10; width=100; height=32; font_size=18; fgcolor="#00065f"; text="Label Four"; } }
+
+ t14t6c "widget/connector"
+ {
+ event = TabChanged;
+ action = SetTab;
+ target = t14t1;
+ TabIndex = runclient(:t14t6:selected_index);
+ }
+ }
+ }
+ }
+ }
diff --git a/centrallix-os/sys/js/ht_geom_dom1html.js b/centrallix-os/sys/js/ht_geom_dom1html.js
index b8c17ab7d..0ebc5afc8 100644
--- a/centrallix-os/sys/js/ht_geom_dom1html.js
+++ b/centrallix-os/sys/js/ht_geom_dom1html.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2006 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -11,6 +11,39 @@
// Cross browser Geometry DOM1HTML
+// Add some useful functions to Math that will be needed elsewhere.
+Math.clamp = (min, val, max) => Math.min(Math.max(min, val), max);
+Math.isBetween = (lowerBound, num, upperBound) => (lowerBound < num && num < upperBound);
+
+/*** Whether to enable noclip (which disables generation of clipping CSS) by
+ *** default. This requires code to explicitly call enableClippingCSS() to
+ *** generate clipping CSS.
+ ***/
+const default_noclip_value = true;
+
+/*** Experimental system for turning off clipping CSS.
+ *** The clip values are still stored and can be queried
+ *** for legacy compatibility, but they will not output
+ *** any clip rectangles or clip paths in the CSS or HTML.
+ ***/
+/** Ensure clipping is disabled for a layer / HTML node. **/
+function disableClippingCSS(l)
+ {
+ l.clip.noclip = true;
+ updateClippingCSS(l);
+ }
+/** Ensure clipping is enabled for a layer / HTML node. **/
+function enableClippingCSS(l)
+ {
+ l.clip.noclip = false;
+ updateClippingCSS(l);
+ }
+/** Update clipping without changing any specific values. **/
+function updateClippingCSS(l)
+ {
+ setClipTop(l, getClipTop(l));
+ }
+
// Clip Width
function getClipWidth(l)
{
@@ -18,13 +51,13 @@ function getClipWidth(l)
}
function setClipWidth(l, value)
- {
+ {
l.clip.width = value;
}
// Clip Height
function getClipHeight(l)
- {
+ {
return l.clip.height;
}
@@ -34,7 +67,7 @@ function getRuntimeClipHeight(l)
}
function setClipHeight(l, value)
- {
+ {
l.clip.height = value;
}
@@ -207,43 +240,184 @@ function getpageYOffset()
return window.pageYOffset;
}
-function getRelativeX(l)
+/*** Get the size of a DOM node's parent container.
+ ***
+ *** @param l The DOM node.
+ *** @returns The width and height of the parent container.
+ ***/
+function getParentSize(l)
{
- if (l.__pg_left != null) return l.__pg_left;
- var left = parseInt(pg_get_style(l,'left'));
- l.__pg_left = isNaN(left)?0:left;
- return l.__pg_left;
+ const parentRect = l.parentNode.getBoundingClientRect();
+ return { width: parentRect.width, height: parentRect.height };
}
-function setRelativeX(l, value)
+/*** Get the width of a DOM node's parent container.
+ ***
+ *** @param l The DOM node.
+ *** @returns The width of the parent container.
+ ***/
+function getParentW(l)
{
- pg_set_style(l,'left',(l.__pg_left = parseInt(value)));
- return l.__pg_left;
+ return getParentSize(l).width;
}
-function getRelativeY(l)
+/*** Get the height of a DOM node's parent container.
+ ***
+ *** @param l The DOM node.
+ *** @returns The height of the parent container.
+ ***/
+function getParentH(l)
{
- if (l.__pg_top != null) return l.__pg_top;
- return (l.__pg_top = parseInt(pg_get_style(l,'top')));
+ return getParentSize(l).height;
}
-function setRelativeY(l, value)
+
+/*** Problem:
+ *** If the programmer calls setRelativeX() (or a similar function, such as moveTo() or moveBy()),
+ *** they might be using a value they got from the server, based on the resolution when the page
+ *** was first loaded. However, they might also be using a value they got dynamically by calling
+ *** some function to check the actual size of an element. Previously, this distinction did not
+ *** matter because these values would be the same. However, now that pages can be resized on the
+ *** client, it does matter.
+ ***/
+
+
+/*** We ignore the current value of __pg_left in the following functions even
+ *** though it might be correct and faster than querying the DOM. However, the
+ *** layout may have changed since last time, so we always requery the DOM.
+ ***/
+function getRelative(l, d)
{
- pg_set_style(l,'top',(l.__pg_top = parseInt(value)));
- return l.__pg_top;
- }
+ if (!l)
+ {
+ console.error(`Call to getRelative${d.toUpperCase()}(`, l, ')');
+ return 0;
+ }
+
+ const val = parseInt(pg_get_style(l, d, NaN), 10);
+ return l['__pg_' + d] = (isNaN(val)) ? 0 : val;
+ }
+
+function getRelativeX(l) { return getRelative(l, 'left'); }
+function getRelativeY(l) { return getRelative(l, 'top'); }
+function getRelativeW(l) { return getRelative(l, 'width'); }
+function getRelativeH(l) { return getRelative(l, 'height'); }
+
+/*** Sets the location of a DOM node relative to its parent container.
+ ***
+ *** @param l The DOM node being set. (Assumed to be defined.)
+ *** @param value The new location. This can be a CSS string.
+ *** @param {'left'|'top'|'width'|'height'} d The dimension being set.
+ ***/
+function setRelative(l, value, d)
+ {
+ /** Convert the value to a number, if possible. **/
+ const parsedValue = parseInt(value);
+ if (!isNaN(parsedValue)) value = parsedValue;
+
+ pg_set_style(l, d, value);
+ l['__pg_' + d + '_style'] = value;
+ return l['__pg_' + d] = parseInt(pg_get_style(l, d));
+ }
+
+function setRelativeX(l, value) { return setRelative(l, value, 'left'); }
+function setRelativeY(l, value) { return setRelative(l, value, 'top'); }
+function setRelativeW(l, value) { return setRelative(l, value, 'width'); }
+function setRelativeH(l, value) { return setRelative(l, value, 'height'); }
+
+/*** Sets a dimension of a DOM element using coordinates in the server
+ *** generated adaptive layout. It is RECOMMENDED to call a specific sub-
+ *** function (aka. setResponsiveX(), setResponsiveY(), etc.) instead of
+ *** calling this function directly to avoid passing dimension directly.
+ ***
+ *** WARNING: Ensure that any value passed is calculated ENTIRELY using
+ *** values from the server (e.g. widget properties) and no values from
+ *** real page dimensions are used, as these change when the page is
+ *** resized after being loaded for the first time.
+ ***
+ *** @param l The DOM node being set. (Assumed to be defined.)
+ *** @param value The new location in server-side px. This value must be
+ *** parseable as a number.
+ *** @param {'x'|'y'|'w'|'h'} d The letter for the dimension being set.
+ ***/
+function setResponsive(l, value, d) {
+ /** Convert the value to a number, if possible. **/
+ const parsedValue = parseInt(value);
+ if (!isNaN(parsedValue)) value = parsedValue;
+
+ /** Server-layout values are always numbers. **/
+ if (typeof(value) !== 'number')
+ {
+ console.warn(`setResponsive(${l.id}, ?, '${d}'): Expected value to be a parseable number but got:`, value);
+ return value;
+ }
+
+ /** The flexibility specified by the server. **/
+ var fl_scale = l['__fl_scale_' + d] ?? wgtrGetServerProperty(l, 'fl_scale_' + d);
+ if (fl_scale == undefined || fl_scale == null)
+ {
+ /** The server did not specify a flexibility, even though one was expected. **/
+ const warningMsg = 'setResponsive() - FAIL: Missing ' + ((wgtrIsNode(l)) ? 'wgtr.' : '__') + 'fl_scale_' + d;
+ console.warn(warningMsg, l);
+ fl_scale = 0;
+ }
+
+ /** Inflexible elements don't need to be responsive. **/
+ if (fl_scale <= 0) return setRelative(l, value, d);
+
+ /** The parent width expected by the server in the adaptive layout. **/
+ var d2 = d;
+ if (d2 == 'x') d2 = 'w';
+ if (d2 == 'y') d2 = 'h';
+ var fl_parent = l['__fl_parent_' + d2] ?? wgtrGetServerProperty(l, 'fl_parent_' + d2);
+ if (fl_parent == undefined || fl_parent == null)
+ {
+ /** I wonder if anyone reviewers will see this: Easter egg #7. **/
+ const warningMsg = 'setResponsive() - FAIL: Missing ' + ((wgtrIsNode(l)) ? 'wgtr.' : '__') + 'fl_parent_' + d2;
+ console.warn(warningMsg, l);
+ }
+
+ /** Generate and set the CSS. **/
+ const css = `calc(${value}px + (100% - ${fl_parent}px) * ${fl_scale})`;
+ const prop = { x:'left', y:'top', w:'width', h:'height' }[d];
+ return setRelative(l, css, prop);
+}
+
+/** Call these functions instead of calling setResponsive() directly, which leads to less readable code. **/
+function setResponsiveX(l, value) { return setResponsive(l, value, 'x'); }
+function setResponsiveY(l, value) { return setResponsive(l, value, 'y'); }
+function setResponsiveW(l, value) { return setResponsive(l, value, 'w'); }
+function setResponsiveH(l, value) { return setResponsive(l, value, 'h'); }
+
+/** Moves a DOM node to a location within the window. **/
function moveToAbsolute(l, x, y)
{
setPageX(l,x);
setPageY(l,y);
}
-function moveTo(l, x, y)
+/*** Moves a DOM node to a location inside it's parent container.
+ ***
+ *** @param l The DOM node being moved.
+ *** @param x The new x coordinate. Can be a CSS string (if responsive is false).
+ *** @param y The new y coordinate. Can be a CSS string (if responsive is false).
+ *** @param responsive Whether the given coordinates should be treated as
+ *** adaptive, 'server-side', coordinates where setResponsive()
+ *** should be invoked to give them responsive design.
+ ***/
+function moveTo(l, x, y, responsive = false)
{
- //pg_set_style_string(this,'position','absolute');
- setRelativeX(l,x);
- setRelativeY(l,y);
+ if (responsive)
+ {
+ setResponsiveX(l, x);
+ setResponsiveY(l, y);
+ }
+ else
+ {
+ setRelativeX(l, x);
+ setRelativeY(l, y);
+ }
}
@@ -329,7 +503,8 @@ function ClipObject_SetAll(top,right,bottom,left)
+ bottom + "px, "
+ left + "px)";
this.arr = {1:top,2:right,3:bottom,4:left};
- this.obj.style.setProperty('clip',str,"");
+ if (!this.hasOwnProperty('noclip')) this.noclip = default_noclip_value;
+ this.obj.style.setProperty('clip', (this.noclip) ? "" : str);
}
var ClipRegexp = /rect\((.*), (.*), (.*), (.*)\)/;
@@ -367,92 +542,55 @@ function ClipObject_GetPart(n)
function ClipObject(o)
{
this.obj = o;
-
+
this.setall = ClipObject_SetAll;
this.getpart = ClipObject_GetPart;
}
-ClipObject.prototype.__defineGetter__("top", function ()
- {
- return this.getpart(1);
- }
- );
-
-ClipObject.prototype.__defineGetter__("right", function ()
- {
- return this.getpart(2);
- }
- );
-
-ClipObject.prototype.__defineGetter__("width", function ()
- {
- return this.right - this.left;
- }
- );
-
-ClipObject.prototype.__defineGetter__("bottom", function ()
- {
- return this.getpart(3);
- }
- );
-
-ClipObject.prototype.__defineGetter__("height", function ()
- {
- return this.bottom - this.top;
- }
- );
-
-ClipObject.prototype.__defineGetter__("left", function ()
- {
- return this.getpart(4);
- }
- );
-
-ClipObject.prototype.__defineSetter__("top", function (val)
- {
- this.setall(val,this.right,this.bottom,this.left);
- }
- );
-
-ClipObject.prototype.__defineSetter__("right", function (val)
- {
- this.setall(this.top,val,this.bottom,this.left);
- }
- );
-
-ClipObject.prototype.__defineSetter__("width", function (val)
- {
- this.right = this.left + val;
- }
- );
-
-ClipObject.prototype.__defineSetter__("bottom", function (val)
- {
- this.setall(this.top,this.right,val,this.left);
- }
- );
-
-ClipObject.prototype.__defineSetter__("height", function (val)
- {
- this.bottom = this.top + val;
- }
- );
-
-ClipObject.prototype.__defineSetter__("left", function (val)
- {
- this.setall(this.top,this.right,this.bottom,val);
- }
- );
-
-HTMLElement.prototype.__defineGetter__("clip", function ()
- {
- /** keep the same ClipObject around -- that way we can use watches on it **/
- if(this.cx__clip)
- return this.cx__clip;
- else
- return this.cx__clip = new ClipObject(this);
- }
- );
+Object.defineProperties(ClipObject.prototype, {
+ top: {
+ get() { return this.getpart(1); },
+ set(val) { this.setall(val, this.right, this.bottom, this.left); },
+ configurable: true,
+ enumerable: true,
+ },
+ right: {
+ get() { return this.getpart(2); },
+ set(val) { this.setall(this.top, val, this.bottom, this.left); },
+ configurable: true,
+ enumerable: true,
+ },
+ bottom: {
+ get() { return this.getpart(3); },
+ set(val) { this.setall(this.top, this.right, val, this.left); },
+ configurable: true,
+ enumerable: true,
+ },
+ left: {
+ get() { return this.getpart(4); },
+ set(val) { this.setall(this.top, this.right, this.bottom, val); },
+ configurable: true,
+ enumerable: true,
+ },
+ width: {
+ get() { return this.right - this.left; },
+ set(val) { this.right = this.left + val; },
+ configurable: true,
+ enumerable: true,
+ },
+ height: {
+ get() { return this.bottom - this.top; },
+ set(val) { this.bottom = this.top + val; },
+ configurable: true,
+ enumerable: true,
+ },
+});
+
+Object.defineProperty(HTMLElement.prototype, "clip", {
+ get() { return (this.cx__clip) ? this.cx__clip : (this.cx__clip = new ClipObject(this));},
+ configurable: true,
+ enumerable: true,
+});
// Load indication
if (window.pg_scripts) pg_scripts['ht_geom_dom1html.js'] = true;
diff --git a/centrallix-os/sys/js/ht_render.js b/centrallix-os/sys/js/ht_render.js
index cc93e167a..4bbeedac3 100644
--- a/centrallix-os/sys/js/ht_render.js
+++ b/centrallix-os/sys/js/ht_render.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2015 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -819,6 +819,70 @@ function htr_stylize_element(element, widget, prefix, defaults)
);
}
+
+/** An array storing all points so they can be updated on resize. **/
+const htr_point_targets = [];
+window.addEventListener('resize', (e) => htr_point_targets.forEach(htr_update_point));
+
+/*** Updates a point when the page has been resized. Fails if the target does
+ *** not have a point element. (Call htr_action_point() to create a point,
+ *** this function is only intended to update existing points.)
+ ***
+ *** @param point_target The target of the point being updated (necessary
+ *** because it stores the resize data for the point).
+ ***/
+function htr_update_point(point_target)
+ {
+ const resize_param = point_target?.resize?.param;
+ if (!resize_param)
+ {
+ // Skip: No available resize data. Maybe this DOM node doesn't have an associated point?
+ console.warn('Failed to get resize data to update point on', point_target);
+ return;
+ }
+
+ /** Update the point with data from the resize object. **/
+ const { X, Y, AtWidget, BorderColor, FillColor } = resize_param;
+ const { p1, p2 } = htutil_point(point_target,
+ X, Y, AtWidget, BorderColor, FillColor,
+ point_target.point1, point_target.point2
+ );
+ point_target.point1 = p1;
+ point_target.point2 = p2;
+ }
+
+/*** This function updates the pointing UI element that points from the point_target,
+ *** or creates one if it does not exist, and handles resize updates for it.
+ *** Often invoked when the point action is used.
+ ***
+ *** @param point_target The point_target DOM node to be pointed at.
+ *** @param param Pointing parameters.
+ *** @param param.X The x value for where to point.
+ *** @param param.Y The y value for where to point.
+ *** @param param.AtWidget True to point at a widget, false to point at the
+ *** coordinates specified above.
+ *** @param param.BorderColor The border color of the point element.
+ *** @param param.FillColor The fill color of the point element.
+ ***/
+function htr_action_point(point_target, param)
+ {
+ // Get the resize data from the point_target (or create it, if needed).
+ if (!point_target.resize) point_target.resize = {};
+ const { resize } = point_target;
+
+ // Update the saved param.
+ resize.param = param;
+
+ // Update the entry in htr_point_targets (or create it, if needed).
+ if (typeof(resize.index) === 'undefined')
+ resize.index = htr_point_targets.push(point_target) - 1;
+ else
+ htr_point_targets[resize.index] = point_target;
+
+ // (Re)render the new point.
+ htr_update_point(point_target);
+ }
+
function htr_alert(obj,maxlevels)
{
alert(htr_obj_to_text(obj,0,maxlevels));
@@ -1117,12 +1181,20 @@ function htr_subel(l, id)
function htr_extract_bgcolor(s)
{
- if (s.substr(0,17) == "background-color:")
+ // Handle edge cases.
+ if (typeof(s) !== 'string') return null;
+ s = s.toLocaleLowerCase();
+
+ // Check for CSS rule.
+ if (s.startsWith("background-color:"))
{
- var cp = s.indexOf(":");
- return s.substr(cp+2,s.length-cp-3);
+ const color_start = s.indexOf(":") + 1;
+ const color_end = (s.endsWith(';')) ? -1 : 0;
+ return s.slice(color_start, color_end).trim();
}
- else if (s.substr(0,8) == "bgcolor=" || s.substr(0,8) == "bgColor=")
+
+ // Check for HTML attribute (deprecated).
+ if (s.startsWith("bgcolor="))
{
var qp = s.indexOf("'");
if (qp < 1)
@@ -1130,6 +1202,8 @@ function htr_extract_bgcolor(s)
else
return s.substr(qp+1,s.length-qp-2);
}
+
+ // Fail: Color not found.
return null;
}
@@ -1150,6 +1224,8 @@ function htr_extract_bgimage(s)
function htr_getvisibility(l)
{
+ if (!l) return '';
+
var v = null;
if (cx__capabilities.Dom0NS)
{
@@ -1489,7 +1565,7 @@ function htr_addeventlistener(eventType,obj,handler)
if (typeof pg_capturedevents[eventType] == 'undefined')
{
pg_capturedevents[eventType] = handler;
- obj.addEventListener(eventType, handler, true);
+ obj.addEventListener(eventType, handler, { capture: true, passive: false });
}
}
else
diff --git a/centrallix-os/sys/js/ht_utils_layers.js b/centrallix-os/sys/js/ht_utils_layers.js
index 096754eb5..2f5904eca 100644
--- a/centrallix-os/sys/js/ht_utils_layers.js
+++ b/centrallix-os/sys/js/ht_utils_layers.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -20,6 +20,19 @@ function htutil_tag_images(d,t,l,ml)
}
}
+/*** Writes DOM nodes for a pointing UI element.
+ ***
+ *** @param wthis The widget targetted by the point.
+ *** @param x The x value for where to point.
+ *** @param y The y value for where to point.
+ *** @param at True to point at a widget, false to point at the coordinates
+ *** specified above.
+ *** @param bc The border color of the point element.
+ *** @param fc The fill color of the point element.
+ *** @param p1 Point DOM node 1 (optional).
+ *** @param p2 Point DOM node 2 (optional).
+ *** @returns { p1, p2 } Pointers to the two possibly new DOM nodes.
+ ***/
function htutil_point(wthis, x, y, at, bc, fc, p1, p2)
{
// Determine x/y to point at
@@ -97,14 +110,12 @@ function htutil_point(wthis, x, y, at, bc, fc, p1, p2)
if (side == 'top') top -= 2;
}
- // Create the "point divs" if needed
- if (!p1)
- {
- p1 = htr_new_layer(size*2, document);
- p2 = htr_new_layer(size*2, document);
- }
+ // Create point DOM nodes, if needed.
+ if (!p1) p1 = htr_new_layer(size*2, document);
+ if (!p2) p2 = htr_new_layer(size*2, document);
// Set the CSS to enable the point divs
+ const { top: wtop, left: wleft } = $(wthis).offset();
$(p1).css
({
"position": "absolute",
@@ -114,8 +125,8 @@ function htutil_point(wthis, x, y, at, bc, fc, p1, p2)
"border-style": "solid",
"box-sizing": "border-box",
"content": "",
- "top": (top + $(wthis).offset().top) + "px",
- "left": (left + $(wthis).offset().left) + "px",
+ "top": (top + wtop) + "px",
+ "left": (left + wleft) + "px",
"border-color": c1,
"visibility": "inherit",
"z-index": htr_getzindex(wthis) + 1
@@ -129,8 +140,8 @@ function htutil_point(wthis, x, y, at, bc, fc, p1, p2)
"border-style": "solid",
"box-sizing": "border-box",
"content": "",
- "top": (top + doffs.y + $(wthis).offset().top) + "px",
- "left": (left + doffs.x + $(wthis).offset().left) + "px",
+ "top": (top + doffs.y + wtop) + "px",
+ "left": (left + doffs.x + wleft) + "px",
"border-color": c2,
"visibility": "inherit",
"z-index": htr_getzindex(wthis) + 2
diff --git a/centrallix-os/sys/js/ht_utils_wgtr.js b/centrallix-os/sys/js/ht_utils_wgtr.js
index 1379bacf9..66f371629 100644
--- a/centrallix-os/sys/js/ht_utils_wgtr.js
+++ b/centrallix-os/sys/js/ht_utils_wgtr.js
@@ -1,6 +1,6 @@
//
// Widget Tree module
-// (c) 2004-2014 LightSys Technology Services, Inc.
+// (c) 2004-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -363,7 +363,7 @@ function wgtrIsUndefined(prop)
// wgtrGetServerProperty() - return a server-supplied property value
function wgtrGetServerProperty(node, prop_name, def)
{
- var val = node.__WgtrParams[prop_name];
+ var val = node?.__WgtrParams?.[prop_name];
if (typeof val == 'undefined')
return def;
else if (typeof val == 'object' && val && val.exp)
diff --git a/centrallix-os/sys/js/htdrv_autolayout.js b/centrallix-os/sys/js/htdrv_autolayout.js
index fabace1ca..9fce22522 100644
--- a/centrallix-os/sys/js/htdrv_autolayout.js
+++ b/centrallix-os/sys/js/htdrv_autolayout.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2007 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -9,6 +9,15 @@
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Lesser General Public License for more details.
+/*** This function works entirely using server-side dimensions.
+ *** Responsive dimensions are handled elsewhere.
+ ***
+ *** @param child The child to be resized.
+ *** @param oldw The previous width in server-side adaptive coordinates.
+ *** @param oldh The previous height in server-side adaptive coordinates.
+ *** @param neww The new width in server-side adaptive coordinates.
+ *** @param newh The new height in server-side adaptive coordinates.
+ ***/
function al_childresize(child, oldw, oldh, neww, newh)
{
if (oldw != neww || oldh != newh)
@@ -37,29 +46,25 @@ function al_reflow_buildlist(node, children)
}
}
+/*** Note:
+ *** This function gets all its values from server properties, so its generated
+ *** positions are in server layout. Thus, we convert them right before they
+ *** assigned to allow for responsive values.
+ ***/
function al_reflow()
{
// Get configuration
var width = wgtrGetServerProperty(this,"width");
var height = wgtrGetServerProperty(this,"height");
- var spacing = wgtrGetServerProperty(this,"spacing");
- if (!spacing) spacing = 0;
- var cellsize = wgtrGetServerProperty(this,"cellsize");
- if (!cellsize) cellsize = -1;
- var align = wgtrGetServerProperty(this,"align");
- if (!align) align = "left";
- var justify_mode = wgtrGetServerProperty(this,"justify");
- if (!justify_mode) justify_mode = "none";
+ var spacing = wgtrGetServerProperty(this,"spacing",0);
+ var align = wgtrGetServerProperty(this,"align","left");
var type = "vbox";
if (wgtrGetServerProperty(this,"style") == "hbox" || wgtrGetType(this) == "widget/hbox")
type = "hbox";
- var column_width;
- if (type == "vbox")
- column_width = wgtrGetServerProperty(this,"column_width");
+ var column_width, row_height;
+ if (type == "vbox") column_width = wgtrGetServerProperty(this,"column_width");
+ else row_height = wgtrGetServerProperty(this,"row_height");
if (!column_width) column_width = width;
- var row_height;
- if (type == "hbox")
- row_height = wgtrGetServerProperty(this,"row_height");
if (!row_height) row_height = height;
// Build the child list
@@ -87,10 +92,9 @@ function al_reflow()
for(var i=0; i width)
{
if (xo > 0 && row_height > 0 && row_offset + row_height*2 + spacing <= height)
@@ -108,6 +112,7 @@ function al_reflow()
}
else if (type == 'vbox')
{
+ const cheight = wgtrGetServerProperty(child, "height");
if (yo + cheight > height)
{
if (yo > 0 && column_width > 0 && column_offset + column_width*2 + spacing <= width)
@@ -148,10 +153,9 @@ function al_reflow()
for(var i=0; i width)
{
if (xo > 0 && row_height > 0 && row_offset + row_height*2 + spacing <= height)
@@ -164,17 +168,19 @@ function al_reflow()
}
if (child.tagName)
{
- setRelativeX(child, xo + xalign);
- if (wgtrGetServerProperty(child,"r_y") == -1)
- setRelativeY(child, row_offset);
+ setResponsiveX(child, xo + xalign);
+ const r_y = wgtrGetServerProperty(child, "r_y");
+ if (r_y == -1)
+ setResponsiveY(child, row_offset);
else
- setRelativeY(child, row_offset + wgtrGetServerProperty(child,"r_y"));
+ setResponsiveY(child, row_offset + r_y);
}
xo += cwidth;
xo += spacing;
}
else if (type == 'vbox')
{
+ const cheight = wgtrGetServerProperty(child, "height");
if (yo + cheight > height)
{
if (yo > 0 && column_width > 0 && column_offset + column_width*2 + spacing <= width)
@@ -187,11 +193,12 @@ function al_reflow()
}
if (child.tagName)
{
- setRelativeY(child, yo + yalign);
- if (wgtrGetServerProperty(child,"r_x") == -1)
- setRelativeX(child, column_offset);
+ setResponsiveY(child, yo + yalign);
+ const r_x = wgtrGetServerProperty(child, "r_x");
+ if (r_x == -1)
+ setResponsiveX(child, column_offset);
else
- setRelativeX(child, column_offset + wgtrGetServerProperty(child,"r_x"));
+ setResponsiveX(child, column_offset + r_x);
}
yo += cheight;
yo += spacing;
diff --git a/centrallix-os/sys/js/htdrv_button.js b/centrallix-os/sys/js/htdrv_button.js
index 6be26b436..c1504226b 100644
--- a/centrallix-os/sys/js/htdrv_button.js
+++ b/centrallix-os/sys/js/htdrv_button.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -262,7 +262,6 @@ function gb_setmode(layer,mode)
pg_set(layer.img, 'src', newsrc);
if(type=='image' || type=='textoverimage') return;
}
- moveTo(layer,layer.orig_x,layer.orig_y);
if(cx__capabilities.Dom2CSS)
{
layer.style.setProperty('border-width','0px',null);
@@ -294,7 +293,6 @@ function gb_setmode(layer,mode)
pg_set(layer.img, 'src', newsrc);
if(type=='image' || type=='textoverimage' ) return;
}
- moveTo(layer,layer.orig_x,layer.orig_y);
if(cx__capabilities.Dom2CSS)
{
layer.style.setProperty('border-width','1px',null);
@@ -337,7 +335,6 @@ function gb_setmode(layer,mode)
pg_set(layer.img, 'src', newsrc);
if(type=='image' || type=='textoverimage') return;
}
- moveTo(layer,layer.orig_x+1,layer.orig_y+1);
if(cx__capabilities.Dom2CSS)
{
layer.style.setProperty('border-width','1px',null);
diff --git a/centrallix-os/sys/js/htdrv_calendar.js b/centrallix-os/sys/js/htdrv_calendar.js
index 65d6000f4..5c889fc3b 100644
--- a/centrallix-os/sys/js/htdrv_calendar.js
+++ b/centrallix-os/sys/js/htdrv_calendar.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2003 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -359,7 +359,20 @@ function ca_mousemove(e)
}
// Widget initialization.
-function ca_init(l,main_bg,cell_bg,textcolor,dispmode,eventdatefield,eventdescfield,eventnamefield,eventpriofield,minprio,w,h)
+function ca_init({
+ l,
+ main_bg,
+ cell_bg,
+ textcolor,
+ dispmode,
+ eventdatefield,
+ eventdescfield,
+ eventnamefield,
+ eventpriofield,
+ minprio,
+ w,
+ h
+})
{
l.kind = 'ca';
if (cx__capabilities.Dom0NS)
@@ -400,7 +413,6 @@ function ca_init(l,main_bg,cell_bg,textcolor,dispmode,eventdatefield,eventdescfi
l.keyhandler = ca_keyhandler;
l.getfocushandler = ca_getfocus;
l.losefocushandler = ca_losefocus;
- //pg_addarea(l, -1,-1,l.clip.width+1,l.clip.height+1, 'ebox', 'ebox', is_readonly?0:3);
// Internal functions
l.Redraw = ca_redraw;
diff --git a/centrallix-os/sys/js/htdrv_chart.js b/centrallix-os/sys/js/htdrv_chart.js
index 3b6d0abe3..7c52a0653 100755
--- a/centrallix-os/sys/js/htdrv_chart.js
+++ b/centrallix-os/sys/js/htdrv_chart.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2014 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -387,6 +387,12 @@ function cht_init(params) {
this.update_soon = false; //see cht_object_available
chart_wgt.ChartJsInit();
+
+ // Set ChartJS options.
+ const { options } = chart_wgt.chart;
+ options.responsive = false;
+ options.maintainAspectRatio = false;
+ options.resizeDelay = 10;
}
// Load indication
diff --git a/centrallix-os/sys/js/htdrv_clock.js b/centrallix-os/sys/js/htdrv_clock.js
index d7bec6027..e811af541 100644
--- a/centrallix-os/sys/js/htdrv_clock.js
+++ b/centrallix-os/sys/js/htdrv_clock.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -24,7 +24,6 @@ function cl_init(param){
l.contentLayer = c1;
l.hiddenLayer = c2;
l.shadowed = param.shadowed;
- l.moveable = param.moveable;
l.bold = param.bold;
l.fgColor1 = param.foreground1;
l.fgColor2 = param.foreground2;
@@ -57,13 +56,14 @@ function cl_init(param){
}
function cl_get_time(l) {
- var t = new Date();
- var time = new Object();
- time.hrs = t.getHours();
- time.mins = t.getMinutes();
- time.secs = t.getSeconds();
- time.msecs = t.getMilliseconds();
- time.formated = cl_format_time(l,time);
+ const t = new Date();
+ const time = {
+ hrs: t.getHours(),
+ mins: t.getMinutes(),
+ secs: t.getSeconds(),
+ msecs: t.getMilliseconds(),
+ };
+ time.formated = cl_format_time(l, time);
return time;
}
@@ -110,46 +110,16 @@ function cl_format_time(l,t) {
return timef;
}
-function cl_mouseup(e) {
- if (e.kind == 'cl') {
- cn_activate(e.mainlayer, 'MouseUp');
- if (e.mainlayer.moveable) cl_move = false;
- }
- return EVENT_CONTINUE | EVENT_ALLOW_DEFAULT_ACTION;
-}
-
-function cl_mousedown(e) {
- if (e.kind == 'cl') {
- cn_activate(e.mainlayer, 'MouseDown');
- if (e.mainlayer.moveable) {
- cl_move = true;
- cl_xOffset = e.pageX - getPageX(e.mainlayer);
- cl_yOffset = e.pageY - getPageY(e.mainlayer);
- }
- }
- return EVENT_CONTINUE | EVENT_ALLOW_DEFAULT_ACTION;
-}
-
-function cl_mouseover(e) {
- if (e.kind == 'cl') cn_activate(e.mainlayer, 'MouseOver');
- return EVENT_CONTINUE | EVENT_ALLOW_DEFAULT_ACTION;
-}
-
-function cl_mouseout(e) {
- if (e.kind == 'cl') cn_activate(e.mainlayer, 'MouseOut');
- return EVENT_CONTINUE | EVENT_ALLOW_DEFAULT_ACTION;
-}
-
-function cl_mousemove(e) {
- if (e.kind == 'cl') {
- cn_activate(e.mainlayer, 'MouseMove');
- if (e.mainlayer.moveable && cl_move)
- moveToAbsolute(e.mainlayer,
- e.pageX - cl_xOffset,
- e.pageY - cl_yOffset);
- }
+// Handle events by passing them on to Centrallix.
+function cl_event(e, name) {
+ if (e && e.kind === 'cl') cn_activate(e.mainlayer, name);
return EVENT_CONTINUE | EVENT_ALLOW_DEFAULT_ACTION;
}
+function cl_mouseup(e) { return cl_event(e, 'MouseUp'); }
+function cl_mousedown(e) { return cl_event(e, 'MouseDown'); }
+function cl_mouseover(e) { return cl_event(e, 'MouseOver'); }
+function cl_mouseout(e) { return cl_event(e, 'MouseOut'); }
+function cl_mousemove(e) { return cl_event(e, 'MouseMove'); }
// Load indication
if (window.pg_scripts) pg_scripts['htdrv_clock.js'] = true;
diff --git a/centrallix-os/sys/js/htdrv_component.js b/centrallix-os/sys/js/htdrv_component.js
index 9aad2837d..5ce903d0e 100644
--- a/centrallix-os/sys/js/htdrv_component.js
+++ b/centrallix-os/sys/js/htdrv_component.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2006 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -228,10 +228,6 @@ function cmp_instantiate(aparam)
else
var path = this.path;
var url = path + "?cx__geom=" + escape(geom) + "&cx__graft=" + escape(graft) + "&cx__akey=" + escape(akey);
- if (this.orig_x != 0 || this.orig_y != 0)
- {
- url += "&cx__xoffset=" + escape(this.orig_x) + "&cx__yoffset=" + escape(this.orig_y);
- }
if (this.templates.length > 0)
{
diff --git a/centrallix-os/sys/js/htdrv_datetime.js b/centrallix-os/sys/js/htdrv_datetime.js
index c333f6446..68050a8d1 100644
--- a/centrallix-os/sys/js/htdrv_datetime.js
+++ b/centrallix-os/sys/js/htdrv_datetime.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -9,6 +9,18 @@
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Lesser General Public License for more details.
+
+// A resize observer to update datetime dropdowns when they are resized.
+const dt_resize_observer = new ResizeObserver(e => e.forEach(({ target }) => {
+ // Ignore widgets that don't have a visible panelayer in need of updating.
+ if (htr_getvisibility(target.PaneLayer) !== 'inherit') return;
+
+ // Reopen the datetime dropdown to rerender it.
+ dt_collapse(target);
+ dt_expand(target);
+}));
+
+
function dt_getvalue() {
if(this.form && this.form.mode == 'Query' && this.sbr && this.DateObj)
return new Array('>= ' + dt_formatdate(this, this.DateObj, 3),'<= ' + dt_formatdate(this, this.DateObj2, 3));
@@ -163,7 +175,6 @@ function dt_init(param){
htr_init_layer(c2,l,'dt');
//dt_tag_images(l.document, 'dt', l);
htutil_tag_images(l,'dt',l,l);
- l.w = w; l.h = h;
l.bg = htr_extract_bgcolor(bg);
l.ubg = bg;
l.fg = param.foreground;
@@ -200,7 +211,26 @@ function dt_init(param){
else
l.form = wgtrFindContainer(l,"widget/form");
if (l.form) l.form.Register(l);
- pg_addarea(l, -1, -1, getClipWidth(l)+3, getClipHeight(l)+3, 'dt', 'dt', 3);
+
+ // Setup getters for widths and heights.
+ Object.defineProperties(l, {
+ w: {
+ get() { return getRelativeW(l); },
+ configurable: true,
+ enumerable: true,
+ },
+ h: {
+ get() { return getRelativeH(l); },
+ configurable: true,
+ enumerable: true,
+ },
+ });
+
+ // Setup the hover area and set getters to allow responsive resizing.
+ l.area = pg_addarea(l, -1, -1, () => l.w + 3, () => l.h + 3, 'dt', 'dt', 3);
+
+ // Resize date selection dropdown automatically.
+ dt_resize_observer.observe(l);
// Events
ifc_init_widget(l);
@@ -251,6 +281,7 @@ function dt_prepare(l) {
l.PaneLayer.HidLayer.getfocushandler = dt_getfocus_day;
l.PaneLayer.VisLayer.losefocushandler = dt_losefocus_day;
l.PaneLayer.HidLayer.losefocushandler = dt_losefocus_day;
+ l.PaneLayer.classList.add('dt_dropdown');
}
if (!l.PaneLayer2) {
l.PaneLayer2 = dt_create_pane(l,l.ubg,l.w2,l.h2,l.h,"End");
@@ -261,7 +292,6 @@ function dt_prepare(l) {
l.PaneLayer2.HidLayer.getfocushandler = dt_getfocus_day;
l.PaneLayer2.VisLayer.losefocushandler = dt_losefocus_day;
l.PaneLayer2.HidLayer.losefocushandler = dt_losefocus_day;
-
}
// redraw the month & time.
if(l.form && l.form.mode == 'Query' && l.sbr){
@@ -391,11 +421,12 @@ function dt_drawmonth(l, d) {
moveTo(l.TimeVisLayer,0,rows*20+56);
}
}
+ enableClippingCSS(l);
var v='';
for (var i=0; i<7*rows; i++) {
if (i!=0 && i%7==0) v+='';
if (i%7==0) {v+='\n';r++}
- v+='| ';
+ v += ' | ';
if (i>=col && dy(No Date) | '
+ + '(Today) | ';
l.HidLayer.NullArea = pg_addarea(l.HidLayer, 1, 1+(r+1)*18, 100, 16, 'dt', 'dt_null', 3);
l.HidLayer.NullArea.DateVal = null;
l.HidLayer.NullArea.parentPaneId = l.myid;
@@ -451,7 +484,12 @@ function dt_inittime(l) {
// build the structure for the time
v = "";
- v += "\n";
+ v += ""
+ + " |  | "
+ + " | | "
+ + " | | "
+ + " (24h) | "
+ + "
\n";
htr_write_content(l.TimeHidLayer, v);
htr_setvisibility(l.TimeHidLayer, 'inherit');
htr_setvisibility(l.TimeVisLayer, 'hidden');
@@ -866,11 +904,11 @@ function dt_create_pane(ml,bg,w,h,h2,name) {
h+=20;
}
str += " ";
- str += "  | ";
- str += "  | ";
- str += " | ";
- str += "  | ";
- str += "  |
";
+ str += " | ";
+ str += " | ";
+ str += " | ";
+ str += " | ";
+ str += " |
";
str += "
";
str += " ";
str += " | S | ";
@@ -893,6 +931,7 @@ function dt_create_pane(ml,bg,w,h,h2,name) {
pg_stackpopup(l,ml);
setClipHeight(l,h);
setClipWidth(l,w);
+ enableClippingCSS(l);
//l.HidLayer = new Layer(1024, l);
l.HidLayer = htr_new_layer(1024,l);
diff --git a/centrallix-os/sys/js/htdrv_dropdown.js b/centrallix-os/sys/js/htdrv_dropdown.js
index b3a23a8db..dd0a6aabc 100644
--- a/centrallix-os/sys/js/htdrv_dropdown.js
+++ b/centrallix-os/sys/js/htdrv_dropdown.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -9,6 +9,18 @@
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Lesser General Public License for more details.
+
+// A resize observer to update dropdowns when they are resized.
+const dd_resize_observer = new ResizeObserver(e => e.forEach(({ target }) => {
+ // Ignore widgets that don't have a visible panelayer in need of updating.
+ if (htr_getvisibility(target.PaneLayer) !== 'inherit') return;
+
+ // Reopen the dropdown to rerender it.
+ dd_collapse(target);
+ dd_expand(target);
+}));
+
+
// Form manipulation
function dd_getvalue()
@@ -390,6 +402,9 @@ function dd_collapse(l)
//pg_resize_area(l.area,getClipWidth(l)+1,getClipHeight(l)+1, -1, -1);
htr_setvisibility(l.PaneLayer, 'hidden');
dd_current = null;
+
+ /** Remove the pane to avoid leaking DOM nodes. **/
+ dd_remove_pane(l);
}
}
@@ -407,7 +422,10 @@ function dd_expand(l)
l.Values.splice(0,0,nullitem);
}
if (l && !l.PaneLayer)
+ {
l.PaneLayer = dd_create_pane(l);
+ l.PaneLayer.style.cursor = 'pointer';
+ }
if (l && htr_getvisibility(l.PaneLayer) != 'inherit')
{
pg_stackpopup(l.PaneLayer, l);
@@ -775,6 +793,41 @@ function dd_create_pane(l)
return p;
}
+/** Quick and dirty function to remove panes without leaking DOM nodes. **/
+function dd_remove_pane(l)
+ {
+ if (!l || !l.PaneLayer) return;
+
+ const p = l.PaneLayer;
+
+ // Function for removing elements.
+ const remove_node = (n) => { if (n && n.parentNode) n.parentNode.removeChild(n); }
+
+ // Remove item DOM nodes if present.
+ if (l.Items && l.Items.length)
+ {
+ for (let i = 0; i < l.Items.length; i++)
+ {
+ remove_node(l.Items[i]);
+ l.Items[i] = null;
+ }
+ l.Items.length = 0;
+ l.Items = null;
+ }
+
+ // Remove scrollbar/thumb layers if present.
+ remove_node(p.ScrLayer);
+ remove_node(p.BarLayer);
+ remove_node(p.TmbLayer);
+
+ // Remove the pane root.
+ remove_node(p);
+
+ // Clear references.
+ p.ScrLayer = p.BarLayer = p.TmbLayer = p.Items = p.mainlayer = null;
+ l.PaneLayer = null;
+ }
+
/// REPLACE ITEMS IN DROPDOWN
function dd_add_items(l,ary)
@@ -1194,7 +1247,6 @@ function dd_init(param)
l.NumDisplay = param.numDisplay;
l.Mode = param.mode;
l.SQL = param.sql;
- l.popup_width = param.popup_width?param.popup_width:param.width;
l.VisLayer = param.c1;
l.HidLayer = param.c2;
htr_init_layer(l.VisLayer, l, 'ddtxt');
@@ -1244,7 +1296,6 @@ function dd_init(param)
l.getfocushandler = dd_getfocus;
l.bg = param.background;
l.hl = param.highlight;
- l.w = param.width; l.h = param.height;
l.fieldname = param.fieldname;
l.enabled = 'full';
if (l.Mode != 3)
@@ -1268,11 +1319,35 @@ function dd_init(param)
else if (imgs[i].src.substr(-13,5) == 'white')
imgs[i].upimg = true;
}
- l.area = pg_addarea(l, -1, -1, getClipWidth(l)+3,
- getClipHeight(l)+3, 'dd', 'dd', 3);
if (l.form) l.form.Register(l);
l.init_items = false;
+ // Setup getters for widths and heights.
+ const width_ratio = param.popup_width / param.width;
+ Object.defineProperties(l, {
+ w: {
+ get() { return getRelativeW(l); },
+ configurable: true,
+ enumerable: true,
+ },
+ h: {
+ get() { return getRelativeH(l); },
+ configurable: true,
+ enumerable: true,
+ },
+ popup_width: {
+ get() { return l.w * width_ratio; },
+ configurable: true,
+ enumerable: true,
+ },
+ });
+
+ // Setup the hover area.
+ l.area = pg_addarea(l, -1, -1, () => l.w + 3, () => l.h + 3, 'dd', 'dd', 3);
+
+ // Resize dropdown automatically.
+ dd_resize_observer.observe(l);
+
// Events
var ie = l.ifcProbeAdd(ifEvent);
ie.Add("MouseDown");
diff --git a/centrallix-os/sys/js/htdrv_editbox.js b/centrallix-os/sys/js/htdrv_editbox.js
index 160ce0bdf..d033138fa 100644
--- a/centrallix-os/sys/js/htdrv_editbox.js
+++ b/centrallix-os/sys/js/htdrv_editbox.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2004 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -162,8 +162,10 @@ function eb_setdesc(txt)
({
"z-index":"-1",
"color":this.desc_fgcolor?this.desc_fgcolor:"#808080",
- "top":($(this).height() - $(this.DescLayer).height())/2 + "px",
+ "top":"0px",
"left":(this.input_width() + ((this.content || this.has_focus)?4:0) + 5) + "px",
+ "height":"100%",
+ "align-content":"center",
"visibility":"inherit",
"white-space":"nowrap",
});
@@ -699,10 +701,11 @@ function eb_init(param)
$(l.ContentLayer).prop('disabled', false);
}
l.isFormStatusWidget = false;
- if (cx__capabilities.CSSBox)
- pg_addarea(l, -1,-1,$(l).width()+3,$(l).height()+3, 'ebox', 'ebox', param.isReadOnly?0:3);
- else
- pg_addarea(l, -1,-1,$(l).width()+1,$(l).height()+1, 'ebox', 'ebox', param.isReadOnly?0:3);
+
+ // Add the hover area.
+ const area_adj = (cx__capabilities.CSSBox) ? 3 : 1;
+ pg_addarea(l, -1, -1, () => $(l).width() + area_adj, () => $(l).height() + area_adj, 'ebox', 'ebox', (param.isReadOnly) ? 0 : 3);
+
if (param.form)
l.form = wgtrGetNode(l, param.form);
else
diff --git a/centrallix-os/sys/js/htdrv_html.js b/centrallix-os/sys/js/htdrv_html.js
index b40264bec..91cf53a65 100644
--- a/centrallix-os/sys/js/htdrv_html.js
+++ b/centrallix-os/sys/js/htdrv_html.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -240,7 +240,6 @@ function ht_init(param)
{
setClipHeight(l, getdocHeight(l));
}
- pg_set_style(l, 'height', getdocHeight(l));
if (param.width != -1)
{
setClipWidth(l, param.width);
@@ -250,7 +249,11 @@ function ht_init(param)
{
setClipWidth(l, getdocWidth(l));
}
- pg_set_style(l, 'width', getdocWidth(l));
+
+ /** Clipping breaks responsive pages and is not required in modern browsers. **/
+ disableClippingCSS(l);
+ disableClippingCSS(l2);
+
if (source.substr(0,5) == 'http:')
{
//pg_serialized_load(l, source, ht_reloaded);
@@ -289,6 +292,8 @@ function ht_init(param)
//l.watch('source', ht_sourcechanged);
pg_resize(l.parentLayer);
+ disableClippingCSS(l.parentLayer);
+
return l;
}
diff --git a/centrallix-os/sys/js/htdrv_image.js b/centrallix-os/sys/js/htdrv_image.js
index a4a608022..55e53c666 100644
--- a/centrallix-os/sys/js/htdrv_image.js
+++ b/centrallix-os/sys/js/htdrv_image.js
@@ -1,6 +1,6 @@
// htdrv_image.js
//
-// Copyright (C) 2004 LightSys Technology Services, Inc.
+// Copyright (C) 2004-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -146,13 +146,27 @@ function im_set_scale(a, v)
function im_action_offset(aparam)
{
- im_set_x.call(this, "xoffset", aparam.X);
- im_set_y.call(this, "yoffset", aparam.Y);
+ const { X, Y } = aparam;
+
+ // Log warning.
+ console.warn('Offset action used: This breaks page responsiveness.');
+ console.log(`Action Info: X=${X} Y=${Y} Target=`, this);
+
+ // Update the offset values.
+ im_set_x.call(this, "xoffset", X);
+ im_set_y.call(this, "yoffset", Y);
}
function im_action_scale(aparam)
{
- im_set_scale.call(this, "scale", aparam.Scale);
+ const { Scale } = aparam;
+
+ // Log warning.
+ console.warn('Scale action used: This breaks page responsiveness.');
+ console.log(`Action Info: Scale=${Scale} Target=`, this);
+
+ // Update the scale value.
+ im_set_scale.call(this, "scale", Scale);
}
function im_init(l)
diff --git a/centrallix-os/sys/js/htdrv_imagebutton.js b/centrallix-os/sys/js/htdrv_imagebutton.js
index c3aae6b2a..a78a4f7bd 100644
--- a/centrallix-os/sys/js/htdrv_imagebutton.js
+++ b/centrallix-os/sys/js/htdrv_imagebutton.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -211,6 +211,7 @@ function ib_init(param)
l.img.kind = 'ib';
l.cursrc = param.n;
setClipWidth(l, w);
+ disableClippingCSS(l);
l.trigger = ib_trigger;
diff --git a/centrallix-os/sys/js/htdrv_label.js b/centrallix-os/sys/js/htdrv_label.js
index a0226f1cb..6bd89dd92 100644
--- a/centrallix-os/sys/js/htdrv_label.js
+++ b/centrallix-os/sys/js/htdrv_label.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -103,7 +103,6 @@ function lb_disable()
function lb_update()
{
var v = htutil_nlbr(htutil_encode(htutil_obscure(this.content), true));
- //var txt = this.stylestr + (v?v:"") + "
";
var txt = v?v:"";
$(this).find("span").html(txt).attr("style", htutil_getstyle(this, null, {}));
/*if (cx__capabilities.Dom0NS) // only serialize this for NS4
@@ -176,7 +175,6 @@ function lbl_init(l, wparam)
l.content = wparam.text;
l.orig_content = wparam.text;
l.fieldname = wparam.field;
- l.stylestr = wparam.style;
l.tooltip = wparam.tooltip;
l.tipid = null;
l.pointcolor = wparam.pfg;
diff --git a/centrallix-os/sys/js/htdrv_menu.js b/centrallix-os/sys/js/htdrv_menu.js
index f517e3948..96c2d58d4 100644
--- a/centrallix-os/sys/js/htdrv_menu.js
+++ b/centrallix-os/sys/js/htdrv_menu.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -395,19 +395,21 @@ function mn_init(param)
menu.objname = param.name;
menu.cur_highlight = null;
+ // Set up sizing.
if (cx__capabilities.CSS2)
{
if (menu.scrollHeight == 0)
{
- pg_set_style(menu,'height',menu.childNodes[0].scrollHeight);
- pg_set_style(menu,'width',menu.childNodes[0].scrollWidth);
+ if (param.h === -1) pg_set_style(menu, 'height', menu.childNodes[0].scrollHeight);
+ if (param.w === -1) pg_set_style(menu, 'width', menu.childNodes[0].scrollWidth);
}
else
{
- pg_set_style(menu,'height',menu.scrollHeight);
- pg_set_style(menu,'width',menu.scrollWidth);
+ if (param.h === -1) pg_set_style(menu, 'height', menu.scrollHeight);
+ if (param.w === -1) pg_set_style(menu, 'width', menu.scrollWidth);
}
}
+ disableClippingCSS(menu);
menu.act_w = getClipWidth(menu.clayer);
menu.act_h = getClipHeight(menu.clayer);
if ($(menu).css('visibility') == 'hidden' && (!menu.__WgtrParent.style || $(menu.__WgtrParent).css('visibility') == 'inherit'))
diff --git a/centrallix-os/sys/js/htdrv_objcanvas.js b/centrallix-os/sys/js/htdrv_objcanvas.js
index aeaa1fd1a..4c19ce8ef 100644
--- a/centrallix-os/sys/js/htdrv_objcanvas.js
+++ b/centrallix-os/sys/js/htdrv_objcanvas.js
@@ -1,6 +1,6 @@
// sys/js/htdrv_objcanvas.js
//
-// Copyright (C) 2004 LightSys Technology Services, Inc.
+// Copyright (C) 2004-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -113,6 +113,7 @@ function oc_add_osrc_object(o)
y = parseInt(y);
// make and position the layer
+ console.error("New layer created. This will probably break responsive design.");
var l = this.NewLayer();
htr_init_layer(l, this, 'oc');
l.osrc_oid = o.oid;
diff --git a/centrallix-os/sys/js/htdrv_osrc.js b/centrallix-os/sys/js/htdrv_osrc.js
index f256cd70e..7e3cdc89f 100644
--- a/centrallix-os/sys/js/htdrv_osrc.js
+++ b/centrallix-os/sys/js/htdrv_osrc.js
@@ -2330,8 +2330,6 @@ function osrc_open_query_startat()
else
this.querysize = this.replicasize;
this.query_ended = false;
- //this.LogStatus();
- //console.log('OSRC ' + this.__WgtrName + ': startat ' + this.startat + ', rowcount ' + this.querysize);
this.DoRequest('multiquery', '/', {ls__startat:this.startat, ls__autoclose_sr:1, ls__autofetch:1, ls__objmode:0, ls__notify:this.request_updates, ls__rowcount:this.querysize, ls__sql:this.query, ls__sqlparam:this.EncodeParams()}, osrc_get_qid_startat);
}
diff --git a/centrallix-os/sys/js/htdrv_page.js b/centrallix-os/sys/js/htdrv_page.js
index 1da3ba1e5..9b645b300 100755
--- a/centrallix-os/sys/js/htdrv_page.js
+++ b/centrallix-os/sys/js/htdrv_page.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -51,6 +51,11 @@ function pg_scriptavailable(s)
}
+/** Resize handling for all types of area boxes (hover, select, data, etc). **/
+const pg_area_resize_handlers = {};
+window.addEventListener('resize', (e) => Object.values(pg_area_resize_handlers).forEach(f => f(e)));
+
+
//START SECTION: DOM/CSS helper functions -----------------------------------
/** returns an attribute of the element in pixels **/
@@ -728,88 +733,61 @@ function pg_isinlayer(outer,inner)
return false;
}
-/** Function to make four layers into a box //SETH: ?? what's a 'box'?
-* pl - a layer
-* x,y - x,y-cord
-* w,h - widht, height
-* s - ?
-* tl - top layer
-* bl - bottom layer
-* rl - right layer
-* ll - left layer
-* c1 - color1, for tl and ll
-* c2 - color2, for bl and rl
-* z - zIndex
-**/
-function pg_mkbox(pl, x,y,w,h, s, tl,bl,rl,ll, c1,c2, z)
- {
+/*** Helper function for pg_init_box() to initialize a side of a box.
+ ***
+ *** @param layer The target layer (aka. dom node) for the side of the box.
+ *** @param parent_layer The target layer for which the box has been created.
+ *** @param x The x for this side of the box.
+ *** @param y The y for this side of the box.
+ *** @param w The width for this side of the box.
+ *** @param h The height for this side of the box.
+ *** @param color The color of this side of the box.
+ *** @param z The z-index for this side of the box.
+ ***/
+function pg_init_box_side(layer, parent_layer, x, y, w, h, color, z)
+ {
+ resizeTo(layer, w, h);
+ setClipWidth(layer, w);
+ setClipHeight(layer, h);
+ moveAbove(layer, parent_layer);
+ $(layer).offset({ left:x, top:y });
+ htr_setbgcolor(layer, color);
+ htr_setzindex(layer, z);
+ htr_setvisibility(layer, 'inherit');
- htr_setvisibility(tl, 'hidden');
- htr_setvisibility(bl, 'hidden');
- htr_setvisibility(rl, 'hidden');
- htr_setvisibility(ll, 'hidden');
- //abc();
- if (cx__capabilities.Dom0NS || cx__capabilities.Dom1HTML)
-/* {
- tl.bgColor = c1;
- ll.bgColor = c1;
- bl.bgColor = c2;
- rl.bgColor = c2;
- }
- else if (cx__capabilities.Dom1HTML) */
- {
- htr_setbgcolor(tl,c1);
- htr_setbgcolor(ll,c1);
- htr_setbgcolor(bl,c2);
- htr_setbgcolor(rl,c2);
- }
- //alert("x, y --" + x + " " + y);
-
- resizeTo(tl,w,1);
- setClipWidth(tl,w);
- setClipHeight(tl,1);
- //if (cx__capabilities.Dom1HTML && pl)
- // pl.parentLayer.appendChild(tl);
- moveAbove(tl,pl);
- //moveToAbsolute(tl,x,y);
- $(tl).offset({left:x, top:y});
- htr_setzindex(tl,z);
-
- resizeTo(bl,w+s-1,1);
- setClipWidth(bl,w+s-1);
- setClipHeight(bl,1);
- //if (cx__capabilities.Dom1HTML && pl)
- // pl.parentLayer.appendChild(bl);
- moveAbove(bl,pl);
- //moveToAbsolute(bl,x,y+h-s+1);
- $(bl).offset({left:x, top:y+h-s+1});
- htr_setzindex(bl,z);
-
- resizeTo(ll,1,h);
- setClipHeight(ll,h);
- setClipWidth(ll,1);
- //if (cx__capabilities.Dom1HTML && pl)
- // pl.parentLayer.appendChild(ll);
- moveAbove(ll,pl);
- //moveToAbsolute(ll,x,y);
- $(ll).offset({left:x, top:y});
- htr_setzindex(ll,z);
-
- resizeTo(rl,1,h+1);
- setClipHeight(rl,h+1);
- setClipWidth(rl,1);
- //if (cx__capabilities.Dom1HTML && pl)
- // pl.parentLayer.appendChild(rl);
- moveAbove(rl,pl);
- //moveToAbsolute(rl,x+w-s+1,y);
- $(rl).offset({left:x+w-s+1, top:y});
- htr_setzindex(rl,z);
+ return;
+ }
+
+/*** Initialize the four layers (dom nodes) of a box UI element. These are
+ *** commonly used when a user hovers over or selects certain UI elements,
+ *** such as dropdown widgets.
+ ***
+ *** @param parent_layer The target layer for which the box has been created.
+ *** @param x The x coordinate of the top left corner of the box (in px).
+ *** @param y The y coordinate of the top left corner of the box (in px).
+ *** @param w The width of the box (in px).
+ *** @param h The height of the box (in px).
+ *** @param s The thickness of the box (in px)? Maybe?
+ *** @param top_layer The layer to be the line across the top of the box.
+ *** @param bottom_layer The layer to be the line across the bottom of the box.
+ *** @param right_layer The layer to be the line across the right side of the box.
+ *** @param left_layer The layer to be the line across the left side of the box.
+ *** @param color1 The "lit" color of the box (used for the top and left lines).
+ *** @param color2 The "unlit" color of the box (used for the bottom and right lines).
+ *** @param z The z-index for the sides of the box.
+ ***/
+function pg_init_box({
+ parent_layer,
+ x, y, w, h, s,
+ top_layer, bottom_layer, right_layer, left_layer,
+ color1, color2, z
+})
+ {
+ pg_init_box_side(top_layer, parent_layer, x, y, w, 1, color1, z);
+ pg_init_box_side(bottom_layer, parent_layer, x, y+h-s+1, w+s-1, 1, color2, z);
+ pg_init_box_side(right_layer, parent_layer, x+w-s+1, y, 1, h+1, color2, z);
+ pg_init_box_side(left_layer, parent_layer, x, y, 1, h, color1, z);
- htr_setvisibility(tl, 'inherit');
- htr_setvisibility(bl, 'inherit');
- htr_setvisibility(rl, 'inherit');
- htr_setvisibility(ll, 'inherit');
- //alert(rl.style.cssText);
return;
}
@@ -839,17 +817,62 @@ function pg_hidebox(tl,bl,rl,ll)
return;
}
-/** Function to make a new clickable "area" **INTERNAL** **/
-function pg_area(pl,x,y,w,h,cls,nm,f) //SETH: ?? what's an 'area'?
- {
- this.layer = pl;
- this.x = x;
- this.y = y;
- this.width = w;
- this.height = h;
- this.name = nm;
+/*** Internal constructor function to create a new clickable/hoverable "area".
+ *** This function has additional documentation in `HTFormInterface.md`.
+ ***
+ *** Note: Many functions specify (x,y) as (0,0), or as (-1,-1) if the focus
+ *** area should appear 1px outside the parent layer.
+ ***
+ *** Note: The x, y, w, and h params can all be specified as either a single
+ *** value or a function. The latter is useful because areas are redawn
+ *** when the page resizes, so a function can provide an updated value
+ *** for the new layout.
+ ***
+ *** @param parent The associated parent layer for which this area is rendered.
+ *** This object should implement the `keyhandler()`, `getfocushandler()`,
+ *** and `losefocushandler()`, as described in `HTFormInterface.md`.
+ *** @param x The x coordinate of the area, relative to the parent layer.
+ *** @param y The y coordinate of the area, relative to the parent layer.
+ *** @param width The width of the area.
+ *** @param height The height of the area.
+ *** @param cls A mostly unused value for the "context" of an area, used for
+ *** the callback functions described in `HTFormatInterface.md`. (As for how
+ *** "context" can be abbreviated to `cls`, your guess is as good as mine.)
+ *** @param name The name of the area, also used for callback functions.
+ *** @param f A bitmask representing zero or more of the following flags:
+ *** 1: Allow the area to receive keyboard focus.
+ *** 2: Allow the area to receive data focus.
+ ***/
+function pg_area(parent, x, y, width, height, cls, name, f)
+ {
+ // Function to handle params that might be functions.
+ const handle_param = (name, value) => {
+ if (typeof(value) === 'function')
+ {
+ // Set a base value and define a getter that calls the provided function.
+ this[name] = value();
+ Object.defineProperty(this, name, {
+ get() { return value.call(this); },
+ configurable: true,
+ enumerable: true
+ });
+ }
+
+ // If just a value is provided, simply set that.
+ else this[name] = value;
+ }
+
+ // Handle each parameter for the class.
+ this.layer = parent;
+ handle_param('x', x);
+ handle_param('y', y);
+ handle_param('width', width);
+ handle_param('height', height);
+ this.name = name;
this.cls = cls;
this.flags = f;
+
+ // Return the newly instantiated object.
return this;
}
@@ -924,9 +947,12 @@ function pg_resize_area(a,w,h,xo,yo)
}
}
-/** Function to add a new area to the arealist **/
+/*** Function to add a new area to the area list.
+ *** Note that x, y, w, & h can all be provided as
+ *** function for responsive resizing.
+ ***/
function pg_addarea(pl,x,y,w,h,cls,nm,f)
- {
+ {
var a = new pg_area(pl,x,y,w,h,cls,nm,f);
//pg_arealist.splice(0,0,a);
pg_arealist.push(a);
@@ -1354,6 +1380,8 @@ function pg_init(l,a,gs,ct) //SETH: ??
ia.Add("Launch", pg_launch);
ia.Add("Close", pg_close);
ia.Add("Alert", pg_alert);
+ ia.Add("Log", pg_log);
+ ia.Add("ReloadPage", pg_reload_page);
// Events
var ie = window.ifcProbeAdd(ifEvent);
@@ -1435,6 +1463,16 @@ function pg_alert(aparam)
alert(aparam.Message);
}
+function pg_log({ Message })
+ {
+ console.log(Message);
+ }
+
+function pg_reload_page()
+ {
+ window.location.reload();
+ }
+
function pg_reveal_cb(e)
{
if (e.eventName == 'ObscureOK')
@@ -1917,7 +1955,9 @@ function pg_findfocusarea(l, xo, yo)
function pg_setmousefocus(l, xo, yo)
{
- var a = pg_findfocusarea(l, xo, yo);
+ if (!l) return false;
+
+ const a = pg_findfocusarea(l, xo, yo);
if (a && a != pg_curarea)
{
pg_curarea = a;
@@ -1925,26 +1965,55 @@ function pg_setmousefocus(l, xo, yo)
{
if (!pg_curarea.layer.getmousefocushandler || pg_curarea.layer.getmousefocushandler(xo, yo, a.layer, a.cls, a.name, a))
{
- // wants mouse focus
- var offs = $(pg_curarea.layer).offset();
- //var x = getPageX(pg_curarea.layer)+pg_curarea.x;
- //var y = getPageY(pg_curarea.layer)+pg_curarea.y;
- var x = offs.left+pg_curarea.x;
- var y = offs.top+pg_curarea.y;
-
- var w = pg_curarea.width;
- var h = pg_curarea.height;
- if (cx__capabilities.Dom0NS)
- {
- pg_mkbox(l, x,y,w,h, 1, document.layers.pgtop,document.layers.pgbtm,document.layers.pgrgt,document.layers.pglft, page.mscolor1, page.mscolor2, document.layers.pgktop.zIndex-1);
- }
- else if (cx__capabilities.Dom1HTML)
+ // Create a function to handle all box updates with this focus.
+ const update_box = (area) =>
{
- pg_mkbox(l, x,y,w,h, 1, document.getElementById("pgtop"),document.getElementById("pgbtm"),document.getElementById("pgrgt"),document.getElementById("pglft"), page.mscolor1, page.mscolor2, htr_getzindex(document.getElementById("pgktop"))-1);
- }
+ // Compute layout data.
+ const offs = $(area.layer).offset();
+ const x = area.x + offs.left;
+ const y = area.y + offs.top;
+ const w = area.width;
+ const h = area.height;
+
+ if (cx__capabilities.Dom0NS)
+ {
+ pg_init_box({
+ parent_layer: l,
+ x, y, w, h, s: 1,
+ top_layer: document.layers.pgtop,
+ bottom_layer: document.layers.pgbtm,
+ right_layer: document.layers.pgrgt,
+ left_layer: document.layers.pglft,
+ color1: page.mscolor1,
+ color2: page.mscolor2,
+ z: document.layers.pgktop.zIndex - 1,
+ });
+ }
+ else if (cx__capabilities.Dom1HTML)
+ {
+ pg_init_box({
+ parent_layer: l,
+ x, y, w, h, s: 1,
+ top_layer: document.getElementById("pgtop"),
+ bottom_layer: document.getElementById("pgbtm"),
+ right_layer: document.getElementById("pgrgt"),
+ left_layer: document.getElementById("pglft"),
+ color1: page.mscolor1, color2: page.mscolor2,
+ z: htr_getzindex(document.getElementById("pgktop")) - 1,
+ });
+ }
+ };
+
+ // Initial update.
+ update_box(pg_curarea);
+
+ // Responsive updates.
+ const area = pg_curarea; // Save value so we can create a closure below.
+ pg_area_resize_handlers.mouse_focus = () => update_box(area);
}
}
}
+ if (!a) delete pg_area_resize_handlers.mouse_focus;
}
function pg_removekbdfocus(p)
@@ -1956,23 +2025,55 @@ function pg_removekbdfocus(p)
pg_curkbdarea = null;
if (cx__capabilities.Dom0NS)
{
- pg_mkbox(null,0,0,0,0, 1, document.layers.pgktop,document.layers.pgkbtm,document.layers.pgkrgt,document.layers.pgklft, page.kbcolor1, page.kbcolor2, document.layers.pgtop.zIndex+100);
+ pg_init_box({
+ parent_layer: null,
+ x: 0, y: 0, w: 0, h: 0, s: 1,
+ top_layer: document.layers.pgktop,
+ bottom_layer: document.layers.pgkbtm,
+ right_layer: document.layers.pgkrgt,
+ left_layer: document.layers.pgklft,
+ color1: page.kbcolor1, color2: page.kbcolor2,
+ z: document.layers.pgtop.zIndex + 100,
+ });
}
else if (cx__capabilities.Dom1HTML)
{
- pg_mkbox(null,0,0,0,0, 1, document.getElementById("pgktop"),document.getElementById("pgkbtm"),document.getElementById("pgkrgt"),document.getElementById("pgklft"), page.kbcolor1, page.kbcolor2, pg_get_style(document.getElementById("pgtop"), 'zIndex')+100);
+ pg_init_box({
+ parent_layer: null,
+ x: 0, y: 0, w: 0, h: 0, s: 1,
+ top_layer: document.getElementById("pgktop"),
+ bottom_layer: document.getElementById("pgkbtm"),
+ right_layer: document.getElementById("pgkrgt"),
+ left_layer: document.getElementById("pgklft"),
+ color1: page.kbcolor1, color2: page.kbcolor2,
+ z: pg_get_style(document.getElementById("pgtop"), 'zIndex') + 100,
+ });
}
}
+
+ // Clear resize handling.
+ delete pg_area_resize_handlers.mouse_focus;
+ delete pg_area_resize_handlers.data_focus;
+ delete pg_area_resize_handlers.kbd_focus;
+
return true;
}
function pg_setdatafocus(a)
{
+ if (!a) return false;
+
var x = getPageX(a.layer)+a.x;
var y = getPageY(a.layer)+a.y;
var w = a.width;
var h = a.height;
var l = a.layer;
+
+ // Setup resize handling.
+ pg_area_resize_handlers.data_focus = () => {
+ // Recall function to update values.
+ pg_setdatafocus(a);
+ };
// hide old data focus box
if (l.pg_dttop != null)
@@ -2015,16 +2116,36 @@ function pg_setdatafocus(a)
// draw new data focus box
if (cx__capabilities.Dom0NS)
{
- pg_mkbox(l,x-1,y-1,w+2,h+2, 1, l.pg_dttop,l.pg_dtbtm,l.pg_dtrgt,l.pg_dtlft, page.dtcolor1, page.dtcolor2, document.layers.pgtop.zIndex+100);
+ pg_init_box({
+ parent_layer: l,
+ x: x - 1, y: y - 1, w: w + 2, h: h + 2, s: 1,
+ top_layer: l.pg_dttop,
+ bottom_layer: l.pg_dtbtm,
+ right_layer: l.pg_dtrgt,
+ left_layer: l.pg_dtlft,
+ color1: page.dtcolor1, color2: page.dtcolor2,
+ z: document.layers.pgtop.zIndex + 100,
+ });
}
else if (cx__capabilities.Dom1HTML)
{
- pg_mkbox(l,x-1,y-1,w+2,h+2, 1, l.pg_dttop,l.pg_dtbtm,l.pg_dtrgt,l.pg_dtlft, page.dtcolor1, page.dtcolor2, pg_get_style(document.getElementById("pgtop"),'zIndex')+100);
+ pg_init_box({
+ parent_layer: l,
+ x: x - 1, y: y - 1, w: w + 2, h: h + 2, s: 1,
+ top_layer: l.pg_dttop,
+ bottom_layer: l.pg_dtbtm,
+ right_layer: l.pg_dtrgt,
+ left_layer: l.pg_dtlft,
+ color1: page.dtcolor1, color2: page.dtcolor2,
+ z: pg_get_style(document.getElementById("pgtop"),'zIndex') + 100,
+ });
}
}
function pg_setkbdfocus(l, a, xo, yo)
{
+ if (!l) return false;
+
var from_kbd = false;
if (xo == null && yo == null)
{
@@ -2056,23 +2177,27 @@ function pg_setkbdfocus(l, a, xo, yo)
pg_curkbdarea = a;
pg_curkbdlayer = l;
+ // Setup resize handling.
+ pg_area_resize_handlers.kbd_focus = () => {
+ // Recall function to update values.
+ pg_setkbdfocus(l, a, xo, yo);
+ };
+
if (pg_curkbdlayer && pg_curkbdlayer.getfocushandler)
{
v=pg_curkbdlayer.getfocushandler(xo,yo,a.layer,a.cls,a.name,a,from_kbd);
if (v & 1)
{
- // mk box for kbd focus
- //if (prevArea != a)
- // {
- // if (cx__capabilities.Dom0NS)
- // {
- // pg_mkbox(l ,x,y,w,h, 1, document.layers.pgktop,document.layers.pgkbtm,document.layers.pgkrgt,document.layers.pgklft, page.kbcolor1, page.kbcolor2, document.layers.pgtop.zIndex+100);
- // }
- // else if (cx__capabilities.Dom1HTML)
- // {
- pg_mkbox(l ,x,y,w,h, 1, document.getElementById("pgktop"),document.getElementById("pgkbtm"),document.getElementById("pgkrgt"),document.getElementById("pgklft"), page.kbcolor1, page.kbcolor2, htr_getzindex(document.getElementById("pgtop"))+100);
- // }
- // }
+ pg_init_box({
+ parent_layer: l,
+ x, y, w, h, s: 1,
+ top_layer: document.getElementById("pgktop"),
+ bottom_layer: document.getElementById("pgkbtm"),
+ right_layer: document.getElementById("pgkrgt"),
+ left_layer: document.getElementById("pgklft"),
+ color1: page.kbcolor1, color2: page.kbcolor2,
+ z: htr_getzindex(document.getElementById("pgtop")) + 100,
+ });
}
if (v & 2)
{
@@ -3028,9 +3153,12 @@ function pg_check_resize(l)
{
if (wgtrGetServerProperty(l, "height") != $(l).height())
{
- if (wgtrGetParent(l).childresize)
+ const parent = wgtrGetParent(l);
+ if (parent.childresize)
{
- var geom = wgtrGetParent(l).childresize(l, wgtrGetServerProperty(l, "width"), wgtrGetServerProperty(l, "height"), $(l).width(), $(l).height());
+ const width = wgtrGetServerProperty(l, "width");
+ const height = wgtrGetServerProperty(l, "height");
+ const geom = parent.childresize(l, width, height, $(l).width(), $(l).height());
if (geom)
{
wgtrSetServerProperty(l, "height", geom.height);
diff --git a/centrallix-os/sys/js/htdrv_page_moz.js b/centrallix-os/sys/js/htdrv_page_moz.js
deleted file mode 100644
index bf84f15e8..000000000
--- a/centrallix-os/sys/js/htdrv_page_moz.js
+++ /dev/null
@@ -1,268 +0,0 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
-//
-// You may use these files and this library under the terms of the
-// GNU Lesser General Public License, Version 2.1, contained in the
-// included file "COPYING" or http://www.gnu.org/licenses/lgpl.txt.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Lesser General Public License for more details.
-
-
-function pg_ping_init(param)
- {
- var l = param.layer;
- var i = param.i;
- l.tid=setInterval(pg_ping_send,i,l);
- }
-
-
-function pg_ping_recieve()
- {
- this.removeEventListener('load',pg_ping_recieve,false);
- if(this.contentDocument.getElementsByTagName('a')[0].target!=='OK')
- {
- clearInterval(this.tid);
- confirm('you have been disconnected from the server');
- }
- }
-
-
-function pg_ping_send(p)
- {
- if(p.addEventListener)
- p.addEventListener('load',pg_ping_recieve,false);
- //else
- // p.onload=pg_ping_recieve;
- p.src='/INTERNAL/ping';
- }
-
-/** Function to set modal mode to a layer. **/
-function pg_setmodal(l)
- {
- pg_modallayer = l;
- }
-
-/** Function to find out whether image or layer is in a layer **/
-function pg_isinlayer(outer,inner)
- {
- if (inner == outer) return true;
- if(!outer) return true;
- if(!inner) return false;
- var i = 0;
- var olist = outer.getElementsByTagName('iframe');
- for(i=0;i maxheight)
- maxheight = cl.y + cl.clip.height;
- if ((cl.visibility == 'show' || cl.visibility == 'inherit') && cl.x + cl.clip.width > maxwidth)
- maxwidth = cl.x + cl.clip.width;
- }
- if (l.maxheight && maxheight > l.maxheight) maxheight = l.maxheight;
- if (l.minheight && maxheight < l.minheight) maxheight = l.minheight;
- if (l!=window) l.clip.height = maxheight;
- else l.document.height = maxheight;
- if (l.maxwidth && maxwidth > l.maxwidth) maxwidth = l.maxwidth;
- if (l.minwidth && maxwidth < l.minwidth) maxwidth = l.minwidth;
- if (l!=window) l.clip.width = maxwidth;
- else l.document.width = maxwidth;
- }
-
-/** Add a universal "is visible" function that handles inherited visibility. **/
-function pg_isvisible(l)
- {
- if (l.visibility == 'show') return 1;
- else if (l.visibility == 'hidden') return 0;
- else if (l == window || l.parentLayer == null) return 1;
- else return pg_isvisible(l.parentLayer);
- }
-
-/** Cursor flash **/
-function pg_togglecursor()
- {
- if (pg_curkbdlayer != null && pg_curkbdlayer.cursorlayer != null)
- {
- if (pg_curkbdlayer.cursorlayer.visibility != 'inherit')
- pg_curkbdlayer.cursorlayer.visibility = 'inherit';
- else
- pg_curkbdlayer.cursorlayer.visibility = 'hidden';
- }
- setTimeout(pg_togglecursor,333);
- }
-
-
-
-/** Keyboard input handling **/
-function pg_addkey(s,e,mod,modmask,mlayer,klayer,tgt,action,aparam)
- {
- kd = new Object();
- kd.startcode = s;
- kd.endcode = e;
- kd.mod = mod;
- kd.modmask = modmask;
- kd.mouselayer = mlayer;
- kd.kbdlayer = klayer;
- kd.target_obj = tgt;
- kd.fnname = 'Action' + action;
- kd.aparam = aparam;
- pg_keylist.splice(0,0,kd);
- pg_keylist.sort(pg_cmpkey);
- return kd;
- }
-
-
-function pg_cmpkey(k1,k2)
- {
- return (k1.endcode-k1.startcode) - (k2.endcode-k2.startcode);
- }
-
-function pg_removekey(kd)
- {
- for(i=0;i= pg_keylist[i].startcode && k <= pg_keylist[i].endcode && (pg_keylist[i].kbdlayer == null || pg_keylist[i].kbdlayer == pg_curkbdlayer) && (pg_keylist[i].mouselayer == null || pg_keylist[i].mouselayer == pg_curlayer) && (m & pg_keylist[i].modmask) == pg_keylist[i].mod)
- {
- pg_keylist[i].aparam.KeyCode = k;
- pg_keylist[i].target_obj[pg_keylist[i].fnname](pg_keylist[i].aparam);
- return false;
- }
- }
- return false;
- }
-
-
-// Load indication
-if (window.pg_scripts) pg_scripts['htdrv_page_moz.js'] = true;
diff --git a/centrallix-os/sys/js/htdrv_pane.js b/centrallix-os/sys/js/htdrv_pane.js
index dfdb597ad..7e9ce94fb 100644
--- a/centrallix-os/sys/js/htdrv_pane.js
+++ b/centrallix-os/sys/js/htdrv_pane.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -79,16 +79,21 @@ function pn_setbackground(aparam)
function pn_action_resize(aparam)
{
- var w = aparam.Width?aparam.Width:pg_get_style(this, 'width');
- var h = aparam.Height?aparam.Height:pg_get_style(this, 'height');
+ const { Width, Height } = aparam;
+
+ // Log warning.
+ console.warn('Resize action used: This breaks page responsiveness.');
+ console.log(`Action Info: Width=${Width} Height=${Height} Target=`, this);
+
+ // Resize the pane.
+ const w = Width ?? pg_get_style(this, 'width');
+ const h = Height ?? pg_get_style(this, 'height');
resizeTo(this, w, h);
}
function pn_action_point(aparam)
{
- var divs = htutil_point(this, aparam.X, aparam.Y, aparam.AtWidget, aparam.BorderColor, aparam.FillColor, this.point1, this.point2);
- this.point1 = divs.p1;
- this.point2 = divs.p2;
+ htr_action_point(this, aparam);
}
function pn_init(param)
diff --git a/centrallix-os/sys/js/htdrv_radiobutton.js b/centrallix-os/sys/js/htdrv_radiobutton.js
index 5b106deb9..e019c09d2 100644
--- a/centrallix-os/sys/js/htdrv_radiobutton.js
+++ b/centrallix-os/sys/js/htdrv_radiobutton.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -37,7 +37,6 @@ function rb_setvalue(v) {
}
}
this.clearvalue();
- //alert('Warning: "'+v+'" is not in the radio button list.');
}
function rb_cb_getvalue(p) {
@@ -104,12 +103,8 @@ function add_radiobutton(optionPane, param) {
var rb = wgtrGetParent(optionPane);
rb.rbCount++;
optionPane.valueIndex = rb.rbCount;
- /*optionPane.kind = 'radiobutton';
- optionPane.document.layer = optionPane;*/
htr_init_layer(optionPane, rb, 'radiobutton');
- //optionPane.mainlayer = rb;
optionPane.optionPane = optionPane;
- optionPane.isSelected = param.selected;
optionPane.valueStr = param.valuestr;
optionPane.labelStr = param.labelstr;
@@ -151,8 +146,14 @@ function add_radiobutton(optionPane, param) {
htr_setvisibility(optionPane.unsetPane, 'inherit');
}
- optionPane.yOffset = getRelativeY(optionPane)+getRelativeY(rb.coverPane)+getRelativeY(rb.borderPane);
- pg_addarea(rb, getRelativeX(optionPane), optionPane.yOffset, getClipWidth(optionPane), pg_parah+4, optionPane, 'rb', 3);
+ const yOffset = getRelativeY(rb.coverPane) + getRelativeY(rb.borderPane) - 1;
+ optionPane.area = pg_addarea(rb,
+ () => getRelativeX(optionPane) + 2,
+ () => getRelativeY(optionPane) + yOffset,
+ () => getRelativeW(optionPane) + 2,
+ () => getRelativeH(optionPane) + 3,
+ optionPane, 'rb', 3
+ );
}
function rb_getfocus(xo,yo,l,c,n,a,from_kbd)
@@ -347,8 +348,6 @@ function rb_changemode(){
for (var i=0;i e.forEach(({ target }) => {
+ target.UpdateThumb();
+}));
+
+
+function sp_init({ layer: pane, area_name, thumb_name })
{
- var l = param.layer;
- var alayer=null;
- var tlayer=null;
- var ml;
- var img;
- var i;
- if(cx__capabilities.Dom0NS)
- {
- var layers = pg_layers(l);
- for(i=0;i 100) aparam.Percent = 100;
- setRelativeY(this.area, -d*aparam.Percent/100);
+ const { bottom } = child.getBoundingClientRect();
+ if (bottom > maxBottom) maxBottom = bottom;
}
- else if (typeof aparam.Offset != 'undefined')
+ area.content_height = Math.max(0, Math.round(maxBottom - top));
+
+ /** Watch for changes in content height. **/
+ if (cx__capabilities.Dom0IE)
{
- if (aparam.Offset < 0) aparam.Offset = 0;
- else if (aparam.Offset > d) aparam.Offset = d;
- setRelativeY(this.area, -aparam.Offset);
+ area.runtimeStyle.clip.pane = pane;
+ // how to watch this in IE?
+ area.runtimeStyle.clip.onpropertychange = sp_WatchHeight;
}
- else if (typeof aparam.RangeStart != 'undefined' && typeof aparam.RangeEnd != 'undefined')
+ else
{
- var ny = -getRelativeY(this.area);
- if (ny + ch < aparam.RangeEnd) ny = aparam.RangeEnd - ch;
- if (ny > aparam.RangeStart) ny = aparam.RangeStart;
- if (ny < 0) ny = 0;
- if (ny > d) ny = d;
- setRelativeY(this.area, -ny);
+ area.clip.pane = pane;
+ area.clip.watch("height", sp_WatchHeight);
}
- this.UpdateThumb(h);
}
-function sp_WatchHeight(property, oldvalue, newvalue)
+/** ========== Getter functions ========== **/
+/** Functions to compute common values needed often in this code. **/
+
+/** @returns The height of content inside the scrollpane (even if not all of it is visible). **/
+function sp_get_content_height(area)
+ {
+ return area.content_height;
+ }
+
+/** @returns The height of visible area available to the scrollpane. **/
+function sp_get_available_height(pane)
+ {
+ return parseInt(getComputedStyle(pane).height);
+ }
+
+/** @returns The height of the content outside the available visible area of the scrollpane. **/
+function sp_get_nonvisible_height(pane)
+ {
+ return sp_get_content_height(pane.area) - sp_get_available_height(pane);
+ }
+
+/** @returns The height of visible area available to the scroll bar. **/
+function sp_get_scrollbar_height(pane)
+ {
+ /** The up and down buttons and thumb are each 18px. **/
+ return sp_get_available_height(pane) - (3*18);
+ }
+
+/** @returns The distance down that the scrollpane has been scrolled. **/
+function sp_get_scroll_dist(area)
+ {
+ return -getRelativeY(area);
+ }
+
+
+/*** Update the scrollpane to handle the height of its contained content
+ *** (aka. its child widgets) changing.
+ ***
+ *** @param property Unused
+ *** @param old_value The old height of the child content (unused).
+ *** @param new_value The new height of the child content.
+ ***/
+function sp_WatchHeight(property, old_value, new_value)
{
+ const { pane } = this;
+ const { area } = pane;
+
+ /** Handle legacy Internet Explorer behavior. **/
if (cx__capabilities.Dom0IE)
- {
- newvalue = htr_get_watch_newval(window.event);
- }
-
- // make sure region not offscreen now
- newvalue += getClipTop(this.pane.area);
- if (getRelativeY(this.pane.area) + newvalue < getClipHeight(this.pane)) setRelativeY(this.pane.area, getClipHeight(this.pane) - newvalue);
- if (newvalue < getClipHeight(this.pane)) setRelativeY(this.pane.area, 0);
- this.pane.UpdateThumb(newvalue);
- newvalue -= getClipTop(this.pane.area);
- this.bottom = this.top + newvalue; /* ns seems to unlink bottom = top + height if you modify clip obj */
- return newvalue;
+ new_value = htr_get_watch_newval(window.event);
+
+ /** Update the internal content height value. **/
+ area.content_height = new_value;
+
+ /** Get the available height of the visible area. **/
+ const available_height = sp_get_available_height(pane);
+
+ /** Scroll to the top if the content is now smaller than the visible area. **/
+ if (getRelativeY(area) + new_value < available_height)
+ setRelativeY(area, available_height - new_value);
+ if (new_value < available_height) setRelativeY(area, 0);
+
+ /** Update the scroll thumb. **/
+ pane.UpdateThumb();
+
+ return new_value;
}
-function sp_UpdateThumb(h)
+/** Called when the ScrollTo action is used. **/
+function sp_action_ScrollTo({ Percent, Offset, RangeStart, RangeEnd })
{
- /** 'this' is a spXpane **/
- if(!h)
- { /** if h is supplied, it is the soon-to-be clip.height of the spXarea **/
- h=getClipHeight(this.area)+getClipTop(this.area); // height of content
- }
- var d=h-getClipHeight(this); // height of non-visible content (max scrollable distance)
- var v=getClipHeight(this)-(3*18);
- if(d<=0)
- setRelativeY(this.thum, 18);
- else
- setRelativeY(this.thum, 18+v*(-getRelativeY(this.area)/d));
+ const pane = this;
+ const available = sp_get_available_height(pane);
+ const nonvisible_height = sp_get_nonvisible_height(pane); // Height of non-visible content.
+
+ /** Ignore the action if all content is visible. **/
+ if (nonvisible_height <= 0) return;
+
+ /** Calculate the new location to scroll to. **/
+ const new_scroll_height =
+ (Offset !== undefined) ? Offset :
+ (Percent !== undefined) ? Math.clamp(0, Percent / 100, 1) * nonvisible_height :
+ (RangeStart !== undefined && RangeEnd !== undefined) ?
+ Math.clamp(RangeEnd - available, sp_get_scroll_dist(pane.area), RangeStart) :
+ 0; /* Fallback default value. */
+
+ /** Scroll to the new location. **/
+ sp_scroll_to(pane, new_scroll_height);
}
-function do_mv()
+/** Recalculate and update the location of the scroll thumb. **/
+function sp_update_thumb()
{
+ const pane = this;
+ const { area, thumb } = pane;
- var ti=sp_target_img;
- /** not sure why, but it's getting called with a null sp_target_img sometimes... **/
- if(!ti)
+ /** Get the height of nonvisible content. **/
+ const nonvisible_height = sp_get_nonvisible_height(pane);
+
+ /** Handle the case where all content is visible. **/
+ if (nonvisible_height <= 0)
{
+ /** All we need to do is to move the scroll thumb to the top. **/
+ setRelativeY(thumb, 18);
return;
}
- var h=getClipHeight(ti.area)+getClipTop(ti.area); // height of content
- var d=h-getClipHeight(ti.pane); // height of non-visible content (max scrollable distance)
- var incr=sp_mv_incr;
- if(d<0)
- incr=0;
- if (ti.kind=='sp')
+
+ /** Calculate where the scroll thumb should be based on the scroll progress. **/
+ let scroll_dist = sp_get_scroll_dist(area);
+ if (scroll_dist > nonvisible_height)
{
- var scrolled = -getRelativeY(ti.area); // distance scrolled already
- if(incr > 0 && scrolled+incr>d)
- incr=d-scrolled;
+ /** Scroll down to fill the new space at the bottom of the scrollpane. **/
+ setRelativeY(area, -nonvisible_height);
+ scroll_dist = nonvisible_height;
+ }
+ const progress = scroll_dist / nonvisible_height;
+ const progress_scaled = 18 + sp_get_scrollbar_height(pane) * progress;
+
+ /** Set the scroll thumb to the calculated location. **/
+ setRelativeY(thumb, progress_scaled);
+ }
- /** if we've scrolled down less than we want to go up, go up the distance we went down **/
- if(incr < 0 && scrolled<-incr)
- incr=-scrolled;
+/*** Scroll the scrollpane to the specified `scroll_height`.
+ ***
+ *** @param pane The affected scrollpane DOM node.
+ *** @param scroll_height The new height, in pixels, that the content should
+ *** be scrolled to as a result of this scroll.
+ ***/
+function sp_scroll_to(pane, scroll_height)
+ {
+ /** Ignore undefined target pane. **/
+ if (!pane) return;
+
+ /** Don't scroll if there's no content to scroll. **/
+ const nonvisible_height = sp_get_nonvisible_height(pane);
+ if (nonvisible_height < 0) return;
+
+ /** Save the current scroll amount for later. **/
+ const scroll_height_old = sp_get_scroll_dist(pane.area);
+
+ /** Clamp the scroll height within the bounds of the scroll bar. **/
+ const scroll_height_new = Math.clamp(0, scroll_height, nonvisible_height);
+
+ /** Update the content. **/
+ setRelativeY(pane.area, -scroll_height_new);
+ pane.UpdateThumb();
+
+ /** Construct the param for the centrallix 'Scroll' event. **/
+ const percent_old = (scroll_height_old / nonvisible_height) * 100;
+ const percent_new = (scroll_height_new / nonvisible_height) * 100;
+ const param = { Percent: percent_new, Change: percent_new - percent_old };
+
+ /** Schedule the scroll event to allow the page to repaint first. **/
+ setTimeout(() => cn_activate(pane, 'Scroll', param), 0);
+ }
- /*var layers = pg_layers(ti.pane);
- for(var i=0;i getPageY(ti.pane)+18+v) new_y=getPageY(ti.pane)+18+v;
- if (new_y < getPageY(ti.pane)+18) new_y=getPageY(ti.pane)+18;
- setPageY(ti.thum,new_y);
- var h=getClipHeight(ti.area)+getClipTop(ti.area);
- var d=h-getClipHeight(ti.pane);
- if (d<0) d=0;
- var yincr = (((getRelativeY(ti.thum)-18)/v)*-d) - getRelativeY(ti.area);
- moveBy(ti.area, 0, yincr);
- return EVENT_HALT | EVENT_PREVENT_DEFAULT_ACTION;
- }
+ /** Trigger Centrallix events. **/
+ const pane = sp_get_pane(e);
+ if (pane) cn_activate(pane, 'MouseMove');
+
+ /** Monitor events on other DOM nodes to detect MouseOut. **/
+ if (!pane && sp_target_mainlayer)
+ {
+ /** Mouse out has occurred, ending the mouse over. **/
+ cn_activate(sp_target_mainlayer, 'MouseOut');
+ sp_target_mainlayer = undefined;
+ }
+
+ /** Check if a drag is in progress (aka. the drag target exists and is a scroll thumb). **/
+ const target_img = sp_drag_img;
+ if (target_img && target_img.kind === 'sp' && target_img.name === 't')
+ {
+ const { pane } = target_img;
+
+ /** Get drag_dist: the distance that the scroll bar should move. **/
+ const page_y = getPageY(target_img.thumb);
+ const drag_dist = e.pageY - page_y;
+
+ /** Scale drag_dist to the distance that the content should move. **/
+ const scrollbar_height = sp_get_scrollbar_height(pane);
+ const nonvisible_height = sp_get_nonvisible_height(pane);
+ const content_drag_dist = (drag_dist / scrollbar_height) * nonvisible_height;
+
+ /** Scroll the content by the required amount to reach the new mouse location. **/
+ sp_scroll(target_img.pane, content_drag_dist);
+
+ /** Event handled. **/
+ return EVENT_HALT | EVENT_PREVENT_DEFAULT_ACTION;
+ }
+
+ /** Continue the event. **/
return EVENT_CONTINUE | EVENT_ALLOW_DEFAULT_ACTION;
}
+/*** Handles mouse up events anywhere on the page.
+ ***
+ *** @param e The event that has occurred.
+ *** @returns An event result (see ht_render.js).
+ ***/
function sp_mouseup(e)
{
- if (sp_mv_timeout != null)
- {
- clearTimeout(sp_mv_timeout);
- sp_mv_timeout = null;
- sp_mv_incr = 0;
- }
- if (sp_target_img != null)
- {
- if (sp_target_img.name != 'b')
- pg_set(sp_target_img,'src',htutil_subst_last(sp_target_img.src,"b.gif"));
- sp_target_img = null;
- }
- if (e.kind == 'sp') cn_activate(e.mainlayer, 'MouseUp');
+ /** Trigger Centrallix events. **/
+ if (e.kind === 'sp')
+ {
+ const params = sp_get_event_params(e);
+ cn_activate(e.mainlayer, 'MouseUp', params);
+ if (sp_click_in_progress)
+ cn_activate(e.mainlayer, 'Click', params);
+ }
+
+ /** A click is no longer in progress. **/
+ sp_click_in_progress = false;
+
+ /** Check for an active drag. **/
+ if (sp_drag_img)
+ {
+ /** End the drag. **/
+ sp_drag_img = undefined;
+ }
+
+ /** Check for a pressed button. **/
+ if (sp_button_img)
+ {
+ /** Reset the pressed button. **/
+ pg_set(sp_button_img, 'src', htutil_subst_last(sp_button_img.src, "b.gif"));
+ sp_button_img = undefined;
+ }
+
+ /** Continue the event. **/
return EVENT_CONTINUE | EVENT_ALLOW_DEFAULT_ACTION;
}
+/*** Handles mouse over events anywhere on the page.
+ ***
+ *** @param e The event that has occurred.
+ *** @returns An event result (see ht_render.js).
+ ***/
function sp_mouseover(e)
{
- if (e.kind == 'sp')
- {
- if (!sp_cur_mainlayer)
- {
- cn_activate(e.mainlayer, 'MouseOver');
- sp_cur_mainlayer = e.mainlayer;
- }
- }
+ /** Check for mouse over on an sp element. **/
+ if (sp_target_mainlayer && e.kind === 'sp')
+ {
+ /** Begin a mouse over. **/
+ cn_activate(e.mainlayer, 'MouseOver');
+ sp_target_mainlayer = e.mainlayer;
+ }
+
+ /** Continue the event. **/
return EVENT_CONTINUE | EVENT_ALLOW_DEFAULT_ACTION;
}
-// Load indication
+/** Indicate loading is complete. **/
if (window.pg_scripts) pg_scripts['htdrv_scrollpane.js'] = true;
diff --git a/centrallix-os/sys/js/htdrv_tab.js b/centrallix-os/sys/js/htdrv_tab.js
index ebab8b6b6..f043853bc 100644
--- a/centrallix-os/sys/js/htdrv_tab.js
+++ b/centrallix-os/sys/js/htdrv_tab.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2004 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -9,7 +9,6 @@
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Lesser General Public License for more details.
-
// Sets the value of the current tab (but not the appearance), without
// triggering on-change events.
function tc_set_tab_unwatched()
@@ -27,189 +26,219 @@ function tc_set_tab_unwatched()
// Makes the given tab current.
function tc_makecurrent()
{
- var t;
- if (this.tabctl.tloc != 4 && htr_getzindex(this.tab) > htr_getzindex(this.tabctl)) return 0;
- for(var i=0;i htr_getzindex(t)) return 0;
+ for(let i = 0; i < tabs.length; i++)
{
- t = this.tabctl.tabs[i];
- if (t != this && (t.tabctl.tloc == 4 || htr_getzindex(t.tab) > htr_getzindex(this.tab)))
+ const cur = tabs[i];
+ if (cur !== this && (cur.tabctl.tloc === 'None' || htr_getzindex(cur.tab) > htr_getzindex(tab)))
{
- htr_setzindex(t, htr_getzindex(this.tabctl) - 1);
- htr_setvisibility(t, 'hidden');
- if (t.tabctl.tloc != 4)
+ htr_setzindex(cur, htr_getzindex(t) - 1);
+ htr_setvisibility(cur, 'hidden');
+ if (cur.tabctl.tloc !== 'None')
{
- htr_setzindex(t.tab, htr_getzindex(this.tabctl) - 1);
- t.tab.marker_image.src = '/sys/images/tab_lft3.gif';
- moveBy(t.tab, this.tabctl.xo, this.tabctl.yo);
- //setClipItem(t.tab, t.tabctl.cl, getClipItem(t.tab, t.tabctl.cl) + t.tabctl.ci);
- if (this.tabctl.inactive_bgColor) htr_setbgcolor(t.tab, this.tabctl.inactive_bgColor);
- if (this.tabctl.inactive_bgnd) htr_setbgimage(t.tab, this.tabctl.inactive_bgnd);
+ htr_setzindex(cur.tab, htr_getzindex(t) - 1);
+ cur.tab.marker_image.src = '/sys/images/tab_lft3.gif';
+ cur.tab.classList.remove('tab_selected');
+ if (t.inactive_bgColor) htr_setbgcolor(cur.tab, t.inactive_bgColor);
+ if (t.inactive_bgnd) htr_setbgimage(cur.tab, t.inactive_bgnd);
}
}
}
- htr_setzindex(this, htr_getzindex(this.tabctl) + 1);
+ htr_setzindex(this, htr_getzindex(t) + 1);
htr_setvisibility(this,'inherit');
- if (this.tabctl.tloc != 4)
+ if (tloc !== 'None')
{
- if (this.tabctl.main_bgColor) htr_setbgcolor(this.tab, this.tabctl.main_bgColor);
- if (this.tabctl.main_bgnd) htr_setbgimage(this.tab, this.tabctl.main_bgnd);
- htr_setzindex(this.tab, htr_getzindex(this.tabctl) + 1);
- this.tab.marker_image.src = '/sys/images/tab_lft2.gif';
- moveBy(this.tab, -this.tabctl.xo, -this.tabctl.yo);
- //setClipItem(this.tab, this.tabctl.cl, getClipItem(this.tab, this.tabctl.cl) - this.tabctl.ci);
+ if (t.main_bgColor) htr_setbgcolor(tab, t.main_bgColor);
+ if (t.main_bgnd) htr_setbgimage(tab, t.main_bgnd);
+ htr_setzindex(tab, htr_getzindex(t) + 1);
+ tab.marker_image.src = '/sys/images/tab_lft2.gif';
+ tab.classList.add('tab_selected');
}
this.setTabUnwatched();
- this.tabctl.ifcProbe(ifEvent).Activate("TabChanged", {Selected:this.tabctl.selected, SelectedIndex:this.tabctl.selected_index});
+
+ // Activate the Centrallix TabChanged event.
+ t.ifcProbe(ifEvent).Activate("TabChanged", {
+ Selected:t.selected,
+ SelectedIndex:t.selected_index,
+ });
}
-function tc_makenotcurrent(t)
+function tc_makenotcurrent(page)
{
- htr_setzindex(t,htr_getzindex(t.tabctl) - 1);
- htr_setvisibility(t,'hidden');
- if (t.tabctl.tloc != 4)
+ const { tabctl, tab } = page;
+
+ htr_setzindex(page, htr_getzindex(tabctl) - 1);
+ htr_setvisibility(page, 'hidden');
+
+ if (tabctl.tloc !== 'None')
{
- htr_setzindex(t.tab,htr_getzindex(t.tabctl) - 1);
- t.tab.marker_image.src = '/sys/images/tab_lft3.gif';
- moveBy(t.tab, t.tabctl.xo, t.tabctl.yo);
- //setClipItem(t.tab, t.tabctl.cl, getClipItem(t.tab, t.tabctl.cl) + t.tabctl.ci);
- if (t.tabctl.inactive_bgColor) htr_setbgcolor(t.tab, t.tabctl.inactive_bgColor);
- if (t.tabctl.inactive_bgnd) htr_setbgimage(t.tab, t.tabctl.inactive_bgnd);
+ htr_setzindex(page.tab,htr_getzindex(page.tabctl) - 1);
+ tab.marker_image.src = '/sys/images/tab_lft3.gif';
+ tab.classList.remove('tab_selected');
+ if (tabctl.inactive_bgColor) htr_setbgcolor(tab, tabctl.inactive_bgColor);
+ if (tabctl.inactive_bgnd) htr_setbgimage(tab, tabctl.inactive_bgnd);
}
}
-
-// Adds a new tab to the tab control
-function tc_addtab(l_tab, l_page, l, nm, type,fieldname)
+
+/*** Adds a new tab to the tab control. This function deals with whether or
+ *** not that tab is selected as LITTLE AS POSSIBLE since that piece of state
+ *** should be handled elsewhere with functions like tc_makenotcurrent() or
+ *** tc_makecurrent().
+ ***
+ *** @param param The object containing parameters for the function.
+ *** @param param.l_tab The tab to be added.
+ *** @param param.l_page The page to which the tab shall be added.
+ *** @param param.name The name of the tab.
+ *** @param param.type The type of the tab.
+ *** @param param.fieldname The fieldname of the tab.
+ ***/
+function tc_add_tab(param)
{
- var newx;
- var newy;
- if (!l_tab) l_tab = new Object();
- l_page.tabname = nm;
+ const { tab, page, name, type, fieldname } = param;
+ const tabctl = this, { tloc, tab_h, tab_spacing, tabs } = tabctl;
+ const l_tab = tab ?? {}, l_page = page;
+
+ let x, y;
+ l_page.tabname = name;
l_page.type = type;
l_page.fieldname = fieldname;
- l_page.tabindex = this.tabs.length+1;
- htr_init_layer(l_page,l,'tc_pn');
+ l_page.tabindex = tabs.length + 1;
+ htr_init_layer(l_page, tabctl, 'tc_pn');
ifc_init_widget(l_page);
- if (l.tloc != 4)
+
+ // Calculate the location and flexibility to render the tab.
+ if (tloc === 'None')
+ {
+ x = 0;
+ y = 0;
+ }
+ else
{
- htr_init_layer(l_tab,l,'tc');
- if (l.tloc == 0 || l.tloc == 1) // top or bottom
+ htr_init_layer(l_tab, tabctl, 'tc');
+
+ /** Calculate x coordinate. **/
+ if (tloc === 'Top' || tloc === 'Bottom')
{
- if (this.tabs.length > 0)
+ if (tabs.length > 0)
+ {
+ const previous_tab = tabs[tabs.length - 1].tab;
+ x = getRelativeX(previous_tab) + $(previous_tab).outerWidth() + tab_spacing;
+ }
+ else if (tabctl.tab_fl_x)
{
- //alert(htr_getphyswidth(this.tabs[this.tabs.length-1]));
- newx = getPageX(this.tabs[this.tabs.length-1].tab) + $(this.tabs[this.tabs.length-1].tab).outerWidth() + 1;
- if (htr_getvisibility(this.tabs[this.tabs.length-1]) == 'inherit') newx += l.xo;
+ // Copy tabctl.style.left to avoid small but noticeable inconsistencies.
+ setRelativeX(l_tab, tabctl.style.left);
}
else
- newx = getPageX(this);
+ {
+ // Math for inflexible tabs do not suffer from the inconsistencies handled above.
+ x = getRelativeX(tabctl);
+ }
}
- else if (l.tloc == 2) // left
- newx = getPageX(this)- htr_getviswidth(l_tab) + 0;
- else if (l.tloc == 3) // right
- newx = getPageX(this) + htr_getviswidth(this) + 1;
+ else if (tloc === 'Left')
+ x = getRelativeX(tabctl) - htr_getviswidth(l_tab);
+ else // Right
+ x = getRelativeX(tabctl); // Included in xtoffset (see below)
- if (l.tloc == 2 || l.tloc == 3) // left or right
+ /** Calculate y coordinate. **/
+ if (tloc === 'Left' || tloc === 'Right')
{
- if (this.tabs.length > 0)
+ if (tabs.length > 0)
{
- newy = getPageY(this.tabs[this.tabs.length-1].tab) + 26;
- if (htr_getvisibility(this.tabs[this.tabs.length-1]) == 'inherit') newy += l.yo;
+ const previous_tab = tabs[tabs.length - 1].tab;
+ y = getRelativeY(previous_tab) + tab_h + tab_spacing;
}
+ else if (tabctl.tab_fl_y)
+ /** Copy tabctl.style.top to avoid small but noticeable inconsistencies. **/
+ setRelativeY(l_tab, tabctl.style.top);
else
- newy = getPageY(this);
+ /** Math for inflexible tabs do not suffer from inconsistencies. * */
+ y = getRelativeY(tabctl);
}
- else if (l.tloc == 1) // bottom
- newy = getPageY(this)+ htr_getvisheight(this) + 1;
- else // top
- newy = getPageY(this) - 24;
-
- // Clipping
- switch(l.tloc)
+ else if (tloc === 'Bottom')
+ y = getRelativeY(tabctl); // Included in ytoffset (see below)
+ else // Top
+ y = getRelativeY(tabctl) - tab_h;
+
+ /** Apply the same tab offsets used on the server. **/
+ x += tabctl.xtoffset;
+ y += tabctl.ytoffset;
+
+ // Space out tab away from previous tab to account for borders.
+ if (tabs.length > 0)
{
- case 0: // top
- $(l_tab).css('clip', 'rect(-10px, ' + ($(l_tab).outerWidth()+10) + 'px, 25px, -10px)');
- break;
- case 1: // bottom
- $(l_tab).css('clip', 'rect(0px, ' + ($(l_tab).outerWidth()+10) + 'px, 35px, -10px)');
- break;
- case 2: // left
- $(l_tab).css('clip', 'rect(-10px, ' + ($(l_tab).outerWidth()) + 'px, 35px, -10px)');
- break;
- case 3: // right
- $(l_tab).css('clip', 'rect(-10px, ' + ($(l_tab).outerWidth()+10) + 'px, 35px, 0px)');
- break;
+ switch (tloc)
+ {
+ case 'Top': case 'Bottom': x += 2; break;
+ case 'Left': case 'Right': y += 2; break;
+ }
}
}
- else
- {
- newx = 0;
- newy = 0;
- }
- if (htr_getvisibility(l_page) != 'inherit')
- {
- if (l.tloc != 4)
- {
- newx += l.xo;
- newy += l.yo;
- //setClipItem(l_tab, l.cl, getClipItem(l_tab, l.cl) + l.ci);
- if (l.inactive_bgColor) htr_setbgcolor(l_tab, l.inactive_bgColor);
- else if (l.main_bgColor) htr_setbgcolor(l_tab, l.main_bgColor);
- if (l.inactive_bgnd) htr_setbgimage(l_tab, l.inactive_bgnd);
- else if (l.main_bgnd) htr_setbgimage(l_tab, l.main_bgnd);
- }
- }
- else
+ // Handle visibility.
+ if (htr_getvisibility(l_page) === 'inherit')
{
- htr_unwatch(l,"selected","tc_selection_changed");
- htr_unwatch(l,"selected_index","tc_selection_changed");
- l.selected = l_page.tabname;
- l.selected_index = l_page.tabindex;
- l.current_tab = l_page;
- l.init_tab = l_page;
- pg_addsched_fn(window,"pg_reveal_event",new Array(l_page,l_page,'Reveal'), 0);
- htr_watch(l,"selected", "tc_selection_changed");
- htr_watch(l,"selected_index", "tc_selection_changed");
- if (l.tloc != 4)
+ htr_unwatch(tabctl, "selected", "tc_selection_changed");
+ htr_unwatch(tabctl, "selected_index", "tc_selection_changed");
+ tabctl.selected = l_page.tabname;
+ tabctl.selected_index = l_page.tabindex;
+ tabctl.current_tab = l_page;
+ tabctl.init_tab = l_page;
+ pg_addsched_fn(window, "pg_reveal_event", [l_page, l_page, 'Reveal'], 0);
+ htr_watch(tabctl, "selected", "tc_selection_changed");
+ htr_watch(tabctl, "selected_index", "tc_selection_changed");
+ if (tloc !== 'None')
{
- if (l.main_bgColor) htr_setbgcolor(l_tab, l.main_bgColor);
- if (l.main_bgnd) htr_setbgimage(l_tab, l.main_bgnd);
+ if (tabctl.main_bgColor) htr_setbgcolor(l_tab, tabctl.main_bgColor);
+ if (tabctl.main_bgnd) htr_setbgimage(l_tab, tabctl.main_bgnd);
}
}
- if (l.tloc != 4)
+
+ // Handle images.
+ if (tloc !== 'None')
{
- var images = pg_images(l_tab);
- for(var i=0;i this.tabs.length) return o;
+ if (tabindex < 1 || tabindex > tabs.length) return o;
// okay to change tab.
- //this.tabs[tabindex-1].makeCurrent();
+ //tabs[tabindex-1].makeCurrent();
if (this.selchange_schedid)
pg_delsched(this.selchange_schedid);
- this.selchange_schedid = pg_addsched_fn(this,"ChangeSelection1", new Array(this.tabs[tabindex-1]), 0);
+ this.selchange_schedid = pg_addsched_fn(this, "ChangeSelection1", new Array(tabs[tabindex - 1]), 0);
return n;
}
-function tc_action_set_tab(aparam)
+function tc_action_set_tab({ Tab, TabIndex })
{
- if (aparam.Tab) this.selected = aparam.Tab;
- else if (aparam.TabIndex) this.selected_index = parseInt(aparam.TabIndex);
+ if (Tab) this.selected = Tab;
+ else if (TabIndex) this.selected_index = parseInt(TabIndex);
}
function tc_showcontainer()
@@ -263,13 +294,13 @@ function tc_showcontainer()
function tc_clear_tabs(tabs)
{
- for(var i=0;i![](\"/sys/images/white_1x1.png\")
![](\"/sys/images/tab_lft3.gif\") | "+vals[j]+" | ![](\"/sys/images/dkgrey_1x1.png\") |
\n";
else
- content = "\n | "+vals[j]+" |
\n";
- tabparent = tc_direct_parent(tabs[i]);
+ content =
+ '\n\t' +
+ ' | ' +
+ ' ' + vals[j] + ' | ' +
+ '
\n';
+
+ tabparent = tc_direct_parent(cur_tab);
if(this.tc_layer_cache && this.tc_layer_cache.length >0) newtab = this.tc_layer_cache.pop();
else newtab = htr_new_layer(null,tabparent);
- pageparent = tc_direct_parent(tabs[i].tabpage)
+ pageparent = tc_direct_parent(cur_tab.tabpage)
newpage = htr_new_layer(null,pageparent);
- newtab.marker_image = tabs[i].marker_image;
+ newtab.marker_image = cur_tab.marker_image;
newtab.marker_image.src = '/sys/images/tab_lft3.gif';
$(newtab).find('span').text(' ' + htutil_encode(vals[j]) + ' ');
//htr_write_content(newtab,content);
@@ -343,8 +392,6 @@ function tc_updated(p1)
htr_setvisibility(newpage,'inherit');
htr_setzindex(newtab,14);
this.addTab(newtab,newpage,this,vals[j],'generated','');
- //setClipWidth(newtab,htr_getphyswidth(newtab));
- //setClipHeight(newtab,26);
newpage.osrcdata = vals[j];
newpage.recordnumber = j;
@@ -354,8 +401,8 @@ function tc_updated(p1)
if(targettab)
{
- this.tabs[targettab].makeCurrent();
- this.tabs[targettab].tc_visible_changed('visible','hidden','inherit');
+ tabs[targettab].makeCurrent();
+ tabs[targettab].tc_visible_changed('visible','hidden','inherit');
}
}
}
@@ -367,13 +414,20 @@ function tc_init(param)
var l = param.layer;
htr_init_layer(l,l,'tc');
ifc_init_widget(l);
- l.tabs = new Array();
- l.addTab = tc_addtab;
+ l.tabs = [];
+ l.addTab = tc_add_tab;
l.current_tab = null;
l.init_tab = null;
- l.tloc = param.tloc;
- if (tc_tabs == null) tc_tabs = new Array();
+ l.do_rendering = param.do_client_rendering;
+ l.select_x_offset = param.select_x_offset;
+ l.select_y_offset = param.select_y_offset;
+ l.xtoffset = param.xtoffset;
+ l.ytoffset = param.ytoffset;
+ l.tab_spacing = param.tab_spacing;
+ l.tab_h = param.tab_h;
+ if (tc_tabs == null) tc_tabs = [];
tc_tabs[tc_tabs.length++] = l;
+ l.tloc = param.tloc;
// Background color/image selection...
l.main_bgColor = htr_extract_bgcolor(param.mainBackground);
@@ -422,144 +476,99 @@ function tc_init(param)
l.ChangeSelection2 = tc_changeselection_2;
l.ChangeSelection3 = tc_changeselection_3;
- // Movement geometries and clipping for tabs
- switch(l.tloc)
- {
- case 0: // top
- l.xo = +1;
- l.yo = +2;
- l.cl = "bottom";
- l.ci = -2;
- break;
- case 1: // bottom
- l.xo = +1;
- l.yo = -2;
- l.cl = "top";
- l.ci = +2;
- break;
- case 2: // left
- l.xo = +2;
- l.yo = +1;
- l.cl = "right";
- l.ci = -2;
- break;
- case 3: // right
- l.xo = -2;
- l.yo = +1;
- l.cl = "left";
- l.ci = +2;
- break;
- case 4: // none
- l.xo = 0;
- l.yo = 0;
- l.cl = "bottom";
- l.ci = 0;
- break;
- }
return l;
}
-function tc_visible_changed(prop,o,n)
+/*** Idk what this does...
+ ***
+ *** @param prop Unused, for some reason.
+ *** @param o Unused again...
+ *** @param n If this is true, it makes this.tab inherit visibility. Otherwise, hidden.
+ *** @returns nothing... idk what this is doing.
+ */
+function tc_visible_changed(prop, o, n)
{
- var t = this.tabctl;
- var xo = t.xo;
- var yo = t.yo;
+ const { tabctl: t } = this;
+ const { tabs, tloc } = t;
+
+ if (tloc === 'None') console.warn("tc_visible_changed() called on tab contol with tab_location = none.");
+
if(n) htr_setvisibility(this.tab, 'inherit');
else htr_setvisibility(this.tab, 'hidden');
- // which tab should be selected?
- if(htr_getvisibility(t.tabs[t.selected_index-1].tab)!='inherit')
+
+ /** This nonsense is why we need goto in js. **/
+ const pickSelectedTab = () =>
{
- //try default tab
- if(htr_getvisibility(t.init_tab.tab)=='inherit')
+ // If a visible tab is already selected, we're done.
+ const selected = tabs[t.selected_index-1];
+ if (htr_getvisibility(selected.tab) === 'inherit') return;
+
+ // Try to select the initial tab.
+ const initial = t.init_tab;
+ if (htr_getvisibility(initial.tab) === 'inherit')
{
- // This is forced, so we skip the obscure/reveal checks
- t.ChangeSelection3(t.tabs[t.init_tab.tabindex-1]);
- //t.tabs[t.init_tab.tabindex-1].makeCurrent();
+ // This is forced, so we skip the obscure/reveal checks.
+ t.ChangeSelection3(tabs[initial.tabindex - 1]);
+ return;
}
- else //otherwise find first tab not hidden
+
+ // Otherwise, pick the first visible tab.
+ for (let i = 0; i < tabs.length; i++)
{
- for(var i=0; i entries.forEach(({
+ contentRect: { width, height },
+ target: table
+}) =>
+ {
+ // Set the new size.
+ table.param_width = width;
+ table.param_height = height;
+
+ // Update update the scrollbar, no data message, and reflow the columns.
+ if (table.rows.first !== null) table.Scroll(table.scroll_y, false);
+ else table.UpdateThumb(false);
+ table.UpdateNDM($(table).children('#ndm'));
+ table.ReflowWidth(width);
+
+ // Resize all rows.
+ const { rows } = table;
+ for (let i = (table.has_header) ? 0 : rows.first; i <= rows.last; i++)
+ {
+ const row = rows[i];
+ if (!row) continue;
+ $(row).css({ width: (row.w = width) });
+ }
+ }
+));
+
function tbld_log_status()
{
var rowstr = '';
@@ -60,27 +87,33 @@ function tbld_format_cell(cell, color)
var bartext = wgtrGetServerProperty(wgtrFindDescendent(this, this.cols[cell.colnum].name, this.cols[cell.colnum].ns), 'bar_textcolor');
if (!bartext) bartext = 'black';
bartext = String(bartext).replace(/[^a-z0-9A-Z#]/g, "");
- var actpct = '' + (100 * ((val < 0)?0:((val > 1)?1:val))) + '%';
- actpct = String(actpct).replace(/[^0-9.%]/g, "");
- var pct = '' + (Math.round(val * 100 / roundto) * roundto) + '%';
+ const width_percent = ('' + (100 * Math.clamp(0, val, 1)) + '%').replace(/[^0-9.%]/g, "");
+ const percent = '' + (Math.round(val * 100 / roundto) * roundto) + '%';
if (val >= 0.5)
{
- innertxt = pct + ' ';
+ innertxt = percent + ' ';
outertxt = '';
}
else
{
innertxt = ' ';
- outertxt = ' ' + pct;
+ outertxt = ' ' + percent;
}
- txt = '' +
- '
' +
- htutil_encode(innertxt) +
- '
' +
- (outertxt?('
' +
- htutil_encode(outertxt) +
- ''):'') +
- '
' +
+ '
' +
+ htutil_encode(innertxt) +
+ '
' +
+ ((outertxt) ? ('
= min)
- {
- ndm.hide();
- }
- else
- {
- ndm.show();
- ndm.text(wgtrGetServerProperty(this,"nodata_message"));
- ndm.css({"top":((this.param_height - ndm.height())/2) + "px", "color":wgtrGetServerProperty(this,"nodata_message_textcolor") });
- }
+ // Redraw the no data message.
+ var $ndm = $(this).children('#ndm');
+ if (max >= min) $ndm.hide();
+ else this.UpdateNDM($ndm);
// (re)draw the loaded records
var selected_position_changed = false;
@@ -566,19 +590,12 @@ function tbld_get_selected_geom()
return { x:$(obj).offset().left, y:$(obj).offset().top, width:$(obj).width(), height:$(obj).height() };
}
-
-function tbld_css_height(element, seth)
- {
- if (seth == null)
- {
- return parseFloat($(element).css("height"));
- }
- else
- {
- $(element).css("height",seth + "px");
- }
- }
-
+function tbld_get_height(node) {
+ return parseFloat($(node).css("height"));
+}
+function tbld_set_height(node, new_height) {
+ $(node).css("height", new_height + "px");
+}
function tbld_update_height(row)
{
@@ -597,8 +614,8 @@ function tbld_update_height(row)
h = this.max_rowheight - this.cellvspacing*2;
if (h < this.min_rowheight - this.cellvspacing*2)
h = this.min_rowheight - this.cellvspacing*2;
- if (tbld_css_height(col) != h)
- tbld_css_height(col,h);
+ if (tbld_get_height(col) != h)
+ tbld_set_height(col, h);
if (h > maxheight)
maxheight = h;
}
@@ -617,10 +634,11 @@ function tbld_update_height(row)
}
// No change?
- if (tbld_css_height(row) == maxheight + this.innerpadding*2)
+ const new_height = maxheight + this.innerpadding*2;
+ if (tbld_get_height(row) === new_height)
return false;
- tbld_css_height(row,maxheight + this.innerpadding*2);
+ tbld_set_height(row, new_height);
return true;
}
@@ -686,7 +704,6 @@ function tbld_format_row(id, selected, do_new)
function tbld_bring_into_view(rownum)
{
- //this.log.push("tbld_bring_into_view(" + rownum + ")");
this.bring_into_view = null;
// Clamp the requested row to the available range
@@ -939,10 +956,10 @@ function tbld_detail_showcontainer()
}
}
-
+/** @param dw The detail widget DOM node. **/
function tbld_update_detail(dw)
{
- if (dw.display_for && (this.table.initselect !== 2 || (this.table.initselect == 2 && dw.on_new)) /* 2 = noexpand */ && (!dw.on_new || wgtrGetServerProperty(dw, 'show_on_new', 0)))
+ if (dw.display_for && ((dw.on_new) ? (this.table.initselect !== 2) : wgtrGetServerProperty(dw, 'show_on_new', 0)))
{
var found=false;
for(var j=0; j scroll_end - this.vis_height)
y = 0 - (scroll_end - this.vis_height);
@@ -1307,86 +1330,80 @@ function tbld_bar_click(e)
function tbld_change_width(move, compensate)
{
- var l=this;
- var t=l.row.table;
- var rw = $(l.resizebdr).width();
- var colinfo = t.cols[l.colnum];
+ const { colnum, resizebdr, table: t } = this;
+ const { colcount, cols, rows } = t;
+ const rw = $(resizebdr).width();
+ const { width: col_info_width, xoffset: col_info_xoffset } = cols[colnum];
// Sanity checks on column resizing...
- //if(colinfo.xoffset+colinfo.width+move+rw>l.row.w)
- // move = l.row.w - rw - colinfo.xoffset - colinfo.width;
- if(colinfo.xoffset+colinfo.width+rw+move<0)
- move=0-colinfo.xoffset-rw;
- if (colinfo.width + move < 3)
- move = 3-colinfo.width;
- if(l.resizebdr.xoffset+move<0)
- move=0-l.resizebdr.xoffset;
- //if(getPageX(l.resizebdr) + t.colsep + t.bdr_width*2 + move >= getPageX(t) + t.param_width)
- // move = getPageX(t) + t.param_width - getPageX(l.resizebdr) - t.colsep - t.bdr_width*2;
+ if (col_info_xoffset + col_info_width + rw + move < 0)
+ move = 0 - col_info_xoffset - rw;
+ if (col_info_width + move < 3)
+ move = 3 - col_info_width;
+ if (resizebdr && resizebdr.xoffset + move < 0)
+ move = 0 - resizebdr.xoffset;
// Figure how much space on the right of this resize handle we're adjusting, too...
- var cols_right = t.colcount - l.colnum - 1;
- var adj = [];
- var total_right_width = 0;
- for(var j=l.colnum+1; j= t.rows.first)
- {
- if (t.ApplyRowGeom(t.rows[i], l.colnum) && t.min_rowheight != t.max_rowheight)
+ const updated_rows = [];
+ const { first, last } = rows;
+ const inflexible_row_height = (t.min_rowheight === t.max_rowheight);
+ for (let i = 0; i <= last; i++)
+ {
+ if (i < first && i !== 0) continue;
+
+ const rowi = rows[i];
+ if (!t.ApplyRowGeom(rowi, colnum) || inflexible_row_height) continue;
+
+ // Need to update height of row?
+ if (!t.UpdateHeight(rowi)) continue;
+
+ for (let j = i + 1; j <= last; j++)
+ {
+ const rowj = rows[j];
+ if (rowj.positioned)
{
- // Need to update height of row?
- if (t.UpdateHeight(t.rows[i]))
- {
- for(var j=i+1; j<=t.rows.last; j++)
- {
- if (t.rows[j].positioned)
- {
- t.rows[j].positioned = false;
- upd_rows.push(t.rows[j]);
- }
- }
- }
+ rowj.positioned = false;
+ updated_rows.push(rowj);
}
}
}
- if (upd_rows.length)
+
+ if (updated_rows.length)
{
- t.PositionRows(upd_rows);
+ t.PositionRows(updated_rows);
t.CheckBottom();
}
@@ -1397,40 +1414,34 @@ function tbld_change_width(move, compensate)
}
-function tbld_reflow_width()
+function tbld_reflow_width(new_width)
{
- if (this.hdrrow)
- {
- var logstr = 'Before reflow widths:';
- var ttl = 0;
- for(var i=0; i 0 || this.dragcols)
- new_w -= (this.bdr_width*2 + this.colsep);
- $(c).width(new_w);
- setRelativeX(c, this.cols[j].xoffset);
- if (this.cols[j].wrap != 'no')
- change_wrapped_cell = true;
+ const target_col = target_cols[i], this_col = this_cols[i];
+ let new_w = this_col.width; // - this.innerpadding*2;
+
+ if (colsep > 0 || dragcols) new_w -= (bdr_width*2 + colsep);
+
+ $(target_col).width(new_w);
+ setRelativeX(target_col, this_col.xoffset);
+
+ change_wrapped_cell |= (this_col.wrap != 'no');
}
return change_wrapped_cell;
}
@@ -1604,7 +1619,6 @@ function tbld_remove_row(rowobj)
}
if (this.rows.firstvis > this.rows.lastvis)
{
- console.log('TABLE ' + this.__WgtrName + ': resetting firstvis/lastvis to null (firstvis > lastvis)');
this.rows.firstvis = null;
this.rows.lastvis = null;
}
@@ -1687,12 +1701,14 @@ function tbld_display_row(rowobj, rowslot)
if (!this.rows.lastvis || this.rows.lastvis < rowslot)
this.rows.lastvis = rowslot;
}
- if (getRelativeY(rowobj) < this.scroll_minheight || this.scroll_minheight == null)
- this.scroll_minheight = getRelativeY(rowobj);
+ const rowY = getRelativeY(rowobj);
+ if (rowY < this.scroll_minheight || this.scroll_minheight == null)
+ this.scroll_minheight = rowY;
if (rowslot < this.scroll_minrec || this.scroll_minrec == null)
this.scroll_minrec = rowslot;
- if (rowslot == this.rows.lastosrc || (getRelativeY(rowobj) + $(rowobj).height() + this.cellvspacing*2 > this.scroll_maxheight))
- this.scroll_maxheight = getRelativeY(rowobj) + $(rowobj).height() + this.cellvspacing*2;
+ const rowHeight = $(rowobj).height();
+ if (rowslot == this.rows.lastosrc || (rowY + rowHeight + this.cellvspacing*2 > this.scroll_maxheight))
+ this.scroll_maxheight = rowY + rowHeight + this.cellvspacing*2;
if (rowslot > this.scroll_maxrec)
this.scroll_maxrec = rowslot;
}
@@ -1843,16 +1859,12 @@ function tbld_osrc_dispatch()
case 'ScrollTo':
this.osrc_busy = true;
this.osrc_last_op = item.type;
- //this.log.push("Calling ScrollTo(" + item.start + "," + item.end + ") on osrc, stat=" + (this.osrc.pending?'pending':'not-pending'));
- //console.log("Calling ScrollTo(" + item.start + "," + item.end + ") on osrc, stat=" + (this.osrc.pending?'pending':'not-pending'));
this.osrc.ScrollTo(item.start, item.end);
break;
case 'MoveToRecord':
this.osrc_busy = true;
this.osrc_last_op = item.type;
- //this.log.push("Calling MoveToRecord(" + item.rownum + ") on osrc, stat=" + (this.osrc.pending?'pending':'not-pending'));
- //console.log("Calling MoveToRecord(" + item.rownum + ") on osrc, stat=" + (this.osrc.pending?'pending':'not-pending'));
this.osrc.MoveToRecord(item.rownum, this);
break;
@@ -1934,8 +1946,11 @@ function tbld_init(param)
{
var t = param.table;
var scroll = param.scroll;
+
+ // Initialize table.
ifc_init_widget(t);
t.table = t;
+ t.name = param.name; // Debug value.
t.param_width = param.width;
t.param_height = param.height;
t.dragcols = param.dragcols;
@@ -1955,12 +1970,15 @@ function tbld_init(param)
t.cr = 0;
t.is_new = 0;
t.rowdivcache = [];
- t.followcurrent = param.followcurrent>0?true:false;
t.hdr_bgnd = param.hdrbgnd;
htr_init_layer(t, t, "tabledynamic");
+
+ // Initialize scrollbar.
t.scrollbar = scroll;
htr_init_layer(t.scrollbar, t, "tabledynamic");
t.scrollbar.Click = tbld_bar_click;
+
+ // Initialize scrollbar images.
var imgs = pg_images(t.scrollbar);
for(var img in imgs)
{
@@ -1971,29 +1989,23 @@ function tbld_init(param)
else if (imgs[img].name == 'd')
t.down = imgs[img];
}
- t.box=htr_subel(scroll,param.boxname);
- htr_init_layer(t.box, t, "tabledynamic");
- t.scrollbar.b=t.box;
+
+ // Initialize scroll thumb.
+ t.thumb = htr_subel(scroll, param.thumb_name);
+ htr_init_layer(t.thumb, t, "tabledynamic");
+ t.scrollbar.b = t.thumb;
+
+ // Initialize events for scrolling.
t.up.Click=tbld_up_click;
t.down.Click=tbld_down_click;
- t.box.Click = new Function( );
- t.scrollbar.table = t.up.table = t.down.table = t.box.table = t;
+ t.thumb.Click = new Function();
+ t.scrollbar.table = t.up.table = t.down.table = t.thumb.table = t;
t.up.subkind='up';
t.down.subkind='down';
- t.box.subkind='box';
+ t.thumb.subkind='thumb';
t.scrollbar.subkind='bar';
- /*t.dispatch_queue = {};
- t.dispatch_parallel_max = 1;
- t.Dispatch = tbld_dispatch;
- t.Request = tbld_request;*/
- t.osrc_request_queue = [];
- t.osrc_busy = false;
- t.osrc_last_op = null;
- //t.log = [];
- t.ttf_string = '';
- t.selected_row = null;
- t.selected = null;
+ // Initialize layout data.
t.rowheight=param.min_rowheight>0?param.min_rowheight:15;
t.min_rowheight = param.min_rowheight;
t.max_rowheight = param.max_rowheight;
@@ -2004,9 +2016,6 @@ function tbld_init(param)
t.textcolorhighlight=param.textcolorhighlight?param.textcolorhighlight:param.textcolor;
t.textcolornew=param.newrow_textcolor;
t.titlecolor=param.titlecolor;
- t.row_bgnd1=param.rowbgnd1?param.rowbgnd1:"bgcolor='white'";
- t.row_bgnd2=param.rowbgnd2?param.rowbgnd2:t.row_bgnd1;
- t.row_bgndhigh=param.rowbgndhigh?param.rowbgndhigh:"bgcolor='black'";
t.row_bgndnew=param.newrow_bgnd;
t.cols=param.cols;
t.colcount=0;
@@ -2017,17 +2026,29 @@ function tbld_init(param)
else
delete t.cols[i];
}
- if (param.osrc)
- t.osrc = wgtrGetNode(t, param.osrc, "widget/osrc");
- else
- t.osrc = wgtrFindContainer(t, "widget/osrc");
- if(!t.osrc || !(t.colcount>0))
+ if (t.colcount <= 0)
{
- alert('table widget requires an objectsource and at least one column');
+ alert('The table widget requires at least one column');
return t;
}
-
- // Main table widget methods
+
+ // Initialize ObjectSource values.
+ t.osrc_request_queue = [];
+ t.osrc_busy = false;
+ t.osrc_last_op = null;
+ t.ttf_string = '';
+ t.selected_row = null;
+ t.selected = null;
+ t.osrc = (param.osrc)
+ ? wgtrGetNode(t, param.osrc, "widget/osrc")
+ : wgtrFindContainer(t, "widget/osrc");
+ if (!t.osrc)
+ {
+ alert('The table widget requires an ObjectSource');
+ return t;
+ }
+
+ // Bind table widget functions.
t.RedrawAll = tbld_redraw_all;
t.InstantiateRow = tbld_instantiate_row;
t.DisplayRow = tbld_display_row;
@@ -2050,7 +2071,7 @@ function tbld_init(param)
t.SchedScroll = tbld_sched_scroll;
t.CheckBottom = tbld_check_bottom;
t.ApplyRowGeom = tbld_apply_row_geom;
- t.InitBH = tbld_init_bh;
+ t.UpdateNDM = tbld_update_ndm;
t.OsrcDispatch = tbld_osrc_dispatch;
t.OsrcRequest = tbld_osrc_request;
t.EndTTF = tbld_end_ttf;
@@ -2071,6 +2092,7 @@ function tbld_init(param)
t.ObjectModified = tbld_object_modified;
t.osrc.Register(t);
+ // Set the number or records visible in the table at one time.
if (param.windowsize > 0)
{
t.windowsize = param.windowsize;
@@ -2090,12 +2112,15 @@ function tbld_init(param)
if (t.datamode != 1 && t.windowsize > t.osrc.replicasize)
t.windowsize = t.osrc.replicasize;
+ // Handle header row.
t.totalwindowsize = t.windowsize + 1;
if (!t.has_header)
t.windowsize = t.totalwindowsize;
t.firstdatarow = t.has_header?1:0;
- // Handle column resizing and columns without widths
+ /*** Handle columns without widths by assigning a default and resizing other
+ *** columns proportionally.
+ ***/
var total_w = 0;
for (var i in t.cols)
{
@@ -2125,11 +2150,10 @@ function tbld_init(param)
t.grpby = i;
}
+ // Set some other values.
t.maxwindowsize = t.windowsize;
t.maxtotalwindowsize = t.totalwindowsize;
t.rows = {first:null, last:null, firstvis:null, lastvis:null, lastosrc:null};
- setClipWidth(t, param.width);
- setClipHeight(t, param.height);
t.subkind='table';
t.bdr_width = (t.colsep > 0)?3:0;
t.target_y = null;
@@ -2153,7 +2177,7 @@ function tbld_init(param)
l.resizebdr = htr_new_layer(t.bdr_width*2 + t.colsep, t);
$(l.resizebdr).css
({
- "cursor": "move",
+ "cursor": "col-resize",
"height": (t.colsepmode == 0)?(((t.gridinemptyrows)?(t.param_height):t.rowheight) + "px"):(t.rowheight + "px"),
"visibility": "inherit",
"width": t.colsep + t.bdr_width*2 + "px",
@@ -2208,6 +2232,7 @@ function tbld_init(param)
}
}
+ // Initialize scrollbar values.
t.scroll_maxheight = null;
t.scroll_maxrec = null;
t.scroll_minheight = null;
@@ -2220,6 +2245,7 @@ function tbld_init(param)
// set working area height and scrollbar size
t.UpdateGeom();
+ // Initialize the scrollbar.
t.scrolldiv = htr_new_layer(t.param_width, t.scrollctr);
htr_init_layer(t.scrolldiv, t, "tabledynamic");
t.scrolldiv.subkind = "scrolldiv";
@@ -2238,11 +2264,23 @@ function tbld_init(param)
if (window.tbld_mcurrent == undefined)
window.tbld_mcurrent = null;
+ // Handle resizing.
+ tbld_resize_observer.observe(t);
+
// No data message
- var ndm = document.createElement("div");
- $(ndm).css({"position":"absolute", "width":"100%", "text-align":"center", "left":"0px"});
- $(ndm).attr({"id":"ndm"});
- $(t).append(ndm);
+ var $ndm = $('');
+ $ndm[0].table = t;
+ $ndm.text(wgtrGetServerProperty(t, "nodata_message"));
+ $ndm.css({
+ position: 'absolute',
+ width: '100%',
+ left: '0px',
+ textAlign: 'center',
+ color: wgtrGetServerProperty(t, "nodata_message_textcolor"),
+ });
+ $ndm.show();
+ $(t).append($ndm);
+ t.UpdateNDM($ndm);
// Events
var ie = t.ifcProbeAdd(ifEvent);
@@ -2293,17 +2331,14 @@ function tbld_init(param)
}
}
- t.InitBH();
-
return t;
}
-function tbld_init_bh()
+function tbld_update_ndm($ndm)
{
- var ndm = $(this).children('#ndm');
- ndm.show();
- ndm.text(wgtrGetServerProperty(this,"nodata_message"));
- ndm.css({"top":((this.param_height - ndm.height())/2) + "px", "color":wgtrGetServerProperty(this,"nodata_message_textcolor") });
+ $ndm.css({
+ top: ((this.param_height - $ndm.height()) / 2) + "px",
+ });
}
function tbld_touchstart(e)
@@ -2584,7 +2619,9 @@ function tbld_keydown(e)
for(var c in row.cols)
{
var col = row.cols[c];
- if (t.cols[col.colnum].type != 'check' && t.cols[col.colnum].type != 'image' && t.cols[col.colnum].type != 'checkbox')
+ if (t.cols[col.colnum].type != 'check' &&
+ t.cols[col.colnum].type != 'image' &&
+ t.cols[col.colnum].type != 'checkbox')
{
if (t.CheckHighlight(col, t.ttf_string))
{
@@ -2675,7 +2712,7 @@ function tbld_mousedown(e)
ly=ly.cell.row;
}
}
- if (ly.subkind == 'box')
+ if (ly.subkind == 'thumb')
{
tbldx_current = ly;
tbldx_start = e.pageY;
@@ -2828,7 +2865,10 @@ function tbld_mousedown(e)
}
ly.row.table.osrc.ifcProbe(ifAction).Invoke("OrderObject", {orderobj:neworder});
}
- if(ly.subkind=='up' || ly.subkind=='bar' || ly.subkind=='down' || ly.subkind=='box')
+ if (ly.subkind === 'up'
+ || ly.subkind === 'bar'
+ || ly.subkind === 'down'
+ || ly.subkind === 'thumb')
{
ly.Click(e);
}
@@ -2868,9 +2908,9 @@ function tbld_mousemove(e)
var t = tbldx_current.table;
if (tbldx_tstart + incr < 18)
incr = 18 - tbldx_tstart;
- if (tbldx_tstart + incr + $(t.box).height() > $(t.scrollbar).height() - 18 - 3)
- incr = $(t.scrollbar).height() - 18 - 3 - tbldx_tstart - $(t.box).height();
- setRelativeY(t.box, tbldx_tstart + incr);
+ if (tbldx_tstart + incr + $(t.thumb).height() > $(t.scrollbar).height() - 18 - 3)
+ incr = $(t.scrollbar).height() - 18 - 3 - tbldx_tstart - $(t.thumb).height();
+ setRelativeY(t.thumb, tbldx_tstart + incr);
if (t.thumb_avail > t.thumb_height)
{
t.SchedScroll((-t.scroll_minheight) - Math.floor((tbldx_tstart + incr - 18)*t.thumb_sh/(t.thumb_avail - t.thumb_height)));
@@ -2915,7 +2955,7 @@ function tbld_mouseup(e)
if (t.colsep > 0 || t.dragcols)
maxw += (t.bdr_width*2 + t.colsep);
l.ChangeWidth(maxw-t.cols[l.colnum].width, true);
- t.ReflowWidth();
+ t.ReflowWidth(t.hdrrow.w);
}
else
{
diff --git a/centrallix-os/sys/js/htdrv_textarea.js b/centrallix-os/sys/js/htdrv_textarea.js
index 9229c3d86..f33f6e88d 100644
--- a/centrallix-os/sys/js/htdrv_textarea.js
+++ b/centrallix-os/sys/js/htdrv_textarea.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -318,10 +318,11 @@ function tx_init(param)
}
l.mode = param.mode; // 0=text, 1=html, 2=wiki
l.isFormStatusWidget = false;
- if (cx__capabilities.CSSBox)
- pg_addarea(l, -1, -1, $(l).width()+3, $(l).height()+3, 'tbox', 'tbox', param.isReadonly?0:3);
- else
- pg_addarea(l, -1, -1, $(l).width()+1, $(l).height()+1, 'tbox', 'tbox', param.isReadonly?0:3);
+
+ // Add the hover area.
+ const area_adj = (cx__capabilities.CSSBox) ? 3 : 1;
+ pg_addarea(l, -1, -1, () => $(l).width() + area_adj, () => $(l).height() + area_adj, 'ebox', 'ebox', (param.isReadOnly) ? 0 : 3);
+
if (param.form)
l.form = wgtrGetNode(l, param.form);
else
diff --git a/centrallix-os/sys/js/htdrv_textbutton.js b/centrallix-os/sys/js/htdrv_textbutton.js
index 77b968e75..0beab1f5f 100644
--- a/centrallix-os/sys/js/htdrv_textbutton.js
+++ b/centrallix-os/sys/js/htdrv_textbutton.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2001 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -205,7 +205,6 @@ function tb_setmode(layer,mode)
switch(mode)
{
case 0: /* no point no click */
- moveTo(layer,layer.orig_x,layer.orig_y);
$(layer).find(".cell").css({'border-style':'solid', 'border-color':'transparent'});
/*if(cx__capabilities.Dom2CSS)
{
@@ -226,7 +225,6 @@ function tb_setmode(layer,mode)
break;
case 1: /* point, but no click */
- moveTo(layer,layer.orig_x,layer.orig_y);
$(layer).find(".cell").css({'border-style':wgtrGetServerProperty(layer, 'border_style', 'outset'), 'border-color':wgtrGetServerProperty(layer, 'border_color', '#c0c0c0')});
/*if(cx__capabilities.Dom2CSS)
{
@@ -259,7 +257,6 @@ function tb_setmode(layer,mode)
break;
case 2: /* point and click */
- moveTo(layer,layer.orig_x+1,layer.orig_y+1);
var bstyle = wgtrGetServerProperty(layer, 'border_style', 'outset');
if (bstyle == 'outset')
bstyle = 'inset';
diff --git a/centrallix-os/sys/js/htdrv_treeview.js b/centrallix-os/sys/js/htdrv_treeview.js
index b3d4f1873..e7f9b40f0 100644
--- a/centrallix-os/sys/js/htdrv_treeview.js
+++ b/centrallix-os/sys/js/htdrv_treeview.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2004 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -38,7 +38,6 @@ function tv_new_layer(width,pdoc,l)
else if(cx__capabilities.Dom1HTML)
{
nl = document.createElement('DIV');
- if (width) nl.style.width = width + 'px';
nl.className = l.divclass;
//setClip(0, width, 0, 0);
pg_set_style(nl, 'position','absolute');
@@ -1297,7 +1296,7 @@ function tv_mouseover(e)
if (e.kind == 'tv')
{
cn_activate(e.mainlayer, 'MouseOver');
- if (getClipWidth(e.layer) <= getdocWidth(e.layer)+2 && e.layer.link_txt)
+ if (e.layer.link_txt)
e.layer.tipid = pg_tooltip(e.layer.link_txt, e.pageX, e.pageY);
}
return EVENT_CONTINUE | EVENT_ALLOW_DEFAULT_ACTION;
diff --git a/centrallix-os/sys/js/htdrv_window.js b/centrallix-os/sys/js/htdrv_window.js
index b551430f4..83302ad9a 100644
--- a/centrallix-os/sys/js/htdrv_window.js
+++ b/centrallix-os/sys/js/htdrv_window.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2004 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -11,6 +11,16 @@
//$(".wn")
+// An array of all initialized windows on the page.
+const wn_windows = [];
+
+// Resize listener that updates all windows so they remain on the page by
+// re-calling wn_do_move_internal() with whatever values were last used.
+window.addEventListener('resize', () => wn_windows.forEach((wn) => {
+ const { pg_attract, wn_new_x, wn_new_y } = wn.resize_data;
+ wn_do_move_internal(wn, pg_attract, wn_new_x, wn_new_y);
+}));
+
var wn_popped = {};
function wn_deinit()
@@ -41,6 +51,7 @@ function wn_init(param)
ifc_init_widget(l);
l.destroy_widget = wn_deinit;
+ // Determine titlebar.
if (titlebar)
{
htr_init_layer(titlebar,l,"wn");
@@ -48,6 +59,7 @@ function wn_init(param)
}
else
titlebar = l;
+ l.titlebar = titlebar;
l.keep_kbd_focus = true;
l.ContentLayer = param.clayer;
@@ -136,6 +148,13 @@ function wn_init(param)
pg_addsched_fn(window, "pg_reveal_event", [l,l,'Reveal'], 0);
}
+ // Setup responsive movement.
+ l.resize_data = {
+ pg_attract: 0,
+ wn_new_x: getPageX(l),
+ wn_new_y: getPageY(l),
+ };
+
// force on page...
if (getPageY(l) + l.orig_height > getInnerHeight())
{
@@ -146,15 +165,16 @@ function wn_init(param)
l.showcontainer = wn_showcontainer;
if (l.is_modal && l.is_visible) pg_setmodal(l, true);
+
+ // Add the window to the global window list.
+ wn_windows.push(l);
return l;
}
function wn_action_point(aparam)
{
- var divs = htutil_point(this, aparam.X, aparam.Y, aparam.AtWidget, aparam.BorderColor, aparam.FillColor, this.point1, this.point2);
- this.point1 = divs.p1;
- this.point2 = divs.p2;
+ htr_action_point(this, aparam);
}
// Popup - pops up a window in the way that a menu might pop up.
@@ -660,33 +680,71 @@ function wn_setvisibility(aparam)
}
}
-function wn_domove2()
- {
+/*** This function does movement without worrying about global variables,
+ *** resize observers, etc. It just takes params and does movement.
+ ***
+ *** This function does handle snapping to edges and preventing windows from
+ *** being moved too far outside the viewport.
+ ***
+ *** @param wn_current The window to affect.
+ *** @param pg_attract The number of pixels from the edge of the viewport at
+ *** which windows snap to the edge. (Seems to always be 0.)
+ *** @param wn_new_x The new x coordinate for moving the window.
+ *** @param wn_new_y The new y coordinate for moving the window.
+ ***/
+function wn_do_move_internal(wn_current, pg_attract, wn_new_x, wn_new_y)
+ {
+ /** Get useful values. **/
+ const { innerWidth, innerHeight } = window;
+ const window_width = getClipWidth(wn_current);
+ const window_height = getClipHeight(wn_current);
+
+ /** Calculate available width and height, taking the sizes of scrollbars into account. **/
+ const available_width = innerWidth - ((document.height - innerHeight - 2 >= 0) ? 15 : 0);
+ const available_height = innerHeight - ((document.width - innerWidth - 2 >= 0) ? 15 : 0);
+ let new_x, new_y;
+
+ /** X: Handle snapping to edges. **/
+ if (Math.isBetween(-pg_attract, wn_new_x, pg_attract)) new_x = 0;
+ else if (Math.isBetween(available_width - pg_attract, wn_new_x + window_width, available_width + pg_attract))
+ new_x = available_width - window_width;
+
+ /** X: Prevent windows getting lost off the left side of the page. **/
+ else if (wn_new_x + window_width < 24) new_x = 24 - window_width;
+ else if (wn_new_x > available_width - 32) new_x = available_width - 32;
+
+ /** X: Default case, no movement needed. **/
+ else new_x = wn_new_x;
+
+ /** Y: Handle snapping to edges. **/
+ if (Math.isBetween(-pg_attract, wn_new_y, pg_attract)) new_y = 0;
+ else if (Math.isBetween(available_height - pg_attract, wn_new_y + window_height, available_height + pg_attract))
+ new_y = available_height - window_height;
+
+ /** Y: Prevent windows from going too far off the screen. **/
+ else new_y = Math.clamp(0, wn_new_y, available_height - 24);
+
+ /** Move the window to the new location. **/
+ moveToAbsolute(wn_current, new_x, new_y);
+ /** Clicking and dragging a window is not a click. **/
+ wn_current.clicked = 0;
}
-function wn_domove()
+function wn_do_move()
{
- if (wn_current != null)
- {
- var ha=(document.height-window.innerHeight-2)>=0?15:0;
- var va=(document.width-window.innerWidth-2)>=0?15:0;
- var newx,newy;
- if (wn_newx < pg_attract && wn_newx > -pg_attract) newx = 0;
- else if (wn_newx+getClipWidth(wn_current) > window.innerWidth-ha-pg_attract && wn_newx+ getClipWidth(wn_current) < window.innerWidth-ha+pg_attract)
- newx = window.innerWidth-ha-pg_get_style(wn_current,'clip.width');
- else if (wn_newx+getClipWidth(wn_current) < 25) newx = 25-pg_get_style(wn_current,'clip.width');
- else if (wn_newx > window.innerWidth-35-ha) newx = window.innerWidth-35-ha;
- else newx = wn_newx;
- if (wn_newy<0) newy = 0;
- else if (wn_newy > window.innerHeight-12-va) newy = window.innerHeight-12-va;
- else if (wn_newy < pg_attract) newy = 0;
- else if (wn_newy+getClipHeight(wn_current) > window.innerHeight-va-pg_attract && wn_newy+getClipHeight(wn_current) < window.innerHeight-va+pg_attract)
- newy = window.innerHeight-va-pg_get_style(wn_current,'clip.height');
- else newy = wn_newy;
- moveToAbsolute(wn_current,newx,newy);
- wn_current.clicked = 0;
- }
+ /** Dereference globals once for performance. **/
+ const { wn_current, pg_attract, wn_new_x, wn_new_y } = window;
+
+ /** No window is selected, so we don't have to move anything. **/
+ if (wn_current === null) return true;
+
+ /** Call the unresponsive version. **/
+ wn_do_move_internal(wn_current, pg_attract, wn_new_x, wn_new_y);
+
+ /** Update params for future resize calls. **/
+ wn_current.resize_data = { pg_attract, wn_new_x, wn_new_y };
+
return true;
}
@@ -735,12 +793,14 @@ function wn_mousedown(e)
else if ((e.mainlayer.has_titlebar && cx__capabilities.Dom0NS && e.pageY < e.mainlayer.pageY + 24) ||
(cx__capabilities.Dom1HTML && e.layer.subkind == 'titlebar' ))
{
+ /** Initiate a window drag. **/
wn_current = e.mainlayer;
wn_msx = e.pageX;
wn_msy = e.pageY;
- wn_newx = null;
- wn_newy = null;
+ wn_new_x = null;
+ wn_new_y = null;
wn_moved = 0;
+ e.layer.style.cursor = 'grabbing';
if (!cx__capabilities.Dom0IE) wn_windowshade_ns_moz(e.mainlayer);
return EVENT_CONTINUE | EVENT_PREVENT_DEFAULT_ACTION;
}
@@ -775,9 +835,13 @@ function wn_mouseup(e)
if (wn_current != null)
{
if (wn_moved == 0) wn_bring_top(wn_current);
+ wn_current.titlebar.style.cursor = 'grab';
}
if (e.kind == 'wn') cn_activate(e.mainlayer, 'MouseUp');
+
+ /** End the active window drag (if one exists). **/
wn_current = null;
+
return EVENT_CONTINUE | EVENT_ALLOW_DEFAULT_ACTION;
}
@@ -789,17 +853,17 @@ function wn_mousemove(e)
wn_current.clicked = 0;
if (wn_current.tid) clearTimeout(wn_current.tid);
wn_current.tid = null;
- if (wn_newx == null)
+ if (wn_new_x == null)
{
- wn_newx = getPageX(wn_current) + e.pageX-wn_msx;
- wn_newy = getPageY(wn_current) + e.pageY-wn_msy;
+ wn_new_x = getPageX(wn_current) + e.pageX-wn_msx;
+ wn_new_y = getPageY(wn_current) + e.pageY-wn_msy;
}
else
{
- wn_newx += (e.pageX - wn_msx);
- wn_newy += (e.pageY - wn_msy);
+ wn_new_x += (e.pageX - wn_msx);
+ wn_new_y += (e.pageY - wn_msy);
}
- setTimeout(wn_domove,60);
+ wn_do_move();
wn_moved = 1;
wn_msx = e.pageX;
wn_msy = e.pageY;
diff --git a/centrallix-os/sys/js/startup.js b/centrallix-os/sys/js/startup.js
index 7d645f044..a9526f8d6 100644
--- a/centrallix-os/sys/js/startup.js
+++ b/centrallix-os/sys/js/startup.js
@@ -1,4 +1,4 @@
-// Copyright (C) 1998-2006 LightSys Technology Services, Inc.
+// Copyright (C) 1998-2026 LightSys Technology Services, Inc.
//
// You may use these files and this library under the terms of the
// GNU Lesser General Public License, Version 2.1, contained in the
@@ -30,10 +30,9 @@ function startup()
// are we mobile?
var is_mobile = (window.navigator.userAgent.indexOf('Mobile') >= 0);
- loc = loc.replace(new RegExp('([?&])cx__geom[^&]*([&]?)'),
- function (str,p1,p2) { return p2?p1:''; });
- loc = loc.replace(new RegExp('([?&])cx__lkey[^&]*([&]?)'),
- function (str,p1,p2) { return p2?p1:''; });
+ const op = (str, p1, p2) => (p2) ? p1 : '';
+ loc = loc.replace(new RegExp('([?&])cx__geom[^&]*(&?)'), op);
+ loc = loc.replace(new RegExp('([?&])cx__lkey[^&]*(&?)'), op);
if (loc.indexOf('?') >= 0)
loc += '&';
else
diff --git a/centrallix/htmlgen/ht_render.c b/centrallix/htmlgen/ht_render.c
index 285a1c0da..1a5a1f193 100644
--- a/centrallix/htmlgen/ht_render.c
+++ b/centrallix/htmlgen/ht_render.c
@@ -197,9 +197,9 @@ htr_internal_ProcessUserAgent(const pStructInf node, const pHtCapabilities paren
void
htr_internal_writeCxCapabilities(pHtSession s)
{
- htrWrite(s," cx__capabilities = {};\n",27);
+ htrWrite(s,"\tcx__capabilities = {};\n",24);
#define PROCESS_CAP_OUT(attr) \
- htrWrite(s," cx__capabilities.",21); \
+ htrWrite(s,"\tcx__capabilities.",18); \
htrWrite(s, # attr ,strlen( # attr )); \
htrWrite(s," = ",3); \
htrWrite(s,(s->Capabilities.attr?"1;\n":"0;\n"),3);
@@ -793,6 +793,10 @@ htrAddScriptInit_va(pHtSession s, char* fmt, ... )
{
va_list va;
+ /*** TODO: Greg - Can we remove this code? It seems like this is the
+ *** concern of htrRender(), and if it's not, should we remove the
+ *** line from htrRender() that does this?
+ ***/
if (!s->Namespace->HasScriptInits)
{
/** No script inits for this namespace yet? Issue the context
@@ -800,7 +804,7 @@ htrAddScriptInit_va(pHtSession s, char* fmt, ... )
**/
s->Namespace->HasScriptInits = 1;
/*htrAddScriptInit_va(s, "\n nodes = wgtrNodeList(%STR&SYM);\n", s->Namespace->DName);*/
- htrAddScriptInit_va(s, "\n ns = \"%STR&SYM\";\n", s->Namespace->DName);
+ htrAddScriptInit_va(s, "\tns = \"%STR&SYM\";\n", s->Namespace->DName);
}
va_start(va, fmt);
@@ -1341,7 +1345,7 @@ htr_internal_GenInclude(pHtSession s, char* filename)
include_file = objOpen(s->ObjSession, filename, O_RDONLY, 0600, "application/x-javascript");
if (include_file)
{
- htrQPrintf(s, "\n", path, buf[0], buf, slash+1);
+ htrQPrintf(s, "\t\n", path, buf[0], buf, slash+1);
}
return 0;
@@ -1409,16 +1413,52 @@ htr_internal_WriteWgtrProperty(pHtSession s, pWgtrNode tree, char* propname)
htrAddScriptWgtr_va(s, "%STR&SYM:'%STR&JSSTR', ", propname, od.String);
break;
+ case DATA_T_DOUBLE:
+ htrAddScriptWgtr_va(s, "%STR&SYM:%DBL, ", propname, od.Double);
+ break;
+
+ case DATA_T_DATETIME:
+ htrAddScriptWgtr_va(s,
+ "%STR&SYM:new Date(%LL, %LL, %LL, %LL, %LL, %LL), ",
+ propname,
+ (long long)od.DateTime->Part.Year + 1900,
+ (long long)od.DateTime->Part.Month,
+ (long long)od.DateTime->Part.Day + 1,
+ (long long)od.DateTime->Part.Hour,
+ (long long)od.DateTime->Part.Minute,
+ (long long)od.DateTime->Part.Second
+ );
+ break;
+
+ case DATA_T_INTVEC:
+ htrAddScriptWgtr_va(s, "%STR&SYM:[", propname);
+ for (unsigned int i = 0; i < od.IntVec->nIntegers; i++)
+ htrAddScriptWgtr_va(s, "%[, %]%INT", (i != 0), od.IntVec->Integers[i]);
+ htrAddScriptWgtr(s, "], ");
+ break;
+
+ case DATA_T_STRINGVEC:
+ htrAddScriptWgtr_va(s, "%STR&SYM:[", propname);
+ for (unsigned int i = 0; i < od.StringVec->nStrings; i++)
+ htrAddScriptWgtr_va(s, "%[, %]'%STR&JSSTR'", (i != 0), od.StringVec->Strings[i]);
+ htrAddScriptWgtr(s, "], ");
+ break;
+
case DATA_T_CODE:
wgtrGetPropertyValue(tree,propname,DATA_T_CODE,POD(&code));
xsInit(&exptxt);
xsInit(&proptxt);
htrGetExpParams(code, &proptxt);
expGenerateText(code, NULL, xsWrite, &exptxt, '\0', "javascript", EXPR_F_RUNCLIENT);
- htrAddScriptWgtr_va(s, "%STR&SYM:{val:null, exp:function(_this,_context){return ( %STR );}, props:%STR, revexp:null}, ", propname, exptxt.String, proptxt.String);
+ htrAddScriptWgtr_va(s, "%STR&SYM:{ val:null, exp:(_this, _context) => { return ( %STR ); }, props:%STR, revexp:null }, ", propname, exptxt.String, proptxt.String);
xsDeInit(&proptxt);
xsDeInit(&exptxt);
break;
+
+ default:
+ fprintf(stderr, "Failed to write widget property '%s' for widget \"%s\" : \"%s\": Unknown datatype %d (at %s:%d).\n", propname, tree->Name, tree->Type, t, __FILE__, __LINE__);
+ htrAddScriptWgtr_va(s, "%STR&SYM:'Unknown Datatype (%INT) - Add it to htr_internal_WriteWgtrProperty() in ht_render.c.', ", propname, t);
+ break;
}
}
}
@@ -1488,6 +1528,16 @@ htr_internal_BuildClientWgtr_r(pHtSession s, pWgtrNode tree, int indent)
htr_internal_WriteWgtrProperty(s, tree, "r_y");
htr_internal_WriteWgtrProperty(s, tree, "r_width");
htr_internal_WriteWgtrProperty(s, tree, "r_height");
+ htr_internal_WriteWgtrProperty(s, tree, "fl_x");
+ htr_internal_WriteWgtrProperty(s, tree, "fl_y");
+ htr_internal_WriteWgtrProperty(s, tree, "fl_width");
+ htr_internal_WriteWgtrProperty(s, tree, "fl_height");
+ htr_internal_WriteWgtrProperty(s, tree, "fl_scale_x");
+ htr_internal_WriteWgtrProperty(s, tree, "fl_scale_y");
+ htr_internal_WriteWgtrProperty(s, tree, "fl_scale_w");
+ htr_internal_WriteWgtrProperty(s, tree, "fl_scale_h");
+ htr_internal_WriteWgtrProperty(s, tree, "fl_parent_w");
+ htr_internal_WriteWgtrProperty(s, tree, "fl_parent_h");
}
propname = wgtrFirstPropertyName(tree);
while(propname)
@@ -1786,13 +1836,8 @@ htrRender(void* stream, int (*stream_write)(void*, char*, int, int, int), pObjSe
s->DisableBody = 0;
/** first thing in the startup() function should be calling build_wgtr **/
- htrAddScriptInit_va(s, " build_wgtr_%STR&SYM();\n",
- s->Namespace->DName);
- /*htrAddScriptInit_va(s, "\n var nodes = wgtrNodeList(%STR&SYM);\n",*/
- htrAddScriptInit_va(s, "\n var ns = \"%STR&SYM\";\n",
- /*" var rootname = \"%STR&SYM\";\n", */
- s->Namespace->DName /*, s->Namespace->DName */);
- /*htrAddStylesheetItem(s, "\tdiv {position:absolute; visibility:inherit; overflow:hidden; }\n");*/
+ htrAddScriptInit_va(s, "\tvar ns = '%STR&SYM';\n", s->Namespace->DName);
+ htrAddScriptInit_va(s, "\tbuild_wgtr_%STR&SYM();\n", s->Namespace->DName);
/** Render the top-level widget -- the function that's run
* underneath will be dependent upon what the widget
@@ -1812,7 +1857,7 @@ htrRender(void* stream, int (*stream_write)(void*, char*, int, int, int), pObjSe
#ifdef WGTR_DBG_WINDOW
htrAddScriptWgtr_va(s, " wgtrWalk(%STR&SYM);\n", tree->Name);
htrAddScriptWgtr(s, " ifcLoadDef(\"net/centrallix/button.ifc\");\n");
- htrAddStylesheetItem(s, "\t#dbgwnd {position: absolute; top: 400; left: 50;}\n");
+ htrAddStylesheetItem(s, "\t\t#dbgwnd {position: absolute; top: 400; left: 50;}\n");
htrAddBodyItem(s, "\n");
@@ -1826,7 +1871,7 @@ htrRender(void* stream, int (*stream_write)(void*, char*, int, int, int), pObjSe
if (err_xs)
{
mssStringError(err_xs);
- htrQPrintf(s, "ErrorAn Error occured while attempting to render this document
%STR&HTE
\r\n", xsString(err_xs));
+ htrQPrintf(s, "ErrorAn Error occurred while attempting to render this document
%STR&HTE
\r\n", xsString(err_xs));
xsFree(err_xs);
}
}
@@ -1834,7 +1879,7 @@ htrRender(void* stream, int (*stream_write)(void*, char*, int, int, int), pObjSe
/** Output the DOCTYPE for browsers supporting HTML 4.0 -- this will make them use HTML 4.0 Strict **/
/** FIXME: should probably specify the DTD.... **/
if(s->Capabilities.HTML40 && !s->Capabilities.Dom0IE)
- htrWrite(s, "\n\n", -1);
+ htrWrite(s, "\n\n", 17);
/** Write the HTML out... **/
htrQPrintf(s, "\n\n"
, cx__version);
- htrQPrintf(s, "\n"
+ htrQPrintf(s, "\n"
"\n"
- " \n"
- " \n"
- " \n"
+ "\t\n"
+ "\t\n"
+ "\t\n"
+ "\t\n"
, cx__version);
- htrWrite(s, " \n", -1);
+ htrWrite(s, "\t\n", -1);
/** Write the HTML header items. **/
for(i=0;iPage.HtmlHeader.nItems;i++)
{
@@ -1872,19 +1918,26 @@ htrRender(void* stream, int (*stream_write)(void*, char*, int, int, int), pObjSe
}
/** Write the script globals **/
- htrWrite(s, "\n\n", -1);
+ htrWrite(s, "\t\n\n", 12);
/** include ht_render.js **/
htr_internal_GenInclude(s, "/sys/js/ht_render.js");
@@ -1912,7 +1965,7 @@ htrRender(void* stream, int (*stream_write)(void*, char*, int, int, int), pObjSe
sv = (pStrValue)(s->Page.Includes.Items[i]);
htr_internal_GenInclude(s, sv->Name);
}
- htrWrite(s, "\n"
- "\n"
- "\n"
- " 
\n"
- " x
x
\n"
- " xx
\n"
- "\n"
- "\n", font_size > 0, font_size, *font_name, font_name, bgnd);
+ nht_i_QPrintfConn(output, 0,
+ "\n"
+ "\n"
+ " \n"
+ " Loading...\n"
+ " \n"
+ " \n"
+ " \n"
+ " \n"
+ " \n"
+ " \n"
+ " \n"
+ " x
x
\n"
+ " xx
\n"
+ " \n"
+ "\n",
+ (font_size > 0), font_size,
+ (font_name != NULL && font_name[0] != '\0'), font_name,
+ bgnd
+ );
return 0;
}
@@ -149,4 +158,3 @@ nhtRenderApp(pNhtConn conn, pObjSession s, pObject obj, pStruct url_inf, pWgtrCl
return rval;
}
-
diff --git a/centrallix/netdrivers/net_http_conn.c b/centrallix/netdrivers/net_http_conn.c
index fc25ecb32..97c59e2fa 100644
--- a/centrallix/netdrivers/net_http_conn.c
+++ b/centrallix/netdrivers/net_http_conn.c
@@ -8,7 +8,7 @@
/* Centrallix Application Server System */
/* Centrallix Core */
/* */
-/* Copyright (C) 1998-2001 LightSys Technology Services, Inc. */
+/* Copyright (C) 1998-2026 LightSys Technology Services, Inc. */
/* */
/* This program is free software; you can redistribute it and/or modify */
/* it under the terms of the GNU General Public License as published by */
@@ -28,7 +28,8 @@
/* A copy of the GNU General Public License has been included in this */
/* distribution in the file "COPYING". */
/* */
-/* Module: net_http.h, net_http.c, net_http_conn.c, net_http_sess.c, net_http_osml.c, net_http_app.c */
+/* Module: net_http.h, net_http.c, net_http_conn.c, */
+/* net_http_sess.c, net_http_osml.c, net_http_app.c */
/* Author: Greg Beeley (GRB) */
/* Creation: December 8, 1998 */
/* Description: Network handler providing an HTTP interface to the */
@@ -306,9 +307,10 @@ nht_i_SendRefreshDocument(pNhtConn conn, char* url)
/** This is a simple HTML document that loads the url we give it. **/
nht_i_QPrintfConn(conn, 0,
"\r\n"
- "\r\n"
+ "\r\n"
" \r\n"
- " \r\n"
" \r\n"
@@ -1192,4 +1194,3 @@ nht_i_Handler(void* v)
thExit();
}
-
diff --git a/centrallix/utility/iface_html.c b/centrallix/utility/iface_html.c
index f83e46ce6..9d4f1e00f 100644
--- a/centrallix/utility/iface_html.c
+++ b/centrallix/utility/iface_html.c
@@ -3,7 +3,7 @@
/* Centrallix Application Server System */
/* Centrallix Core */
/* */
-/* Copyright (C) 1999-2001 LightSys Technology Services, Inc. */
+/* Copyright (C) 1999-2026 LightSys Technology Services, Inc. */
/* */
/* This program is free software; you can redistribute it and/or modify */
/* it under the terms of the GNU General Public License as published by */
@@ -336,10 +336,10 @@ ifcHtmlInit(pHtSession s, pWgtrNode tree)
/** first add the necessary DHTML, and call to init **/
htrAddScriptInclude(s, "/sys/js/ht_utils_iface.js", 0);
- htrAddStylesheetItem(s, " #ifc_layer {position: absolute; visibility: hidden;}\n");
+ htrAddStylesheetItem(s, "\t\t#ifc_layer { position: absolute; visibility: hidden; }\n");
htrAddBodyItem(s, "\n");
- htrAddScriptInit_va(s, " ifcInitialize(\"%STR&JSSTR\");\n", IFC.IfaceDir);
- htrAddScriptInit(s, " init_inline_interfaces();\n");
+ htrAddScriptInit_va(s, "\tifcInitialize('%STR&JSSTR');\n", IFC.IfaceDir);
+ htrAddScriptInit(s, "\tinit_inline_interfaces();\n");
/** now create all the interface info we know of in-line **/
xaInit(&AlreadyProcessed, 16);
@@ -358,4 +358,3 @@ ifcHtmlInit(pHtSession s, pWgtrNode tree)
return 0;
}
-
diff --git a/centrallix/wgtr/apos.c b/centrallix/wgtr/apos.c
index 8c3780205..021455ada 100644
--- a/centrallix/wgtr/apos.c
+++ b/centrallix/wgtr/apos.c
@@ -2,7 +2,7 @@
/* Centrallix Application Server System */
/* Centrallix Core */
/* */
-/* Copyright (C) 1998-2001 LightSys Technology Services, Inc. */
+/* Copyright (C) 1998-2026 LightSys Technology Services, Inc. */
/* */
/* This program is free software; you can redistribute it and/or modify */
/* it under the terms of the GNU General Public License as published by */
@@ -26,9 +26,69 @@
/* Author: Nathaniel Colson */
/* Creation: August 9, 2005 */
/* Description: Applies layout logic to the widgets of an application. */
-/* See centrallix-sysdoc/Auto-Positioning.md for more information. */
+/* See centrallix-sysdoc/Auto-Positioning.md for more information. */
/************************************************************************/
+/*** Author: Israel Fuller
+ *** Date: June, 2025
+ ***
+ *** See also: Auto-Positioning.md
+ ***
+ *** I wasn't the one to write most of this (although I did write a ton of
+ *** comments), but after doing my best to understand it, I hope that you will
+ *** find the compiled information below helpful.
+ ***
+ *** Execution of this file usually begins when wgtrVerify() in wgtr.c calls
+ *** aposAutoPositionWidgetTree(). To auto position the tree, the code first
+ *** it draws four lines on the four edges of every visible widget (with some
+ *** exceptions, @see aposAddLinesToGrid()). These lines divide the page into
+ *** into horizontal sections (rows) and vertical sections (columns) which span
+ *** the page. @see aposAddSectionsToGrid() for more detail.
+ ***
+ *** The program guesses that some of these sections are "spacers", which are
+ *** small amounts of space intended to provide visual room between widgets.
+ *** When resizing, these do not flex at all. However, many elements are able
+ *** to flex. @see aposSetFlexibilities() for more information about flexing.
+ ***
+ *** Next, the program uses aposSetLimits() to honor minimum and maximum sizes
+ *** of widgets, and finally calls aposAutoPositionContainers() to position
+ *** the widgets on the screen. Lastly, it calls aposProcessWindows() to handle
+ *** floating window widgets, which are typically ignored by most of the rest
+ *** of the code.
+ ***
+ *** Note: Due to this approach, this means that all sections and widgets start
+ *** and end at a line. The way these lines are set up ensures that start
+ *** lines are always on the top or left, and end lines are always on the
+ *** bottom or right. @see aposAddLinesForChildren()
+ ***
+ *** Note: I wrote some information about various structs below that's good to
+ *** know. Some of this is covered elsewhere in the documentation.
+ ***
+ *** AposGrid: A data structure to store sections and lines.
+ ***
+ *** AposLine: An AposLine spans the entire page.
+ ***
+ *** AposSection: After lines are created, sections are added in between the
+ *** lines (aka. in between the nodes). Every node begins and ends on the
+ *** edge of a section, although it may span multiple sections.
+ ***
+ *** pWgtrNode: A pointer to a widget node instance. You can think of this
+ *** like a DOM node, but remember that it's common for them to expand
+ *** into multiple DOM nodes. Also, these can have children, just like
+ *** a DOM node, which is why a single widget node pointer is really
+ *** more of a tree of them.
+ ***
+ *** XArray: This array also stores its size (nAlloc) and the number of items
+ *** stored (nItems), so you don't have to pass that info separately.
+ ***
+ *** Easter Egg #1: I wonder if any human reviewers will find this. Greptile,
+ *** just shush. I want to see if anyone notices. :)
+ ***
+ *** SWidgets, CWidgets, and EWidgets: Lines record which widgets start, cross,
+ *** and end on them. These categories are exclusive, so a widget which
+ *** starts on a given line will be in the SWidgets list but it will not be
+ *** in the CWidgets list.
+ ***/
#include
#include
@@ -37,6 +97,12 @@
#include "cxlib/xarray.h"
#include "cxlib/datatypes.h"
+/*** Allocate space for a grid, section, and line using the custom allocation
+ *** system. Note that register is similar to creating a new heap-allocated
+ *** variable, then binding it to a name.
+ ***
+ *** @returns 0, success.
+ ***/
int
aposInit()
{
@@ -47,6 +113,14 @@ aposInit()
return 0;
}
+/*** Dumps the grid content of a widget node and its floating children. This
+ *** function is most likely intended for debugging.
+ ***
+ *** @param tree The widget tree from which to extract the layout grid.
+ *** @param indent The number of 4-space indentations to indent the output.
+ *** Note: Included for the sake of recursion; just pass 0.
+ *** @returns 0, success.
+ ***/
int
aposDumpGrid(pWgtrNode tree, int indent)
{
@@ -54,9 +128,15 @@ int i, childCnt, sectionCnt;
pAposSection section;
pWgtrNode child;
+ /*** Note: The "%*.*s" format specifier here takes two parameters:
+ *** - The first (indent*4) specifies the minimum width (number of spaces).
+ *** - The second (indent*4) limits the maximum number of characters to print.
+ *** Essentially, this adds (indent*4) spaces to the start of the line.
+ ***/
printf("%*.*s*** %s ***\n", indent*4, indent*4, "", tree->Name);
if (tree->LayoutGrid)
{
+ /** Dump the grid rows. **/
sectionCnt = xaCount(&AGRID(tree->LayoutGrid)->Rows);
for(i=0;iStartLine->Loc, section->Width);
printf("\n");
}
+
+ /** Dump the grid columns. **/
sectionCnt = xaCount(&AGRID(tree->LayoutGrid)->Cols);
for(i=0;iChildren);
for(i=0;iName);
return -1;
}
- /** Set flexibilities on containers **/
+ /** Set flexibilities on containers. **/
if (aposSetFlexibilities(tree) < 0)
{
return -1;
@@ -110,7 +201,7 @@ int i=0, count=0;
/*aposDumpGrid(tree, 0);*/
- /** Honor minimum/maximum space requirements **/
+ /** Detect and honor minimum/maximum space requirements. **/
if (aposSetLimits(tree) < 0)
{
return -1;
@@ -133,7 +224,7 @@ int i=0, count=0;
/**makes a final pass through the tree and processes html windows**/
aposProcessWindows(tree, tree);
- /**unpatches all of the heights that were specified in aposPrepareTree**/
+ /** Unpatches the heights specified by aposPrepareTree(). **/
count=xaCount(&PatchedWidgets);
for(i=0; ipre_height = -1;
}
+ /** Free the PatchedWidgets XArray. **/
xaDeInit(&PatchedWidgets);
return 0;
}
-
+/*** Recursively sets flexibility values for containers and their children.
+ ***
+ *** @param Parent The parent node who's flexibilities are being set.
+ *** @returns 0 if successful, -1 otherwise.
+ ***/
int
aposSetFlexibilities(pWgtrNode Parent)
{
@@ -156,14 +252,14 @@ pWgtrNode Child;
int i=0, childCount=xaCount(&(Parent->Children));
int sectCount;
- /** Check recursion **/
+ /** Check recursion. **/
if (thExcessiveRecursion())
{
mssError(1,"APOS","Could not layout application: resource exhaustion occurred");
return -1;
}
-
+ /** Recursively set the flexibilities of all children. **/
for(i=0; iChildren), i);
@@ -174,7 +270,7 @@ int sectCount;
}
}
- /** Reset flexibility values in the grid **/
+ /** Reset flexibility values in the grid. **/
if (theGrid && childCount > 0 && !(Parent->Flags & WGTR_F_NONVISUAL))
{
sectCount = xaCount(&(theGrid->Rows));
@@ -191,7 +287,7 @@ int sectCount;
}
}
- /**set the flexibility of the given container, if it is visual**/
+ /** Set the flexibility of the given container, if it is visual. **/
if(!(Parent->Flags & WGTR_F_NONVISUAL))
if(aposSetContainerFlex(Parent) < 0)
{
@@ -202,8 +298,13 @@ int sectCount;
return 0;
}
-
-/** this function is the recursive function that actually does the work **/
+/*** Adjusts space to accommodate children, somehow? I think?
+ ***
+ *** @param Parent The widget node parent who's limits are being calculated.
+ *** @param delta_w The change in width required to accommodate children.
+ *** @param delta_h The change in height required to accommodate children.
+ *** @returns 0 if successful, -1 otherwise.
+ ***/
int
aposSetLimits_r(pWgtrNode Parent, int* delta_w, int* delta_h)
{
@@ -215,14 +316,14 @@ int sectionCount;
pAposSection s;
pWgtrNode Child;
- /** Check recursion **/
+ /** Check recursion. **/
if (thExcessiveRecursion())
{
mssError(1,"APOS","Could not layout application: resource exhaustion occurred");
return -1;
}
- /** Figure what is needed for children **/
+ /** Calculate the total required space for children. **/
childCount = xaCount(&(Parent->Children));
total_child_delta_w = total_child_delta_h = 0;
for(i=0;iLayoutGrid)
{
sectionCount = xaCount(&(AGRID(Parent->LayoutGrid)->Rows));
- for(i=0;iLayoutGrid)->Rows), i));
+ /*** If it has a desired width, increase the height
+ *** enough to give it that width.
+ ***/
if (s->DesiredWidth >= 0)
{
*delta_h += (s->DesiredWidth - s->Width);
@@ -263,6 +371,9 @@ pWgtrNode Child;
for(i=0;iLayoutGrid)->Cols), i));
+ /*** If it has a desired width, increase the width
+ *** enough to give it that width.
+ ***/
if (s->DesiredWidth >= 0)
{
*delta_w += (s->DesiredWidth - s->Width);
@@ -273,7 +384,7 @@ pWgtrNode Child;
}
}
- /** Make space for this widget bigger **/
+ /** If there is extra space, expand this widget to fill that space. **/
if (*delta_w)
{
if (Parent->StartVLine && ALINE(Parent->StartVLine)->SSection)
@@ -298,8 +409,11 @@ pWgtrNode Child;
return 0;
}
-
-/** This function simply call the recursive version **/
+/*** Adjusts space to accommodate children, somehow? I think?
+ ***
+ *** @param Parent The widget node parent who's limits are being calculated.
+ *** @returns 0, success.
+ ***/
int
aposSetLimits(pWgtrNode Parent)
{
@@ -314,30 +428,40 @@ int rval;
return 0;
}
-
+/*** Patch children of the given Parent node with unspecified heights. Searches
+ *** recursively within containers. Patched children are logged in the given
+ *** PatchedWidgets array.
+ ***
+ *** @param Parent The parent node who's childen should be patched.
+ *** @param PatchedWidgets The widget children which have been patched.
+ *** @returns 0 if successful, -1 otherwise.
+ ***/
int
aposPrepareTree(pWgtrNode Parent, pXArray PatchedWidgets)
{
pWgtrNode Child;
int i=0, childCount=xaCount(&(Parent->Children));
- /** Check recursion **/
+ /** Check recursion. **/
if (thExcessiveRecursion())
{
mssError(1,"APOS","Could not layout application: resource exhaustion occurred");
return -1;
}
+ /** Loop through each child. **/
for(i=0; iChildren), i);
- /**if a visual child has an unspecified height, patch it, unless it is a scrollpane**/
+ /*** If a visual child has an unspecified height, patch it, unless it is in a scrollpane
+ *** Remember here that strcmp() returns 0 (false) if the strings are equal.
+ ***/
if((Child->height < 0) && !(Child->Flags & WGTR_F_NONVISUAL) &&
- strcmp(Parent->Type, "widget/scrollpane"))
+ !isScrollpane(Parent))
aposPatchNegativeHeight(Child, PatchedWidgets);
- /** If child is a container but not a window, recursively prepare it as well **/
+ /** If child is a container, but not a floating window, recursively prepare it as well. **/
if((Child->Flags & WGTR_F_CONTAINER) && !(Child->Flags & WGTR_F_FLOATING))
if (aposPrepareTree(Child, PatchedWidgets) < 0)
return -1;
@@ -346,12 +470,18 @@ int i=0, childCount=xaCount(&(Parent->Children));
return 0;
}
+/*** Try to guess the height of a widget with an unspecified height.
+ ***
+ *** @param Widget The widget child who's height is unspecified.
+ *** @param PatchedWidgets The array to add the widget to after patching it.
+ *** @returns 0 if successful, -1 otherwise.
+ ***/
int
aposPatchNegativeHeight(pWgtrNode Widget, pXArray PatchedWidgets)
{
ObjData val;
- /** set unspecified height of widget to an educated guess**/
+ /** Try to guess the height based on the type of widget. **/
if(!strcmp(Widget->Type, "widget/editbox"))
{
Widget->height = 16;
@@ -390,12 +520,21 @@ ObjData val;
return 0;
}
+ /** Add the widget to the provided array. **/
xaAddItem(PatchedWidgets, Widget);
+
+ /** Overwrite the "prepositioning" height because it's most likely also invalid. **/
Widget->pre_height = Widget->height;
return 0;
}
+/*** Calculates and sets the flexibility for a container by taking weighted
+ *** averages in each direction.
+ ***
+ *** @param W The container to be set.
+ *** @returns 0, success.
+ ***/
int
aposSetContainerFlex(pWgtrNode W)
{
@@ -405,7 +544,10 @@ int i=0, sectCount=0, TotalWidth=0, ProductSum=0;
if (!theGrid) return 0;
- /**calculate average row flexibility, weighted by height **/
+ /*** Calculate average row flexibility, weighted by height.
+ *** Note: Section height is called width here because rows
+ *** are one dimensional and the feild is reused.
+ ***/
sectCount = xaCount(&(theGrid->Rows));
for(i=0; iCols));
for(i=0; iType, "widget/scrollpane"));
+ /** Set isSP to compensate for scrollpane scrollbars. **/
+ if(isSP) *isSP = (isScrollpane(W));
- /**set isWin to compensate windows' titlebars, if any**/
+ /** Set isWin to compensate windows' titlebars, if any. **/
if(isWin && !strcmp(W->Type, "widget/childwindow"))
{
+ /*** Set isWin (is window) to compensate for a titlebar. If the
+ *** node does not specify if it has a titlebar, assume it does.
+ ***/
if(wgtrGetPropertyValue(W, "titlebar", DATA_T_STRING, &val) < 0)
- *isWin = 1; //if property not found, assume it has a titlebar
+ *isWin = 1; // Property not found, assume it has a titlebar.
else *isWin = !strcmp(val.String, "yes");
}
- /**isTopTab and isSideTab are used to compensate for tabs**/
- if(isTopTab && !strcmp(W->Type, "widget/tab"))
+ /** isTopTab and isSideTab are used to compensate for tabs. **/
+ if((isTopTab != NULL || isSideTab != NULL) && strcmp(W->Type, "widget/tab") == 0)
{
- /**set isTopTab and isSideTab**/
+ /*** Set isTopTab and isSideTab. If the node does not specify the
+ *** tab location, assume it has a top tab and leave side-tab unset.
+ **/
if(wgtrGetPropertyValue(W, "tab_location", DATA_T_STRING, &val) < 0)
- *isTopTab = 1; //if property not found, assume top tab**/
+ {
+ if (isTopTab != NULL) *isTopTab = 1; // Property not found, assume it has a top tab only.
+ }
else
{
*isTopTab = (!strcmp(val.String, "top") || !strcmp(val.String, "bottom"));
*isSideTab = (!strcmp(val.String, "left") || (!strcmp(val.String, "right")));
}
-
- /**set tabWidth**/
- if(wgtrGetPropertyValue(W, "tab_width", DATA_T_INTEGER, &val) < 0)
- *tabWidth = 80;
- else *tabWidth = val.Integer;
}
+
+ /** Set the tab width and height (if needed), defaulting to 24 and 80 if unspecified. **/
+ if(tabWidth != NULL) *tabWidth = (wgtrGetPropertyValue(W, "tab_width", DATA_T_INTEGER, &val) == 0) ? val.Integer : 80;
+ if(tabHeight != NULL) *tabHeight = (wgtrGetPropertyValue(W, "tab_height", DATA_T_INTEGER, &val) == 0) ? val.Integer : 24;
return 0;
}
-
+/*** Builds the layout grid for recursively for this container and all of its
+ *** children, including the lines and sections required for positioning.
+ ***
+ *** @param Parent The parent node who's grid is being built.
+ *** @returns 0 if successful, -1 otherwise.
+ ***/
int
aposBuildGrid(pWgtrNode Parent)
{
@@ -475,25 +648,24 @@ int childCount, i;
pWgtrNode Child;
pAposGrid theGrid = NULL;
- /** Check recursion **/
+ /** Check recursion. **/
if (thExcessiveRecursion())
{
mssError(1,"APOS","Could not layout application: resource exhaustion occurred");
return -1;
}
- /** Allocate a grid **/
+ /** Allocate a grid. **/
if (Parent->Flags & WGTR_F_CONTAINER)
{
if (!(Parent->Flags & WGTR_F_NONVISUAL) || !Parent->Parent)
{
+ /** Allocate and initialize a new pAposGrid. **/
theGrid = Parent->LayoutGrid = (pAposGrid)nmMalloc(sizeof(AposGrid));
if (!Parent->LayoutGrid) goto error;
-
- /**initiallize the XArrays in the grid**/
aposInitiallizeGrid(theGrid);
- /**Add the lines to the grid**/
+ /** Add lines for children to the grid. **/
if(aposAddLinesToGrid(Parent, &(theGrid->HLines), &(theGrid->VLines)) < 0)
{
mssError(0, "APOS", "aposBuildGrid: Couldn't add lines to %s's grid",
@@ -501,7 +673,7 @@ pAposGrid theGrid = NULL;
return -1;
}
- /**Add the sections to the grid**/
+ /** Add the sections to the grid. **/
if(aposAddSectionsToGrid(theGrid,
(Parent->height-Parent->pre_height),
(Parent->width-Parent->pre_width)) < 0)
@@ -512,7 +684,7 @@ pAposGrid theGrid = NULL;
}
}
- /** Do it for all children of this widget **/
+ /** Recursively build this grid for all children of this widget. **/
childCount = xaCount(&(Parent->Children));
for(i=0; iFlags & WGTR_F_VSCROLLABLE))
- aposSnapWidgetsToGrid(&(theGrid->HLines), APOS_ROW); //rows
+ aposSnapWidgetsToGrid(&(theGrid->HLines), APOS_ROW, Parent->Root->ClientInfo); //rows
if (!(Parent->Flags & WGTR_F_HSCROLLABLE))
- aposSnapWidgetsToGrid(&(theGrid->VLines), APOS_COL); //columns
+ aposSnapWidgetsToGrid(&(theGrid->VLines), APOS_COL, Parent->Root->ClientInfo); //columns
/** did not resize? **/
/*if (rows_extra < 0)
@@ -591,14 +771,18 @@ int rows_extra=0, cols_extra=0;
return 0;
}
-
+/*** Frees memory used by all grids in the widget tree.
+ ***
+ *** @param tree The tree containing the grids to be freed.
+ *** @returns 0, success.
+ ***/
int
aposFreeGrids(pWgtrNode tree)
{
int childCount, i;
pWgtrNode Child;
- /**deallocate memory and deinit XArrays in the grid**/
+ /** Recursively deallocate memory and deinit XArrays in the grid. **/
childCount = xaCount(&(tree->Children));
for(i=0;ipre_width < Parent->min_width && Parent->min_width != 0)
@@ -642,26 +849,30 @@ pXArray FirstCross, LastCross;
if (Parent->pre_height < Parent->min_height && Parent->min_height != 0)
height_adj = Parent->min_height - Parent->pre_height;
- /**Add the 2 horizontal border lines, unless parent is a scrollpane**/
- if(strcmp(Parent->Type, "widget/scrollpane"))
+ /** Add the 2 horizontal border lines, unless parent is a scrollpane. **/
+ if(!isScrollpane(Parent))
{
- if(aposCreateLine(NULL, HLines, 0, 0, 1, 0, 0) < 0)
+ int minHeightLoc = 0, maxHeightLoc = Parent->pre_height - isWin * 24;
+ if(aposCreateLine(NULL, HLines, minHeightLoc, APOS_NOT_LINKED, APOS_IS_BORDER, 0, APOS_HORIZONTAL) < 0)
goto CreateLineError;
- if(aposCreateLine(NULL, HLines, (Parent->pre_height-isWin*24), 0, 1, height_adj, 0) < 0)
+ if(aposCreateLine(NULL, HLines, maxHeightLoc, APOS_NOT_LINKED, APOS_IS_BORDER, height_adj, APOS_HORIZONTAL) < 0)
goto CreateLineError;
}
- /**Add the 2 vertical border lines**/
- if(aposCreateLine(NULL, VLines, 0, 0, 1, 0, 1) < 0)
+
+ /** Add the 2 vertical border lines. **/
+ int minWidthLoc = 0, maxWidthLoc = (Parent->pre_width-isSP*18);
+ if(aposCreateLine(NULL, VLines, minWidthLoc, APOS_NOT_LINKED, APOS_IS_BORDER, 0, APOS_VERTICAL) < 0)
goto CreateLineError;
- if(aposCreateLine(NULL, VLines, (Parent->pre_width-isSP*18), 0, 1, width_adj, 1) < 0)
+ if(aposCreateLine(NULL, VLines, maxWidthLoc, APOS_NOT_LINKED, APOS_IS_BORDER, width_adj, APOS_VERTICAL) < 0)
goto CreateLineError;
+ /** Recursively add the nonborder lines for all child nodes. **/
if(aposAddLinesForChildren(Parent, HLines, VLines) < 0)
goto CreateLineError;
- /**populate horizontal line cross XArrays**/
+ /** Record the widgets that cross each horizontal line in its CWidgets XArray. **/
count = xaCount(HLines);
- for(i=1; iCWidgets), &(CurrLine->EWidgets), &(CurrLine->CWidgets));
}
- /**populate vertical line cross XArrays**/
+ /** Record the widgets that cross each vertical line in its CWidgets XArray. **/
count = xaCount(VLines);
- for(i=1; iCWidgets), &(CurrLine->EWidgets), &(CurrLine->CWidgets));
}
- /**sanity check to make sure no widgets cross the border lines**/
- if(xaCount(HLines)) //don't test borderlines unless they exist
+ /** Sanity check to make sure no widgets cross the border lines. **/
+ if(xaCount(HLines)) // Only check borderlines if they exist.
{
FirstCross = &(((pAposLine)xaGetItem(HLines, 0))->CWidgets);
LastCross = &(((pAposLine)xaGetItem(HLines, (xaCount(HLines)-1)))->CWidgets);
@@ -708,26 +919,36 @@ pXArray FirstCross, LastCross;
return -1;
}
+/*** Adds 4 lines for the edges of each visual child. Searches nonvisual
+ *** containers recursively for qualifying grandchildren. Floating windows
+ *** are ignored. Scrollpanes receive only 2 vertical lines (skipping their
+ *** horizontal edges).
+ ***
+ *** @param Parent The parent who's children are being given lines.
+ *** @param HLines The array to which horizontal lines should be added.
+ *** @param VLines The array to which vertical lines should be added.
+ *** @returns 0 if successful, -1 otherwise.
+ ***/
int
aposAddLinesForChildren(pWgtrNode Parent, pXArray HLines, pXArray VLines)
{
int i=0, childCount=xaCount(&(Parent->Children));
-int isTopTab=0, isSideTab=0, tabWidth=0;
+int isTopTab=0, isSideTab=0, tabWidth=0, tabHeight=0;
int height_adj, width_adj;
pWgtrNode C;
- /** Check recursion **/
+ /** Check recursion. **/
if (thExcessiveRecursion())
{
mssError(1,"APOS","Could not layout application: resource exhaustion occurred");
return -1;
}
- /**loop through the children and create 4 lines for each child's 4 edges**/
+ /** Loop through the children and create 4 lines for each child's 4 edges. **/
for(i=0; iChildren), i);
- aposSetOffsetBools(C, NULL, NULL, &isTopTab, &isSideTab, &tabWidth);
+ aposSetOffsetBools(C, NULL, NULL, &isTopTab, &isSideTab, &tabWidth, &tabHeight);
/** Does this widget need more room than it was given? **/
height_adj = width_adj = 0;
@@ -736,29 +957,44 @@ pWgtrNode C;
if (C->pre_height < C->min_height && C->min_height != 0)
height_adj = C->min_height - C->pre_height;
- /** If C is a nonvisual container, add lines for
- *** the grandchildren. Otherwise, if C is visual
- *** and not a window, just add 4 lines for it **/
+ /** If the child (C) is a nonvisual container, recursively add lines for any grandchildren. **/
if((C->Flags & WGTR_F_NONVISUAL) && (C->Flags & WGTR_F_CONTAINER))
{
if (aposAddLinesForChildren(C, HLines, VLines) < 0)
goto CreateLineError;
}
+ /** Otherwise, if child (C) is visual and not a floating window, add 4 lines for it. **/
else if(!(C->Flags & WGTR_F_NONVISUAL) && !(C->Flags & WGTR_F_FLOATING))
{
- /**add horizontal lines, unless parent is a scrollpane**/
- if(strcmp(Parent->Type, "widget/scrollpane"))
+ /** Add horizontal lines, unless parent is a scrollpane. **/
+ if(!isScrollpane(Parent))
{
- if(aposCreateLine(C, HLines, (C->y), APOS_SWIDGETS, 0, 0, 0) < 0)
+ /*** Note:
+ *** From this code, we see that the start line is
+ *** always the minY, and the end of the line is
+ *** always the maxY. Thus, the top line is the
+ *** start line and the bottom line is the end line
+ *** because Y increases as we decend the page.
+ ***/
+ int minY = (C->y), maxY = (C->y + C->height + isTopTab*tabHeight);
+ if(aposCreateLine(C, HLines, minY, APOS_SWIDGETS, APOS_NOT_BORDER, 0, APOS_HORIZONTAL) < 0)
goto CreateLineError;
- if(aposCreateLine(C, HLines, (C->y + C->height + isTopTab*24), APOS_EWIDGETS, 0, height_adj, 0) < 0)
+ if(aposCreateLine(C, HLines, maxY, APOS_EWIDGETS, APOS_NOT_BORDER, height_adj, APOS_HORIZONTAL) < 0)
goto CreateLineError;
}
-
- /**add vertical lines**/
- if(aposCreateLine(C, VLines, (C->x), APOS_SWIDGETS, 0, 0, 1) < 0)
+
+ /*** Note:
+ *** From this code, we see that the start line is always
+ *** the minX, and the end of the line is always the maxX.
+ *** Thus, the left line is the start line and the right
+ *** line is the end line because X increases as we move
+ *** right along the page.
+ ***/
+ /** Add vertical lines. **/
+ int minX = (C->x), maxX = (C->x + C->width + isSideTab*tabWidth);
+ if(aposCreateLine(C, VLines, minX, APOS_SWIDGETS, APOS_NOT_BORDER, 0, APOS_VERTICAL) < 0)
goto CreateLineError;
- if(aposCreateLine(C, VLines, (C->x + C->width + isSideTab*tabWidth), APOS_EWIDGETS, 0, width_adj, 1) < 0)
+ if(aposCreateLine(C, VLines, maxX, APOS_EWIDGETS, APOS_NOT_BORDER, width_adj, APOS_VERTICAL) < 0)
goto CreateLineError;
}
}
@@ -770,12 +1006,36 @@ pWgtrNode C;
return -1;
}
+/*** Creates a new line in the grid or updates an existing line if it exists
+ *** in the same location. Remember that lines record the widgets that start
+ *** on them (SWidgets), end on them (EWidgets), and cross them (CWidgets).
+ ***
+ *** Note: This function all lines in the given array are oriented in the same
+ *** direction as the new line. At the time of this writing (June 2025),
+ *** all known calling functions upheld by maintaining an HLines and a
+ *** VLines array to store horizontal and vertical lines separately.
+ ***
+ *** @param Widget The widget which determined the location of this line,
+ *** which we add to the SWidgets or EWidgets array.
+ *** @param Lines The array that stores the lines.
+ *** @param Loc The location of the line. Only a single coordinate in
+ *** one dimension is needed since lines span the entire grid.
+ *** @param type The type, indicating whether the associated widget starts
+ *** or ends on this line.
+ *** @param isBorder A boolean that is true if this is a grid border line.
+ *** @param adj An adjustment added to or subtracted from the line to
+ *** satisfy min or max constraints (respectively).
+ *** @param is_vert A boolean that is true if this line is vertical.
+ *** See APOS_VERTICAL and APOS_HORIZONTAL.
+ ***
+ *** @returns 0, success.
+ ***/
int
aposCreateLine(pWgtrNode Widget, pXArray Lines, int Loc, int type, int isBorder, int adj, int is_vert)
{
pAposLine Line = aposExistingLine(Lines, Loc);
- /**if there is already a line, just upgrade it**/
+ /** If there is already a line, we upgrade it instead of creating a new one. **/
if(Line != NULL)
{
@@ -789,14 +1049,14 @@ pAposLine Line = aposExistingLine(Lines, Loc);
else
{
- /**otherwise, create and add the new line**/
+ /** There's not already a line, so we allocate a new one. **/
if((Line = (pAposLine)nmMalloc(sizeof(AposLine))) < 0)
{
mssError(1, "APOS", "aposCreateLine: Couldn't allocate memory for new grid line");
return -1;
}
- /**initiallize new line**/
+ /** Initialize the new line. **/
memset(Line, 0, sizeof(AposLine));
xaInit(&(Line->SWidgets),16);
xaInit(&(Line->EWidgets),16);
@@ -807,11 +1067,11 @@ pAposLine Line = aposExistingLine(Lines, Loc);
Line->SSection = NULL;
Line->ESection = NULL;
- /**add new line, sorted by location**/
+ /** Add the new line, to the list of lines, sorted by location. **/
xaAddItemSortedInt32(Lines, Line, 0);
}
- /** Link the line and the widget together **/
+ /** Link the line and the widget together. **/
if (type == APOS_SWIDGETS)
{
xaAddItem(&(Line->SWidgets), Widget);
@@ -834,6 +1094,16 @@ pAposLine Line = aposExistingLine(Lines, Loc);
return 0;
}
+/*** Gets a line from the array at the location, or returns NULL if none exists.
+ ***
+ *** Note: This function all lines in the given array are oriented in the same
+ *** direction. This is not tested, although at the time of this writing
+ *** (June, 2025), all calling functions upheld this contract.
+ ***
+ *** @param Lines The array of lines to search.
+ *** @param Loc The location to check for a line.
+ *** @returns A pointer to the line, if it exists, and NULL otherwise.
+ ***/
pAposLine
aposExistingLine(pXArray Lines, int Loc)
{
@@ -848,36 +1118,64 @@ int i, count = xaCount(Lines);
return NULL;
}
+/*** Detects if a widget in PrevList (usually the widgets that started in or
+ *** crossed the previous line) ends on this line (aka. appears in EWidgets).
+ *** If it does not end on this line, we know it crosses this line, so we add
+ *** the widget to CWidgets.
+ ***
+ *** @param PrevList The list of previous widgets being checked.
+ *** @param EWidgets The list of widgets ending on the line in question.
+ *** @param CWidgets The list to which widgets that cross should be added.
+ *** @returns 0, success.
+ ***/
int
aposFillInCWidget(pXArray PrevList, pXArray EWidgets, pXArray CWidgets)
{
pWgtrNode AddCandidate;
int found=0, i=0, j=0, pCount=xaCount(PrevList), eCount=xaCount(EWidgets);
- /** loop through the SWidgets or CWidgets array of the previous line**/
+ /*** Loop through the array from the previous line.
+ *** Note: Could be that line's SWidgets OR CWidgets.
+ **/
for(i=0; iHLines));
for(i=1; iRows), ((pAposLine)xaGetItem(&(theGrid->HLines),(i-1))),
@@ -887,7 +1185,7 @@ int count=0, i=0;
return -1;
}
- /**Add columns**/
+ /** Add column sections between vertical lines. **/
count = xaCount(&(theGrid->VLines));
for(i=1; iCols), ((pAposLine)xaGetItem(&(theGrid->VLines),(i-1))),
@@ -900,15 +1198,29 @@ int count=0, i=0;
return 0;
}
+/*** Calculate and set the flexibility value for a section. Spacers have 0 flex
+ *** and containers use the flex of their least flexible children.
+ ***
+ *** @param sect The section being set.
+ *** @param type The type of section (either APOS_ROW or APOS_COL).
+ *** @returns 0 if successful or -1 if a default value should be used instead
+ ***/
int
aposSetSectionFlex(pAposSection sect, int type)
{
+/*** Note:
+ *** sCount + cCount includes all widgets intersecting this section because a
+ *** widget cannot begin inside a section. It always starts or eds at the edge
+ *** of a section.
+ ***/
int sCount = xaCount(&(sect->StartLine->SWidgets));
int cCount = xaCount(&(sect->StartLine->CWidgets));
- /** Set flex to 0 if the section is a spacer or contains non-flexible children,
- *** otherwise set it to the average of the children. If none of those apply
- *** it must be a wide, widgetless gap, assign a default flexibility **/
+ /** Set flex to 0 if the section is a spacer or contains non-flexible
+ *** children, otherwise set it to the minimum of the children. If none
+ *** of those apply it must be a wide, widgetless gap. In this case,
+ *** return -1 to prompt the caller to determine a default flexibility.
+ ***/
if((sect->isSpacer) || (aposNonFlexChildren(sect->StartLine, type)))
sect->Flex = 0;
else if(sCount || cCount)
@@ -919,12 +1231,21 @@ int cCount = xaCount(&(sect->StartLine->CWidgets));
return 0;
}
+/*** Creates a new row or column section between two lines in the grid.
+ ***
+ *** @param Sections The array of sections, to which this section will be added.
+ *** @param StartL The line which starts this section (typically the top/left line).
+ *** @param EndL The line which ends this section (typically the bottom/right line).
+ *** @param Diff I had a hard time figuring out what this means.
+ *** @param type Whether the section is a row (APOS_ROW) or a column (APAS_COL).
+ *** @returns 0 if successful, -1 otherwise.
+ ***/
int
aposCreateSection(pXArray Sections, pAposLine StartL, pAposLine EndL, int Diff, int type)
{
pAposSection NewSect;
- /**Allocate and initiallize a new section**/
+ /** Allocate and initialize a new section. **/
if((NewSect = (pAposSection)(nmMalloc(sizeof(AposSection)))) < 0)
{
mssError(1, "APOS", "nmMalloc(): Couldn't allocate memory for new row or column");
@@ -940,11 +1261,11 @@ pAposSection NewSect;
StartL->SSection = NewSect;
EndL->ESection = NewSect;
- /** Need to adjust section width/height? **/
+ /** Apply the adjustment from the end line, if needed. **/
if (EndL->Adj)
NewSect->DesiredWidth = NewSect->Width + EndL->Adj;
- /** Set section flexibility **/
+ /** Set section flexibility. **/
if (aposSetSectionFlex(NewSect, type) < 0)
{
if (Diff < 0)
@@ -958,22 +1279,36 @@ pAposSection NewSect;
return 0;
}
+/*** Determines if a section between two lines is a spacer.
+ ***
+ *** If a section is a spacer, the assumption is that the designer probably put
+ *** that space there to provide visual breathing room in their design. Thus, we
+ *** should avoid resizing it as this may interfere with their design.
+ ***
+ *** @param StartL The line starting the section. (I think this is always the left/top.)
+ *** @param EndL The line starting the section. (I think this is always the right/bottom.)
+ *** @param type Whether the section is a row (APOS_ROW) or a column (APOS_COL).
+ *** @param isBorder Whether the section is on the border of the page.
+ *** @returns 0 if successful, -1 otherwise.
+ ***/
int
aposIsSpacer(pAposLine StartL, pAposLine EndL, int type, int isBorder)
{
pWgtrNode SW, EW;
int i=0, j=0;
+/** @brief The number of widgets starting at the end of this section. **/
int sCount=xaCount(&(EndL->SWidgets));
+/** @brief The number of widgets ending at the start of this section. **/
int eCount=xaCount(&(StartL->EWidgets));
- if((EndL->Loc - StartL->Loc) <= APOS_MINSPACE) //if section is sufficiently narrow
+ if((EndL->Loc - StartL->Loc) <= APOS_MINSPACE) // If section is sufficiently narrow.
{
- /**gap between border and widget**/
+ /** Gaps between the border and any widget(s) are spacers. **/
if(isBorder && (sCount || eCount)) return 1;
- /** Checks every widget ending on one side of the section against
- *** every widget beginning on the other side to see if any of them
- *** are directly across from each other **/
+ /** Checks every widget ending on one side to see if a widget
+ *** starts directly across from it on the other side.
+ ***/
for(i=0; iSWidgets), i));
@@ -981,9 +1316,10 @@ int eCount=xaCount(&(StartL->EWidgets));
{
EW = (pWgtrNode)(xaGetItem(&(StartL->EWidgets), j));
- /** if a corner of a widget on one side of the
- *** section falls between the two corners of a widget
- *** on the other side, return 1 **/
+ /** If a corner of the widget on one side falls
+ *** between the two corners of a widget on the
+ *** other side, this is a spacer.
+ ***/
if((type == APOS_ROW) && (((EW->x >= SW->x) && (EW->x < (SW->x + SW->width))) ||
(((EW->x + EW->width) > SW->x) && ((EW->x + EW->width) <= (SW->x + SW->width)))))
return 1;
@@ -998,6 +1334,14 @@ int eCount=xaCount(&(StartL->EWidgets));
return 0;
}
+/*** Checks for any widgets starting on or crossing a line that are non-flexible
+ *** in the relevant dimension.
+ ***
+ *** @param L The line along which to check.
+ *** @param type Specifies the relevant dimension using APOS_ROW or APOS_COL.
+ *** @returns 1 if any child widget is non-flexible in the relevant dimension,
+ *** 0 otherwise.
+ ***/
int
aposNonFlexChildren(pAposLine L, int type)
{
@@ -1005,8 +1349,9 @@ int i=0;
int sCount = xaCount(&(L->SWidgets));
int cCount = xaCount(&(L->CWidgets));
- /** returns 1 if the widgets starting on or crossing the given
- *** line have children that are completely non-flexible **/
+ /*** Return 1 if the widgets starting on or crossing the given line have
+ *** children that are completely non-flexible.
+ ***/
if(type == APOS_ROW)
{
for(i=0; iCWidgets));
if(((pWgtrNode)(xaGetItem(&(L->CWidgets), i)))->fl_height == 0)
return 1;
}
- else //type == APOS_COL
+ else // type == APOS_COL
{
for(i=0; iSWidgets), i)))->fl_width == 0)
@@ -1029,6 +1374,12 @@ int cCount = xaCount(&(L->CWidgets));
return 0;
}
+/*** Calculates the average flexibility of widgets on a line.
+ ***
+ *** @param L The line along which to check.
+ *** @param type Specifies the relevant dimension using APOS_ROW or APOS_COL.
+ *** @returns The average flexibility of children on the line.
+ ***/
int
aposAverageChildFlex(pAposLine L, int type)
{
@@ -1036,7 +1387,7 @@ int TotalFlex=0, i=0;
int sCount = xaCount(&(L->SWidgets));
int cCount = xaCount(&(L->CWidgets));
- /** Sum the flexibilities of widgets within the section proceeding the line**/
+ /** Sum the flexibilities. **/
if(type == APOS_ROW)
{
for(i=0; iCWidgets));
TotalFlex += ((pWgtrNode)xaGetItem(&(L->CWidgets), i))->fl_width;
}
- /**return average flexibility**/
+ /** Return the average flexibility with an aditional fudge factor. **/
return (int)(APOS_FUDGEFACTOR + ((float)TotalFlex)/((float)sCount+(float)cCount));
}
+/*** Calculates the minimum flexibility of widgets on a line.
+ ***
+ *** @param L The line along which to check.
+ *** @param type Specifies the relevant dimension using APOS_ROW or APOS_COL.
+ *** @returns The minimum flexibility of children on the line.
+ ***/
int
aposMinimumChildFlex(pAposLine L, int type)
{
@@ -1063,7 +1420,7 @@ int MinFlex=100, i=0, f;
int sCount = xaCount(&(L->SWidgets));
int cCount = xaCount(&(L->CWidgets));
- /** Find the min flex within the section proceeding the line**/
+ /** Find the min flexibility. **/
if(type == APOS_ROW)
{
for(i=0; iCWidgets));
}
}
- /**return min flexibility**/
+ /** Return the minimum flexibility. **/
return MinFlex;
}
+/*** Distributes extra or missing space among grid lines based on section flexibility.
+ ***
+ *** @param Lines The array of lines in the relevant direction on this grid.
+ *** @param Sections The array of sections in the relevant direction on this grid.
+ *** @param Diff The space difference from how the elements are currently spaced.
+ *** @returns The remaining space difference after spacing out elements as much as possible.
+ ***/
int
aposSpaceOutLines(pXArray Lines, pXArray Sections, int Diff)
{
@@ -1105,7 +1469,7 @@ int FlexibleSections=0;
float FlexWeight=0, SizeWeight=0;
float TotalSum=0;
- /**if there are no sections, don't bother going on**/
+ /** If there are no sections, we have nothing to space out. **/
if(!count) return Diff;
/**Sum the flexibilities of the sections**/
@@ -1120,48 +1484,64 @@ float TotalSum=0;
}
}
- /** if there is no flexibility for expansion or contraction return 0**/
+ /*** If there is no flexibility (no expansion or contraction), we can't
+ *** space anything out. Return the original difference so this can be
+ *** spaced out elsewhere.
+ ***/
if(TotalFlex == 0) return Diff;
- /** sets each line's location equal to the previous line's location
- *** plus the adjusted width of the preceding section **/
+ /** Sum the flex weights of all sections, weighted by their size. **/
count = xaCount(Lines);
for(i=1; iFlex) / (float)(TotalFlex);
- SizeWeight = 0;
- if(FlexWeight > 0)
- SizeWeight = (float)(PrevSect->Width) / (float)(TotalFlexibleSpace);
+ SizeWeight = (FlexWeight > 0) ? (float)(PrevSect->Width) / (float)(TotalFlexibleSpace) : 0;
TotalSum += (FlexWeight * SizeWeight);
}
+ /** The initial borders do not adjust. **/
+ pAposLine leftBorder = (pAposLine)xaGetItem(Lines, 0);
+ leftBorder->loc_fl = leftBorder->my_fl = 0.0f;
+
for(i=1; iFlex) / (float)(TotalFlex);
- SizeWeight = 0;
-
- /** unless there's at least some flexibility, don't factor in size **/
- if(FlexWeight > 0)
- SizeWeight = (float)(PrevSect->Width) / (float)(TotalFlexibleSpace);
+ SizeWeight = (FlexWeight > 0) ? (float)(PrevSect->Width) / (float)(TotalFlexibleSpace) : 0;
+
+ /*** Calculate the adjustment weight, and also save it so we can
+ *** replicate some of the following logic in the CSS we will
+ *** eventually send to the client.
+ ***/
+ float fl = (float)(FlexWeight * SizeWeight) / TotalSum;
+
+ /** Store the line adjustment weight for responsive CSS later. **/
+ CurrLine->loc_fl = PrevLine->loc_fl + fl;
+ CurrLine->my_fl = fl;
- /**for expanding lines**/
+ /** Expand lines. **/
if(Diff > 0)
{
- /*Adj = APOS_FUDGEFACTOR + (float)(Diff) * ((float)(FlexWeight+SizeWeight)/2.0);*/
- Adj = APOS_FUDGEFACTOR + (float)(Diff) * ((float)(FlexWeight*SizeWeight)/TotalSum);
- CurrLine->Loc = PrevLine->Loc + PrevSect->Width + Adj;
+ /** Calculate adjustment using the adjustment weight. **/
+ Adj = (float)(Diff) * fl + APOS_FUDGEFACTOR;
+
+ // printf("Expanding lines by %d*%f=%d\n", Diff, fl, Adj);
+
+ /** Apply the calculated adjustment. **/
PrevSect->Width += Adj;
+ CurrLine->Loc = PrevLine->Loc + PrevSect->Width;
}
- /**for contracting lines**/
+ /** Contract lines. **/
else if(Diff < 0)
{
- /*Adj = (float)(Diff) * ((float)(FlexWeight+SizeWeight)/2.0) - APOS_FUDGEFACTOR;*/
- Adj = (float)(Diff) * ((float)(FlexWeight*SizeWeight)/TotalSum) - APOS_FUDGEFACTOR;
+ /** Calculate adjustment using the adjustment weight. **/
+ Adj = (float)(Diff) * fl - APOS_FUDGEFACTOR;
+
+ // printf("Contracting lines by %d*%f=%d\n", Diff, fl, Adj);
/** if the section width will be unacceptably
*** narrow or negative after the adjustment **/
@@ -1188,8 +1568,8 @@ float TotalSum=0;
}
else
{
- CurrLine->Loc = PrevLine->Loc + PrevSect->Width + Adj;
PrevSect->Width += Adj;
+ CurrLine->Loc = PrevLine->Loc + PrevSect->Width;
}
}
}
@@ -1201,11 +1581,22 @@ float TotalSum=0;
return Extra;
}
+/*** Adjusts widget positions and sizes to snap them to grid lines. This
+ *** function should be called after updating grid lines to ensure that
+ *** widgets properly reflect the changes.
+ ***
+ *** @param Lines The lines being updated.
+ *** @param flag Either APOS_ROW or APOS_COL.
+ *** @param info Info about the page design, currently used to determine if
+ *** flexibility should be used.
+ *** @returns 0, success.
+ ***/
int
-aposSnapWidgetsToGrid(pXArray Lines, int flag)
+aposSnapWidgetsToGrid(pXArray Lines, int flag, pWgtrClientInfo info)
{
+const int is_design = info->IsDesign;
int i=0, j=0, count=0, lineCount = xaCount(Lines);
-int isTopTab=0, isSideTab=0, tabWidth=0;
+int isTopTab=0, isSideTab=0, tabWidth=0, tabHeight=0;
int newsize;
pAposLine CurrLine;
pWgtrNode Widget;
@@ -1219,18 +1610,27 @@ pWgtrNode Widget;
for(j=0; jSWidgets), j);
- if(flag == APOS_ROW) Widget->y = CurrLine->Loc;
- else Widget->x = CurrLine->Loc;
+ if(flag == APOS_ROW)
+ {
+ Widget->y = CurrLine->Loc;
+ Widget->fl_scale_y = (is_design) ? 0.0 : CurrLine->loc_fl;
+ }
+ else
+ {
+ Widget->x = CurrLine->Loc;
+ Widget->fl_scale_x = (is_design) ? 0.0 : CurrLine->loc_fl;
+ }
}
- /** Adjusts width or height of widgets ending on this line **/
+ /** Adjusts width or height of widgets ending on this line. **/
count = xaCount(&(CurrLine->EWidgets));
for(j=0; jEWidgets), j);
- aposSetOffsetBools(Widget, NULL, NULL, &isTopTab, &isSideTab, &tabWidth);
+ aposSetOffsetBools(Widget, NULL, NULL, &isTopTab, &isSideTab, &tabWidth, &tabHeight);
if(flag==APOS_ROW && Widget->fl_height)
{
+ /** Calculate the new size, taking APOS_MINWIDTH into account. **/
newsize = CurrLine->Loc - Widget->y - isTopTab*24;
if (newsize < APOS_MINWIDTH && Widget->pre_height >= APOS_MINWIDTH)
Widget->height = APOS_MINWIDTH;
@@ -1239,24 +1639,62 @@ pWgtrNode Widget;
else
/*Widget->height = APOS_MINWIDTH;*/
Widget->height = Widget->pre_height;
+
+ /*** The widget copies the adjustment weight of the
+ *** line, ignoring APOS_MINWIDTH.
+ ***/
+ Widget->fl_scale_h += (is_design) ? 0.0 : CurrLine->my_fl;
}
else if(flag==APOS_COL && Widget->fl_width)
{
+ /** Calculate the new size, taking APOS_MINWIDTH into account. **/
newsize = CurrLine->Loc - Widget->x - isSideTab*tabWidth;
+
+ /** If the new size is now smaller than the minimum, clamp it. **/
if (newsize < APOS_MINWIDTH && Widget->pre_width >= APOS_MINWIDTH)
Widget->width = APOS_MINWIDTH;
+ /** If the size is bigger than the minimum, or growing, that's fine. **/
else if (newsize >= APOS_MINWIDTH || newsize >= Widget->pre_width)
Widget->width = newsize;
+ /** Otherwise, we can't update the size. **/
else
/*Widget->width = APOS_MINWIDTH;*/
Widget->width = Widget->pre_width;
+
+ /*** The widget copies the adjustment weight of the
+ *** line, ignoring APOS_MINWIDTH.
+ ***/
+ Widget->fl_scale_w += (is_design) ? 0.0 : CurrLine->my_fl;
}
}
+
+ if (!is_design)
+ {
+ /** Adjusts width or height of widgets ending on this line. **/
+ count = xaCount(&(CurrLine->CWidgets));
+ for(j=0; jCWidgets), j);
+ if(flag==APOS_ROW && Widget->fl_height)
+ Widget->fl_scale_h += (is_design) ? 0.0 : CurrLine->my_fl;
+ else if(flag==APOS_COL && Widget->fl_width)
+ Widget->fl_scale_w += (is_design) ? 0.0 : CurrLine->my_fl;
+ }
+ }
+
}
return 0;
}
+/***
+ *** Processes floating windows and recursively positions visual and
+ *** nonvisual containers.
+ ***
+ *** @param VisualRef The last visual container up the inheritance tree.
+ *** @param Parent The widget being scanned for windows.
+ *** @returns 0 if successful, -1 otherwise.
+ ***/
int
aposProcessWindows(pWgtrNode VisualRef, pWgtrNode Parent)
{
@@ -1274,7 +1712,7 @@ int ival;
return -1;
}
- aposSetOffsetBools(Parent, &isSP, &isWin, NULL, NULL, NULL);
+ aposSetOffsetBools(Parent, &isSP, &isWin, NULL, NULL, NULL, NULL);
/**loop through children and process any windows**/
for(i=0; iProperties));
for (i=0;iInteger = widget->fl_y; return 0; }
if (!strcmp(name+3, "width")) { val->Integer = widget->fl_width; return 0; }
if (!strcmp(name+3, "height")) { val->Integer = widget->fl_height; return 0; }
+ if (!strcmp(name+3, "parent_w")) { val->Integer = widget->fl_parent_w; return 0; }
+ if (!strcmp(name+3, "parent_h")) { val->Integer = widget->fl_parent_h; return 0; }
+ }
+ }
+ else if (datatype == DATA_T_DOUBLE)
+ {
+ if (strncmp(name, "fl_scale_", 9) == 0)
+ {
+ if (strcmp(name+9, "x") == 0) { val->Double = widget->fl_scale_x; return 0; }
+ else if (strcmp(name+9, "y") == 0) { val->Double = widget->fl_scale_y; return 0; }
+ else if (strcmp(name+9, "w") == 0) { val->Double = widget->fl_scale_w; return 0; }
+ else if (strcmp(name+9, "h") == 0) { val->Double = widget->fl_scale_h; return 0; }
+ }
+ else if (strncmp(name, "f", 1) == 0)
+ {
+ if (strcmp(name+1, "x") == 0) { val->Double = widget->fx; return 0; }
+ else if (strcmp(name+1, "y") == 0) { val->Double = widget->fy; return 0; }
+ else if (strcmp(name+1, "w") == 0) { val->Double = widget->fw; return 0; }
+ else if (strcmp(name+1, "h") == 0) { val->Double = widget->fh; return 0; }
}
}
else if (datatype == DATA_T_STRING)
@@ -1571,10 +1596,15 @@ wgtrNewNode( char* name, char* type, pObjSession s,
node->fl_y = fly;
node->fl_width = flwidth;
node->fl_height = flheight;
+ node->fl_parent_h = -1;
+ node->fl_parent_w = -1;
+ node->fl_scale_x = 0.0;
+ node->fl_scale_y = 0.0;
+ node->fl_scale_w = 0.0;
+ node->fl_scale_h = 0.0;
node->ObjSession = s;
node->Parent = NULL;
- node->min_height = 0;
- node->min_width = 0;
+ node->min_height = node->min_width = 0;
node->LayoutGrid = NULL;
node->Root = node; /* this will change when it is added as a child */
node->DMPrivate = NULL;
@@ -2573,5 +2603,3 @@ wgtrGetNamespace(pWgtrNode widget)
{
return widget->Namespace;
}
-
-
