Updating UI snippets and other work
authorChuck Scott <cscott@gaslightmedia.com>
Thu, 25 Jul 2019 18:56:38 +0000 (14:56 -0400)
committerChuck Scott <cscott@gaslightmedia.com>
Thu, 25 Jul 2019 18:56:38 +0000 (14:56 -0400)
Merged changes in the UI snippets in the main member plugin to this plugin where appropriate.
Made minor fixes and changes to certain UI snippets.
Fixed problems with usage and configure admin pages and forms.

22 files changed:
index.php
models/adminServerStatsConfig.php
models/frontCookiePopUp.php
views/adminServerStats.html
views/adminServerStatsConfig.html
views/ui/f6/bitmap.html [new file with mode: 0644]
views/ui/f6/callout.html [new file with mode: 0644]
views/ui/f6/checkbox.html
views/ui/f6/form-start.html
views/ui/f6/grid-end.html
views/ui/f6/grid-start.html
views/ui/f6/image.html
views/ui/f6/miscContainer-end.html
views/ui/f6/multicheckboxes.html
views/ui/f6/multiselect.html
views/ui/f6/number.html
views/ui/f6/pagination.html [new file with mode: 0644]
views/ui/f6/section-start.html
views/ui/f6/select.html
views/ui/f6/submit.html
views/ui/f6/test.tpl [new file with mode: 0644]
views/ui/f6/text.html

index 9e5bcc4..8f4b6da 100755 (executable)
--- a/index.php
+++ b/index.php
@@ -106,6 +106,7 @@ function glmServerStatsScripts()
             GLM_SERVERSTATS_PLUGIN_VERSION,
             true
             );
+    wp_enqueue_script('glm-usage-foundation6-js', false, array('jquery'), false, true);
     wp_register_style(
             'glm-usage-foundation6-css',
             GLM_SERVERSTATS_PLUGIN_URL . 'css/foundation-6.min.css',
@@ -114,7 +115,6 @@ function glmServerStatsScripts()
             );
     wp_enqueue_style('glm-usage-foundation6-css');
 
-
     wp_enqueue_style('jquery-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css');
 //    wp_enqueue_style('glm-server-stats-admin-css', GLM_SERVERSTATS_PLUGIN_CSS_URL.'/admin.css');
 
index 357c9cd..5e3749e 100755 (executable)
@@ -120,7 +120,7 @@ class adminServerStatsConfig extends glmServerStatsBandwidthSupport
                 .'required to provide you with a consistent user experience. We don\'t store '
                 .'personally identifying or other sensitive information in these Cookies and '
                 .'these Cookies are erased when you close your Web Browser unless otherwise '
-                .'stated when you click "Show more".</p><p>If you\'re on a public computer,'
+                .'stated when you click "Show more".</p><p>If you\'re on a public computer, '
                 .'be sure to close all Web Browsers when you\'re done!</p>';
             $autoInsertDefault = true;
         }
index efba246..562c69d 100755 (executable)
@@ -101,10 +101,10 @@ $serverstatsConfig = get_option(GLM_SERVERSTATS_PLUGIN_CONFIG_OPTION);
         <p>
             <b>LOGGED IN USERS:</b> We don't store passwords you use to log in as plain text, instead they're encrypted
             before being stored in our systems. When you enter that password again to log in, we encrypt that and and
