@dwightbcoder/action-ui - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/action-ui.js

@@ -13,3 +13,3 @@ "use strict";
         if (target.hasOwnProperty(i)) {
-          if (source[i] instanceof Object) {
+          if (target[i] instanceof Object && source[i] instanceof Object) {
             deepAssign(target[i], source[i]);
@@ -16,0 +16,0 @@ } else if (target[i] != source[i]) {

dist/action-ui.min.js

 "use strict";var ActionUI=function(a){'use strict';/**
      * Utilities
-     */function b(a,c){for(var d in c)c.hasOwnProperty(d)&&(a.hasOwnProperty(d)?c[d]instanceof Object?b(a[d],c[d]):a[d]!=c[d]&&(a[d]=c[d]):a[d]=c[d])}function c(a){return"FORM"==a.tagName?a:a.form}function d(a){return a[0].toUpperCase()+a.substr(1).toLowerCase()}function e(a){return a.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g,(a,b)=>b.toUpperCase())}var f=/*#__PURE__*/Object.freeze({__proto__:null,deepAssign:b,requestFromElement:function(a){return new Request(a.action||options.href||null,{method:a.method||null})},form:c,capitalize:d,camelCase:e}),g=new WeakMap,h=new WeakMap,j=new WeakMap;/**
+     */function b(a,c){for(var d in c)c.hasOwnProperty(d)&&(a.hasOwnProperty(d)?a[d]instanceof Object&&c[d]instanceof Object?b(a[d],c[d]):a[d]!=c[d]&&(a[d]=c[d]):a[d]=c[d])}function c(a){return"FORM"==a.tagName?a:a.form}function d(a){return a[0].toUpperCase()+a.substr(1).toLowerCase()}function e(a){return a.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g,(a,b)=>b.toUpperCase())}var f=/*#__PURE__*/Object.freeze({__proto__:null,deepAssign:b,requestFromElement:function(a){return new Request(a.action||options.href||null,{method:a.method||null})},form:c,capitalize:d,camelCase:e}),g=new WeakMap,h=new WeakMap,j=new WeakMap;/**
      * Model
@@ -5,0 +5,0 @@ * @description Observable data object

dist/es6/bundle.js

@@ -15,3 +15,3 @@ var ActionUI = (function (exports) {
                 {
-                    if (source[i] instanceof Object)
+                    if (target[i] instanceof Object && source[i] instanceof Object)
                     {
@@ -18,0 +18,0 @@ deepAssign(target[i], source[i]);

dist/es6/modules/util.js

@@ -12,3 +12,3 @@ /**
             {
-                if (source[i] instanceof Object)
+                if (target[i] instanceof Object && source[i] instanceof Object)
                 {
@@ -15,0 +15,0 @@ deepAssign(target[i], source[i])

package.json

 {
   "name": "@dwightbcoder/action-ui",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Action UI is a Javascript framework for building event-base user interfaces",
@@ -11,2 +11,3 @@ "main": "dist/action-ui.min.js",
     "prepublishOnly": "npm run build",
+    "publish": "npm publish --access public",
     "rollup": "rollup src/index.js --format iife --name ActionUI --file src/bundle.js",
@@ -13,0 +14,0 @@ "babel:dev": "NODE_ENV=dev babel src/bundle.js -d dist && mv dist/bundle.js dist/action-ui.js",

README.md

@@ -9,29 +9,85 @@ # Action UI
 
-## Core Modules
+### Quickly convert post-back forms to Fetch posts
 
-*   Action
-    > An action class that live-binds to `[ui-action]` elements
+By default actions attached to HTML elements _(via a `ui-action` attribute)_ will be configured automatically allowing Action UI to take control of form submission simply be setting an action name to the `<form>`:
 
-*   Model
-    > A proxied data model class with sync and change broadcasting
+```html
+<script src="@dwightbcoder/dist/action-ui.min.js"></script>
 
-*   View
-    > A view class that live-binds to `[ui-view]` elements
+<form ui-action="save post" action="/post/store" method="POST">
+    <label for="title">Title:</label><br>
+    <input type="text" name="title" placeholder="Post title"><br>
+    <br>
+    <label for="body">Body:</label><br>
+    <textarea name="body"></textarea><br>
+    <br>
+    <button type="submit">Save Post</button>
+</form>
+```
 
-*   Controller
-    > A controller class for **view** routing
+Whenever an action is triggered any element triggers will receive state CSS classes of `loading`, `success`, or `fail`.
 
-*   Router
-    > A router class that routes page requests to **controllers**
+For example disable form elements and show an overlay when it is submitted using CSS:
 
-*   Util
-    > A utility library with useful helpers for common tasks
 
+```html
+<style>
+    form.loading
+    {
+        position: relative;
+        pointer-events: none;
+    }
 
-### Supplemental Modules
+    form.loading::after
+    {
+        content: "Saving...";
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        background-color: rgba(255,255,255,.75);
+        position: absolute; display: flex;
+        align-items: center; justify-content: center;
+    }
+</style>
+```
 
-*   ViewHandlebars
-    > A view class extension that supports on-demand loading of raw or pre-compiled **Handlebars** templates
+You can listen for `action.after` events for things like informing the user of success or failure:
 
-*   JsonAPI
-    > A model class extension which supports **JsonAPI** data stores and paging
+```js
+document.addEventListener('action.after', e => {
+    if ( e.detail.name == 'save post' )
+    {
+        alert( e.detail.success ? 'Success!' : 'Failed!' )
+    }
+})
+```
+
+### Build an MVC SPA
+
+Setup a simple `index.html`:
+
+```html
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="@dwightbcoder/dist/action-ui.min.js"></script>
+    </head>
+    <body>
+        <header>Header</header>
+        <main ui-view="controller"></main>
+        <footer>Footer</footer>
+        <script>
+            ActionUI.Router.start()
+        </script>
+    </body>
+</html>
+```
+
+Create your views:
+```bash
+view/
+    error.html
+    default/
+        index.html
+```
+
+You now have a simple SPA that will load view content from your external view html files and respond to to page navigation include reload, back, and forward.

src/bundle.js

@@ -15,3 +15,3 @@ var ActionUI = (function (exports) {
                 {
-                    if (source[i] instanceof Object)
+                    if (target[i] instanceof Object && source[i] instanceof Object)
                     {
@@ -18,0 +18,0 @@ deepAssign(target[i], source[i]);

src/modules/util.js

@@ -12,3 +12,3 @@ /**
             {
-                if (source[i] instanceof Object)
+                if (target[i] instanceof Object && source[i] instanceof Object)
                 {
@@ -15,0 +15,0 @@ deepAssign(target[i], source[i])

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

210784

increased by0.81%

Number of lines in readme file

92

increased by148.65%

No dependency changes