<p>{$ui.label}</p>
</div>
{/if}
+
<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}{if !empty($ui.required)} required{/if}>
+ <input
+ class="switch-input"
+ id="{$ui.field}"
+ type="checkbox"
+ name="{$ui.field}"{if !empty($ui.value)}
+ checked{/if}
+ {if !empty($ui.required)} required{/if}
+ onChange="glmFormDataChangesPending = true;"
+ >
<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>
--- /dev/null
+{*
+ Foundation 6 UI - Form Edit End
+
+*}
+ </div>
+</div>
--- /dev/null
+{*
+ Foundation 6 UI - Form Edit Start
+
+ Starts the edit version of the form. There's also a Form Summary Start which starts a summary of the data.
+ These two are used together to let the user toggle between a summary of the data and a form to edit the data.
+
+ The area between "Form Edit Start" and "Form Edit End" is intended to be a collection of
+ desired Foundation 6 based HTML that will display actual form.
+
+ {$ui = [
+ 'id' => string required Form ID - Use the same ID for the form summary and edit sections,
+ title' => string Optional title
+ ]}
+*}
+<div id="{$ui.id}_edit" class="cell small-12 large-{$glm_f6_ui_wrapsize}">
+ <div class="grid-x">
+ <div class="cell small-12 glm-f6-ui-form-edit-start">
+ <button id="{$ui.id}_summary_button" type="button" class="button">Summary Only</button>
+ {if !empty($ui.title)}<span class="glm-f6-ui-form-edit-title">{$ui.title}</span]>{/if}
+ </div>
+ <script>
+ jQuery(document).ready(function($) {
+ $('#{$ui.id}_edit').hide();
+ $('#{$ui.id}_summary_button').click(function(){
+ $('#{$ui.id}_edit').fadeOut('slow', function() {
+ $('#{$ui.id}_summary').fadeIn('slow');
+ });
+ });
+ });
+ </script>
-{* Form End *}
+{*
+ Foundation 6 UI - Form End
+
+*}
</form>
--- /dev/null
+{*
+ Foundation 6 UI - Form Summary End
+
+*}
+ </div>
+</div>
--- /dev/null
+{*
+ Foundation 6 UI - Form Summary Start
+
+ Starts the summary only version of the form. There's also a Form Edit Start which starts the actual edit and submit form.
+ These two are used together to let the user toggle between a summary of the data and a form to edit the data.
+
+ The area between "Form Summary Start" and "Form Summary End" is intended to be a single UI element that contains any
+ desired Foundation 6 based HTML that will a text only summary (no form fields) summry of the current form data.
+
+ {$ui = [
+ 'id' => string required Form id
+ 'title' => string Optional title
+ ]}
+*}
+<div id="{$ui.id}_summary" class="cell small-12 large-{$glm_f6_ui_wrapsize}" styl="display: none;">
+ <div class="grid-x">
+ <div class="cell small-12 glm-f6-ui-form-summary-start">
+ <button id="{$ui.id}_edit_button" type="button" class="button">Edit</button>
+ {if !empty($ui.title)}<span class="glm-f6-ui-form-summary-title">{$ui.title}</span]>{/if}
+ </div>
+ <script>
+ jQuery(document).ready(function($){
+ $('#{$ui.id}_summary').show();
+ $('#{$ui.id}_edit_button').click(function(){
+ $('#{$ui.id}_summary').fadeOut('slow', function() {
+ $('#{$ui.id}_edit').fadeIn('slow');
+ });
+ });
+ });
+ </script>
{*
- Foundation 6 - Grid End
- </div>
+ Foundation 6 UI - Grid End
+
+ {$ui = [
+ 'noFoundationInit' => boolean Do not init Foundation 6
+ Only the last "grid-end" should do the init. If you have multiple "grid-end" then
+ be sure to set this value to true for all but the last one.
+ ]}
+
*}
</div>
Foundation 6 UI - Grid Start
{$ui = [
- 'nowrap' => string True if no sections should wrap to the right,
+ 'nowrap' => boolean True if no sections should wrap to the right,
'backgroundColor' => string Background color of overall grid area,
'sectionColor' => string background color of sections
]}
.glm-f6-ui-section-start {
background-color: {$glm_f6_ui_section_color} !important;
}
+ .glm-f6-ui-section-start-nobackgroundcolor {
+ background-color: transparent !important;
+ }
+ .glm-f6-ui-form-summary-start {
+ margin-bottom: 1rem;
+ }
+ .glm-f6-ui-form-edit-start {
+ margin-bottom: 1rem;
+ }
+ .glm-f6-ui-form-summary-title {
+ margin-left: 1rem;
+ font-size: 1.1rem;
+ font-weight: bold;
+ }
+ .glm-f6-ui-form-edit-title {
+ margin-left: 1rem;
+ font-size: 1.1rem;
+ font-weight: bold;
+ }
.glm-f6-ui-field {
margin-bottom: 1rem !important;
}
.glm-f6-ui-text-line {
margin-bottom: 1rem !important;
}
+ .glm-f6-ui-nowrap {
+ whitespace: nowrap;
+ }
</style>
-<div class="callout grid-container glm-foundation-6-ui">
+<div class="grid-container callout grid-margin-x glm-foundation-6-ui">
{* <div class="grid-x grid-margin-x"> *}
-
-
name="{$ui.field}[]"
multiple="multiple"
size="{$ui.l_size}"
- {if $ui.required}required{/if} >
+ {if $ui.required}required{/if}
+ onChange="glmFormDataChangesPending = true;"
+ >
{if $ui.l_blank}<option value=""></option>{/if}
{if isset($ui.max)}max="{$ui.max}"{/if}
{if !empty($ui.step)}step="{$ui.step}"{/if}
style="width: {$ui.width}rem;"
+ onChange="glmFormDataChangesPending = true;"
>
</div>
<div class="cell auto glm-f6-ui-label-container-right">
</div>
</div>
{/if}
-</div>
\ No newline at end of file
+</div>
--- /dev/null
+{*
+ 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> </br>
+</div>
{*
- Foundation 6 UI - Form Section Start
+ Foundation 6 UI - Section Start
{$ui = [
'title' => string Section title text,
+ 'wrapSize' => integer Override width of subsection in columns, 1 to 12 only.,
+ 'callout' => boolean Use callout background - default true - set to false for no callout or background color
'helpText' => string Additional text to describe this section,
- 'tip' => String to display when hover over question mark on right
+ 'tip' => string String to display when hover over question mark on right
]}
*}
-<div class="cell small-12 large-{$glm_f6_ui_wrapsize}">
+{$glm_f6_ui_section_wrapsize = {$glm_f6_ui_wrapsize} scope="global"}
+{if isset($ui.wrapSize) && $ui.wrapSize}
+ {$glm_f6_ui_section_wrapsize = $ui.wrapSize scope="global"}
+{/if}
+<div class="cell small-12 large-{$glm_f6_ui_section_wrapsize}">
<div class="grid-x grid-margin-x glm-f6-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-f6-ui-section-title">
+ <h3>
+ <span style="padding-right: 1rem;">{$ui.title}</span>
{if isset($ui.tip)}
- <span style="float:right;" data-tooltip title="{$ui.tip}">?</span>
+ <span data-tooltip title="{$ui.tip}" style="font-size: .7rem;"> ?</span>
{/if}
- <h3>{$ui.title}</h3>
+ </h3>
{if isset($ui.helpText)}<p class="help-text">{$ui.helpText}</p>{/if}
</div>
{/if}
- <div class="cell small-12 callout glm-f6-ui-section-start">
+ <div class="cell small-12 {if !isset($ui.callout) || $ui.callout}callout glm-f6-ui-section-start{else} glm-f6-ui-section-start-nobackgroundcolor{/if}">
<div class="grid-x grid-margin-x">
--- /dev/null
+{*
+ Foundation 6 UI - Form Sub-Section End
+ No parameters are needed for Sub-Section-End
+*}
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
--- /dev/null
+{*
+ Foundation 6 UI - Form Sub-Section Start
+
+ {$ui = [
+ 'title' => string Sub-Section title text,
+ 'wrapSize' => integer Width of subsection in columns, 1 to 12 only.
+ 'helpText' => string Additional text to describe this sub-section,
+ 'tip' => string String to display when hover over question mark on right
+ ]}
+*}
+{$glm_f6_ui_subsection_wrapsize = 12 scope="global"}
+{if isset($ui.wrapSize) && $ui.wrapSize}
+ {$glm_f6_ui_subsection_wrapsize = $ui.wrapSize scope="global"}
+{/if}
+<div class="cell small-12 large-{$glm_f6_ui_subsection_wrapsize}">
+ <div class="grid-x grid-margin-x glm-f6-ui-subsection">
+ {if !isset($ui.title)}
+ <span class="glm-required">Field Error: Required field information not supplied!</span>
+ {else}
+ <div class="cell small-12 glm-f6-ui-subsection-title">
+ {if isset($ui.tip)}
+ <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}
+ </div>
+ {/if}
+ <div class="cell small-12 glm-f6-ui-subsection-start">
+ <div class="grid-x grid-margin-x">
<button
{if !empty($ui.id)}id="{$ui.id}"{/if}
{if !empty($ui.submit)}type="submit"{/if}
- class="button {$ui.class|default:'primary'}{if !empty($ui.small)} button-small{/if}"
+ class="glm-form-submit-button button {$ui.class|default:'primary'}{if !empty($ui.small)} button-small{/if}"
>
{$ui.label}
</button>
'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', ...),
+ '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,
'tip' => string String to display when hover over question mark on right
'class' => string Additional Classes for the main cell div
'inputClass' => string Additional Classes for the input
+ '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}
{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 $ui.required} glm-required{/if} glm-f6-ui-field-label">{$ui.label}</label>
+ <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">
<input
type="{$ui.type|default:'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}
{if !empty($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
{if !empty($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
{if !empty($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
+ onChange="glmFormDataChangesPending = true;"
/>
</div>
<div class="cell small-12 glm-f6-ui-field-messages">
</div>
{/if}
</div>
+
+
projects / WP-Plugins / glm-member-db.git / commitdiff