-            match it to the encrypted password that had been stored. There is no way to decrypt the stored passwords.
-            Still, you should try to avoid using the same password for everything you log into, should not make those
-            passwords easily accessible to anyone else, and you should always use more complex passwords that don't
-            include words or names people would associate with you.
+            match it to the encrypted password that had been stored. There is no way to decrypt the stored passwords,
+            but it may be possilbe for others to guess simple passwords. You should always use more complex passwords
+            that don't include words or names people would associate with you. You should also try to avoid using the
+            same password for everything you log into and should not make those passwords easily accessible to anyone else.
         </p>
 <?php } ?>
 <?php if ($serverstatsConfig['cookie_opt_forms']) { ?>
index e0d04e5..ca6425e 100755 (executable)
 
 {else}
 
-    <h1>
-        Gaslight Media Server Usage
-    </h1>
-
     {if !$haveStats}
         <h3 class="glm-error">This application has not been configured. Please ask Gaslight Media this for your Website.</h3>
         <p><b>Error:</b> {$connectError}</p>
         {if apply_filters('glm-serverstats-is-provider', false)}
             <div class="usage-section">Service Provider Section</div>
 
-            {* Form Start *}
-            {$ui = [
-                    'action'    => "{$thisUrl}?page={$thisPage}&selected_site={$selectedSite}",
-                    'method'    => 'POST',
-                    'validate'  => true,
-                    'validateFocusMsg' => true
-                ]}
-                {include file="ui/f6/form-start.html"}
-
-                <input type="hidden" name="option" value="update_site">
-                <input type="hidden" name="site_sort" value="$site_sort">
-                <input type="hidden" name="selected_site" value="{$selectedSite}">
 
                 {* Grid Start *}
                 {$ui = [
 
                         {* Misc Container Start *}
                         {include file="ui/f6/miscContainer-start.html"}
-
-                            <span class="sortByTitle">Sort By: </span>
-                            <input type="radio" name="site_sort" value="site_name" {if $site_sort == 'site_name'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=site_name&selected_site={$selectedSite}';">Site Name
-                            <span class="sortBy">Traffic:</span>
-                            <input type="radio" name="site_sort" value="data_total" {if $site_sort == 'data_total'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=data_total&selected_site={$selectedSite}';">Total for Month&nbsp;&nbsp;
-                            <input type="radio" name="site_sort" value="target_percent" {if $site_sort == 'target_percent'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=target_percent&selected_site={$selectedSite}';">Percent of target&nbsp;&nbsp;
-                            <span class="sortBy">Storage:</span>
-                            <input type="radio" name="site_sort" value="storage" {if $site_sort == 'storage'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=storage&selected_site={$selectedSite}';">Maximum for Month&nbsp;&nbsp;
-                            <input type="radio" name="site_sort" value="disk_target_percent" {if $site_sort == 'disk_target_percent'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=disk_target_percent&selected_site={$selectedSite}';">Percent of target&nbsp;&nbsp;
-                            <div class="pickContainer">
-                                <pre class="">                                                   ----------------- Traffic -------------   --------------- Storage --------------</pre>
-                                <pre class="pseudoPickTitles">Website                                            Last Month       Target     % of Target   Last Month      Target     % of Target</pre>
-                                <div class="pseudoPick">
-                                    {foreach $websites as $site}
-                                        <pre class="pseudoPickOption"></span>{if $site.name == $selectedSite}<a name="selectedSite"></a>{/if}<a href="{$thisUrl}?page={$thisPage}&selected_site={$site.name}&site_id={$site.id}&site_sort={$site_sort}" class="pseudoPickOption" {if $site.name == $selectedSite}onClick="return false;"{/if}><span{if $site.name == $selectedSite} style="background-color: LightGray;"{/if}>{$site.name|string_format:"%-50s"} {$site.data_total|string_format:"%6.1f"} GB   {$site.target|string_format:"%8.1f"} GB     <span {if $site.target_percent > $threshold}style="color: red;"{/if}>{$site.target_percent|string_format:"%6.0f"}%</span>      {$site.storage|string_format:"%6.1f"} GB   {$site.disk_target|string_format:"%8.1f"} GB      <span {if $site.disk_target_percent > $threshold}style="color: red;"{/if}>{$site.disk_target_percent|string_format:"%6.0f"}%</span></span></a></pre>
-                                    {/foreach}
+                        
+                            {* Form Start *}
+                            {$ui = [
+                                    'action'    => "{$thisUrl}?page={$thisPage}&selected_site={$selectedSite}",
+                                    'method'    => 'POST',
+                                    'validate'  => true,
+                                    'validateFocusMsg' => true
+                                ]}
+                                {include file="ui/f6/form-start.html"}
+                        
+
+                                <span class="sortByTitle">Sort By: </span>
+                                <input type="radio" name="site_sort" value="site_name" {if $site_sort == 'site_name'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=site_name&selected_site={$selectedSite}';">Site Name
+                                <span class="sortBy">Traffic:</span>
+                                <input type="radio" name="site_sort" value="data_total" {if $site_sort == 'data_total'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=data_total&selected_site={$selectedSite}';">Total for Month&nbsp;&nbsp;
+                                <input type="radio" name="site_sort" value="target_percent" {if $site_sort == 'target_percent'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=target_percent&selected_site={$selectedSite}';">Percent of target&nbsp;&nbsp;
+                                <span class="sortBy">Storage:</span>
+                                <input type="radio" name="site_sort" value="storage" {if $site_sort == 'storage'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=storage&selected_site={$selectedSite}';">Maximum for Month&nbsp;&nbsp;
+                                <input type="radio" name="site_sort" value="disk_target_percent" {if $site_sort == 'disk_target_percent'} checked="checked"{/if} onClick="location.href='{$thisUrl}?page={$thisPage}&site_sort=disk_target_percent&selected_site={$selectedSite}';">Percent of target&nbsp;&nbsp;
+                                <div class="pickContainer">
+                                    <pre class="">                                                   ----------------- Traffic -------------   --------------- Storage --------------</pre>
+                                    <pre class="pseudoPickTitles">Website                                            Last Month       Target     % of Target   Last Month      Target     % of Target</pre>
+                                    <div class="pseudoPick">
+                                        {foreach $websites as $site}
+                                            <pre class="pseudoPickOption"></span>{if $site.name == $selectedSite}<a name="selectedSite"></a>{/if}<a href="{$thisUrl}?page={$thisPage}&selected_site={$site.name}&site_id={$site.id}&site_sort={$site_sort}" class="pseudoPickOption" {if $site.name == $selectedSite}onClick="return false;"{/if}><span{if $site.name == $selectedSite} style="background-color: LightGray;"{/if}>{$site.name|string_format:"%-50s"} {$site.data_total|string_format:"%6.1f"} GB   {$site.target|string_format:"%8.1f"} GB     <span {if $site.target_percent > $threshold}style="color: red;"{/if}>{$site.target_percent|string_format:"%6.0f"}%</span>      {$site.storage|string_format:"%6.1f"} GB   {$site.disk_target|string_format:"%8.1f"} GB      <span {if $site.disk_target_percent > $threshold}style="color: red;"{/if}>{$site.disk_target_percent|string_format:"%6.0f"}%</span></span></a></pre>
+                                        {/foreach}
+                                    </div>
+                                    <p>Click on a site above to display settings and charts.</p>
+                                    <hr>
                                 </div>
-                                <p>Click on a site above to display settings and charts.</p>
-                                <hr>
-                            </div>
-
-                            {if $selectedSite}
-
-                                <div>
-                                    <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}" target="usageEmail" class="button button-secondary">Send usage E-mail for site selected above</a>
-                                    &nbsp;&nbsp;<a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}&display_only=true" target="usageEmail" class="button button-secondary">Display usage E-mail for site selected above</a>
-                                </div>
-
-                            {/if}
+    
+                                {if $selectedSite}
+    
+                                    <div>
+                                        <a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}" target="usageEmail" class="button button-secondary">Send usage E-mail for site selected above</a>
+                                        &nbsp;&nbsp;<a href="{$ajaxUrl}?action=glm_server_stats&glm_action=ajaxSendUsageReport&selected_site={$selectedSite}&display_only=true" target="usageEmail" class="button button-secondary">Display usage E-mail for site selected above</a>
+                                    </div>
+    
+                                {/if}
+                                
+                            {include file="ui/f6/form-end.html"}
 
                         {include file="ui/f6/miscContainer-end.html"}
 
                     {include file="ui/f6/section-end.html"}
+                                    
+                {include file="ui/f6/grid-end.html"}
 
-                    {* Section Start *}
+                {* Form Start *}
+                {$ui = [
+                        'action'    => "{$thisUrl}?page={$thisPage}&selected_site={$selectedSite}",
+                        'method'    => 'POST',
+                        'validate'  => true,
+                        'validateFocusMsg' => true
+                    ]}
+                    {include file="ui/f6/form-start.html"}
+                
+                    <input type="hidden" name="option" value="update_site">
+                    <input type="hidden" name="site_sort" value="$site_sort">
+                    <input type="hidden" name="selected_site" value="{$selectedSite}">
+                                 
+                    {* Grid Start *}
                     {$ui = [
-                        'title'     => 'Settings for Selected Site'
+                        'sectionColor'      => '#ffE',
+                        'nowrap'            => true
                     ]}
-                    {include file="ui/f6/section-start.html"}
-
-                        {* target *}
+                    {include file="ui/f6/grid-start.html"}     
+                    
+                        {* Section Start *}
                         {$ui = [
-                            'field'         => 'target',
-                            'value'         => {$settings.target|string_format:"%.1f"},
-                            'label'         => 'Monthly Traffic Target',
-                            'required'      => true,
-                            'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
+                            'title'     => 'Settings for Selected Site'
                         ]}
-                        {include file="ui/f6/text.html"}
-
-                        {* disk_target *}
+                        {include file="ui/f6/section-start.html"}
+    
+                            {* target *}
+                            {$ui = [
+                                'field'         => 'target',
+                                'value'         => {$settings.target|string_format:"%.1f"},
+                                'label'         => 'Monthly Traffic Target',
+                                'required'      => true,
+                                'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
+                            ]}
+                            {include file="ui/f6/text.html"}
+    
+                            {* disk_target *}
+                            {$ui = [
+                                'field'         => 'disk_target',
+                                'value'         => {$settings.disk_target|string_format:"%.1f"},
+                                'label'         => 'Disk Space Used Target',
+                                'required'      => true,
+                                'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
+                            ]}
+                            {include file="ui/f6/text.html"}
+    
+                            {* cust_contact *}
+                            {$ui = [
+                                'field'         => 'cust_contact',
+                                'value'         => {$settings.cust_contact},
+                                'label'         => 'Customer Contact E-Mail',
+                                'required'      => true
+                            ]}
+                            {include file="ui/f6/text.html"}
+    
+                        {include file="ui/f6/section-end.html"}
+    
+                        {* Section Start *}
                         {$ui = [
-                            'field'         => 'disk_target',
-                            'value'         => {$settings.disk_target|string_format:"%.1f"},
-                            'label'         => 'Disk Space Used Target',
-                            'required'      => true,
-                            'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
+                            'title'     => 'Global Settings'
                         ]}
-                        {include file="ui/f6/text.html"}
-
-                        {* cust_contact *}
+                        {include file="ui/f6/section-start.html"}
+    
+                            {* Reporting Threshold *}
+                            {$ui = [
+                                'field'         => 'threshold',
+                                'value'         => {$threshold|string_format:"%.0f"},
+                                'label'         => 'Reporting Threshold %',
+                                'required'      => true,
+                                'min'           => 0,
+                                'max'           => 200,
+                                'width'         => 5,
+                                'helpText'      => 'Percentage above which target percentage should be highlighted in red and site contacts will receive E-Mail reports.'
+                            ]}
+                            {include file="ui/f6/number.html"}
+    
+                        {include file="ui/f6/section-end.html"}
+    
+                        {* Submit Button *}
                         {$ui = [
-                            'field'         => 'cust_contact',
-                            'value'         => {$settings.cust_contact},
-                            'label'         => 'Customer Contact E-Mail',
-                            'required'      => true
+                            'class'     => 'primary',
+                            'label'     => 'Update Site Settings',
+                            'submit'    => true
                         ]}
-                        {include file="ui/f6/text.html"}
+                        {include file="ui/f6/submit.html"}
 
-                    {include file="ui/f6/section-end.html"}
+                    {include file="ui/f6/grid-end.html"}
 
-                    {* Section Start *}
-                    {$ui = [
-                        'title'     => 'Global Settings'
-                    ]}
-                    {include file="ui/f6/section-start.html"}
-
-                        {* Reporting Threshold *}
-                        {$ui = [
-                            'field'         => 'threshold',
-                            'value'         => {$threshold|string_format:"%.0f"},
-                            'label'         => 'Reporting Threshold %',
-                            'required'      => true,
-                            'min'           => 0,
-                            'max'           => 200,
-                            'width'         => 5,
-                            'helpText'      => 'Percentage above which target percentage should be highlighted in red and site contacts will receive E-Mail reports.'
-                        ]}
-                        {include file="ui/f6/number.html"}
-
-                    {include file="ui/f6/section-end.html"}
-
-                    {* Submit Button *}
-                    {$ui = [
-                        'class'     => 'primary',
-                        'label'     => 'Update Site Settings',
-                        'submit'    => true
-                    ]}
-                    {include file="ui/f6/submit.html"}
-
-                {include file="ui/f6/grid-end.html"}
-
-            {include file="ui/f6/form-end.html"}
+                {include file="ui/f6/form-end.html"}
 
         {/if} {* /is provider *}
 
         <div class="usage-section">Customer Section</div>
 
         <!-- Server Data Usage Stats -->
-        <div style="width: 95%;">
+        <div style="width: 95%;" class="callout">
             <center>
                 <span class="button button-secondary" id="guideButton">Explanation of Usage and Graphs</span>
                 &nbsp;&nbsp;<span class="button button-secondary graph-print" data-areaToPrint="StatsPrintArea">Print Page</span>
                             text-align: left;
                             vertical-align: top;
                             white-space: nowrap;
-                            padding-right: 20px;
+                            padding0px;
                         }
                         .glmbw-table td {
                             font-weight: normal;
                             font-size: .9em;
                             text-align: left;
                             vertical-align: top;
-                            padding-right: 20px;
+                            padding: 0px;
+                        }
+                        .glmbw-table tr {
                         }
                         .glmbw-image {
                             max-width: 90%;
                     </style>
                     <div class="print-title" style="text-align: center;">
                         Usage statistics for site:&nbsp;&nbsp;{$selectedSite|upper}&nbsp;&nbsp;&nbsp;&nbsp;Date:
-                        <input data-id="graphDate" type="text" name="graph_date" value="{$thisDate}" class="glm-form-text-input-small glm-date-input" placeholder="Click to Select Date/Time" tabindex="2">
+                        <input style="width: 7rem;" data-id="graphDate" type="text" name="graph_date" value="{$thisDate}" class="glm-form-text-input-small glm-date-input" placeholder="Click to Select Date/Time" tabindex="2">
                     </div>
                     <center>
                         <table class="glmbw-table unstriped">
                                     {$serverStats.yesterday.storage|string_format:"%.3f"} Gigabytes
                                 </td>
                                 <td>&nbsp;</td>
+                                <td>&nbsp;</td>
                             </tr>
                             <tr>
                                 <th>This Month: </th>
                             <div class="graphTitle">
                                 Monthly traffic totals for the past year. The dotted line is our current/planned billing level.
                             </div>
-                            <div class="graph" style="padding-top: 10px;"><img id="twoYearImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
+                            <div class="graph" style="padding-top: 0px;"><img id="twoYearImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
                         </div>
                         <div class="graphContainer">
                             <div class="graphTitle">
                                 Montlhy maximum disk space used for past year. The dotted line is our current/planned billing level.
                             </div>
-                            <div class="graph" style="padding-top: 10px;"><img id="twoYearStorageImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
+                            <div class="graph" style="padding-top: 0px;"><img id="twoYearStorageImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
                         </div>
                         <div class="graphContainer">
                             <div class="graphTitle">
                                 Detail traffic for past 24 hours.
                             </div>
-                            <div class="graph" style="padding-top: 10px;"><img id="twoDayImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
+                            <div class="graph" style="padding-top: 0px;"><img id="twoDayImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
                         </div>
                         <div class="graphContainer">
                             <div class="graphTitle">
                                 Daily traffic for past two months.
                             </div>
-                            <div class="graph" style="padding-top: 10px;"><img id="twoMonthImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
+                            <div class="graph" style="padding-top: 0px;"><img id="twoMonthImg" src="{$assetsUrl}/graph.png" class="glmbw-image"></div>
                         </div>
                     </center>
                 </div>
            $('.datePrintInclude').hide();
 
            location.href='#selectedSite';
+           location.href='#glmPageTop';
 
         });
     </script>
index 3b3417f..447ad0c 100755 (executable)
@@ -9,11 +9,17 @@
 
         {* Beginning of user interface using view UI elements *}
 
-            <form action="{$thisUrl}?page={$thisPage}" method="post" enctype="multipart/form-data" data-abide novalidate>
 
-                <div data-abide-error class="alert callout" style="display: none;">
-                    <p><i class="fi-alert"></i> There are some errors in your form. Please check the highlighted fields below.</p>
-                </div>
+            {* Form Start *}
+            {$ui = [
+                    'action'            => "{$thisUrl}?page={$thisPage}",
+                    'method'            => 'post',
+                    'validate'          => true,
+                    'validateID'        => '1234',
+                    'validateFocusMsg'  => true,
+                    'validateMessage'   => 'There are some errors in your form. Please check the highlighted fields below.' 
+                ]}
+                {include file="ui/f6/form-start.html"}
 
                 <input type="hidden" name="option" value="update_connection">
 
@@ -60,8 +66,7 @@
                                 'placeholder'   => 'Try: bandwidth.gaslightmedia.com',
                                 'required'      => true,
                                 'maxWidth'      => 20,
-                                'errorText'     => 'This is an error!',
-                                'helpText'      => 'This is a test!'
+                                'errorText'     => 'The database host name is required for connecting to the usage database.'
                             ]}
                             {include file="ui/f6/text.html"}
 
@@ -72,7 +77,8 @@
                                 'label'         => 'Database Username',
                                 'placeholder'   => 'Try: bandwidthRO',
                                 'required'      => true,
-                                'maxWidth'      => 20
+                                'maxWidth'      => 20,
+                                'errorText'     => 'The database username is required for connecting to the usage database.'
                             ]}
                             {include file="ui/f6/text.html"}
 
@@ -82,7 +88,8 @@
                                 'value'         => {$db_pass},
                                 'label'         => 'Database Password',
                                 'placeholder'   => 'Try: ,Wv4W*~^bL_vF3F4PbGsS',
-                                'required'      => true
+                                'required'      => true,
+                                'errorText'     => 'The database password for the above username is required for connecting to the usage database.'
                             ]}
                             {include file="ui/f6/text.html"}
 
                             {$ui = [
                                 'field'         => 'website',
                                 'value'         => {$website},
-                                'label'         => 'Default Website Name',
+                                'label'         => 'Website Name',
                                 'placeholder'   => 'i,e, www.gaslightmedia.com',
-                                'required'      => true
+                                'required'      => true,
+                                'errorText'     => 'The website host name is required to access settings for this site.'
                             ]}
                             {include file="ui/f6/text.html"}
 
                                 'field'         => 'send_usage',
                                 'value'         => {!empty($send_usage)},
                                 'label'         => 'Automatically Send Usage Notices Monthly',
-                                'helpText'      => 'More help stuff. Arent you excited?'
+                                'helpText'      => 'This will enable E-mail notifications of usage beyond the following target to the E-mail 
+                                                    contact set for each site. To set the contact address for a particular site, select the
+                                                    "GLM Data Usage" menu on the left, select the desired site, then add the E-mail address
+                                                    in the form on that page.'
                             ]}
                             {include file="ui/f6/checkbox.html"}
 
                             {$ui = [
                                 'field'         => 'show_notifications',
                                 'value'         => {!empty($show_notifications)},
-                                'label'         => 'Customer Notiifications'
+                                'label'         => 'Customer Notiifications',
+                                'helpText'      => 'Turn this on to have general Gaslight Media messages displayed on this site.',
                             ]}
                             {include file="ui/f6/checkbox.html"}
 
                                                    ',
                                 'tip'           => '
                                                     This text is always displayed at the top of the Cookie Popup and is the only text displayed in the
