WIP: Initial web gallery
parent
92218b0b7e
commit
0ad912fab4
|
@ -88,4 +88,6 @@ Generate previews from photo buckets. Registers webhooks.
|
||||||
|
|
||||||
Reverse proxies buckets to the minio endpoint, as a substitute for the AWS S3 website hosting features. Serves up `index.html` when URLs end in a slash.
|
Reverse proxies buckets to the minio endpoint, as a substitute for the AWS S3 website hosting features. Serves up `index.html` when URLs end in a slash.
|
||||||
|
|
||||||
|
In production, [replace this with Nginx](https://docs.min.io/docs/setup-nginx-proxy-with-minio).
|
||||||
|
|
||||||
<!-- vim: set conceallevel=2 et ts=2 sw=2: -->
|
<!-- vim: set conceallevel=2 et ts=2 sw=2: -->
|
||||||
|
|
|
@ -62,7 +62,7 @@ func director(req *http.Request) {
|
||||||
} else {
|
} else {
|
||||||
// If we are using subdomains, set the host header
|
// If we are using subdomains, set the host header
|
||||||
req.URL.Path = mapPath(*req)
|
req.URL.Path = mapPath(*req)
|
||||||
//req.Header.Set("Host", host)
|
req.Header.Set("Host", host)
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prevent MINIO from issuing redirects
|
// Prevent MINIO from issuing redirects
|
||||||
|
|
|
@ -16,6 +16,7 @@ var funcs = template.FuncMap{
|
||||||
|
|
||||||
type IndexTemplateData struct {
|
type IndexTemplateData struct {
|
||||||
Assets string
|
Assets string
|
||||||
|
Bucket string
|
||||||
Metadata lib.BucketMetadata
|
Metadata lib.BucketMetadata
|
||||||
Photos []Photo
|
Photos []Photo
|
||||||
}
|
}
|
||||||
|
|
|
@ -85,6 +85,7 @@ func update(w http.ResponseWriter, req *http.Request) {
|
||||||
|
|
||||||
data := IndexTemplateData{
|
data := IndexTemplateData{
|
||||||
Assets: endpoint + "/shared/",
|
Assets: endpoint + "/shared/",
|
||||||
|
Bucket: bucket,
|
||||||
Metadata: metadata,
|
Metadata: metadata,
|
||||||
Photos: detailedPhotos,
|
Photos: detailedPhotos,
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,6 @@
|
||||||
/node_modules/
|
|
||||||
/public/build/
|
|
||||||
|
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
||||||
|
/node_modules/
|
||||||
|
/build/
|
||||||
|
|
||||||
|
.container
|
||||||
|
|
|
@ -1,64 +1,71 @@
|
||||||
DOCKER ?= podman
|
|
||||||
|
|
||||||
NAME ?= photos-web-manage
|
NAME ?= photos-web-manage
|
||||||
OUTPUT ?= public/build
|
DOCKER ?= podman
|
||||||
SOURCE ?= src
|
GO ?= go
|
||||||
ARG_PUBLISH ?= --publish 5000:5000
|
|
||||||
|
|
||||||
|
OUTPUT ?= build
|
||||||
|
SOURCE ?= src
|
||||||
|
|
||||||
|
DEV_PORT ?= 5000
|
||||||
SHARED ?= ../shared
|
SHARED ?= ../shared
|
||||||
shared_copy = public/shared
|
SHARED_COPY ?= $(OUTPUT)/shared
|
||||||
|
|
||||||
current_dir = $(shell pwd)
|
current_dir = $(shell pwd)
|
||||||
shared_source = $(wildcard $(SHARED)/*/*)
|
shared_files = $(wildcard $(SHARED)/*/*)
|
||||||
shared_target = $(foreach path,$(shared_source),$(subst $(SHARED),$(shared_copy),$(path)))
|
shared_copy_files = $(foreach path,$(shared_files),$(subst $(SHARED)/,$(SHARED_COPY)/,$(path)))
|
||||||
|
|
||||||
|
container_name = $(NAME)-builder
|
||||||
container_workdir = /working
|
container_workdir = /working
|
||||||
arg_base = \
|
arg_base = \
|
||||||
--rm --interactive --tty \
|
--rm --interactive --tty \
|
||||||
--workdir $(container_workdir) \
|
--workdir $(container_workdir) \
|
||||||
--security-opt label=disable
|
--security-opt label=disable
|
||||||
|
arg_publish = \
|
||||||
|
--publish $(DEV_PORT):$(DEV_PORT)
|
||||||
arg_volume = \
|
arg_volume = \
|
||||||
-v $(current_dir)/public:$(container_workdir)/public \
|
-v $(current_dir)/$(OUTPUT):$(container_workdir)/$(OUTPUT) \
|
||||||
-v $(current_dir)/src:$(container_workdir)/src \
|
-v $(current_dir)/$(SOURCE):$(container_workdir)/$(SOURCE) \
|
||||||
|
|
||||||
.PHONY: default
|
.PHONY: default
|
||||||
default: build install
|
default: build install
|
||||||
|
|
||||||
.PHONY: clean
|
.PHONY: clean
|
||||||
clean:
|
clean:
|
||||||
$(RM) -r $(shared_copy) $(OUTPUT) public/ .container
|
$(RM) -r $(OUTPUT) .container
|
||||||
|
|
||||||
|
|
||||||
.PHONY: container .containertest
|
.PHONY: container .containertest
|
||||||
container: .containertest .container
|
container: .containertest .container
|
||||||
.containertest:
|
.containertest:
|
||||||
$(DOCKER) image inspect $(NAME)-build 2>&1 >/dev/null || rm .container || exit 0
|
$(DOCKER) image inspect $(container_name) 2>&1 >/dev/null || rm .container || exit 0
|
||||||
.container: Dockerfile package.json rollup.config.js
|
.container: Dockerfile package.json rollup.config.js
|
||||||
$(DOCKER) build --tag $(NAME)-build --no-cache .
|
$(DOCKER) build --tag $(container_name) --no-cache .
|
||||||
touch $@
|
touch $@
|
||||||
|
|
||||||
|
|
||||||
|
DEV_BUCKET ?= test.ambrose.photos
|
||||||
.PHONY: dev
|
.PHONY: dev
|
||||||
# Start a development server
|
# Start a development server
|
||||||
dev: public/index.html $(shared_target) | container
|
dev: $(SOURCE)/* $(OUTPUT)/index.html $(shared_copy_files) | container
|
||||||
$(DOCKER) run $(arg_base) $(ARG_PUBLISH) $(arg_volume) \
|
echo "$(shared_copy_files)"
|
||||||
$(NAME)-build
|
$(DOCKER) run $(arg_base) $(arg_publish) $(arg_volume) \
|
||||||
|
$(container_name)
|
||||||
|
|
||||||
public/index.html: index.tmpl
|
$(OUTPUT)/index.html: index.tmpl indextmpl.go
|
||||||
mkdir -p $(@D)
|
mkdir -p $(@D)
|
||||||
go run indextmpl.go -t $? -o $@ -a $(subst public/,,$(shared_copy))/ -b $(subst public/,,$(OUTPUT))/ -mt "[dev] Manage"
|
$(GO) run indextmpl.go -t $< -o $@ -b $(DEV_BUCKET) -a $(subst $(OUTPUT)/,,$(SHARED_COPY))/ -mt "[dev] Manage"
|
||||||
|
|
||||||
.SECONDEXPANSION:
|
.SECONDEXPANSION:
|
||||||
$(shared_target): $$(subst $$(shared_copy),$$(SHARED),$$@)
|
$(shared_copy_files): $$(subst $$(SHARED_COPY)/,$$(SHARED)/,$$@)
|
||||||
mkdir -p $(@D) && cp $? $@
|
mkdir -p $(@D) && cp $? $@
|
||||||
|
|
||||||
|
|
||||||
.PHONY: build install
|
.PHONY: build install
|
||||||
# Build with rollup
|
# Build with rollup
|
||||||
build: $(OUTPUT)/manage.js
|
build: $(OUTPUT)/manage.js
|
||||||
$(OUTPUT)/manage.js: src/* | container
|
$(OUTPUT)/manage.js: $(SOURCE)/* | container
|
||||||
|
mkdir -p $(@D)
|
||||||
$(DOCKER) run $(arg_base) $(arg_volume) \
|
$(DOCKER) run $(arg_base) $(arg_volume) \
|
||||||
$(NAME)-build npm run build
|
$(container_name) npm run build
|
||||||
install: build
|
install: build
|
||||||
cp $(OUTPUT)/manage.js $(SHARED)/js/manage.js
|
cp $(OUTPUT)/manage.js $(SHARED)/js/manage.js
|
||||||
cp $(OUTPUT)/manage.css $(SHARED)/css/manage.css
|
cp $(OUTPUT)/manage.css $(SHARED)/css/manage.css
|
||||||
|
|
|
@ -5,11 +5,10 @@
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>{{ .Metadata.Title }}</title>
|
<title>{{ .Metadata.Title }}</title>
|
||||||
<link rel="stylesheet" href="{{ .Assets }}css/base.css">
|
<link rel="stylesheet" href="{{ .Assets }}css/base.css">
|
||||||
<link rel="stylesheet" href="{{if .Development}}{{ .Build }}{{else}}{{ .Assets }}css/{{end}}manage.css">
|
<link rel="stylesheet" href="{{if .Development}}{{else}}{{ .Assets }}css/{{end}}manage.css">
|
||||||
<!-- Svelte! -->
|
<!-- Svelte! -->
|
||||||
<script src="{{if .Development}}{{ .Build }}{{else}}{{ .Assets }}js/{{end}}manage.js" defer async></script>
|
<script src="{{if .Development}}{{else}}{{ .Assets }}js/{{end}}manage.js" defer async></script>
|
||||||
</head>
|
</head>
|
||||||
|
<body data-bucket="{{ .Bucket }}">
|
||||||
<body>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -10,8 +10,8 @@ import (
|
||||||
|
|
||||||
type IndexData struct {
|
type IndexData struct {
|
||||||
Assets string
|
Assets string
|
||||||
|
Bucket string
|
||||||
Development bool
|
Development bool
|
||||||
Build string
|
|
||||||
Metadata Metadata
|
Metadata Metadata
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -28,8 +28,8 @@ var out string
|
||||||
func main() {
|
func main() {
|
||||||
flag.StringVar(&tmpl, "t", "", "template file")
|
flag.StringVar(&tmpl, "t", "", "template file")
|
||||||
flag.StringVar(&out, "o", "", "output file")
|
flag.StringVar(&out, "o", "", "output file")
|
||||||
|
flag.StringVar(&data.Bucket, "b", "", ".Bucket")
|
||||||
flag.StringVar(&data.Assets, "a", "", ".Assets")
|
flag.StringVar(&data.Assets, "a", "", ".Assets")
|
||||||
flag.StringVar(&data.Build, "b", "", ".Build")
|
|
||||||
flag.StringVar(&data.Metadata.Title, "mt", "", ".Metadata.Title")
|
flag.StringVar(&data.Metadata.Title, "mt", "", ".Metadata.Title")
|
||||||
flag.Parse()
|
flag.Parse()
|
||||||
|
|
||||||
|
@ -52,7 +52,7 @@ func main() {
|
||||||
panic(err)
|
panic(err)
|
||||||
}
|
}
|
||||||
|
|
||||||
of, err := os.OpenFile(out, os.O_WRONLY|os.O_CREATE, 0644)
|
of, err := os.OpenFile(out, os.O_WRONLY|os.O_CREATE|os.O_TRUNC, 0644)
|
||||||
if err != nil {
|
if err != nil {
|
||||||
panic(err)
|
panic(err)
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "rollup -c",
|
"build": "rollup -c",
|
||||||
"dev": "rollup -c -w",
|
"dev": "rollup -c -w",
|
||||||
"start": "sirv public --host 0.0.0.0"
|
"start": "sirv build --host 0.0.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@rollup/plugin-commonjs": "^12.0.0",
|
"@rollup/plugin-commonjs": "^12.0.0",
|
||||||
|
|
|
@ -12,7 +12,7 @@ export default {
|
||||||
sourcemap: true,
|
sourcemap: true,
|
||||||
format: 'iife',
|
format: 'iife',
|
||||||
name: 'app',
|
name: 'app',
|
||||||
file: 'public/build/manage.js'
|
file: 'build/manage.js'
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
svelte({
|
svelte({
|
||||||
|
@ -21,7 +21,7 @@ export default {
|
||||||
// we'll extract any component CSS out into
|
// we'll extract any component CSS out into
|
||||||
// a separate file - better for performance
|
// a separate file - better for performance
|
||||||
css: css => {
|
css: css => {
|
||||||
css.write('public/build/manage.css');
|
css.write('build/manage.css');
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
@ -42,7 +42,7 @@ export default {
|
||||||
|
|
||||||
// Watch the `public` directory and refresh the
|
// Watch the `public` directory and refresh the
|
||||||
// browser on changes when not in production
|
// browser on changes when not in production
|
||||||
!production && livereload('public'),
|
!production && livereload('build'),
|
||||||
|
|
||||||
// If we're building for production (npm run build
|
// If we're building for production (npm run build
|
||||||
// instead of npm run dev), minify
|
// instead of npm run dev), minify
|
||||||
|
|
|
@ -1,30 +1,24 @@
|
||||||
<script>
|
<script>
|
||||||
export let name;
|
export let bucket;
|
||||||
|
|
||||||
|
import Gallery from './Gallery.svelte';
|
||||||
|
|
||||||
|
let photos = [
|
||||||
|
"photo/Screenshot from 2020-04-23 19-27-53.png",
|
||||||
|
"photo/Screenshot_2020-04-13 Looking Glass - Hurricane Electric (AS6939).png",
|
||||||
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<div>
|
||||||
<h1>Hello {name}!</h1>
|
<nav>
|
||||||
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
|
<ul>
|
||||||
</main>
|
<li><a href="..">Gallery</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<header>
|
||||||
|
<h1>{bucket}</h1>
|
||||||
|
</header>
|
||||||
|
<Gallery {photos} />
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<!-- vim: set ft=html: -->
|
||||||
main {
|
|
||||||
text-align: center;
|
|
||||||
padding: 1em;
|
|
||||||
max-width: 240px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: #ff3e00;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 4em;
|
|
||||||
font-weight: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
|
||||||
main {
|
|
||||||
max-width: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
@ -0,0 +1,13 @@
|
||||||
|
<script>
|
||||||
|
export let photos;
|
||||||
|
|
||||||
|
import Photo from './Photo.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
{#each photos as photo}
|
||||||
|
<Photo {photo} />
|
||||||
|
{/each}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- vim: set ft=html: -->
|
|
@ -0,0 +1,33 @@
|
||||||
|
<script>
|
||||||
|
export let photo;
|
||||||
|
|
||||||
|
async function
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="gallery-item preloaded-thumbnail" data-ar="{ar(photo)}">
|
||||||
|
<a href="{photo}" data-enlarge="{photo}">
|
||||||
|
<picture style="display: none;">
|
||||||
|
<source srcset="{preview(photo, 320, 'image/webp', 70)} 2x, {preview(photo, 160, 'image/webp', 70)} 1x" type="image/webp" media="(max-width: 900px)">
|
||||||
|
<source srcset="{preview(photo, 640, 'image/webp', 70)} 2x, {preview(photo, 320, 'image/webp', 70)} 1x" type="image/webp">
|
||||||
|
<source srcset="{preview(photo, 320, 'image/jpeg', 70)} 2x, {preview(photo, 160, 'image/jpeg', 70)} 1x" media="(max-width: 900px)">
|
||||||
|
<source srcset="{preview(photo, 640, 'image/jpeg', 70)} 2x, {preview(photo, 320, 'image/jpeg', 70)} 1x">
|
||||||
|
<img src="{preview(photo, 320, 'image/jpeg', 70)}"
|
||||||
|
alt=""
|
||||||
|
width="{ar(photo) * 320}"
|
||||||
|
height="320"
|
||||||
|
loading="lazy"
|
||||||
|
data-enlarge-preload-for="{photo}">
|
||||||
|
</picture>
|
||||||
|
<picture class="preloaded-thumbnail-image">
|
||||||
|
<source srcset="{preview(photo, 30, 'image/webp', 34)} 1x" type="image/webp" media="(max-width: 900px)">
|
||||||
|
<source srcset="{preview(photo, 60, 'image/webp', 34)} 1x" type="image/webp">
|
||||||
|
<source srcset="{preview(photo, 30, 'image/jpeg', 34)} 1x" media="(max-width: 900px)">
|
||||||
|
<source srcset="{preview(photo, 60, 'image/jpeg', 34)} 1x">
|
||||||
|
<img src="{preview(photo, 30, 'image/jpeg', 34)}"
|
||||||
|
alt=""
|
||||||
|
width="{ar(photo) * 320}"
|
||||||
|
height="320">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<!-- vim: set ft=html: -->
|
|
@ -3,7 +3,7 @@ import App from './App.svelte';
|
||||||
const app = new App({
|
const app = new App({
|
||||||
target: document.body,
|
target: document.body,
|
||||||
props: {
|
props: {
|
||||||
name: 'ambrose'
|
bucket: document.body.dataset.bucket,
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=manage.css.map */
|
|
@ -0,0 +1,442 @@
|
||||||
|
|
||||||
|
(function(l, r) { if (l.getElementById('livereloadscript')) return; r = l.createElement('script'); r.async = 1; r.src = '//' + (window.location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1'; r.id = 'livereloadscript'; l.getElementsByTagName('head')[0].appendChild(r) })(window.document);
|
||||||
|
var app = (function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function noop() { }
|
||||||
|
function add_location(element, file, line, column, char) {
|
||||||
|
element.__svelte_meta = {
|
||||||
|
loc: { file, line, column, char }
|
||||||
|
};
|
||||||
|
}
|
||||||
|
function run(fn) {
|
||||||
|
return fn();
|
||||||
|
}
|
||||||
|
function blank_object() {
|
||||||
|
return Object.create(null);
|
||||||
|
}
|
||||||
|
function run_all(fns) {
|
||||||
|
fns.forEach(run);
|
||||||
|
}
|
||||||
|
function is_function(thing) {
|
||||||
|
return typeof thing === 'function';
|
||||||
|
}
|
||||||
|
function safe_not_equal(a, b) {
|
||||||
|
return a != a ? b == b : a !== b || ((a && typeof a === 'object') || typeof a === 'function');
|
||||||
|
}
|
||||||
|
|
||||||
|
function append(target, node) {
|
||||||
|
target.appendChild(node);
|
||||||
|
}
|
||||||
|
function insert(target, node, anchor) {
|
||||||
|
target.insertBefore(node, anchor || null);
|
||||||
|
}
|
||||||
|
function detach(node) {
|
||||||
|
node.parentNode.removeChild(node);
|
||||||
|
}
|
||||||
|
function element(name) {
|
||||||
|
return document.createElement(name);
|
||||||
|
}
|
||||||
|
function text(data) {
|
||||||
|
return document.createTextNode(data);
|
||||||
|
}
|
||||||
|
function space() {
|
||||||
|
return text(' ');
|
||||||
|
}
|
||||||
|
function attr(node, attribute, value) {
|
||||||
|
if (value == null)
|
||||||
|
node.removeAttribute(attribute);
|
||||||
|
else if (node.getAttribute(attribute) !== value)
|
||||||
|
node.setAttribute(attribute, value);
|
||||||
|
}
|
||||||
|
function children(element) {
|
||||||
|
return Array.from(element.childNodes);
|
||||||
|
}
|
||||||
|
function custom_event(type, detail) {
|
||||||
|
const e = document.createEvent('CustomEvent');
|
||||||
|
e.initCustomEvent(type, false, false, detail);
|
||||||
|
return e;
|
||||||
|
}
|
||||||
|
|
||||||
|
let current_component;
|
||||||
|
function set_current_component(component) {
|
||||||
|
current_component = component;
|
||||||
|
}
|
||||||
|
|
||||||
|
const dirty_components = [];
|
||||||
|
const binding_callbacks = [];
|
||||||
|
const render_callbacks = [];
|
||||||
|
const flush_callbacks = [];
|
||||||
|
const resolved_promise = Promise.resolve();
|
||||||
|
let update_scheduled = false;
|
||||||
|
function schedule_update() {
|
||||||
|
if (!update_scheduled) {
|
||||||
|
update_scheduled = true;
|
||||||
|
resolved_promise.then(flush);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function add_render_callback(fn) {
|
||||||
|
render_callbacks.push(fn);
|
||||||
|
}
|
||||||
|
let flushing = false;
|
||||||
|
const seen_callbacks = new Set();
|
||||||
|
function flush() {
|
||||||
|
if (flushing)
|
||||||
|
return;
|
||||||
|
flushing = true;
|
||||||
|
do {
|
||||||
|
// first, call beforeUpdate functions
|
||||||
|
// and update components
|
||||||
|
for (let i = 0; i < dirty_components.length; i += 1) {
|
||||||
|
const component = dirty_components[i];
|
||||||
|
set_current_component(component);
|
||||||
|
update(component.$$);
|
||||||
|
}
|
||||||
|
dirty_components.length = 0;
|
||||||
|
while (binding_callbacks.length)
|
||||||
|
binding_callbacks.pop()();
|
||||||
|
// then, once components are updated, call
|
||||||
|
// afterUpdate functions. This may cause
|
||||||
|
// subsequent updates...
|
||||||
|
for (let i = 0; i < render_callbacks.length; i += 1) {
|
||||||
|
const callback = render_callbacks[i];
|
||||||
|
if (!seen_callbacks.has(callback)) {
|
||||||
|
// ...so guard against infinite loops
|
||||||
|
seen_callbacks.add(callback);
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
render_callbacks.length = 0;
|
||||||
|
} while (dirty_components.length);
|
||||||
|
while (flush_callbacks.length) {
|
||||||
|
flush_callbacks.pop()();
|
||||||
|
}
|
||||||
|
update_scheduled = false;
|
||||||
|
flushing = false;
|
||||||
|
seen_callbacks.clear();
|
||||||
|
}
|
||||||
|
function update($$) {
|
||||||
|
if ($$.fragment !== null) {
|
||||||
|
$$.update();
|
||||||
|
run_all($$.before_update);
|
||||||
|
const dirty = $$.dirty;
|
||||||
|
$$.dirty = [-1];
|
||||||
|
$$.fragment && $$.fragment.p($$.ctx, dirty);
|
||||||
|
$$.after_update.forEach(add_render_callback);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const outroing = new Set();
|
||||||
|
function transition_in(block, local) {
|
||||||
|
if (block && block.i) {
|
||||||
|
outroing.delete(block);
|
||||||
|
block.i(local);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function mount_component(component, target, anchor) {
|
||||||
|
const { fragment, on_mount, on_destroy, after_update } = component.$$;
|
||||||
|
fragment && fragment.m(target, anchor);
|
||||||
|
// onMount happens before the initial afterUpdate
|
||||||
|
add_render_callback(() => {
|
||||||
|
const new_on_destroy = on_mount.map(run).filter(is_function);
|
||||||
|
if (on_destroy) {
|
||||||
|
on_destroy.push(...new_on_destroy);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Edge case - component was destroyed immediately,
|
||||||
|
// most likely as a result of a binding initialising
|
||||||
|
run_all(new_on_destroy);
|
||||||
|
}
|
||||||
|
component.$$.on_mount = [];
|
||||||
|
});
|
||||||
|
after_update.forEach(add_render_callback);
|
||||||
|
}
|
||||||
|
function destroy_component(component, detaching) {
|
||||||
|
const $$ = component.$$;
|
||||||
|
if ($$.fragment !== null) {
|
||||||
|
run_all($$.on_destroy);
|
||||||
|
$$.fragment && $$.fragment.d(detaching);
|
||||||
|
// TODO null out other refs, including component.$$ (but need to
|
||||||
|
// preserve final state?)
|
||||||
|
$$.on_destroy = $$.fragment = null;
|
||||||
|
$$.ctx = [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function make_dirty(component, i) {
|
||||||
|
if (component.$$.dirty[0] === -1) {
|
||||||
|
dirty_components.push(component);
|
||||||
|
schedule_update();
|
||||||
|
component.$$.dirty.fill(0);
|
||||||
|
}
|
||||||
|
component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
|
||||||
|
}
|
||||||
|
function init(component, options, instance, create_fragment, not_equal, props, dirty = [-1]) {
|
||||||
|
const parent_component = current_component;
|
||||||
|
set_current_component(component);
|
||||||
|
const prop_values = options.props || {};
|
||||||
|
const $$ = component.$$ = {
|
||||||
|
fragment: null,
|
||||||
|
ctx: null,
|
||||||
|
// state
|
||||||
|
props,
|
||||||
|
update: noop,
|
||||||
|
not_equal,
|
||||||
|
bound: blank_object(),
|
||||||
|
// lifecycle
|
||||||
|
on_mount: [],
|
||||||
|
on_destroy: [],
|
||||||
|
before_update: [],
|
||||||
|
after_update: [],
|
||||||
|
context: new Map(parent_component ? parent_component.$$.context : []),
|
||||||
|
// everything else
|
||||||
|
callbacks: blank_object(),
|
||||||
|
dirty
|
||||||
|
};
|
||||||
|
let ready = false;
|
||||||
|
$$.ctx = instance
|
||||||
|
? instance(component, prop_values, (i, ret, ...rest) => {
|
||||||
|
const value = rest.length ? rest[0] : ret;
|
||||||
|
if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
|
||||||
|
if ($$.bound[i])
|
||||||
|
$$.bound[i](value);
|
||||||
|
if (ready)
|
||||||
|
make_dirty(component, i);
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
})
|
||||||
|
: [];
|
||||||
|
$$.update();
|
||||||
|
ready = true;
|
||||||
|
run_all($$.before_update);
|
||||||
|
// `false` as a special case of no DOM component
|
||||||
|
$$.fragment = create_fragment ? create_fragment($$.ctx) : false;
|
||||||
|
if (options.target) {
|
||||||
|
if (options.hydrate) {
|
||||||
|
const nodes = children(options.target);
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
|
$$.fragment && $$.fragment.l(nodes);
|
||||||
|
nodes.forEach(detach);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||||
|
$$.fragment && $$.fragment.c();
|
||||||
|
}
|
||||||
|
if (options.intro)
|
||||||
|
transition_in(component.$$.fragment);
|
||||||
|
mount_component(component, options.target, options.anchor);
|
||||||
|
flush();
|
||||||
|
}
|
||||||
|
set_current_component(parent_component);
|
||||||
|
}
|
||||||
|
class SvelteComponent {
|
||||||
|
$destroy() {
|
||||||
|
destroy_component(this, 1);
|
||||||
|
this.$destroy = noop;
|
||||||
|
}
|
||||||
|
$on(type, callback) {
|
||||||
|
const callbacks = (this.$$.callbacks[type] || (this.$$.callbacks[type] = []));
|
||||||
|
callbacks.push(callback);
|
||||||
|
return () => {
|
||||||
|
const index = callbacks.indexOf(callback);
|
||||||
|
if (index !== -1)
|
||||||
|
callbacks.splice(index, 1);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
$set() {
|
||||||
|
// overridden by instance, if it has props
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function dispatch_dev(type, detail) {
|
||||||
|
document.dispatchEvent(custom_event(type, Object.assign({ version: '3.23.1' }, detail)));
|
||||||
|
}
|
||||||
|
function append_dev(target, node) {
|
||||||
|
dispatch_dev("SvelteDOMInsert", { target, node });
|
||||||
|
append(target, node);
|
||||||
|
}
|
||||||
|
function insert_dev(target, node, anchor) {
|
||||||
|
dispatch_dev("SvelteDOMInsert", { target, node, anchor });
|
||||||
|
insert(target, node, anchor);
|
||||||
|
}
|
||||||
|
function detach_dev(node) {
|
||||||
|
dispatch_dev("SvelteDOMRemove", { node });
|
||||||
|
detach(node);
|
||||||
|
}
|
||||||
|
function attr_dev(node, attribute, value) {
|
||||||
|
attr(node, attribute, value);
|
||||||
|
if (value == null)
|
||||||
|
dispatch_dev("SvelteDOMRemoveAttribute", { node, attribute });
|
||||||
|
else
|
||||||
|
dispatch_dev("SvelteDOMSetAttribute", { node, attribute, value });
|
||||||
|
}
|
||||||
|
function set_data_dev(text, data) {
|
||||||
|
data = '' + data;
|
||||||
|
if (text.data === data)
|
||||||
|
return;
|
||||||
|
dispatch_dev("SvelteDOMSetData", { node: text, data });
|
||||||
|
text.data = data;
|
||||||
|
}
|
||||||
|
function validate_slots(name, slot, keys) {
|
||||||
|
for (const slot_key of Object.keys(slot)) {
|
||||||
|
if (!~keys.indexOf(slot_key)) {
|
||||||
|
console.warn(`<${name}> received an unexpected slot "${slot_key}".`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
class SvelteComponentDev extends SvelteComponent {
|
||||||
|
constructor(options) {
|
||||||
|
if (!options || (!options.target && !options.$$inline)) {
|
||||||
|
throw new Error(`'target' is a required option`);
|
||||||
|
}
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
$destroy() {
|
||||||
|
super.$destroy();
|
||||||
|
this.$destroy = () => {
|
||||||
|
console.warn(`Component was already destroyed`); // eslint-disable-line no-console
|
||||||
|
};
|
||||||
|
}
|
||||||
|
$capture_state() { }
|
||||||
|
$inject_state() { }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* src/App.svelte generated by Svelte v3.23.1 */
|
||||||
|
|
||||||
|
const file = "src/App.svelte";
|
||||||
|
|
||||||
|
function create_fragment(ctx) {
|
||||||
|
let main;
|
||||||
|
let h1;
|
||||||
|
let t0;
|
||||||
|
let t1;
|
||||||
|
let t2;
|
||||||
|
let t3;
|
||||||
|
let p;
|
||||||
|
let t4;
|
||||||
|
let a;
|
||||||
|
let t6;
|
||||||
|
|
||||||
|
const block = {
|
||||||
|
c: function create() {
|
||||||
|
main = element("main");
|
||||||
|
h1 = element("h1");
|
||||||
|
t0 = text("Hello ");
|
||||||
|
t1 = text(/*bucket*/ ctx[0]);
|
||||||
|
t2 = text("!");
|
||||||
|
t3 = space();
|
||||||
|
p = element("p");
|
||||||
|
t4 = text("Visit the ");
|
||||||
|
a = element("a");
|
||||||
|
a.textContent = "Svelte tutorial";
|
||||||
|
t6 = text(" to learn how to build Svelte apps.");
|
||||||
|
attr_dev(h1, "class", "svelte-1tky8bj");
|
||||||
|
add_location(h1, file, 5, 1, 48);
|
||||||
|
attr_dev(a, "href", "https://svelte.dev/tutorial");
|
||||||
|
add_location(a, file, 6, 14, 87);
|
||||||
|
add_location(p, file, 6, 1, 74);
|
||||||
|
attr_dev(main, "class", "svelte-1tky8bj");
|
||||||
|
add_location(main, file, 4, 0, 40);
|
||||||
|
},
|
||||||
|
l: function claim(nodes) {
|
||||||
|
throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
|
||||||
|
},
|
||||||
|
m: function mount(target, anchor) {
|
||||||
|
insert_dev(target, main, anchor);
|
||||||
|
append_dev(main, h1);
|
||||||
|
append_dev(h1, t0);
|
||||||
|
append_dev(h1, t1);
|
||||||
|
append_dev(h1, t2);
|
||||||
|
append_dev(main, t3);
|
||||||
|
append_dev(main, p);
|
||||||
|
append_dev(p, t4);
|
||||||
|
append_dev(p, a);
|
||||||
|
append_dev(p, t6);
|
||||||
|
},
|
||||||
|
p: function update(ctx, [dirty]) {
|
||||||
|
if (dirty & /*bucket*/ 1) set_data_dev(t1, /*bucket*/ ctx[0]);
|
||||||
|
},
|
||||||
|
i: noop,
|
||||||
|
o: noop,
|
||||||
|
d: function destroy(detaching) {
|
||||||
|
if (detaching) detach_dev(main);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
dispatch_dev("SvelteRegisterBlock", {
|
||||||
|
block,
|
||||||
|
id: create_fragment.name,
|
||||||
|
type: "component",
|
||||||
|
source: "",
|
||||||
|
ctx
|
||||||
|
});
|
||||||
|
|
||||||
|
return block;
|
||||||
|
}
|
||||||
|
|
||||||
|
function instance($$self, $$props, $$invalidate) {
|
||||||
|
let { bucket } = $$props;
|
||||||
|
const writable_props = ["bucket"];
|
||||||
|
|
||||||
|
Object.keys($$props).forEach(key => {
|
||||||
|
if (!~writable_props.indexOf(key) && key.slice(0, 2) !== "$$") console.warn(`<App> was created with unknown prop '${key}'`);
|
||||||
|
});
|
||||||
|
|
||||||
|
let { $$slots = {}, $$scope } = $$props;
|
||||||
|
validate_slots("App", $$slots, []);
|
||||||
|
|
||||||
|
$$self.$set = $$props => {
|
||||||
|
if ("bucket" in $$props) $$invalidate(0, bucket = $$props.bucket);
|
||||||
|
};
|
||||||
|
|
||||||
|
$$self.$capture_state = () => ({ bucket });
|
||||||
|
|
||||||
|
$$self.$inject_state = $$props => {
|
||||||
|
if ("bucket" in $$props) $$invalidate(0, bucket = $$props.bucket);
|
||||||
|
};
|
||||||
|
|
||||||
|
if ($$props && "$$inject" in $$props) {
|
||||||
|
$$self.$inject_state($$props.$$inject);
|
||||||
|
}
|
||||||
|
|
||||||
|
return [bucket];
|
||||||
|
}
|
||||||
|
|
||||||
|
class App extends SvelteComponentDev {
|
||||||
|
constructor(options) {
|
||||||
|
super(options);
|
||||||
|
init(this, options, instance, create_fragment, safe_not_equal, { bucket: 0 });
|
||||||
|
|
||||||
|
dispatch_dev("SvelteRegisterComponent", {
|
||||||
|
component: this,
|
||||||
|
tagName: "App",
|
||||||
|
options,
|
||||||
|
id: create_fragment.name
|
||||||
|
});
|
||||||
|
|
||||||
|
const { ctx } = this.$$;
|
||||||
|
const props = options.props || {};
|
||||||
|
|
||||||
|
if (/*bucket*/ ctx[0] === undefined && !("bucket" in props)) {
|
||||||
|
console.warn("<App> was created without expected prop 'bucket'");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
get bucket() {
|
||||||
|
throw new Error("<App>: Props cannot be read directly from the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
|
||||||
|
}
|
||||||
|
|
||||||
|
set bucket(value) {
|
||||||
|
throw new Error("<App>: Props cannot be set directly on the component instance unless compiling with 'accessors: true' or '<svelte:options accessors/>'");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const app = new App({
|
||||||
|
target: document.body,
|
||||||
|
props: {
|
||||||
|
bucket: document.body.dataset.bucket,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return app;
|
||||||
|
|
||||||
|
}());
|
||||||
|
//# sourceMappingURL=manage.js.map
|
Loading…
Reference in New Issue