path: root/UI/elements.html

<?lsmb 
  default_keys = ['id', 'class', 'title']  # Defaults for all attributes
  input_keys = ['type', 'name', 'disabled', 'size', 'value']  # Defaults for input attributes 

  # ELEMENT DEFAULTS

  #checkbox
  checkbox_defaults = {
    value = '1'
  }

  #file
  file_defaults = {
    size => '60'
  }

  #password
  password_defaults = {
    size = '60'
  }

  # text
  text_defaults = {
    size = '60',
    maxlength = '255'
  }
  
  # textarea
  textarea_defaults = {
    rows = '5',
    cols = '60'
  }
  
  #button
  button_defaults = {
    type = 'submit'
  }
  
?>

<?lsmb # INPUT ELEMENT ?>
<?lsmb BLOCK input ?>
  <?lsmb input_defaults = {}  # Some inputs have no defaults, so make sure everything is empty to start with. ?>
  <?lsmb SWITCH element_data.type;  # Merge in type-specific attributes.
      CASE 'file';
        input_type_keys = input_keys.merge(['accept']);
        input_defaults = file_defaults;
      CASE 'image';
        input_type_keys = input_keys.merge(['alt', 'src']);
      CASE ['checkbox'];
        input_type_keys = input_keys.merge(['checked']);
        input_defaults = checkbox_defaults;
      CASE ['radio'];
        input_type_keys = input_keys.merge(['checked']);
      CASE ['password'];
        input_defaults = password_defaults;
      CASE 'text';
        input_type_keys = input_keys.merge(['maxlength', 'readonly']);
        input_defaults = text_defaults;
      CASE;
        input_type_keys = input_keys;
    END;
  ?>
  <?lsmb PROCESS attributes  # Process regular attributes.
    attribute_data = element_data 
    attribute_defaults = input_defaults
    element_keys = input_type_keys 
    element_type = 'input'
  ?>
  <?lsmb PROCESS custom_attributes  # Process custom attributes.
    custom_attribute_data=element_data.attributes 
  ?>
  <input<?lsmb all_attributes ?><?lsmb all_custom_attributes ?> />
<?lsmb END ?>

<?lsmb # TEXTAREA ELEMENT ?>
<?lsmb BLOCK textarea ?>
  <?lsmb PROCESS attributes  # Process regular attributes.
    attribute_data=element_data 
    attribute_defaults = textarea_defaults
    element_keys = ['name', 'cols', 'rows', 'disabled', 'readonly', 'tabindex', 'accesskey', 'value']  # Attributes that apply to textareas.
    element_type = 'textarea'
  ?>
  <?lsmb PROCESS custom_attributes  # Process custom attributes.
    custom_attribute_data=element_data.attributes 
  ?>
  <textarea<?lsmb all_attributes ?><?lsmb all_custom_attributes ?>><?lsmb element_data.text ?></textarea>
<?lsmb END ?>

<?lsmb # SELECT ELEMENT ?>
<?lsmb BLOCK select ?>
  <?lsmb PROCESS attributes  # Process regular attributes.
    attribute_data=element_data
    attribute_defaults = {}  # Make sure old defaults are cleared out.
    element_keys=['name', 'size', 'multiple', 'disabled', 'accesskey', 'tabindex']  # Attributes that apply to selects.
    element_type = 'select'
  ?>
  <?lsmb PROCESS custom_attributes  # Process custom attributes.
    custom_attribute_data=element_data.attributes 
  ?>
  <select<?lsmb all_attributes ?><?lsmb all_custom_attributes ?>>
    <?lsmb  # Build options.
      FOREACH option_data IN element_data.options;
        PROCESS option;
      END;
    ?>
  </select>
<?lsmb END ?>

<?lsmb # OPTION ELEMENT ?>
<?lsmb BLOCK option ?>
  <?lsmb  # Selected is a special case -- no attribute key, so it's handled here.
    IF option_data.defined('selected');
      option_data.selected = " selected";
    ELSE;
      option_data.selected = "";
    END;
  ?>
  <?lsmb PROCESS attributes  # Process regular attributes.
    attribute_data=option_data 
    element_keys=['tabindex', 'disabled', 'value']  # Attributes that apply to options.
    element_type = 'option'
  ?>
  <?lsmb PROCESS custom_attributes  # Process custom attributes.
    custom_attribute_data=option_data.attributes 
  ?>
  <option<?lsmb all_attributes ?><?lsmb all_custom_attributes ?><?lsmb option_data.selected ?>><?lsmb option_data.text ?></option>