-                                                    Cookie Popup until the user views other notices by clicking the &quot;Show mode&quot; button. This
+                                                    Cookie Popup until the user views other notices by clicking the &quot;Show more&quot; button. This
                                                     is important text and should always be included.
                                                    '
                             ]}
 
                     {include file="ui/f6/section-end.html"}
 
-
-                {include file="ui/f6/grid-end.html"}
-
-<!--
-
-
-                {* Section Start *}
-                    {$ui = [
-                        'title'         => 'Addional Notices',
-                        'helpText'      => 'These notices are displayed when the user clicks the "Show more" button.'
-                    ]}
-                    {include file="ui/f6/section-start.html"}
-
-                    {* show_cookie_popup *}
+                    {* Submit Button *}
                         {$ui = [
-                            'field'         => 'show_cookie_popup',
-                            'label'         => 'Show Cookie Pop-Up'
+                            'class'     => 'primary',
+                            'label'     => 'Save Changes',
+                            'submit'    => true
                         ]}
-                        {include file="ui/f6/checkbox.html"}
+                        {include file="ui/f6/submit.html"}
 
-                {include file="ui/f6/section-end.html"}
-
-
-
-
-                <tr>
-                    <th>Additional Notices</th>
-                    <td>These notices are displayed when the user clicks the "Show more" button.
-                        <br>Select only notices for things that are used in this Website.
-                        <input type="hidden" name="cookie_opt_gdpr" value="0"><br>&nbsp;&nbsp;<input type="checkbox" name="cookie_opt_gdpr"{if $cookie_opt_gdpr} checked{/if}> GDPR
-                        <input type="hidden" name="cookie_opt_access_logs" value="0"><br>&nbsp;&nbsp;<input type="checkbox" name="cookie_opt_access_logs"{if $cookie_opt_access_logs} checked{/if}> Access Logs
-                        <input type="hidden" name="cookie_opt_permanent" value="0"><br>&nbsp;&nbsp;<input type="checkbox" name="cookie_opt_permanent"{if $cookie_opt_permanent} checked{/if}> Permanent Cookies
-                        <input type="hidden" name="cookie_opt_tracking" value="0"><br>&nbsp;&nbsp;<input type="checkbox" name="cookie_opt_tracking"{if $cookie_opt_tracking} checked{/if}> Tracking Cookies
-                        <input type="hidden" name="cookie_opt_shared_tracking" value="0"><br>&nbsp;&nbsp;<input type="checkbox" name="cookie_opt_shared_tracking"{if $cookie_opt_shared_tracking} checked{/if}> Shared Tracking Cookies
-                        <input type="hidden" name="cookie_opt_https" value="0"><br>&nbsp;&nbsp;<input type="checkbox" name="cookie_opt_https"{if $cookie_opt_https} checked{/if}> HTTPS
-                        <input type="hidden" name="cookie_opt_logged_in" value="0"><br>&nbsp;&nbsp;<input type="checkbox" name="cookie_opt_logged_in"{if $cookie_opt_logged_in} checked{/if}> Logged-In Users
-                        <input type="hidden" name="cookie_opt_forms" value="0"><br>&nbsp;&nbsp;<input type="checkbox" name="cookie_opt_forms"{if $cookie_opt_forms} checked{/if}> Submission Forms
-                        <input type="hidden" name="cookie_opt_payment" value="0"><br>&nbsp;&nbsp;<input type="checkbox" name="cookie_opt_payment"{if $cookie_opt_payment} checked{/if}> Payment Forms
-                    </td>
-                </tr>
-            </table>
-{if $connectError}
-            <h2 class="glm-error">Unable to connect to database! Please check connection settings.</h2>
-{/if}
-
--->
+                {include file="ui/f6/grid-end.html"}
 
