JS bug fixtures

app/_config/env-check.yml

@@ -0,0 +1,28 @@
+---
+Name: webapp-env-check
+---
+
+SilverStripe\EnvironmentCheck\EnvironmentCheckSuite:
+  registered_checks:
+    curl:
+      definition: 'HasFunctionCheck("curl_init")'
+      title: 'is curl available?'
+    gd:
+      definition: 'HasFunctionCheck("imagecreatetruecolor")'
+      title: 'Does PHP have GD2 support?'
+    db:
+      definition: 'DatabaseCheck("Page")'
+      title: 'Is the database accessible?'
+    url:
+      definition: 'URLCheck()'
+      title: 'Is the homepage accessible?'
+  registered_suites:
+    check:
+      - curl
+      - gd
+      - db
+      - url
+    health:
+      - db
+      - url
+

app/client/src/js/_components/_ui.form.basics.js

@@ -1,6 +1,8 @@
-import 'bootstrap-select/js/bootstrap-select';
-
 import $ from 'jquery';
+
+import 'bootstrap-select/js/bootstrap-select';
+import 'jquery.inputmask/dist/jquery.inputmask.bundle';
+
 import Events from "../_events";
 import SpinnerUI from './_ui.spinner';
 
@@ -19,10 +21,12 @@ const FormBasics = (($) => {
       ui._element = element;
       $element.data(DATA_KEY, this);
 
+      $('[data-inputmask]').inputmask();
+
       const $fields = $element.find('input,textarea,select');
       const $selectFields = $element.find('select:not([readonly])');
       const $radioOptions = $element.find('input[type="radio"]');
-      const separator = ', ';
+      const separator = '::;::';
 
       $selectFields.each((i, el) => {
         const $el = $(el);
@@ -40,7 +44,8 @@ const FormBasics = (($) => {
         }));
 
         // wrap options
-        $el.on('rendered.bs.select', () => {
+        if (maxOptions > 1) {
+          $el.on('rendered.bs.select,changed.bs.select,refreshed.bs.select,loaded.bs.select', () => {
             if (!$el.val().length) {
               return true;
             }
@@ -57,6 +62,7 @@ const FormBasics = (($) => {
 
               html += `<span class="option" data-val=${  $opt.attr('value')  }>${  opt
             } <i class="fas fa-times btn-remove"></i></span>`;
+
             });
 
             $container.html(html);
@@ -77,6 +83,7 @@ const FormBasics = (($) => {
               }
             });
           });
+        }
 
 
         // FIX: hidden picker
@@ -84,6 +91,7 @@ const FormBasics = (($) => {
         $el.selectpicker('refresh');
         $el.selectpicker('toggle');
         document.activeElement.blur();
+        window.scroll(0, 0);
 
         //$el.selectpicker('show');
         //$el.selectpicker('hide');

app/client/src/js/_components/_ui.form.datetime.js

@@ -39,19 +39,30 @@ const DatetimeUI = (($) => {
         $el.datepicker($.extend(datepickerOptions, {
           defaultViewDate: defaultDate,
           multidate: $el.data('multidate'),
-        }));
+        }, $el.data()));
       } else
 
       // timepicker
       if ($el.hasClass('time') || $el.attr('type') === 'time') {
         $el.attr('readonly', 'true');
-        $el.timepicker({
+        $el.timepicker($.extend({
           defaultTime: $el.data('default-time'),
           icons: {
             up: 'fas fa-chevron-up',
             down: 'fas fa-chevron-down',
           },
+        }, $el.data())).on('show.timepicker', (e) => {
+          const $el = $(e.currentTarget);
+          const $dropdown = $Body.find('.bootstrap-timepicker-widget');
+          $dropdown.find('tbody').append('<tr><td colspan="5"><a href="#" data-action="clear">Clear</a></td></tr>');
+          const $clearBtn = $dropdown.find('[data-action="clear"]');
+          $clearBtn.on('click', (e) => {
+            e.preventDefault();
+            $el.timepicker('clear');
+            $el.timepicker('hideWidget');
+          })
         });
+
       }
     }
 

composer.json

@@ -31,7 +31,8 @@
         "innoweb/silverstripe-sitemap": "*",
         "silverstripe/multiuser-editing-alert": "*",
         "gorriecoe/silverstripe-link": "*",
-        "gorriecoe/silverstripe-linkfield": "*"
+        "gorriecoe/silverstripe-linkfield": "*",
+        "silverstripe/environmentcheck": "*"
     },
     "require-dev": {
         "phpunit/phpunit": "^5.7",

package.json

@@ -42,6 +42,7 @@
         "jquery-hammerjs": "^2.0.0",
         "jquery-zoom": "^1.7.21",
         "jquery.appear": "^1.0.1",
+        "jquery.inputmask": "^3.3.4",
         "meta-lightbox": "^1.0.0",
         "offcanvas-bootstrap": "^2.5.2",
         "popper.js": "^1.15.0",