{*
- Foundation 6 Checkbox Input Field
- All parameters are required.
- Only 0ne of $data or $field may be used.
- Do not list fields if they're false. (We're not checking for false)
+ Foundation 6 - Checkbox Input Field
{$ui = [
- 'value' => string Value of the element
- 'field' => string Name of field that holds the data if not using data abstract,
- 'label' => string Label text for this field,
- 'active' => string Text for active state
- 'inactive' => string text for inactive state
- 'required' => boolean True if required,
- 'helpText' => string Help text for this input,
- 'errortext' => string Error text that appears when the field doesn't validate,
+ 'field' => string Required Name of field that holds the data if not using data abstract,
+ 'value' => string Required True/False, 0/1
+ 'label' => string Required Label text for this field,
+ 'required' => boolean True if required,
+ 'helpText' => string Help text for this input,
+ 'errorText' => string Error text that appears when the field doesn't validate,
+ 'dataError' => string Error from data Abstract Class,
+ 'tip' => string Tool Tip text
'dataError' => string Error from data Abstract Class
]}
*}
+
<div class="cell small-12 glm-f6-ui-field">
<div class="grid-x grid-margin-x">
<div class="cell shrink glm-f6-ui-field-input">
<div class="switch small glm-f6-ui-field-input-switch">
- <input class="switch-input" id="{$ui.field}" type="checkbox" name="{$ui.field}"{if $ui.value} checked{/if}{if $ui.required} required{/if}>
+ <input class="switch-input" id="{$ui.field}" type="checkbox" name="{$ui.field}"{if !empty($ui.value)} checked{/if}{if !empty($ui.required)} required{/if}>
<label for="{$ui.field}" class="switch-paddle">
<span class="show-for-sr">{$ui.label}</span>
<span class="switch-active" aria-hidden>{$ui.active|default:'On'}</span>
<span class="switch-inactive" aria-hidden>{$ui.inactive|default:'Off'}</span>
</label>
</div>
-
</div>
<div class="cell auto glm-f6-ui-label-container-right">
- <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-f6-ui-field-label">{$ui.label}</label>
+ {if isset($ui.tip)}
+ <span style="float:right;" data-tooltip aria-haspopup="true" class="has-tip .left" data-disable-hover="false" tabindex=1 title="{$ui.tip}">?</span>
+ {/if}
+ <label for="{$ui.field}" class="{if !empty($ui.required)} glm-required{/if} glm-f6-ui-field-label">{$ui.label}</label>
</div>
- <div class="cell small-12">
- {if isset($ui.dataError) && $ui.dataError}<span class="form-error is-visible glm-f6-ui-field-data-error">{$ui.dataError}</span>{/if}
- {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-f6-ui-field-error-text" data-form-error-for="{$ui.field}">{$ui.errorText}</span>{/if}
- {if isset($ui.helpText)}<span class="glm-f6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</span]>{/if}
+ <div class="cell small-12 glm-f6-ui-field-messages">
+ {if !empty($ui.helpText)}<span class="glm-f6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</span]>{/if}
+ {if !empty($ui.dataError)}<span class="form-error is-visible glm-f6-ui-field-data-error">{$ui.dataError}</span>{/if}
+ {if !empty($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-f6-ui-field-error-text" data-form-error-for="{$ui.field}">{$ui.errorText}</span>{/if}
</div>
</div>
</div>
{*
- Foundation 6 Form Start
+ Foundation 6 UI - Form Start
+
{$ui = [
- 'id' => string Form id
- 'action' => string URL
- 'method' => string Method POST or GET
- 'File' => Bool 0 or 1
+ 'action' => string Required URL
+ 'method' => string Required Method "post" or "get"
+ 'id' => string Form id
+ 'file' => boolean If including file upload set to true
+ 'validate' => boolean If true, include Abide Form Validation
+ 'validateFocusMsg' => boolean If true focuses on validateMessage on error
+ 'validateID' => string Unique text that will be added to the validate message container to ensure that it is unique
+ 'validateMessage' => string Message to show for a validation error, Defaults to "There are some errors in your form."
]}
*}
+
<form
- id="{$ui.id}"
action="{$ui.action}"
method="{$ui.method}"
+ {if !empty($ui.id)}id="{$ui.id}"{/if}
{if !empty($ui.file)}enctype="multipart/form-data"{/if}
data-abide novalidate data-validate-on-blur="true">
+{if !empty($ui.validate)}
+ <div id="validateMessage{if !empty($ui.validateID)}_{$ui.validateID}{/if}" data-abide-error class="alert callout" style="display: none;">
+ <p><i class="fi-alert"></i> {$ui.validateMessage|default:'There are some errors in your form.'}</p>
+ </div>
+ {if !empty($ui.validateFocusMsg)}
+ <script>
+ jQuery(document).ready(function(){
+ $(document).on( 'forminvalid.zf.abide', function( ev, frm ) {
+ console.log( 'forminvalid' );
+ $("html, body").animate({ scrollTop: $('#validateMessage{if !empty($ui.validateID)}_{$ui.validateID}{/if}').offset().top }, 500);
+ });
+ });
+ </script>
+ {/if}
+{/if}
+
{*
- Foundation 6 Number Input Field
- All parameters are required.
- Only 0ne of $data or $field may be used.
- DO NOT include fields if they're false. (We're not checking for false)
+ Foundation 6 UI - Number Input Field
- {$fieldData = [
- 'data' => array Data from data abstract if using that,
- 'field' => string Name of field that holds the data if not using data abstract,
- 'label' => string Label text for this field,
- 'placeholder' => string Placeholder string,
- 'suffix' => string Suffix text to add after input field,
- 'min' => integer Minimum numeric value
- 'max' => integer Maximum numeric value
- 'maxWidth' => integer Size of input field in characters,
- 'message' => string Message string to display between label and input,
- 'helpText' => string Help text for this input,
- 'errortext' => string Error text that appears when the field doesn't validate
+ Do not include fields if they're false. (We're not checking for false)
+
+ {$ui = [
+ 'field' => string Required Name of field that holds the data if not using data abstract,
+ 'value' => array Required Value of this number field
+ 'label' => string Required Label text for this field,
+ 'placeholder' => string Placeholder string,
+ 'suffix' => string Suffix text to add after input field,
+ 'min' => integer Minimum numeric value
+ 'max' => integer Maximum numeric value
+ 'width' => integer Size of input field in characters,
+ 'message' => string Message string to display between label and input,
+ 'helpText' => string Help text for this input,
+ 'errorText' => string Error text that appears when the field doesn't validate
]}
*}
-
-
-{if (!isset($fieldData.data) && !isset($fieldData.field)) || !isset($fieldData.label)}
- <div class="grid-x grid-margin-x">
- <div class="cell small-12">
- <span class="glm-required">Field Error: Required field information not supplied!</span>
- </div>
- </div>
+{if empty($ui.width)}
+ {$ui.width = 5}
{else}
- {if isset($fieldData.data)} {* If using data abstract *}
- <div class="grid-x grid-margin-x">
- <div class="cell small-12 medium-3">
- <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
- </div>
- <div class="cell small-12 medium-9">
- <input type="number" id="{$field}" name="{$field}"{if $data.fieldData.$field.value} checked{/if}> Yes
- {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
- </div>
- </div>
+ {$ui.width = $ui.width * .55 + 2.5}
+{/if}
+
+<div class="cell small-12 glm-f6-ui-field">
+ {if (!isset($ui.value) && !isset($ui.field)) || !isset($ui.label)}
+ <span class="glm-required">Field Error: Required field information not supplied!</span>
{else}
- <div class="small-12 columns">
- <label for="{$fieldData.field}_FieldID" class="{if $fieldData.required} glm-required{/if}">
+ <div class="grid-x grid-margin-x">
+ <div class="cell shrink">
<input
- id="{$fieldData.field}_FieldID"
- type="text"
- pattern="number"
- name="{$fieldData.field}"
- value="{${$fieldData.field}}"
- {if $fieldData.required}required{/if}
- {if isset($fieldData.errorText)}aria-errormessage="{$fieldData.field}_ErrorText"{/if}
- {if isset($fieldData.helpText)}aria-describedby="{$fieldData.field}_HelpText"{/if}
- {if isset($fieldData.placeholder)}placeholder="{$fieldData.placeholder}"{/if}
- {if isset($fieldData.min)}min="{$fieldData.min}"{/if}
- {if isset($fieldData.min)}max="{$fieldData.max}"{/if}
- {if isset($fieldData.maxWidth)}style="width: {$fieldData.maxWidth}rem !important;"{/if}
+ class="glm-f6-ui-field-input-number"
+ id="{$ui.field}_FieldID"
+ type="number"
+ name="{$ui.field}"
+ value="{$ui.value}"
+ {if !empty($ui.required)}required{/if}
+ {if !empty($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
+ {if !empty($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
+ {if !empty($ui.placeholder)}placeholder="{$ui.placeholder}"{/if}
+ {if !empty($ui.min)}min="{$ui.min}"{/if}
+ {if !empty($ui.min)}max="{$ui.max}"{/if}
+ style="width: {$ui.width}rem;"
>
- {$fieldData.label}:
- {if isset($fieldData.helpText)}<p class="help-text" id="{$fieldData.field}_HelpText">{$fieldData.helpText}</p>{/if}
- {if isset($fieldData.errorText)}<span id="{$fieldData.field}_ErrorText" class="form-error">{$fieldData.errorText}</span>{/if}
- </label>
+ </div>
+ <div class="cell auto glm-f6-ui-label-container-right">
+ <label for="{$ui.field}" class="{if !empty($ui.required)} glm-required{/if} glm-f6-ui-field-label">{$ui.label}</label>
+ </div>
+ <div class="cell small-12 glm-f6-ui-field-messages">
+ {if !empty($ui.helpText)}<span class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</span>{/if}
+ {if !empty($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
+ </div>
</div>
{/if}
-{/if}
+</div>
warning = yellow
{$ui = [
- 'id' => string Optional The id for button,
- 'type' => string Optional Type for button,
- 'label' => string Required Name of the Button Label,
- 'class' => string Default Primary class (primary, secondary, alert, success, warning)
+ 'class' => string Required One of "primary", "secondary", "alert", "success", and "warning" and any addtional desired classes
+ 'label' => string Required Label text for this field,
+ 'submit' => boolean True if this is a submit button
+ 'id' => string Optional ID for this button
+ 'cancel' => string Optional URL for cancel button
]}
*}
-<button
- {if !empty($ui.type)}type="{$ui.type}"{/if}
- {if !empty($ui.id)}id="{$ui.id}"{/if}
- class="button {$ui.class|default:'primary'}"
- >
- {$ui.label}
-</button>
+
+<div class="cell small-12 lm-f6-ui-field">
+ <button
+ {if !empty($ui.id)}id="{$ui.id}"{/if}
+ {if !empty($ui.submit)}type="submit"{/if}
+ class="button {$ui.class|default:'primary'}"
+ >
+ {$ui.label}
+ </button>
+ {if !empty($ui.cancel)}<a href="{$ui.cancel}" class="button secondary">Cancel</a>{/if}
+</div>
id="{$ui.field}"
name="{$ui.field}"
value="{$ui.value|escape}"
- {if isset($ui.pattern) && $ui.pattern}pattern="{$ui.pattern}"{/if}
- {if $ui.required}required{/if}
- {if isset($ui.placeholder) && $ui.placeholder}placeholder="{$ui.placeholder}"{/if}
- {if isset($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
- {if isset($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
- {if isset($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
- {if isset($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
+ {if !empty($ui.pattern)}pattern="{$ui.pattern}"{/if}
+ {if !empty($ui.required)}required{/if}
+ {if !empty($ui.placeholder)}placeholder="{$ui.placeholder}"{/if}
+ {if !empty($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
+ {if !empty($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
+ {if !empty($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
+ {if !empty($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
/>
</div>
- <div class="cell small-12">
- {if isset($ui.dataError) && $ui.dataError}<span class="form-error is-visible glm-f6-ui-field-data-error">{$ui.dataError}</span>{/if}
- {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-f6-ui-field-error-text" data-form-error-for="{$ui.field}">{$ui.errorText}</span>{/if}
- {if isset($ui.helpText)}<span class="glm-f6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</span>{/if}
+ <div class="cell small-12 glm-f6-ui-field-messages">
+ {if !empty($ui.dataError)}<span class="form-error is-visible glm-f6-ui-field-data-error">{$ui.dataError}</span>{/if}
+ {if !empty($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-f6-ui-field-error-text" data-form-error-for="{$ui.field}">{$ui.errorText}</span>{/if}
+ {if !empty($ui.helpText)}<span class="glm-f6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}<br></span>{/if}
</div>
</div>
{/if}
projects / WP-Plugins / glm-member-db.git / commitdiff