From 39e7a3aed41adac42988c0dff70152c3342c3284 Mon Sep 17 00:00:00 2001 From: lexx Date: Sat, 28 Sep 2024 18:36:18 +0300 Subject: [PATCH] wip file field --- front/js/components/dropdown.js | 47 +++++- front/js/helpers/clickOutside.js | 8 + front/js/helpers/debounce.js | 72 +++++++++ front/js/main.js | 7 + front/js/recordEditor/colorPicker.js | 13 ++ front/sass/app.scss | 4 + front/views/components/dropdown.blade.php | 2 +- front/views/components/icon.blade.php | 148 ++++++++++++++++++ front/views/components/notice.blade.php | 2 +- front/views/components/switch.blade.php | 1 + front/views/components/tabs.blade.php | 22 +++ front/views/records-editor/edit.blade.php | 20 ++- .../records-editor/fieldHeader.blade.php | 17 ++ front/views/records-editor/fields.blade.php | 20 +++ .../records-editor/fields/color.blade.php | 25 +++ .../records-editor/fields/file.blade.php | 16 ++ .../fields/file/preview.blade.php | 50 ++++++ .../fields/file/thumb.blade.php | 59 +++++++ .../records-editor/fields/slug.blade.php | 18 +++ .../records-editor/fields/text.blade.php | 20 +++ front/views/records-editor/header.blade.php | 91 +++++++---- front/views/records-editor/status.blade.php | 27 ++++ front/views/records-editor/title.blade.php | 10 ++ src/Http/Controller/RecordController.php | 4 +- src/macros.php | 15 ++ 25 files changed, 674 insertions(+), 44 deletions(-) create mode 100644 front/js/helpers/clickOutside.js create mode 100644 front/js/helpers/debounce.js create mode 100644 front/js/recordEditor/colorPicker.js create mode 100644 front/views/components/icon.blade.php create mode 100644 front/views/components/switch.blade.php create mode 100644 front/views/components/tabs.blade.php create mode 100644 front/views/records-editor/fieldHeader.blade.php create mode 100644 front/views/records-editor/fields.blade.php create mode 100644 front/views/records-editor/fields/color.blade.php create mode 100644 front/views/records-editor/fields/file.blade.php create mode 100644 front/views/records-editor/fields/file/preview.blade.php create mode 100644 front/views/records-editor/fields/file/thumb.blade.php create mode 100644 front/views/records-editor/fields/slug.blade.php create mode 100644 front/views/records-editor/fields/text.blade.php create mode 100644 front/views/records-editor/status.blade.php create mode 100644 front/views/records-editor/title.blade.php diff --git a/front/js/components/dropdown.js b/front/js/components/dropdown.js index cb89cf3..04245bb 100644 --- a/front/js/components/dropdown.js +++ b/front/js/components/dropdown.js @@ -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); + + +} + -} \ No newline at end of file diff --git a/front/js/helpers/clickOutside.js b/front/js/helpers/clickOutside.js new file mode 100644 index 0000000..36dbb9a --- /dev/null +++ b/front/js/helpers/clickOutside.js @@ -0,0 +1,8 @@ +export function onClickOutside(ele, closest, cb) { + document.addEventListener('click', function (event) { + if (!event.target.closest(closest)) { + cb(event) + } + }, false); +}; + diff --git a/front/js/helpers/debounce.js b/front/js/helpers/debounce.js new file mode 100644 index 0000000..cb427b6 --- /dev/null +++ b/front/js/helpers/debounce.js @@ -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}); +} diff --git a/front/js/main.js b/front/js/main.js index 9df4b5d..9210a6b 100644 --- a/front/js/main.js +++ b/front/js/main.js @@ -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; diff --git a/front/js/recordEditor/colorPicker.js b/front/js/recordEditor/colorPicker.js new file mode 100644 index 0000000..10bc6eb --- /dev/null +++ b/front/js/recordEditor/colorPicker.js @@ -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); +} \ No newline at end of file diff --git a/front/sass/app.scss b/front/sass/app.scss index 48ce6f4..a1086c1 100644 --- a/front/sass/app.scss +++ b/front/sass/app.scss @@ -105,3 +105,7 @@ a { .lucent-component { position: relative; } + +[hidden] { + display: none; +} diff --git a/front/views/components/dropdown.blade.php b/front/views/components/dropdown.blade.php index dbed80f..2881228 100644 --- a/front/views/components/dropdown.blade.php +++ b/front/views/components/dropdown.blade.php @@ -6,7 +6,7 @@ > {{$slot}} -
+ diff --git a/front/views/components/icon.blade.php b/front/views/components/icon.blade.php new file mode 100644 index 0000000..a5992ea --- /dev/null +++ b/front/views/components/icon.blade.php @@ -0,0 +1,148 @@ +@php + $icons = [ + "trash-can"=> [ + "path"=> '', + "viewBox"=> "0 0 448 512", + ], + "circle-chevron-down"=> [ + "path"=> '', + "viewBox"=> "0 0 512 512", + ], + "circle-chevron-up"=> [ + "path"=> '', + "viewBox"=> "0 0 512 512", + ], + "ellipsis"=> [ + "path"=> '', + "viewBox"=> "0 0 448 512", + ], + "ellipsis-vertical"=> [ + "path"=> '', + "viewBox"=> "0 0 128 512", + ], + "angles-down"=> [ + "path"=> '', + "viewBox"=> "0 0 384 512", + ], + "angle-right"=> [ + "path"=> '', + "viewBox"=> "0 0 256 512", + ], + "photo-film"=> [ + "path"=> '', + "viewBox"=> "0 0 640 512", + ], + "file"=> [ + "path"=> '', + "viewBox"=> "0 0 384 512", + ], + "circle-info"=> [ + "path"=> '', + "viewBox"=> "0 0 512 512", + ], + "table-columns"=> [ + "path"=> '', + "viewBox"=> "0 0 512 512", + ], + "arrow-down-a-z"=> [ + "path"=> '', + "viewBox"=> "0 0 512 512", + ], + "arrow-up-short-wide"=> [ + "path"=> '', + "viewBox"=> "0 0 576 512", + ], + "arrow-down-wide-short"=> [ + "path"=> '', + "viewBox"=> "0 0 576 512", + ], + "filter"=> [ + "path"=> '', + "viewBox"=> "0 0 512 512", + ], + "calendar"=> [ + "path"=> '', + "viewBox"=> "0 0 448 512", + ], + "pencil"=> [ + "path"=> '', + "viewBox"=> "0 0 512 512", + ], + "database"=> [ + "path"=> '', + "viewBox"=> "0 0 448 512", + ], + "dice"=> [ + "path"=> '', + "viewBox"=> "0 0 640 512", + ], + + "triangle-exclamation"=> [ + "path"=> '', + "viewBox"=> "0 0 512 512", + ], + "eye"=> [ + "path"=> '', + "viewBox"=> "0 0 576 512", + ], + "circle-plus"=> [ + "path"=> '', + "viewBox"=> "0 0 512 512", + ], + "magnifying-glass"=> [ + "path"=> '', + "viewBox"=> "0 0 512 512", + ], + "expand"=> [ + "path"=> '', + "viewBox"=> "0 0 448 512", + ], + "compress"=> [ + "path"=> '', + "viewBox"=> "0 0 448 512", + ], + "check"=> [ + "path"=> '', + "viewBox"=> "0 0 448 512", + ], + "close"=> [ + "path"=> '', + "viewBox"=> "0 0 24 24", + ], + "arrow-left"=> [ + "path"=> '', + "viewBox"=> "0 0 24 24", + ], + "list"=> [ + "path"=> '', + "viewBox"=> "0 0 24 24", + ], + "ordered-list"=> [ + "path"=> '', + "viewBox"=> "0 0 24 24", + ], + "italic"=> [ + "path"=> '', + "viewBox"=> "0 0 24 24", + ] + ]; + +@endphp + + + + + {!! $icons[$icon]["path"] !!} + + diff --git a/front/views/components/notice.blade.php b/front/views/components/notice.blade.php index e1382df..3924213 100644 --- a/front/views/components/notice.blade.php +++ b/front/views/components/notice.blade.php @@ -1,4 +1,4 @@ -
+ \ No newline at end of file diff --git a/front/views/components/switch.blade.php b/front/views/components/switch.blade.php new file mode 100644 index 0000000..a9364ef --- /dev/null +++ b/front/views/components/switch.blade.php @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/views/components/tabs.blade.php b/front/views/components/tabs.blade.php new file mode 100644 index 0000000..e9b92cc --- /dev/null +++ b/front/views/components/tabs.blade.php @@ -0,0 +1,22 @@ +@props([ + 'schema', + 'createMode', +]) + +@php +$groups = ["Main",...$schema->groups]; +if(!$createMode){ + $groups[] = "Backlinks"; +} + +@endphp +
    + @foreach($groups as $tab) +
  • + +
    • + @endforeach +
+ diff --git a/front/views/records-editor/edit.blade.php b/front/views/records-editor/edit.blade.php index 57a6a0a..672376e 100644 --- a/front/views/records-editor/edit.blade.php +++ b/front/views/records-editor/edit.blade.php @@ -1,16 +1,22 @@ @extends("lucent::layouts.channel") @section("content") - + @php + $createMode = $createMode ?? false; + @endphp
-
- @include("lucent::records-editor.header") -{{-- --}} - - + @include("lucent::records-editor.header") + @include("lucent::records-editor.title") + + asfasf + +
+
+ @foreach($schema->fields as $field) + @include("lucent::records-editor.fields", ["field" => $field]) + @endforeach
- @endsection diff --git a/front/views/records-editor/fieldHeader.blade.php b/front/views/records-editor/fieldHeader.blade.php new file mode 100644 index 0000000..97a09ac --- /dev/null +++ b/front/views/records-editor/fieldHeader.blade.php @@ -0,0 +1,17 @@ +
+
+
+ + @if(!empty($field->help)) + {{$field->help}} + @endif +
+ {{$field->name}} + +
+
diff --git a/front/views/records-editor/fields.blade.php b/front/views/records-editor/fields.blade.php new file mode 100644 index 0000000..05dae47 --- /dev/null +++ b/front/views/records-editor/fields.blade.php @@ -0,0 +1,20 @@ +@php + $fieldId = "field-".$field->name."-".$record->id; + $params = [ + "id" => $fieldId, + "value" => data_get($record->data,$field->name), + "errorMessage" => "" +]; +@endphp +
+ @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 +
\ No newline at end of file diff --git a/front/views/records-editor/fields/color.blade.php b/front/views/records-editor/fields/color.blade.php new file mode 100644 index 0000000..65f67e1 --- /dev/null +++ b/front/views/records-editor/fields/color.blade.php @@ -0,0 +1,25 @@ +
+
+ readonly && !$createMode ? "disabled" : ""}} + value="{{$value}}" + /> + readonly && !$createMode ? "readonly" : ""}} + /> +
+ + @if($errorMessage) +
+ {{$errorMessage}} +
+ @endif +
diff --git a/front/views/records-editor/fields/file.blade.php b/front/views/records-editor/fields/file.blade.php new file mode 100644 index 0000000..2b6f523 --- /dev/null +++ b/front/views/records-editor/fields/file.blade.php @@ -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()) +{{----}} + @foreach($references as $reference) + +
+ @include("lucent::records-editor.fields.file.preview") +
+ @endforeach + +@endif diff --git a/front/views/records-editor/fields/file/preview.blade.php b/front/views/records-editor/fields/file/preview.blade.php new file mode 100644 index 0000000..bbffe92 --- /dev/null +++ b/front/views/records-editor/fields/file/preview.blade.php @@ -0,0 +1,50 @@ +@php + $schema = $channel->schemas->firstWhere("name",$reference->schema); +@endphp + +
+
+
+ @include("lucent::records-editor.fields.file.thumb", ["size" => "small", "record" => $reference]) +
+
+
+ id}}"> + {{$viewModel->getRecordName($reference)}} + + + from {{$schema->label}} + @if ($record->status === "draft") + @include("lucent::records-editor.status", ["status" => $record->status]) + @endif + +
+
+
+{{--
--}} +{{-- {#if hasInsert}--}} +{{--
--}} +{{-- --}} +{{--
--}} +{{-- --}} +{{--
--}} +{{-- --}} +{{-- {#each imagePresets as preset}--}} +{{-- --}} +{{-- {/each}--}} +{{-- --}} + +{{--
--}} +{{-- {/if}--}} +{{-- {#if hasDelete}--}} +{{--
--}} +{{-- --}} +{{-- --}} +{{-- --}} +{{--
--}} +{{-- {/if}--}} +{{--
--}} +
\ No newline at end of file diff --git a/front/views/records-editor/fields/file/thumb.blade.php b/front/views/records-editor/fields/file/thumb.blade.php new file mode 100644 index 0000000..0cb9569 --- /dev/null +++ b/front/views/records-editor/fields/file/thumb.blade.php @@ -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 + + diff --git a/front/views/records-editor/fields/slug.blade.php b/front/views/records-editor/fields/slug.blade.php new file mode 100644 index 0000000..11e7fa6 --- /dev/null +++ b/front/views/records-editor/fields/slug.blade.php @@ -0,0 +1,18 @@ +
+ readonly && !$createMode ? "readonly" : ""}} + /> +
+ Leave this empty to autogenerate from {{$field->source}} +
+ @if($errorMessage) +
+ {{$errorMessage}} +
+ @endif +
diff --git a/front/views/records-editor/fields/text.blade.php b/front/views/records-editor/fields/text.blade.php new file mode 100644 index 0000000..a73117b --- /dev/null +++ b/front/views/records-editor/fields/text.blade.php @@ -0,0 +1,20 @@ +
+ @if($field->selectOptions) + + @else + readonly && !$createMode ? "readonly" : ""}} + /> + @endif + + @if($errorMessage) +
+ {{$errorMessage}} +
+ @endif +
diff --git a/front/views/records-editor/header.blade.php b/front/views/records-editor/header.blade.php index 1c46b9c..a1ef3ae 100644 --- a/front/views/records-editor/header.blade.php +++ b/front/views/records-editor/header.blade.php @@ -1,33 +1,62 @@ -@php -$createMode = $createMode ?? false; -@endphp - -
- @if(!$createMode) - - icon - -
Record Actions
- Create new - @if($createMode) - - Clone - - @endif - Revisions - - +
+
+ @if(!$createMode) + + + +
Record Actions
+ name}}" + > + Create new + + id}}" + > + Clone + + id}}">Revisions + + + @endif + @if($record->status !== "trashed") + + @endif + @if($record->status === "published") + Published + @elseif($record->status === "draft") + Draft + @elseif($record->status === "trashed") + Trashed + @endif +
+ @if($createMode) + + @else + @endif -
\ No newline at end of file diff --git a/front/views/records-editor/status.blade.php b/front/views/records-editor/status.blade.php new file mode 100644 index 0000000..475081f --- /dev/null +++ b/front/views/records-editor/status.blade.php @@ -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 + +{{$statusList[$status->value]["text"]}} diff --git a/front/views/records-editor/title.blade.php b/front/views/records-editor/title.blade.php new file mode 100644 index 0000000..dd47462 --- /dev/null +++ b/front/views/records-editor/title.blade.php @@ -0,0 +1,10 @@ +
+ name}}">{{strtoupper($schema->label)}} + + @if(!$createMode) + {{$viewModel->getRecordName($record)}} + @else + New Record + @endif + +
\ No newline at end of file diff --git a/src/Http/Controller/RecordController.php b/src/Http/Controller/RecordController.php index 72b281b..b04737a 100644 --- a/src/Http/Controller/RecordController.php +++ b/src/Http/Controller/RecordController.php @@ -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()) diff --git a/src/macros.php b/src/macros.php index 0931762..805896d 100644 --- a/src/macros.php +++ b/src/macros.php @@ -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, "/"); + } +} +