From b72e26020a17c805241c06e58a80e716a0704911 Mon Sep 17 00:00:00 2001
From: Steve Sutton <steve@gaslightmedia.com>
Date: Wed, 11 Sep 2019 14:41:25 -0400
Subject: [PATCH] View file updates

Updating ui elements from Chuck's work on serverstats
---
 views/ui/f6/callout.html            |  1 +
 views/ui/f6/checkbox.html           | 10 +++++++-
 views/ui/f6/form-edit-end.html      |  6 +++++
 views/ui/f6/form-edit-start.html    | 30 +++++++++++++++++++++++
 views/ui/f6/form-end.html           |  5 +++-
 views/ui/f6/form-summary-end.html   |  6 +++++
 views/ui/f6/form-summary-start.html | 30 +++++++++++++++++++++++
 views/ui/f6/grid-end.html           | 10 ++++++--
 views/ui/f6/grid-start.html         | 28 ++++++++++++++++++----
 views/ui/f6/multiselect.html        |  4 +++-
 views/ui/f6/number.html             |  3 ++-
 views/ui/f6/radioButtons.html       | 37 +++++++++++++++++++++++++++++
 views/ui/f6/section-start.html      | 20 +++++++++++-----
 views/ui/f6/sub-section-end.html    |  8 +++++++
 views/ui/f6/sub-section-start.html  | 29 ++++++++++++++++++++++
 views/ui/f6/submit.html             |  2 +-
 views/ui/f6/text.html               | 17 +++++++++----
 17 files changed, 225 insertions(+), 21 deletions(-)
 create mode 100644 views/ui/f6/form-edit-end.html
 create mode 100644 views/ui/f6/form-edit-start.html
 create mode 100644 views/ui/f6/form-summary-end.html
 create mode 100644 views/ui/f6/form-summary-start.html
 create mode 100644 views/ui/f6/radioButtons.html
 create mode 100644 views/ui/f6/sub-section-end.html
 create mode 100644 views/ui/f6/sub-section-start.html

diff --git a/views/ui/f6/callout.html b/views/ui/f6/callout.html
index ed1c4465..a28b94db 100644
--- a/views/ui/f6/callout.html
+++ b/views/ui/f6/callout.html
@@ -15,3 +15,4 @@
         <p>{$ui.label}</p>
     </div>
 {/if}
+
diff --git a/views/ui/f6/checkbox.html b/views/ui/f6/checkbox.html
index af36c45f..28d050bd 100644
--- a/views/ui/f6/checkbox.html
+++ b/views/ui/f6/checkbox.html
@@ -17,7 +17,15 @@
     <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 !empty($ui.value)} checked{/if}{if !empty($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}
+                    onChange="glmFormDataChangesPending = true;"
+                >
                 <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>
diff --git a/views/ui/f6/form-edit-end.html b/views/ui/f6/form-edit-end.html
new file mode 100644
index 00000000..6a368c45
--- /dev/null
+++ b/views/ui/f6/form-edit-end.html
@@ -0,0 +1,6 @@
+{*
+    Foundation 6 UI - Form Edit End
+
+*}
+    </div>
+</div>
diff --git a/views/ui/f6/form-edit-start.html b/views/ui/f6/form-edit-start.html
new file mode 100644
index 00000000..ef15fca4
--- /dev/null
+++ b/views/ui/f6/form-edit-start.html
@@ -0,0 +1,30 @@
+{*
+    Foundation 6 UI - Form Edit Start
+
+    Starts the edit version of the form. There's also a Form Summary Start which starts a summary of the data.
+    These two are used together to let the user toggle between a summary of the data and a form to edit the data.
+
+    The area between "Form Edit Start" and "Form Edit End" is intended to be a collection of
+    desired Foundation 6 based HTML that will display actual form.
+
+    {$ui = [
+        'id'        => string   required    Form ID - Use the same ID for the form summary and edit sections,
+        title'      => string               Optional title
+    ]}
+*}
+<div id="{$ui.id}_edit" class="cell small-12 large-{$glm_f6_ui_wrapsize}">
+    <div class="grid-x">
+        <div class="cell small-12 glm-f6-ui-form-edit-start">
+            <button id="{$ui.id}_summary_button" type="button" class="button">Summary Only</button>
+            {if !empty($ui.title)}<span class="glm-f6-ui-form-edit-title">{$ui.title}</span]>{/if}
+        </div>
+        <script>
+            jQuery(document).ready(function($) {
+                $('#{$ui.id}_edit').hide();
+                $('#{$ui.id}_summary_button').click(function(){
+                    $('#{$ui.id}_edit').fadeOut('slow', function() {
+                        $('#{$ui.id}_summary').fadeIn('slow');
+                    });
+                });
+            });
+        </script>
diff --git a/views/ui/f6/form-end.html b/views/ui/f6/form-end.html
index 323f6ebb..608a1a25 100644
--- a/views/ui/f6/form-end.html
+++ b/views/ui/f6/form-end.html
@@ -1,2 +1,5 @@
-{* Form End *}
+{*
+    Foundation 6 UI - Form End
+
+*}
 </form>
