Bring in changes from Chuck

Bringing in changes from the serverstats plugin ui elements.

diff --git a/views/ui/f6/editor.html b/views/ui/f6/editor.html
index e8ad5b0..559aa45 100644 (file)
--- a/views/ui/f6/editor.html
+++ b/views/ui/f6/editor.html
@@ -12,10 +12,10 @@
             For full list use:  ['buttons' => 'link,strong,code,del,fullscreen,em,li,img,ol,block,ins,more,ul,spell,close']
             Default (false) dissables HTML/TEXT tabs, true enables all.
         'teeny'         => boolean              Use limited version of editor if true.
-        'required'      => boolean  True if required,
-        'helpText'      => string   Help text for this input,
+        'required'      => boolean              True if required,
+        'helpText'      => string               Help text for this input,
         'errorText'     => string               Error text that appears when the field doesn't validate,
-        'dataError'     => string   Error from data Abstract Class
+        'dataError'     => string               Error from data Abstract Class
         'tip'           => string               Tool Tip text
     ]}
 *}

diff --git a/views/ui/f6/number.html b/views/ui/f6/number.html
index 9377d22..695d84c 100644 (file)
--- a/views/ui/f6/number.html
+++ b/views/ui/f6/number.html
@@ -11,6 +11,7 @@
         'suffix'        => string               Suffix text to add after input field,
         'min'           => integer              Minimum numeric value
         'max'           => integer              Maximum numeric value
+        'step'          => integer              Step size when using up/down buttons (spinner)
         '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,
@@ -24,6 +25,31 @@
     {$ui.width = $ui.width * .55 + 2.5}
 {/if}
 
+{* If min or max values are supplied, add validator to check that *}
+{if isset($ui.min) || isset($ui.max)}
+    {$usingNumberValidator = true}
+    <script> 
+        {* 
+            Note that we have to read the attribute since the $ui parameter 
+            has likely been changed by the time this runs.
+        *}
+        jQuery(document).ready(function($) {
+            function glmUiF6NumberValidator($el, required, parent) {
+                var min = $el.attr('min');       
+                if (min !== 'undefined' && (Number($el.val()) < min)) {
+                    return false;
+                }
+                var max = $el.attr('max');
+                if (max !== 'undefined' && (Number($el.val()) > max)) {
+                    return false;
+                }
+                return true;
+            };
+            Foundation.Abide.defaults.validators['number-range'] = glmUiF6NumberValidator;
+        });
+    </script>
+{/if}
+
 <div class="cell small-12 glm-f6-ui-field">
     {if (!isset($ui.value) && !isset($ui.field)) || !isset($ui.label)}
         <span class="glm-required">Field Error: Required field information not supplied!</span>
@@ -32,7 +58,7 @@
             <div class="cell shrink">
                 <input
                     class="glm-f6-ui-field-input-number"
-                    id="{$ui.field}_FieldID"
+                    id="{$ui.field}"
                     type="number"
                     name="{$ui.field}"
                     value="{$ui.value}"
@@ -40,8 +66,10 @@
                     {if !empty($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
                     {if !empty($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
                     {if !empty($ui.placeholder)}placeholder="{$ui.placeholder}"{/if}
-                    {if !empty($ui.min)}min="{$ui.min}"{/if}
-                    {if !empty($ui.min)}max="{$ui.max}"{/if}
+                    {if $usingNumberValidator}data-validator="number-range"{/if}
+                    {if isset($ui.min)}min="{$ui.min}"{/if}
+                    {if isset($ui.max)}max="{$ui.max}"{/if}
+                    {if !empty($ui.step)}step="{$ui.step}"{/if}
                     style="width: {$ui.width}rem;"
                 >
             </div>
@@ -52,9 +80,9 @@
                 <label for="{$ui.field}" class="{if !empty($ui.required)} glm-required{/if} glm-f6-ui-field-label">{$ui.label}</label>
             </div>
             <div class="cell small-12 glm-f6-ui-field-messages">
+                {if !empty($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-f6-ui-field-error-text" data-form-error-for="{$ui.field}">{$ui.errorText}</span>{/if}
                 {if !empty($ui.helpText)}<span class="help-text" id="{$ui.field}_HelpText">{$ui.helpText}</span>{/if}
-                {if !empty($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error">{$ui.errorText}</span>{/if}
             </div>
         </div>
     {/if}
-</div>
+</div>
\ No newline at end of file

diff --git a/views/ui/f6/text.html b/views/ui/f6/text.html
index 5d4eb59..65382d7 100644 (file)
--- a/views/ui/f6/text.html
+++ b/views/ui/f6/text.html
@@ -7,6 +7,7 @@
         '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,
+        'type'        => string             Type attribute for input. Defaults to text
         'pattern'     => string             Pattern attribute ( number, etc. )
         'placeholder' => string             Placeholder string,
         'required'    => boolean            True if required,
@@ -34,7 +35,7 @@
             <div class="cell small-12">
                 <input
                     class="glm-f6-ui-field-input {$ui.inputClass|default:''}"
-                    type="text"
+                    type="{$ui.type|default:'text'}"
                     id="{$ui.field}"
                     name="{$ui.field}"
                     value="{$ui.value|escape}"