Support for Silverstripe 5. Add property/return type definitions. Ren…

…ame master/slave (#152)

* Add support for Silverstripe 5. Update test suite
* Rename master/slave. Add property/return types

Co-authored-by: Michal Kleiner <mk@011.nz>

.github/workflows/main.yml

@@ -0,0 +1,11 @@
+name: CI
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  ci:
+    uses: silverstripe/gha-ci/.github/workflows/ci.yml@v1
+    with:
+      js: false

.nvmrc

@@ -0,0 +1 @@
+18

behat.yml

@@ -9,29 +9,26 @@ default:
   suites:
     display-logic:
       paths:
-        - %paths.modules.display-logic%/tests/behat/features
-        - %paths.modules.display-logic%/tests/behat/bootstrap/remove-test-page.feature
+        - '%paths.modules.display-logic%/tests/behat/features'
       contexts:
         - UncleCheese\DisplayLogic\Tests\Behaviour\FeatureContext
         - SilverStripe\Framework\Tests\Behaviour\CmsFormsContext
         - SilverStripe\Framework\Tests\Behaviour\CmsUiContext
         - SilverStripe\BehatExtension\Context\BasicContext
         - SilverStripe\BehatExtension\Context\EmailContext
         - SilverStripe\BehatExtension\Context\LoginContext
-        -
-          SilverStripe\Framework\Tests\Behaviour\ConfigContext:
-            - %paths.modules.display-logic%/tests/behat/files/
-        -
-          UncleCheese\DisplayLogic\Tests\Behaviour\FixtureContext:
-            - %paths.modules.display-logic%/tests/behat/bootstrap/
+        - UncleCheese\DisplayLogic\Tests\Behaviour\FixtureContext:
+            # Note: double indent for args is intentional
+            - '%paths.modules.display-logic%/tests/behat/features/files/'
 
   extensions:
     SilverStripe\BehatExtension\Extension:
       bootstrap_file: vendor/silverstripe/cms/tests/behat/serve-bootstrap.php
-      screenshot_path: %paths.base%/artifacts/screenshots
+      screenshot_path: '%paths.base%/artifacts/screenshots'
       retry_seconds: 4 # default is 2
     SilverStripe\BehatExtension\MinkExtension:
-      default_session: selenium2
-      javascript_session: selenium2
-      selenium2:
-        browser: firefox
+      default_session: facebook_web_driver
+      javascript_session: facebook_web_driver
+      facebook_web_driver:
+        browser: chrome
+        wd_host: "http://127.0.0.1:9515" #chromedriver port

client/dist/styles/bundle.css

@@ -1 +1 @@
-div.displaylogicwrapper.display-logic-hidden,div.field.display-logic-hidden{display:none}@media (min-width:992px){.cms-edit-form:not(.AssetAdmin) .form-group div.display-logic-hidden{display:none}}
+div.field.display-logic-hidden,div.displaylogicwrapper.display-logic-hidden{display:none}@media(min-width: 992px){.cms-edit-form:not(.AssetAdmin) .form-group div.display-logic-hidden{display:none}}

client/src/js/bundle.js

@@ -0,0 +1 @@
+require('./components/display_logic.js');

client/src/components/display_logic.js → client/src/js/components/display_logic.js

@@ -1,12 +1,10 @@
 /* global window */
 import jQuery from 'jquery';
 
-
 jQuery.noConflict();
 
 window.ss = window.ss || {};
 
-
 jQuery.entwine('ss', ($) => {
   const animation = {
     toggle: {
@@ -47,7 +45,7 @@ jQuery.entwine('ss', ($) => {
   };
 
 
-  $('div.display-logic, div.display-logic-master').entwine({
+  $('div.display-logic, div.display-logic-dispatcher').entwine({
 
     escapeSelector(selector) {
       return selector.replace(/(\[)/g, '_').replace(/(\])/g, '');
@@ -163,35 +161,35 @@ jQuery.entwine('ss', ($) => {
 
     onmatch() {
       let allReadonly = true;
-      let masters = [];
+      let dispatchers = [];
       const field = this.getFormField();
 
-      if (field.data('display-logic-eval') && field.data('display-logic-masters')) {
+      if (field.data('display-logic-eval') && field.data('display-logic-dispatchers')) {
         this.data('display-logic-eval', field.data('display-logic-eval'))
-          .data('display-logic-masters', field.data('display-logic-masters'))
+          .data('display-logic-dispatchers', field.data('display-logic-dispatchers'))
           .data('display-logic-animation', field.data('display-logic-animation'));
       }
 
-      masters = this.getMasters();
-      if (masters && masters.length) {
-        Object.entries(masters).forEach(entry => {
+      dispatchers = this.getDispatchers();
+      if (dispatchers && dispatchers.length) {
+        Object.entries(dispatchers).forEach(entry => {
           const [, selector] = entry;
           const holderName = this.nameToHolder(this.escapeSelector(selector));
-          const master = this.closest('form').find(this.escapeSelector(`#${holderName}`));
-          if (!master.is('.readonly')) allReadonly = false;
+          const dispatcher = this.closest('form').find(this.escapeSelector(`#${holderName}`));
+          if (!dispatcher.is('.readonly')) allReadonly = false;
 
-          master.addClass('display-logic-master');
-          if (master.find('input[type=radio]').length) {
-            master.addClass('optionset');
+          dispatcher.addClass('display-logic-dispatcher');
+          if (dispatcher.find('input[type=radio]').length) {
+            dispatcher.addClass('optionset');
           }
-          if (master.find('input[type=checkbox]').length > 1) {
-            master.addClass('checkboxset');
+          if (dispatcher.find('input[type=checkbox]').length > 1) {
+            dispatcher.addClass('checkboxset');
           }
         });
       }
 
-      // If all the masters are readonly fields, the field has no way of displaying.
-      if (masters.length && allReadonly) {
+      // If all the dispatchers are readonly fields, the field has no way of displaying.
+      if (dispatchers.length && allReadonly) {
         this.show();
       }
     },
@@ -206,9 +204,9 @@ jQuery.entwine('ss', ($) => {
       return new Function(`return ${js}`).bind(this)();
     },
 
-    getMasters() {
-      const masters = this.getFormField().data('display-logic-masters');
-      return (masters) ? masters.split(',') : [];
+    getDispatchers() {
+      const dispatchers = this.getFormField().data('display-logic-dispatchers');
+      return (dispatchers) ? dispatchers.split(',') : [];
     },
 
     getAnimationTargets() {
@@ -263,44 +261,44 @@ jQuery.entwine('ss', ($) => {
   });
 
 
-  $('div.display-logic-master input[type="text"], ' +
-    'div.display-logic-master input[type="email"], ' +
-    'div.display-logic-master input[type="number"]').entwine({
+  $('div.display-logic-dispatcher input[type="text"], ' +
+    'div.display-logic-dispatcher input[type="email"], ' +
+    'div.display-logic-dispatcher input[type="number"]').entwine({
     onmatch() {
-      this.closest('.display-logic-master').notify();
+      this.closest('.display-logic-dispatcher').notify();
     },
 
     onkeyup() {
-      this.closest('.display-logic-master').notify();
+      this.closest('.display-logic-dispatcher').notify();
     },
 
     onchange() {
-      this.closest('.display-logic-master').notify();
+      this.closest('.display-logic-dispatcher').notify();
     }
   });
 
 
-  $('div.display-logic-master select').entwine({
+  $('div.display-logic-dispatcher select').entwine({
     onmatch() {
-      this.closest('.display-logic-master').notify();
+      this.closest('.display-logic-dispatcher').notify();
     },
 
     onchange() {
-      this.closest('.display-logic-master').notify();
+      this.closest('.display-logic-dispatcher').notify();
     }
   });
 
-  $('div.display-logic-master :checkbox, div.display-logic-master :radio').entwine({
+  $('div.display-logic-dispatcher :checkbox, div.display-logic-dispatcher :radio').entwine({
     onmatch() {
-      this.closest('.display-logic-master').notify();
+      this.closest('.display-logic-dispatcher').notify();
     },
 
     onclick() {
-      this.closest('.display-logic-master').notify();
+      this.closest('.display-logic-dispatcher').notify();
     }
   });
 
-  $('div.display-logic.optionset, div.display-logic-master.optionset').entwine({
+  $('div.display-logic.optionset, div.display-logic-dispatcher.optionset').entwine({
     getFieldValue() {
       return this.find(':checked').val();
     },
@@ -310,7 +308,7 @@ jQuery.entwine('ss', ($) => {
 
   });
 
-  $('div.display-logic-master').entwine({
+  $('div.display-logic-dispatcher').entwine({
     Listeners: null,
 
     notify() {
@@ -327,9 +325,9 @@ jQuery.entwine('ss', ($) => {
       const self = this;
       const listeners = [];
       this.closest('form').find('.display-logic').each(function () {
-        const masters = $(this).getMasters();
-        if (masters && masters.length) {
-          Object.entries(masters).forEach(entry => {
+        const dispatchers = $(this).getDispatchers();
+        if (dispatchers && dispatchers.length) {
+          Object.entries(dispatchers).forEach(entry => {
             const [, selector] = entry;
             if (self.nameToHolder(selector) === self.attr('id')) {
               listeners.push($(this)[0]);

client/src/styles/bundle.scss

@@ -4,9 +4,7 @@ div.displaylogicwrapper.display-logic-hidden {
 }
 
 @media (min-width: 992px) {
-
 	.cms-edit-form:not(.AssetAdmin) .form-group div.display-logic-hidden {
 		display: none;
 	}
-
-}
+}

composer.json

@@ -15,13 +15,13 @@
     ],
     "require":
     {
-        "silverstripe/framework": "^4.0"
+        "php": "^8.1",
+        "silverstripe/framework": "^5.0"
     },
     "require-dev": {
-        "phpunit/phpunit": "^5.7",
-        "silverstripe/behat-extension": "^3@dev",
-        "silverstripe/serve": "^2",
-        "se/selenium-server-standalone": "2.41.0"
+        "silverstripe/recipe-testing": "^3",
+        "silverstripe/behat-extension": "^5",
+        "silverstripe/serve": "^3"
     },
     "extra": {
         "installer-name": "display-logic",