-                <p><br><input type="submit" value="Save Changes" class="button-primary"></p>
-            </form>
+            {include file="ui/f6/form-end.html"}
 
         </div>
         {* End of user interface using view UI elements *}
 
         jQuery(document).ready(function($) {
 
-{if $forceReload}
-            alert('Redirecting due to menu change. Click "OK" to continue.');
-            window.location.href = '{$adminUrl}{$reloadUrl}';
-{/if}
+            {if $forceReload}
+                alert('Redirecting due to menu change. Click "OK" to continue.');
+                window.location.href = '{$adminUrl}{$reloadUrl}';
+            {/if}
 
             // Flash certain elements for a short time after display
             $(".glm-flash-updated").fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500);
 
-            location.href='#selectedSite';
-            window.setTimeout( function() {
-                location.href='#glmPageTop';
-            }, 500);
-
-
-
         });
     </script>
 
diff --git a/views/ui/f6/bitmap.html b/views/ui/f6/bitmap.html
new file mode 100644 (file)
index 0000000..4f6d0a9
--- /dev/null
@@ -0,0 +1,61 @@
+{*
+    Foundation 6 Bitmap Field
+    All parameters are required.
+    Only 0ne of $data or $field may be used.
+    Do not list fields if they're false. (We're not checking for false)
+
+    {$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,
+        '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 glm-f6-ui-field">
+    <div class="grid-x grid-margin-x">
+        {foreach $ui.value as $item => $v}
+            <div class="cell small-12">
+                <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}-{$v.value}" type="checkbox" name="{$ui.field}[{$v.value}]" value="{$v.value}"{if $v.default} checked{/if}>
+                            <label for="{$ui.field}-{$v.value}" class="switch-paddle">
+                                <span class="show-for-sr">{$v.name}</span>
+                                <span class="switch-active" aria-hidden>{$ui.active|default:'On'}</span>
+                                <span class="switch-inactive" aria-hidden>{$ui.inactive|default:'Off'}</span>
+                            </label>
+                        </div>
+
+                    </div>
+                    <div class="cell auto glm-f6-ui-label-container-right">
+                        <label for="{$ui.field}-{$v.value}" class="glm-f6-ui-field-label">{$v.name}</label>
+                    </div>
+                </div>
+            </div>
+            <div class="cell small-12">
+                &nbsp;
+            </div>
+        {/foreach}
+        <div class="cell small-12">
+            {if isset($ui.dataError) && $ui.dataError}<span class="form-error is-visible glm-f6-ui-field-data-error">{$ui.dataError}</span>{/if}
+            {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-f6-ui-field-error-text" data-form-error-for="{$ui.field}">{$ui.errorText}</span>{/if}
+            {if isset($ui.helpText)}<span class="glm-f6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</span]>{/if}
+        </div>
+    </div>
+</div>
+{*
+    <tr>
+        <th class="glm-nowrap-left-align{if $regSettings.fieldRequired.cc_accepts} glm­-required{/if}">Credit Card Accepted:</th>
+        <td {if $regSettings.fieldFail.cc_accepts}class="glm­form­bad­input" data­tabid="glm-reg-cc-accepts"{/if}>
+      {foreach from=$regSettings.fieldData.cc_accepts.bitmap item=v}
+            <input type="checkbox" name="cc_accepts[{$v.value}]" value="{$v.value}"{if $v.default} checked{/if}>{$v.name}<br>
+      {/foreach}
+            {if $regSettings.fieldFail.cc_accepts}<p>{$regSettings.fieldFail.cc_accepts}</p>{/if}
+        </td>
+    </tr>
+*}
diff --git a/views/ui/f6/callout.html b/views/ui/f6/callout.html
new file mode 100644 (file)
index 0000000..a28b94d
--- /dev/null
@@ -0,0 +1,18 @@
+{*
+    Foundation 6 Callout Notice
+
+    {$ui = [
+        'label'  => string Label text for this Callout,
+        'active' => string True or False if this notice is active
+        'type'   => string Success, Warning, Alert, Primary or Secondary
+    ]}
+*}
+{if $ui.active}
+    <div class="{$ui.type} callout" data-closable>
+        <button class="close-button" aria-label="Close" type="button" data-close>
+            <span aria-hidden="true">&times;</span>
+        </button>
+        <p>{$ui.label}</p>
+    </div>
+{/if}
+
index decb533..af36c45 100644 (file)
@@ -8,7 +8,7 @@
         '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,
+        'dataError'     => string               Error from data Abstract Class, or other supplied error string
         'tip'           => string               Tool Tip text
     ]}
 *}
     <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}>
