- reorganise project to split out languages

- JS now supports registering events against something other than `document`
packaged · Aug 25, 2021 · 6d41026 · 6d41026
1 parent 00fb19d
commit 6d41026
Show file tree

Hide file tree

Showing 72 changed files with 126 additions and 106 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,7 @@
 /node_modules/
 /yarn.lock
 
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+.pnp.*
diff --git a/composer.json b/composer.json
@@ -21,12 +21,12 @@
   },
   "autoload": {
     "psr-4": {
-      "Packaged\\Form\\": "src"
+      "Packaged\\Form\\": "php/src"
     }
   },
   "autoload-dev": {
     "psr-4": {
-      "Packaged\\Tests\\Form\\": "tests"
+      "Packaged\\Tests\\Form\\": "php/tests"
     }
   }
 }
diff --git a/demo/index.php b/demo/index.php
@@ -100,13 +100,14 @@ protected function _initDataHandlers()
 }
 
 ?>
-<html>
+<html lang="en">
 <head>
-  <link type="text/css" rel="stylesheet" href="../resources/form.min.css"/>
-  <script type="module" src="../resources/form.min.js"></script>
+  <title>Form Demo</title>
+  <link type="text/css" rel="stylesheet" href="../js/dist/form.min.css"/>
+  <script type="module" src="../js/dist/form.min.js"></script>
   <style>
     body {
-      font-family: "Helvetica Neue", Helvetica, Arial;
+      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
       font-size: 13px;
     }
 
@@ -161,7 +162,7 @@ protected function _initDataHandlers()
               <?php if(substr($form->profilePicture->getFileType(), 0, 5) == 'image'): ?>
                 <img src="data:<?= $form->profilePicture->getFileType() ?>;base64,<?= base64_encode($content); ?>">
               <?php else: ?>
-                <textarea><?= $content; ?></textarea>
+                <pre><?= $content; ?></pre>
               <?php endif; ?>
             </td>
           </tr>

