mirror of
https://github.com/mickael-kerjean/filestash
synced 2025-12-14 12:26:53 +01:00
51 lines
2.4 KiB
JavaScript
51 lines
2.4 KiB
JavaScript
import { createElement } from "../../lib/skeleton/index.js";
|
|
import { CSS } from "../../helpers/loader.js";
|
|
|
|
const $tmpl = createElement(`
|
|
<div class="component_thing view-grid not-selected" draggable="true">
|
|
<a href="/view/README.org" data-link>
|
|
<div class="box">
|
|
<div class="component_checkbox"><input type="checkbox"><span class="indicator"></span></div>
|
|
<span>
|
|
<img class="component_icon" draggable="false" src="https://demo.filestash.app/assets/icons/folder.svg" alt="directory">
|
|
</span>
|
|
<span class="component_filename">
|
|
<span class="file-details">
|
|
<span>Videos<span class="extension"></span></span>
|
|
</span>
|
|
</span>
|
|
<span class="component_datetime"><span>06/06/2020</span></span>
|
|
<div class="component_action">
|
|
<span><img class="component_icon" draggableg="false" src="https://demo.filestash.app/assets/icons/edit.svg" alt="edit"></span>
|
|
<span><img class="component_icon" draggable="false" src="https://demo.filestash.app/assets/icons/delete.svg" alt="delete"></span>
|
|
<span><img class="component_icon" draggable="false" src="https://demo.filestash.app/assets/icons/share.svg" alt="share"></span>
|
|
</div>
|
|
<div class="selectionOverlay"></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
`);
|
|
|
|
// a filesystem "thing" is typically either a file or folder which have a lot of behavior builtin.
|
|
// Probably one day we can rename that to something more clear but the gist is a thing can be
|
|
// displayed in list mode / grid mode, have some substate to enable loading state for upload,
|
|
// can toggle links, potentially includes a thumbnail, can be used as a source and target for
|
|
// drag and drop on other folders and many other non obvious stuff
|
|
export function createThing({
|
|
name = null,
|
|
// type = "N/A",
|
|
// size = 0,
|
|
// time = null,
|
|
link = "",
|
|
// permissions = {}
|
|
}) {
|
|
const $thing = $tmpl.cloneNode(true);
|
|
if ($thing instanceof HTMLElement) {
|
|
const $label = $thing.querySelector(".component_filename .file-details > span");
|
|
if ($label instanceof HTMLElement) $label.textContent = name;
|
|
$thing?.querySelector("a")?.setAttribute("href", link);
|
|
}
|
|
return $thing;
|
|
}
|
|
|
|
export const css = CSS(import.meta.url, "thing.css");
|