big document wip, bleedHandler

2 years ago · 6668af3bb9
parent 41b814c1e7
commit 6668af3bb9
7 changed files with 57 additions and 16 deletions
--- a/postit/contents.json
+++ b/postit/contents.json
--- a/postit/dump.py
+++ b/postit/dump.py
@ -4,10 +4,14 @@ import os
 import string


-def dump():
+def dump(order=None):
    # list all the folders
    path = "postit/static/contents"
-    folders = [f.name for f in os.scandir(path) if f.is_dir()]
+
+    folders = order
+
+    if folders == None:
+        folders = [f.name for f in os.scandir(path) if f.is_dir()]

    contents = []

--- a/postit/generate.py
+++ b/postit/generate.py
@ -3,6 +3,8 @@ import json
 from . import dump
 import os

+index = ['what-is-a-loot-box', 'crosswords', 'one-sentence-game-ideas', 'nim', 'mimic', 'unfinished-thoughts', 'the-leader', 'connect-less', 'xquisite', 'katamari', 'life-hacks', 'karaoke']
+

 bp = Blueprint(
    "generate",
@ -14,17 +16,17 @@ bp = Blueprint(
@bp.route("/")
 def blocks():
    # temporary, eventually we will dump contents only when they are updated (git hooks + git pull ?)
-    dump.dump()
+    dump.dump(index)

    with open("postit/contents.json", "r") as f:
        contents = json.load(f)

-    return render_template("postit.html", contents=contents)
+    return render_template("postit-single.html", contents=contents)


@bp.route("/<slug>")
 def block(slug=None):
-    dump.dump()
+    dump.dump([slug])

    with open("postit/contents.json", "r") as f:
        contents = json.load(f)
--- a/postit/static/contents
+++ b/postit/static/contents
@ -1 +1 @@
-Subproject commit 4f0bc1f4d7ecb421ceaa711bc45d7b80b59d9f9c
+Subproject commit 128c32bee02212dfc44f41c6465fe58c6c683bf6
--- a/postit/static/css/postit.css
+++ b/postit/static/css/postit.css
@ -6,8 +6,29 @@
 }

 :root {
-	--background: #8f00ff33;
-	--color: #8f00ff;
+	--color: var(--purple);
+	--background: var(--purple-bg);
+	--bar-opacity: var(--purple-opacity);
+
+	/* --color: var(--orange);
+	--background: var(--orange-bg);
+	--bar-opacity: var(--orange-opacity);
+
+	--color: var(--orange2);
+	--background: var(--orange-bg2);
+	--bar-opacity: var(--orange-opacity2); */
+
+	--purple: #8f00ff;
+	--purple-bg: #e8cdfe;
+	--purple-opacity: 1;
+
+	--orange: #fc074f;
+	--orange-bg: #f95951;
+	--orange-opacity: 0.5;
+
+	--orange2: #ff5416;
+	--orange-bg2: #fca577;
+	--orange-opacity2: 1;
 }

 html,
@ -66,6 +87,8 @@ img {
 	font-weight: normal;
 	text-transform: uppercase;
 	font-size: 14px;
+	position: relative;
+	z-index: 10;
 }

 .description {
@ -113,10 +136,11 @@ a {
 	position: absolute;
 	top: 0;
 	left: 0;
+	opacity: 0.5;
 }

@media screen {
 	.post-it {
-		border: 1px solid var(--background);
+		border: 1px solid #ddd;
 	}
 }
--- a/postit/static/js/bleed.js
+++ b/postit/static/js/bleed.js
@ -1,11 +1,22 @@
-// Wait for Flask, Jinja2, and Paged.js to do their things
-setTimeout(getImages, 2500);
+class BleedHandler extends Paged.Handler {
+	constructor(chunker, polisher, caller) {
+		super(chunker, polisher, caller);
+	}

-function getImages() {
-	const images = document.querySelectorAll("[data-image]");
-	Array.from(images).forEach((img) => moveImage(img));
+	afterPageLayout(pageFragment, page) {
+		let img = pageFragment.querySelector("img");
+		if (img) {
+			moveImage(img);
+		}
+	}
+
+	afterRendered(pages) {
+		console.log("Ready!");
+	}
 }

+Paged.registerHandlers(BleedHandler);
+
 function moveImage(img) {
 	let parent = img.closest(".pagedjs_sheet");
 	parent.prepend(img);
--- a/postit/templates/postit-single.html
+++ b/postit/templates/postit-single.html
@ -8,7 +8,7 @@
 		<link rel="stylesheet" href="{{url_for('static', filename='css/postit.css')}}" />
 		<link rel="stylesheet" href="{{url_for('static', filename='css/contents.css')}}" />
 		<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
-		<script src="{{url_for('static', filename='js/bleed.js')}}" defer></script>
+		<script src="{{url_for('static', filename='js/bleed.js')}}"></script>
 	</head>
 	<body>
 		{% for content in contents %}