From e00c1e37220c1f859866a4de6d684c752389b46f Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Fri, 12 Jul 2019 15:44:59 -0400
Subject: [PATCH] More updates on Foundation setup for ui elements

Remove the grid-x grid-margin-x div wrapper from each element.
Fixing editor issue with the json_decode (wasn't working)
Use smarty array setup instead.
---
 views/ui/f6/checkbox.html    | 42 +++++++++++++++++++---------
 views/ui/f6/editor.html      | 53 +++++++++++++++++-------------------
 views/ui/f6/image.html       | 49 ++++++++++++++++-----------------
 views/ui/f6/multiselect.html | 39 ++++++++++++++------------
 views/ui/f6/select.html      | 38 ++++++++++++--------------
 views/ui/f6/text.html        | 38 ++++++++++++--------------
 6 files changed, 135 insertions(+), 124 deletions(-)

diff --git a/views/ui/f6/checkbox.html b/views/ui/f6/checkbox.html
index 45d53e84..6236f4d7 100644
--- a/views/ui/f6/checkbox.html
+++ b/views/ui/f6/checkbox.html
@@ -8,25 +8,41 @@
         '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,
         'dataError'     => string   Error from data Abstract Class
     ]}
 *}
+<div class="cell small-12">
+    <div class="grid-x grid-margin-x">
+        <div class="cell shrink">
+            <div class="switch">
+                <input
+                    id="{$ui.field}"
+                    name="{$ui.field}"
+                    type="checkbox"
+                    class="switch-input"
+                    {if $ui.required}required{/if}
+                    {if $ui.value} checked{/if}
+                    >
+                <label for="{$ui.field}" class="switch-paddle">
+                    <span class="show-for-sr">{$ui.label}</span>
+                    <span class="switch-active" aria-hidden>{if isset($ui.active)}{$ui.active}{else}Yes{/if}</span>
+                    <span class="switch-inactive" aria-hidden>{if isset($ui.inactive)}{$ui.inactive}{else}No{/if}</span>
+                </label>
+            </div>
 
-<div class="grid-x grid-margin-x">
-    <div class="cell small-12">
-        <input
-            {if $ui.required}required{/if}
-            type="checkbox"
-            id="{$ui.field}"
-            name="{$ui.field}"{if $ui.value} checked{/if}>
-        <label for="{$ui.field}">{$ui.label}</label>
-
-        {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}
+            {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 class="cell auto">
+            <p>
+                <label for="{$ui.field}"> {$ui.label} </label>
+            </p>
+        </div>
     </div>
 </div>
-
diff --git a/views/ui/f6/editor.html b/views/ui/f6/editor.html
index c30a571b..4204c434 100644
--- a/views/ui/f6/editor.html
+++ b/views/ui/f6/editor.html
@@ -13,7 +13,6 @@
         'label'         => string   Label text for this field,
         'height'        => integer  Height in px,
         'media'         => boolean  Enable Media Button,
-        'quicktags'     => boolean  Enable Quicktags,
         'required'      => boolean  True if required,
         'helpText'      => string   Help text for this input,
         'errortext'     => string   Error text that appears when the field doesn't validate,
@@ -21,31 +20,29 @@
     ]}
 *}
 
-<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>
+<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}
+    {else}
+        {$textAreaContent = ''}
+    {/if}
+    {$textAreaName = $ui.field}
+    {if isset($ui.height)} {$height = $ui.height} {else} {$height = 250} {/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}
+    {$settings = [
+        'textarea_name' => $textAreaName,
+        'editor_height' => $height,
+        'media_buttons' => $media_buttons
+    ]}
+    {wp_editor(
+        $textAreaContent,
+        $textAreaName,
+        $settings
+    )}
+    <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>
diff --git a/views/ui/f6/image.html b/views/ui/f6/image.html
index 81b2887f..59bf9c90 100644
--- a/views/ui/f6/image.html
+++ b/views/ui/f6/image.html
@@ -11,40 +11,39 @@
         '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,
+        'button'        => string   Text for the Button
         '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 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>
-            {/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 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">
-            {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}
+            <b>New {$ui.label}</b>
+            <label for="{$ui.field}_button" class="button primary">{if isset($ui.button)}{$ui.button}{else}Browse{/if}</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>
diff --git a/views/ui/f6/multiselect.html b/views/ui/f6/multiselect.html
index de0ec271..790d58db 100644
--- a/views/ui/f6/multiselect.html
+++ b/views/ui/f6/multiselect.html
@@ -21,26 +21,29 @@
         '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} >
+<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}
+        {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}
+        {foreach $ui.list as $k => $v}
+            {if isset($ui.l_value) && isset($ui.l_label)}
+                <option value="{$v[$ui.l_value]}"{if in_array($v[$ui.l_value], $ui.value)} selected="selected"{/if}>{$v[$ui.l_label]}</option>
+            {else}
+                <option value="{$k}"{if in_array($k, $ui.value)} selected="selected"{/if}>{$v}</option>
+            {/if}
+        {/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 ba45c1f3..144d0ddd 100644
--- a/views/ui/f6/select.html
+++ b/views/ui/f6/select.html
@@ -20,28 +20,26 @@
         '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}"
-            {if $ui.required}required{/if} >
+<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}"
+        {if $ui.required}required{/if} >
 
-            {if $ui.l_blank}<option value=""></option>{/if}
+        {if $ui.l_blank}<option value=""></option>{/if}
 
-            {foreach $ui.list as $k => $v}
-                {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="{$k}"{if $ui.value == $k} selected="selected"{/if}>{$v}</option>
-                {/if}
-            {/foreach}
-        </select>
+        {foreach $ui.list as $k => $v}
+            {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="{$k}"{if $ui.value == $k} selected="selected"{/if}>{$v}</option>
+            {/if}
+        {/foreach}
+    </select>
 
-        {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}
+    {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 fdabd98a..99833c57 100644
--- a/views/ui/f6/text.html
+++ b/views/ui/f6/text.html
@@ -22,24 +22,22 @@
     ]}
 *}
 
-<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>
+<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>
-- 
2.17.1