-
- `
- }
- constructor() {
- super(true)
-
- this.addEventListener('click', event => {
- event.preventDefault()
- event.stopPropagation()
-
- window.open(
- URL.createObjectURL(this.file),
- (event.ctrlKey || event.shiftKey) ? '_blank' : '_self',
- )
- })
-
- this.render()
- }
-
- async render() {
- const src = this.getAttribute('src')
-
- // N2's db:// URLs are fetched from IndexedDB.
- if (src.toLowerCase().match('^db://[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$')) {
- // image population has to happen asynchronously,
- // while Marked lib has to be returned a string when exiting this function.
- // populateImg makes sure this returned img element exists and then populates it
- // with the image from IndexedDB.
- const file = await globalThis.nodeStore.files.get(src.slice(5))
- if (!file)
- return
- this.file = file.file
-
- if (file.file.type.startsWith('image/'))
- this.elImage.src = URL.createObjectURL(file.file)
- else {
- // Check for and use an existing MIME type icon.
- // Place them in static/images/file_icons/ and replace the slash with an underscore.
- const url = `/images/${_VERSION}/file_icons/${file.file.type.replaceAll('/', '_')}.svg`
- const res = await fetch(url)
- if (res.ok)
- this.elImage.src = url
-
- this.elFilename.innerText = file.file.name
- this.elFilename.style.display = 'block'
- }
- } else
- this.elImage.src = src
- }
-}
-customElements.define('n2-file', N2File)
diff --git a/static/js/lib/css_colorize.mjs b/static/js/lib/css_colorize.mjs
deleted file mode 100644
index f0fdb37..0000000
--- a/static/js/lib/css_colorize.mjs
+++ /dev/null
@@ -1,207 +0,0 @@
-export class Color {
- constructor(r, g, b) { this.set(r, g, b); }
- toString() { return `rgb(${Math.round(this.r)}, ${Math.round(this.g)}, ${Math.round(this.b)})`; }
-
- set(r, g, b) {
- this.r = this.clamp(r);
- this.g = this.clamp(g);
- this.b = this.clamp(b);
- }
-
- hueRotate(angle = 0) {
- angle = angle / 180 * Math.PI;
- let sin = Math.sin(angle);
- let cos = Math.cos(angle);
-
- this.multiply([
- 0.213 + cos * 0.787 - sin * 0.213, 0.715 - cos * 0.715 - sin * 0.715, 0.072 - cos * 0.072 + sin * 0.928,
- 0.213 - cos * 0.213 + sin * 0.143, 0.715 + cos * 0.285 + sin * 0.140, 0.072 - cos * 0.072 - sin * 0.283,
- 0.213 - cos * 0.213 - sin * 0.787, 0.715 - cos * 0.715 + sin * 0.715, 0.072 + cos * 0.928 + sin * 0.072
- ]);
- }
-
- grayscale(value = 1) {
- this.multiply([
- 0.2126 + 0.7874 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 - 0.0722 * (1 - value),
- 0.2126 - 0.2126 * (1 - value), 0.7152 + 0.2848 * (1 - value), 0.0722 - 0.0722 * (1 - value),
- 0.2126 - 0.2126 * (1 - value), 0.7152 - 0.7152 * (1 - value), 0.0722 + 0.9278 * (1 - value)
- ]);
- }
-
- sepia(value = 1) {
- this.multiply([
- 0.393 + 0.607 * (1 - value), 0.769 - 0.769 * (1 - value), 0.189 - 0.189 * (1 - value),
- 0.349 - 0.349 * (1 - value), 0.686 + 0.314 * (1 - value), 0.168 - 0.168 * (1 - value),
- 0.272 - 0.272 * (1 - value), 0.534 - 0.534 * (1 - value), 0.131 + 0.869 * (1 - value)
- ]);
- }
-
- saturate(value = 1) {
- this.multiply([
- 0.213 + 0.787 * value, 0.715 - 0.715 * value, 0.072 - 0.072 * value,
- 0.213 - 0.213 * value, 0.715 + 0.285 * value, 0.072 - 0.072 * value,
- 0.213 - 0.213 * value, 0.715 - 0.715 * value, 0.072 + 0.928 * value
- ]);
- }
-
- multiply(matrix) {
- let newR = this.clamp(this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]);
- let newG = this.clamp(this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]);
- let newB = this.clamp(this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]);
- this.r = newR; this.g = newG; this.b = newB;
- }
-
- brightness(value = 1) { this.linear(value); }
- contrast(value = 1) { this.linear(value, -(0.5 * value) + 0.5); }
-
- linear(slope = 1, intercept = 0) {
- this.r = this.clamp(this.r * slope + intercept * 255);
- this.g = this.clamp(this.g * slope + intercept * 255);
- this.b = this.clamp(this.b * slope + intercept * 255);
- }
-
- invert(value = 1) {
- this.r = this.clamp((value + (this.r / 255) * (1 - 2 * value)) * 255);
- this.g = this.clamp((value + (this.g / 255) * (1 - 2 * value)) * 255);
- this.b = this.clamp((value + (this.b / 255) * (1 - 2 * value)) * 255);
- }
-
- hsl() { // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA.
- let r = this.r / 255;
- let g = this.g / 255;
- let b = this.b / 255;
- let max = Math.max(r, g, b);
- let min = Math.min(r, g, b);
- let h, s, l = (max + min) / 2;
-
- if (max === min) {
- h = s = 0;
- } else {
- let d = max - min;
- s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
- switch (max) {
- case r: h = (g - b) / d + (g < b ? 6 : 0); break;
- case g: h = (b - r) / d + 2; break;
- case b: h = (r - g) / d + 4; break;
- } h /= 6;
- }
-
- return {
- h: h * 100,
- s: s * 100,
- l: l * 100
- };
- }
-
- clamp(value) {
- if (value > 255) { value = 255; }
- else if (value < 0) { value = 0; }
- return value;
- }
-}
-
-export class Solver {
- constructor(target) {
- this.target = target;
- this.targetHSL = target.hsl();
- this.reusedColor = new Color(0, 0, 0); // Object pool
- }
-
- solve() {
- let result = this.solveNarrow(this.solveWide());
- return {
- values: result.values,
- loss: result.loss,
- filter: this.css(result.values)
- };
- }
-
- solveWide() {
- const A = 5;
- const c = 15;
- const a = [60, 180, 18000, 600, 1.2, 1.2];
-
- let best = { loss: Infinity };
- for (let i = 0; best.loss > 25 && i < 3; i++) {
- let initial = [50, 20, 3750, 50, 100, 100];
- let result = this.spsa(A, a, c, initial, 1000);
- if (result.loss < best.loss) { best = result; }
- } return best;
- }
-
- solveNarrow(wide) {
- const A = wide.loss;
- const c = 2;
- const A1 = A + 1;
- const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1];
- return this.spsa(A, a, c, wide.values, 500);
- }
-
- spsa(A, a, c, values, iters) {
- const alpha = 1;
- const gamma = 0.16666666666666666;
-
- let best = null;
- let bestLoss = Infinity;
- let deltas = new Array(6);
- let highArgs = new Array(6);
- let lowArgs = new Array(6);
-
- for (let k = 0; k < iters; k++) {
- let ck = c / Math.pow(k + 1, gamma);
- for (let i = 0; i < 6; i++) {
- deltas[i] = Math.random() > 0.5 ? 1 : -1;
- highArgs[i] = values[i] + ck * deltas[i];
- lowArgs[i] = values[i] - ck * deltas[i];
- }
-
- let lossDiff = this.loss(highArgs) - this.loss(lowArgs);
- for (let i = 0; i < 6; i++) {
- let g = lossDiff / (2 * ck) * deltas[i];
- let ak = a[i] / Math.pow(A + k + 1, alpha);
- values[i] = fix(values[i] - ak * g, i);
- }
-
- let loss = this.loss(values);
- if (loss < bestLoss) { best = values.slice(0); bestLoss = loss; }
- } return { values: best, loss: bestLoss };
-
- function fix(value, idx) {
- let max = 100;
- if (idx === 2 /* saturate */) { max = 7500; }
- else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) { max = 200; }
-
- if (idx === 3 /* hue-rotate */) {
- if (value > max) { value = value % max; }
- else if (value < 0) { value = max + value % max; }
- } else if (value < 0) { value = 0; }
- else if (value > max) { value = max; }
- return value;
- }
- }
-
- loss(filters) { // Argument is array of percentages.
- let color = this.reusedColor;
- color.set(0, 0, 0);
-
- color.invert(filters[0] / 100);
- color.sepia(filters[1] / 100);
- color.saturate(filters[2] / 100);
- color.hueRotate(filters[3] * 3.6);
- color.brightness(filters[4] / 100);
- color.contrast(filters[5] / 100);
-
- let colorHSL = color.hsl();
- return Math.abs(color.r - this.target.r)
- + Math.abs(color.g - this.target.g)
- + Math.abs(color.b - this.target.b)
- + Math.abs(colorHSL.h - this.targetHSL.h)
- + Math.abs(colorHSL.s - this.targetHSL.s)
- + Math.abs(colorHSL.l - this.targetHSL.l);
- }
-
- css(filters) {
- function fmt(idx, multiplier = 1) { return Math.round(filters[idx] * multiplier); }
- return `invert(${fmt(0)}%) sepia(${fmt(1)}%) saturate(${fmt(2)}%) hue-rotate(${fmt(3, 3.6)}deg) brightness(${fmt(4)}%) contrast(${fmt(5)}%)`;
- }
-}
diff --git a/static/js/lib/custom_html_element.mjs b/static/js/lib/custom_html_element.mjs
index 2cec808..dedb5d8 100644
--- a/static/js/lib/custom_html_element.mjs
+++ b/static/js/lib/custom_html_element.mjs
@@ -1,10 +1,10 @@
export class CustomHTMLElement extends HTMLElement {
- constructor(useShadow) {// {{{
+ constructor() {// {{{
super()
- const workOn = useShadow ? this.attachShadow({ mode: 'open' }) : this
- workOn.appendChild(this.constructor.tmpl.content.cloneNode(true))
- workOn.querySelectorAll('*').forEach(el => {
+ this.appendChild(this.constructor.tmpl.content.cloneNode(true))
+
+ this.querySelectorAll('*').forEach(el => {
const field = el.dataset.field
if (field !== undefined) {
const fieldName = this.toElementName('field', field)
diff --git a/static/js/lib/fullcalendar.min.js b/static/js/lib/fullcalendar.min.js
new file mode 100644
index 0000000..e96f044
--- /dev/null
+++ b/static/js/lib/fullcalendar.min.js
@@ -0,0 +1,6 @@
+/*!
+FullCalendar Standard Bundle v6.1.11
+Docs & License: https://fullcalendar.io/docs/initialize-globals
+(c) 2023 Adam Shaw
+*/
+var FullCalendar=function(e){"use strict";var t,n,r,i,s,o,a,l,c,d={},u=[],h=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function f(e,t){for(var n in t)e[n]=t[n];return e}function g(e){var t=e.parentNode;t&&t.removeChild(e)}function p(e,n,r){var i,s,o,a={};for(o in n)"key"==o?i=n[o]:"ref"==o?s=n[o]:a[o]=n[o];if(arguments.length>2&&(a.children=arguments.length>3?t.call(arguments,2):r),"function"==typeof e&&null!=e.defaultProps)for(o in e.defaultProps)void 0===a[o]&&(a[o]=e.defaultProps[o]);return m(e,a,i,s,null)}function m(e,t,i,s,o){var a={type:e,props:t,key:i,ref:s,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==o?++r:o};return null==o&&null!=n.vnode&&n.vnode(a),a}function v(){return{current:null}}function y(e){return e.children}function b(e,t,n){"-"===t[0]?e.setProperty(t,null==n?"":n):e[t]=null==n?"":"number"!=typeof n||h.test(t)?n:n+"px"}function E(e,t,n,r,i){var s;e:if("style"===t)if("string"==typeof n)e.style.cssText=n;else{if("string"==typeof r&&(e.style.cssText=r=""),r)for(t in r)n&&t in n||b(e.style,t,"");if(n)for(t in n)r&&n[t]===r[t]||b(e.style,t,n[t])}else if("o"===t[0]&&"n"===t[1])s=t!==(t=t.replace(/Capture$/,"")),t=t.toLowerCase()in e?t.toLowerCase().slice(2):t.slice(2),e.l||(e.l={}),e.l[t+s]=n,n?r||e.addEventListener(t,s?A:S,s):e.removeEventListener(t,s?A:S,s);else if("dangerouslySetInnerHTML"!==t){if(i)t=t.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("width"!==t&&"height"!==t&&"href"!==t&&"list"!==t&&"form"!==t&&"tabIndex"!==t&&"download"!==t&&t in e)try{e[t]=null==n?"":n;break e}catch(e){}"function"==typeof n||(null==n||!1===n&&-1==t.indexOf("-")?e.removeAttribute(t):e.setAttribute(t,n))}}function S(e){s=!0;try{return this.l[e.type+!1](n.event?n.event(e):e)}finally{s=!1}}function A(e){s=!0;try{return this.l[e.type+!0](n.event?n.event(e):e)}finally{s=!1}}function D(e,t){this.props=e,this.context=t}function w(e,t){if(null==t)return e.__?w(e.__,e.__.__k.indexOf(e)+1):null;for(var n;t${content}
\n` + return `${content}
\n` }, list(token) { @@ -138,7 +134,7 @@ export class MarkedPosition { }, listitem(token) { - return ``
+ return ``
+ (token.escaped ? code : escapeHtmlEntities(code, true))
+ '
\n'
}
- return `'
+ (token.escaped ? code : escapeHtmlEntities(code, true))
@@ -161,7 +157,7 @@ export class MarkedPosition {
blockquote(token) {
const body = this.parser.parse(token.tokens)
- return `\n${body}
\n`
+ return `\n${body}
\n`
},
html(token) {
@@ -173,11 +169,11 @@ export class MarkedPosition {
},
hr(token) {
- return `
\n`
+ return `
\n`
},
checkbox(token) {
- return ` '
},
@@ -222,7 +218,7 @@ export class MarkedPosition {
if (token.tokens.length > 0) {
const start = token.tokens[0].position.start.offset
const end = token.tokens[0].position.end.offset
- ofs = `ondblclick="setpos(event)" data-offset-start="${start}" data-offset-end="${end}"`
+ ofs = `onclick="setpos(event)" data-offset-start="${start}" data-offset-end="${end}"`
}
const content = this.parser.parseInline(token.tokens);
@@ -234,23 +230,23 @@ export class MarkedPosition {
},
strong(token) {
- return `${this.parser.parseInline(token.tokens)}`
+ return `${this.parser.parseInline(token.tokens)}`
},
em(token) {
- return `${this.parser.parseInline(token.tokens)}`
+ return `${this.parser.parseInline(token.tokens)}`
},
codespan(token) {
- return `${escapeHtmlEntities(token.text, true)}`
+ return `${escapeHtmlEntities(token.text, true)}`
},
br(token) {
- return `
`
+ return `
`
},
del(token) {
- return `${this.parser.parseInline(token.tokens)}`
+ return `${this.parser.parseInline(token.tokens)}`
},
link(token) {
@@ -260,7 +256,7 @@ export class MarkedPosition {
return text
}
token.href = cleanHref
- let out = ' {
- const target = document.getElementById(id)
- if (target) {
- observer.disconnect()
- return target
- }
- })
-
- observer.observe(document.documentElement, {
- childList: true,
- subtree: true
- })
- }// }}}
- async populateImg(fileID, elementID) {// {{{
- let img = await globalThis.nodeStore.files.get(fileID)
- const el = await this.whenElementExist(elementID)
-
- el.src = URL.createObjectURL(img.file)
- }// }}}
}
diff --git a/static/js/page_node.mjs b/static/js/node.mjs
similarity index 75%
rename from static/js/page_node.mjs
rename to static/js/node.mjs
index 753aa46..acebbb7 100644
--- a/static/js/page_node.mjs
+++ b/static/js/node.mjs
@@ -1,15 +1,15 @@
-import { ROOT_NODE, uuidv7 } from 'node_store'
+import { ROOT_NODE } from 'node_store'
import { CustomHTMLElement } from './lib/custom_html_element.mjs'
import { MarkedPosition } from './marked_position.mjs'
-export class N2PageNodeUI extends CustomHTMLElement {
+export class N2NodeUI extends CustomHTMLElement {
static {// {{{
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `