Clean up Documentation

higginsrob · Feb 2, 2022 · e022027 · e022027
1 parent 337e03f
commit e022027
Show file tree

Hide file tree

Showing 20 changed files with 2,215 additions and 5,223 deletions.
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -1,18 +1,17 @@
 name: CI Test
 
 on:
-  push:
-    branches:
-      - '*'
+  pull_request:
+    types:
+      - opened
 
 jobs:
-
-  build:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 16
       - run: npm install
       - run: npm test
diff --git a/README.jst b/README.jst
diff --git a/README.md b/README.md
@@ -1,129 +1,59 @@
 # JDOM.js [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fhigginsrob%2Fjdom%2Fbadge&style=flat)](https://actions-badge.atrox.dev/higginsrob/jdom/goto)
 
-_lightweight dom builder_
-
----
-
-##### installation
+### Installation
 
 ```
-npm install jdom
+npm install --save jdom
 
 ```
 
-#### usage
-
-_intended usage with webpack or browserify_
+### Import
 
 ```
 import {
-   createElement, updateElement,
-   DIV, SPAN, SCRIPT, STYLE, // ...etc
+   domFactory, svgFactory,
    on, once, off, dispatch,
-   currentScript,
-   style,
-   isObject, isArray, isElement
+   style, hasClass, addClass, removeClass
 } from 'jdom';
 ```
 
 ---
 
-**createElement** (_string_ **tag**, _object_ **props**, _string_ **ns**);
-
-_create dom/svg elements_
+### Compose DOM Example
 
-##### example
+##### example:
 
 ```
- const container = createElement('div', {
+const {DIV, SCRIPT, SPAN} = domFactory;
+const myDiv = DIV({
+     parent: document.body
      id: 'myDiv',
-     className: 'myClass',
      style: {
          color: 'red'
      },
      dataset: {
          foo: 'bar'
      },
-     click: () => {
-         container.style.color = 'blue';
-     }
- });
-```
-
----
-
-**createSvgElement** (_string_ **tag**, _object_ **props**);
-
-_create dom/svg elements_
-
-##### example
-
-```
- const container = createSvgElement('svg', {
-     id: 'mySvg',
-     children: [
-         createSvgElement('path', {
-             d: 'M10 10'
-         })
-     ]
- });
-```
-
----
-
-**updateElement** (_HTMLElement_ **elem**, _object_ **props**);
-
-_update dom elements_
-
-##### example
-
-```
- const element = document.getElementById('asdf');
- const container = updateElement(element, {
-     style: {
-         color: 'blue'
-     }
- })
-```
-
----
-
-**DOM FACTORY METHODS**
-
-_syntactic sugar_
-
-elements: 'link', 'meta', 'style', 'title', 'address', 'article', 'aside', 'footer', 'header', 'h1','h2','h3', 'h4','h5','h6', 'hgroup', 'nav', 'section', 'blockquote', 'dd', 'dir', 'div', 'dl', 'figcaption', 'figure', 'hr', 'li', 'main', 'ol', 'p', 'pre', 'ul', 'a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'data', 'dfn', 'em', 'i', 'kdb', 'mark', 'q', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'small', 'span', 'strong', 'sub', 'sup', 'time', 'tt', 'u', 'var', 'wbr', 'area', 'audio', 'img', 'map', 'track', 'video', 'applet', 'embed', 'iframe', 'noembed', 'object', 'param', 'picture', 'source', 'canvas', 'noscript', 'script', 'del', 'ins', 'caption', 'col', 'colgroup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'button', 'datalist', 'fieldset', 'form', 'input', 'label', 'legend', 'meter', 'optgroup', 'option', 'output', 'progress', 'select', 'textarea', 'details', 'dialog', 'menu', 'menuitem', 'summary', 'content', 'element', 'shadow', 'slot', 'template'
-
-##### example
-
-```
-import {DIV, SCRIPT, SPAN} from 'jdom';
-
- const div = DIV({
-     id: 'myDiv',
      children: [
          'injecting script',
          SCRIPT({src: 'http://some.url'}),
          'done'
      ],
-     parent: document.body
+     click: () => {
+         alert('now');
+     }
  });
-
- SPAN({parent: div, children: ['!!!!']);
+ SPAN({parent: myDiv, children: ['SomeText!!!!']);
 ```
 
 ---
 