diff --git a/views/ui/f6/form-summary-end.html b/views/ui/f6/form-summary-end.html
new file mode 100644
index 00000000..6a92b470
--- /dev/null
+++ b/views/ui/f6/form-summary-end.html
@@ -0,0 +1,6 @@
+{*
+    Foundation 6 UI - Form Summary End
+
+*}
+    </div>
+</div>
diff --git a/views/ui/f6/form-summary-start.html b/views/ui/f6/form-summary-start.html
new file mode 100644
index 00000000..2e4a216c
--- /dev/null
+++ b/views/ui/f6/form-summary-start.html
@@ -0,0 +1,30 @@
+{*
+    Foundation 6 UI - Form Summary Start
+
+    Starts the summary only version of the form. There's also a Form Edit Start which starts the actual edit and submit form.
+    These two are used together to let the user toggle between a summary of the data and a form to edit the data.
+
+    The area between "Form Summary Start" and "Form Summary End" is intended to be a single UI element that contains any
+    desired Foundation 6 based HTML that will a text only summary (no form fields) summry of the current form data.
+
+    {$ui = [
+        'id'        => string   required    Form id
+        'title'     => string               Optional title
+    ]}
+*}
+<div id="{$ui.id}_summary" class="cell small-12 large-{$glm_f6_ui_wrapsize}" styl="display: none;">
+    <div class="grid-x">
+        <div class="cell small-12 glm-f6-ui-form-summary-start">
+            <button id="{$ui.id}_edit_button" type="button" class="button">Edit</button>
+            {if !empty($ui.title)}<span class="glm-f6-ui-form-summary-title">{$ui.title}</span]>{/if}
+        </div>
+        <script>
+            jQuery(document).ready(function($){
+                $('#{$ui.id}_summary').show();
+                $('#{$ui.id}_edit_button').click(function(){
+                    $('#{$ui.id}_summary').fadeOut('slow', function() {
+                        $('#{$ui.id}_edit').fadeIn('slow');
+                    });
+                });
+            });
+        </script>
diff --git a/views/ui/f6/grid-end.html b/views/ui/f6/grid-end.html
index 7b1f70f6..1de0587d 100644
--- a/views/ui/f6/grid-end.html
+++ b/views/ui/f6/grid-end.html
@@ -1,5 +1,11 @@
 {*
-    Foundation 6 - Grid End
-    </div>
+    Foundation 6 UI - Grid End
+
+    {$ui = [
+        'noFoundationInit'  => boolean  Do not init Foundation 6
+                Only the last "grid-end" should do the init. If you have multiple "grid-end" then
+                be sure to set this value to true for all but the last one.
+    ]}
+
 *}
 </div>
diff --git a/views/ui/f6/grid-start.html b/views/ui/f6/grid-start.html
index 5b2b823f..636e19e4 100644
--- a/views/ui/f6/grid-start.html
+++ b/views/ui/f6/grid-start.html
@@ -2,7 +2,7 @@
     Foundation 6 UI - Grid Start
 
     {$ui = [
-        'nowrap'            => string   True if no sections should wrap to the right,
+        'nowrap'            => boolean  True if no sections should wrap to the right,
         'backgroundColor'   => string   Background color of overall grid area,
         'sectionColor'      => string   background color of sections
     ]}
