CuneiModal - ประวัติรุ่นแก้ไข

Tenko: /* Notable Sub-routines */

2024-06-25T03:25:50Z

Notable Sub-routines

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 10:25, 25 มิถุนายน 2567
บรรทัดที่ 121:		บรรทัดที่ 121:
	\|}		\|}

	~~== Notable Sub-routines ==~~

	~~=== Modal Showing ===~~

	~~=== Modal Hiding ===~~


	{{The Tenko Shrine}}		{{The Tenko Shrine}}

Tenko: /* Modal Upper Macro & Modal Object */

2024-06-25T03:13:15Z

Modal Upper Macro & Modal Object

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 10:13, 25 มิถุนายน 2567
บรรทัดที่ 28:		บรรทัดที่ 28:
	** '''{{code\|lang=javascript\|'table'}}''': Used for search modals. Note that manually drawn search modals/tables are quite rare, since another wrapper macro {{code\|draw_sctbs}} is used to draw all search modals en-masse. (See [[Multi-component Page]].)		** '''{{code\|lang=javascript\|'table'}}''': Used for search modals. Note that manually drawn search modals/tables are quite rare, since another wrapper macro {{code\|draw_sctbs}} is used to draw all search modals en-masse. (See [[Multi-component Page]].)
	** '''{{code\|lang=javascript\|'form'}}''': Used for modals with a standalone form inside. A modal of this type submits its main form when the modal's OK button is clicked.		** '''{{code\|lang=javascript\|'form'}}''': Used for modals with a standalone form inside. A modal of this type submits its main form when the modal's OK button is clicked.
	** '''{{code\|lang=javascript\|'exform'}}''': ~~The most generic~~ type of modals~~. A modal of this type~~ interacts very little with other page elements ~~and thus can be viewed as a~~ 'blank slate~~' of sort~~.		** '''{{code\|lang=javascript\|'exform'}}''': Used for modals holding extension parts of forms. This type of modals interacts very little with other page elements with only its show/hide routine linked with the form's navigation routine.
			** '''{{code\|lang=javascript\|'modal'}}''': A blank slate.
	* '''title''' ''(str)'': The modal header text. If this is an empty string or {{code\|lang=javascript\|null}}, the resulting modal is drawn without the modal-header {{code\|lang=html\|<div>}}.		* '''title''' ''(str)'': The modal header text. If this is an empty string or {{code\|lang=javascript\|null}}, the resulting modal is drawn without the modal-header {{code\|lang=html\|<div>}}.
	* '''class''' and '''head_bg''' take the formats of ''class'' and ''custom_color'' arguments of CuneiForm's '''[[CuneiForm#Buttons & Submits\|render_btn]]''' respectively. They dictates the colour of the table header as well as the color scheme of the full-form modal (when applicable). Note that, if both are given, '''head_bg''' takes precedence.		* '''class''' and '''head_bg''' take the formats of ''class'' and ''custom_color'' arguments of CuneiForm's '''[[CuneiForm#Buttons & Submits\|render_btn]]''' respectively. They dictates the colour of the table header as well as the color scheme of the full-form modal (when applicable). Note that, if both are given, '''head_bg''' takes precedence.

Tenko: /* Modal Lower Macro */

2024-06-25T03:00:08Z

Modal Lower Macro

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 10:00, 25 มิถุนายน 2567
บรรทัดที่ 94:		บรรทัดที่ 94:

	=== Modal Lower Macro ===		=== Modal Lower Macro ===

			This lower half of the CuneiModal macros takes care of the closing tags of all modal's structural components and the closing script to finish the CuneiModal object.

	'''<syntaxhighlight lang="javascript">		'''<syntaxhighlight lang="javascript">
	modal_lower_half(modalid, class="success", head_bg=false, hidden=false,		modal_lower_half(modalid, class="success", head_bg=false, hidden=false,
บรรทัดที่ 103:		บรรทัดที่ 106:
	\|- style="vertical-align:top;"		\|- style="vertical-align:top;"
	\| style="width:120px;" \| '''Parameters''' \|\| '''DO NOT''' rely on argument order farther than ''modalid'' and ''type'', '''ALWAYS PROVIDE''' argument keywords.		\| style="width:120px;" \| '''Parameters''' \|\| '''DO NOT''' rely on argument order farther than ''modalid'' and ''type'', '''ALWAYS PROVIDE''' argument keywords.
	* '''modalid''' ''(str)''		* '''modalid''' ''(str)'': The ID of the CuneiModal object and the modal {{code\|lang=html\|<div>}}.
	* '''class''' and '''head_bg''' take the formats of ''class'' and ''custom_color'' arguments of CuneiForm's '''[[CuneiForm#Buttons & Submits\|render_btn]]''' respectively. They dictates the colour of the table header as well as the color scheme of the full-form modal (when applicable). Note that, if both are given, '''head_bg''' takes precedence.		* '''class''' and '''head_bg''' take the formats of ''class'' and ''custom_color'' arguments of CuneiForm's '''[[CuneiForm#Buttons & Submits\|render_btn]]''' respectively. They dictates the colour of the table header as well as the color scheme of the full-form modal (when applicable). Note that, if both are given, '''head_bg''' takes precedence. In this lower half macro, both arguments affect the modal's OK and Cancel button.
	* '''hidden''' ''(bool)'':		* '''hidden''' ''(bool)'': Whether the modal footer element is hidden.
	* '''ok_btn''' ''(str)'':		* '''ok_btn''' ''(str)'': The text within the OK button.
	* '''hide_ok''' ''(bool)'':		* '''hide_ok''' ''(bool)'': Whether the OK button is drawn.
	* '''addi_btns''' ''(array)'':		* '''addi_btns''' ''(array)'': The array of specifications for additional buttons to show along side the OK and Cancel buttons. Each member is a 4-membered array:
	* '''close_btn''' ''(str)'':		*# '''btnname''' ''(str)'': The short reference to the button. The real {{code\|lang=html\|<button>}} element will have the ID {{code\|lang=javascript\|'<modalid>-<btnname>btn'}}.
	* '''hide_cancel''' ''(bool)'':		*# '''btnlab''' ''(str)'': The text within the button.
			*# '''btnclass''' ''(str)'': The colour class of the button. (See valid options under [[CuneiForm#Buttons & Submits]].)
			*# '''btncmd''' ''(str)'': The name of the function (arguments not supported) to run when the button is clicked.
			* '''close_btn''' ''(str)'': The text within the Cancel button.
			* '''hide_cancel''' ''(bool)'': Whether the Cancel button is drawn.
	\|}		\|}

	~~==== The Working of Modal Lower Macro ====~~

	== Notable Sub-routines ==		== Notable Sub-routines ==

Tenko: /* Modal Object Attributes */

2024-06-24T08:50:05Z

Modal Object Attributes

@@ บรรทัดที่ 72: / บรรทัดที่ 72: @@
 ** '''about_to_show''' ''(bool)'': Whether the modal is in 'show' state.
 ** '''instant_trigger''' ''(bool)'': ''(Only applies to search modals.)'' Set to {{code|lang=javascript|true}} just before the modal is shown. This attribute might look redundant with the previous two at first glance, but it marks the search modal as 'ready to be closed' within the quick-search routine of the invoking form.
-** post_fill_nav
+** '''post_fill_nav''' ''(str)'': ''Only applies to search modals.'' Dictates focus behaviour after the modal is closed. Its value is automatically set as a part of the invoker form's navigation routine and can be any of the values listed below:
-** hide_mode
+*** '''{{code|lang=javascript|'f'}}''': Go forward in the invoker form's sequence, simulating a simple {{key press|Tab}} on the invoker field.
-** promptly_submit
+*** '''{{code|lang=javascript|'r'}}''': Go backward in the invoker form's sequence, simulating a simple {{key press|Shift|Tab}} on the invoker field.
 === Modal Lower Macro ===

Tenko: /* Modal Object Attributes */

2024-06-24T06:59:44Z

Modal Object Attributes

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 13:59, 24 มิถุนายน 2567
บรรทัดที่ 67:		บรรทัดที่ 67:

	* '''Status Attributes'''		* '''Status Attributes'''
	** hold_modal		** '''hold_modal''' ''(bool)'': Whether the modal is being prevented from closing, due to a dependent modal being shown.
	** release_modal		** '''release_modal''' ''(modal object or {{code\|lang=javascript\|false}})'': The modal that this exact one is depedent on. Once this modal is closed, the base modal held in this variable is released.
	** shown_status		** '''shown_status''' ''(bool)'': Whether the modal is in 'shown' state.
	** about_to_show		** '''about_to_show''' ''(bool)'': Whether the modal is in 'show' state.
	** instant_trigger		** '''instant_trigger''' ''(bool)'': ''(Only applies to search modals.)'' Set to {{code\|lang=javascript\|true}} just before the modal is shown. This attribute might look redundant with the previous two at first glance, but it marks the search modal as 'ready to be closed' within the quick-search routine of the invoking form.
	** post_fill_nav		** post_fill_nav
	** hide_mode		** hide_mode

Tenko: /* Modal Object Attributes */

2024-06-24T06:47:29Z

Modal Object Attributes

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 13:47, 24 มิถุนายน 2567
บรรทัดที่ 48:		บรรทัดที่ 48:

	* '''Colours & Classes'''		* '''Colours & Classes'''
	** head_class		** '''head_class''' ''({{code\|lang=javascript\|false}})'': ''(Obsolete)''
	** ok_class		** '''ok_class''' ''(str)'': Specifies the class to be used by the modal's OK button. The Bootstrap class {{code\|btn-<ok_class>}} is applied.

	* '''References to Modal Elements'''		* '''References to Modal Elements'''
	** modal_ele		** '''modal_ele''': Points to the corresponding modal {{code\|lang=html\|<div>}} DOM element.
	** ok_ele		** '''ok_ele''': Points to the modal's OK {{code\|lang=html\|<button>}} element.
	** close_ele		** '''close_ele''': Points to the modal's Cancel {{code\|lang=html\|<button>}} element.
	** x_ele		** '''x_ele''': Points to the modal's top-right X {{code\|lang=html\|<button>}} element.
	** main_comp_obj		** '''main_comp_obj''': Points to the modal's main table or form object. ''(Only applies for form- and table-typed modals.)''

	* '''References to Other Elements'''		* '''References to Other Elements'''
	** first_focus		** '''first_focus''' ''(str)'': Takes on the value of '''first_focus''' argument of the Jinja2 macro.
	** next_focus		** '''next_focus''' ''({{code\|lang=javascript\|[<field element>, <form object>]}} or {{code\|lang=javascript\|false}})'': Field to focus once the modal is shown. If both this attribute and '''first_focus''' are set, '''first_focus''' takes priority.
	** invoker		** '''invoker''' ''(array)'': The information about the element that triggers the modal. This value is necessary for a modal to call the proper routine upon closing. This attribute takes the following format:
	** fillers		*** '''table-typed modals:''' {{code\|lang=javascript\|['form', <object:form object>, <int:field index>, <str:instant search column name>]}}
			*** '''exform-typed modals:''' {{code\|lang=javascript\|['table', <object:table object>, null]}}
			** '''fillers''' ''(array)'': Works with '''invoker''' attribute for '''table-typed modals'''. This is the processed version of the invoker field's '''fill''' argument (see [[CuneiForm#String & Text Area Fields]]). Each member of the array is a 2-array {{code\|lang=javascript\|[<int:field index>, <str:fill column>]}}.

	* '''Status Attributes'''		* '''Status Attributes'''

Tenko: /* Modal Object Attributes */

2024-06-24T05:06:50Z

Modal Object Attributes

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 12:06, 24 มิถุนายน 2567
บรรทัดที่ 43:		บรรทัดที่ 43:
	Below is the list of and notes on modal object attributes:		Below is the list of and notes on modal object attributes:
	* '''Basic Attributes'''		* '''Basic Attributes'''
			** '''id''' ''(str)'': The ID of the CuneiModal.
			** '''self_type''': Takes on the value {{code\|lang=javascript\|'modal'}}.
			** '''type''': Takes on the value of '''{{code\|type}}''' argument of the Jinja2 macro.

	* '''Colours & Classes'''		* '''Colours & Classes'''
			** head_class
			** ok_class

	* '''References to Modal Elements'''		* '''References to Modal Elements'''
			** modal_ele
			** ok_ele
			** close_ele
			** x_ele
			** main_comp_obj

	* '''References to Other Elements'''		* '''References to Other Elements'''
			** first_focus
			** next_focus
			** invoker
			** fillers

	* '''Status Attributes'''		* '''Status Attributes'''
			** hold_modal
			** release_modal
			** shown_status
			** about_to_show
			** instant_trigger
			** post_fill_nav
			** hide_mode
			** promptly_submit

	=== Modal Lower Macro ===		=== Modal Lower Macro ===

Tenko: /* Modal Upper Macro & Modal Object */

2024-06-24T04:13:51Z

Modal Upper Macro & Modal Object

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 11:13, 24 มิถุนายน 2567
บรรทัดที่ 12:		บรรทัดที่ 12:

	=== Modal Upper Macro & Modal Object ===		=== Modal Upper Macro & Modal Object ===

			This half of the CuneiModal macros takes care of creating the CuneiModal object and initiating the modal HTML elements up to the open tag of the {{code\|lang=html\|<div>}} for '''modal-content'''.

	'''<syntaxhighlight lang="javascript">		'''<syntaxhighlight lang="javascript">
บรรทัดที่ 22:		บรรทัดที่ 24:
	\|- style="vertical-align:top;"		\|- style="vertical-align:top;"
	\| style="width:120px;" \| '''Parameters''' \|\| '''DO NOT''' rely on argument order farther than ''modalid'' and ''type'', '''ALWAYS PROVIDE''' argument keywords.		\| style="width:120px;" \| '''Parameters''' \|\| '''DO NOT''' rely on argument order farther than ''modalid'' and ''type'', '''ALWAYS PROVIDE''' argument keywords.
	* '''modalid''' ''(str)''		* '''modalid''' ''(str)'': The ID of the CuneiModal object and the modal {{code\|lang=html\|<div>}}.
	* '''type''' ''(str)'':		* '''type''' ''(str)'': The type or main function of the modal. This value determines the modal's interaction with other elements (both inside and outside of itself). The value can be one of:
	* '''title''' ''(str)'':		** '''{{code\|lang=javascript\|'table'}}''': Used for search modals. Note that manually drawn search modals/tables are quite rare, since another wrapper macro {{code\|draw_sctbs}} is used to draw all search modals en-masse. (See [[Multi-component Page]].)
			** '''{{code\|lang=javascript\|'form'}}''': Used for modals with a standalone form inside. A modal of this type submits its main form when the modal's OK button is clicked.
			** '''{{code\|lang=javascript\|'exform'}}''': The most generic type of modals. A modal of this type interacts very little with other page elements and thus can be viewed as a 'blank slate' of sort.
			* '''title''' ''(str)'': The modal header text. If this is an empty string or {{code\|lang=javascript\|null}}, the resulting modal is drawn without the modal-header {{code\|lang=html\|<div>}}.
	* '''class''' and '''head_bg''' take the formats of ''class'' and ''custom_color'' arguments of CuneiForm's '''[[CuneiForm#Buttons & Submits\|render_btn]]''' respectively. They dictates the colour of the table header as well as the color scheme of the full-form modal (when applicable). Note that, if both are given, '''head_bg''' takes precedence.		* '''class''' and '''head_bg''' take the formats of ''class'' and ''custom_color'' arguments of CuneiForm's '''[[CuneiForm#Buttons & Submits\|render_btn]]''' respectively. They dictates the colour of the table header as well as the color scheme of the full-form modal (when applicable). Note that, if both are given, '''head_bg''' takes precedence.
	* '''size''' ''(str)'':		* '''size''' ''(str)'': The size of the modal can be specified as either:
	* '''first_focus''' ''(str)'':		** '''{{code\|lang=javascript\|''}} or {{code\|lang=javascript\|null}}''': Use the Bootstrap 4's default size.
			** '''{{code\|lang=javascript\|'sm'}}, {{code\|lang=javascript\|'lg'}}, or {{code\|lang=javascript\|'xl'}}''': Use Bootstrap 4's {{code\|modal-sm}}, {{code\|modal-lg}}, or {{code\|modal-xl}} class respectively.
			** '''Any other string interpretable as a CSS size''': Explicitly specify the width of the modal.
			* '''first_focus''' ''(str)'': The ID of the element that should take the focus once the modal is shown. If not given, CuneiFox assumes the first focus element of the modal as follows:
			** '''Table-typed modal''': If the main table has any record, the first row gets the focus. Otherwise, the table header row gets the focus.
			** '''Form-typed modal''': The first unhidden and enabled field of the main form gets the focus.
	\|}		\|}

	~~==== The Working of Modal Upper Macro ====~~


	==== Modal Object Attributes ====		==== Modal Object Attributes ====

Tenko: /* Modal Lower Macro */

2024-06-20T08:07:19Z

Modal Lower Macro

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 15:07, 20 มิถุนายน 2567
บรรทัดที่ 64:		บรรทัดที่ 64:
	* '''hide_cancel''' ''(bool)'':		* '''hide_cancel''' ''(bool)'':
	\|}		\|}

			==== The Working of Modal Lower Macro ====

	== Notable Sub-routines ==		== Notable Sub-routines ==

Tenko: /* Modal Upper Macro & Modal Object */

2024-06-20T08:05:46Z

Modal Upper Macro & Modal Object

@@ บรรทัดที่ 29: / บรรทัดที่ 29: @@
 * '''first_focus''' ''(str)'':
 |}
 === Modal Lower Macro ===

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 10:13, 25 มิถุนายน 2567
บรรทัดที่ 28:		บรรทัดที่ 28:
	** '''{{code\|lang=javascript\|'table'}}''': Used for search modals. Note that manually drawn search modals/tables are quite rare, since another wrapper macro {{code\|draw_sctbs}} is used to draw all search modals en-masse. (See [[Multi-component Page]].)		** '''{{code\|lang=javascript\|'table'}}''': Used for search modals. Note that manually drawn search modals/tables are quite rare, since another wrapper macro {{code\|draw_sctbs}} is used to draw all search modals en-masse. (See [[Multi-component Page]].)
	** '''{{code\|lang=javascript\|'form'}}''': Used for modals with a standalone form inside. A modal of this type submits its main form when the modal's OK button is clicked.		** '''{{code\|lang=javascript\|'form'}}''': Used for modals with a standalone form inside. A modal of this type submits its main form when the modal's OK button is clicked.
	** '''{{code\|lang=javascript\|'exform'}}''': ~~The most generic~~ type of modals~~. A modal of this type~~ interacts very little with other page elements ~~and thus can be viewed as a~~ 'blank slate~~' of sort~~.		** '''{{code\|lang=javascript\|'exform'}}''': Used for modals holding extension parts of forms. This type of modals interacts very little with other page elements with only its show/hide routine linked with the form's navigation routine.
			** '''{{code\|lang=javascript\|'modal'}}''': A blank slate.
	* '''title''' ''(str)'': The modal header text. If this is an empty string or {{code\|lang=javascript\|null}}, the resulting modal is drawn without the modal-header {{code\|lang=html\|<div>}}.		* '''title''' ''(str)'': The modal header text. If this is an empty string or {{code\|lang=javascript\|null}}, the resulting modal is drawn without the modal-header {{code\|lang=html\|<div>}}.
	* '''class''' and '''head_bg''' take the formats of ''class'' and ''custom_color'' arguments of CuneiForm's '''[[CuneiForm#Buttons & Submits\|render_btn]]''' respectively. They dictates the colour of the table header as well as the color scheme of the full-form modal (when applicable). Note that, if both are given, '''head_bg''' takes precedence.		* '''class''' and '''head_bg''' take the formats of ''class'' and ''custom_color'' arguments of CuneiForm's '''[[CuneiForm#Buttons & Submits\|render_btn]]''' respectively. They dictates the colour of the table header as well as the color scheme of the full-form modal (when applicable). Note that, if both are given, '''head_bg''' takes precedence.