-                <label class="switch-paddle" for="{$ui.field}">
-                    <span class="switch-active" aria-hidden="true">Yes</span>
-                    <span class="switch-inactive" aria-hidden="true">No</span>
+                <input class="switch-input" id="{$ui.field}" type="checkbox" name="{$ui.field}"{if !empty($ui.value)} checked{/if}{if !empty($ui.required)} required{/if}>
+                <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>
+                    <span class="switch-inactive" aria-hidden>{$ui.inactive|default:'Off'}</span>
                 </label>
             </div>
         </div>
@@ -32,6 +33,8 @@
         </div>
         <div class="cell small-12 glm-f6-ui-field-messages">
             {if !empty($ui.helpText)}<span class="glm-f6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</span]>{/if}
+            {if !empty($ui.dataError)}<span class="form-error is-visible glm-f6-ui-field-data-error">{$ui.dataError}</span>{/if}
+            {if !empty($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-f6-ui-field-error-text" data-form-error-for="{$ui.field}">{$ui.errorText}</span>{/if}
         </div>
     </div>
 </div>
index b1ec936..7218e68 100644 (file)
@@ -1,38 +1,46 @@
 {*
     Foundation 6 UI - Form Start
+    
+    WARNING: There may be a problem with using Form Start after Grid Start. Was seeing improper spacing.
+    
+    Found that using ".position().top -10" was better since it places the top of the window 10px above the 
+    box containing the validate message while using ".offset()" caused it to position in the middle of the
+    validate message.
 
     {$ui = [
         'action'            => string   Required    URL
-        'method'            => string   Required    Method "POST" or "GET"
+        'method'            => string   Required    Method "post" or "get"
         'id'                => string               Form id
-        'File'              => boolean              If including file upload set to true
+        'file'              => boolean              If including file upload set to true
         'validate'          => boolean              If true, include Abide Form Validation
         'validateFocusMsg'  => boolean              If true focuses on validateMessage on error
         'validateID'        => string               Unique text that will be added to the validate message container to ensure that it is unique
-        'validateMessage'   => string               Message to show when validattion error, If not provided will use "There are some errors in your form."
+        'validateMessage'   => string               Message to show for a validation error, Defaults to "There are some errors in your form."
     ]}
 *}
-{$validateMessage = "There are some errors in your form."}
-{if !empty($ui.validate)}{$validateMessage = $ui.validateMessage}{/if}
-
 <form
     action="{$ui.action}"
     method="{$ui.method}"
     {if !empty($ui.id)}id="{$ui.id}"{/if}
-    {if $ui.file}enctype="multipart/form-data"{/if}
-    data-abide novalidate data-validate-on-blur="true"
->
-    {if !empty($ui.validate)}
-        <div id="validateMessage{if !empty($ui.validateID)}_{$ui.validateID}{/if}" data-abide-error class="alert callout" style="display: none;">
-            <p><i class="fi-alert"></i> There are some errors in your form.</p>
-        </div>
-        {if !empty(validateFocusMsg)}
-            <script>
-                $(document).on("forminvalid.zf.abide", function(ev,frm) {
-{* For some reason this is not working. Need to figure this out *}
-                    document.getElementById("validateMessage{if !empty($ui.validateID)}_{$ui.validateID}{/if}").focus();
+    {if !empty($ui.file)}enctype="multipart/form-data"{/if}
+    data-abide novalidate data-validate-on-blur="true">
+
+{if !empty($ui.validate)}
+    <div id="validateMessage{if !empty($ui.validateID)}_{$ui.validateID}{/if}" data-abide-error class="alert callout" style="display: none;">
+        <p><i class="fi-alert"></i> {$ui.validateMessage|default:'There are some errors in your form.'}</p>
+    </div>
+    {if !empty($ui.validateFocusMsg)}
+        <script>
+            jQuery(document).ready(function(){
+
+                $(document).on( 'forminvalid.zf.abide', function( ev, frm ) {
+                    console.log( 'forminvalid' );
+                    
+                    
+                    $("html, body").animate({ scrollTop: $('#validateMessage{if !empty($ui.validateID)}_{$ui.validateID}{/if}').position().top -10 }, 'slow');
                 });
-            </script>
-        {/if}
+            });
+        </script>
     {/if}
+{/if}
 
index 7bea6c9..bdf0cf3 100644 (file)
@@ -3,9 +3,8 @@
 *}
     </div>
 </div>
-
 <script>
     jQuery(document).ready(function($) {
         $(document).foundation();
     });
-</script>
+</script>
\ No newline at end of file
index d104574..adc9c51 100644 (file)
@@ -7,8 +7,6 @@
         'sectionColor'      => string   background color of sections
     ]}
 
-    NOTE: The js/foundation-6.min.js and css/foundation-6.min.css files must be enqueued for this to work.
-
 *}
 
 {$glm_f6_ui_wrapsize = 6 scope="global"}
