Fixed various narrator related issues

Updated most input element option names to use camelcase.

diff --git a/css/admin.css b/css/admin.css
index 54bbcee..6b56607 100644 (file)
--- a/css/admin.css
+++ b/css/admin.css
@@ -41,6 +41,9 @@
 .fix-margin-bottom-for-inputs {
     margin-bottom: .5rem;
 }
+.glm-usage-admin-wrap .form-error, .glm-usage-admin-wrap .help-text {
+    margin-top: 0px;
+}
 
 
 /*

diff --git a/views/adminServerStatsConfig.html b/views/adminServerStatsConfig.html
index 2f96823..4f981cd 100755 (executable)
--- a/views/adminServerStatsConfig.html
+++ b/views/adminServerStatsConfig.html
@@ -23,25 +23,26 @@
             ]}
             {include file="ui/f6/section-name.html"}
 
-            {* db_name *)
+            {* db_name *}
                 {$fieldData = [
                     'field'         => 'db_name',
                     'label'         => 'Database Name',
                     'placeholder'   => 'Provided by Gaslight Media Engineering',
                     'required'      => true,
-                    'maxwidth'      => 20,
-                    'helptext'      => 'This is a fine message to put here.',
-                    'errortext'     => 'The database name is required for connecting to the usage database.'
+                    'maxWidth'      => 20,
+                    'helpText'      => 'We be here!',
+                    'errorText'     => 'The database name is required for connecting to the usage database.'
                 ]}
                 {include file="ui/f6/text.html"}
 
             {* db_host *}
                 {$fieldData = [
                     'field'         => 'db_host',
-                    'label'         => 'Database Sever Hostname',
+                    'label'         => 'Database Server Hostname',
                     'placeholder'   => 'Provided by Gaslight Media Engineering',
                     'required'      => true,
-                    'maxwidth'      => 20
+                    'helpText'      => 'We be here!',
+                    'maxWidth'      => 20
                 ]}
                 {include file="ui/f6/text.html"}
 
@@ -51,7 +52,7 @@
                     'label'         => 'Database Username',
                     'placeholder'   => 'Provided by Gaslight Media Engineering',
                     'required'      => true,
-                    'maxwidth'      => 20
+                    'maxWidth'      => 20
                 ]}
                 {include file="ui/f6/text.html"}
 
@@ -82,7 +83,8 @@
             {* show_usage *}
                 {$fieldData = [
                     'field'         => 'show_usage',
-                    'label'         => 'Show Data Usage'
+                    'label'         => 'Show Data Usage',
+                    'helpText'      => 'Check this box to have server display website usage information.'
 
                 ]}
                 {include file="ui/f6/checkbox.html"}
@@ -90,7 +92,8 @@
             {* send_usage *}
                 {$fieldData = [
                     'field'         => 'send_usage',
-                    'label'         => 'Automatically Send Usage Notices Monthly'
+                    'label'         => 'Automatically Send Usage Notices Monthly',
+                    'helpText'      => 'More help stuff. Arent you excited?'
                 ]}
                 {include file="ui/f6/checkbox.html"}
 
@@ -98,13 +101,12 @@
                 {$fieldData = [
                     'field'         => 'send_percent',
                     'label'         => '% of Target for Notification',
-                    'placeholder'   => '% of Target',
                     'required'      => true,
                     'min'           => 0,
                     'max'           => 150,
-                    'maxwidth'      => 5,
-                    'helptext'      => 'Send notification to customer contact if at this % of target or higher for usage or disk space.',
-                    'errortext'     => 'Im a fool.'
+                    'maxWidth'      => 3,
+                    'helpText'      => 'Send notification to customer contact if at this % of target or higher for usage or disk space.',
+                    'errorText'     => 'Im a fool.'
                 ]}
                 {include file="ui/f6/number.html"}
 
@@ -141,8 +143,8 @@
                     'required'      => true,
                     'min'           => 0,
                     'max'           => 90,
-                    'maxwidth'      => 5,
-                    'helptext'      => 'Number of days after user accepts the cookie pop-up that it will display again.
+                    'maxWidth'      => 5,
+                    'helpText'      => 'Number of days after user accepts the cookie pop-up that it will display again.
                                     <b>Do not set to a real high number. Consider 10-30 days. Set to 0 to test Cookie Popups.</b>'
                 ]}
                 {include file="ui/f6/number.html"}
@@ -154,37 +156,31 @@
                     'required'      => true,
                     'height'        => 50,
                     'rows'          => 5,
-                    'maxwidth'      => '900px'
+                    'maxWidth'      => '900px',
+                    'helpText'      => 'My Help Text',
+                    'errorText'     => 'Im a fool.'
                 ]}
                 {include file="ui/f6/editor.html"}
 
+            {* SECTION *}
+                {$fieldData = [
+                    'title'         => 'Addional Notices',
+                    'helpText'      => 'These notices are displayed when the user clicks the "Show more" button.'
+                ]}
+                {include file="ui/f6/section-name.html"}
+
+            {* show_cookie_popup *}
+                {$fieldData = [
+                    'field'         => 'show_cookie_popup',
+                    'label'         => 'Show Cookie Pop-Up'
+                ]}
+                {include file="ui/f6/checkbox.html"}
+
 
 
 
 <!--
 
-                <tr>
-                    <th class="glm-required">Initial Cookies Notice Message</th>
-                    <td>
-                        {if $autoInsertDefault != ''}
-                            <div style="border: 1px black solid; margin: 4px; padding: 4px;">
-                                <span class="glm-error">
-                                    NOTE: This field was blank, so the default text is being supplied. - Edit as desired then click "Save Changes".
-                                </span>
-                            </div>
-                        {/if}
-                        {wp_editor(
-                            $cookie_message,
-                            'cookie_message',
-                            json_decode('{
-                                "media_buttons":    false,
-                                "quicktags":        false,
-                                "textarea_name":    "cookie_message",
-                                "editor_height":    200
-                            }', true)
-                        )}
-                    </td>
-                </tr>
                 <tr>
                     <th>Additional Notices</th>
                     <td>These notices are displayed when the user clicks the "Show more" button.

diff --git a/views/ui/f6/checkbox.html b/views/ui/f6/checkbox.html
index 1136f23..8eaa05c 100644 (file)
--- a/views/ui/f6/checkbox.html
+++ b/views/ui/f6/checkbox.html
@@ -5,9 +5,10 @@
     Do not list fields if they're false. (We're not checking for false)
 
     {$fieldData = [
-        'data'          => array(...abstract data goes here...),
-        'field'         => '...field name goes here...',
-        'label'         => '...Field label text goes here...'
+        '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,
+        'helpText'      => string   Help text for this input,
     ]}
 *}
 
@@ -30,17 +31,17 @@
         </div>
     {else}
             <div class="small-12 columns">
-                <div class="fix-margin-bottom-for-inputs">
-                <input
-                    id="{$fieldData.field}_fieldID"
-                    type="checkbox"
-                    name="{$fieldData.field}"
-                    value="{${$fieldData.field}}"
-                    {if isset($fieldData.helptext)}aria-describedby="{$fieldData.field}_HelpText"{/if}
-                />
-                <label class="{if $fieldData['required']} glm-required{/if}">{$fieldData.label}:</label>
-                </div>
-                    {if isset($fieldData.helptext)}<p class="help-text" id="{$fieldData.field}_HelpText">{$fieldData.helptext}</p>{/if}
+                <label for="{$fieldData.field}_FieldID" class="{if $fieldData['required']} glm-required{/if}">
+                    <input
+                        id="{$fieldData.field}_FieldID"
+                        type="checkbox"
+                        name="{$fieldData.field}"
+                        value="{${$fieldData.field}}"
+                        {if isset($fieldData.helpText)}aria-describedby="{$fieldData.field}_HelpText"{/if}
+                    >
+                    {$fieldData.label}:
+                    {if isset($fieldData.helpText)}<p class="help-text" id="{$fieldData.field}_HelpText">{$fieldData.helpText}</p>{/if}
+                </label>
             </div>
     {/if}
 {/if}

diff --git a/views/ui/f6/editor.html b/views/ui/f6/editor.html
index 4598d5c..331ef0b 100644 (file)
--- a/views/ui/f6/editor.html
+++ b/views/ui/f6/editor.html
@@ -13,11 +13,9 @@
         'label'         => string   Label text for this field,
         'placeholder'   => string   Placeholder string,
         'required'      => boolean  True if required,
-        '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,
-        'errtext'       => string   Error text that appears when the field doesn't validate
+        '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
     ]}
 *}
 
@@ -42,7 +40,8 @@
             <div class="small-12 columns">
                 <label class="{if $fieldData.required} glm-required{/if}">{$fieldData.label}:
                     <div
-                        {if isset($fieldData.maxwidth)}style="width: {$fieldData.maxwidth} !important;"{/if}
+                        {if isset($fieldData.helpText)}aria-describedby="{$fieldData.field}_HelpText"{/if}
+                        {if isset($fieldData.maxWidth)}style="width: {$fieldData.maxWidth} !important;"{/if}
                     >
                             {$editorOptions = '
                                 {
@@ -61,8 +60,8 @@
                                 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 class="form-error">{$fieldData.errortext}</span>{/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}
                     </div>
                 </label>
             </div>

diff --git a/views/ui/f6/f6-checkbox.html b/views/ui/f6/f6-checkbox.html
deleted file mode 100644 (file)
index fa79fba..0000000
--- a/views/ui/f6/f6-checkbox.html
+++ /dev/null
@@ -1,13 +0,0 @@
-{* Foundation 6 Checkbox *}
-{* 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">
-        <input type="checkbox" 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>

diff --git a/views/ui/f6/number.html b/views/ui/f6/number.html
index ca13bbc..4d87522 100644 (file)
--- a/views/ui/f6/number.html
+++ b/views/ui/f6/number.html
@@ -12,10 +12,10 @@
         '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,
+        '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,
-        'errtext'       => string   Error text that appears when the field doesn't validate
+        'helpText'      => string   Help text for this input,
+        'errortext'       => string   Error text that appears when the field doesn't validate
     ]}
 *}
 
@@ -38,21 +38,24 @@
         </div>
     {else}
         <div class="small-12 columns">
-            <label for="{$fieldData.field}_fieldID" class="{if $fieldData.required} glm-required{/if}">{$fieldData.label}:
+            <label for="{$fieldData.field}_FieldID" class="{if $fieldData.required} glm-required{/if}">
                 <input
-                    id="{$fieldData.field}_fieldID"
-                    type="number"
+                    id="{$fieldData.field}_FieldID"
+                    type="text"
+                    pattern="number"
                     name="{$fieldData.field}"
                     value="{${$fieldData.field}}"
-                    {if $fieldData['required']}required{/if}
-                    {if isset($fieldData.helptext)}aria-describedby="{$fieldData.field}_HelpText"{/if}
+                    {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}
-                />
-                {if isset($fieldData.helptext)}<p class="help-text" id="{$fieldData.field}_HelpText">{$fieldData.helptext}</p>{/if}
-                {if isset($fieldData.errortext)}<span class="form-error">{$fieldData.errortext}</span>{/if}
+                    {if isset($fieldData.maxWidth)}style="width: {$fieldData.maxWidth}rem !important;"{/if}
+                >
+                {$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>
     {/if}

diff --git a/views/ui/f6/section-name.html b/views/ui/f6/section-name.html
index 5ce8c54..3f3c4f0 100644 (file)
--- a/views/ui/f6/section-name.html
+++ b/views/ui/f6/section-name.html
@@ -3,7 +3,8 @@
     All parameters are required.
 
     {$fieldData = [
-        'title' => 'SECTION TITLE GOES HERE'
+        'title'     => string Section title text,
+        'helpText'  => string Additional text to describe this section
     ]}
 *}
 {if !isset($fieldData.title)}
@@ -17,6 +18,7 @@
     <div class="grid-x">
         <div class="small-12">
             <h3>{$fieldData.title}</h3>
+            {if isset($fieldData.helpText)}<p class="help-text">{$fieldData.helpText}</p>{/if}
         </div>
     </div>
 {/if}
\ No newline at end of file

diff --git a/views/ui/f6/text.html b/views/ui/f6/text.html
index bd8aee2..23bd67d 100644 (file)
--- a/views/ui/f6/text.html
+++ b/views/ui/f6/text.html
@@ -13,10 +13,10 @@
         'label'         => string   Label text for this field,
         'placeholder'   => string   Placeholder string,
         'required'      => boolean  True if required,
-        'maxwidth'      => string   Size of input field using standard style notation ('900px', '15rem', ...),
+        '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,
-        'errtext'       => string   Error text that appears when the field doesn't validate
+        'helpText'      => string   Help text for this input,
+        'errortext'     => string   Error text that appears when the field doesn't validate
     ]}
 *}
 
@@ -38,18 +38,22 @@
             </div>
         </div>
     {else} {* Using simple field *}
-            <div class="small-12 columns">
-                <label class="{if $fieldData.required} glm-required{/if}">{$fieldData.label}:<br>
-                    <input type="text" name="{$fieldData.field}" value="{${$fieldData.field}}"
-                        {if $fieldData.required}required{/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.maxwidth}"{/if}
-                    />
-                    {if isset($fieldData.helptext)}<p class="help-text" id="{$fieldData.field}_HelpText">{$fieldData.helptext}</p>{/if}
-                    {if isset($fieldData.errortext)}<span class="form-error">{$fieldData.errortext}</span>{/if}
-                </label>
-            </div>
+        <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>
     {/if}
 {/if}