]> piware.de Git - webcomponents.git/commitdiff
projects / webcomponents.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (from: 159b57a)
patternfly-cdn: Move to importmap master
authorMartin Pitt <martin@piware.de>
Fri, 8 Nov 2024 06:47:26 +0000 (07:47 +0100)
committerMartin Pitt <martin@piware.de>
Fri, 8 Nov 2024 06:47:26 +0000 (07:47 +0100)
In theory this should fix the icon loading, but it's still broken on
esm.sh.

patternfly-cdn.html [new file with mode: 0644] patch | blob
patternfly/index.html patch | blob | history
patternfly/package.json patch | blob | history

diff --git a/patternfly-cdn.html b/patternfly-cdn.html
new file mode 100644 (file)
index 0000000..8150cdd
--- /dev/null
+++ b/patternfly-cdn.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>PatternFly Elements CDN example</title>
+  <meta charset="utf-8">
+
+  <style>
+    .gallery {
+      display: flex;
+      flex-direction: row;
+    }
+
+    .gallery pf-card {
+      margin: 1rem;
+    }
+  </style>
+</head>
+
+<script type="importmap">
+{
+    "imports": {
+        "@patternfly/": "https://esm.sh/@patternfly/"
+    }
+}
+</script>
+
+<script type="module">import "@patternfly/elements/pf-button/pf-button.js"</script>
+<script type="module">import "@patternfly/elements/pf-card/pf-card.js"</script>
+<script type="module">import "@patternfly/elements/pf-icon/pf-icon.js"</script>
+
+<body>
+
+<h1>PatternFly Elements CDN example</h1>
+
+<div class="gallery">
+  <pf-card>
+    <h3 slot="header">PF Card</h3>
+    <p>Some info here.</p>
+    <p slot="footer">Footer here...</p>
+  </pf-card>
+  <pf-card>
+    <h3 slot="header">Another Card</h2>
+    <p>BlaBla</p>
+  </pf-card>
+</div>
+
+<pf-icon icon="rh-cloud" size="lg"></pf-icon>
+
+<pf-button id="do_something">Do something!</pf-button>
+
+<script>
+const button_do = document.getElementById("do_something");
+button_do.addEventListener("click", () => alert("clicked"));
+</script>
+
+</body>
+</html>
diff --git a/patternfly/index.html b/patternfly/index.html
index 6f5c051684eecd46b7e119a7ac1900a2d4241720..5f350d203b65bd6a90ed6666dac11377da07a8cf 100644 (file)
--- a/patternfly/index.html
+++ b/patternfly/index.html
@@ -1,21 +1,39 @@
+<!DOCTYPE html>
 <html>
 <head>
     <title>PatternFly webcomponents example</title>
     <meta charset="utf-8">
 
-    <link rel="stylesheet" href="node_modules/patternfly/dist/css/patternfly.min.css">
-    <link rel="stylesheet" href="node_modules/patternfly-webcomponents/dist/css/patternfly-webcomponents.css">
+    <!-- make `import` statement work without a bundler
+    https://patternflyelements.org/docs/develop/import-maps/ and
+    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap -->
+    <script type="importmap">
+    {
+        "imports": {
+            "@patternfly/": "./node_modules/@patternfly/",
+            "@lit/": "./node_modules/@lit/",
+            "@lit/reactive-element": "./node_modules/@lit/reactive-element/reactive-element.js",
+            "@lit/reactive-element/": "./node_modules/@lit/reactive-element/",
+            "lit": "./node_modules/lit/index.js",
+            "lit/": "./node_modules/lit/",
+            "lit/reactive-element/": "./node_modules/@lit/reactive-element/",
+            "lit-element/": "./node_modules/lit-element/",
+            "lit-html": "./node_modules/lit-html/lit-html.js",
+            "lit-html/": "./node_modules/lit-html/",
+            "tslib": "./node_modules/tslib/tslib.es6.js"
+        }
+    }
+    </script>
 
-    <script src="//rawgit.com/webcomponents/custom-elements/master/src/native-shim.js"></script>
-    <script src="node_modules/patternfly-webcomponents/dist/js/pf-alert.js"></script>
+    <script type="module">import "@patternfly/elements/pf-button/pf-button.js"</script>
 </head>
 
 <body>
+<pf-button id="do_something">Do something!</pf-button>
 
-<h1>Alert</h1>
-
-<pf-alert type="success">Success Alert message.</pf-alert>
-
+<script>
+document.getElementById("do_something").addEventListener("click", () => alert("Clicked!"));
+</script>
 
 </body>
 </html>
diff --git a/patternfly/package.json b/patternfly/package.json
index e15ca89aedde151bdbdb932e937db29b2d783055..79c89c8d78a7b78ad599f8dcd9e7bf3592cd6aab 100644 (file)
--- a/patternfly/package.json
+++ b/patternfly/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "patternfly-webcomponents-demo",
+  "name": "patternfly-elements-demo",
   "version": "0.0.1",
-  "description": "PatternFly webcomponents demo",
+  "description": "PatternFly elements demo",
   "main": "index.js",
   "scripts": {
     "run": "python3 -m http.server -b localhost"
@@ -9,6 +9,6 @@
   "author": "Martin Pitt",
   "license": "ISC",
   "dependencies": {
-    "patternfly-webcomponents": "^0.3.0"
+    "@patternfly/elements": "^4.0.2"
   }
 }
webcomponents/Polymer demo