├── nolib.html
├── nolib.js
└── README.md
/nolib.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
31 |
32 |
33 |
34 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/nolib.js:
--------------------------------------------------------------------------------
1 | function el(ctype, opts, ...children) {
2 | let [type, ...classes] = ctype.split("."), parent = undefined;
3 | let d = type[0] === "#" ? document.getElementById(type.slice(1)) : document.createElement(type);
4 | classes.forEach(c => d.classList.add(c));
5 | if (opts) {
6 | Object.keys(opts).forEach(k => {
7 | if (k.slice(0, 2) === "s_") {
8 | d.style[k.slice(2)] = opts[k];
9 | } else if (k === "parent") {
10 | parent = opts[k];
11 | } else {
12 | d[k] = opts[k];
13 | }
14 | });
15 | }
16 | children.forEach(c => d.appendChild(c));
17 | if (parent) parent.appendChild(d);
18 | return d;
19 | }
20 |
21 | function drag(event, f) {
22 | let glass = el("div",
23 | {parent: document.body,
24 | s_position: "fixed",
25 | s_left: "0px",
26 | s_top: "0px",
27 | s_right: "0px",
28 | s_bottom: "0px"});
29 | event.preventDefault();
30 | event.stopPropagation();
31 | f(event.clientX, event.clientY, 0); // down
32 | function mm(event) {
33 | event.preventDefault();
34 | event.stopPropagation();
35 | f(event.clientX, event.clientY, 1); // dragging
36 | }
37 | function mu(event) {
38 | document.body.removeChild(glass);
39 | document.removeEventListener("mousemove", mm);
40 | document.removeEventListener("mouseup", mu);
41 | f(event.clientX, event.clientY, 2); // up
42 | }
43 | document.addEventListener("mousemove", mm);
44 | document.addEventListener("mouseup", mu);
45 | }
46 |
47 | function ext(obj, m, f) {
48 | let oldf = obj[m];
49 | obj[m] = (...args) => { return f.call(obj, oldf, ...args); };
50 | }
51 |
52 | function extBefore(obj, m, f) {
53 | ext(obj, m, (oldf, ...args) => { f.call(obj, ...args); return oldf.call(obj, ...args); });
54 | }
55 |
56 | function extAfter(obj, m, f) {
57 | ext(obj, m, (oldf, ...args) => { oldf.call(obj, ...args); return f.call(obj, ...args); });
58 | }
59 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # nolib.js
2 |
3 | a non-library
4 |
5 | This code is just a very very VERY tiny layer to fix some annoyances
6 | when writing vanilla javascript code, mostly about verbosity.
7 |
8 | It doesn't do anything fancy or magic, it's just meant to save some
9 | human brain processing when reading code and, less importantly, some
10 | typing when writing code.
11 |
12 | It doesn't aim as being the most compact code because that would make
13 | the program, at least for me, harder to read.
14 |
15 | It doesn't try to hide anything important because that would make
16 | the program, at least for me, harder to understand.
17 |
18 | Copying and pasting and tweaking it instead of including it is and
19 | should be a reasonable option. That's why it's not really a library.
20 |
21 | This is why it also has no license...
22 |
23 | ## Documentation
24 |
25 | ### `el(ctype, opts, ...children)`
26 |
27 | Creates a DOM node optionally specifiying
28 | - parent
29 | - classes
30 | - style
31 | - properties
32 | - handlers
33 | - children
34 |
35 | Example:
36 |
37 | el("div.title", {parent: document.body,
38 | s_textAlign: "center"},
39 | el("span", {textContent: "Child 1"}),
40 | el("span", {textContent: "Child 2"}),
41 | el("span", {textContent: "Child 3",
42 | s_cursor: "pointer",
43 | onclick: () => alert("Hey")}));
44 |
45 | ### `drag(event, f)`
46 |
47 | Handles mouse dragging by calling the function `f` with
48 |
49 | f(x, y, 0); // Start of dragging
50 | f(x, y, 1); // During dragging at each mouse movement
51 | f(x, y, 2); // When the mouse is released
52 |
53 | `event` is the `onmousedown` event that starts the dragging.
54 |
55 | ### `ext(object, method, extension)`
56 |
57 | Extends the specified method on the specific object instance.
58 | The `extension` function will be called passing as first parameter
59 | the old value of `object[method]` and remaining parameters as
60 | received by the caller of the method.
61 | The return value of `extension` will be the final result of the
62 | call to the method.
63 |
64 | Example:
65 |
66 | class Foo {
67 | constructor(x) { this.x = x; }
68 | bar(y) { return this.x + y; }
69 | };
70 |
71 | foo = new Foo(12);
72 | console.log(foo.bar(3)); // Outputs 15
73 |
74 | ext(foo, "bar", (oldm, ...args) => {
75 | console.log("Method bar called on foo instance with " + JSON.stringify(args));
76 | let res = oldm.call(foo, ...args);
77 | console.log("Result was " + JSON.stringify(res));
78 | return res;
79 | });
80 |
81 | console.log(foo.bar(3)); // Still outputs 15, but displaying log infos
82 |
83 | ### `extBefore(object, method, extension)`
84 |
85 | Extends the specified method by adding a call to `extension` right before
86 | the execution of the original method code. The result value of the call
87 | to `extension` is ignored.
88 |
89 | ### `extAfter(object, method, extension)`
90 |
91 | Extends the specified method by adding a call to `extension` right after
92 | the execution of the original method code. The result value of the call
93 | to `extension` is the final result: the result value of the original
94 | method call is ignored.
95 |
--------------------------------------------------------------------------------