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,43 +44,46 @@ const FormBasics = (($) => {
         }));
 
         // wrap options
-        $el.on('rendered.bs.select', () => {
-          if (!$el.val().length) {
-            return true;
-          }
+        if (maxOptions > 1) {
+          $el.on('rendered.bs.select,changed.bs.select,refreshed.bs.select,loaded.bs.select', () => {
+            if (!$el.val().length) {
+              return true;
+            }
 
-          const $container = $el.parent().find('.filter-option-inner-inner');
-          const val = $container.text();
-          const vals = val.split(separator);
-          let html = '';
+            const $container = $el.parent().find('.filter-option-inner-inner');
+            const val = $container.text();
+            const vals = val.split(separator);
+            let html = '';
+
+            vals.forEach((opt) => {
+              const $opt = $el.find('option').filter((i, e) => {
+                return $(e).text() === opt;
+              });
+
+              html += `<span class="option" data-val=${  $opt.attr('value')  }>${  opt
+            } <i class="fas fa-times btn-remove"></i></span>`;
 
-          vals.forEach((opt) => {
-            const $opt = $el.find('option').filter((i, e) => {
-              return $(e).text() === opt;
             });
 
-            html += `<span class="option" data-val=${  $opt.attr('value')  }>${  opt 
-            } <i class="fas fa-times btn-remove"></i></span>`;
+            $container.html(html);
+
+            // remove value
+            $container.find('.option').on('click', (e) => {
+              e.preventDefault();
+
+              const $opt = $(e.currentTarget);
+              const val = $opt.data('val').toString();
+              //$opt.remove();
+
+              const vals = $el.selectpicker('val');
+              const i = vals.indexOf(val);
+              if (i > -1) {
+                vals.splice(i, 1);
+                $el.selectpicker('val', vals);
+              }
+            });
           });
-
-          $container.html(html);
-
-          // remove value
-          $container.find('.option').on('click', (e) => {
-            e.preventDefault();
-
-            const $opt = $(e.currentTarget);
-            const val = $opt.data('val').toString();
-            //$opt.remove();
-
-            const vals = $el.selectpicker('val');
-            const i = vals.indexOf(val);
-            if (i > -1) {
-              vals.splice(i, 1);
-              $el.selectpicker('val', vals);
-            }
-          });
-        });
+        }
 
 
         // 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",