wip file field

This commit is contained in:
2024-09-28 18:36:18 +03:00
parent 5ed57838fc
commit 39e7a3aed4
25 changed files with 674 additions and 44 deletions
+45 -2
View File
@@ -1,3 +1,46 @@
export function init(){
import {onClickOutside} from "./../helpers/clickOutside.js";
export function dropdown() {
document.querySelectorAll(".dropdown").forEach(el => {
dropdownInit(el);
})
}
function dropdownInit(el) {
const button = el.querySelector("button");
const menu = el.querySelector(".dropdown-menu");
button.addEventListener('click', function () {
if (menu.hasAttribute('hidden')) {
this.setAttribute('aria-expanded', 'true');
menu.removeAttribute('hidden');
// Set focus on first link
// will be highlighted for keyboard users
menu.querySelector(".dropdown-item:first-child")?.focus();
} else {
menu.setAttribute('hidden', 'true');
this.setAttribute('aria-expanded', 'false');
}
});
document.addEventListener('keydown', (event) => {
// Ignore IME composition
if (event.isComposing || event.key === "esc") {
return;
}
// Close menu with ESC key
if (event.keyCode === 27) {
if (!menu.hasAttribute('hidden')) {
menu.setAttribute('aria-expanded', 'false');
menu.setAttribute('hidden', 'true');
}
}
});
onClickOutside(menu, ".dropdown", () => menu.hidden = true);
}
}
+8
View File
@@ -0,0 +1,8 @@
export function onClickOutside(ele, closest, cb) {
document.addEventListener('click', function (event) {
if (!event.target.closest(closest)) {
cb(event)
}
}, false);
};
+72
View File
@@ -0,0 +1,72 @@
export function throttle(delay, callback, options) {
const {
noTrailing = false,
noLeading = false,
debounceMode = undefined
} = options || {};
let timeoutID;
let cancelled = false;
let lastExec = 0;
function clearExistingTimeout() {
if (timeoutID) {
clearTimeout(timeoutID);
}
}
function cancel(options) {
const {upcomingOnly = false} = options || {};
clearExistingTimeout();
cancelled = !upcomingOnly;
}
function wrapper(...arguments_) {
let self = this;
let elapsed = Date.now() - lastExec;
if (cancelled) {
return;
}
function exec() {
lastExec = Date.now();
callback.apply(self, arguments_);
}
function clear() {
timeoutID = undefined;
}
if (!noLeading && debounceMode && !timeoutID) {
exec();
}
clearExistingTimeout();
if (debounceMode === undefined && elapsed > delay) {
if (noLeading) {
lastExec = Date.now();
if (!noTrailing) {
timeoutID = setTimeout(debounceMode ? clear : exec, delay);
}
} else {
exec();
}
} else if (noTrailing !== true) {
timeoutID = setTimeout(
debounceMode ? clear : exec,
debounceMode === undefined ? delay - elapsed : delay
);
}
}
wrapper.cancel = cancel;
return wrapper;
}
export function debounce(delay, callback, options) {
const {atBegin = false} = options || {};
return throttle(delay, callback, {debounceMode: atBegin !== false});
}
+7
View File
@@ -4,6 +4,13 @@ import Account from "./svelte/Account.svelte";
import Channel from "./svelte/Channel.svelte";
import Mustache from "mustache";
import 'htmx.org';
import {dropdown} from "./components/dropdown.js";
import {colorPicker} from "./recordEditor/colorPicker.js";
addEventListener("load", (event) => {
dropdown()
colorPicker()
});
Mustache.escape = function (value) {
return value;
+13
View File
@@ -0,0 +1,13 @@
export function colorPicker() {
document.querySelectorAll(".color-picker").forEach(el => {
colorPickerInit(el);
})
}
function colorPickerInit(el){
const colorInput = el.querySelector("[type=color]");
const textInput = el.querySelector("[type=text]");
colorInput.addEventListener("change",(e) => textInput.value = colorInput.value);
textInput.addEventListener("change",(e) => colorInput.value = textInput.value);
}
+4
View File
@@ -105,3 +105,7 @@ a {
.lucent-component {
position: relative;
}
[hidden] {
display: none;
}
+1 -1
View File
@@ -6,7 +6,7 @@
>
{{$slot}}
</button>
<div class="dropdown-menu hide orientation-{orientation}">
<div class="dropdown-menu orientation-{orientation}" hidden>
{{$items}}
</div>
+148
View File
@@ -0,0 +1,148 @@
@php
$icons = [
"trash-can"=> [
"path"=> '<path d="M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM31.1 128H416V448C416 483.3 387.3 512 352 512H95.1C60.65 512 31.1 483.3 31.1 448V128zM111.1 208V432C111.1 440.8 119.2 448 127.1 448C136.8 448 143.1 440.8 143.1 432V208C143.1 199.2 136.8 192 127.1 192C119.2 192 111.1 199.2 111.1 208zM207.1 208V432C207.1 440.8 215.2 448 223.1 448C232.8 448 240 440.8 240 432V208C240 199.2 232.8 192 223.1 192C215.2 192 207.1 199.2 207.1 208zM304 208V432C304 440.8 311.2 448 320 448C328.8 448 336 440.8 336 432V208C336 199.2 328.8 192 320 192C311.2 192 304 199.2 304 208z"/>',
"viewBox"=> "0 0 448 512",
],
"circle-chevron-down"=> [
"path"=> '<path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM390.6 246.6l-112 112C272.4 364.9 264.2 368 256 368s-16.38-3.125-22.62-9.375l-112-112c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L256 290.8l89.38-89.38c12.5-12.5 32.75-12.5 45.25 0S403.1 234.1 390.6 246.6z"/>',
"viewBox"=> "0 0 512 512",
],
"circle-chevron-up"=> [
"path"=> '<path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM390.6 310.6c-12.5 12.5-32.75 12.5-45.25 0L256 221.3L166.6 310.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l112-112C239.6 147.1 247.8 144 256 144s16.38 3.125 22.62 9.375l112 112C403.1 277.9 403.1 298.1 390.6 310.6z"/>',
"viewBox"=> "0 0 512 512",
],
"ellipsis"=> [
"path"=> '<path d="M120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200C94.93 200 120 225.1 120 256zM280 256C280 286.9 254.9 312 224 312C193.1 312 168 286.9 168 256C168 225.1 193.1 200 224 200C254.9 200 280 225.1 280 256zM328 256C328 225.1 353.1 200 384 200C414.9 200 440 225.1 440 256C440 286.9 414.9 312 384 312C353.1 312 328 286.9 328 256z"/>',
"viewBox"=> "0 0 448 512",
],
"ellipsis-vertical"=> [
"path"=> '<path d="M64 360C94.93 360 120 385.1 120 416C120 446.9 94.93 472 64 472C33.07 472 8 446.9 8 416C8 385.1 33.07 360 64 360zM64 200C94.93 200 120 225.1 120 256C120 286.9 94.93 312 64 312C33.07 312 8 286.9 8 256C8 225.1 33.07 200 64 200zM64 152C33.07 152 8 126.9 8 96C8 65.07 33.07 40 64 40C94.93 40 120 65.07 120 96C120 126.9 94.93 152 64 152z"/>',
"viewBox"=> "0 0 128 512",
],
"angles-down"=> [
"path"=> '<path d="M169.4 278.6C175.6 284.9 183.8 288 192 288s16.38-3.125 22.62-9.375l160-160c12.5-12.5 12.5-32.75 0-45.25s-32.75-12.5-45.25 0L192 210.8L54.63 73.38c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25L169.4 278.6zM329.4 265.4L192 402.8L54.63 265.4c-12.5-12.5-32.75-12.5-45.25 0s-12.5 32.75 0 45.25l160 160C175.6 476.9 183.8 480 192 480s16.38-3.125 22.62-9.375l160-160c12.5-12.5 12.5-32.75 0-45.25S341.9 252.9 329.4 265.4z"/>',
"viewBox"=> "0 0 384 512",
],
"angle-right"=> [
"path"=> '<path d="M64 448c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L178.8 256L41.38 118.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25l-160 160C80.38 444.9 72.19 448 64 448z"/>',
"viewBox"=> "0 0 256 512",
],
"photo-film"=> [
"path"=> '<path d="M352 432c0 8.836-7.164 16-16 16H176c-8.838 0-16-7.164-16-16L160 128H48C21.49 128 .0003 149.5 .0003 176v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48L512 384h-160L352 432zM104 439c0 4.969-4.031 9-9 9h-30c-4.969 0-9-4.031-9-9v-30c0-4.969 4.031-9 9-9h30c4.969 0 9 4.031 9 9V439zM104 335c0 4.969-4.031 9-9 9h-30c-4.969 0-9-4.031-9-9v-30c0-4.969 4.031-9 9-9h30c4.969 0 9 4.031 9 9V335zM104 231c0 4.969-4.031 9-9 9h-30c-4.969 0-9-4.031-9-9v-30C56 196 60.03 192 65 192h30c4.969 0 9 4.031 9 9V231zM408 409c0-4.969 4.031-9 9-9h30c4.969 0 9 4.031 9 9v30c0 4.969-4.031 9-9 9h-30c-4.969 0-9-4.031-9-9V409zM591.1 0H239.1C213.5 0 191.1 21.49 191.1 48v256c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48v-256C640 21.49 618.5 0 591.1 0zM303.1 64c17.68 0 32 14.33 32 32s-14.32 32-32 32C286.3 128 271.1 113.7 271.1 96S286.3 64 303.1 64zM574.1 279.6C571.3 284.8 565.9 288 560 288H271.1C265.1 288 260.5 284.6 257.7 279.3C255 273.9 255.5 267.4 259.1 262.6l70-96C332.1 162.4 336.9 160 341.1 160c5.11 0 9.914 2.441 12.93 6.574l22.35 30.66l62.74-94.11C442.1 98.67 447.1 96 453.3 96c5.348 0 10.34 2.672 13.31 7.125l106.7 160C576.6 268 576.9 274.3 574.1 279.6z"/>',
"viewBox"=> "0 0 640 512",
],
"file"=> [
"path"=> '<path d="M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256z"/>',
"viewBox"=> "0 0 384 512",
],
"circle-info"=> [
"path"=> '<path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM256 128c17.67 0 32 14.33 32 32c0 17.67-14.33 32-32 32S224 177.7 224 160C224 142.3 238.3 128 256 128zM296 384h-80C202.8 384 192 373.3 192 360s10.75-24 24-24h16v-64H224c-13.25 0-24-10.75-24-24S210.8 224 224 224h32c13.25 0 24 10.75 24 24v88h16c13.25 0 24 10.75 24 24S309.3 384 296 384z"/>',
"viewBox"=> "0 0 512 512",
],
"table-columns"=> [
"path"=> '<path d="M0 96C0 60.65 28.65 32 64 32H448C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96zM64 416H224V160H64V416zM448 160H288V416H448V160z"/>',
"viewBox"=> "0 0 512 512",
],
"arrow-down-a-z"=> [
"path"=> '<path d="M239.6 373.1c11.94-13.05 11.06-33.31-1.969-45.27c-13.55-12.42-33.76-10.52-45.22 1.973L160 366.1V64.03c0-17.7-14.33-32.03-32-32.03S96 46.33 96 64.03v302l-32.4-35.39C51.64 317.7 31.39 316.7 18.38 328.7c-13.03 11.95-13.9 32.22-1.969 45.27l87.1 96.09c12.12 13.26 35.06 13.26 47.19 0L239.6 373.1zM448 416h-50.75l73.38-73.38c9.156-9.156 11.89-22.91 6.938-34.88S460.9 288 447.1 288H319.1C302.3 288 288 302.3 288 320s14.33 32 32 32h50.75l-73.38 73.38c-9.156 9.156-11.89 22.91-6.938 34.88S307.1 480 319.1 480h127.1C465.7 480 480 465.7 480 448S465.7 416 448 416zM492.6 209.3l-79.99-160.1c-10.84-21.81-46.4-21.81-57.24 0L275.4 209.3c-7.906 15.91-1.5 35.24 14.31 43.19c15.87 7.922 35.04 1.477 42.93-14.4l7.154-14.39h88.43l7.154 14.39c6.174 12.43 23.97 23.87 42.93 14.4C494.1 244.6 500.5 225.2 492.6 209.3zM367.8 167.4L384 134.7l16.22 32.63H367.8z"/>',
"viewBox"=> "0 0 512 512",
],
"arrow-up-short-wide"=> [
"path"=> '<path d="M544 416h-223.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H544c17.67 0 32-14.33 32-32S561.7 416 544 416zM320 96h32c17.67 0 31.1-14.33 31.1-32s-14.33-32-31.1-32h-32c-17.67 0-32 14.33-32 32S302.3 96 320 96zM320 224H416c17.67 0 32-14.33 32-32s-14.33-32-32-32h-95.1c-17.67 0-32 14.33-32 32S302.3 224 320 224zM320 352H480c17.67 0 32-14.33 32-32s-14.33-32-32-32h-159.1c-17.67 0-32 14.33-32 32S302.3 352 320 352zM151.6 41.95c-12.12-13.26-35.06-13.26-47.19 0l-87.1 96.09C4.475 151.1 5.35 171.4 18.38 183.3c6.141 5.629 13.89 8.414 21.61 8.414c8.672 0 17.3-3.504 23.61-10.39L96 145.9v302C96 465.7 110.3 480 128 480s32-14.33 32-32.03V145.9L192.4 181.3C204.4 194.3 224.6 195.3 237.6 183.3c13.03-11.95 13.9-32.22 1.969-45.27L151.6 41.95z"/>',
"viewBox"=> "0 0 576 512",
],
"arrow-down-wide-short"=> [
"path"=> '<path d="M416 288h-95.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H416c17.67 0 32-14.33 32-32S433.7 288 416 288zM544 32h-223.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H544c17.67 0 32-14.33 32-32S561.7 32 544 32zM352 416h-32c-17.67 0-32 14.33-32 32s14.33 32 32 32h32c17.67 0 31.1-14.33 31.1-32S369.7 416 352 416zM480 160h-159.1c-17.67 0-32 14.33-32 32s14.33 32 32 32H480c17.67 0 32-14.33 32-32S497.7 160 480 160zM192.4 330.7L160 366.1V64.03C160 46.33 145.7 32 128 32S96 46.33 96 64.03v302L63.6 330.7c-6.312-6.883-14.94-10.38-23.61-10.38c-7.719 0-15.47 2.781-21.61 8.414c-13.03 11.95-13.9 32.22-1.969 45.27l87.1 96.09c12.12 13.26 35.06 13.26 47.19 0l87.1-96.09c11.94-13.05 11.06-33.31-1.969-45.27C224.6 316.8 204.4 317.7 192.4 330.7z"/>',
"viewBox"=> "0 0 576 512",
],
"filter"=> [
"path"=> '<path d="M3.853 54.87C10.47 40.9 24.54 32 40 32H472C487.5 32 501.5 40.9 508.1 54.87C514.8 68.84 512.7 85.37 502.1 97.33L320 320.9V448C320 460.1 313.2 471.2 302.3 476.6C291.5 482 278.5 480.9 268.8 473.6L204.8 425.6C196.7 419.6 192 410.1 192 400V320.9L9.042 97.33C-.745 85.37-2.765 68.84 3.854 54.87L3.853 54.87z"/>',
"viewBox"=> "0 0 512 512",
],
"calendar"=> [
"path"=> '<path d="M96 32C96 14.33 110.3 0 128 0C145.7 0 160 14.33 160 32V64H288V32C288 14.33 302.3 0 320 0C337.7 0 352 14.33 352 32V64H400C426.5 64 448 85.49 448 112V160H0V112C0 85.49 21.49 64 48 64H96V32zM448 464C448 490.5 426.5 512 400 512H48C21.49 512 0 490.5 0 464V192H448V464z"/>',
"viewBox"=> "0 0 448 512",
],
"pencil"=> [
"path"=> '<path d="M421.7 220.3L188.5 453.4L154.6 419.5L158.1 416H112C103.2 416 96 408.8 96 400V353.9L92.51 357.4C87.78 362.2 84.31 368 82.42 374.4L59.44 452.6L137.6 429.6C143.1 427.7 149.8 424.2 154.6 419.5L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3zM492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75z"/>',
"viewBox"=> "0 0 512 512",
],
"database"=> [
"path"=> '<path d="M448 80V128C448 172.2 347.7 208 224 208C100.3 208 0 172.2 0 128V80C0 35.82 100.3 0 224 0C347.7 0 448 35.82 448 80zM393.2 214.7C413.1 207.3 433.1 197.8 448 186.1V288C448 332.2 347.7 368 224 368C100.3 368 0 332.2 0 288V186.1C14.93 197.8 34.02 207.3 54.85 214.7C99.66 230.7 159.5 240 224 240C288.5 240 348.3 230.7 393.2 214.7V214.7zM54.85 374.7C99.66 390.7 159.5 400 224 400C288.5 400 348.3 390.7 393.2 374.7C413.1 367.3 433.1 357.8 448 346.1V432C448 476.2 347.7 512 224 512C100.3 512 0 476.2 0 432V346.1C14.93 357.8 34.02 367.3 54.85 374.7z"/>',
"viewBox"=> "0 0 448 512",
],
"dice"=> [
"path"=> '<path d="M447.1 224c0-12.56-4.781-25.13-14.35-34.76l-174.9-174.9C249.1 4.786 236.5 0 223.1 0C211.4 0 198.9 4.786 189.2 14.35L14.35 189.2C4.783 198.9-.0011 211.4-.0011 223.1c0 12.56 4.785 25.17 14.35 34.8l174.9 174.9c9.625 9.562 22.19 14.35 34.75 14.35s25.13-4.783 34.75-14.35l174.9-174.9C443.2 249.1 447.1 236.6 447.1 224zM96 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1S120 210.8 120 224S109.3 248 96 248zM224 376c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S237.3 376 224 376zM224 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1S248 210.8 248 224S237.3 248 224 248zM224 120c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S237.3 120 224 120zM352 248c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S365.3 248 352 248zM591.1 192l-118.7 0c4.418 10.27 6.604 21.25 6.604 32.23c0 20.7-7.865 41.38-23.63 57.14l-136.2 136.2v46.37C320 490.5 341.5 512 368 512h223.1c26.5 0 47.1-21.5 47.1-47.1V240C639.1 213.5 618.5 192 591.1 192zM479.1 376c-13.25 0-23.1-10.75-23.1-23.1s10.75-23.1 23.1-23.1s23.1 10.75 23.1 23.1S493.2 376 479.1 376z"/>',
"viewBox"=> "0 0 640 512",
],
"triangle-exclamation"=> [
"path"=> '<path d="M506.3 417l-213.3-364c-16.33-28-57.54-28-73.98 0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6C502.1 480 522.6 445 506.3 417zM232 168c0-13.25 10.75-24 24-24S280 154.8 280 168v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zM256 416c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/>',
"viewBox"=> "0 0 512 512",
],
"eye"=> [
"path"=> '<path d="M279.6 160.4C282.4 160.1 285.2 160 288 160C341 160 384 202.1 384 256C384 309 341 352 288 352C234.1 352 192 309 192 256C192 253.2 192.1 250.4 192.4 247.6C201.7 252.1 212.5 256 224 256C259.3 256 288 227.3 288 192C288 180.5 284.1 169.7 279.6 160.4zM480.6 112.6C527.4 156 558.7 207.1 573.5 243.7C576.8 251.6 576.8 260.4 573.5 268.3C558.7 304 527.4 355.1 480.6 399.4C433.5 443.2 368.8 480 288 480C207.2 480 142.5 443.2 95.42 399.4C48.62 355.1 17.34 304 2.461 268.3C-.8205 260.4-.8205 251.6 2.461 243.7C17.34 207.1 48.62 156 95.42 112.6C142.5 68.84 207.2 32 288 32C368.8 32 433.5 68.84 480.6 112.6V112.6zM288 112C208.5 112 144 176.5 144 256C144 335.5 208.5 400 288 400C367.5 400 432 335.5 432 256C432 176.5 367.5 112 288 112z"/>',
"viewBox"=> "0 0 576 512",
],
"circle-plus"=> [
"path"=> '<path d="M0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256zM256 368C269.3 368 280 357.3 280 344V280H344C357.3 280 368 269.3 368 256C368 242.7 357.3 232 344 232H280V168C280 154.7 269.3 144 256 144C242.7 144 232 154.7 232 168V232H168C154.7 232 144 242.7 144 256C144 269.3 154.7 280 168 280H232V344C232 357.3 242.7 368 256 368z"/>',
"viewBox"=> "0 0 512 512",
],
"magnifying-glass"=> [
"path"=> '<path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"/>',
"viewBox"=> "0 0 512 512",
],
"expand"=> [
"path"=> '<path d="M128 32H32C14.31 32 0 46.31 0 64v96c0 17.69 14.31 32 32 32s32-14.31 32-32V96h64c17.69 0 32-14.31 32-32S145.7 32 128 32zM416 32h-96c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32V64C448 46.31 433.7 32 416 32zM128 416H64v-64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96c0 17.69 14.31 32 32 32h96c17.69 0 32-14.31 32-32S145.7 416 128 416zM416 320c-17.69 0-32 14.31-32 32v64h-64c-17.69 0-32 14.31-32 32s14.31 32 32 32h96c17.69 0 32-14.31 32-32v-96C448 334.3 433.7 320 416 320z"/>',
"viewBox"=> "0 0 448 512",
],
"compress"=> [
"path"=> '<path d="M128 320H32c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32v-96C160 334.3 145.7 320 128 320zM416 320h-96c-17.69 0-32 14.31-32 32v96c0 17.69 14.31 32 32 32s32-14.31 32-32v-64h64c17.69 0 32-14.31 32-32S433.7 320 416 320zM320 192h96c17.69 0 32-14.31 32-32s-14.31-32-32-32h-64V64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96C288 177.7 302.3 192 320 192zM128 32C110.3 32 96 46.31 96 64v64H32C14.31 128 0 142.3 0 160s14.31 32 32 32h96c17.69 0 32-14.31 32-32V64C160 46.31 145.7 32 128 32z"/>',
"viewBox"=> "0 0 448 512",
],
"check"=> [
"path"=> '<path d="M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z"/>',
"viewBox"=> "0 0 448 512",
],
"close"=> [
"path"=> '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>',
"viewBox"=> "0 0 24 24",
],
"arrow-left"=> [
"path"=> '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12l4-4m-4 4 4 4"/>',
"viewBox"=> "0 0 24 24",
],
"list"=> [
"path"=> '<path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M9 8h10M9 12h10M9 16h10M4.99 8H5m-.02 4h.01m0 4H5"/>',
"viewBox"=> "0 0 24 24",
],
"ordered-list"=> [
"path"=> '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6h8m-8 6h8m-8 6h8M4 16a2 2 0 1 1 3.321 1.5L4 20h5M4 5l2-1v6m-2 0h4"/>',
"viewBox"=> "0 0 24 24",
],
"italic"=> [
"path"=> '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8.874 19 6.143-14M6 19h6.33m-.66-14H18"/>',
"viewBox"=> "0 0 24 24",
]
];
@endphp
<svg
class="bi"
xmlns="http://www.w3.org/2000/svg"
width="{{$width ?? 16}}"
height="{{$height ?? 16}}"
viewBox="{{$icons[$icon]["viewBox"]}}"
aria-labelledby={icon}
role="presentation"
stroke="{{$stroke ?? "currentColor"}}"
fill="{{$fill ?? "currentColor"}}"
>
{!! $icons[$icon]["path"] !!}
</svg>
+1 -1
View File
@@ -1,4 +1,4 @@
<div class="notice {{$type ?? "info"}}">
<div class="notice {{$type ?? "info"}}" role="alert">
<div class="title">{{$title}}</div>
<div class="content">{{ $slot }}</div>
</div>
+1
View File
@@ -0,0 +1 @@
<input type="checkbox" class="switch" value="{{$value}}" {{$checked ? "checked" : ""}} />
+22
View File
@@ -0,0 +1,22 @@
@props([
'schema',
'createMode',
])
@php
$groups = ["Main",...$schema->groups];
if(!$createMode){
$groups[] = "Backlinks";
}
@endphp
<ul class="tabs">
@foreach($groups as $tab)
<li class="tab">
<button class="button" aria-current="page">
{{$tab}}
</button>
</li>
@endforeach
</ul>
+13 -7
View File
@@ -1,16 +1,22 @@
@extends("lucent::layouts.channel")
@section("content")
@php
$createMode = $createMode ?? false;
@endphp
<div class="record-edit">
<div class="tools-header">
@include("lucent::records-editor.header")
{{-- <EditHeader {schema} bind:record {isCreateMode} bind:activeContentTab/>--}}
@include("lucent::records-editor.header")
@include("lucent::records-editor.title")
<x-lucent::notice title="Submission Errors">
asfasf
</x-lucent::notice>
<div class=" mt-4" style="margin-bottom:150px;position:relative;">
<x-lucent::tabs :schema="$schema" :createMode="$createMode"></x-lucent::tabs>
</div>
@foreach($schema->fields as $field)
@include("lucent::records-editor.fields", ["field" => $field])
@endforeach
</div>
@endsection
@@ -0,0 +1,17 @@
<div class="field-header">
<div class="labels">
<div class="label-and-help">
<label for={{$id}}
>{{$field->label}}</label
>
@if(!empty($field->help))
<small class="help-text light-text">{{$field->help}}</small>
@endif
</div>
<span
tabindex="-1"
class="text-decoration-none"
><code class="field-id">{{$field->name}}</code>
</span>
</div>
</div>
@@ -0,0 +1,20 @@
@php
$fieldId = "field-".$field->name."-".$record->id;
$params = [
"id" => $fieldId,
"value" => data_get($record->data,$field->name),
"errorMessage" => ""
];
@endphp
<div class="editor-field">
@include("lucent::records-editor.fieldHeader", $params)
@if($field->info->name === "text")
@include("lucent::records-editor.fields.text", $params)
@elseif($field->info->name === "slug")
@include("lucent::records-editor.fields.slug", $params)
@elseif($field->info->name === "color")
@include("lucent::records-editor.fields.color", $params)
@elseif($field->info->name === "file")
@include("lucent::records-editor.fields.file", $params)
@endif
</div>
@@ -0,0 +1,25 @@
<div>
<div style="display: flex; align-items: center;gap: 10px" class="color-picker">
<input
type="color"
id="{{$id}}-picker"
style="border: none;background: transparent;padding: 0;width:64px;"
{{$field->readonly && !$createMode ? "disabled" : ""}}
value="{{$value}}"
/>
<input
type="text"
id="{{$id}}"
value="{{$value}}"
class="form-control {{!empty($errorMessage) ? "is-invalid" : "" }}"
autocomplete="off"
{{$field->readonly && !$createMode ? "readonly" : ""}}
/>
</div>
@if($errorMessage)
<div class="invalid-feedback d-block">
{{$errorMessage}}
</div>
@endif
</div>
@@ -0,0 +1,16 @@
@php
$references = $graph->edges
->filter(fn($edge) => $edge->field === $field->name && $edge->source === $record->id)
->map(fn($edge) => $graph->records->firstWhere("id", $edge->target));
@endphp
@if ($references->isNotEmpty())
{{--<Sortable sortableClass="mt-3" on:update={reorder}>--}}
@foreach($references as $reference)
<!--This div helps the sorting thing-->
<div>
@include("lucent::records-editor.fields.file.preview")
</div>
@endforeach
<!--</Sortable>-->
@endif
@@ -0,0 +1,50 @@
@php
$schema = $channel->schemas->firstWhere("name",$reference->schema);
@endphp
<div class="preview-file">
<div style="display: flex;align-items: center;gap: 10px;">
<div class="image">
@include("lucent::records-editor.fields.file.thumb", ["size" => "small", "record" => $reference])
</div>
<div class="title">
<div>
<a class="record-title" href="{{lucent_url("records")}}/{{$record->id}}">
{{$viewModel->getRecordName($reference)}}
</a>
<small class="d-block">
from {{$schema->label}}
@if ($record->status === "draft")
@include("lucent::records-editor.status", ["status" => $record->status])
@endif
</small>
</div>
</div>
</div>
{{-- <div style="display: flex;gap:4px; align-items: center; margin-right: 10px;">--}}
{{-- {#if hasInsert}--}}
{{-- <div class="reference-action">--}}
{{-- <Dropdown>--}}
{{-- <div slot="button">--}}
{{-- <Icon icon="photo-film"/>--}}
{{-- </div>--}}
{{-- <button class="dropdown-item button" on:click={e => insert(e,null)}>original</button>--}}
{{-- {#each imagePresets as preset}--}}
{{-- <button class="dropdown-item button" on:click={e => insert(e,preset)}>{preset}</button>--}}
{{-- {/each}--}}
{{-- </Dropdown>--}}
{{-- </div>--}}
{{-- {/if}--}}
{{-- {#if hasDelete}--}}
{{-- <div class="reference-action">--}}
{{-- <button--}}
{{-- class="button"--}}
{{-- on:click={remove}--}}
{{-- >--}}
{{-- <Icon icon="trash-can"/>--}}
{{-- </button>--}}
{{-- </div>--}}
{{-- {/if}--}}
{{-- </div>--}}
</div>
@@ -0,0 +1,59 @@
@php
$imageSide = 256;
$fileSide = 32;
$fontSize = "20";
$showFilename = $showFilename ?? false;
if ($size === "medium") {
$imageSide = 128;
$fileSide = 12;
$fontSize = "17";
} else if ($size === "small") {
$imageSide = 64;
$fileSide = 12;
$fontSize = "15";
} else if ($size === "tiny") {
$imageSide = 42;
$fileSide = 12;
$fontSize = "13";
}
@endphp
<div style="display: flex;align-items: center;gap: 5px;">
@if(str_starts_with($record->_file->mime, "image"))
<a
href="{{lucent_url("records")}}/{{$record->id}}"
title="{{$record->_file->originalName}}"
style="width:{{$imageSide}}px;height:{{$imageSide}}px"
>
<img
class="rounded w-100"
style="border-radius: 12px;padding: 4px;"
src={{lucent_thumbnail($record)}}
alt="{{$record->_file->path}}"
/>
</a>
@else
<a
href="{{lucent_url("records")}}/{{$record->id}}"
title="{{$record->_file->path}}"
class="file-preview-small"
style="width:{{$imageSide}}px;height:{{$imageSide}}px"
>
<x-lucent::icon icon="file" :width="$fileSide" :height="$fileSide"></x-lucent::icon>
<span class="ms-2"
>.{{pathinfo($record->_file->path, PATHINFO_EXTENSION)}}</span
>
</a>
@endif
@if ($showFilename)
<a
href="{{lucent_url("records")}}/{{$record->id}}"
title="{{$record->_file->path}}"
class="preview-file-filename lx-small-text text-decoration-none"
>{{$record->_file->path}} </a>
@endif
</div>
@@ -0,0 +1,18 @@
<div>
<input
type="text"
id="{{$id}}"
value="{{$value}}"
class="form-control {{!empty($errorMessage) ? "is-invalid" : "" }}"
autocomplete="off"
{{$field->readonly && !$createMode ? "readonly" : ""}}
/>
<div class="system-help-text light-text">
Leave this empty to autogenerate from <i>{{$field->source}}</i>
</div>
@if($errorMessage)
<div class="invalid-feedback d-block">
{{$errorMessage}}
</div>
@endif
</div>
@@ -0,0 +1,20 @@
<div style="position: relative;">
@if($field->selectOptions)
<Autocomplete {field} bind:value={value}></Autocomplete>
@else
<input
type="text"
id="{{$id}}"
value="{{$value}}"
class="form-control {{!empty($errorMessage) ? "is-invalid" : "" }}"
autocomplete="off"
{{$field->readonly && !$createMode ? "readonly" : ""}}
/>
@endif
@if($errorMessage)
<div class="invalid-feedback d-block">
{{$errorMessage}}
</div>
@endif
</div>
+60 -31
View File
@@ -1,33 +1,62 @@
@php
$createMode = $createMode ?? false;
@endphp
<div style="display: flex;align-items: center; gap:10px;">
@if(!$createMode)
<x-lucent::dropdown>
icon
<x-slot:items>
<h6 class="dropdown-header">Record Actions</h6>
<a
class="dropdown-item"
href="{channel.lucentUrl}/records/new?schema={schema.name}"
>Create new</a
>
@if($createMode)
<a
class="dropdown-item"
on:click={clone}
href={channel.lucentUrl}
>
Clone
</a>
@endif
<a
class="dropdown-item"
href="{channel.lucentUrl}">Revisions</a
>
</x-slot>
</x-lucent::dropdown>
<div class="tools-header">
<div style="display: flex;align-items: center; gap:10px;">
@if(!$createMode)
<x-lucent::dropdown>
<x-lucent::icon icon="ellipsis"></x-lucent::icon>
<x-slot:items>
<h6 class="dropdown-header">Record Actions</h6>
<a
class="dropdown-item"
href="{{lucent_url("records/new")}}?schema={{$schema->name}}"
>
Create new
</a>
<a
class="dropdown-item"
href="{{lucent_url("records/clone")}}/{{$record->id}}"
>
Clone
</a>
<a
class="dropdown-item"
href="{{lucent_url("records/revisions")}}/{{$record->id}}">Revisions</a
>
</x-slot>
</x-lucent::dropdown>
@endif
@if($record->status !== "trashed")
<x-lucent::switch value="published" :checked="$record->status === 'published'"></x-lucent::switch>
@endif
@if($record->status === "published")
Published
@elseif($record->status === "draft")
Draft
@elseif($record->status === "trashed")
Trashed
@endif
</div>
@if($createMode)
<button
class="button primary btn-spinner"
>
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
></span>
Create
</button>
@else
<button
type="button"
class="button primary ms-2 btn btn-primary btn-spinner"
>
<span
class="spinner-border spinner-border-sm"
role="status"
aria-hidden="true"
></span>
Save
</button>
@endif
</div>
@@ -0,0 +1,27 @@
@php
$statusList = [
"published" => [
"value" => "published",
"text" => "Published",
"bg" => "success",
"color" => "white",
],
"trashed" => [
"value" => "trashed",
"text" => "Trashed",
"bg" => "danger",
"color" => "white",
],
"draft" => [
"value" => "draft",
"text" => "Draft",
"bg" => "warning",
"color" => "dark",
],
];
@endphp
<span class="badge text-bg-{{$statusList[$status->value]["bg"]}}" style="max-width:84px"
>{{$statusList[$status->value]["text"]}}</span
>
@@ -0,0 +1,10 @@
<div class="record-header">
<a class="schema-name" href="{{lucent_url("content")}}/{{$schema->name}}">{{strtoupper($schema->label)}}</a>
<span class="record-title">
@if(!$createMode)
{{$viewModel->getRecordName($record)}}
@else
New Record
@endif
</span>
</div>
+2 -2
View File
@@ -242,8 +242,8 @@ class RecordController extends Controller
return view("lucent::records-editor.edit",[
"schema" => $schema,
"graph" => toArray($graph),
"record" => toArray($record),
"graph" => $graph,
"record" => $record,
"users" => $this->accountService->all(),
"recordHistory" => $recordHistory,
"isWritable" => in_array($record->schema, $this->accountService->currentWritableSchemas())
+15
View File
@@ -62,4 +62,19 @@ if (!function_exists('lucent_image')) {
}
}
if (!function_exists('lucent_thumbnail')) {
function lucent_thumbnail(\Lucent\Record\QueryRecord $record): string
{
$path = $record->_file->path;
return app()->make(\Lucent\Channel\ChannelService::class)->channel->disks[$record->_file->disk] . "/thumbs/$path";
}
}
if (!function_exists('lucent_url')) {
function lucent_url(string $path): string
{
return rtrim(config("lucent.url") ?? "", "/")."/".trim($path, "/");
}
}