Home Explore Help
Sign In
ABC80
/
max80_fw
mirror of https://git.zytor.com/abc80/max80/fw.git/
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

www: replace script inc() with custom x-inc HTML tag

Replace script calling function with a custom "x-inc" HTML tag. Unlike
the script tag, this works recursively.
H. Peter Anvin 2 years ago
parent
49a9cfa4aa
commit
468f007e5d
9 changed files with 33 additions and 30 deletions
Split View Show Diff Stats
  1. BIN
      esp32/output/max80.ino.bin
  2. 1 1
      esp32/www/config.html
  3. 1 16
      esp32/www/head.html
  4. 13 11
      esp32/www/max80.js
  5. 16 0
      esp32/www/max80.svg
  6. 1 1
      esp32/www/status.html
  7. 1 1
      esp32/www/update.html
  8. BIN
      fpga/output/v1.fw
  9. BIN
      fpga/output/v2.fw

BIN
esp32/output/max80.ino.bin
View File


+ 1 - 1
esp32/www/config.html
View File 

@@ -6,7 +6,7 @@
 
   <script src="max80.js"></script>
 
   </head>
 
   <body>
 
-    <script>inc("head.html")</script>
 
+    <x-inc src="head.html"></x-inc>
 
     <h1 class="config">Configuration</h1>
 
     <form id="setconfig" action="sys/setconfig" method="post" onsubmit="uploadform()">
 
       <fieldset class="network">

+ 1 - 16
esp32/www/head.html
View File 

@@ -1,20 +1,5 @@
 
 <div class="title">
 
-  <svg class="logo" width="315" height="100" viewBox="0 0 315 100">
 
-    <mask id="mask">
 
-      <g dominant-baseline="middle" text-rendering="geometricPrecision"
 
-	 paint-order="stroke fill" fill="white" stroke="black">
 
-	<text font-family="Prisma" x="164" y="50" font-size="100">X</text>
 
-	<text font-family="Prisma" x="100.4" y="50" font-size="100"
 
-	      stroke-width="3">A</text>
 
-	<text font-family="Prisma" x="5" y="50" font-size="100"
 
-	      stroke-width="3">M</text>
 
-	<text font-family="Helvetica" x="150" y="56" font-size="50"
 
-	      font-weight="bold" transform="scale(1.5 1)">80</text>
 
-      </g>
 
-    </mask>
 
-    <rect x="0" y="0" width="100%" height="100%" fill="black"
 
-	  mask="url(#mask)" />
 
-  </svg>
 
+  <x-inc src="max80.svg"></x-inc>
 
   <span class="pad"></span>
 
   <span class="logo2">Peter &amp; Per</span>
 
 </div>

+ 13 - 11
esp32/www/max80.js
View File 

@@ -235,15 +235,17 @@ fetchconfig('/sys/lang')
 
     })
 
     .catch(() => {});
 
 
-// Hack to include an HTML files. Sadly, does not support
 
-// including files with <script> tags.
 
-function inc(url) {
 
-    var me = document.currentScript;
 
-    fetch(url, {redirect: "follow"})
 
-	.then((response) => response.text())
 
-	.then((text) => {
 
-	    const p = me.parentElement;
 
-	    me.outerHTML = text;
 
-	    translate(p);
 
-	});
 
+// HTML include hack
 
+class IncHTML extends HTMLElement {
 
+    constructor() { self = super(); }
 
+    connectedCallback() {
 
+	fetch(self.getAttribute('src'))
 
+	    .then ((r) => r.text())
 
+	    .then ((text) => {
 
+		const p = self.parentElement;
 
+		self.outerHTML = text;
 
+		translate(p);
 
+	    });
 
+    }
 
 }
 
+customElements.define('x-inc', IncHTML);

+ 16 - 0
esp32/www/max80.svg
View File 

@@ -0,0 +1,16 @@
 
+<svg class="logo" width="315" height="100" viewBox="0 0 315 100">
 
+  <mask id="mask">
 
+    <g dominant-baseline="middle" text-rendering="geometricPrecision"
 
+       paint-order="stroke fill" fill="white" stroke="black">
 
+      <text font-family="Prisma" x="164" y="50" font-size="100">X</text>
 
+      <text font-family="Prisma" x="100.4" y="50" font-size="100"
 
+	    stroke-width="3">A</text>
 
+      <text font-family="Prisma" x="5" y="50" font-size="100"
 
+	    stroke-width="3">M</text>
 
+      <text font-family="Helvetica" x="150" y="56" font-size="50"
 
+	    font-weight="bold" transform="scale(1.5 1)">80</text>
 
+    </g>
 
+  </mask>
 
+  <rect x="0" y="0" width="100%" height="100%" fill="black"
 
+	mask="url(#mask)" />
 
+</svg>

+ 1 - 1
esp32/www/status.html
View File 

@@ -21,7 +21,7 @@
 
     </script>
 
   </head>
 
   <body>
 
-    <script>inc("head.html")</script>
 
+    <x-inc src="head.html"></x-inc>
 
     <h1 class="status">Status</h1>
 
     <form class="getstatus" id="getstatus">
 
       <fieldset class="status-max80">

+ 1 - 1
esp32/www/update.html
View File 

@@ -6,7 +6,7 @@
 
     <script src="max80.js"></script>
 
   </head>
 
   <body>
 
-    <script>inc("head.html")</script>
 
+    <x-inc src="head.html"></x-inc>
 
     <h1 class="update">Update</h1>
 
     <form id="upload" action="sys/fwupdate" method="post"
 
 	  onsubmit="uploadfile()" data-ref="10" data-ref-url="status.html">

BIN
fpga/output/v1.fw
View File


BIN
fpga/output/v2.fw
View File