fomantic-ui 2.9.4-beta.5 → 2.9.4-beta.51

package/src/definitions/behaviors/api.js

@@ -647,7 +647,9 @@
                                 module.debug('Adding error state');
                                 module.set.error();
                                 if (module.should.removeError()) {
-                                    setTimeout(function () { module.remove.error(); }, settings.errorDuration);
+                                    setTimeout(function () {
+                                        module.remove.error();
+                                    }, settings.errorDuration);
                                 }
                             }
                             module.debug('API Request failed', errorMessage, xhr);
@@ -971,7 +973,9 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
+                        module.performance.timer = setTimeout(function () {
+                            module.performance.display();
+                        }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/behaviors/form.js

@@ -538,6 +538,13 @@
                                     fullFields[name].rules.push({ type: rule });
                                 });
                             }
+
+                            $.each(fullFields[name].rules, function (index, rule) {
+                                var ruleName = module.get.ruleName(rule);
+                                if (ruleName === 'empty') {
+                                    module.warn('*** DEPRECATED *** : Rule "empty" for field "' + name + '" will be removed in a future version. -> Use "notEmpty" rule instead.');
+                                }
+                            });
                         });
 
                         return fullFields;
@@ -551,9 +558,10 @@
                             ancillary     = module.get.ancillaryValue(rule),
                             $field        = module.get.field(field.identifier),
                             value         = $field.val(),
-                            prompt        = isFunction(rule.prompt)
-                                ? rule.prompt(value)
-                                : rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule,
+                            promptCheck   = rule.prompt || settings.prompt[ruleName] || settings.text.unspecifiedRule,
+                            prompt        = String(isFunction(promptCheck)
+                                ? promptCheck.call($field[0], value)
+                                : promptCheck),
                             requiresValue = prompt.search('{value}') !== -1,
                             requiresName  = prompt.search('{name}') !== -1,
                             parts,
@@ -591,10 +599,10 @@
                     },
                     settings: function () {
                         if ($.isPlainObject(parameters)) {
-                            if (parameters.fields) {
-                                parameters.fields = module.get.fieldsFromShorthand(parameters.fields);
-                            }
                             settings = $.extend(true, {}, $.fn.form.settings, parameters);
+                            if (settings.fields) {
+                                settings.fields = module.get.fieldsFromShorthand(settings.fields);
+                            }
                             validation = $.extend(true, {}, $.fn.form.settings.defaults, settings.fields);
                             module.verbose('Extending settings', validation, settings);
                         } else {
@@ -711,7 +719,7 @@
                             var
                                 $field       = $(field),
                                 $calendar    = $field.closest(selector.uiCalendar),
-                                name         = $field.prop('name'),
+                                name         = $field.prop('name') || $field.prop('id'),
                                 value        = $field.val(),
                                 isCheckbox   = $field.is(selector.checkbox),
                                 isRadio      = $field.is(selector.radio),
@@ -1237,20 +1245,20 @@
                                 isRequired = $el.prop('required') || $elGroup.hasClass(className.required) || $elGroup.parent().hasClass(className.required),
                                 isDisabled = $el.is(':disabled') || $elGroup.hasClass(className.disabled) || $elGroup.parent().hasClass(className.disabled),
                                 validation = module.get.validation($el),
-                                hasEmptyRule = validation
+                                hasNotEmptyRule = validation
                                     ? $.grep(validation.rules, function (rule) {
-                                        return rule.type === 'empty';
-                                    }) !== 0
+                                        return ['notEmpty', 'checked', 'empty'].indexOf(rule.type) >= 0;
+                                    }).length > 0
                                     : false,
                                 identifier = module.get.identifier(validation, $el)
                             ;
