/* @license Copyright (C) Exontrol. All rights reserved. */ /////////////////////////////////////////////////////////// (exontrol.Menu) // // The exontrol.Menu class provides the following events (through oLts): // // "onlayoutchange", notifies your application that the control's layout has been changed. The onlayoutchange's parameter is: // // oEvent {object}, indicates the control's new layout as an object of exontrol.Menu.Layout type // // "onselect", occurs once the user selects/clicks an item (excluding popup-items). The onselect's parameter is: // // oEvent {object}, specifies the control's item being clicked/selected as an object of exontrol.Menu.Item type // // "oncheck", notifies your application that the user checks an item. The oncheck's parameter is: // // oEvent {object}, specifies the control's item being checked as an object of exontrol.Menu.Item type // // "onuncheck", occurs once the user unchecks an item. The onuncheck's parameter is: // // oEvent {object}, specifies the control's item being unchecked as an object of exontrol.Menu.Item type // // "onopen", notifies your application that a new float-menu has been opened. The onopen's parameter is: // // oEvent {object}, specifies the float-menu being opened as an object of exontrol.Menu type // // "onclose", occurs once a float-menu has been closed. The onclose's parameter is: // // oEvent {object}, specifies the float-menu being closed as an object of exontrol.Menu type // // "onmodal", occurs once the control begins or ends modal-mode, so one or more float-menus are being shown. The onmodal's parameter is: // // oEvent {boolean}, specifies whether the modal-mode starts or ends // // "onanchorclick", (@since 2.2) occurs once the user clicks an anchor element (the ex-HTML part marks an anchor or hyperlink element). The onanchorclick's parameter is: // // oEvent {object}, specifies an object of {id,options} type, that holds information about the anchor being clicked. // // oEvent.id {string}, specifies null or the identifier of the anchor being clicked // oEvent.options {string}, specifies null or the options of the anchor being clicked // /////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////// (exontrol.Def.Menu) // // The exontrol.Def.Menu namespace provides definitions for different objects, primitives, objects of exontrol.Menu object // // The exontrol.Def.Menu namespace provides the following fields: // // tfi {(string|object)}, holds the font attributes for captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. // locked {boolean}, indicates whether the control is locked(protected) or unlocked // readOnly {boolean}, specifies whether the control is read-only // wheelChange {number}, specifies the amount the control scrolls when the user rolls the mouse wheel. // items {string}, defines the items of the menu from a string-representation. // criSize {number}, specifies the size (width and height) to show a check-box/radio-button or the item's image // criPad {(number|string|array)}, indicates the padding to apply to a check-box/radio-button or the item's image // criAlign {boolean}, specifies whether the check-box/radio-button or the item's image are vertically aligned. // criFlat {exontrol.Menu.FlatEnum}, indicates whether the menu's flat bar is shown or hidden. // pad {(number|string|array)}, defines the item's padding (space between the menu border and the item content) // itemsPad {(number|string|array)}, defines the padding the sub-items section of the item (space between the menu border and the items content) // align {number}, horizontally aligns the item's caption. // arrSize {number}, specifies the size (width and height) to show the item's arrow. // arrangeItemsAs {exontrol.Menu.ArrangeItemsEnum}, specifies how the items are arranged on the control (top-level menu). // subArrangeItemsAs {exontrol.Menu.ArrangeItemsEnum}, specifies how the items are arranged on the float-menus. // sepSize {number}, specifies the size to show a separator item. // btnPad {(number|string|array)}, defines the button's padding (space between the button border and the item content) // btnArrSize {number}, specifies the size (width and height) to show the button's arrow. // show {exontrol.Menu.ShowCheckedAsSelectedEnum}, defines how an item that has a check-box/radio button is displayed. // scrollSize {number}, specifies the size (width/height) of the control's scroll bar. // scrollClip {boolean}, specifies whether the control's scroll bar is clipped. // scrollOpt {exontrol.ScrollBar.Options}, specifies the options (UI visual appearance, behavior) to display the control's scroll bar. // shapes {string}, defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. // cursors {string}, specifies the mouse cursor to be displayed when pointing over a part of the control. // smoothSel {number}, defines the time in ms the control's selection goes from one state to another. // open {number}, defines the time in ms the top-level item opens its sub-menu once the cursor hovers it. // close {number}, defines the time in ms the sub-menu is closed once the cursor hovers the top-level item. // subOpen {number}, defines the time in ms the second-level item opens its sub-menu once the cursor hovers it (it is applied to any level excepts the top-level). // subClose {number}, defines the time in ms the sub-menu is closed once the cursor hovers the second-level item (it is applied to any level excepts the top-level). // outClose {number}, defines the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu. // popupRatio {number}, defines a positive number that specifies the maximum ratio of the document's view page, a float or a popup menu can be shown. // closeOnClick {exontrol.Menu.CloseOnClickEnum}, defines the type of items the user can click to close the float-menu(s). // alignClient {boolean}, specifies whether the item's client position is aligned to sub-item client position, when a float-menu is displayed. // alignContextMenu {exontrol.Menu.AlignContextMenuEnum}, defines the horizontal and vertical position of the context/shortcut-menu relative to the x, y coordinates // allowToggleRadio {boolean}, allows or prevents toggling the radio state // x {number}, specifies the horizontal position to show the context/shortcut-menu relative to the document. // y {number}, specifies the vertical position to show the context/shortcut-menu relative to the document. // /////////////////////////////////////////////////////////// /** * @description The exontrol.Def.Menu namespace provides definitions for different objects, primitives, objects of exontrol.Menu object */ exontrol.Def.Menu = { /** * @description The tfi field applies font attributes to captions within the control. The tfi field can be defined using a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}. * * The tfi field as string supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters: * * bold, displays the text in bold (equivalent of tag) * italic, displays the text in italics (equivalent of tag) * underline, underlines the text (equivalent of tag) * strikeout, specifies whether the text is strike-through (equivalent of tag) * , specifies the font's family (equivalent of tag) * , specifies the size of the font (equivalent of tag) * , specifies the text's foreground color (equivalent of tag) * , specifies the text's background color (equivalent of tag) * , defines the text's shadow (equivalent of tag) * , shows the text with outlined characters (CSScolor) (equivalent of tag) * , defines a gradient text (equivalent of tag) * * Any other word within the tfi field that's not recognized as a keyword is interpreted as: * * name of the font (not a number), specifies the font's family (equivalent of tag) * size of the font (number), specifies the size of the font (equivalent of tag) * * The tfi field as object supports any of the following fields: * * bold {boolean}, displays the text in bold (equivalent of tag) * italic {boolean}, displays the text in italics (equivalent of tag) * underline {boolean}, underlines the text (equivalent of tag) * strikeout {boolean}, specifies whether the text is strike-through (equivalent of tag) * fontName {string}, specifies the font's family (equivalent of tag) * fontSize {number}, specifies the size of the font (equivalent of tag) * fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of tag) * bgColor {string}, specifies the text's background color (CSScolor) (equivalent of tag) * shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of tag), where: * color {string}, defines the color of the text's shadow (CSScolor) * width {number}, defines the size of the text's shadow * offset {number}, defines the offset to show the text's shadow relative to the text * outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of tag) * graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of tag), where: * color {string}, defines the gradient-color (CSScolor) * mode {number}, defines the gradient mode as a value between 0 and 4 * blend {number}, defines the gradient blend as a value between 0 and 1 * * CSSColor or CSS legal color values can be specified by the following methods: * * Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00. * Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue. * RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color. * RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue. * HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color. * HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue. * Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color. * * @type {(string|object)} * @example * * null {null}, the tfi field is ignored * "bold monospace 16" {string}, defines Monospace font of 16px height, bold * {bold: true, fontName: "monospace", fontSize: 16} {object}, defines Monospace font of 16px height, bold */ tfi: null, /** * @description The locked field indicates whether the control is locked(protected) or unlocked * @type {boolean} Specifies whether the control is protected. * @example * * false {boolean}, unlocks the control (can select any item) * true {boolean}, locks the control (can't select any item) */ locked: false, /** * @description The readOnly field indicates whether the control is read-only * @type {boolean} * @example * * false {boolean}, the user can select or check any item * true {boolean}, the user can not select or check the items */ readOnly: false, /** * @description The debug field indicates whether the control displays debug-information * @type {boolean} Specifies whether the control is in debug-mode. * @example * * false {boolean}, no debug-information is displayed * true {boolean}, debug-information is displayed for each item (usually the item's identifier) */ debug: false, /** * @description The wheelChange field specifies the amount the control scrolls when the user rolls the mouse wheel. * @type {number} Specifies the amount the control scrolls when the user rolls the mouse wheel. * @example * * 0 {number}, locks any action the mouse's wheel performs * 1 {number}, indicates that the scrollOpt.wheelChange property is applied for 1-time when user rotates the mouse wheel. Changes the scrollOpt.wheelChange property to provide a different step to scroll once the user rotates the mouse wheel */ wheelChange: 1, /** * @description The items field defines the items of the menu from a string-representation. * @type {string} Indicates the items the control. * * The format of the items'string representation is (everything between () refers to children, and everything between [] refers to flags): * * "item1[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value]),...,itemn[flag=value]...[flag=value](sub-item1[flag=value]...[flag=value],...,sub-itemn[flag=value]...[flag=value])" * * The string-representation supports the following flags: * * [id], specifies the item's identifier, such as [id=10]. * [align] {number}, horizontally aligns the caption. The align could be -1(full-fits the item), 0(left-alignment), 1(center), or 2( right-alignment) such as [align=2] right-aligns the item. * [pad], specifies the item's padding (space between the menu border and the item content). The pad could be one or two numbers, separated by comma, such as [pad=2] or [pad=2,2] * [itemsPad], specifies the items padding (space between the menu border and the item content). The itemsPad could be one or two numbers, separated by comma, such as [itemsPad=2] or [itemsPad=2,2] * [chk], indicates that the item has a check-box associated. If the [typ] flag is present, the [chk] flag indicates the state of the item, and the [rad] flag is ignored. The chk could be 0 or 1, such as [chk] or [chk=0] for a un-checked item, or [chk=1] for checked item. * [rad], indicates that the item has a radio-button associated. If the [typ] flag is present, the [chk] flag indicates the state of the item, and the [rad] flag is ignored. The rad could be 0 or 1, such as [rad] or [rad=0] for a un-checked item, or [rad=1] for checked item. * [typ], specifies the type of the item, that can be normal, check or radio. The typ could be 0(normal item), 1(items that display a check/box (chk)) or 2(items that display radio buttons (rad)). If the [typ] flag is present, the [chk] flag indicates the state of the item, and the [rad] flag is ignored. For instance [typ=1], specifies a check-box item * [grp], defines the radio group. It should be used when you define more groups of radio buttons. A group of radio buttons means that only one item could be checked at one time. The rad option specifies that the item displays a radio button. Use the grp option to define the group of radio where this button should be associated, If no group of radio buttons is required, the grp could be ignored. For instance, [grp=sample] * [img], indicates that the item's image. The img indicates the name of an exontrol.HP, such as [img=logo] * [group], specifies how the sub-items are being grouped. The group could be a flag combination of exontrol.Menu.GroupPopupEnum type, such as [group] to group horizontlly the item, or [group=0x100] to group vertically the items * [arrow], indicates whether the item's popup-arrow is shown or hidden. The arrow could be 0 to hide the arrow, or not-zero to show the arrow, such as [arrow] or [arrow=0] to hide the arrow, or [arrow=1] to show the arrow * [hid], hides/shows the item. The hid could be 0 which indicates that the item is hidden. Any other value makes the item visible, such as [hid] or [hid=0] to hide the item, or [hid=1] to show the item * [captionWidth] or [cw], specifies the width to show the HTML caption of the item, where value could be a integer expression. A negative value indicates that no limitation is applied to the item's caption, so no truncate caption is shown. For instance [cw=128] * [captionHeight] or [ch], specifies the height to show the HTML caption of the item, where value could be a integer expression. A negative value indicates that no limitation is applied to the item's caption, so no truncate caption is shown. For instance [ch=128] * [height], specifies the height to display the item, where value could be a integer expression (it applies to all parts of the item). For instance [height=64] * [width], specifies the width to display the item, where value could be a integer expression (it applies to all parts of the item). For instance [width=64] * [button], associates a button with the item. The value could be a flag combination of exontrol.Menu.ShowAsButtonEnum type, such as [button] or [button=1] makes the item to displat a button, or [button=0] disables displaying any button. * [spchk], indicates whether the sub-items/popup of giving item are shown when the item is checked. The value could be 0, which indicates that it has no effect, or non-zero to show the sub-item when the item is checked. For instance [spchk] * [show], specifies how an item that has a check-box/radio-button should be displayed. The value could be any value of exontrol.Menu.ShowCheckedAsSelectedEnum type. For instance [show=-1] (the exDisplayItemCheckHighlight value highlights the checked item) * [showdis], makes the item to show as disabled, while it is still enabled. The flag is applied to all descendents. Any value not-zero indicates that the item is shown as disabled. For instance [showdis] * [tab], indicates the identifier of the item that displays the sub-items of the current item. For instance: [tab=page] or [tab=1] * [dis], disables the item. The flag is applied to all descendents. Any value not-zero indicates that the item is enabled. For instance [dis] * [sep], specifies an separator item, such as [sep]. The value is ignored if provided. For instance [sep] * [popupalign] or [pa], indicates how the sub-menu/popup/float is aligned relative to the parent item (exontrol.Menu.ShowPopupAlignEnum). For instance [pa=1] (The exShowPopupAlignDown value indicates that the sub-menu/popup is shown down-aligned relative to the parent item) * [shapes], specifies the shapes to be applied on the item only. For instance [shapes=dfitem(item),dfcap(cap)] * [cursors], defines the mouse cursor to be displayed when pointing over a part of the item only. For instance [cursors=pointer(item)] * [close], specifies whether clicking the item closes the float-menu (exontrol.Menu.CloseOnClickEnum). For instance [close=-1], closes the context-menu once the user clicks the items (no matter, if it is of check, radio or button type) * * @example * * "" {string}, clears the items collection * "Popup(A,B,C)" {string}, adds a popup-item with three sub-items A, B and C * "Popup[group](A,B,C)" {string}, adds an item with three sub-items A, B and C, and all items are visible and displayed as an horizontally group * "Popup[group][chk][spchk](A,B,C)" {string}, adds an item with three sub-items A, B and C, but A, B and C sub-items are visible and displayed only if the popup is checked */ items: null, /** * @description The criSize field specifies the size (width and height) to show a check-box/radio-button or the item's image * @type {number} A value that specifies the size (width and height) to show a check-box/radio-button or the item's image * @example * * 16 {number}, indicates that any check-box, radio or image uses a 16x16 rectangle to display it within the item */ criSize: 16, /** * @description The criPad field indicates the padding to apply to a check-box/radio-button or the item's image. * @type {(number|string|array)} A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size * @example * * 4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height * "8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels * [8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels */ criPad: [0,0], /** * @description The criAlign field specifies whether the check-box/radio-button or the item's image are vertically aligned. * @type {boolean} specifies whether the check-box/radio-button or the item's image are vertically aligned * * The criAlign property has effect, if the control's criFlat is exNormal. * * @example * * false {boolean}, check-box/radio-button or the item's image is not vertically aligned * true {boolean}, check-box/radio-button or the item's image is vertically aligned */ criAlign: false, /** * @description The criFlat field indicates whether the menu's flat bar is shown or hidden * @type {exontrol.Menu.FlatEnum} specifies whether the menu's flat bar is visible or hidden. * * The exontrol.Menu.FlatEnum type supports the following values: * * exNormal (0), indicates that the menu's flat bar is not shown * exShowFlat (1), indicates that the menu's flat bar is visible only if the menu contains items with check, radio or image * exAlwaysFlat (2), indicates that the menu's flat bar is always visible * * @example * * 2 or exontrol.Menu.FlatEnum.exAlwaysFlat {number}, defines a flat-menu */ criFlat: exontrol.Menu.FlatEnum.exNormal, /** * @description The pad field defines the item's padding (space between the menu border and the item content) * @type {(number|string|array)} A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size * @example * * 4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height * "8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels * [8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels */ pad: [4,4], /** * @description The itemsPad field defines the padding the sub-items section of the item (space between the menu border and the items content) * @type {(number|string|array)} A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size * @example * * 4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height * "8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels * [8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels */ itemsPad: [0,0], /** * @description The align field horizontally aligns the item's caption. * @type {number} Indicates a numeric value that specifies the alignment of the item's caption. * * The align property can be any of the following values: * * -1 {number}, specifies that the item's caption full-fits the item's background. You can use the or ex-HTML tags to align portions of caption inside the item * 0 {number}, indicates that the caption is left-aligned * +1 {number}, specifies that the caption is centered * +2 {number}, specifies that the caption is right-aligned * * @example * * 2 {number}, right aligns the item's caption */ align: -1, /** * @description The arrSize field specifies the size (width and height) to show the item's arrow. * @type {number} A value that specifies the size (width and height) to show the item's arrow. * * The item's arrow is displayed only for popup-items, or items that contains sub-items or child-items. * * @example * * 0 {number}, indicates that no arrow is shown * 6 {number}, indicates that the arrow is displayed into a square of 6x6 pixels */ arrSize: 6, /** * @description The arrangeItemsAs field specifies how the items are arranged on the control (top-level menu). * @type {exontrol.Menu.ArrangeItemsEnum} A combination of one or more ArrangeItemsEnum flags that specifies how the items are arranged on the control (top-level menu). * * The exontrol.Menu.ArrangeItemsEnum type supports the following flags: * * exArrangeItemsHorizontal (1), specifies that the items are horizontally arranged from left to right * exArrangeItemsVertical (2), specifies that the items are vertically arranged from top to bottom * exArrangeItemsHideTopArrow (0x10), indicates that the arrow for any top-item is not visible (not valid for float-menu) * exArrangeItemsPopupAlign (0x20), specifies that the item's float/popup-menu should be displayed to prevent overlapping other items * exArrangeItemsWrap (0x100), wraps items on a new row/column (not valid for float-menu) * exArrangeItemsScroll (0x200), specifies that the control's scroll bar is displayed if required * exArrangeItemsAlignCenter (0x400), centers the items on each row/column * exArrangeItemsAlignReverse (0x800), reverses the alignment of the items * * @example * * 561 or exontrol.Menu.ArrangeItemsEnum.exArrangeItemsHideTopArrow | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsHorizontal | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign {number}, arranges horizontally all items of top-level menu */ arrangeItemsAs: exontrol.Menu.ArrangeItemsEnum.exArrangeItemsVertical | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign, /** * @description The subArrangeItemsAs field specifies how the items are arranged on the float-menu. * @type {exontrol.Menu.ArrangeItemsEnum} A ArrangeItemsEnum expression that specifies how the items are arranged arranged on the float-menu. * * The exontrol.Menu.ArrangeItemsEnum type supports the following flags: * * exArrangeItemsHorizontal (1), specifies that the items are horizontally arranged from left to right * exArrangeItemsVertical (2), specifies that the items are vertically arranged from top to bottom * exArrangeItemsHideTopArrow (0x10), indicates that the arrow for any top-item is not visible (not valid for float-menu) * exArrangeItemsPopupAlign (0x20), specifies that the item's float/popup-menu should be displayed to prevent overlapping other items * exArrangeItemsWrap (0x100), wraps items on a new row/column (not valid for float-menu) * exArrangeItemsScroll (0x200), specifies that the control's scroll bar is displayed if required * exArrangeItemsAlignCenter (0x400), centers the items on each row/column * exArrangeItemsAlignReverse (0x800), reverses the alignment of the items * * @example * * 257 or exontrol.Menu.ArrangeItemsEnum.exArrangeItemsHorizontal | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsWrap {number}, wraps items within the float-menu * 546 or exontrol.Menu.ArrangeItemsEnum.exArrangeItemsVertical | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign {number}, arranges vertically the items within the float-menu */ subArrangeItemsAs: exontrol.Menu.ArrangeItemsEnum.exArrangeItemsVertical | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsScroll | exontrol.Menu.ArrangeItemsEnum.exArrangeItemsPopupAlign, /** * @description The sepSize field specifies the size to show a separator item. * @type {number} A value that specifies the size to display a separator item. * @example * * 0 {number}, hides all separator items ([sep]) * 4 {number}, specifies the separator items of 4-pixels size */ sepSize: 1, /** * @description The btnPad field defines the button's padding (space between the button border and the item content) * @type {(number|string|array)} A value that could be a numeric value, to pad horizontal and vertical size with the same value, or a "x,y" or [x,y] type to specify the padding on h/v size * @example * * 4 {number}, increases the object's client with 2 * 4-pixels, which includes width and height * "8,4" {string}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels * [8,4] {array}, increases the object's width with 2 * 8-pixels and object's height with 2 * 4-pixels */ btnPad: [2,2], /** * @description The btnArrSize field specifies the size (width and height) to show the button's arrow. * @type {number} A value that specifies the size (width and height) to show the button's arrow. * * The item's arrow is displayed only items that contains sub-items or child-items, while it is of [button] type * * @example * * 0 {number}, indicates that no arrow is shown for an item of button type ([button]) * 6 {number}, indicates that the arrow is displayed into a square of 6x6 pixels */ btnArrSize: 6, /** * @description The show field defines how an item that has a check-box/radio button is displayed. * @type {exontrol.Menu.ShowCheckedAsSelectedEnum} Specifies a value of exontrol.Menu.ShowCheckedAsSelectedEnum, that defines how an item that has a check-box/radio button is displayed. * * The exontrol.Menu.ShowCheckedAsSelectedEnum type defines the following values: * * exDisplayItemCheckDefault (0), indicates that no highlight is applied to the item's check/radio * exDisplayItemCheckHighlight (-1), highlights the checked item * exDisplayItemHighlight (1), highlights the checked item, but hides the item's check/radio button * * @example * * 1 (exontrol.Menu.ShowCheckedAsSelectedEnum.exDisplayItemHighlight) {number}, specifies that any checked-item gets highlighted, by not showing the item's check/radio button */ show: exontrol.Menu.ShowCheckedAsSelectedEnum.exDisplayItemCheckDefault, /** * @description The scrollSize field specifies the size (width/height) of the control's scroll bar * @type {number} Indicates the size of the control's scroll bar * @example * * 0 {number}, hides the menu's scroll-bar but scrolling it is still posible by drag. Click an item and drag outside the margins so the menu gets scrolled * 6 {number}, defines a 6-pixels wide scroll bar */ scrollSize: 8, /** * @description The scrollClip field specifies whether the control's scroll bar is clipped * @type {boolean} Specifies whether the control's scroll bar is clipped * @example * * false {boolean}, the scroll is not clipped, so it is shown over the menu * true {boolean}, the scroll and items portions of the menu are separatly */ scrollClip: false, /** * @description The scrollOpt field specifies the options (UI visual appearance, behavior) to display the control's scroll bar. * @type {exontrol.ScrollBar.Options} Specifies the options (UI visual appearance, behavior) to display the control's scroll bar. */ scrollOpt: { /** * @description The visibleParts fields defines the visible parts of the scroll bar, separated by comma. * @type {string} Indicates the parts of the scroll bar that are visible. * * The parts of the control are: * * "l" (exLeftBPart, <) indicates the left or top button of the scroll bar * "l1" (exLeftB1Part) indicates the first additional button, in the left or top area * "l2" (exLeftB2Part) indicates the second additional button, in the left or top area * "l3" (exLeftB3Part) indicates the third additional button, in the left or top area * "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area * "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area * "t" (thumb), indicates the scroll's thumb * "r" (exRightBPart, >) indicates the right or down button * "r1" (exRightB1Part) indicates the first additional button in the right or down side * "r2" (exRightB2Part) indicates the second additional button in the right or down side * "r3" (exRightB3Part) indicates the third additional button in the right or down side * "r4" (exRightB4Part) indicates the forth additional button in the right or down side * "r5" (exRightB5Part) indicates the fifth additional button in the right or down side * "r6" (exRightB6Part) indicates sixth additional button in the right or down side * * There are three additional parts (automatically computed) as: * * "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb) * "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button) * "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts) * * Any other literal between commas is ignored. If duplicate literals are found, the second is ignored, and so on. * * @example * * null {null}, specifies that the exontrol.Def.ScrollBar.visibleParts field defines the visibleParts property. By default, the exontrol.Def.ScrollBar.visibleParts is "l,t,r,b", which indicates that only "left-button", "thumb", "right-button" and "background" parts are visible * "t,b" {string}, indicates that only "thumb", "background" parts are visible */ visibleParts: "t,b", /** * @description The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. * @type {string} Specifies the mouse cursor to be displayed when pointing over a part of the control. * * The format of cursors property is: * * "cursor(part),cursor(part),..." * * where: * * "cursor", defines the CSS mouse cursor to display while cursor hovers the part * "part", defines the name of the part the cursor is applied on (as defined bellow) * * The cursors property supports any of the following parts: * * "l" (exLeftBPart, <) indicates the left or top button of the scroll bar * "l1" (exLeftB1Part) indicates the first additional button, in the left or top area * "l2" (exLeftB2Part) indicates the second additional button, in the left or top area * "l3" (exLeftB3Part) indicates the third additional button, in the left or top area * "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area * "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area * "t" (thumb), indicates the scroll's thumb * "r" (exRightBPart, >) indicates the right or down button * "r1" (exRightB1Part) indicates the first additional button in the right or down side * "r2" (exRightB2Part) indicates the second additional button in the right or down side * "r3" (exRightB3Part) indicates the third additional button in the right or down side * "r4" (exRightB4Part) indicates the forth additional button in the right or down side * "r5" (exRightB5Part) indicates the fifth additional button in the right or down side * "r6" (exRightB6Part) indicates sixth additional button in the right or down side * "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb) * "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button) * "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts) * * @example * * null {null}, indicates that the exontrol.Def.ScrollBar.cursors field defines the cursors property. By default, the exontrol.Def.ScrollBar.cursors is "auto(l1,l2,l3,l4,l5,l,lo,t,up,r,r1,r2,r3,r4,r5,r6)", or the "auto" mouse cursor is displayed for any part of the control * "crosshair(lo,up,b),pointer(t)" {string}, indicates that the "crosshair" mouse cursor is shown once the cursor hovers the control "upper", "lower" or "background" part, and "pointer" mouse cursor while cursor hovers the "thumb" part */ cursors: "pointer(t,lo,b,up)", /** * @description The horizonalShapes field defines the shapes each part of the control applies, when the scroll-bar's mode is exHorizontal. * @type {string} Defines the shapes to be applied to parts of the scroll bar, when the scroll-bar's mode is exHorizontal. * * The format of horizonalShapes property is: * * "shape(part),shape(part),..." * * where: * * "shape", defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part * "part", defines the name of the part the shape is applied on (as defined bellow) * * The horizonalShapes property supports any of the following parts: * * "l" (exLeftBPart, <) indicates the left or top button of the scroll bar * "l1" (exLeftB1Part) indicates the first additional button, in the left or top area * "l2" (exLeftB2Part) indicates the second additional button, in the left or top area * "l3" (exLeftB3Part) indicates the third additional button, in the left or top area * "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area * "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area * "t" (thumb), indicates the scroll's thumb * "r" (exRightBPart, >) indicates the right or down button * "r1" (exRightB1Part) indicates the first additional button in the right or down side * "r2" (exRightB2Part) indicates the second additional button in the right or down side * "r3" (exRightB3Part) indicates the third additional button in the right or down side * "r4" (exRightB4Part) indicates the forth additional button in the right or down side * "r5" (exRightB5Part) indicates the fifth additional button in the right or down side * "r6" (exRightB6Part) indicates sixth additional button in the right or down side * "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb) * "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button) * "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts) * * @example * * null {null}, specifies that the exontrol.Def.ScrollBar.horizonalShapes field defines the horizonalShapes property. By default, the exontrol.Def.ScrollBar.horizonalShapes is "hThumbLite(t)". * "hThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.hThumbLite and exontrol.Shapes.ScrollBar.foreground.hThumbLite on "thumb" part * "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll * "buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),hThumbCircle(t),hBackCircle(b)" {string}, defines a circular-scroll * "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes. */ horizonalShapes: "tRange(t),range(b)", /** * @description The verticalShapes field defines the shapes each part of the control applies, when the scroll-bar's mode is exVertical. * @type {string} Defines the shapes to be applied to parts of the scroll bar, when the scroll-bar's mode is exVertical. * * The format of verticalShapes property is: * * "shape(part),shape(part),..." * * where: * * "shape", defines the name of the property of exontrol.Shapes.ScrollBar.background/exontrol.Shapes.ScrollBar.foreground object to be applied on the part * "part", defines the name of the part the shape is applied on (as defined bellow) * * The verticalShapes property supports any of the following parts: * * "l" (exLeftBPart, <) indicates the left or top button of the scroll bar * "l1" (exLeftB1Part) indicates the first additional button, in the left or top area * "l2" (exLeftB2Part) indicates the second additional button, in the left or top area * "l3" (exLeftB3Part) indicates the third additional button, in the left or top area * "l4" (exLeftB4Part) indicates the forth additional button, in the left or top area * "l5" (exLeftB5Part) indicates the fifth additional button, in the left or top area * "t" (thumb), indicates the scroll's thumb * "r" (exRightBPart, >) indicates the right or down button * "r1" (exRightB1Part) indicates the first additional button in the right or down side * "r2" (exRightB2Part) indicates the second additional button in the right or down side * "r3" (exRightB3Part) indicates the third additional button in the right or down side * "r4" (exRightB4Part) indicates the forth additional button in the right or down side * "r5" (exRightB5Part) indicates the fifth additional button in the right or down side * "r6" (exRightB6Part) indicates sixth additional button in the right or down side * "lo" (exLowerBackPart), specifies the control's lower-background part (area between the left/top button and the thumb) * "up" (exUpperBackPart), specifies the control's upper-background part (area between the thumb and the right/bottom button) * "b" (exBackgroundPart), specifies the control's background part (union between the exLowerBackPart("lo") and the exUpperBackPart("up") parts) * * @example * * null {null}, specifies that the exontrol.Def.ScrollBar.verticalShapes field defines the verticalShapes property. By default, the exontrol.Def.ScrollBar.verticalShapes is "vThumbLite(t)". * "vThumbLite(t)" {string}, defines a lite-scroll, or shotly it applies the exontrol.Shapes.ScrollBar.background.vThumbLite and exontrol.Shapes.ScrollBar.foreground.vThumbLite on "thumb" part * "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumb(t),back(lo,b,up)" {string}, defines a rectangular-scroll * "buttonCircle(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6),vThumbCircle(t),vBackCircle(b)" {string}, defines a circular-scroll * "button(l1,l2,l3,l4,l5,l,r,r1,r2,r3,r4,r5,r6)" {string} indicates that all l1-r6 applies the exontrol.Shapes.ScrollBar.background.button and exontrol.Shapes.ScrollBar.foreground.button shapes. */ verticalShapes: "tRange(t),range(b)", /** * @description The wheelChange field specifies the amount by which the scroll box position changes when the user rotates the mouse wheel. * @type {number} Specifies the amount by which the scroll box position changes when the user rotates the mouse wheel. * @example * * null {null}, specifes that the exontrol.Def.ScrollBar.wheelChange field defines the smallChange property. By default, the exontrol.Def.ScrollBar.wheelChange is 1. * 0 {number}, no change while the user rotates the mouse wheel. * 1 {number}, increases or decreases the scroll's value by 1 when the user rotates the mouse wheel */ wheelChange: 16, }, /** * @description The smoothSel field defines the time in ms the control's selection goes from one state to another. * @type {number} Indicates the time in ms the control's selection goes from one state to another. * @example * * 0 {number}, no smooth changes once the user selects a new item * 125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms. */ smoothSel: 125, /** * @description The shapes field defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance. * @type {string} A string expression that defines the shapes each part of the control can display. * * The format of shapes property is: * * "shape(part),shape(part),..." * * where: * * "shape", defines the shape to apply on the UI part as one of the following: * * any of 140 color names any browser supports (such as red, blue, green, ...) * hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background) * hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background) * RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background) * RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background) * HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background) * HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background) * a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}') * specifies the name of the field within the exontrol.Shapes.Menu object (while it starts with a lowercase letter, such as dfitem which refers to exontrol.Shapes.Menu.dfitem shape) * specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape) * * "part", defines the name of the part the shape is applied on (as defined bellow) * * The shapes property supports any of the following parts: * * "menu" (menu), defines the visual appearance for the entire menu * "flat" (flat), defines the visual appearance for menu's flat bar (usually shown in the left side of the menu) * "sep" (separator), defines the visual appearance to display separator-items * "item" (item), defines the visual appearance for the item's background. It covers all parts of the item as check, image, caption/button, popup arrow and sub-items * "sub" (sub-items), defines the visual appearance to display sub-items of the item (while the item is grouped) * "arr" (arrow), defines the visual appearance to display item's arrow (while the item contains un-grouped sub-items) * "cap" (caption), defines the visual appearance for the item's caption * "img" (image), defines the visual appearance to display the item's image * "chk" (check), defines the visual appearance to display the item's check-box * "rad" (radio), defines the visual appearance to display the item's radio-button * "btn" (button), defines the visual appearance to display the buttons * "rarr" (right-arrow), defines the visual appearance to display button's arrow (to right) * "barr" (bottom-arrow), defines the visual appearance to display button's arrow (to bottom) * * @example * * null {null}, specifies the default visual appearance * "" {string}, no shape (no visual appearance is applied to any part of the control) * "red(item)", "#FF0000(item)", "rgb(255,0,0)(item)", "rgba(255,0,0,1)(item)" {string}, shows all-items in red * '{"hover":{"frameColor":"black","pad":-0.5}}(item)' {string}, draws a black-frame arround the item being hovered * "xxx(d),yyy(d,m),zzz(y)" {string}, specifies that the exontrol.Shapes.Menu.xxx combined with exontrol.Shapes.Menu.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.Menu.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.Menu.zzz object defines the visual appearance of "y" part of the control */ shapes: "shitem(item),shcap(cap),shsub(sub),shradio(rad),shcheck(chk),shflat(flat),shsep(sep),shbutton(btn),sharrow(arr,rarr,barr),shbarrow(barr)", /** * @description The cursors field specifies the mouse cursor to be displayed when pointing over a part of the control. * @type {string} Specifies the mouse cursor to be displayed when pointing over a part of the control. * * The format of cursors property is: * * "cursor(part),cursor(part),..." * * where: * * "cursor", defines the CSS mouse cursor to display while cursor hovers the part * "part", defines the name of the part the cursor is applied on (as defined below) * * The cursors property supports any of the following parts: * * "menu" (menu), defines the mouse-cursor to show when the mouse pointer hovers the entire menu * "flat" (flat), defines the mouse-cursor to show when the mouse pointer hovers menu's flat bar (usually shown in the left side of the menu) * "sep" (separator), defines the mouse-cursor to show when the mouse pointer hovers the separator-items * "item" (item), defines the mouse-cursor to show when the mouse pointer hovers the item's background. It covers all parts of the item as check, image, caption/button, popup arrow and sub-items * "sub" (sub-items), defines the mouse-cursor to show when the mouse pointer hovers the sub-items of the item (while the item is grouped) * "arr" (arrow), defines the mouse-cursor to show when the mouse pointer hovers the item's arrow (while the item contains un-grouped sub-items) * "cap" (caption), defines the mouse-cursor to show when the mouse pointer hovers the item's caption * "img" (image), defines the mouse-cursor to show when the mouse pointer hovers the item's image * "chk" (check), defines the mouse-cursor to show when the mouse pointer hovers the item's check-box * "rad" (radio), defines the mouse-cursor to show when the mouse pointer hovers the item's radio-button * "btn" (button), defines the mouse-cursor to show when the mouse pointer hovers the buttons * "rarr" (right-arrow), defines the mouse-cursor to show when the mouse pointer hovers the button's arrow (to right) * "barr" (bottom-arrow), defines the mouse-cursor to show when the mouse pointer hovers the button's arrow (to bottom) * "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the ex-HTML part marks an anchor or hyperlink element) (@since 2.2) * * @example * * "" {string}, no mouse cursor support * "pointer(chk,rad,btn)" {string}, indicates that the "pointer" mouse cursor is shown once the cursor hovers the "chk", "rad" or "btn" parts of the control */ cursors: "pointer(chk,rad,btn,anchor)", /** * @description The open field defines the time in ms the top-level item opens its sub-menu once the cursor hovers it. * @type {number} Indicates the time in ms the top-level item opens its sub-menu once the cursor hovers it. * * The value of open property can be any of the following: * * if positive, indicates the time in ms the top-level item opens its sub-menu once the cursor hovers it. * if 0, indicates that the top-level item opens its sub-menu as soon as cursor hovers it * if negative, indicates that the item requires click to to open its sub-menu * * @example * * 0 {number}, indicates that the top-level item opens its sub-menu as soon as cursor hovers it. * -1 {number}, indicates that the top-level item opens its sub-menu as soon as user clicks it. */ open: -1, /** * @description The close field defines the time in ms the sub-menu is closed once the cursor hovers the top-level item. * @type {number} Indicates the time in ms the sub-menu is closed once the cursor hovers the top-level item. * * The value of close property can be any of the following: * * if positive, indicates the time in ms the sub-menu is closed once the cursor hovers the top-level item. * if 0, indicates that the sub-menu is closed as soon as the cursor hovers a top-level item * if negative, it has no effect * * @example * * 0 {number}, indicates that the sub-menu is closed as soon as the cursor hovers a top-level item. * 350 {number}, the sub-menu is closed once 350 ms ellapsed after the cursor hovers a top-level item. */ close: 0, /** * @description The subOpen field defines the time in ms the second-level item opens its sub-menu once the cursor hovers it (it is applied to any level excepts the top-level). * @type {number} Indicates the time in ms the second-level item opens its sub-menu once the cursor hovers it. * * The value of subOpen property can be any of the following: * * if positive, indicates the time in ms the item opens its sub-menu once the cursor hovers it. * if 0, indicates that the item opens its sub-menu as soon as the cursor hovers it * if negative, it has no effect so the item requires click in order to open its sub-menu * * @example * * 0 {number}, indicates that the item opens its sub-menu as soon as the cursor hovers it * -1 {number}, indicates that the item's sub-menu is opened once the user clicks it */ subOpen: 350, /** * @description The subClose field defines the time in ms the sub-menu is closed once the cursor hovers the second-level item (it is applied to any level excepts the top-level). * @type {number} Indicates the time in ms the sub-menu is closed once the cursor hovers the second-level item. * * The value of subClose property can be any of the following: * * if positive, indicates the time in ms the sub-menu is closed once the cursor hovers the second-level item * if 0, indicates that the sub-menu is closed as soon as the cursor hovers a second-level item * if negative, it has no effect * * @example * * 0 {number}, indicates that the sub-menu is closed as soon as the cursor hovers a second-level item * 350 {number}, the sub-menu is closed once 350 ms ellapsed after the cursor hovers the second-level item */ subClose: 500, /** * @description The outClose field defines the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu. * @type {number} Indicates the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu. * * The value of outClose property can be any of the following: * * if positive, specifies the time in ms the control closes all its float-menu as soon as the cursor hovers outside portion of the menu * if 0, indicates that the menu's floats are closed as soon as the cursor hovers outside portion of it * if negative, it has no effect * * @example * * 0 {number}, indicates that the menu's floats are closed as soon as the cursor hovers outside portion of it * 350 {number}, the control's float-menus are closed once 350 ms ellapsed after the cursor hovers outside portion of the menu */ outClose: 500, /** * @description The popupRatio field defines a positive number that specifies the maximum ratio of the document's view page, a float or a popup menu can be shown. * @type {number} Indicates a positive number that specifies the maximum ratio of the document's view page, a float or a popup menu can be shown. * * For instance, 1/2 indicates that the width / height of the float-menu can not exceed half of the width / height of the document's view page. * * @example * * 0 {number}, indicates that the size of the float-menu is not influenced by the document's view size, so it will be displayed entirely as it is * 0.5 {number}, indicates that the width / height of the float-menu can not exceed half of the width / height of the document's view page (control's scroll is automatically added if exArrangeItemsScroll flag is specified) */ popupRatio: 1/2, /** * @description The closeOnClick field defines the type of items the user can click to close the float-menu(s). * @type {exontrol.Menu.CloseOnClickEnum} Indicates a combination of one or more exontrol.Menu.CloseOnClickEnum flags that specifies the type of items the user can click to close the float-menu(s). * * The exontrol.Menu.CloseOnClickEnum type defines the following flags: * * exCloseOnDefault (0), indicates that the float-menu is closed once the user clicks an enabled item with no check, radio or button associated * exCloseOnDisabled (1), specifies that the float-menu is closed once the user clicks a disabled item * exCloseOnSeparator (2), specifies that the float-menu is closed once the user clicks a separator item * exCloseOnButton (4), specifies that the float-menu is closed once the user clicks an item of button-type * exCloseOnCheck (8), specifies that the float-menu is closed once the user clicks an item of check-type * exCloseOnRadio (16), specifies that the float-menu is closed once the user clicks an item of radio-type * exCloseOnState (24), specifies that the float-menu is closed once the user clicks an item of check or radio-type * exCloseOnAny (-1), specifies that the float-menu is closed once the user clicks any type of item anywhere * * @example * * 0 or exontrol.Menu.CloseOnClickEnum.exCloseOnDefault {number}, specifies that the float-menu is closed once the user clicks an enabled item with no check, radio or button associated * -1 or exontrol.Menu.CloseOnClickEnum.exCloseOnAny {number}, specifies that the float-menu is closed once the user clicks any type of item anywhere */ closeOnClick: exontrol.Menu.CloseOnClickEnum.exCloseOnDefault, /** * @description The alignClient field specifies whether the item's client position is aligned to sub-item client position, when a float-menu is displayed. * @type {boolean} Indicates whether the item's client position is aligned to sub-item client position, when a float-menu is displayed. * @example * * false {boolean}, specifies that the item and its sub-items are not vertically aligned (when a popup is opened) * true {boolean}, specifies that the item and its sub-items are vertically aligned (when a popup is opened) */ alignClient: false, /** * @description The alignContextMenu field defines the horizontal and vertical position of the context/shortcut-menu relative to the x, y coordinates. * @type {exontrol.Menu.AlignContextMenuEnum} Indicates the horizontal and vertical position of the context/shortcut-menu relative to the x, y coordinates. * * The exontrol.Menu.AlignContextMenuEnum type defines the following flags: * * exLeftAlign (0x00), positions the shortcut menu so that its left side is aligned with the coordinate specified by the x parameter * exCenterAlign (0x04), centers the shortcut menu horizontally relative to the coordinate specified by the x parameter * exRightAlign (0x08), positions the shortcut menu so that its right side is aligned with the coordinate specified by the x parameter * exTopAlign (0x00), positions the shortcut menu so that its top side is aligned with the coordinate specified by the y parameter * exVCenterAlign (0x10), centers the shortcut menu vertically relative to the coordinate specified by the y parameter * exBottomAlign (0x20), positions the shortcut menu so that its bottom side is aligned with the coordinate specified by the y parameter * * The alignContextMenu property has effect only, if the control is opened as a context-menu, using the Open() method. * * @example * * 0 or exontrol.Menu.AlignContextMenuEnum.exLeftAlign | exontrol.Menu.AlignContextMenuEnum.exTopAlign {number}, the context-menu is shown aligned to x and y properties * 20 or exontrol.Menu.AlignContextMenuEnum.exCenterAlign | exontrol.Menu.AlignContextMenuEnum.exVCenterAlign {number}, centers the context-menu relative to x and y properties * 32 or exontrol.Menu.AlignContextMenuEnum.exLeftAlign | exontrol.Menu.AlignContextMenuEnum.exBottomAlign {number}, opens the context-menu right to the x and y properties */ alignContextMenu: exontrol.Menu.AlignContextMenuEnum.exLeftAlign | exontrol.Menu.AlignContextMenuEnum.exTopAlign, /** * @description The allowToggleRadio field allows or prevents toggling the radio state * @type {boolean} Specifies whether an item of radio-type toggles its state once it is clicked. * * @example * * false {boolean}, no radio-item toggles its state (once the user clicks a checked radio-item, it stays checked (state on 1)) * true {number}, any radio-item toggles its state (once the user clicks a checked radio-item, it gets unchecked (state on 0)) */ allowToggleRadio: false, /** * @description The x field defines the horizontal position to display the context/shortcut-menu relative to the document. * @type {number} Indicates the horizontal position to display the context/shortcut-menu relative to the document. * * The x property has effect only, if the control is opened as a context-menu, using the Open() method. * * @example * * event.pageX {number}, The pageX read-only property of the MouseEvent(event) interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document. */ x: null, /** * @description The y field defines the vertical position to display the context/shortcut-menu relative to the document. * @type {number} Indicates the vertical position to display the context/shortcut-menu relative to the document. * * The y property has effect only, if the control is opened as a context-menu, using the Open() method. * * @example * * event.pageY {number}, The pageY read-only property of the MouseEvent(event) interface returns the Y (vertical) coordinate in pixels of the event relative to the whole document. */ y: null } /////////////////////////////////////////////////////////// (exontrol.Shapes.Menu) // // The exontrol.Shapes.Menu namespace provides support to customize the visual appearance of different parts of the exontrol.Menu object. // /////////////////////////////////////////////////////////// /** * @description The exontrol.Shapes.Menu namespace provides support to customize the visual appearance of different parts of the exontrol.Menu object. */ exontrol.Shapes.Menu = exontrol.DfO( exontrol.Shapes.Menu /*inherits the default exontrol.Shapes.Menu like dfitem, ... */, { shitem: { /** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { //frameColor: "rgba(0,0,0,0.05)", }, /** * @description The disabled field holds an object of exontrol.Def.Shape type that's applied on the part (while it is disabled). * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part (while it is disabled). */ disabled: { opacity: 0.5, }, /** * @description The checked field holds an object of exontrol.Def.Shape type that's applied on the part (while it is checked and the item's show is not-zero). * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part (while it is checked and the item's show is not-zero). */ checked: { frameColor: "rgba(64,128,255,0.50)", fillColor: "rgba(64,128,255,0.25)", pad: -1 }, /** * @description The hover field holds an object of exontrol.Def.Shape type that's applied on the part, while the cursor hovers it. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part, while the cursor hovers it. */ hover: { frameColor: "rgba(64,128,255,0.50)", fillColor: "rgba(64,128,255,0.10)", pad: -1, primitive: "BevelRect", pArg: { x: 2, y: 2 } }, /** * @description The click field holds an object of exontrol.Def.Shape type that's applied on the part, while it is clicked * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part, while it is clicked */ click: { frameColor: "rgba(64,128,255,0.50)", fillColor: "rgba(64,128,255,0.25)", pad: -1 }, /** * @description The open field holds an object of exontrol.Def.Shape type that's applied on the part, while the item's float-menu is opened. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part, while the item's float-menu is opened. */ open: { frameColor: "rgba(64,128,255,0.50)", fillColor: "rgba(64,128,255,0.25)", pad: -1 } }, shcap: { /** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { formatText: exontrol.DrawTextFormatEnum.exTextWordEllipsis } }, shsub: { /** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { pad: -1, frameColor: "rgba(0,0,0,0.25)", primitive: "RoundRect" } }, shsep: { /** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { fillColor: "rgba(0,0,0,0.20)", } }, shbutton: { /** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { pad: -1, fillColor: "rgb(192,192,192)", frameColor: "rgb(128,128,128)", }, /** * @description The click field holds an object of exontrol.Def.Shape type that's applied on the part, while it is clicked * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part, while it is clicked */ click: { fillColor: "rgb(164,164,164)", frameColor: "rgb(80,80,80)", } }, shflat: { /** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { pad: -1, fillColor: "rgba(0,0,0,0.10)", frameColor: "rgba(0,0,0,0.5)", primitive: "BevelRect", pArg: { x: 2, y: 2 } } }, shcheck: { /** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { pad: -1, fillColor: "white", frameColor: "gray", primitive: "Rect", draw: function( ctx, client , clientShape, oShapeData ) { oShapeData && oShapeData.state && ctx.noFD(function() // ignores the context's font-decoration (bold, italic, underline, ...) { ctx.drawHTMLText( "✓", client, exontrol.DrawTextFormatEnum.exTextAlignCenter | exontrol.DrawTextFormatEnum.exTextAlignVCenter | exontrol.DrawTextFormatEnum.exTextNoClip ); }) } } }, shradio: { /** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { pad: -1, fillColor: "white", frameColor: "gray", primitive: "Circle", draw: function( ctx, client , clientShape, oShapeData ) { oShapeData.object && oShapeData.object.getState() && exontrol.D.P.fill( ctx, exontrol.IRt( clientShape.slice(),-clientShape[exontrol.w] * 0.20,-clientShape[exontrol.w] *.20 ), "#666666", this.primitive, this.primitiveArg ); } } }, sharrow: { /** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { fillColor: "rgba(0,0,0,0.50)", primitive: "EllipticPolygon", pArg: { edges: 3, startAngle: Math.PI/2 } } }, shbarrow: { /** * @description The normal field holds an object of exontrol.Def.Shape type that's applied on the part. * @type {object} Indicates an object of exontrol.Def.Shape type that's applied on the part. */ normal: { pArg: { startAngle: Math.PI } } }, });