@@ -34,6 +34,25 @@
     .glm-f6-ui-section-start {
         background-color: {$glm_f6_ui_section_color} !important;
     }
+    .glm-f6-ui-section-start-nobackgroundcolor {
+        background-color: transparent !important;
+    }
+    .glm-f6-ui-form-summary-start {
+        margin-bottom: 1rem;
+    }
+    .glm-f6-ui-form-edit-start {
+        margin-bottom: 1rem;
+    }
+    .glm-f6-ui-form-summary-title {
+        margin-left: 1rem;
+        font-size: 1.1rem;
+        font-weight: bold;
+    }
+    .glm-f6-ui-form-edit-title {
+        margin-left: 1rem;
+        font-size: 1.1rem;
+        font-weight: bold;
+    }
     .glm-f6-ui-field {
         margin-bottom: 1rem !important;
     }
@@ -78,8 +97,9 @@
     .glm-f6-ui-text-line {
         margin-bottom: 1rem !important;
     }
+    .glm-f6-ui-nowrap {
+        whitespace: nowrap;
+    }
 </style>
-<div class="callout grid-container glm-foundation-6-ui">
+<div class="grid-container callout grid-margin-x glm-foundation-6-ui">
     {* <div class="grid-x grid-margin-x"> *}
-
-
diff --git a/views/ui/f6/multiselect.html b/views/ui/f6/multiselect.html
index a38d0e6e..71c5e79d 100644
--- a/views/ui/f6/multiselect.html
+++ b/views/ui/f6/multiselect.html
@@ -28,7 +28,9 @@
         name="{$ui.field}[]"
         multiple="multiple"
         size="{$ui.l_size}"
-        {if $ui.required}required{/if} >
+        {if $ui.required}required{/if}
+        onChange="glmFormDataChangesPending = true;"
+        >
 
         {if $ui.l_blank}<option value=""></option>{/if}
 
diff --git a/views/ui/f6/number.html b/views/ui/f6/number.html
index 695d84c6..9b10d89d 100644
--- a/views/ui/f6/number.html
+++ b/views/ui/f6/number.html
@@ -71,6 +71,7 @@
                     {if isset($ui.max)}max="{$ui.max}"{/if}
                     {if !empty($ui.step)}step="{$ui.step}"{/if}
                     style="width: {$ui.width}rem;"
+                    onChange="glmFormDataChangesPending = true;"
                 >
             </div>
             <div class="cell auto glm-f6-ui-label-container-right">
@@ -85,4 +86,4 @@
             </div>
         </div>
     {/if}
