M artbound_python/static/script.js → artbound_python/static/script.js

@@ -23,7 +23,8 @@ opacity_range = document.getElementById("opacity_range"),
 	main_container_div = document.getElementById("main_container"),
 	content_div = document.getElementById("content"),
 	canvas_link = document.getElementById("canvas-download"),
-	canvas_ig = document.getElementById("instagram-canvas");
+	canvas_ig = document.getElementById("instagram-canvas"),
+	fanart_template = document.getElementById("fanart-template").innerHTML;
 
 let	fanarts = new Array(),
 	watermark_invert = '';
@@ -44,65 +45,23 @@ canvas.addEventListener('mousedown', abc);
 	});
 }
 
+function createElementFromHTML(htmlString) {
+	const div = document.createElement('div');
+	div.innerHTML = htmlString.trim();
+	return div.firstChild;
+  }
+
 function getNewCardHtml(element) {
-	element.div = document.createElement("div");
-	element.canvas = document.createElement("canvas");
-	const div1 = document.createElement("div"),
-		div2 = document.createElement("div"),
-		a = document.createElement("a"),
-		div3 = document.createElement("div"),
-		div4 = document.createElement("div"),
-		button1 = document.createElement("button"),
-		button2 = document.createElement("button"),
-		button3 = document.createElement("button"),
-		button4 = document.createElement("button"),
-		button5 = document.createElement("button"),
-		button6 = document.createElement("button"),
-		filename = `${('0' + element.index).slice(-2)} - ${element.name}.png`;
-	
-	element.div.className = `col-md-${BS_COL_WIDTH} entry${element.enabled == 0 ? " entry-disabled" : ""}`;
-	element.div.id = `div-${element.id}`;
-	element.div.setAttribute("data-index", element.index);
-	div1.className = `card mb-${BS_COL_WIDTH} box-shadow my-card`;
-	element.canvas.className = "card-img-top entry-img";
-	element.canvas.id = element.id;
-	element.canvas.setAttribute("data-name", element.name);
-	element.canvas.setAttribute("data-content", element.content);
-	element.canvas.setAttribute("data-filename", filename)
-	div2.className = "card-body";
-	a.className = "card-text";
-	a.innerText = filename;
-	a.title = "Clicca per copiare."
-	a.addEventListener("click", function() { navigator.clipboard.writeText(a.innerText); }, false)
-	div3.className = "d-flex justify-content-between align-items-center card-controls";
-	div4.className = "btn-group";
 
-	button1.className = button2.className = button3.className = button4.className = button5.className = button6.className = "btn btn-sm btn-outline-secondary";
-	button1.innerText = "⬅️";
-	button2.innerText = "*️⃣";
-	button3.innerText = "🔄";
-	button4.innerText = "💾";
-	button5.innerText = "📷";
-	button6.innerText = "➡️";
-	button1.addEventListener("click", function() { moveUpDown(element.id, -1); }, false);
-	button2.addEventListener("click", function() { toggleEntry(element.id); }, false);
-	button3.addEventListener("click", function() { reloadEntry(element.id); }, false);
-	button4.addEventListener("click", function() { saveEntry(element.id); }, false);
-	button5.addEventListener("click", function() { saveEntryIG(element.id); }, false);
-	button6.addEventListener("click", function() { moveUpDown(element.id, 1); }, false);
+	const id = element.id;
+	const index = element.index;
+	const name = element.name;
+	const content = element.content;
+	const filename = `${('0' + element.index).slice(-2)} - ${element.name}.png`;
 
-	div4.appendChild(button1);
-	div4.appendChild(button2);
-	//div4.appendChild(button3);
-	div4.appendChild(button4);
-	div4.appendChild(button5);
-	div4.appendChild(button6);
-	div3.appendChild(div4);
-	div2.appendChild(a);
-	div2.appendChild(div3);
-	div1.appendChild(element.canvas);
-	div1.appendChild(div2);
-	element.div.appendChild(div1);
+	const html_string = Mustache.render("{{={| |}=}}" + fanart_template, {id, index, name, content, filename });
+	element.div = createElementFromHTML(html_string);
+	element.canvas = element.div.getElementsByTagName("canvas")[0];
 
 	const ctx = element.canvas.getContext("2d");
 

M artbound_python/templates/index.html → artbound_python/templates/index.html

@@ -38,8 +38,7 @@ <div id="controls" hidden>
                     <a href="#" class="btn btn-secondary my-2" onclick="selectAllNone(1)" id="selectall_button">✅</a>
                     <a href="#" class="btn btn-secondary my-2" onclick="selectAllNone(0)" id="selectnone_button">❎</a>
                     <a href="#" class="btn btn-secondary my-2" onclick="toggleColor()" id="togglecolor_button">⚪</a>
-                    <input type="range" class="form-range" id="opacity_range" min="0" max="1" step="0.01"
-                        oninput="updateOpacity()" value="0.4">
+                    <input type="range" class="form-range" id="opacity_range" min="0" max="1" step="0.01" oninput="updateOpacity()" value="0.4">
                     <label for="opacity_range" class="form-label" id="opacity_label"></label>
                     <a href="#" class="btn btn-secondary my-2" onclick="saveAll()" id="saveall_button">💾</a>
                     <a href="#" class="btn btn-secondary my-2" onclick="saveAllIG()" id="saveallig_button">📷</a>
@@ -77,6 +76,29 @@ <p>&copy; Earthbound Café, realizzato da <a href="mailto:andronacomarco@gmail.com">Marco Andronaco</a>
                 (BiRabittoh).</p>
         </div>
     </footer>
+    <template id="fanart-template">
+        <div class="col-md-4 entry" id="{| id |}" data-index="{| index |}">
+            <div class="card mb-4 box-shadow my-card">
+                <canvas class="card-img-top entry-img"
+                    id="{| id |}" data-name="{| name |}"
+                    data-content="{| content |}"
+                    data-filename="{| filename |}"></canvas>
+                <div class="card-body">
+                    <a class="card-text" title="Clicca per copiare." onclick="navigator.clipboard.writeText(this.innerText);">{| filename |}</a>
+                    <div class="d-flex justify-content-between align-items-center card-controls">
+                        <div class="btn-group">
+                            <button class="btn btn-sm btn-outline-secondary" onclick="moveUpDown('{| id |}', -1);">⬅️</button>
+                            <button class="btn btn-sm btn-outline-secondary" onclick="toggleEntry('{| id |}');">*️⃣</button>
+                            <button class="btn btn-sm btn-outline-secondary" onclick="saveEntry('{| id |}');">💾</button>
+                            <button class="btn btn-sm btn-outline-secondary" onclick="saveEntryIG('{| id |}');">📷</button>
+                            <button class="btn btn-sm btn-outline-secondary" onclick="moveUpDown('{| id |}', 1);">➡️</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
     <script src="/static/ext/js/jquery-3.2.1.slim.min.js"></script>
     <script src="/static/ext/js/bootstrap.min.js"></script>
     <script src="/static/script.js"></script>