diff --git a/index.js b/index.js
@@ -1,2 +1,6 @@
-import './resources_src/index';
-import './resources_src/css/styles'
+import './js/src/css/styles.js';
+import {init} from './js/src/index.js';
+
+export * from './js/src/index.js';
+
+init();
diff --git a/js/dist/form.min.css b/js/dist/form.min.css
diff --git a/js/dist/form.min.js b/js/dist/form.min.js
diff --git a/resources_src/css/base/base.css → js/src/css/base/base.css b/resources_src/css/base/base.css → js/src/css/base/base.css
diff --git a/resources_src/css/base/base.js → js/src/css/base/base.js b/resources_src/css/base/base.js → js/src/css/base/base.js
diff --git a/resources_src/css/button/button.css → js/src/css/button/button.css b/resources_src/css/button/button.css → js/src/css/button/button.css
diff --git a/resources_src/css/button/button.js → js/src/css/button/button.js b/resources_src/css/button/button.js → js/src/css/button/button.js
diff --git a/resources_src/css/errors/errors.css → js/src/css/errors/errors.css b/resources_src/css/errors/errors.css → js/src/css/errors/errors.css
diff --git a/resources_src/css/errors/errors.js → js/src/css/errors/errors.js b/resources_src/css/errors/errors.js → js/src/css/errors/errors.js
diff --git a/resources_src/css/guidance/guidance.css → js/src/css/guidance/guidance.css b/resources_src/css/guidance/guidance.css → js/src/css/guidance/guidance.css
diff --git a/resources_src/css/guidance/guidance.js → js/src/css/guidance/guidance.js b/resources_src/css/guidance/guidance.js → js/src/css/guidance/guidance.js
diff --git a/resources_src/css/inputs/input.css → js/src/css/inputs/input.css b/resources_src/css/inputs/input.css → js/src/css/inputs/input.css
diff --git a/resources_src/css/inputs/inputs.js → js/src/css/inputs/inputs.js b/resources_src/css/inputs/inputs.js → js/src/css/inputs/inputs.js
diff --git a/js/src/css/styles.js b/js/src/css/styles.js
@@ -0,0 +1,5 @@
+import './base/base.js';
+import './inputs/inputs.js';
+import './errors/errors.js';
+import './button/button.js';
+import './guidance/guidance.js';
diff --git a/js/src/index.js b/js/src/index.js
@@ -0,0 +1,86 @@
+import {addErrors, clearErrors, validateForm, validateHandler} from './validation.js';
+
+export * from './validation.js';
+
+let _init = new WeakSet();
+
+export function init(rootElement = document)
+{
+  if(_init.has(rootElement))
+  {
+    return;
+  }
+  _init.add(rootElement);
+
+  rootElement.addEventListener(
+    'submit', e =>
+    {
+      /**
+       * @type {HTMLFormElement}
+       */
+      const form = e.path && e.path[0] || e.target;
+      const results = validateForm(form);
+      results.forEach(
+        (result, handlerName) =>
+        {
+          // show errors if necessary
+          const errContainer = form.querySelector(`.p-form__field[handler-name="${handlerName}"] .p-form__errors`);
+          if(errContainer)
+          {
+            errContainer.classList.toggle('p-form__errors--hidden', result.errors.length === 0);
+          }
+
+          if(result.errors.length > 0)
+          {
+            clearErrors(form, handlerName);
+            addErrors(form, handlerName, result.errors);
+            e.preventDefault();
+            e.stopImmediatePropagation();
+          }
+        },
+      );
+    },
+  );
+
+  rootElement.addEventListener(
+    'reset', e =>
+    {
+      /**
+       * @type {HTMLFormElement}
+       */
+      const form = e.path && e.path[0] || e.target;
+      form.querySelectorAll('.p-form__field[handler-name]')
+          .forEach((ele) => clearErrors(form, ele.getAttribute('handler-name')));
+    }
+  );
+
+  rootElement.addEventListener('input', e =>
+  {
+    const inputEle = e.path && e.path[0] || e.target;
+    const handlerContainer = inputEle.closest('.p-form__field');
+    if(!handlerContainer || !handlerContainer.hasAttribute('handler-name'))
+    {
+      return;
+    }
+    const handlerName = handlerContainer.getAttribute('handler-name');
+
+    const form = inputEle.closest('form');
+    if(!form)
+    {
+      return;
+    }
+
+    const result = validateHandler(form, handlerName);
+    const errContainer = handlerContainer.querySelector(`.p-form__errors`);
+    if(errContainer && result.errors.length === 0)
+    {
+      clearErrors(form, handlerName);
+      errContainer.classList.add('p-form__errors--hidden');
+    }
+    else if(!result.potentiallyValid)
+    {
+      clearErrors(form, handlerName);
+      addErrors(form, handlerName, result.errors);
+    }
+  });
+}
diff --git a/resources_src/validation.js → js/src/validation.js b/resources_src/validation.js → js/src/validation.js
diff --git a/package.json b/package.json
@@ -1,30 +1,30 @@
 {
   "name": "@packaged/form",
-  "version": "3.6.9",
-  "main": "resources_src/index.js",
+  "version": "4.0.0",
+  "main": "/index.js",
   "repository": "[email protected]:packaged/form",
   "author": "Tom Kay <[email protected]>",
   "license": "MIT",
   "files": [
-    "resources",
-    "resources_src",
+    "js",
     "index.js"
   ],
   "dependencies": {
     "@packaged/validate": "^2.7.1",
     "base-64": "^1.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.1",
-    "@babel/preset-env": "^7.11.0",
-    "@rollup/plugin-babel": "^5.2.1",
-    "@rollup/plugin-commonjs": "^13.0.0",
-    "@rollup/plugin-node-resolve": "^8.0.1",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^20.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
     "core-js": "3",
+    "postcss": "^8.3.6",
     "postcss-preset-env": "^6.7.0",
-    "rollup": "^2.15.0",
-    "rollup-plugin-postcss": "^3.1.8",
-    "rollup-plugin-terser": "^6.1.0"
+    "rollup": "^2.56.3",
+    "rollup-plugin-postcss": "^4.0.1",
+    "rollup-plugin-terser": "^7.0.2"
   },
   "scripts": {
     "build": "rollup -c rollup.config.js -w"

diff --git a/src/Csrf/CsrfDataHandler.php → php/src/Csrf/CsrfDataHandler.php b/src/Csrf/CsrfDataHandler.php → php/src/Csrf/CsrfDataHandler.php
diff --git a/src/Csrf/CsrfForm.php → php/src/Csrf/CsrfForm.php b/src/Csrf/CsrfForm.php → php/src/Csrf/CsrfForm.php
diff --git a/src/Csrf/CsrfValidator.php → php/src/Csrf/CsrfValidator.php b/src/Csrf/CsrfValidator.php → php/src/Csrf/CsrfValidator.php
diff --git a/src/DataHandlers/AbstractDataHandler.php → php/src/DataHandlers/AbstractDataHandler.php b/src/DataHandlers/AbstractDataHandler.php → php/src/DataHandlers/AbstractDataHandler.php
diff --git a/src/DataHandlers/BooleanDataHandler.php → php/src/DataHandlers/BooleanDataHandler.php b/src/DataHandlers/BooleanDataHandler.php → php/src/DataHandlers/BooleanDataHandler.php
diff --git a/src/DataHandlers/EmailDataHandler.php → php/src/DataHandlers/EmailDataHandler.php b/src/DataHandlers/EmailDataHandler.php → php/src/DataHandlers/EmailDataHandler.php
diff --git a/src/DataHandlers/EnumDataHandler.php → php/src/DataHandlers/EnumDataHandler.php b/src/DataHandlers/EnumDataHandler.php → php/src/DataHandlers/EnumDataHandler.php
diff --git a/src/DataHandlers/FileDataHandler.php → php/src/DataHandlers/FileDataHandler.php b/src/DataHandlers/FileDataHandler.php → php/src/DataHandlers/FileDataHandler.php
diff --git a/src/DataHandlers/HiddenDataHandler.php → php/src/DataHandlers/HiddenDataHandler.php b/src/DataHandlers/HiddenDataHandler.php → php/src/DataHandlers/HiddenDataHandler.php
diff --git a/src/DataHandlers/IntegerDataHandler.php → php/src/DataHandlers/IntegerDataHandler.php b/src/DataHandlers/IntegerDataHandler.php → php/src/DataHandlers/IntegerDataHandler.php
diff --git a/src/DataHandlers/Interfaces/DataHandler.php → ...c/DataHandlers/Interfaces/DataHandler.php b/src/DataHandlers/Interfaces/DataHandler.php → ...c/DataHandlers/Interfaces/DataHandler.php
diff --git a/...DataHandlers/MultiLineTextDataHandler.php → ...DataHandlers/MultiLineTextDataHandler.php b/...DataHandlers/MultiLineTextDataHandler.php → ...DataHandlers/MultiLineTextDataHandler.php
diff --git a/...ataHandlers/MultiValueEnumDataHandler.php → ...ataHandlers/MultiValueEnumDataHandler.php b/...ataHandlers/MultiValueEnumDataHandler.php → ...ataHandlers/MultiValueEnumDataHandler.php
diff --git a/src/DataHandlers/ReadOnlyDataHandler.php → php/src/DataHandlers/ReadOnlyDataHandler.php b/src/DataHandlers/ReadOnlyDataHandler.php → php/src/DataHandlers/ReadOnlyDataHandler.php
diff --git a/src/DataHandlers/SecureTextDataHandler.php → ...rc/DataHandlers/SecureTextDataHandler.php b/src/DataHandlers/SecureTextDataHandler.php → ...rc/DataHandlers/SecureTextDataHandler.php
diff --git a/src/DataHandlers/TextDataHandler.php → php/src/DataHandlers/TextDataHandler.php b/src/DataHandlers/TextDataHandler.php → php/src/DataHandlers/TextDataHandler.php
diff --git a/src/Decorators/AbstractDecorator.php → php/src/Decorators/AbstractDecorator.php b/src/Decorators/AbstractDecorator.php → php/src/Decorators/AbstractDecorator.php
diff --git a/...ecorators/DefaultDataHandlerDecorator.php → ...ecorators/DefaultDataHandlerDecorator.php b/...ecorators/DefaultDataHandlerDecorator.php → ...ecorators/DefaultDataHandlerDecorator.php
diff --git a/...orators/DefaultDataHandlerDecorator.phtml → ...orators/DefaultDataHandlerDecorator.phtml b/...orators/DefaultDataHandlerDecorator.phtml → ...orators/DefaultDataHandlerDecorator.phtml
diff --git a/src/Decorators/DefaultFormDecorator.php → php/src/Decorators/DefaultFormDecorator.php b/src/Decorators/DefaultFormDecorator.php → php/src/Decorators/DefaultFormDecorator.php
diff --git a/src/Decorators/DefaultFormDecorator.phtml → ...src/Decorators/DefaultFormDecorator.phtml b/src/Decorators/DefaultFormDecorator.phtml → ...src/Decorators/DefaultFormDecorator.phtml
diff --git a/src/Decorators/FormSubmitDecorator.php → php/src/Decorators/FormSubmitDecorator.php b/src/Decorators/FormSubmitDecorator.php → php/src/Decorators/FormSubmitDecorator.php
diff --git a/...orators/InputOnlyDataHandlerDecorator.php → ...orators/InputOnlyDataHandlerDecorator.php b/...orators/InputOnlyDataHandlerDecorator.php → ...orators/InputOnlyDataHandlerDecorator.php
diff --git a/...ators/InputOnlyDataHandlerDecorator.phtml → ...ators/InputOnlyDataHandlerDecorator.phtml b/...ators/InputOnlyDataHandlerDecorator.phtml → ...ators/InputOnlyDataHandlerDecorator.phtml
diff --git a/...ators/Interfaces/DataHandlerDecorator.php → ...ators/Interfaces/DataHandlerDecorator.php b/...ators/Interfaces/DataHandlerDecorator.php → ...ators/Interfaces/DataHandlerDecorator.php
diff --git a/src/Decorators/Interfaces/Decorator.php → php/src/Decorators/Interfaces/Decorator.php b/src/Decorators/Interfaces/Decorator.php → php/src/Decorators/Interfaces/Decorator.php
diff --git a/src/Decorators/Interfaces/FormDecorator.php → ...c/Decorators/Interfaces/FormDecorator.php b/src/Decorators/Interfaces/FormDecorator.php → ...c/Decorators/Interfaces/FormDecorator.php
diff --git a/src/Form/Form.php → php/src/Form/Form.php b/src/Form/Form.php → php/src/Form/Form.php
diff --git a/src/Input/LabeledInput.php → php/src/Input/LabeledInput.php b/src/Input/LabeledInput.php → php/src/Input/LabeledInput.php
diff --git a/src/Input/MultiInputContainer.php → php/src/Input/MultiInputContainer.php b/src/Input/MultiInputContainer.php → php/src/Input/MultiInputContainer.php
diff --git a/src/Validators/HandlerEnumValidator.php → php/src/Validators/HandlerEnumValidator.php b/src/Validators/HandlerEnumValidator.php → php/src/Validators/HandlerEnumValidator.php
diff --git a/tests/Csrf/CsrfFormTest.php → php/tests/Csrf/CsrfFormTest.php b/tests/Csrf/CsrfFormTest.php → php/tests/Csrf/CsrfFormTest.php
diff --git a/.../DataHandlers/AbstractDataHandlerTest.php → .../DataHandlers/AbstractDataHandlerTest.php b/.../DataHandlers/AbstractDataHandlerTest.php → .../DataHandlers/AbstractDataHandlerTest.php
@@ -3,7 +3,6 @@
 
 use Packaged\Form\DataHandlers\ReadOnlyDataHandler;
 use Packaged\Form\DataHandlers\TextDataHandler;
-use Packaged\Form\Decorators\InputDecorator;
 use Packaged\Tests\Form\Supporting\DataHandlers\TestIntegerDataHandler;
 use PHPUnit\Framework\TestCase;
 

diff --git a/tests/DataHandlers/BooleanHandlerTest.php → ...tests/DataHandlers/BooleanHandlerTest.php b/tests/DataHandlers/BooleanHandlerTest.php → ...tests/DataHandlers/BooleanHandlerTest.php
diff --git a/tests/DataHandlers/EnumDataHandlerTest.php → ...ests/DataHandlers/EnumDataHandlerTest.php b/tests/DataHandlers/EnumDataHandlerTest.php → ...ests/DataHandlers/EnumDataHandlerTest.php
diff --git a/...Handlers/MultiLineTextDataHandlerTest.php → ...Handlers/MultiLineTextDataHandlerTest.php b/...Handlers/MultiLineTextDataHandlerTest.php → ...Handlers/MultiLineTextDataHandlerTest.php
diff --git a/tests/DataHandlers/TextDataHandlerTest.php → ...ests/DataHandlers/TextDataHandlerTest.php b/tests/DataHandlers/TextDataHandlerTest.php → ...ests/DataHandlers/TextDataHandlerTest.php
diff --git a/...ators/DefaultDataHandlerDecoratorTest.php → ...ators/DefaultDataHandlerDecoratorTest.php b/...ators/DefaultDataHandlerDecoratorTest.php → ...ators/DefaultDataHandlerDecoratorTest.php
diff --git a/tests/Decorators/FormSubmitDecoratorTest.php → ...ts/Decorators/FormSubmitDecoratorTest.php b/tests/Decorators/FormSubmitDecoratorTest.php → ...ts/Decorators/FormSubmitDecoratorTest.php
diff --git a/tests/FormTest.php → php/tests/FormTest.php b/tests/FormTest.php → php/tests/FormTest.php
@@ -3,7 +3,6 @@
 namespace Packaged\Tests\Form;
 
 use Packaged\Form\DataHandlers\TextDataHandler;
-use Packaged\Form\Decorators\ReadOnlyDecorator;
 use Packaged\Tests\Form\Supporting\CustomDecoratorForm;
 use Packaged\Tests\Form\Supporting\EmptyForm;
 use Packaged\Tests\Form\Supporting\TestForm;

diff --git a/tests/Supporting/CustomDecoratorForm.php → php/tests/Supporting/CustomDecoratorForm.php b/tests/Supporting/CustomDecoratorForm.php → php/tests/Supporting/CustomDecoratorForm.php
diff --git a/tests/Supporting/CustomFormDecorator.php → php/tests/Supporting/CustomFormDecorator.php b/tests/Supporting/CustomFormDecorator.php → php/tests/Supporting/CustomFormDecorator.php
diff --git a/tests/Supporting/CustomFormDecorator.phtml → ...ests/Supporting/CustomFormDecorator.phtml b/tests/Supporting/CustomFormDecorator.phtml → ...ests/Supporting/CustomFormDecorator.phtml
diff --git a/...DataHandlers/TestDataHandlerDecorator.php → ...DataHandlers/TestDataHandlerDecorator.php b/...DataHandlers/TestDataHandlerDecorator.php → ...DataHandlers/TestDataHandlerDecorator.php
diff --git a/...g/DataHandlers/TestIntegerDataHandler.php → ...g/DataHandlers/TestIntegerDataHandler.php b/...g/DataHandlers/TestIntegerDataHandler.php → ...g/DataHandlers/TestIntegerDataHandler.php
diff --git a/tests/Supporting/EmptyForm.php → php/tests/Supporting/EmptyForm.php b/tests/Supporting/EmptyForm.php → php/tests/Supporting/EmptyForm.php
diff --git a/tests/Supporting/TestForm.php → php/tests/Supporting/TestForm.php b/tests/Supporting/TestForm.php → php/tests/Supporting/TestForm.php
diff --git a/resources/form.min.css b/resources/form.min.css
diff --git a/resources/form.min.js b/resources/form.min.js
diff --git a/resources_src/css/styles.js b/resources_src/css/styles.js
diff --git a/resources_src/index.js b/resources_src/index.js
diff --git a/rollup.config.js b/rollup.config.js
@@ -10,9 +10,9 @@ process.chdir(__dirname);
 module.exports = {
   input: './index.js',
   output: {
-    file: './resources/form.min.js',
-    name: 'form',
-    format: 'iife',
+    file: './js/dist/form.min.js',
+    name: 'Form',
+    format: 'umd'
   },
   plugins: [
     postcss(