-</div>
\ No newline at end of file
+</div>
diff --git a/views/ui/f6/radioButtons.html b/views/ui/f6/radioButtons.html
new file mode 100644
index 00000000..4a4c0dd4
--- /dev/null
+++ b/views/ui/f6/radioButtons.html
@@ -0,0 +1,37 @@
+{*
+    Foundation 6 Radio Buttons Field
+
+    {$ui = [
+        'field'         => string   Name of field,
+        'label'         => string   Label text for this field,
+        'value'         => string   Value for this field,
+        'default'       => string   Default value - Must match a key in "list"
+        'list'          => array    Array of list 'key'=>'Option name' pairs
+        '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,
+        'noWrap'        => boolean  True if options should not be on separate lines
+    ]}
+*}
+{if !empty($ui.default)}{$thisValue = $ui.default}{/if}
+{if !empty($ui.value)}{$thisValue = $ui.value}{/if}
+<div class="cell small-12">
+    <label>{$ui.label} {$ui.default}</label>
+    {if isset($ui.list) && $ui.list}
+        {foreach $ui.list as $checkbox => $checkboxLabel}
+            <input
+                type="radio"
+                id="{$checkbox}"
+                name="{$ui.field}"
+                value="{$checkbox}"
+                {if $checkbox == $thisValue}checked{/if} />
+            <label class="{if !empty($ui.required)}glm-required{/if}">{$checkboxLabel}</label>
+            {if empty($ui.noWrap)}<br>{/if}
+        {/foreach}
+    {/if}
+    {if !empty($ui.dataError)}<span class="form-error is-visible">{$ui.dataError}</span>{/if}
+    {if !empty($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
+    {if !empty($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
+    <br>&nbsp;</br>
+</div>
diff --git a/views/ui/f6/section-start.html b/views/ui/f6/section-start.html
index 7445ff85..948d8bfa 100644
--- a/views/ui/f6/section-start.html
+++ b/views/ui/f6/section-start.html
@@ -1,24 +1,32 @@
 {*
-    Foundation 6 UI - Form Section Start
+    Foundation 6 UI - Section Start
 
     {$ui = [
         'title'     => string Section title text,
+        'wrapSize'  => integer Override width of subsection in columns, 1 to 12 only.,
+        'callout'   => boolean Use callout background - default true - set to false for no callout or background color
         'helpText'  => string Additional text to describe this section,
-        'tip'       => String to display when hover over question mark on right
+        'tip'       => string  String to display when hover over question mark on right
     ]}
 *}
-<div class="cell small-12 large-{$glm_f6_ui_wrapsize}">
+{$glm_f6_ui_section_wrapsize = {$glm_f6_ui_wrapsize} scope="global"}
+{if isset($ui.wrapSize) && $ui.wrapSize}
+    {$glm_f6_ui_section_wrapsize = $ui.wrapSize scope="global"}
+{/if}
+<div class="cell small-12 large-{$glm_f6_ui_section_wrapsize}">
     <div class="grid-x grid-margin-x glm-f6-ui-section">
         {if !isset($ui.title)}
             <span class="glm-required">Field Error: Required field information not supplied!</span>
         {else}
             <div class="cell small-12 glm-f6-ui-section-title">
+                <h3>
+                    <span style="padding-right: 1rem;">{$ui.title}</span>
                 {if isset($ui.tip)}
-                    <span style="float:right;" data-tooltip title="{$ui.tip}">?</span>
+                        <span data-tooltip title="{$ui.tip}" style="font-size: .7rem;"> ?</span>
                 {/if}
-                <h3>{$ui.title}</h3>
+                </h3>
                 {if isset($ui.helpText)}<p class="help-text">{$ui.helpText}</p>{/if}
             </div>
         {/if}
-            <div class="cell small-12 callout glm-f6-ui-section-start">
+            <div class="cell small-12 {if !isset($ui.callout) || $ui.callout}callout  glm-f6-ui-section-start{else}  glm-f6-ui-section-start-nobackgroundcolor{/if}">
                 <div class="grid-x grid-margin-x">
diff --git a/views/ui/f6/sub-section-end.html b/views/ui/f6/sub-section-end.html
new file mode 100644
index 00000000..685ab800
--- /dev/null
+++ b/views/ui/f6/sub-section-end.html
@@ -0,0 +1,8 @@
+{*
+    Foundation 6 UI - Form Sub-Section End
+    No parameters are needed for Sub-Section-End
+*}
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/views/ui/f6/sub-section-start.html b/views/ui/f6/sub-section-start.html
new file mode 100644
index 00000000..5eb4d76b
--- /dev/null
+++ b/views/ui/f6/sub-section-start.html
@@ -0,0 +1,29 @@
+{*
+    Foundation 6 UI - Form Sub-Section Start
+
+    {$ui = [
+        'title'     => string  Sub-Section title text,
+        'wrapSize'  => integer Width of subsection in columns, 1 to 12 only.
+        'helpText'  => string  Additional text to describe this sub-section,
+        'tip'       => string  String to display when hover over question mark on right
+    ]}
+*}
+{$glm_f6_ui_subsection_wrapsize = 12 scope="global"}
+{if isset($ui.wrapSize) && $ui.wrapSize}
+    {$glm_f6_ui_subsection_wrapsize = $ui.wrapSize scope="global"}
+{/if}
+<div class="cell small-12 large-{$glm_f6_ui_subsection_wrapsize}">
+    <div class="grid-x grid-margin-x glm-f6-ui-subsection">
+        {if !isset($ui.title)}
+            <span class="glm-required">Field Error: Required field information not supplied!</span>
+        {else}
+            <div class="cell small-12 glm-f6-ui-subsection-title">
+                {if isset($ui.tip)}
+                    <span style="float:right;" data-tooltip title="{$ui.tip}">?</span>
+                {/if}
+                <h3>{$ui.title}</h3>
+                {if isset($ui.helpText)}<p class="help-text">{$ui.helpText}</p>{/if}
+            </div>
+        {/if}
+            <div class="cell small-12 glm-f6-ui-subsection-start">
+                <div class="grid-x grid-margin-x">
diff --git a/views/ui/f6/submit.html b/views/ui/f6/submit.html
index ce778c6a..7b9ce679 100644
--- a/views/ui/f6/submit.html
+++ b/views/ui/f6/submit.html
@@ -22,7 +22,7 @@
     <button
         {if !empty($ui.id)}id="{$ui.id}"{/if}
         {if !empty($ui.submit)}type="submit"{/if}
-        class="button {$ui.class|default:'primary'}{if !empty($ui.small)} button-small{/if}"
+        class="glm-form-submit-button button {$ui.class|default:'primary'}{if !empty($ui.small)} button-small{/if}"
         >
         {$ui.label}
     </button>
diff --git a/views/ui/f6/text.html b/views/ui/f6/text.html
index 65382d7f..91791828 100644
--- a/views/ui/f6/text.html
+++ b/views/ui/f6/text.html
@@ -11,7 +11,8 @@
         'pattern'     => string             Pattern attribute ( number, etc. )
         'placeholder' => string             Placeholder string,
         'required'    => boolean            True if required,
-        'maxWidth'    => string             Size of input field using standard style notation ('900px', '15rem', ...),
+        'wrapSize'      => integer          Width of column, 1 to 12 only.
+        'maxWidth'      => string           Size of input field using standard style notation ('900px', '15rem', '95%', ...),
         '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,
@@ -19,9 +20,14 @@
         'tip'         => string             String to display when hover over question mark on right
         'class'       => string             Additional Classes for the main cell div
         'inputClass'  => string             Additional Classes for the input
+        'default'     => string             Default text if none provided
     ]}
 *}
-<div class="cell small-12 glm-f6-ui-field {$ui.class|default:''}">
+{$glm_f6_ui_text_wrapsize = 12 scope="global"}
+{if isset($ui.wrapSize) && $ui.wrapSize}
+    {$glm_f6_ui_text_wrapsize = $ui.wrapSize scope="global"}
+{/if}
+<div class="cell small-12 large-{$glm_f6_ui_text_wrapsize} glm-f6-ui-field {$ui.class|default:''}">
     {if (!isset($ui.value) && !isset($ui.field)) || !isset($ui.label)}
         <span class="glm-required">Field Error: Required field information not supplied!</span>
     {else}
@@ -30,7 +36,7 @@
                 {if isset($ui.tip)}
                     <span style="float:right;" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" title="{$ui.tip}">?</span>
                 {/if}
-                <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-f6-ui-field-label">{$ui.label}</label>
+                <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">
                 <input
@@ -38,7 +44,7 @@
                     type="{$ui.type|default:'text'}"
                     id="{$ui.field}"
                     name="{$ui.field}"
-                    value="{$ui.value|escape}"
+                    value="{if empty($ui.value) && !empty($ui.default)}{$ui.default}{else}{$ui.value|escape}{/if}"
                     {if !empty($ui.pattern)}pattern="{$ui.pattern}"{/if}
                     {if !empty($ui.required)}required{/if}
                     {if !empty($ui.placeholder)}placeholder="{$ui.placeholder}"{/if}
@@ -46,6 +52,7 @@
                     {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}
+                    onChange="glmFormDataChangesPending = true;"
                 />
             </div>
             <div class="cell small-12 glm-f6-ui-field-messages">
@@ -56,3 +63,5 @@
         </div>
     {/if}
 </div>
+
+
-- 
2.17.1