From 4e6dde3c2e7d994f30e8969b6eb3b3a659753bb8 Mon Sep 17 00:00:00 2001
From: Chuck Scott <cscott@gaslightmedia.com>
Date: Tue, 10 Sep 2019 17:02:39 -0400
Subject: [PATCH] Integrated popup page improvements and cleaned it up.

Added popup page colors, positioning, and border into Usage Report Settings form.
---
 activate.php                  |   4 --
 defines.php                   |   1 +
 models/adminServerStats.php   |  18 +++++-
 models/frontCookiePopUp.php   |  60 ++++++++++++-------
 views/adminServerStats.html   | 105 +++++++++++++++++++++++++++++++++-
 views/ui/f6/radioButtons.html |  37 ++++++++++++
 views/ui/f6/text.html         |  12 +++-
 7 files changed, 204 insertions(+), 33 deletions(-)
 create mode 100644 views/ui/f6/radioButtons.html

diff --git a/activate.php b/activate.php
index e67ffde..182a55f 100755
--- a/activate.php
+++ b/activate.php
@@ -59,10 +59,6 @@ class glmServerStatsPluginActivate
 trigger_error("*** SLUG NOT FOUND ***", E_USER_NOTICE);
 
             $pageContent = "
-<hr>
-<a href=\"#cookies\">Cookies and Privacy</a><br>
-<a href=\"#additional\">Additional Privacy Information</a><br>
-<hr>
 <div style=\"display:inline-block\">
     <a name=\"cookies\"><h2>Cookies and Privacy</h2></a>
     <p>This site uses temporary \"Cookies\" to store limited information that's 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>
diff --git a/defines.php b/defines.php
index 46361b6..34bb6de 100755
--- a/defines.php
+++ b/defines.php
@@ -52,6 +52,7 @@ define('GLM_SERVERSTATS_PLUGIN_HOST', $host);
 
 // Define policy page title
 define('GLM_SERVERSTATS_PLUGIN_POLICY_PAGE', 'Website User Privacy and Policies');
+define('GLM_SERVERSTATS_PLUGIN_POLICY_PAGE_SLUG', sanitize_title(GLM_SERVERSTATS_PLUGIN_POLICY_PAGE));
 
 // Determine current http/https protocol
 $pageProtocol = 'http';
diff --git a/models/adminServerStats.php b/models/adminServerStats.php
index 2cb1f47..133d073 100755
--- a/models/adminServerStats.php
+++ b/models/adminServerStats.php
@@ -146,7 +146,14 @@ class adminServerStats extends glmServerStatsBandwidthSupport
                         'contact_state'         => FILTER_SANITIZE_STRING,
                         'contact_zip'           => FILTER_SANITIZE_STRING,
                         'contact_phone'         => FILTER_SANITIZE_STRING,
-                        'contact_email'         => FILTER_SANITIZE_STRING
+                        'contact_email'         => FILTER_SANITIZE_STRING,
+                        'color_background'      => FILTER_SANITIZE_STRING,
+                        'color_buttons'         => FILTER_SANITIZE_STRING,
+                        'color_text'            => FILTER_SANITIZE_STRING,
+                        'color_buttontext'      => FILTER_SANITIZE_STRING,
+                        'popup_border'          => FILTER_SANITIZE_STRING,
+                        'popup_position'        => FILTER_SANITIZE_STRING
+
                     ),true
                 );
 
@@ -168,9 +175,16 @@ class adminServerStats extends glmServerStatsBandwidthSupport
                             contact_state           = '".$vals['contact_state']."',
                             contact_zip             = '".$vals['contact_zip']."',
                             contact_phone           = '".$vals['contact_phone']."',
-                            contact_email           = '".$vals['contact_email']."'
+                            contact_email           = '".$vals['contact_email']."',
+                            color_background        = '".$vals['color_background']."',
+                            color_buttons           = '".$vals['color_buttons']."',
+                            color_text              = '".$vals['color_text']."',
+                            color_buttontext        = '".$vals['color_buttontext']."',
+                            popup_border            = '".$vals['popup_border']."',
+                            popup_position          = '".$vals['popup_position']."'
                      WHERE name = '".$currentSiteName."'
                 ";
