# mod $define(mod_webuibts=) $define(v_top_space_margin=10px) $define(v_top_space_padding=10px) $define(v_bot_space_margin=10px) $define(v_bot_space_padding=10px) $define(v_content_padding=10px) $define(v_img_padding=10px) # ===== # Directives macro $define(ui_begin= $tempto(rad_ui.html) $redir(true) ) $define(ui_end=$redir(false)$fileout(true,$path(cache,ui.html),$tempin())) $define(script_begin= $tempto(rad_ui.js) $redir(true) ) $define(script_end=$redir(false)$fileout(true,$path(cache,ui.js),$tempin())) # ===== # Top space macros $define(top_space,a_content=
$a_content()
) $top_space|(a) $define(top_left,a_content=
$a_content()
) $top_left|(a) $define(top_center,a_content=
$a_content()
) $top_center|(a) $define(top_right,a_content=
$a_content()
) $top_right|(a) # ===== # Container macros $define(container,a_content=
$a_content()
) $container|(a) $define(vcontainer,a_content=
$a_content()
) $vcontainer|(a) # ===== # Layout macros # sub containers $define(header,a_content=) # Has fixed size or ratio $header|(a) # content(id, width, ...) # _vcontent(id, height, ...) $define(content,a_id a_width a_content=$bind+(flex_grow,$if($eval("$a_width()" == "0"),flexGrow))
$a_content()
) $content|(1,0,a) $content|(1,10px,a) $define(content_center,a_id a_width a_content=$bind+(flex_grow,$if($eval("$a_width()" == "0"),flexGrow))
$a_content()
) $content_center|(1,0,a) $content_center|(1,10px,a) $define(vcontent,a_id a_height a_content= $bind+(flex_grow,$if($eval("$a_height()" == "0"),flexGrow))
$a_content()
) $vcontent|(1,0,a) $vcontent|(1,10px,a) $define(vcontent_center,a_id a_height a_content= $bind+(flex_grow,$if($eval("$a_height()" == "0"),flexGrow))
$a_content()
) $vcontent_center|(1,0,a) $vcontent_center|(1,10px,a) # Content scrollable # This is technically listView # content_scroll(id, width, content) $define(content_scroll,a_id a_width a_content=
$a_content()
) $content_scroll|(1,0,a) $content_scroll|(1,10px,a) # vcontent_scroll(id, height, content) $define(vcontent_scroll,a_id a_height a_content=
$a_content()
) $vcontent_scroll|(1,0,a) $vcontent_scroll|(1,10px,a) # Footer $define(footer,a_content=) # Has fixed size or ratio $footer|(b) # ========== # Form macros # Text input $define(tinput,a_id a_placeholder= ) $tinput|(1,1) # Text input with labels $define(tinput_label,a_id a_placeholder a_label=
$a_label()
) $tinput_label|(1,1,1) # Number input $define(ninput,a_id a_placeholder= ) $ninput|(1,1) # Number input with labels $define(ninput_label,a_id a_placeholder a_label=
$a_label()
) $ninput_label|(1,1,1) # Input Inline $define(inline,a_content=
$a_content()
) $inline|(a) # Switch $define(switch,a_id a_label=
) $switch|(1,1) # Radio internal macro $define(m_radio,a_name a_id=
) $m_radio|(name,id) # Radio select $define(radio,a_id a_radio_ids=
$foreach($a_radio_ids*(),\*$m_radio($a_id(),$:)*\)
) $radio|(1,a,b,c) # Selection items $define(m_sel_item,a_id = ) $m_sel_item|(1) # Selection(Dropdown) $define(sel,a_id a_sel_ids= ) $sel|(1,a,b,c,d) # Checkboxes $define(checkbox,a_id a_label=
) $checkbox|(1,Label) # Range $define(range,a_id a_label a_min a_max= ) # carousel item $define(car_item,a_content=
$a_content()
) $car_item|(ITEM) $define(car,a_id a_content= ) $car|(1,$car_item(ITEM) $car_item(ITEM2)) $define(float_item,a_id a_content=
$a_content()
) $float_item|(1,2) # Floating menu $define(float_menu,a_id a_position a_content=
$a_content()
) $float_menu|(id,top,$float_item(1,2)) # Dialogue # dial(id,speaker,text) $define(dial,a_id a_speaker a_text=
$a_speaker()
$a_text()
) $dial|(1,1,1) # ===== # General $define(image,a_src a_id a_size= Image not rendered ) $image|(src,id,50px) # Icon $define(icon,a_icon=) $icon|(1) # Paragraph $define(p,a_content=