@@ -37,7 +35,7 @@
         background-color: {$glm_f6_ui_section_color} !important;
     }
     .glm-f6-ui-field {
-        margin-bottom: .5rem !important;
+        margin-bottom: 1rem !important;
     }
     .glm-f6-ui-label-container {
     }
         margin-bottom: 0 !important;
     }
     .glm-f6-ui-text-line {
-        margin-bottom: 1.2rem !important;
+        margin-bottom: 1rem !important;
     }
 </style>
 <div class="grid-container callout grid-margin-x glm-foundation-6-ui">
     <div class="grid-x grid-margin-x">
-
-
index cd6b677..0c5ab71 100644 (file)
         '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 !empty($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 !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}
     </div>
 </div>
index 26612f3..06caf16 100644 (file)
         'dataError'     => string   Error from data Abstract Class
     ]}
 *}
-<div class="grid-x grid-margin-x">
-    <div class="cell small-12">
-        <label>{$ui.label}</label>
-        {if isset($ui.list) && $ui.list}
-            {foreach $ui.list as $checkbox => $checkboxLabel}
-                <label class="{if $ui.reouired} glm-required{/if}">
-                    <input
-                        type="checkbox"
-                        id="{$checkbox}"
-                        name="{$checkbox}"
-                        {if $ui.value.$checkbox} checked{/if} />
-                    {$checkboxLabel}
-                </label>
-            {/foreach}
-        {/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>
+<div class="cell small-12">
+    <label>{$ui.label}</label>
+    {if isset($ui.list) && $ui.list}
+        {foreach $ui.list as $checkbox => $checkboxLabel}
+            <label class="{if !empty($ui.reouired)}glm-required{/if}">
+                <input
+                    type="checkbox"
+                    id="{$checkbox}"
+                    name="{$checkbox}"
+                    {if $ui.value.$checkbox} checked{/if} />
+                {$checkboxLabel}
+            </label>
+        {/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}
 </div>
index c61f76c..01069c3 100644 (file)
         '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>
index 67036fe..143e1c2 100644 (file)
@@ -15,6 +15,7 @@
         'message'       => string               Message string to display between label and input,
         'helpText'      => string               Help text for this input,
         'errorText'     => string               Error text that appears when the field doesn't validate
+        'tip'           => string               String to display when hover over question mark on right
     ]}
 *}
 {if empty($ui.width)}