-                            if (isRequired && !isDisabled && !hasEmptyRule && identifier !== undefined) {
+                            if (isRequired && !isDisabled && !hasNotEmptyRule && identifier !== undefined) {
                                 if (isCheckbox) {
                                     module.verbose("Adding 'checked' rule on field", identifier);
                                     module.add.rule(identifier, 'checked');
                                 } else {
-                                    module.verbose("Adding 'empty' rule on field", identifier);
-                                    module.add.rule(identifier, 'empty');
+                                    module.verbose("Adding 'notEmpty' rule on field", identifier);
+                                    module.add.rule(identifier, 'notEmpty');
                                 }
                             }
                         });
@@ -1342,28 +1350,30 @@
                         var
                             identifier    = field.identifier || fieldName,
                             $field        = module.get.field(identifier),
+                            $fieldGroup = $field.closest($group),
                             $dependsField = field.depends
                                 ? module.get.field(field.depends)
                                 : false,
                             fieldValid  = true,
                             fieldErrors = [],
-                            isDisabled = $field.filter(':not(:disabled)').length === 0,
+                            isDisabled = $field.filter(':not(:disabled)').length === 0 || $fieldGroup.hasClass(className.disabled) || $fieldGroup.parent().hasClass(className.disabled),
                             validationMessage = $field[0].validationMessage,
+                            noNativeValidation = field.noNativeValidation || settings.noNativeValidation || $field.filter('[formnovalidate],[novalidate]').length > 0 || $module.filter('[novalidate]').length > 0,
                             errorLimit
                         ;
                         if (!field.identifier) {
                             module.debug('Using field name as identifier', identifier);
                             field.identifier = identifier;
                         }
-                        if (validationMessage) {
+                        if (validationMessage && !noNativeValidation && !isDisabled) {
                             module.debug('Field is natively invalid', identifier);
                             fieldErrors.push(validationMessage);
                             fieldValid = false;
                             if (showErrors) {
-                                $field.closest($group).addClass(className.error);
+                                $fieldGroup.addClass(className.error);
                             }
                         } else if (showErrors) {
-                            $field.closest($group).removeClass(className.error);
+                            $fieldGroup.removeClass(className.error);
                         }
                         if (isDisabled) {
                             module.debug('Field is disabled. Skipping', identifier);
@@ -1491,6 +1501,12 @@
                         module.error.apply(console, arguments);
                     }
                 },
