Deester4x4jr / grav-plugin-liveform

Enables live forms in conjunction with the Import and Form plugins

grav-plugin-liveForm

Enables live forms in conjunction with the Import and Form plugins

Structure, order of operations, and instructions for live.yaml:

Structure:

live_form_defaults: |-
    <div>Default Shell for the body of your form contents</div>
live_form_snippets:
    form_field_name_1: # This is the field name as defined in the frontmatter of your corresponding form
    	field_id: 'defaults_to_field_name' # [OPTIONAL] This is the ID of an element to inject code into, if different than the field name 
        code: |-
            <span><a id="id_of_element_to_mod">contents</a></span>
        subs:
            id_of_element_to_mod:
                html: regex-or-string # This will replace the contents of the element with the specified id above (using jquery .html()). If omitted this will just be the form field value
                attr: # list of attributes to modify (using jquery selectors)
                    href: regex-or-string
                    title: regex-or-string
                    style: regex-or-string
                    etc: ...
	form_field_name_2: # This is an example of a radio field where we are placing the contents into an element with an id of the form field name
        img: |-
            <div>Stuff</div>
        txt: |-
            <div>Stuff</div>
    form_field_name_3: # This is an example of a checkbox field where we are placing the contents into different elements per option
        checked:
            logo: |-
                <td valign=middle style=border:none;padding:0><div style="text-align:left;margin:0 0 .75rem 0"><a href=http://www.tegile.com target=_blank><img height=40 src=http://webdev.tegile.com/wp-content/uploads/2015/12/logo.png></a></div>
        unchecked:
            company: |-
                <span style="color: #1c5ea1; font-size: 13px; font-weight: bold; ">Tegile</span>

Order of Operations:

1. If no rule exists, we assume the following:
   1. The destination fieldID will be: #live_[fieldID]
   2. The destination field's html will become the Source Form Field's value
2. If a rule exists, we check the following:
   1. If the rule is a string:
      1. The destination field's html will become the string
   2. If the rule is an object:
      1. Any valid jQuery method can be used as a key: value pair, as long as the method is prepended by fn.. Some examples:
         • The destination field's html will become the fn.html key's value, using jQuery.html()
           • (It is worth noting that we will look for and process fn.html first)
         • The destination field can have a class applied using the fn.addClass key, which uses the jQuery.addClass() method
      2. Any valid jQuery method that accepts multiple parameters can be used as well, with key: value pairs beneath it. Some examples:
         • fn.attr: uses jQuery.attr()

           fn.attr:
               href: "'tel:+'+$('#desk_phone').attr('data-dial-code')+$('#desk_phone').cleanVal()"
               alt: some stuff
               title: "$('#desk_phone').cleanVal()"
           

         • fn.css: uses jQuery.css()

           fn.css:
               color: red
               padding: 0 0 0 100px
           

      3. The following special methods may be used as well, and will be processed in this order:
         1. this.action:
            1. Use this method if you would like to add raw jQuery or Javascript to be run when interacting with a particular field
            2. The this.action method may be used under any field key to be acted upon as well
         2. this.subs:
            1. Will be parsed to determine if any substitutions need to be made on the new html in the destination field
            2. Each substitution should have the field ID to be acted upon as a key with key: value pairs beneath it, following the same rules as the destination field (jQuery methods with leading underscore, etc...)
            3. There is no limit to the depth of fields with substitutions that can be chained... Just make sure you can manage your own code
      4. Any additional field to be acted upon may be specified as a key: value pair as well

         1. The key must be the field ID

         2. The value may be a set of key: value pairs, following the same rules as the destination field (jQuery methods with leading underscore, etc...)

         3. There is no limit to the depth of fields with substitutions that can be chained... Just make sure you can manage your own code

         4. The field is a Radio:

         5. The field is a Checkbox:

         6. The field is a Text Input:

Rules to Follow:

form field name: MUST match name of field to be acted upon

field_id: if found use as parent container id if not found, use field_name as parent container id

field types: Field types are determined by looking at the form itself, which is why the form_field_name must match the name of the form field defined in the form page frontmatter if textfield or textarea: array values are 'code' and 'subs' if radio: array values are not 'code' and 'subs', but instead must be names of the different radio options. if checkbox: array values are not 'code' and 'subs', but instead must be 'true' and 'false'.