aboutsummaryrefslogtreecommitdiff
path: root/static/widgets/image
diff options
context:
space:
mode:
Diffstat (limited to 'static/widgets/image')
-rw-r--r--static/widgets/image/index.css134
-rw-r--r--static/widgets/image/index.js108
2 files changed, 0 insertions, 242 deletions
diff --git a/static/widgets/image/index.css b/static/widgets/image/index.css
deleted file mode 100644
index a4105e9..0000000
--- a/static/widgets/image/index.css
+++ /dev/null
@@ -1,134 +0,0 @@
-#container {
- position: relative;
- height: 100%;
- min-height: 100px;
- border-radius: var(--border-radius);
- overflow: hidden;
- box-shadow: #223223aa 1px 1px 4px;
- background: var(--card-background);
- margin: auto;
-}
-
-#container img {
- border-radius: var(--border-radius);
- max-width: 700px;
- width: calc(100vw - 20px);
- visibility: hidden;
- margin-bottom: -5px;
- height: calc((100vw - 20px) * 0.8);
-}
-
-#container.loaded img {
- visibility: visible;
- width: 100%;
- height: unset;
-}
-
-@keyframes loader {
- 0% {
- width: 60px;
- height: 60px;
- }
-
- 25% {
- border: 5px solid var(--page-background);
- }
-
- 50% {
- width: 80px;
- height: 80px;
- }
-
- 75% {
- border: 10px solid var(--page-background);
- }
-
- 100% {
- width: 60px;
- height: 60px;
- }
-}
-
-#loading {
- position: absolute;
- border: 10px solid var(--page-background);
- border-radius: 100%;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- animation: 0.5s infinite loader ease;
-}
-
-.loaded #loading {
- display: none;
-}
-
-#menu {
- position: absolute;
- top: 0px;
- left: 0px;
- height: 100%;
- width: 0px;
- background: #efefef99;
- backdrop-filter: blur(5px);
- border-radius: var(--border-radius);
- transition: width 0.2s ease, padding 0.2s ease;
- overflow: hidden;
- align-content: center;
- overflow: hidden;
- padding: 0px;
- display: grid;
- grid-template-columns: 1fr;
- gap: 10px;
-}
-
-#menu.open {
- width: 100%;
- padding: 10px;
-}
-
-#delete {
- background: #ee5151;
- padding: 10px;
- color: #fff;
- font-weight: bold;
- border-radius: var(--border-radius);
- cursor: pointer;
- user-select: none;
-}
-
-#download {
- background: var(--primary);
- padding: 10px;
- border-radius: var(--border-radius);
- color: #fff;
- font-weight: bold;
- user-select: none;
- cursor: pointer;
-}
-
-#label {
- display: grid;
- grid-template-columns: 55px auto;
-}
-
-#label #title {
- padding: 10px;
- background: var(--primary);
- border-top-left-radius: var(--border-radius);
- border-bottom-left-radius: var(--border-radius);
- color: #fff;
- font-weight: bold;
- user-select: none;
-}
-
-.element {
- background: #efefef99;
- padding: 10px;
- font-weight: bold;
- overflow-x: auto;
- user-select: none;
- white-space: nowrap;
- border-top-right-radius: var(--border-radius);
- border-bottom-right-radius: var(--border-radius);
-}
diff --git a/static/widgets/image/index.js b/static/widgets/image/index.js
deleted file mode 100644
index b063864..0000000
--- a/static/widgets/image/index.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import * as api from 'api';
-import * as sfw from 'sfw';
-import Month from '../../month.js';
-const { Div, Img, A: Link } = sfw.element.native;
-
-import stylesheet from './index.css';
-
-const css = await sfw.css.sheet(stylesheet);
-
-export default class Image extends sfw.element.Container {
- #container
- #image
- #menu
- #id
- #month
- #date
- #id_element
- #disabled
-
- constructor() {
- super ({ css })
-
- this.#disabled = false;
-
- this.body.append(
- this.#container = Div.new({
- id: 'container',
- children: [
- this.#image = Img.new({
- onload: () => this.#container.classList.add('loaded'),
- }),
- Div.new({ id: 'loading' }),
- this.#menu = Div.new({
- id: 'menu',
- children: [
- Div.new({
- id: 'label',
- children: [
- Div.new({ id: 'title', innerText: 'Id' }),
- this.#id_element = Div.new({ className: 'element id' }),
- ],
- }),
- Div.new({
- id: 'label',
- children: [
- Div.new({ id: 'title', innerText: 'Date' }),
- this.#date = Div.new({ className: 'element' }),
- ],
- }),
- Div.new({
- id: 'download',
- innerText: 'Download',
- onclick: () => {
- const a = Link.new({
- href: `/api/image/load/${this.#id}`,
- download: `${this.#id}.jpeg`
- })
- a.click()
- }
- }),
- Div.new({
- id: 'delete',
- innerText: 'Delete',
- onclick: () => {
- api.images.remove(this.#id);
- this.parentNode.removeChild(this);
- }
- }),
- ],
- ondblclick: (e) => {
- if (e.target != this.#menu) {
- e.stopPropagation();
- }
- }
- })
- ],
- ondblclick: (e) => {
- if (!this.#disabled) {
- this.#menu.classList.toggle('open');
- e.preventDefault();
- }
- }
- })
- );
- }
-
- set metadata(image) {
- const date = new Date(image.timestamp * 1000);
- this.#id = image.id;
- this.#month = Month.from_unix(image.timestamp);
- this.#container.classList.remove('loaded');
- this.#date.innerText = date.toLocaleString();
- this.#id_element.innerText = image.id;
- }
-
- load() {
- this.#image.src = `/api/image/load/${this.#id}`;
- }
-
- get month() {
- return this.#month;
- }
-
- set disabled(value) {
- this.#disabled = value;
- this.#image.setAttribute('draggable', !value);
- }
-}