@@ -45,6 +46,9 @@
                 >
             </div>
             <div class="cell auto glm-f6-ui-label-container-right">
+                {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 !empty($ui.required)} glm-required{/if} glm-f6-ui-field-label">{$ui.label}</label>
             </div>
             <div class="cell small-12 glm-f6-ui-field-messages">
diff --git a/views/ui/f6/pagination.html b/views/ui/f6/pagination.html
new file mode 100644 (file)
index 0000000..fd76808
--- /dev/null
@@ -0,0 +1,23 @@
+{*
+    Foundation 6 Pagination
+
+    {$ui = [
+        'limit'     => integer
+        'total'     => integer
+        'prevStart' => integer
+        'nextStart' => integer
+    ]}
+*}
+<nav aria-label="Pagination">
+    <ul class="pagination">
+        <li class="pagination-previous disabled">Previous <span class="show-for-sr">page</span></li>
+        <li class="current"><span class="show-for-sr">You're on page</span> 1</li>
+        <li><a href="#" aria-label="Page 2">2</a></li>
+        <li><a href="#" aria-label="Page 3">3</a></li>
+        <li><a href="#" aria-label="Page 4">4</a></li>
+        <li class="ellipsis" aria-hidden="true"></li>
+        <li><a href="#" aria-label="Page 12">12</a></li>
+        <li><a href="#" aria-label="Page 13">13</a></li>
+        <li class="pagination-next"><a href="#" aria-label="Next page">Next <span class="show-for-sr">page</span></a></li>
+      </ul>
+</nav>
index fb3ab58..7445ff8 100644 (file)
@@ -14,7 +14,7 @@
         {else}
             <div class="cell small-12 glm-f6-ui-section-title">
                 {if isset($ui.tip)}
