gadget cards using html

SQUASHED: AUTO-COMMIT-src-client-reactive-reactive-jsx-reactive-jsx.js,AUTO-COMMIT-src-components-widgets-ubg-card.html,AUTO-COMMIT-src-components-widgets-ubg-card.js,AUTO-COMMIT-src-components-widgets-ubg-cards.js,
LivelyKernel · Mar 27, 2024 · 3495839 · 3495839
1 parent df0c349
commit 3495839
Show file tree

Hide file tree

Showing 4 changed files with 580 additions and 687 deletions.
diff --git a/src/client/reactive/reactive-jsx/reactive-jsx.js b/src/client/reactive/reactive-jsx/reactive-jsx.js
@@ -13,8 +13,77 @@ function addMetaData(element, data = {}) {
   return element.elementMetaData = Object.assign(element.elementMetaData || {}, data);
 }
 
+const svgTags = [
+  'a',
+  'animate',
+  'animateMotion',
+  'animateTransform',
+  'circle',
+  'clipPath',
+  'defs',
+  'desc',
+  'ellipse',
+  'feBlend',
+  'feColorMatrix',
+  'feComponentTransfer',
+  'feComposite',
+  'feConvolveMatrix',
+  'feDiffuseLighting',
+  'feDisplacementMap',
+  'feDistantLight',
+  'feDropShadow',
+  'feFlood',
+  'feFuncA',
+  'feFuncB',
+  'feFuncG',
+  'feFuncR',
+  'feGaussianBlur',
+  'feImage',
+  'feMerge',
+  'feMergeNode',
+  'feMorphology',
+  'feOffset',
+  'fePointLight',
+  'feSpecularLighting',
+  'feSpotLight',
+  'feTile',
+  'feTurbulence',
+  'filter',
+  'foreignObject',
+  'g',
+  'hatch',
+  'hatchpath',
+  'image',
+  'line',
+  'linearGradient',
+  'marker',
+  'mask',
+  'metadata',
+  'mpath',
+  'path',
+  'pattern',
+  'polygon',
+  'polyline',
+  'radialGradient',
+  'rect',
+  'script',
+  'set',
+  'stop',
+  'style',
+  'svg',
+  'switch',
+  'symbol',
+  'text',
+  'textPath',
+  'title',
+  'tspan',
+  'use',
+  'view',
+];
+
 function basicCreateElement(tagName) {
-  const element = document.createElement(tagName);
+  const xmlns = "http://www.w3.org/2000/svg";
+  const element = svgTags.includes(tagName) ? document.createElementNS(xmlns, tagName) : document.createElement(tagName);
 
   addMetaData(element, { timeOffset: performance.now() });
 

diff --git a/src/components/widgets/ubg-card.html b/src/components/widgets/ubg-card.html
@@ -16,7 +16,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    background-image: url(https://lively-kernel.org/lively4/ubg/assets/1.jpg);
+    background-image: url(https://lively-kernel.org/lively4/ubg/assets/default.jpg);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;   
@@ -28,21 +28,6 @@
 /*     background-color: transparent;
     background-color: color-mix(in srgb, #ffffff, transparent 95%); */
   }
-  #big {
-    z-index: 200;
-    position: absolute;
-    width: 2.5in;
-    height: .5in;
-    top: .5in;
-    left: .5in;
-    background: steelblue;
-  }
-  #plusButton {
-    font-family: "Beaufort for LOL Bold";
-  }
-  #minusButton {
-    font-family: "Univers 45 Light Italic";
-  }
   #version-indicator {
     --version-fill: blue;
     --version-size: calc(3.5mm * .9 * sqrt(2));
@@ -69,9 +54,5 @@
   <div id="content"></div>
   <span id='id-version'><span id='card-id'>id</span>/<span id='card-version'>version</span></span>
   <div id='version-indicator'></div>
-  <div id='outer'>
-    <button id="plusButton">plus</button>
-    <button id="minusButton">minus</button>
-    <input id="textField" value=0 />
-  </div>
+  <div id='outer'></div>
 </template>