{* Section Start *}
{$ui = [
- 'title' => 'Database Connection'
+ 'title' => 'Database Connection',
+ 'tip' => "
+ If you need help with these settings, please contact the Gaslight Media network engineering department.
+ "
]}
{include file="ui/f6/section-start.html"}
{* db_name *}
{$ui = [
'field' => 'db_name',
+ 'value' => {$db_name},
'label' => 'Database Name',
'placeholder' => 'Provided by Gaslight Media Engineering',
'required' => true,
- 'helpText' => 'We be here!',
'errorText' => 'The database name is required for connecting to the usage database.'
]}
{include file="ui/f6/text.html"}
{* db_host *}
{$ui = [
'field' => 'db_host',
+ 'value' => {$db_host},
'label' => 'Database Server Hostname',
'placeholder' => 'Provided by Gaslight Media Engineering',
'required' => true,
- 'helpText' => 'We be there!',
'maxWidth' => 20
]}
{include file="ui/f6/text.html"}
{* db_user *}
{$ui = [
'field' => 'db_user',
+ 'value' => {$db_user},
'label' => 'Database Username',
'placeholder' => 'Provided by Gaslight Media Engineering',
'required' => true,
{* db_pass *}
{$ui = [
'field' => 'db_pass',
+ 'value' => {$db_pass},
'label' => 'Database Password',
'placeholder' => 'Provided by Gaslight Media Engineering',
'required' => true
{* website *}
{$ui = [
'field' => 'website',
+ 'value' => {$website},
'label' => 'Default Website Name',
'placeholder' => 'Provided by Gaslight Media Engineering',
'required' => true
{* Section Start *}
{$ui = [
- 'title' => 'Usage Notifications for All Sites'
+ 'title' => 'Usage and Notifications'
]}
{include file="ui/f6/section-start.html"}
{* show_usage *}
{$ui = [
'field' => 'show_usage',
+ 'value' => {$show_usage},
'label' => 'Show Data Usage',
'helpText' => 'Check this box to have server display website usage information.'
{* send_usage *}
{$ui = [
'field' => 'send_usage',
+ 'value' => {$send_usage},
'label' => 'Automatically Send Usage Notices Monthly',
'helpText' => 'More help stuff. Arent you excited?'
]}
{* send_percent *}
{$ui = [
'field' => 'send_percent',
+ 'value' => {$send_percent},
'label' => '% of Target for Notification',
'required' => true,
'min' => 0,
'max' => 150,
- 'maxWidth' => 3,
+ 'width' => 5,
'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"}
- {include file="ui/f6/section-end.html"}
+ {* show_notifications *}
+ {$ui = [
+ 'field' => 'show_notifications',
+ 'value' => {$show_notifications},
+ 'label' => 'Customer Notiifications for This Site'
+ ]}
+ {include file="ui/f6/checkbox.html"}
- {include file="ui/f6/grid-end.html"}
-<!--
- {* Section Start *}
- {$ui = [
- 'title' => 'Usage Notifications for All Sites'
- ]}
- {include file="ui/f6/section-start.html"}
+ {include file="ui/f6/section-end.html"}
- {* show_usage *}
+ {* Section Start *}
{$ui = [
- 'field' => 'show_usage',
- 'label' => 'Show Data Usage',
- 'helpText' => 'Check this box to have server display website usage information.'
-
+ 'title' => 'Cookie Pop-Ups for This Site'
]}
- {include file="ui/f6/checkbox.html"}
+ {include file="ui/f6/section-start.html"}
- {* send_usage *}
- {$ui = [
- 'field' => 'send_usage',
- 'label' => 'Automatically Send Usage Notices Monthly',
- 'helpText' => 'More help stuff. Arent you excited?'
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* show_cookie_popup *}
+ {$ui = [
+ 'field' => 'show_cookie_popup',
+ 'value' => {$show_cookie_popup},
+ 'label' => 'Show Cookie Pop-Up',
+ 'helpText' => 'This is my help text'
+ ]}
+ {include file="ui/f6/checkbox.html"}
- {* send_percent *}
- {$ui = [
- 'field' => 'send_percent',
- 'label' => '% of Target for Notification',
- 'required' => true,
- 'min' => 0,
- 'max' => 150,
- '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"}
+ {* cookie_popup_timeout *}
+ {$ui = [
+ 'field' => 'cookie_popup_timeout',
+ 'value' => {$cookie_popup_timeout},
+ 'label' => 'Cookie Pop-Up Re-Display Days',
+ 'required' => true,
+ 'min' => 0,
+ 'max' => 90,
+ 'width' => 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"}
- {include file="ui/f6/section-end.html"}
+ {* cookie_message *}
+ {$ui = [
+ 'field' => 'cookie_message',
+ 'value' => {$cookie_message},
+ 'label' => 'Cookies Notice Text',
+ 'required' => true,
+ 'height' => 10,
+ 'rows' => 5,
+ 'maxWidth' => '900px',
+ 'helpText' => 'My Help Text',
+ 'errorText' => 'Im a fool.'
+ ]}
+ {include file="ui/f6/editor.html"}
- {* Section Start *}
- {$ui = [
- 'title' => 'Usage Notifications for All Sites'
- ]}
- {include file="ui/f6/section-start.html"}
+ {include file="ui/f6/section-end.html"}
- {* show_notifications *}
+ {* Section Start *}
{$ui = [
- 'field' => 'show_notifications',
- 'label' => 'Customer Notiifications for This Site'
+ 'title' => 'Addional Notices'
]}
- {include file="ui/f6/checkbox.html"}
+ {include file="ui/f6/section-start.html"}
- {include file="ui/f6/section-end.html"}
+ {* Text Line *}
+ {$ui = [
+ 'text' => 'These notices are displayed when the user clicks the "Show more" button.'
+ ]}
+ {include file="ui/f6/text-line.html"}
- {* Section Start *}
- {$ui = [
- 'title' => 'Cookie Pop-Ups for This Site'
- ]}
- {include file="ui/f6/section-start.html"}
+ {* cookie_opt_gdpr *}
+ {$ui = [
+ 'field' => 'cookie_opt_gdpr',
+ 'label' => 'GDPR'
+ ]}
+ {include file="ui/f6/checkbox.html"}
- {* show_cookie_popup *}
- {$ui = [
- 'field' => 'show_cookie_popup',
- 'label' => 'Show Cookie Pop-Up'
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* cookie_opt_access_logs *}
+ {$ui = [
+ 'field' => 'cookie_opt_access_logs',
+ 'label' => 'Access Logs'
+ ]}
+ {include file="ui/f6/checkbox.html"}
- {* cookie_popup_timeout *}
- {$ui = [
- 'field' => 'cookie_popup_timeout',
- 'label' => 'Cookie Pop-Up Re-Display Days',
- 'required' => true,
- 'min' => 0,
- 'max' => 90,
- '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"}
+ {* cookie_opt_permanent *}
+ {$ui = [
+ 'field' => 'cookie_opt_permanent',
+ 'label' => 'Permanent Cookies'
+ ]}
+ {include file="ui/f6/checkbox.html"}
- {* cookie_message *}
- {$ui = [
- 'field' => 'cookie_message',
- 'label' => 'Cookies Notice Text',
- 'required' => true,
- 'height' => 50,
- 'rows' => 5,
- 'maxWidth' => '900px',
- 'helpText' => 'My Help Text',
- 'errorText' => 'Im a fool.'
- ]}
- {include file="ui/f6/editor.html"}
+ {* cookie_opt_tracking *}
+ {$ui = [
+ 'field' => 'cookie_opt_tracking',
+ 'label' => 'Tracking Cookies'
+ ]}
+ {include file="ui/f6/checkbox.html"}
+
+ {* cookie_opt_shared_tracking *}
+ {$ui = [
+ 'field' => 'cookie_opt_shared_tracking',
+ 'label' => 'Shared Tracking Cookies'
+ ]}
+ {include file="ui/f6/checkbox.html"}
+
+ {* cookie_opt_https *}
+ {$ui = [
+ 'field' => 'cookie_opt_https',
+ 'label' => 'HTTPS'
+ ]}
+ {include file="ui/f6/checkbox.html"}
+
+ {* cookie_opt_logged_in *}
+ {$ui = [
+ 'field' => 'cookie_opt_logged_in',
+ 'label' => 'Logged-In Users'
+ ]}
+ {include file="ui/f6/checkbox.html"}
+
+ {* cookie_opt_forms *}
+ {$ui = [
+ 'field' => 'cookie_opt_forms',
+ 'label' => 'Submission Forms'
+ ]}
+ {include file="ui/f6/checkbox.html"}
+
+ {* cookie_opt_payment *}
+ {$ui = [
+ 'field' => 'cookie_opt_payment',
+ 'label' => 'Payment Forms'
+ ]}
+ {include file="ui/f6/checkbox.html"}
+
+ {include file="ui/f6/section-end.html"}
+
+
+ {include file="ui/f6/grid-end.html"}
+
+<!--
- {include file="ui/f6/section-end.html"}
{* Section Start *}
{$ui = [
. </div>
grid-end.html </div>
- . </dic>
\ No newline at end of file
+ . </div>
\ No newline at end of file
{*
- Foundation 6 Checkbox Input Field
+ Foundation 6 - Checkbox Input 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
+ 'value' => string True/False, 0/1
'field' => string Name of field that holds the data if not using data abstract,
'label' => string Label text for this field,
'required' => boolean True if required,
*}
<div class="cell small-12 glm-foundation-6-ui-field">
- <input
- {if $ui.required}required{/if}
- type="checkbox"
- id="{$ui.field}"
- name="{$ui.field}"{if $ui.value} checked{/if}>
- <label for="{$ui.field}">{$ui.label}</label>
-
- {if isset($ui.dataError)}<span class="form-error is-visible">{$ui.dataError}</span>{/if}
- {if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
- {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
+ <div class="grid-x grid-margin-x">
+ <div class="cell shrink ">
+ <div class="switch small glm-foundation-6-ui-field-input-switch">
+ <input class="switch-input" id="{$ui.field}" type="checkbox" name="{$ui.field}">
+ <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>
+ </label>
+ </div>
+ </div>
+ <div class="cell auto">
+ <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-foundation-6-ui-field-label">{$ui.label}</label>
+ </div>
+ <div class="cell small-12">
+ {if isset($ui.helpText)}<p class="glm-foundation-6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
+ </div>
+ </div>
</div>
-
<div class="cell small-12">
<label for="{$ui.field}" class="{if $ui.required} glm-required{/if}">{$ui.label}</label>
{if isset($ui.value) && $ui.value}
- {$textAreaContent = $ui.value|escape:quotes}
+ {$textAreaContent = $ui.value}
{else}
{$textAreaContent = ''}
{/if}
{$textAreaName = $ui.field}
- {if isset($ui.height)} {$height = $ui.height} {else} {$height = 100} {/if}
+ {if isset($ui.height)} {$height = $ui.height} {else} {$height = 50} {/if}
{if isset($ui.media)} {$media_buttons = $ui.media} {else} {$media_buttons = false} {/if}
{if isset($ui.quicktags)} {$quicktags = $ui.quicktags} {else} {$quicktags = false} {/if}
- {wp_editor(
- $textAreaContent,
- $textAreaName,
- json_decode('{
- "textarea_name": $textAreaContent,
- "media_buttons": false,
- "quicktags": false,
- "editor_height": $height
- }', true)
- )}
+ {$settings = [
+ 'textarea_name' => $textAreaName,
+ 'editor_height' => $height,
+ 'media_buttons' => $media_buttons,
+ 'quicktags' => $quicktags
+ ]}
+ {wp_editor(
+ $textAreaContent,
+ $textAreaName,
+ $settings
+ )}
<br>
{if $ui.dataError}<span class="form-error is-visible">{$ui.dataError}</span>{/if}
{if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
.glm-foundation-6-ui-section-start {
}
.glm-foundation-6-ui-field {
+ margin-bottom: .5rem !important;
}
.glm-foundation-6-ui-field-label {
}
.glm-foundation-6-ui-field-input {
+ margin-bottom: 0 !important;
+ }
+ .glm-foundation-6-ui-field-input-switch {
+ margin-bottom: 0 !important;
}
.glm-foundation-6-ui-field-data-error {
}
.glm-foundation-6-ui-field-help-text {
+ margin-bottom: 0 !important;
}
.glm-foundation-6-ui-field-error-text {
}
{*
- Foundation 6 Number Input Field
- All parameters are required.
- Only 0ne of $data or $field may be used.
- DO NOT include fields if they're false. (We're not checking for false)
+ Foundation 6 - Number Input Field
- {$fieldData = [
- 'data' => array Data from data abstract if using that,
+ Do not include fields if they're false. (We're not checking for false)
+
+ {$ui = [
+ 'value' => 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,
'placeholder' => string Placeholder string,
'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,
+ 'width' => integer Size of input field in characters,
'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
]}
*}
-
-
-{if (!isset($fieldData.data) && !isset($fieldData.field)) || !isset($fieldData.label)}
- <div class="grid-x grid-margin-x">
- <div class="cell small-12">
- <span class="glm-required">Field Error: Required field information not supplied!</span>
- </div>
- </div>
+{if !isset($ui.width)}
+ {$ui.width = 5}
{else}
- {if isset($fieldData.data)} {* If using data abstract *}
- <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="number" 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>
+ {$ui.width = $ui.width * .55 + 2.5}
+{/if}
+
+<div class="cell small-12 glm-foundation-6-ui-field">
+ {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="small-12 columns">
- <label for="{$fieldData.field}_FieldID" class="{if $fieldData.required} glm-required{/if}">
+ <div class="grid-x grid-margin-x">
+ <div class="cell shrink">
<input
- id="{$fieldData.field}_FieldID"
- type="text"
- pattern="number"
- name="{$fieldData.field}"
- value="{${$fieldData.field}}"
- {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}
+ id="{$ui.field}_FieldID"
+ type="number"
+ name="{$ui.field}"
+ value="{$ui.value}"
+ {if $ui.required}required{/if}
+ {if isset($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
+ {if isset($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
+ {if isset($ui.placeholder)}placeholder="{$ui.placeholder}"{/if}
+ {if isset($ui.min)}min="{$ui.min}"{/if}
+ {if isset($ui.min)}max="{$ui.max}"{/if}
+ style="width: {$ui.width}rem;"
>
- {$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>
+ <div class="cell auto">
+ <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-foundation-6-ui-field-label">{$ui.label}</label>
+ </div>
+ <div class="cell small-12">
+ {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>
{/if}
-{/if}
+</div>
\ No newline at end of file
{*
Foundation 6 - Form Section Start
- All parameters are required.
{$ui = [
'title' => string Section title text,
- 'helpText' => string Additional text to describe this section
+ 'helpText' => string Additional text to describe this section,
+ 'tip' => String to display when hover over question mark on right
]}
*}
<div class="cell small-12 large-6">
<span class="glm-required">Field Error: Required field information not supplied!</span>
{else}
<div class="cell small-12 glm-foundation-6-ui-section-title">
+ {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>
+ {/if}
<h3>{$ui.title}</h3>
{if isset($ui.helpText)}<p class="help-text">{$ui.helpText}</p>{/if}
</div>
{/if}
<div class="cell small-12 callout glm-foundation-6-ui-section-start">
<div class="grid-x grid-margin-x">
+
+
--- /dev/null
+{*
+ Foundation 6 - Text Line (display only)
+
+ {$ui = [
+ 'text' => string Required Text to display,
+ 'underline' => boolean True to show line below text
+ ]}
+*}
+
+<div class="cell small-12 glm-foundation-6-ui-field">
+ <p{if isset($ui.underline) && $ui.underline} style="text-decoration: underline;"{/if}>
+ {$ui.text}
+ </p>
+</div>
+
{*
- Foundation 6 Text Input Field
+ Foundation 6 - Text Input Field
Do not list parameters if they're false. (We're not checking for false).
- If supplying field data (formData) from the data abstract, supply a
- name of that in the "field" parameter. Also then certain parameters like
- "required" will be supplied by the abstract rather than in a parameter in
- this array.
-
{$ui = [
'field' => string Required Name of field that holds the data or formData array,
+ 'value' => string Required Value of this text element
'label' => string Required Label text for this field,
'pattern' => string Pattern attribute ( number, etc. )
'placeholder' => string Placeholder string,
'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
]}
*}
<div class="cell small-12 glm-foundation-6-ui-field">
- <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-foundation-6-ui-field-label">{$ui.label}</label>
- <input
- type="text"
- id="{$ui.field}"
- name="{$ui.field}"
- value="{${$ui.field}|escape}"
- {if isset($ui.pattern) && $ui.pattern}pattern="{$ui.pattern}"{/if}
- {if $ui.required}required{/if}
- {if isset($ui.placeholder) && $ui.placeholder}placeholder="{$ui.placeholder}"{/if}
- {if isset($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
- {if isset($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
- {if isset($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
- {if isset($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
- />
- {if isset($ui.dataError) && $ui.dataError}<span class="form-error is-visible glm-foundation-6-ui-field-data-error">{$ui.dataError}</span>{/if}
- {if isset($ui.helpText)}<p class="glm-foundation-6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
- {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-foundation-6-ui-field-error-text">{$ui.errorText}</span>{/if}
+ {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>
+ {/if}
+ <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-foundation-6-ui-field-label">{$ui.label}</label>
+ </div>
+ <div class="cell small-12">
+ <input
+ class="glm-foundation-6-ui-field-input"
+ type="text"
+ id="{$ui.field}"
+ name="{$ui.field}"
+ value="{$ui.value|escape}"
+ {if isset($ui.pattern) && $ui.pattern}pattern="{$ui.pattern}"{/if}
+ {if $ui.required}required{/if}
+ {if isset($ui.placeholder) && $ui.placeholder}placeholder="{$ui.placeholder}"{/if}
+ {if isset($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
+ {if isset($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
+ {if isset($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
+ {if isset($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
+ />
+ </div>
+ <div class="cell small-12">
+ {if isset($ui.dataError) && $ui.dataError}<span class="form-error is-visible glm-foundation-6-ui-field-data-error">{$ui.dataError}</span>{/if}
+ {if isset($ui.helpText)}<p class="glm-foundation-6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
+ {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-foundation-6-ui-field-error-text">{$ui.errorText}</span>{/if}
+ </div>
+ </div>
+ {/if}
</div>