Redo smarty ui element
authorSteve Sutton <steve@gaslightmedia.com>
Thu, 27 Jun 2019 20:42:14 +0000 (16:42 -0400)
committerSteve Sutton <steve@gaslightmedia.com>
Thu, 27 Jun 2019 20:42:14 +0000 (16:42 -0400)
starting with text

views/ui/f6/text.html

index cf5bfb5..e102e2e 100644 (file)
@@ -7,8 +7,8 @@
     "required" will be supplied by the abstract rather than in a parameter in
     this array.
 
-    {$fieldData = [
-        'data'          => array    Data from data abstract if using that,
+    {$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,
         'placeholder'   => string   Placeholder string,
         'maxWidth'      => string   Size of input field using standard style notation ('900px', '15rem', ...),
         'maxlength'     => integer  Maximum number of characters that may be entered,
         'helpText'      => string   Help text for this input,
-        'errortext'     => string   Error text that appears when the field doesn't validate
+        'errortext'     => string   Error text that appears when the field doesn't validate,
+        'dataError'     => string   Error from data Abstract Class
     ]}
 *}
 
-{if (!isset($fieldData.data) && !isset($fieldData.field)) || !isset($fieldData.label)}
+{if !isset($ui.field) || !isset($ui.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>
 {else}
-    {if isset($fieldData.data)} {* If using data abstract *}
-        {$field = $fieldData.field}
-        {$data  = $fieldData.data}
-        <div class="grid-x grid-margin-x">
-            <div class="cell small-12">
-                <label for="{$field}" class="{if $data.fieldRequired.$field} glm-required{/if}">{$fieldData.label}</label>
-                <input
-                    type="text"
-                    id="{$field}"
-                    name="{$field}"
-                    value="{$data.fieldData.$field|escape}"
-                    placeholder="{$fieldData.placeholder}"
-                    {if isset($fieldData.errorText)}aria-errormessage="{$field}_ErrorText"{/if}
-                    {if isset($fieldData.helpText)}aria-describedby="{$field}_HelpText"{/if}
-                    {if isset($fieldData.required)}required{/if}
-                    {if isset($fieldData.maxWidth)}style="max-width: {$fieldData.maxWidth}"{/if}
-                    {if isset($fieldData.maxLength)}max-length="{$fieldData.maxLength}"{/if}
-                    {if $fieldData.data.fieldRequired.$field}required{/if}
-                />
-                {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
-                {if isset($fieldData.helpText)}<p class="help-text" id="{$field}_HelpText">{$fieldData.helpText}</p>{/if}
-                {if isset($fieldData.errorText)}<span id="{$field}_ErrorText" class="form-error">{$fieldData.errorText}</span>{/if}
-            </div>
-        </div>
-    {else} {* Using simple field *}
-        <div class="small-12 columns">
-            <label for="{$fieldData.field}_FieldID" class="{if $fieldData.required} glm-required{/if}">{$fieldData.label}:
-                <input
-                    id="{$fieldData.field}_FieldID"
-                    type="text"
-                    name="{$fieldData.field}"
-                    value="{${$fieldData.field}}"
-                    {if isset($fieldData.errorText)}aria-errormessage="{$fieldData.field}_ErrorText"{/if}
-                    {if isset($fieldData.helpText)}aria-describedby="{$fieldData.field}_HelpText"{/if}
-                    {if isset($fieldData.required)}required{/if} placeholder="{$fieldData.placeholder}"
-                    {if isset($fieldData.maxWidth)}style="max-width: {$fieldData.maxWidth}"{/if}
-                    {if isset($fieldData.maxLength)}max-length="{$fieldData.maxLength}"{/if}
-                >
-                {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 class="grid-x grid-margin-x">
+        <div class="cell small-12">
+            <label for="{$ui.field}" class="{if $ui.required} glm-required{/if}">{$ui.label}</label>
+            <input
+                type="text"
+                id="{$ui.field}"
+                name="{$ui.field}"
+                value="{$ui.$value|escape}"
+                placeholder="{$ui.placeholder}"
+                {if isset($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
+                {if isset($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
+                {if isset($ui.required)}required{/if}
+                {if isset($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
+                {if isset($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
+                {if $ui.required}required{/if}
+            />
+            {if $ui.dataError}<span class="form-error is-visible">{$ui.dataErrror}</span>{/if}
+            {if isset($ui.helpText)}<p class="help-text" id="{$field}_HelpText">{$ui.helpText}</p>{/if}
+            {if isset($ui.errorText)}<span id="{$field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
         </div>
-    {/if}
+    </div>
 {/if}