margin: 0 0 0.5rem;
}
.glm-usage-admin-wrap .help-text {
- margin-bottom: .5rem;
}
.fix-margin-bottom-for-inputs {
- margin-bottom: .5rem;
}
.glm-usage-admin-wrap .form-error, .glm-usage-admin-wrap .help-text {
- margin-top: 0px;
+}
+.glm-ui-f6-section-start {
+
+}
+.glm-ui-f6-section-end {
+
+}
+.glm-ui-f6-checkbox {
+
+}
+.glm-ui-f6-number {
+
+}
+.glm-ui-f6-text {
+
+}
+.glm-ui-f6-editor {
+
}
wp_enqueue_style('glm-usage-admin-styles');
wp_enqueue_script(
- 'glm-usage-foundation6',
+ 'glm-usage-foundation6-js',
GLM_SERVERSTATS_PLUGIN_URL.'js/foundation-6.min.js',
array('jquery'),
GLM_SERVERSTATS_PLUGIN_VERSION,
true
);
wp_register_style(
- 'glm-usage-foundation6',
+ 'glm-usage-foundation6-css',
GLM_SERVERSTATS_PLUGIN_URL . 'css/foundation-6.min.css',
array(),
GLM_SERVERSTATS_PLUGIN_VERSION
);
- wp_enqueue_style('glm-usage-foundation6');
+ wp_enqueue_style('glm-usage-foundation6-css');
- wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.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');
// Jquery DatePicker
wp_enqueue_script('jquery-ui-datepicker');
- wp_enqueue_style('jquery-style', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css');
+ wp_enqueue_style('jquery-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css');
// Register and enqueue DateTimePicker
wp_register_script(
{include file='header.html'}
<a name="glmPageTop"></a>
- <!-- Server Settings -->
-
<h2>Server Usage Statistics Configuration</h2>
{if $connectError}<p>NOTICE: <span class="glm-error">Unable To Connect - Please check data below</span></p>{/if}
{if $connectionUpdated} {* Place Settings Updatd after first title line *}
<span class="glm-notice glm-flash-updated glm-usage-update-notice">Settings Updated</span>
{/if}
- <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>
-
- <input type="hidden" name="option" value="update_connection">
-
- {* See included UI files for required and optional fields *}
-
- {$fieldData = [
- 'title' => 'Database Connection and Usage Reporting Configuration for This Site'
- ]}
- {include file="ui/f6/section-name.html"}
-
- {* db_name *}
- {$fieldData = [
- 'field' => 'db_name',
- 'label' => 'Database Name',
- 'placeholder' => 'Provided by Gaslight Media Engineering',
- 'required' => true,
- 'maxWidth' => 20,
- 'helpText' => 'We be here!',
- 'errorText' => 'The database name is required for connecting to the usage database.'
- ]}
- {include file="ui/f6/text.html"}
-
- {* db_host *}
- {$fieldData = [
- 'field' => 'db_host',
- 'label' => 'Database Server Hostname',
- 'placeholder' => 'Provided by Gaslight Media Engineering',
- 'required' => true,
- 'helpText' => 'We be here!',
- 'maxWidth' => 20
- ]}
- {include file="ui/f6/text.html"}
-
- {* db_user *}
- {$fieldData = [
- 'field' => 'db_user',
- 'label' => 'Database Username',
- 'placeholder' => 'Provided by Gaslight Media Engineering',
- 'required' => true,
- 'maxWidth' => 20
- ]}
- {include file="ui/f6/text.html"}
-
- {* db_pass *}
- {$fieldData = [
- 'field' => 'db_pass',
- 'label' => 'Database Password',
- 'placeholder' => 'Provided by Gaslight Media Engineering',
- 'required' => true
- ]}
- {include file="ui/f6/text.html"}
-
- {* website *}
- {$fieldData = [
- 'field' => 'website',
- 'label' => 'Default Website Name',
- 'placeholder' => 'Provided by Gaslight Media Engineering',
- 'required' => true
- ]}
- {include file="ui/f6/text.html"}
-
- {* SECTION *}
- {$fieldData = [
- 'title' => 'Usage Notifications for All Sites'
- ]}
- {include file="ui/f6/section-name.html"}
-
- {* show_usage *}
- {$fieldData = [
- 'field' => 'show_usage',
- 'label' => 'Show Data Usage',
- 'helpText' => 'Check this box to have server display website usage information.'
-
- ]}
- {include file="ui/f6/checkbox.html"}
-
- {* send_usage *}
- {$fieldData = [
- 'field' => 'send_usage',
- 'label' => 'Automatically Send Usage Notices Monthly',
- 'helpText' => 'More help stuff. Arent you excited?'
- ]}
- {include file="ui/f6/checkbox.html"}
-
- {* send_percent *}
- {$fieldData = [
- '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"}
-
- {* SECTION *}
- {$fieldData = [
- 'title' => 'Usage Notifications for All Sites'
- ]}
- {include file="ui/f6/section-name.html"}
-
- {* show_notifications *}
- {$fieldData = [
- 'field' => 'show_notifications',
- 'label' => 'Customer Notiifications for This Site'
- ]}
- {include file="ui/f6/checkbox.html"}
-
- {* SECTION *}
- {$fieldData = [
- 'title' => 'Cookie Pop-Ups for This Site'
- ]}
- {include file="ui/f6/section-name.html"}
-
- {* show_cookie_popup *}
- {$fieldData = [
- 'field' => 'show_cookie_popup',
- 'label' => 'Show Cookie Pop-Up'
- ]}
- {include file="ui/f6/checkbox.html"}
-
- {* cookie_popup_timeout *}
- {$fieldData = [
- '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_message *}
- {$fieldData = [
- '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"}
-
- {* SECTION *}
- {$fieldData = [
- 'title' => 'Addional Notices',
- 'helpText' => 'These notices are displayed when the user clicks the "Show more" button.'
- ]}
- {include file="ui/f6/section-name.html"}
-
- {* show_cookie_popup *}
- {$fieldData = [
- 'field' => 'show_cookie_popup',
- 'label' => 'Show Cookie Pop-Up'
- ]}
- {include file="ui/f6/checkbox.html"}
+ {* 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>
+
+ <input type="hidden" name="option" value="update_connection">
+
+ {include file="ui/f6/grid-start.html"}
+
+ {* Section Start *}
+ {$ui = [
+ 'title' => 'Database Connection'
+ ]}
+ {include file="ui/f6/section-start.html"}
+
+ {* db_name *}
+ {$ui = [
+ 'field' => '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',
+ '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',
+ 'label' => 'Database Username',
+ 'placeholder' => 'Provided by Gaslight Media Engineering',
+ 'required' => true,
+ 'maxWidth' => 20
+ ]}
+ {include file="ui/f6/text.html"}
+
+ {* db_pass *}
+ {$ui = [
+ 'field' => 'db_pass',
+ 'label' => 'Database Password',
+ 'placeholder' => 'Provided by Gaslight Media Engineering',
+ 'required' => true
+ ]}
+ {include file="ui/f6/text.html"}
+
+ {* website *}
+ {$ui = [
+ 'field' => 'website',
+ 'label' => 'Default Website Name',
+ 'placeholder' => 'Provided by Gaslight Media Engineering',
+ 'required' => true
+ ]}
+ {include file="ui/f6/text.html"}
+
+ {include file="ui/f6/section-end.html"}
+
+ {* Section Start *}
+ {$ui = [
+ 'title' => 'Usage Notifications for All Sites'
+ ]}
+ {include file="ui/f6/section-start.html"}
+
+ {* show_usage *}
+ {$ui = [
+ 'field' => 'show_usage',
+ 'label' => 'Show Data Usage',
+ 'helpText' => 'Check this box to have server display website usage information.'
+
+ ]}
+ {include file="ui/f6/checkbox.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"}
+
+ {* 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"}
+
+ {include file="ui/f6/section-end.html"}
+
+ {include file="ui/f6/grid-end.html"}
+<!--
+ {* Section Start *}
+ {$ui = [
+ 'title' => 'Usage Notifications for All Sites'
+ ]}
+ {include file="ui/f6/section-start.html"}
+
+ {* show_usage *}
+ {$ui = [
+ 'field' => 'show_usage',
+ 'label' => 'Show Data Usage',
+ 'helpText' => 'Check this box to have server display website usage information.'
+
+ ]}
+ {include file="ui/f6/checkbox.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"}
+
+ {* 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"}
+
+ {include file="ui/f6/section-end.html"}
+
+ {* Section Start *}
+ {$ui = [
+ 'title' => 'Usage Notifications for All Sites'
+ ]}
+ {include file="ui/f6/section-start.html"}
+
+ {* show_notifications *}
+ {$ui = [
+ 'field' => 'show_notifications',
+ 'label' => 'Customer Notiifications for This Site'
+ ]}
+ {include file="ui/f6/checkbox.html"}
+
+ {include file="ui/f6/section-end.html"}
+
+ {* Section Start *}
+ {$ui = [
+ 'title' => 'Cookie Pop-Ups for This Site'
+ ]}
+ {include file="ui/f6/section-start.html"}
+
+ {* show_cookie_popup *}
+ {$ui = [
+ 'field' => 'show_cookie_popup',
+ 'label' => 'Show Cookie Pop-Up'
+ ]}
+ {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_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"}
+
+ {include file="ui/f6/section-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 *}
+ {$ui = [
+ 'field' => 'show_cookie_popup',
+ 'label' => 'Show Cookie Pop-Up'
+ ]}
+ {include file="ui/f6/checkbox.html"}
+
+ {include file="ui/f6/section-end.html"}
-<!--
<tr>
<th>Additional Notices</th>
-->
- <p><br><input type="submit" value="Save Changes" class="button-primary"></p>
- </form>
+ <p><br><input type="submit" value="Save Changes" class="button-primary"></p>
+ </form>
+
+ </div>
+ {* End of user interface using view UI elements *}
+
- <script type="text/javascript">
+ <script>
jQuery(document).ready(function($) {
</div> {* /admin wrapper *}
-<script type="text/javascript">
+<script>
jQuery(document).ready(function($) {
$(document).foundation();
});
--- /dev/null
+Layout Notes for how ui components and Foundation classes all fit together.
+Also includes standard classes for various divs.
+
+
+grid-start.html <div class="grid-container callout glm-foundation-6-ui">
+ . <div class="grid-x grid-margin-x">
+
+something.html <div class="cell small-12">
+ . (some content)
+ . </div>
+
+section-start.html <div class="cell small-12 large-6">
+ . <div class="grid-x grid-margin-x glm-foundation-6-ui-section">
+ . <div class="cell small-12 glm-foundation-6-ui-section-title">
+ . <h3>title</h3>
+ . </div>
+ . <div class="cell small-12 glm-foundation-6-ui-section-start">
+ . <div class="grid-x grid-margin-x">
+
+field-something.html <div class="cell small-12 glm-foundation-6-ui-field">
+ . (some field label, input, ...)
+ . </div>
+
+section-end.html </div>
+ </div>
+ . </div>
+ . </div>
+
+grid-end.html </div>
+ . </dic>
\ No newline at end of file
Only 0ne of $data or $field may be used.
Do not list fields if they're false. (We're not checking for false)
- {$fieldData = [
- 'data' => array Data from data abstract if using that,
+ {$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,
+ '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
]}
*}
-{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>
-{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="checkbox" id="{$field}" name="{$field}"{if $data.fieldData.$field.value} checked{/if}> Yes
- {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
- </div>
- </div>
- {else}
- <div class="small-12 columns">
- <label for="{$fieldData.field}_FieldID" class="{if $fieldData['required']} glm-required{/if}">
- <input
- id="{$fieldData.field}_FieldID"
- type="checkbox"
- name="{$fieldData.field}"
- value="{${$fieldData.field}}"
- {if isset($fieldData.helpText)}aria-describedby="{$fieldData.field}_HelpText"{/if}
- >
- {$fieldData.label}:
- {if isset($fieldData.helpText)}<p class="help-text" id="{$fieldData.field}_HelpText">{$fieldData.helpText}</p>{/if}
- </label>
- </div>
- {/if}
-{/if}
+<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>
+
{*
- Foundation 6 Text Area Input Field
+ Foundation 6 Editor
All parameters are required.
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
"required" will be supplied by the abstract rather than in a parameter in
this array.
- {$fieldData = [
- 'data' => array Data from data abstract if using that,
+ {$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,
- 'placeholder' => string Placeholder string,
+ 'height' => integer Height in px,
+ 'media' => boolean Enable Media Button,
+ 'quicktags' => boolean Enable Quicktags,
'required' => boolean True if required,
- 'maxWidth' => string Size of input field using standard style notation ('900px', '15rem', ...),
'helpText' => string Help text for this input,
- 'errortext' => string Error text that appears when the field doesn't validate
+ 'errortext' => string Error text that appears when the field doesn't validate,
+ 'dataError' => string Error from data Abstract Class
]}
*}
-{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 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>
+ {if isset($ui.value) && $ui.value}
+ {$textAreaContent = $ui.value|escape:quotes}
+ {else}
+ {$textAreaContent = ''}
+ {/if}
+ {$textAreaName = $ui.field}
+ {if isset($ui.height)} {$height = $ui.height} {else} {$height = 100} {/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)
+ )}
+ <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}
+ {if isset($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
</div>
-{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="{$fieldData.field}" class="{if $fieldData['data'].fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
- </div>
- <div class="cell small-12 medium-9">
- <input type="text" id="{$field}" name="{$field}" value="{$data.fieldData.$field|escape}" {if $data.fieldRequired.$field}required{/if} placeholder="{$placeholder}" />
- {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
- </div>
- </div>
- {else} {* Using simple field *}
- <div class="small-12 columns">
- <label class="{if $fieldData.required} glm-required{/if}">{$fieldData.label}:
- <div
- {if isset($fieldData.helpText)}aria-describedby="{$fieldData.field}_HelpText"{/if}
- {if isset($fieldData.maxWidth)}style="width: {$fieldData.maxWidth} !important;"{/if}
- >
- {$editorOptions = '
- {
- "media_buttons": false,
- "quicktags": false'
- }
- {if isset($fieldData.height)}{$editorOptions = $editorOptions|cat:',
- "editor_height": '|cat:$fieldData.height}{/if}
- {if isset($fieldData.rows)}{$editorOptions = $editorOptions|cat:',
- "textarea_rows": '|cat:$fieldData.rows}{/if}
- {$editorOptions = $editorOptions|cat:'
- }'}
- {wp_editor(
- ${$fieldData.field},
- $fieldData.field,
- json_decode($editorOptions, true)
- )}
-
- {if isset($fieldData.helpText)}<p class="help-text" id="{$fieldData.field}_HelpText">{$fieldData.helpText}</p>{/if}
- {if isset($fieldData.errorText)}<span id="{$fieldData.field}_ErrorText" class="form-error">{$fieldData.errorText}</span>{/if}
- </div>
- </label>
- </div>
- {/if}
-{/if}
+</div>
--- /dev/null
+<div data-abide-error class="alert callout" style="display: none;">
+ <p><i class="fi-alert"></i> There are some errors in your form.</p>
+</div>
+++ /dev/null
-{* Foundation 6 Image *}
-{* setup $data *}
-{* setup $field *}
-{* setup $fieldLabel *}
-<div class="grid-x grid-margin-x">
- <div class="cell small-12 medium-3">
- <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}:</label>
- </div>
- <div class="cell small-12 medium-9">
- <div {if $data.fieldFail.$field}class="glm-form-bad-input" data-tabid="glm-member-info-images"{/if}>
- {if $data.fieldData.$field}
- <div class="glm-row">
- <div class="glm-small-12 glm-medium-6">
- <div class="glm-galleryImage" data-id="{$field}">
- <img src="{$glmPluginMediaUrl}/images/small/{$data.fieldData.$field}">
- </div>
- </div>
- <div class="glm-small-11 glm-medium-6 glm-right">
- <br>
- <input type="checkbox" name="{$field}_delete"> Delete {$fieldLabel}<br>
- <span>{$data.fieldData.$field}</span>
- <br>
- </div>
- </div>
- {/if}
- <div class="glm-center"><b>New {$fieldLabel}</b> <input type="file" name="{$field}_new"></div>
- <div id="glm-galleryImageLarger_image" class="glm-imageDialog"><img src="{$glmPluginMediaUrl}/images/large/{$data.fieldData.$field}"></div>
- {if $data.fieldFail.$field}<p>{$data.fieldFail.$field}</p>{/if}
- </div>
- </div>
-</div>
+++ /dev/null
-{* Foundation 6 Select *}
-{* setup $data *}
-{* setup $field *}
-{* setup $fieldLabel *}
-<div class="grid-x grid-margin-x">
- <div class="cell small-12 medium-3">
- <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
- </div>
- <div class="cell small-12 medium-9">
- <select id="{$field}" name="{$field}" required>
- <option value=""></option>
- {foreach from=$data.fieldData.$field.list item=v}
- <option value="{$v.value}"{if isset($v.default) && $v.default} selected="selected"{/if}>{$v.name}</option>
- {/foreach}
- </select>
- {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
- </div>
-</div>
--- /dev/null
+{*
+ Foundation 6 - Grid End
+*}
+ </div>
+</div>
--- /dev/null
+{*
+ Foundation 6 - Grid Start
+*}
+<style>
+ .glm-foundation-6-ui {
+ }
+ .glm-foundation-6-ui-section {
+ }
+ .glm-foundation-6-ui-section-title {
+ margin-top: 1rem;
+ }
+ .glm-foundation-6-ui-section-start {
+ }
+ .glm-foundation-6-ui-field {
+ }
+ .glm-foundation-6-ui-field-label {
+ }
+ .glm-foundation-6-ui-field-input {
+ }
+ .glm-foundation-6-ui-field-data-error {
+ }
+ .glm-foundation-6-ui-field-help-text {
+ }
+ .glm-foundation-6-ui-field-error-text {
+ }
+</style>
+<div class="grid-container callout grid-margin-x glm-foundation-6-ui">
+ <div class="grid-x grid-margin-x">
+
+
--- /dev/null
+{*
+ Foundation 6 Image Field
+ All parameters are required.
+ 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 = [
+ '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,
+ '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>
+ {/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">
+ {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}
+ </div>
+ </div>
+</div>
--- /dev/null
+{*
+ Foundation 6 Multi Checkboxes Field
+ All parameters are required.
+ 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 Name of field that holds the data if not using data abstract,
+ 'label' => string Label text for this field,
+ 'value' => string Value for this field,
+ 'list' => array Array of list key=value pairs value=>label
+ '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>{$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>
--- /dev/null
+{*
+ Foundation 6 Select Field
+ All parameters are required.
+ 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 = [
+ '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,
+ 'l_label' => string Field name to use for the option textNode
+ 'l_value' => string Field name to use for the option value
+ 'l_blank' => string Add empty option
+ 'l_size' => integer select size,
+ '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>
+ <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}
+
+ {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}
+
+ </div>
+</div>
]}
*}
+
{if (!isset($fieldData.data) && !isset($fieldData.field)) || !isset($fieldData.label)}
<div class="grid-x grid-margin-x">
<div class="cell small-12">
--- /dev/null
+{*
+ Foundation 6 - Form Section End
+ No parameters are needed for Section-End
+*}
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
+++ /dev/null
-{*
- Foundation 6 - Form Section Title
- All parameters are required.
-
- {$fieldData = [
- 'title' => string Section title text,
- 'helpText' => string Additional text to describe this section
- ]}
-*}
-{if !isset($fieldData.title)}
- <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>
-{else}
- <div class="grid-x"> </div>
- <div class="grid-x">
- <div class="small-12">
- <h3>{$fieldData.title}</h3>
- {if isset($fieldData.helpText)}<p class="help-text">{$fieldData.helpText}</p>{/if}
- </div>
- </div>
-{/if}
\ No newline at end of file
--- /dev/null
+{*
+ Foundation 6 - Form Section Start
+ All parameters are required.
+
+ {$ui = [
+ 'title' => string Section title text,
+ 'helpText' => string Additional text to describe this section
+ ]}
+*}
+<div class="cell small-12 large-6">
+ <div class="grid-x grid-margin-x glm-foundation-6-ui-section">
+ {if !isset($ui.title)}
+ <span class="glm-required">Field Error: Required field information not supplied!</span>
+ {else}
+ <div class="cell small-12 glm-foundation-6-ui-section-title">
+ <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 Select Field
+ All parameters are required.
+ 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 = [
+ '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,
+ 'l_label' => string Field name to use for the option textNode
+ 'l_value' => string Field name to use for the option value
+ 'l_blank' => string Add empty option
+ '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>
+ <select
+ id="{$ui.field}"
+ name="{$ui.field}"
+ {if $ui.required}required{/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>
+
+ {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}
+
+ </div>
+</div>
{*
Foundation 6 Text Input Field
- All parameters are required.
- Do not list parameters if they're false. (We're not checking for false)
+
+ 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.
- {$fieldData = [
- 'data' => array Data from data abstract if using that,
- 'field' => string Name of field that holds the data if not using data abstract,
- 'label' => string Label text for this field,
- 'placeholder' => string Placeholder string,
- 'required' => boolean True if required,
- 'maxWidth' => string Size of input field using standard style notation ('900px', '15rem', ...),
- 'maxlength' => integer Maximum number of characters that may be entered,
- 'helpText' => string Help text for this input,
- 'errortext' => string Error text that appears when the field doesn't validate
+ {$ui = [
+ 'field' => string Required Name of field that holds the data or formData array,
+ 'label' => string Required Label text for this field,
+ 'pattern' => string Pattern attribute ( number, etc. )
+ 'placeholder' => string Placeholder string,
+ 'required' => boolean True if required,
+ 'maxWidth' => string Size of input field using standard style notation ('900px', '15rem', ...),
+ '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
]}
*}
-
-{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>
-{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="{$fieldData.field}" class="{if $fieldData.data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
- </div>
- <div class="cell small-12 medium-9">
- <input type="text" id="{$field}" name="{$field}" value="{$data.fieldData.$field|escape}" {if $data.fieldRequired.$field}required{/if} placeholder="{$placeholder}" />
- {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
- </div>
- </div>
- {else} {* Using simple field *}
- <div class="small-12 columns">
- <label for="{$fieldData.field}_FieldID" class="{if $fieldData.required} glm-required{/if}">{$fieldData.label}:
- <input
- id="{$fieldData.field}_FieldID"
- type="text"
- name="{$fieldData.field}"
- value="{${$fieldData.field}}"
- {if isset($fieldData.errorText)}aria-errormessage="{$fieldData.field}_ErrorText"{/if}
- {if isset($fieldData.helpText)}aria-describedby="{$fieldData.field}_HelpText"{/if}
- {if isset($fieldData.required)}required{/if} placeholder="{$fieldData.placeholder}"
- {if isset($fieldData.maxWidth)}style="max-width: {$fieldData.maxWidth}"{/if}
- {if isset($fieldData.maxLength)}max-length="{$fieldData.maxLength}"{/if}
- >
- {if isset($fieldData.helpText)}<p class="help-text" id="{$fieldData.field}_HelpText">{$fieldData.helpText}</p>{/if}
- {if isset($fieldData.errorText)}<span id="{$fieldData.field}_ErrorText" class="form-error">{$fieldData.errorText}</span>{/if}
- </label>
- </div>
- {/if}
-{/if}
+<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}
+</div>
--- /dev/null
+{*
+ Foundation 6 Checkbox Input Field
+ Do not list fields if they're false. (We're not checking for false)
+
+ {$ui = [
+ 'field' => string Name of the data parameter,
+ 'label' => string Label text for this field,
+ 'helpText' => string Help text for this input,
+ ]}
+*}
+
+{if (!isset($ui.data) && !isset($ui.field)) || !isset($ui.label)}
+ <div class="small-12 columns">
+ <span class="glm-required">Field Error: Required field information not supplied!</span>
+ </div>
+{else}
+ <div class="small-12 columns">
+ <label for="{$ui.field}_FieldID" class="{if $ui['required']} glm-required{/if}">
+ <input
+ id="{$ui.field}_FieldID"
+ type="checkbox"
+ name="{$ui.field}"
+ value="{${$ui.field}}"
+ {if isset($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
+ >
+ {$ui.label}:
+ {if isset($ui.helpText)}<p class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</p>{/if}
+ </label>
+ </div>
+{/if}
--- /dev/null
+{*
+ Foundation 6 Text Area Input Field
+ Do not list parameters if they're false. (We're not checking for false)
+
+ {$ui = [
+ 'field' => string Name of the data parameter
+ 'label' => string Label text for this field,
+ 'placeholder' => string Placeholder string,
+ 'required' => boolean True if required,
+ 'maxWidth' => string Size of input field using standard style notation ('900px', '15rem', ...),
+ 'helpText' => string Help text for this input,
+ 'errortext' => string Error text that appears when the field doesn't validate
+ ]}
+*}
+
+{if (!isset($ui.data) && !isset($ui.field)) || !isset($ui.label)}
+ <div class="row">
+ <div class="small-12 columns">
+ <span class="glm-required">Field Error: Required field information not supplied!</span>
+ </div>
+ </div>
+{else}
+ <div class="row">
+ <div class="small-12 columns">
+ <label class="{if $ui.required} glm-required{/if}">{$ui.label}:
+ <div
+ {if isset($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
+ {if isset($ui.maxWidth)}style="width: {$ui.maxWidth} !important;"{/if}
+ >
+ {$editorOptions = '
+ {
+ "media_buttons": false,
+ "quicktags": false'
+ }
+ {if isset($ui.height)}{$editorOptions = $editorOptions|cat:',
+ "editor_height": '|cat:$ui.height}{/if}
+ {if isset($ui.rows)}{$editorOptions = $editorOptions|cat:',
+ "textarea_rows": '|cat:$ui.rows}{/if}
+ {$editorOptions = $editorOptions|cat:'
+ }'}
+ {wp_editor(
+ ${$ui.field},
+ $ui.field,
+ json_decode($editorOptions, true)
+ )}
+
+ {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>
+ </label>
+ </div>
+ </div>
+{/if}
--- /dev/null
+{* Foundation 6 Image *}
+{* setup $data *}
+{* setup $field *}
+{* setup $fieldLabel *}
+<div class="grid-x grid-margin-x">
+ <div class="cell small-12 medium-3">
+ <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}:</label>
+ </div>
+ <div class="cell small-12 medium-9">
+ <div {if $data.fieldFail.$field}class="glm-form-bad-input" data-tabid="glm-member-info-images"{/if}>
+ {if $data.fieldData.$field}
+ <div class="glm-row">
+ <div class="glm-small-12 glm-medium-6">
+ <div class="glm-galleryImage" data-id="{$field}">
+ <img src="{$glmPluginMediaUrl}/images/small/{$data.fieldData.$field}">
+ </div>
+ </div>
+ <div class="glm-small-11 glm-medium-6 glm-right">
+ <br>
+ <input type="checkbox" name="{$field}_delete"> Delete {$fieldLabel}<br>
+ <span>{$data.fieldData.$field}</span>
+ <br>
+ </div>
+ </div>
+ {/if}
+ <div class="glm-center"><b>New {$fieldLabel}</b> <input type="file" name="{$field}_new"></div>
+ <div id="glm-galleryImageLarger_image" class="glm-imageDialog"><img src="{$glmPluginMediaUrl}/images/large/{$data.fieldData.$field}"></div>
+ {if $data.fieldFail.$field}<p>{$data.fieldFail.$field}</p>{/if}
+ </div>
+ </div>
+</div>
--- /dev/null
+{* Foundation 6 Select *}
+{* setup $data *}
+{* setup $field *}
+{* setup $fieldLabel *}
+<div class="grid-x grid-margin-x">
+ <div class="cell small-12 medium-3">
+ <label for="{$field}" class="text-right middle{if $data.fieldRequired.$field} glm-required{/if}">{$fieldLabel}</label>
+ </div>
+ <div class="cell small-12 medium-9">
+ <select id="{$field}" name="{$field}" required>
+ <option value=""></option>
+ {foreach from=$data.fieldData.$field.list item=v}
+ <option value="{$v.value}"{if isset($v.default) && $v.default} selected="selected"{/if}>{$v.name}</option>
+ {/foreach}
+ </select>
+ {if $data.fieldFail.$field}<span class="form-error is-visible">{$data.fieldFail.$field}</span>{/if}
+ </div>
+</div>
--- /dev/null
+{*
+ Foundation 6 - Grid End
+*}
+</div>
--- /dev/null
+{*
+ Foundation 6 - Grid Start
+*}
+<style>
+ .glm-foundation-6-ui {
+ border: 1px gray solid;
+ background-color: #ddd;
+ }
+</style>
+<div class="grid-container fluid glm-foundation-6-ui">
--- /dev/null
+{*
+ Foundation 6 Number Input Field
+ DO NOT include fields if they're false. (We're not checking for false)
+
+ {$ui = [
+ 'field' => string Name of the data parameter,
+ '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,
+ '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($ui.data) && !isset($ui.field)) || !isset($ui.label)}
+ <div class="row">
+ <div class="small-12 columns">
+ <span class="glm-required">Field Error: Required field information not supplied!</span>
+ </div>
+ </div>
+{else}
+ <div class="row">
+ <div class="small-12 columns">
+ <label for="{$ui.field}_FieldID" class="{if $ui.required} glm-required{/if}">
+ <input
+ id="{$ui.field}_FieldID"
+ type="text"
+ pattern="number"
+ name="{$ui.field}"
+ value="{${$ui.field}}"
+ {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}
+ {if isset($ui.maxWidth)}style="width: {$ui.maxWidth}rem !important;"{/if}
+ >
+ {$ui.label}:
+ {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}
+ </label>
+ </div>
+ </div>
+{/if}
--- /dev/null
+{*
+ Foundation 6 - Form Section End
+ No parameters are needed for Section-End
+*}
+ </div>
--- /dev/null
+{*
+ Foundation 6 - Form Section Start
+ All parameters are required.
+
+ {$ui = [
+ 'title' => string Section title text,
+ 'helpText' => string Additional text to describe this section
+ ]}
+*}
+{if !isset($ui.title)}
+ <div class="grid-x">
+ <span class="glm-required">Field Error: Required field information not supplied!</span>
+ </div>
+{else}
+ <div class="grid-x glm-foundation-6-ui-section-start">
+ <div class="cell small-12 medium-12 large-12">
+ <h3>{$ui.title}</h3>
+ {if isset($ui.helpText)}<p class="help-text">{$ui.helpText}</p>{/if}
+ </div>
+
+
+{/if}
\ No newline at end of file
--- /dev/null
+{*
+ Foundation 6 - Form Section End
+ No parameters are needed for Section-End
+
+ {$fieldData = [
+ ]}
+*}
+{if !isset($fieldData.title)}
+ <hr>
+ </div>
+{else}
+ <hr>
+ </div>
+{/if}
\ No newline at end of file
--- /dev/null
+{*
+ Foundation 6 - Form Section Start
+ All parameters are required.
+
+ {$fieldData = [
+ 'title' => string Section title text,
+ 'helpText' => string Additional text to describe this section
+ ]}
+*}
+{if !isset($fieldData.title)}
+ <div class="grid-x grid-margin-x glm-ui-f6-section-start">
+ <div class="cell small-12">
+ <span class="glm-required">Field Error: Required field information not supplied!</span>
+ </div>
+{else}
+ <div class="grid-x"> </div>
+ <div class="grid-x glm-ui-f6-section-start">
+ <div class="small-12">
+ <h3>{$fieldData.title}</h3>
+ {if isset($fieldData.helpText)}<p class="help-text">{$fieldData.helpText}</p>{/if}
+ </div>
+{/if}
\ No newline at end of file
--- /dev/null
+{*
+ Foundation 6 Text Input Field
+ Do not list parameters if they're false. (We're not checking for false)
+
+ {$ui = [
+ 'field' => string Name of the data parameter,
+ 'label' => string Label text for this field,
+ 'placeholder' => string Placeholder string,
+ 'required' => boolean True if required,
+ 'maxWidth' => string Size of input field using standard style notation ('900px', '15rem', ...),
+ 'maxlength' => integer Maximum number of characters that may be entered,
+ 'helpText' => string Help text for this input,
+ 'errortext' => string Error text that appears when the field doesn't validate
+ ]}
+*}
+
+{if (!isset($ui.data) && !isset($ui.field)) || !isset($ui.label)}
+ <div class="grid-x">
+ <div class="cell">
+ <span class="glm-required">Field Error: Required field information not supplied!</span>
+ </div>
+ </div>
+{else}
+ <div class="grid-x glm-foundation-6-ui-text-input">
+ <div class="cell small-12 large-3 ">
+ <label for="{$ui.field}_FieldID" class="{if $ui.required} glm-required{/if}">{$ui.label}:</label>
+ </div>
+ <div class="cell small-12 large-9"
+ <input
+ id="{$ui.field}_FieldID"
+ type="text"
+ name="{$ui.field}"
+ value="{${$ui.field}|escape}"
+ placeholder="{$ui.placeholder}"
+ {if isset($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
+ {if isset($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
+ {if isset($ui.required)}required{/if}
+ {if isset($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
+ {if isset($ui.maxLength)}max-length="{$ui.maxLength}"{/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>
+{/if}
--- /dev/null
+
+<div class="glm-row">
+ <b>{$multiSelectFilterSearchTerm}: </b>
+ <select id="{$multiSelectFilterID}" name="{$multiSelectFilterName}" multiple="multiple" size="1">
+{foreach from=$multiSelectFilterData item=v}
+ <option value="{$v.id}" data-parent="{$v.parent}"{if $v.selected} selected{/if}>
+ {if $v.parent_id} {/if}{$v.name}
+ </option>
+{/foreach}
+ </select>
+</div>
+<script>
+ jQuery(function($){
+ $("#{$multiSelectFilterID}").select2({
+ placeholder: "{$multiSelectFilterPlaceholder}"
+ });
+ });
+</script>
\ No newline at end of file
--- /dev/null
+{* Delete Dialog *}
+{* Set these variables to use the Dialog in your project *}
+{* $itemName = Name of item *}
+{* $deleteUrl = Url to delete item *}
+<a id="deleteButton" class="button button-secondary glm-button glm-right">Delete this {$itemName}</a>
+
+<div id="deleteDialog" class="glm-dialog-box" title="Delete {$itemName}">
+ <center>
+ <p><a id="deleteCancel" class="button button-primary">Cancel</a></p>
+ <p><input id="deleteSubmit" type="submit" value="Delete this {$itemName}"></p>
+ </center>
+ <div class="glm-item-container">
+ <p><center><span class="glm-error">WARNING:</span></center></p>
+ <p>
+ <span class="glm-warning">Clicking the "Delete this {$itemName}" button above will
+ delete all of the data and images associated with this event.
+ </span>
+ </p>
+ <p>
+ <span class="glm-error">
+ Once deleted, this information will no longer be available and cannot be retrieved!
+ If you are unsure that you want to completely remove this data, consider changing the status
+ of this event to "Archived" instead.
+ </span>
+ </p>
+ </div>
+</div>
+
+<script>
+ jQuery(function($){
+
+ // Delete Event dialog
+ $("#deleteDialog").dialog({
+ autoOpen: false,
+ minWidth: 400,
+ dialogClass: "glm-dialog-no-close"
+ });
+ $('#deleteButton').click( function() {
+ $('#deleteDialog').dialog('open');
+ });
+ $('#deleteCancel').click( function() {
+ $("#deleteDialog").dialog("close");
+ });
+ $('#deleteSubmit').click( function() {
+ window.location.replace('{$deleteUrl}');
+ });
+
+ });
+</script>
projects / WP-Plugins / glm-serverstats.git / commitdiff