muigui 0.0.1

package/LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Gregg Tavares
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,29 @@
+# muigui
+
+> Nothing to see here...yet?
+
+<img src="./images/muigui.png" style="max-width: 640px">
+
+A simple Web UI library.
+
+muigui is a simple UI library in the spirit of
+[dat.gui](https://github.com/dataarts/dat.gui).
+
+It is not a general purpose library for every type of GUI.
+Rather, it is a small, easy to use library for small apps.
+Basically I liked how simple it was to use dat.gui to add
+a few sliders and options to a demo. What I didn't like is
+that dat.gui is very opinionated on style. I thought I'd
+try to make a DOM based UI with DOM elements only and then
+require CSS to style it and see how far I got.
+
+### Not invented here syndrome
+
+It's possible this already exists but if so I couldn't find it.
+Most UI libraries seem to be giant and require a build step.
+I wanted something hopefully not to big and something I could
+easily add to any example with 1 file (or 2 if you add CSS).
+
+## License
+
+[MIT](https://github.com/greggman/muigui/blob/main/LICENSE.md)

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "muigui",
+  "version": "0.0.1",
+  "description": "A Simple GUI",
+  "main": "muigui.js",
+  "module": "src/muigui.js",
+  "scripts": {
+    "build": "rollup -c",
+    "eslint": "eslint \"**/*.js\"",
+    "pre-push": "npm run eslint",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/greggman/muigui.git"
+  },
+  "keywords": [
+    "muigui",
+    "gui",
+    "ui"
+  ],
+  "author": "Gregg Tavares",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/greggman/muigui/issues"
+  },
+  "files": [
+    "muigui.js",
+    "src/**/*"
+  ],
+  "homepage": "https://github.com/greggman/muiguiy#readme",
+  "devDependencies": {
+    "eslint": "^7.5.0",
+    "eslint-plugin-html": "^6.0.2",
+    "eslint-plugin-optional-comma-spacing": "0.0.4",
+    "eslint-plugin-require-trailing-comma": "0.0.1",
+    "rollup": "^2.23.0",
+    "rollup-plugin-node-resolve": "^5.2.0"
+  }
+}

package/src/libs/elem.js

@@ -0,0 +1,27 @@
+export function createElem(tag, attrs = {}, children = []) { 
+  const elem = document.createElement(tag);
+  for (const [key, value] of Object.entries(attrs)) {
+    if (typeof value === 'function' && key.startsWith('on')) {
+      const eventName = key.substring(2).toLowerCase();
+      elem.addEventListener(eventName, value, {passive: false});
+    } else if (typeof value === 'object') {
+      for (const [k, v] of Object.entries(value)) {
+        elem[key][k] = v;
+      }
+    } else if (elem[key] === undefined) {
+      elem.setAttribute(key, value);
+    } else {
+      elem[key] = value;
+    }
+  }
+  for (const child of children) {
+    elem.appendChild(child);
+  }
+  return elem;
+}
+ 
+export function addElem(tag, parent, attrs = {}, children = []) {
+  const elem = createElem(tag, attrs, children);
+  parent.appendChild(elem);
+  return elem;
+}

package/src/libs/ids.js

@@ -0,0 +1,5 @@
+let id = 0;
+
+export function makeId() {
+  return `muigui-${++id}`;
+}

package/src/libs/utils.js

@@ -0,0 +1,19 @@
+export function removeElem(array, value) {
+  const ndx = array.indexOf(value);
+  if (ndx) {
+    array.splice(ndx, 1);
+  }
+  return array;
+}
+
+/**
+ * Converts an camelCase or snake_case id to "camel case" or "snake case"
+ * @param {string} id 
+ */
+const underscoreRE = /_/g;
+const upperLowerRE = /([A-Z])([a-z])/g;
+export function idToLabel(id) {
+  return id.replace(underscoreRE, ' ')
+           .replace(upperLowerRE, (m, m1, m2) => `${m1.toLowerCase()} ${m2}`);
+}
+

package/src/muigui.js

@@ -0,0 +1,27 @@
+import { createElem } from './libs/elem.js';
+import Slider from './widgets/slider.js';
+import Widget from './widgets/widget.js';
+
+export function createWidget(object, property, ...args) {
+  const t = typeof object[property];
+  switch (t) {
+    case 'number':
+      return new Slider(object, property, ...args);
+  }
+}
+
+export class GUI extends Widget {
+  constructor() {
+    super({}, 'Controls', 'muigui-root');
+    document.body.appendChild(this.elem);
+    this._widgetsElem = createElem('div');
+    this.elem.appendChild(this._widgetsElem);
+  }
+  add(object, property, ...args) {
+    const widget = createWidget(object, property, ...args);
+    this._widgetsElem.appendChild(widget.elem);
+    return this;
+  }
+}
+
+export default GUI;

package/src/widgets/select.js

@@ -0,0 +1 @@
+export function createSlider()

package/src/widgets/slider.js

@@ -0,0 +1,41 @@
+import {
+  createElem,
+} from '../libs/elem.js';
+import Widget from './widget.js';
+
+export default class Slider extends Widget {
+  constructor(object, property, min = 0, max = 1, step = 0.01) {
+    super(object, property, 'muigui-slider');
+    const root = this.elem;
+    const id = this.id;
+
+    const value = this.getValue();
+    this._rangeElem = createElem('input', {
+      type: 'range',
+      min,
+      max,
+      value,
+      step,
+      id,
+      onInput: (e) => {
+        this.setValue(this._rangeElem.value);
+      }
+    });
+    root.appendChild(this._rangeElem);
+
+    this._textElem = createElem('input', {
+      type: 'number',
+      value: value,
+      onInput: (e) => {
+        this.setValue(parseFloat(this._textElem.value));
+      },
+    });
+    root.appendChild(this._textElem);
+  }
+  setValue(v) {
+    super.setValue(v);
+    const newV = super.getValue();
+    this._textElem.value = newV;
+    this._rangeElem.value = newV;
+  }
+}

package/src/widgets/widget.js

@@ -0,0 +1,51 @@
+import { createElem } from '../libs/elem.js';
+import { makeId } from '../libs/ids.js';
+import { idToLabel } from '../libs/utils.js';
+
+export default class Widget {
+  constructor(object, property, className = '') {
+    this._object = object;
+    this._property = property;
+    this._changeFns = [];
+    this._id = makeId();
+    this._nameElem = createElem('label', {textContent: property, for: this._id});
+    this._root = createElem('div', {className: `muigui-widget`}, [this._nameElem]);
+    // we need the specialization to come last so it takes precedence.
+    if (className) {
+      this._root.classList.add(className);
+    }
+  }
+  get elem() {
+    return this._root;
+  }
+  get id() {
+    return this._id;
+  }
+  setJustValue(v) {
+    this._object[this._property] = v;
+  }
+  setValue(v) {
+    this._object[this._property] = v;
+  }
+  getValue(v) {
+    return this._object[this._property];
+  }
+  value(v) {
+    this.setValue(v);
+    return this;
+  }
+  onChange(fn) {
+    this.removeChange(fn);
+    this._changeFns.push(fn);
+    return this;
+  }
+  removeChange(fn) {
+    this._changeFns.remove(fn);
+    return this;
+  }
+  name(name) {
+    this._nameElem.textContent = name;
+    return this;
+  }
+}
+