+echo "<pre>$sql</pre>";
                 if (!$bwdb->query($sql)) {
                     printf("Error: %s\n", $bwdb->error);
                 }
diff --git a/models/frontCookiePopUp.php b/models/frontCookiePopUp.php
index 3d28d84..7b8e2a0 100755
--- a/models/frontCookiePopUp.php
+++ b/models/frontCookiePopUp.php
@@ -1,21 +1,28 @@
 <?php
 // Get Configuration for Cookie info popup
 
-$policyPageSlug = sanitize_title(GLM_SERVERSTATS_PLUGIN_POLICY_PAGE);
-$moreInfoURL = GLM_SERVERSTATS_SITE_BASE_URL."/".$policyPageSlug;
+$bwdb = mysqli_init();
+$settings = bandwidthDataConnect(GLM_SERVERSTATS_PLUGIN_HOSTNAME);
 
+if ( $settings['popup_position'] == 'Top' ) {
+    $position = 'position: absolute; top: 0px;';
+} else {
+    $position = 'position: fixed; bottom: 0;';
+}
 ?>
 <style>
     #cookieNoticeBox {
         position: absolute;
-        top: 200px;
-        left: 30px;
-        width: 70%;
-        margin: 0 auto;
-        background: white;
+    <?php echo $position;?>
+        float: left;
+        width: -moz-calc(100% - 18px);
+        width: -webkit-calc(100% - 18px);
+        width: -o-calc(100% - 18px);
+        width: calc(100% - 18px);
+        margin: 10px;
+        border: <?php echo $settings['popup_border']; ?>;
+        background: <?php echo $settings['color_background']; ?>;
         padding: 15px;
-        border: 2px solid black;
-        border-radius: 20px/20px;
         background-clip: padding-box;
         text-align: left;
         z-index: 99999 !important;
@@ -23,40 +30,49 @@ $moreInfoURL = GLM_SERVERSTATS_SITE_BASE_URL."/".$policyPageSlug;
     }
     #cookieNoticeBox p {
         font-size: .9em;
+        color: <?php echo $settings['color_text']; ?>;
     }
     #cookieNoticeBox .title {
         font-size: .9em;
         font-weight: bold;
-        padding-bottom: .5em;
-        border-bottom: 2px solid black;
-        margin-bottom: .5em;
+        padding-bottom: .5rem;
+        color: <?php echo $settings['color_text']; ?>;
     }
     #cookieNoticeBox .button {
-        color: black;
+        color: <?php echo $settings['color_buttontext']; ?>;
+        background: <?php echo $settings['color_buttons']; ?>;
+        border: 1px solid black;
+        border-radius: 10px;
+
         font-size: 1rem;
-        background-color: lightgrey;
         padding: 2px 10px;
         z-index: 20;
         left: 0;
         top: 0;
         margin: 0;
-        border-radius: 4px;
         cursor: pointer;
     }
+    #cookieMoreInfo {
+        height: 50vh;
+        margin: 0;
+        overflow: auto;
+    }
 </style>
 <div id="cookieNoticeBox" class="opensearchserver.ignore">
     <div class="title">Please read!<br></div>
-<?php if ($serverstatsConfig['cookie_message'] != '') { echo '<p>'.nl2br($serverstatsConfig['cookie_message']).'</p>'; }  ?>
-    <p>
+<?php if ($settings['cookie_message'] != '') { echo '<p>'.nl2br($settings['cookie_message']).'</p>'; } ?>
+
+    <div>
         <a class="cookieMoreInfo button">Show more</a>
