This is a beta release. This means there may be bugs or issues with using this plugin.

Release Notes

Add Mustaches for Attributes, Classes and Style

New Actions

HTMLAddAttribute, HTMLRemoveAttribute, HTMLChangeAttribute, CustomJSGetFileURL, CustomJSGetFileBLOB, CustomJSGetUrlBLOB, CustomJSGetBase64ImgFromURL, CustomJSGetBase64ImgFromFILE

New Conditions

JSOnGetFileURL, JSOnGetBLOB, JSOnGetUrlBLOB, JSOnGetBase64ImgFromURL, JSOnGetBase64ImgFromFILE

New Expressions

JSGetFileURL, JSGetFileBLOB, JSGetUrlBLOB, JSGetBase64ImgFromURL, JSGetBase64ImgFromFILE

Demo: Survey Form

Demo: Landing Page

  • [https://el3um4s.github.io/construct-html-element-plugin/www/free-code-camp/build-a-product-landing-page/]Online Demo: Buy a Trombone
  • C3 file

ACES

A list of all Actions, Conditions and Expressions supported in this addon.

CUSTOM

APPEARANCE

  • Actions

    Toggle Visible

    Toggle whether the object is hidden or shown.

    Set {0}

    Set whether the object is hidden or shown.

    Set opacity to {0}

    Set how transparent the object appears.

  • Conditions

    Is visible

    Test if the object is currently visible.

    Opacity {0} {1}

    Compare the object's current opacity.

  • Expressions

    AppearanceGetOpacity

    Get the object's current opacity, from 0 (transparent) to 100 (opaque).

TEXT

  • Actions

    Set text to {0}

    Set the text of this object.

    Append {0}

    Add text to the end of the existing text.

  • Conditions

    Has text

    Test if the object has text.

    Text is {0} ({1})

    Compare the text in this object.

  • Expressions

    TextGetText

    Get the object's text.

    TextGetInnerHTML

    Get the object's inner HTML.

SIZE & POSITION

  • Actions

    Set position to ({0} , {1})

    Set the object's X and Y co-ordinates at the same time.

    Set X to {0}

    Set the object's X co-ordinate.

    Set Y to {0}

    Set the object's Y co-ordinate.

    Set size to ({0} , {1})

    Set the object's width and height at the same time.

    Set height to {0}

    Set the object's height.

    Set width to {0}

    Set the object's width.

  • Conditions

    Width {0} {1}

    Compare the width to a value.

    Height {0} {1}

    Compare the height to a value.

    X {0} {1}

    Compare the X co-ordinate to a value.

    Y {0} {1}

    Compare the Y co-ordinate to a value.

  • Expressions

    PositionGetX

    Get the object's X co-ordinate, in pixels.

    PositionGetY

    Get the object's Y co-ordinate, in pixels.

    SizeGetWidth

    Get the object's width, in pixels

    SizeGetHeight

    Get the object's height, in pixels.

ANGLE

  • Actions

    Set angle to {0} degrees

    Set the angle the object is oriented at.

    Rotate {0} degrees clockwise

    Rotate the object's angle clockwise by a number of degrees.

    Rotate {0} degrees counter-clockwise

    Rotate the object's angle counter-clockwise by a number of degrees.

  • Conditions

    Is between {0} and {1} degrees

    if the object's angle is between two angles.

  • Expressions

    AngleGetAngle

    Get the object's current angle, in degrees.

    AngleGetAngleRAD

    Get the object's current angle, in radians.

MISC

ORIGIN TRANSFORM

  • Actions

    Set transform-origin to {0} {1}

    Set the origin for the element's transformations.

    Set transform-origin vertical to {0}

    Set the vertical origin for the element's transformations.

    Set transform-origin horizontal to {0}

    Set the horizontal origin for the element's transformations.

  • Conditions

    Vertical origin transform is {0}

    Compare the vertical origin transform.

    Horizontal origin transform is {0}

    Compare the horizontal origin transform.

  • Expressions

    OriginTransformGetVertical

    Get the vertical origin for the element's transformations.

    OriginTransformGetHorizontal

    Get the horizontal origin for the element's transformations.

CSS

  • Conditions

    Has Class '{0}'

    Checks whether html element is assigned to the given class.

    Has style '{0}' defined

    Checks whether html element has a syle defined.

    Has Style '{0}':'{1}'

    Compare the style to a value.

  • Expressions

    CSSGetClassesAsStringList

    Get the classes of the given element (like a string).

    CSSGetClassAsBoolean

    Return 1 if the class exists, 0 if not.

    CSSgetCSS

    Return the element's style.

CSS - From Plugin Settings

HTML

  • Actions

    Add attribute {0}:{1}

    Sets the value of an attribute on the specified element.

    Remove attribute {0}

    Removes the attribute with the specified name from the element.

    Change attribute {0} to {1}

    Updates the value of an attribute on the specified element.

  • Conditions

    Has ID

    Checks whether html element has the ID defined.

    Is Checked

    Checks if the element is checked or not..

    ID is '{0}'

    Checks whether html element has the the given ID.

    TAG is '{0}'

    Checks whether html element has the the given TAG.

    Has attribute: '{0}'

    Checks whether html element has the the given attribute.

    Value is {0} '{1}'

    Checks whether html element has the the given value.

    {0} {1} {2}

    Checks whether attribute has the the given value.

    Input radio '{0}' {1} '{2}'

    Checks whether attribute has the the given value.

    Value is {0} '{1}'

    Checks whether html element has the the given value.

    {0} {1} {2}

    Checks whether attribute has the the given value.

    Input radio '{0}' {1} '{2}'

    Checks whether attribute has the the given value.

  • Expressions

    HTMLgetID

    Return the ID of the element.

    HTMLgetUID

    Return the UID of the element.

    HTMLgetTAG

    Return the tag name of the element.

    HTMLgetAttribute

    Return the value of a specified attribute on the element.

    HTMLgetVALUE

    Return the value of the element.

    HTMLgetValueRadio

    Return the value of one radio element.

    HTMLgetCheckedStatus

    Return 1 if the element is checked, 0 if not.

EVENT

  • Expressions

    GetLastEventAsJSON

    Get the last event registered.

    GetLastEventType

    Get the type of the last event registered.

    GetLastEventProperty

    Get the last event registered.

EVENT (Mouse)

  • Conditions

    On Click

    A pointing device button (ANY button; soon to be primary button only) has been pressed and released on the element.

    On Double Click

    A pointing device button is clicked twice on the element.

    On Context Menu (right click)

    The right button of the mouse is clicked (before the context menu is displayed).

    On Aux Click

    A pointing device button (ANY non-primary button) has been pressed and released on the element.

    On Wheel

    A wheel button of a pointing device is rotated in any direction.

    On Mouse Over

    A pointing device is moved onto the element that has the listener attached or onto one of its children.

    On Mouse Out

    A pointing device is moved off the element that has the listener attached or off one of its children.

    On Mouse Down

    A pointing device button is pressed on an element.

    On Mouse Up

    A pointing device button is released over an element.

    On Mouse Enter

    A pointing device is moved onto the element that has the listener attached.

    On Mouse Leave

    A pointing device is moved off the element that has the listener attached.

    On Mouse Move

    A pointing device is moved over an element. (Fired continously as the mouse moves.)

    On Select

    Some text is being selected.

EVENT (Focus)

  • Conditions

    On Focus

    An element has received focus (does not bubble).

    On Blur

    An element has lost focus (does not bubble).

EVENT (Keyboard)

  • Conditions

    On Key Down

    ANY key is pressed.

    On Key Press

    ANY key except Shift, Fn, CapsLock is in pressed position. (Fired continously.).

    On Key Up

    ANY key is released.

EVENT (ValueChange)

  • Conditions

    On Checkbox state change

    The CheckboxStateChange event is executed when the state of a element has changed.

    On Input

    The DOM input event is fired synchronously when the value of an ,