Updating ui elements

Updating elements taking care of notices.
Now have:
text
checkbox
multicheckboxes
multiselect
select
image

diff --git a/views/ui/f6/checkbox.html b/views/ui/f6/checkbox.html
index 8d8e16c..45d53e8 100644 (file)
--- a/views/ui/f6/checkbox.html
+++ b/views/ui/f6/checkbox.html
@@ -24,7 +24,7 @@
             name="{$ui.field}"{if $ui.value} checked{/if}>
         <label for="{$ui.field}">{$ui.label}</label>
 
-        {if $ui.dataError}<span class="form-error is-visible">{$ui.dataErrror}</span>{/if}
+        {if isset($ui.dataError)}<span class="form-error is-visible">{$ui.dataError}</span>{/if}
         {if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
         {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
     </div>

diff --git a/views/ui/f6/editor.html b/views/ui/f6/editor.html
index 331ef0b..c30a571 100644 (file)
--- a/views/ui/f6/editor.html
+++ b/views/ui/f6/editor.html
@@ -1,5 +1,5 @@
 {*
-    Foundation 6 Text Area Input Field
+    Foundation 6 Editor
     All parameters are required.
     Do not list parameters if they're false. (We're not checking for false)
     If supplying field data (formData) from the data abstract, supply a
@@ -7,63 +7,45 @@
     "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,
+        'height'        => integer  Height in px,
+        'media'         => boolean  Enable Media Button,
+        'quicktags'     => boolean  Enable Quicktags,
         'required'      => boolean  True if required,
-        'maxWidth'      => string   Size of input field using standard style notation ('900px', '15rem', ...),
         '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)}
-    <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 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>
+        {if isset($ui.value) && $ui.value}
+            {$textAreaContent = $ui.value|escape:quotes}
+        {else}
+            {$textAreaContent = ''}
+        {/if}
+        {$textAreaName = $ui.field}
+        {if isset($ui.height)} {$height = $ui.height} {else} {$height = 100} {/if}
+        {if isset($ui.media)} {$media_buttons = $ui.media} {else} {$media_buttons = false} {/if}
+        {if isset($ui.quicktags)} {$quicktags = $ui.quicktags} {else} {$quicktags = false} {/if}
+        {wp_editor(
+            $textAreaContent,
+            $textAreaName,
+            json_decode('{
+                "textarea_name": $textAreaContent,
+                "media_buttons": false,
+                "quicktags": false,
+                "editor_height": $height
+            }', true)
+        )}
+        <br>
+        {if $ui.dataError}<span class="form-error is-visible">{$ui.dataError}</span>{/if}
+        {if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
+        {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
     </div>
-{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="{$fieldData.field}" class="{if $fieldData['data'].fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
-            </div>
-            <div class="cell small-12 medium-9">
-                <input type="text" id="{$field}" name="{$field}" value="{$data.fieldData.$field|escape}" {if $data.fieldRequired.$field}required{/if} placeholder="{$placeholder}" />
-                {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
-            </div>
-        </div>
-    {else} {* Using simple field *}
-            <div class="small-12 columns">
-                <label class="{if $fieldData.required} glm-required{/if}">{$fieldData.label}:
-                    <div
-                        {if isset($fieldData.helpText)}aria-describedby="{$fieldData.field}_HelpText"{/if}
-                        {if isset($fieldData.maxWidth)}style="width: {$fieldData.maxWidth} !important;"{/if}
-                    >
-                            {$editorOptions = '
-                                {
-                                "media_buttons":    false,
-                                "quicktags":        false'
-                            }
-                            {if isset($fieldData.height)}{$editorOptions = $editorOptions|cat:',
-                                "editor_height":    '|cat:$fieldData.height}{/if}
-                            {if isset($fieldData.rows)}{$editorOptions = $editorOptions|cat:',
-                                "textarea_rows":    '|cat:$fieldData.rows}{/if}
-                            {$editorOptions = $editorOptions|cat:'
-                                }'}
-                            {wp_editor(
-                                ${$fieldData.field},
-                                $fieldData.field,
-                                json_decode($editorOptions, true)
-                            )}
-
-                        {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}
-                    </div>
-                </label>
-            </div>
-    {/if}
-{/if}
+</div>

diff --git a/views/ui/f6/f6-image.html b/views/ui/f6/f6-image.html
deleted file mode 100644 (file)
index b7b28fa..0000000
--- a/views/ui/f6/f6-image.html
+++ /dev/null
@@ -1,31 +0,0 @@
-{* Foundation 6 Image *}
-{* setup $data *}
-{* setup $field *}
-{* setup $fieldLabel *}
-<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">
-        <div {if $data.fieldFail.$field}class="glm-form-bad-input" data-tabid="glm-member-info-images"{/if}>
-            {if $data.fieldData.$field}
-                <div class="glm-row">
-                    <div class="glm-small-12 glm-medium-6">
-                        <div class="glm-galleryImage" data-id="{$field}">
-                            <img src="{$glmPluginMediaUrl}/images/small/{$data.fieldData.$field}">
-                        </div>
-                    </div>
-                    <div class="glm-small-11 glm-medium-6 glm-right">
-                        <br>
-                        <input type="checkbox" name="{$field}_delete"> Delete {$fieldLabel}<br>
-                        <span>{$data.fieldData.$field}</span>
-                        <br>
-                    </div>
-                </div>
-            {/if}
-            <div class="glm-center"><b>New {$fieldLabel}</b> <input type="file" name="{$field}_new"></div>
-            <div id="glm-galleryImageLarger_image" class="glm-imageDialog"><img src="{$glmPluginMediaUrl}/images/large/{$data.fieldData.$field}"></div>
-            {if $data.fieldFail.$field}<p>{$data.fieldFail.$field}</p>{/if}
-        </div>
-    </div>
-</div>

diff --git a/views/ui/f6/image.html b/views/ui/f6/image.html
new file mode 100644 (file)
index 0000000..81b2887
--- /dev/null
+++ b/views/ui/f6/image.html
@@ -0,0 +1,50 @@
+{*
+    Foundation 6 Image Field
+    All parameters are required.
+    Do not list parameters if they're false. (We're not checking for false)
+    If supplying field data (formData) from the data abstract, supply a
+    name of that in the "field" parameter. Also then certain parameters like
+    "required" will be supplied by the abstract rather than in a parameter in
+    this array.
+
+    {$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,
+        '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
+    ]}
+*}
+<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>
+        <div class="grid-x grid-margin-x">
+            {if $ui.value}
+                <div class="cell small-12 medium-6">
+                    <div class="glm-galleryImage" data-id="{$ui.field}">
+                        <img src="{$glmPluginMediaUrl}/images/small/{$ui.value}">
+                    </div>
+                </div>
+                <div class="cell small-12 medium-6">
+                    <br>
+                    <input type="checkbox" name="{$ui.field}_delete"> Delete {$ui.label}<br>
+                    <span>{$ui.value}</span>
+                    <br>
+                </div>
+            {/if}
+            <div class="cell small-12">
+                <b>New {$ui.label}</b>
+                <label for="{$ui.field}_button" class="button">Browse</label>
+                <input type="file" class="show-for-sr" id="{$ui.field}_button" name="{$ui.field}_new">
+            </div>
+            <div id="glm-galleryImageLarger_image" class="glm-imageDialog"><img src="{$glmPluginMediaUrl}/images/large/{$ui.field}"></div>
+        </div>
+        <div class="cell small-12">
+            {if $ui.dataError}<span class="form-error is-visible">{$ui.dataError}</span>{/if}
+            {if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
+            {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
+        </div>
+    </div>
+</div>

diff --git a/views/ui/f6/multicheckboxes.html b/views/ui/f6/multicheckboxes.html
index 7a1d08c..9f40622 100644 (file)
--- a/views/ui/f6/multicheckboxes.html
+++ b/views/ui/f6/multicheckboxes.html
@@ -10,6 +10,7 @@
     {$ui = [
         'field'         => string   Name of field that holds the data if not using data abstract,
         'label'         => string   Label text for this field,
+        'value'         => string   Value for this field,
         'list'          => array    Array of list key=value pairs value=>label
         'required'      => boolean  True if required,
         'helpText'      => string   Help text for this input,
@@ -33,7 +34,7 @@
             {/foreach}
         {/if}
 
-        {if $ui.dataError}<span class="form-error is-visible">{$ui.dataErrror}</span>{/if}
+        {if $ui.dataError}<span class="form-error is-visible">{$ui.dataError}</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>

diff --git a/views/ui/f6/multiselect.html b/views/ui/f6/multiselect.html
new file mode 100644 (file)
index 0000000..de0ec27
--- /dev/null
+++ b/views/ui/f6/multiselect.html
@@ -0,0 +1,46 @@
+{*
+    Foundation 6 Select Field
+    All parameters are required.
+    Do not list parameters if they're false. (We're not checking for false)
+    If supplying field data (formData) from the data abstract, supply a
+    name of that in the "field" parameter. Also then certain parameters like
+    "required" will be supplied by the abstract rather than in a parameter in
+    this array.
+
+    {$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,
+        'l_label'       => string  Field name to use for the option textNode
+        'l_value'       => string  Field name to use for the option value
+        'l_blank'       => string  Add empty option
+        'l_size'        => integer select size,
+        '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
+    ]}
+*}
+<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>
+        <select
+            id="{$ui.field}"
+            name="{$ui.field}[]"
+            multiple="multiple"
+            size="{$ui.l_size}"
+            {if $ui.required}required{/if} >
+
+            {if $ui.l_blank}<option value=""></option>{/if}
+
+            {foreach $ui.list as $v}
+                <option value="{$v.id}"{if in_array($v.id, $ui.value)} selected{/if}>{$v.name}</option>
+            {/foreach}
+        </select>
+
+        {if isset($ui.dataError)}<span class="form-error is-visible">{$ui.dataError}</span>{/if}
+        {if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
+        {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
+
+    </div>
+</div>

diff --git a/views/ui/f6/select.html b/views/ui/f6/select.html
index 99247be..2e26b10 100644 (file)
--- a/views/ui/f6/select.html
+++ b/views/ui/f6/select.html
@@ -31,13 +31,17 @@
             {if $ui.l_blank}<option value=""></option>{/if}
 
             {foreach $ui.list as $v}
-                <option value="{$v[$ui.l_value]}"{if $ui.value == $v[$ui.l_value]} selected="selected"{/if}>{$v[$ui.l_label]}</option>
+                {if isset($ui.l_value) && isset($ui.l_label)}
+                    <option value="{$v[$ui.l_value]}"{if $ui.value == $v[$ui.l_value]} selected="selected"{/if}>{$v[$ui.l_label]}</option>
+                {else}
+                    <option value="{$v}"{if $ui.value == $v} selected="selected"{/if}>{$v}</option>
+                {/if}
             {/foreach}
         </select>
 
-        {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}
+        {if isset($ui.dataError) && $ui.dataError}<span class="form-error is-visible">{$ui.dataError}</span>{/if}
+        {if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
+        {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
 
     </div>
 </div>

diff --git a/views/ui/f6/text.html b/views/ui/f6/text.html
index c28d3f7..fdabd98 100644 (file)
--- a/views/ui/f6/text.html
+++ b/views/ui/f6/text.html
@@ -22,32 +22,24 @@
     ]}
 *}
 
-{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 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}"
+            {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 isset($ui.dataError) && $ui.dataError}<span class="form-error is-visible">{$ui.dataError}</span>{/if}
+        {if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
+        {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
     </div>
-{else}
-    <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}"
-                {if $ui.pattern}pattern="{$ui.pattern}"{/if}
-                {if $ui.required}required{/if}
-                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.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
-                {if isset($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
-            />
-            {if $ui.dataError}<span class="form-error is-visible">{$ui.dataErrror}</span>{/if}
-            {if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
-            {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
-        </div>
-    </div>
-{/if}
+</div>