-        <a class="cookieNoticeBoxClose button">Got it!</a>
-    </p>
+        <a id="cookieNoticeBoxClose" class="button">Got it!</a>
+    </div>
+
 </div>
 
 <script type="text/javascript">
     jQuery(function($){
 
-        var popupTimeout = <?php echo $serverstatsConfig['cookie_popup_timeout'] ?>;
+        var popupTimeout = <?php echo $settings['cookie_popup_timeout'] ?>;
 
         // Set the popup cookie to exist for cpdays days
         function setPopupCookie(cpdays) {
@@ -86,12 +102,12 @@ $moreInfoURL = GLM_SERVERSTATS_SITE_BASE_URL."/".$policyPageSlug;
         $(".cookieMoreInfo").on('click', function() {
             $("#cookieNoticeBox").hide();
             setPopupCookie(popupTimeout);
-            window.location.href = "<?php echo $moreInfoURL; ?>";
+            window.location.href = "<?php echo GLM_SERVERSTATS_SITE_BASE_URL.GLM_SERVERSTATS_PLUGIN_POLICY_PAGE_SLUG; ?>";
             return false;
         });
 
         // If user clicks "Got It!" then set the cookie to now show it again for a while.
-        $(".cookieNoticeBoxClose").on('click', function() {
+        $("#cookieNoticeBoxClose").on('click', function() {
             $("#cookieNoticeBox").hide();
             setPopupCookie(popupTimeout);
         });
diff --git a/views/adminServerStats.html b/views/adminServerStats.html
index a1868f9..d52ff45 100755
--- a/views/adminServerStats.html
+++ b/views/adminServerStats.html
@@ -235,6 +235,21 @@
                                     <div class="cell small-12 large-5 glm-f6-ui-nowrap"><b>Cookie Message:</b></div>
                                     <div class="cell small-12 large-7">{$currentSite.cookie_message|nl2br}</div>
 
+                                    <div class="cell small-12 large-12 glm-f6-ui-nowrap"><br><u>Cookie Pop-Up Colors</u></div>
+
+                                    <div class="cell small-12 large-5 glm-f6-ui-nowrap"><b>Background:</b></div>
+                                    <div class="cell small-12 large-7">{$currentSite.color_background}</div>
+                                    <div class="cell small-12 large-5 glm-f6-ui-nowrap"><b>Buttons:</b></div>
+                                    <div class="cell small-12 large-7">{$currentSite.color_buttons}</div>
+                                    <div class="cell small-12 large-5 glm-f6-ui-nowrap"><b>Text:</b></div>
+                                    <div class="cell small-12 large-7">{$currentSite.color_text}</div>
+                                    <div class="cell small-12 large-5 glm-f6-ui-nowrap"><b>Button Text:</b></div>
+                                    <div class="cell small-12 large-7">{$currentSite.color_buttontext}</div>
+                                    <div class="cell small-12 large-5 glm-f6-ui-nowrap"><b>Pop-Up Border:</b></div>
+                                    <div class="cell small-12 large-7">{$currentSite.popup_border}</div>
+                                    <div class="cell small-12 large-5 glm-f6-ui-nowrap"><b>Position:</b></div>
+                                    <div class="cell small-12 large-7">{$currentSite.popup_position}</div>
+
                                     <div class="cell small-12 large-12 glm-f6-ui-nowrap"><br><u>Privacy/Policy Page</u></div>
 
                                     <div class="cell small-12 large-5 glm-f6-ui-nowrap"><b>Privacy and Policy Contact:</b></div>
@@ -318,7 +333,7 @@
                                     'value'         => {$currentSite.target|string_format:"%.1f"},
                                     'label'         => 'Monthly Traffic Target in Gigabytes',
                                     'required'      => true,
-                                    'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
+                                    'placeholder'   => 'e.g.: 2.000 for 2 Gigabytes'
                                 ]}
                                 {include file="ui/f6/text.html"}
 
@@ -328,7 +343,7 @@
                                     'value'         => {$currentSite.disk_target|string_format:"%.1f"},
                                     'label'         => 'Disk Space Used Target in Gigabytes',
                                     'required'      => true,
-                                    'placeholder'   => 'i.e. 2.000 for 2 Gigabytes'
+                                    'placeholder'   => 'e.g. 2.000 for 2 Gigabytes'
                                 ]}
                                 {include file="ui/f6/text.html"}
 
@@ -423,6 +438,92 @@
 
                             {include file="ui/f6/sub-section-end.html"}
 
+                           {* Sub-Section Start *}
+                                {$ui = [
+                                'title'     => 'Cookie Pop-Up Colors and Positioning'
+                            ]}
+                            {include file="ui/f6/sub-section-start.html"}
+
+                                {* color_backgroud *}
+                                {$ui = [
+                                    'field'         => 'color_background',
+                                    'value'         => {$currentSite.color_background},
+                                    'default'       => '#002b38',
+                                    'label'         => 'Background',
+                                    'placeholder'   => 'Color Code like #002b38',
+                                    'required'      => true,
+                                    'maxWidth'      => '6rem',
+                                    'maxLength'     => 8,
+                                    'wrapSize'      => 3
+                                ]}
+                                {include file="ui/f6/text.html"}
+
+                                {* color_buttons *}
+                                {$ui = [
+                                    'field'         => 'color_buttons',
+                                    'value'         => {$currentSite.color_buttons},
+                                    'default'       => '#073642',
+                                    'label'         => 'Buttons',
+                                    'placeholder'   => 'Color Code like #002b38',
+                                    'required'      => true,
+                                    'maxWidth'      => '6rem',
+                                    'maxLength'     => 8,
+                                    'wrapSize'      => 3
+                                ]}
+                                {include file="ui/f6/text.html"}
+
+                                {* color_text *}
+                                {$ui = [
+                                    'field'         => 'color_text',
+                                    'value'         => {$currentSite.color_text},
+                                    'default'       => '#839496',
+                                    'label'         => 'Text',
+                                    'placeholder'   => 'Color Code like #002b38',
+                                    'required'      => true,
+                                    'maxWidth'      => '6rem',
+                                    'maxLength'     => 8,
+                                    'wrapSize'      => 3
+                                ]}
+                                {include file="ui/f6/text.html"}
+
+                                {* color_buttontext *}
+                                {$ui = [
+                                    'field'         => 'color_buttontext',
+                                    'value'         => {$currentSite.color_buttontext},
+                                    'default'       => '#ffffff',
+                                    'label'         => 'Button Text',
+                                    'placeholder'   => 'Color Code like #002b38',
+                                    'required'      => true,
+                                    'maxWidth'      => '6rem',
+                                    'maxLength'     => 8,
+                                    'wrapSize'      => 3
+                                ]}
+                                {include file="ui/f6/text.html"}
+
+                                {* popup_border *}
+                                {$ui = [
+                                    'field'         => 'popup_border',
+                                    'value'         => {$currentSite.popup_border},
+                                    'default'        => '1px solid black',
+                                    'label'         => 'Pop-Up Border',
+                                    'placeholder'   => 'e.g.: 1px black solid',
+                                    'maxWidth'      => '10rem'
+                                ]}
+                                {include file="ui/f6/text.html"}
+
+                                {* popup_position *}
+                                {$ui = [
+                                    'field'         => 'popup_position',
+                                    'value'         => {$currentSite.popup_position},
+                                    'default'        => 'top',
+                                    'label'         => 'Pop-Up Position',
+                                    'list'          => ['Top' => 'Top', 'Bottom' => 'Bottom'],
+                                    'noWrap'        => true
+                                ]}
+                                {include file="ui/f6/radioButtons.html"}
+
+                            {include file="ui/f6/sub-section-end.html"}
+
                             {* Sub-Section Start *}
                             {$ui = [
                                 'title'     => 'Privacy/Policy Page Contact Information'
diff --git a/views/ui/f6/radioButtons.html b/views/ui/f6/radioButtons.html
new file mode 100644
index 0000000..4a4c0dd
--- /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/text.html b/views/ui/f6/text.html
index 3a73b39..0e57315 100644
--- a/views/ui/f6/text.html
+++ b/views/ui/f6/text.html
@@ -10,16 +10,22 @@
         'pattern'       => string               Pattern attribute ( number, etc. )
         'placeholder'   => string               Placeholder string,
         'required'      => boolean              True if required,
+        '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,
         '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
+        'class'         => string               Additional Classes for the main cell div,
+        '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}
@@ -36,7 +42,7 @@
                     type="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}
-- 
2.17.1