Forráskód Böngészése

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 éve
szülő
commit
468f007e5d

BIN
esp32/output/max80.ino.bin


+ 1 - 1
esp32/www/config.html

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

+ 1 - 16
esp32/www/head.html

@@ -1,20 +1,5 @@
 <div class="title">
 <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="pad"></span>
   <span class="logo2">Peter &amp; Per</span>
   <span class="logo2">Peter &amp; Per</span>
 </div>
 </div>

+ 13 - 11
esp32/www/max80.js

@@ -235,15 +235,17 @@ fetchconfig('/sys/lang')
     })
     })
     .catch(() => {});
     .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

@@ -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

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

+ 1 - 1
esp32/www/update.html

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

BIN
fpga/output/v1.fw


BIN
fpga/output/v2.fw