<?lsmb END ?>

<?lsmb # BUTTON ELEMENT ?>
<?lsmb BLOCK button ?>
  <?lsmb PROCESS attributes  # Process regular attributes.
    attribute_data=element_data 
    attribute_defaults = button_defaults
    element_keys=['name', 'value', 'accesskey', 'type', 'disabled', 'tabindex']  # Attributes that apply to buttons.
    element_type = 'button'
  ?>
  <?lsmb PROCESS custom_attributes  # Process custom attributes.
    custom_attribute_data=element_data.attributes 
  ?>
  <button<?lsmb all_attributes ?><?lsmb all_custom_attributes ?>><?lsmb element_data.text ?></button>
<?lsmb END ?>

<?lsmb # LABEL ELEMENT ?>
<?lsmb BLOCK label ?>
  <?lsmb PROCESS attributes 
    attribute_data=element_data 
    attribute_defaults = {}  # Make sure old defaults are cleared out.
    element_keys=['for']  # Attributes that apply to labels.
    element_type = 'label'
  ?>
  <?lsmb PROCESS custom_attributes 
    custom_attribute_data=element_data.attributes 
  ?>
  <label<?lsmb all_attributes ?><?lsmb all_custom_attributes ?>><?lsmb element_data.text ?></label>
<?lsmb END ?>

<?lsmb # REGULAR ATTRIBUTE PROCESSING -- all explicitly allowed attributes are processed here. ?>
<?lsmb BLOCK attributes ?>
  <?lsmb 
    all_attributes = ""
    all_keys = default_keys.merge(element_keys)  # Merge in attributes that apply to this element.
  ?>
  <?lsmb FOREACH element_attribute IN all_keys  # Loop through each allowed attribute. ?>
    <?lsmb 
      IF attribute_data.defined(element_attribute);  # Add the attribute to the element if it's been set.
        all_attributes = all_attributes _ " " _ element_attribute _ '="' _ attribute_data.${element_attribute} _ '"';
      ELSIF attribute_defaults.defined(element_attribute);  # Fall back to default value if one is supplied.
        all_attributes = all_attributes _ " " _ element_attribute _ '="' _ attribute_defaults.${element_attribute} _ '"';
      END;
    ?>
  <?lsmb END ?>
  <?lsmb UNLESS attribute_data.defined('id') # id attribute should always be set, so auto-set it if it's not defined. ?>
    <?lsmb element_id = "" ?>
    <?lsmb  # Labal id's default to [for]-label.
      IF element_type == 'label' AND attribute_data.defined('for');
        element_id = attribute_data.for _ "-label";
      ELSIF ((element_type == 'input' AND attribute_data.type == 'radio') OR element_type == 'button') AND attribute_data.defined('name') AND attribute_data.defined('value');
        element_id = attribute_data.name _ "-" _ attribute_data.value;  # radios and buttons get name-value for uniqueness.
      ELSIF (element_type == 'input' OR element_type == 'textarea' OR element_type == 'select') AND attribute_data.defined('name');
        element_id = attribute_data.name;
      END;
    ?>
    <?lsmb  # Add the id if it's been generated.  Replace underscores with dashes -- nicer CSS.
      IF element_id;
        all_attributes = ' id="' _ element_id.replace('[_]', '-') _ '"' _ all_attributes; 
      END;
    ?>
  <?lsmb END ?>
<?lsmb END ?>

<?lsmb # CUSTOM ATTRIBUTE PROCESSING -- any other attributes passed in the 'attributes' key are processed here. ?>
<?lsmb BLOCK custom_attributes ?>
  <?lsmb all_custom_attributes = "" ?>
  <?lsmb  # Loop through each attribute and add it to the custom attribute string.
    FOREACH element_attribute IN custom_attribute_data;
      all_custom_attributes = all_custom_attributes _ " " _ element_attribute.key _ '="' _ element_attribute.value _ '"';
    END;
  ?>
<?lsmb END ?>