CuneiModal

จาก คูนิฟ็อกซ์ วิกิ

CuneiModals are basically pop-up windows with pre-defined scripts and event handlers to make them work fluently with CuneiForms and CuneiTables. They are purely client-side constructs, so there are no needs to define and initiate them on the server side. It is, however, necessary for the server-side developer to anticipate their existence and, in most cases, their IDs in the server-side code. (See attributes in_modal of CuneiForms and in_modal/bound_modal of CuneiTables.)

Design & Pre-made Scripts

The process of putting up a CuneiModal is designed to be as straigtforward as possible, at least for the most common use cases (see notes on CuneiModal types below). All one has to do is to surround whatever that go in a modal with 2 extra lines of Jinja2 macros.

{{ CuneiModals.modal_upper_half("<ModalID>", ...) }}
    /* Modal content goes here. */
{{ CuneiModals.modal_lower_half("<ModalID>", ...) }}

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 <div> for modal-content.

modal_upper_half(modalid, type="table", title="Look up", 
				 class="primary", head_bg=false, size=false,
				 first_focus=false)
Parameters DO NOT rely on argument order farther than modalid and type, ALWAYS PROVIDE argument keywords.
  • modalid (str): The ID of the CuneiModal object and the modal <div>.
  • 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:
    • 'table': Used for search modals. Note that manually drawn search modals/tables are quite rare, since another wrapper macro draw_sctbs is used to draw all search modals en-masse. (See Multi-component Page.)
    • '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.
    • '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 null, the resulting modal is drawn without the modal-header <div>.
  • class and head_bg take the formats of class and custom_color arguments of CuneiForm's 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): The size of the modal can be specified as either:
    • '' or null: Use the Bootstrap 4's default size.
    • 'sm', 'lg', or 'xl': Use Bootstrap 4's modal-sm, modal-lg, or 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.

Modal Object Attributes

Below is the list of and notes on modal object attributes:

  • Basic Attributes
  • Colours & Classes
  • References to Modal Elements
  • References to Other Elements
  • Status Attributes

Modal Lower Macro

modal_lower_half(modalid, class="success", head_bg=false, hidden=false,
				 ok_btn="OK", hide_ok=false, addi_btns=[],
				 close_btn="Close", hide_cancel=false)
Parameters DO NOT rely on argument order farther than modalid and type, ALWAYS PROVIDE argument keywords.
  • modalid (str)
  • class and head_bg take the formats of class and custom_color arguments of CuneiForm's 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.
  • hidden (bool):
  • ok_btn (str):
  • hide_ok (bool):
  • addi_btns (array):
  • close_btn (str):
  • hide_cancel (bool):

The Working of Modal Lower Macro

Notable Sub-routines

Modal Showing

Modal Hiding