-                    <span style="float:right;" data-tooltip aria-haspopup="true" class="has-tip .left" data-disable-hover="false" tabindex=1 title="{$ui.tip}">?</span>
+                    <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}
index c2a095f..2f6eaf4 100644 (file)
         '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 $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="{$v}"{if $ui.value == $v} 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 !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}
 
-    </div>
 </div>
index 1dbfd56..7198394 100644 (file)
@@ -1,5 +1,12 @@
 {*
-    Foundation 6 - Submit Button
+    Foundation 6 Submit Button
+
+    Button Colors:
+        primary   = blue
+        secondary = grey
+        success   = green
+        alert     = red
+        warning   = yellow
 
     {$ui = [
         'class'     => string   Required    One of "primary", "secondary", "alert", "success", and "warning" and any addtional desired classes
         'submit'    => boolean              True if this is a submit button
         'id'        => string               Optional ID for this button
         'small'     => boolean              True to select a small button
+        'cancel'    => string               Optional URL for cancel button
     ]}
 *}
 
 <div class="cell small-12 glm-f6-ui-field">
     <button
-        {if !empty($ui.id)}id={$ui.id}{/if}
+        {if !empty($ui.id)}id="{$ui.id}"{/if}
         {if !empty($ui.submit)}type="submit"{/if}
-        class="button{if !empty($ui.small)} button-small{/if} {$ui.class}"
-    >
+        class="button {$ui.class|default:'primary'}{if !empty($ui.small)} button-small{/if}"
+        >
         {$ui.label}
     </button>
+    {if !empty($ui.cancel)}<a href="{$ui.cancel}" class="button secondary">Cancel</a>{/if}
 </div>
diff --git a/views/ui/f6/test.tpl b/views/ui/f6/test.tpl
new file mode 100644 (file)
index 0000000..e69de29
index 538bbd0..ebfc94e 100644 (file)
         '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,
+        '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,
         'dataError'     => string               Error from data Abstract Class
         'tip'           => string               String to display when hover over question mark on right
+        'class'         => string               Additional Classes for the main cell div
     ]}
 *}
-<div class="cell small-12 glm-f6-ui-field">
+<div class="cell small-12 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}
         <div class="grid-x grid-margin-x">
             <div class="cell small-12">
                 {if isset($ui.tip)}
-                    <span style="float:right;" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" tabindex=1 title="{$ui.tip}">?</span>
+                    <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>
             </div>
@@ -53,3 +54,5 @@
         </div>
     {/if}
 </div>
+
+