-**SVG FACTORY METHODS**
-
-_syntactic sugar_
-
-elements: 'a', 'altGyph', 'altGlyphDef', 'altGlyphItem', 'animate', 'animateColor', 'animateMotion', 'animateTransform', 'circle', 'clipPath', 'color-profile', 'cursor', 'defs', 'desc', 'discard', 'ellipse', 'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence', 'filter', 'font', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri', 'foreignObject', 'g', 'glyph', 'glyphRef', 'hatch', 'hatchpath', 'hkern', 'image', 'line', 'linearGradient', 'marker', 'mask', 'mesh', 'meshgradient', 'meshpatch', 'meshrow', 'metadata', 'missing-glyph', 'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect', 'script', 'set', 'solidcolor', 'stop', 'style', 'svg', 'switch', 'symbol', 'text', 'textPath', 'title', 'tref', 'tspan', 'unknown', 'use', 'view', 'vkern'
+### Compose SVG Example
 
-##### example
+##### example:
 
 ```
-import {SVG, RECT, CIRCLE} from 'jdom';
+ import {SVG, RECT, CIRCLE} from 'jdom';
 
  SVG({
      id: 'mySVG',
@@ -151,49 +81,11 @@ import {SVG, RECT, CIRCLE} from 'jdom';
 
 ---
 
-#### event management
-
--   **on** (_HTMLElement_ **elem**, _string_ **event**, _function_ **handler**, _object_ **options**)
--   **once** (_HTMLElement_ **elem**, _string_ **event**, _function_ **handler**, _object_ **options**)
--   **off** (_HTMLElement_ **elem**, _string_ **event**, _function_ **handler**, _object_ **options**)
--   **dispatch** (_HTMLElement_ **elem**, _string_ **event**);
-
-##### example
-
-```
- const a = document.getElementById('aDiv');
- const mouseover = () => {
-     a.style.backgroundColor = 'red';
- }
- on(a, 'mouseover', mouseover);
- once(a, 'click', () => {
-     off(a, 'mouseover', mouseover);
- });
- window.setTimeout(() => {
-     dispatch(a, 'click');
- }, 2000);
-```
-
----
-
-**currentScript** ()
-
-_get the currently executing script_
-
-##### example
-
-```
-const thisScript = currentScript();
-console.log(thisScript.src);
-```
-
----
-
-**style** (_HTMLElement_ **elem**, _object_ **props**)
+### style (_HTMLElement_ **elem**, _object_ **props**)
 
 _update element style_
 
-##### example
+##### example:
 
 ```
  const a = document.getElementById('aDiv');
@@ -205,9 +97,9 @@ _update element style_
 
 ---
 
-**QueryList (\$)** (_string_/_element_/_nodelist_/_array_/_function_ **selector**)
+### QueryList(\$) (_string_/_element_/_nodelist_/_array_/_function_ **selector**)
 
-##### example
+##### example:
 
 ```
  const $a = $('#aDiv');
@@ -221,17 +113,29 @@ _update element style_
  $a.dispatch('click');
 ```
 
-const parser = new DOMParser();
-const doc = parser.parseFromString(selector, 'text/html');
-scope[0] = doc.firstChild;
+#### Querylist Event Methods
+
+-   on
+-   once
+-   off
+-   dispatch
+
+#### Querylist Style Methods
+
+-   style
+-   hasClass
+-   addClass
+-   removeClass
 
-## utilities
+#### Querylist Array Prototype Methods
 
--   **type (_object_ **obj\_\_)
-    -   returns element class name by Object.toString
-    -   example: if Object.toString('asdf') === '[object String]' then 'String'
--   **isObject** (_object_ **obj**)
--   **isArray** (_object_ **obj**)
--   **isElement** (_object_ **obj**)
--   **toCamelCase** (_string_ **str**)
--   \__setChildren (\_object_ _obj_, _array_ _children_))
+-   filter
+-   forEach
+-   map
+-   pop
+-   push
+-   shift
+-   slice
+-   some
+-   splice
+-   unshift