@deltablot/malle 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Nicolas CARPi
+
+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,69 @@
+# malle
+
+Edit in place library with no dependencies and small footprint.
+
+# WARNING: ALPHA VERSION!!
+
+Api will likely change, do not use!
+
+## Description
+
+`malle` allows you to listen to a particular event (e.g. click, hover) on an element (e.g. p, span) and transform that element into an input that will be processed by a function.
+
+The event can be: click or hover.
+
+The element can be a `p`, `div`, `span`, ...
+
+The created input can be a normal input or a textarea.
+
+The user provided function will typically POST to an endpoint to get some JSON back.
+
+## Installation
+
+~~~bash
+npm i malle
+# or
+yarn add malle
+~~~
+
+## Quickstart
+
+~~~javascript
+import { Malle } from 'malle';
+
+const myCustomFunction = (value, event) => {
+};
+
+// now create the malle
+const malle = new Malle({
+  // this is the function that will be called once user has finished entering text (press Enter or click outside)
+  // it receives the new value, the original element, the event and the input element
+  fun: (value, original, event, input) => {
+    console.log(`New text: ${value}`);
+    console.log(`Original element:`);
+    console.log(original);
+    // add here your code for POSTing the new value
+    // something along the line of:
+    return fetch('/ajax', {
+      method: 'POST',
+      body: JSON.stringify({ 'name': value, 'id': original.dataset.id }),
+    });
+  },
+});
+// and listen for events
+malle.listen();
+~~~
+
+In this example, when a user clicks on an element with `data-malleable='true'`, the function in the `fun` option will be called. The element will be replaced by a `form` containing the `input` and optionally action buttons (Submit, Cancel).
+
+See the [Documentation](./DOCUMENTATION.md) for usage and available options.
+
+See the [demo/](./demo) folder for a full example.
+
+## Contributing
+
+See [contributing documentation](./CONTRIBUTING.md).
+
+## License
+
+This software is open source and licensed under the [MIT License](./LICENSE).

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@deltablot/malle",
+  "version": "0.1.0",
+  "description": "Make text elements malleable",
+  "main": "dist/main.js",
+  "repository": "https://github.com/deltablot/malle",
+  "author": "Nicolas CARPi @ Deltablot>",
+  "license": "MIT",
+  "private": false,
+  "files": [
+    "dist/*.js",
+    "dist/*.js.map"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint src",
+    "serve": "docker run --rm -it --name nginx-malle -p 8088:80 -v $(pwd):/usr/share/nginx/html:ro -d nginx",
+    "watch": "tsc --watch"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.5.0",
+    "@typescript-eslint/parser": "^5.5.0",
+    "eslint": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.2.0",
+    "typescript": "^4.0.2"
+  }
+}