$a_content()

) $p|(TTTTTT) # Button # btn(id,content) $define(btn,a_id a_content=) $btn|(id,content) # label(Text label content) $define(label,a_id a_content=
$a_content()
) $label|(id,content) # Label but center text $define(label_center,a_id a_content=
$a_content()
) $label_center|(id,content) # MACRO >>> Squre grid macro $define(grid_cell,a_id a_content=
$a_content()
) $grid_cell|(id,content) $define(grid,a_id a_grid_count a_content=
$a_content()
) $grid|(id,3,content) # ========== # Swappable area # Single swap button $define(m_swap_button,a_name a_id= ) $m_swap_button|(name,id) # Swap button radio group $define(swap_button_group,a_id a_swap_buttons=
$foreach($a_swap_buttons*(),\*$m_swap_button($a_id(), $:)*\)
) $swap_button_group|(id,Hello World,John doe) # Swappable items # second argument or target parent should be same with parent div, element or _contents id $define(swap_item,a_id a_parent_id a_content=
$a_content()
) $swap_item|(id,parent,content) # Card component $define(card,a_id a_title a_content=
$a_title()
$a_content()
) $card|(id,title,content) # Card with image $define(card_img,a_id a_title a_image a_content=
!!Card Image is not found!!
$a_title()
$a_content()
) $card|(id,src,title,content) # collection, simply collection of aligned div items # collection doesnt expand but srhik while list view can be expanded with scroll bars # coll(id ,loopCount, content) $define(coll,a_id a_count a_content=
$forloop(0,$a_count(),$a_content())
) $coll|(id,5,content) $define(vcoll,a_id a_count a_content=
$forloop(0,$a_count(),$a_content())
) $vcoll|(id,5,content) # Modal macros # Modal Header $define(m_modal_header,a_title=
$a_title()
) $m_modal_header|(title) # Modal body $define(m_modal_body,a_content=
$a_content()
) $m_modal_body|(content) # Modal footer $define(m_modal_footer,a_content=
$a_content()
) $m_modal_footer|(content) # Modal user macros $define(modal,a_id a_title a_body a_footer= ) $modal|(id,title,body,footer) # ===== # Bottom space macros $define(bot_space,a_content=
$a_content()
) $bot_space|(content) $define(bot_left,a_content=
$a_content()
) $bot_left|(content) $define(bot_center,a_content=
$a_content()
) $bot_center|(content) $define(bot_right,a_content=
$a_content()
) $bot_right|(content) # MISC # There were too much things to modify I just forced full html tags bc, why not $define(screen_touch,a_id a_content= ) $screen_touch|(id,content) # Sidebar # Sidebar Left $define(sidebar_left,a_id a_content=
$a_content()
) $sidebar_left|(id,content) # Sidebar Right $define(sidebar_right,a_id a_content=
$a_content()
) $sidebar_right|(id,content) # ========== # Style modifier # Css tyle and js script can use this modifier html tag to modify # element that comes next to the modifier $define(style_next,a_mdf_classes=) $style_next|(1,2,4,5,6) # ========== # Scripts # Add callback for event # Origin id, eventType, callbackMacro $define(add_call,a_id a_event_type a_content =addCallback("$a_id()", "$a_event_type()",(ev) => {$a_content()})) # Add tooltip to element $define(add_tooltip,a_id a_tooltip =setProperties("$a_id()",{"data-bs-toggle":"tooltip","data-bs-placement":"top","title":"$a_tooltip()"})) # Call alert function # e.g. add_call(alert, click, call_alert(This is new text)) $define(call_alert,a_id =alert("$a_id()")) # Call element toggle function $define(call_toggle,a_id=toggleElement("$a_id()")) # Call sync value function, while this says value but it syncs text $define(call_sync_text,a_id=syncText("$a_id()",ev)) # Go to url $define(call_visit,a_id=window.location="$a_id()") # Call specific event on target $define(call_event,a_id a_event_type=triggerEvent("$a_id()" , "$a_event_type()")) # Call update, or say set properties on target $define(call_update,a_id a_prop_name a_prop_value=setProperties("$a_id()",{"$a_prop_name()" : "$a_prop_value()"})) # Show Modal $define(call_modal,a_id=callModal("$a_id()")) # Show Modal $define(hide_modal,a_id=hideModal("$a_id()")) # Toggle sidebar $define(call_sidebar,a_id=toggleSidebar("$a_id()")) # Toggle floatmenu $define(call_float_menu,a_id=toggleFloatMenu("$a_id()"))