+                warn: function () {
+                    if (!settings.silent) {
+                        module.warn = Function.prototype.bind.call(console.warn, console, settings.name + ':');
+                        module.warn.apply(console, arguments);
+                    }
+                },
                 performance: {
                     log: function (message) {
                         var
@@ -1511,7 +1527,9 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
+                        module.performance.timer = setTimeout(function () {
+                            module.performance.display();
+                        }, 500);
                     },
                     display: function () {
                         var
@@ -1605,6 +1623,7 @@
         name: 'Form',
         namespace: 'form',
 
+        silent: false,
         debug: false,
         verbose: false,
         performance: true,
@@ -1627,6 +1646,7 @@
         errorFocus: true,
         dateHandling: 'date', // 'date', 'input', 'formatter'
         errorLimit: 0,
+        noNativeValidation: false,
 
         onValid: function () {},
         onInvalid: function () {},
@@ -1669,6 +1689,7 @@
             maxValue: '{name} must have a maximum value of {ruleValue}',
             minValue: '{name} must have a minimum value of {ruleValue}',
             empty: '{name} must have a value',
+            notEmpty: '{name} must have a value',
             checked: '{name} must be checked',
             email: '{name} must be a valid e-mail',
             url: '{name} must be a valid url',
@@ -1801,10 +1822,15 @@
         rules: {
 
             // is not empty or blank string
-            empty: function (value) {
+            notEmpty: function (value) {
                 return !(value === undefined || value === '' || (Array.isArray(value) && value.length === 0));
             },
 
+            /* Deprecated */
+            empty: function (value) {
+                return $.fn.form.settings.rules.notEmpty(value);
+            },
+
             // checkbox checked
             checked: function () {
                 return $(this).filter(':checked').length > 0;

package/src/definitions/behaviors/state.js

@@ -482,7 +482,9 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
+                        module.performance.timer = setTimeout(function () {
+                            module.performance.display();
+                        }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/behaviors/visibility.js

@@ -1088,7 +1088,9 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
+                        module.performance.timer = setTimeout(function () {
+                            module.performance.display();
+                        }, 500);
                     },
                     display: function () {
                         var

package/src/definitions/collections/form.less

@@ -162,6 +162,11 @@
     font-family: @inputFont;
     line-height: @textAreaLineHeight;
     resize: @textAreaResize;
+    min-height: @actionTextareaMinHeight;
+}
+.ui.input > textarea {
+    flex: 1 1 auto;
+    max-width: 100%;
 }
 .ui.form textarea:not([rows]) {
     height: @textAreaHeight;
@@ -291,8 +296,10 @@
 
 /* Auto Input */
 .ui.form .fields .field .ui.input input,
-.ui.form .field .ui.input input {
-    width: auto;
+.ui.form .fields .field .ui.input textarea,
+.ui.form .field .ui.input input,
+.ui.form .field .ui.input textarea {
+    width: 100%;
 }
 
 & when (@variationFormEqualWidth) or (@variationFormWide) {
@@ -441,7 +448,8 @@
         input[type="text"]:focus,
         input[type="file"]:focus,
         input[type="url"]:focus,
-        input[type="week"]:focus {
+        input[type="week"]:focus,
+        textarea:focus {
             border-top-right-radius: 0;
             border-bottom-right-radius: 0;
         }
@@ -462,7 +470,8 @@
         input[type="text"],
         input[type="file"],
         input[type="url"],
-        input[type="week"] {
+        input[type="week"],
+        textarea {
             border-bottom-left-radius: 0;
             border-top-left-radius: 0;
         }
@@ -857,6 +866,7 @@
     .ui.form .inverted.segment label,
     .ui.form .inverted.segment .ui.checkbox label,
     .ui.inverted.form .ui.checkbox label,
+    .ui.inverted.form .grouped.fields > label,
     .ui.inverted.form .inline.fields > label,
     .ui.inverted.form .inline.fields .field > label,
     .ui.inverted.form .inline.fields .field > p,

package/src/definitions/collections/grid.less

@@ -1723,10 +1723,10 @@
             border-top: none !important;
         }
         & when (@variationGridInverted) {
-            .ui.inverted.stackable.celled.grid > .column:not(.row),
-            .ui.inverted.stackable.divided.grid > .column:not(.row),
-            .ui.inverted.stackable.celled.grid > .row > .column,
-            .ui.inverted.stackable.divided.grid > .row > .column {
+            .ui.ui.inverted.stackable.celled.grid > .column:not(.row),
+            .ui.ui.inverted.stackable.divided.grid > .column:not(.row),
+            .ui.ui.inverted.stackable.celled.grid > .row > .column,
+            .ui.ui.inverted.stackable.divided.grid > .row > .column {
                 border-top: @stackableInvertedMobileBorder;
             }
         }

package/src/definitions/collections/table.less

@@ -117,16 +117,16 @@
 .ui.table > tfoot > tr > td:first-child {
     border-left: none;
 }
-.ui.table > tfoot > tr:first-child > th:first-child,
-.ui.table > tfoot > tr:first-child > td:first-child {
+.ui.table > tfoot > tr:last-child > th:first-child,
+.ui.table > tfoot > tr:last-child > td:first-child {
     border-radius: 0 0 0 @borderRadius;
 }
-.ui.table > tfoot > tr:first-child > th:last-child,
-.ui.table > tfoot > tr:first-child > td:last-child {
+.ui.table > tfoot > tr:last-child > th:last-child,
+.ui.table > tfoot > tr:last-child > td:last-child {
     border-radius: 0 0 @borderRadius 0;
 }
-.ui.table > tfoot > tr:first-child > th:only-child,
-.ui.table > tfoot > tr:first-child > td:only-child {
+.ui.table > tfoot > tr:last-child > th:only-child,
+.ui.table > tfoot > tr:last-child > td:only-child {
     border-radius: 0 0 @borderRadius @borderRadius;
 }
 
@@ -458,13 +458,21 @@
         display: block;
         overflow-y: scroll;
         overscroll-behavior: @overscrollBehavior;
-        scrollbar-width: thin; /* Firefox */
         & > tr {
             display: table;
             table-layout: fixed;
             width: 100%;
         }
     }
+    & when (@useCustomScrollbars) {
+        @supports (-moz-appearance: none) {
+            .ui.scrolling.table > thead,
+            .ui.scrolling.table > tfoot,
+            .ui.scrolling.table > tbody {
+                scrollbar-width: thin;
+            }
+        }
+    }
 
     /* Camouflage scrollbars, we need them only to gain the same width as tbody */
     .ui.scrolling.table > thead {
@@ -492,61 +500,68 @@
         background: inherit;
         border-radius: @borderRadius;
     }
-
-    /* Firefox & IE */
-    .ui.scrolling.table > thead,
-    .ui.scrolling.table > tfoot {
-        scrollbar-color: currentColor currentColor;
-        & when (@supportIE) {
-            scrollbar-face-color: currentColor;
-            scrollbar-shadow-color: currentColor;
-            scrollbar-track-color: currentColor;
-            scrollbar-arrow-color: currentColor;
-        }
-    }
-    & when (@supportIE) {
-        /* IE scrollbar color needs hex values */
-        @media all and (-ms-high-contrast: none) {
-            .ui.scrolling.table > thead {
-                color: @headerBackgroundHex;
-            }
+    & when (@useCustomScrollbars) {
+        @supports (-moz-appearance: none) {
+            .ui.scrolling.table > thead,
             .ui.scrolling.table > tfoot {
-                color: @footerBackgroundHex;
+                scrollbar-color: currentColor currentColor;
             }
-            & when (@variationTableInverted) {
-                .ui.inverted.scrolling.table > thead {
-                    color: @invertedHeaderBackgroundHex;
+        }
+
+        & when (@supportIE) {
+            /* IE scrollbar color needs hex values */
+            @media all and (-ms-high-contrast: none) {
+                .ui.scrolling.table > thead,
+                .ui.scrolling.table > tfoot {
+                    scrollbar-face-color: currentColor;
+                    scrollbar-shadow-color: currentColor;
+                    scrollbar-track-color: currentColor;
+                    scrollbar-arrow-color: currentColor;
+                }
+                .ui.scrolling.table > thead {
+                    color: @headerBackgroundHex;
                 }
-                .ui.inverted.scrolling.table > tfoot {
-                    color: @invertedFooterBackgroundHex;
+                .ui.scrolling.table > tfoot {
+                    color: @footerBackgroundHex;
+                }
+                & when (@variationTableInverted) {
+                    .ui.inverted.scrolling.table > thead {
+                        color: @invertedHeaderBackgroundHex;
+                    }
+                    .ui.inverted.scrolling.table > tfoot {
+                        color: @invertedFooterBackgroundHex;
+                    }
                 }
             }
         }
-    }
-    & when (@variationTableInverted) {
-        .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-track {
-            background: @trackInvertedBackground;
-        }
-        .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb {
-            background: @thumbInvertedBackground;
-        }
-        .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:window-inactive {
-            background: @thumbInvertedInactiveBackground;
-        }
-        .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:hover {
-            background: @thumbInvertedHoverBackground;
-        }
-        .ui.inverted.scrolling.table > tbody {
+        & when (@variationTableInverted) {
+            .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-track {
+                background: @trackInvertedBackground;
+            }
+            .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb {
+                background: @thumbInvertedBackground;
+            }
+            .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:window-inactive {
+                background: @thumbInvertedInactiveBackground;
+            }
+            .ui.inverted.scrolling.table > tbody::-webkit-scrollbar-thumb:hover {
+                background: @thumbInvertedHoverBackground;
+            }
             & when (@supportIE) {
-                /* IE11 */
-                scrollbar-face-color: @thumbInvertedBackgroundHex;
-                scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-                scrollbar-track-color: @trackInvertedBackgroundHex;
-                scrollbar-arrow-color: @trackInvertedBackgroundHex;
+                .ui.inverted.scrolling.table > tbody {
+                    /* IE11 */
+                    scrollbar-face-color: @thumbInvertedBackgroundHex;
+                    scrollbar-shadow-color: @thumbInvertedBackgroundHex;
+                    scrollbar-track-color: @trackInvertedBackgroundHex;
+                    scrollbar-arrow-color: @trackInvertedBackgroundHex;
+                }
+            }
+            @supports (-moz-appearance: none) {
+                .ui.inverted.scrolling.table > tbody {
+                    /* firefox: first color thumb, second track */
+                    scrollbar-color: @thumbInvertedBackground @trackInvertedBackground;
+                }
             }
-
-            /* firefox: first color thumb, second track */
-            scrollbar-color: @thumbInvertedBackground @trackInvertedBackground;
         }
     }
     & when (@variationTableResizable) {

package/src/definitions/elements/button.less

@@ -885,7 +885,7 @@
                 border-top: @basicGroupBorder;
             }
 
-            .ui.basic.vertical.buttons:not(.spaced) .button:first-child {
+            .ui.basic.vertical.buttons:not(.spaced):not(.circular) .button:first-child {
                 border-top: none;
             }
         }
@@ -1095,8 +1095,8 @@
     /* --------------
         Circular
     --------------- */
-
-    .ui.circular.button {
+    .ui.ui.circular.buttons .button,
+    .ui.ui.ui.ui.circular.button {
         border-radius: @circularBorderRadius;
     }
 
@@ -1104,6 +1104,28 @@
         width: @circularIconWidth;
         vertical-align: baseline;
     }
+
+    .ui.circular.buttons:not(.vertical) .button {
+        margin-right: @circularGroupMargin;
+    }
+
+    & when (@variationButtonVertical) {
+        .ui.vertical.circular.buttons .button {
+            margin-bottom: @circularVerticalGroupMargin;
+        }
+    }
+
+    & when (@variationButtonBasic) {
+        .ui.circular.basic.buttons {
+            border: none;
+            & .button {
+                border: @basicGroupBorder;
+                &.basic {
+                    border: none;
+                }
+            }
+        }
+    }
 }
 
 & when (@variationButtonOr) {

package/src/definitions/elements/header.less

@@ -467,6 +467,11 @@
     .ui.bottom.attached.header {
         border-radius: 0 0 @attachedBorderRadius @attachedBorderRadius;
     }
+    & when (@variationHeaderSeamless) {
+        .ui.seamless.attached:not(.bottom).header {
+            border-bottom: none;
+        }
+    }
 
     /* Attached Sizes */
     .ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {

package/src/definitions/elements/input.less

@@ -35,7 +35,7 @@
 .ui.input > input {
     margin: 0;
     max-width: 100%;
-    flex: 1 0 auto;
+    flex: 1 1 auto;
     outline: none;
     -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
     text-align: @textAlign;
@@ -524,7 +524,11 @@
         .ui.form .field.@{state} > .ui.action.input:not([class*="left action"]) > input + .ui.button,
         .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > input + .ui.label,
         .ui.action.input.@{state}:not([class*="left action"]) > input + .ui.button,
-        .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > input + .ui.label {
+        .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > input + .ui.label,
+        .ui.form .field.@{state} > .ui.action.input:not([class*="left action"]) > textarea + .ui.button,
+        .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > textarea + .ui.label,
+        .ui.action.input.@{state}:not([class*="left action"]) > textarea + .ui.button,
+        .ui.right.labeled.input.@{state}:not([class*="corner labeled"]) > textarea + .ui.label {
             border-right: @borderWidth solid @borderColor;
         }
         .ui.form .field.@{state} > .ui.right.labeled.input:not([class*="corner labeled"]) > .ui.label:first-child,
@@ -553,14 +557,16 @@
     }
 
     /* Input when ui Left */
-    .ui[class*="left action"].input > input {
+    .ui[class*="left action"].input > input,
+    .ui[class*="left action"].input > textarea {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
         border-left-color: transparent;
     }
 
     /* Input when ui Right */
-    .ui.action.input:not([class*="left action"]) > input {
+    .ui.action.input:not([class*="left action"]) > input,
+    .ui.action.input:not([class*="left action"]) > textarea {
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
         border-right-color: transparent;
@@ -584,11 +590,13 @@
     }
 
     /* Input Focus */
-    .ui.action.input:not([class*="left action"]) > input:focus {
+    .ui.action.input:not([class*="left action"]) > input:focus,
+    .ui.action.input:not([class*="left action"]) > textarea:focus {
         border-right-color: @focusBorderColor;
     }
 
-    .ui.ui[class*="left action"].input > input:focus {
+    .ui.ui[class*="left action"].input > input:focus,
+    .ui.ui[class*="left action"].input > textarea:focus {
         border-left-color: @focusBorderColor;
     }
 }

package/src/definitions/globals/site.js

@@ -292,7 +292,9 @@
                         });
                     }
                     clearTimeout(module.performance.timer);
-                    module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
+                    module.performance.timer = setTimeout(function () {
+                        module.performance.display();
+                    }, 500);
                 },
                 display: function () {
                     var

package/src/definitions/globals/site.less

@@ -148,18 +148,21 @@ a:hover {
     body ::-webkit-scrollbar-thumb:hover {
         background: @thumbHoverBackground;
     }
-    body .ui {
-        & when (@supportIE) {
+    & when (@supportIE) {
+        body .ui {
             /* IE11 */
             scrollbar-face-color: @thumbBackgroundHex;
             scrollbar-shadow-color: @thumbBackgroundHex;
             scrollbar-track-color: @trackBackgroundHex;
             scrollbar-arrow-color: @trackBackgroundHex;
         }
-
-        /* firefox: first color thumb, second track */
-        scrollbar-color: @thumbBackground @trackBackground;
-        scrollbar-width: thin;
+    }
+    @supports (-moz-appearance: none) {
+        body .ui {
+            /* firefox: first color thumb, second track */
+            scrollbar-color: @thumbBackground @trackBackground;
+            scrollbar-width: thin;
+        }
     }
 
     /* Inverted UI */
@@ -175,18 +178,20 @@ a:hover {
     body .ui.inverted:not(.dimmer)::-webkit-scrollbar-thumb:hover {
         background: @thumbInvertedHoverBackground;
     }
-
-    body .ui.inverted:not(.dimmer) {
-        & when (@supportIE) {
+    & when (@supportIE) {
+        body .ui.inverted:not(.dimmer) {
             /* IE11 */
             scrollbar-face-color: @thumbInvertedBackgroundHex;
             scrollbar-shadow-color: @thumbInvertedBackgroundHex;
             scrollbar-track-color: @trackInvertedBackgroundHex;
             scrollbar-arrow-color: @trackInvertedBackgroundHex;
         }
-
-        /* firefox: first color thumb, second track */
-        scrollbar-color: @thumbInvertedBackground @trackInvertedBackground;
+    }
+    @supports (-moz-appearance: none) {
+        body .ui.inverted:not(.dimmer) {
+            /* firefox: first color thumb, second track */
+            scrollbar-color: @thumbInvertedBackground @trackInvertedBackground;
+        }
     }
 }
 

package/src/definitions/modules/accordion.js

@@ -438,7 +438,9 @@
                             });
                         }
                         clearTimeout(module.performance.timer);
-                        module.performance.timer = setTimeout(function () { module.performance.display(); }, 500);
+                        module.performance.timer = setTimeout(function () {
+                            module.performance.display();
+                        }, 500);
                     },
                     display: function () {
                         var