add highlight modification

eeditiones · Feb 9, 2024 · 0563934 · 0563934
1 parent 682a283
commit 0563934
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/demo/demos.json b/demo/demos.json
@@ -50,7 +50,8 @@
     "demo/pb-grid.html": "Demo"
   },
   "pb-highlight": {
-    "demo/pb-highlight.html": "Demo"
+    "demo/pb-highlight.html": "Demo",
+    "demo/pb-highlight2.html": "Demo"
   },
   "pb-i18n": {
     "demo/pb-i18n.html": "Demo"

diff --git a/demo/pb-highlight2.html b/demo/pb-highlight2.html
@@ -0,0 +1,60 @@
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes" />
+
+    <title>pb-hightlight Demo</title>
+    <style>
+        pb-page {
+                display: flex;
+                justify-content: space-between;
+            }
+        body {
+            --pb-highlight-background-image: repeating-linear-gradient(
+                315deg,
+                mark,
+                mark 5px,
+                #F9E976 5px,
+                #F9E976 10px
+            );
+        }
+    </style>
+    <!--scripts-->
+    <script type="module" src="../node_modules/@teipublisher/pb-components/src/pb-page.js"></script>
+    <script type="module" src="../src/pb-highlight.js"></script>
+    <!--/scripts-->
+</head>
+
+<body>
+
+        <h1>Highlight with a gradient background-image</h1>
+
+        <pb-page locales="../i18n/{{ns}}/{{lng}}.json">
+            <div>
+                <p>
+                    <pb-highlight key="s1" highlight-self="highlight-self">Lorem ipsum dolor sit amet, consetetur
+                        sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+                        dolore magna aliquyam erat, sed diam voluptua.</pb-highlight>
+                    <pb-highlight key="s2">At vero eos et accusam et justo duo dolores et ea rebum.</pb-highlight>
+                    <pb-highlight key="s3">Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+                        sit amet.</pb-highlight>
+                </p>
+            </div>
+            <div>
+                <p>
+                    <pb-highlight key="s1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+                        eirmod tempor invidunt ut labore et
+                        dolore magna aliquyam erat, sed diam voluptua.</pb-highlight>
+                    <pb-highlight key="s2">At vero eos et accusam et justo duo dolores et ea rebum.</pb-highlight>
+                    <pb-highlight key="s3">Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+                        sit amet.</pb-highlight>
+                </p>
+            </div>
+        </pb-page>
+
+
+
+</body>
+
+</html>
diff --git a/src/pb-highlight.js b/src/pb-highlight.js
@@ -18,7 +18,8 @@ import { pbMixin } from './pb-mixin';
  * @fires pb-highlight-on - Fires highlight event with a key passed to which other pb-highlight elements with the same key will react
  * @fires pb-highlight-off - When received, triggers removal of a highlight that might have been on for this element before
  * @fires pb-highlight-on - When received, switches the highlight on if the same key was received as the current element has
- * @cssprop --pb-highlight-color - Background color to highlight an element
+ * @cssprop [--pb-highlight-color=#F9E976]- Background color to highlight an element
+ * @cssprop --pb-highlight-background-image - Background-image to highlight an element with a gradient (e.g. stripes with repeating-linear-gradient). Will override --pb-highlight-color.
 */
 export class PbHighlight extends pbMixin(LitElement) {
     static get properties() {
@@ -121,7 +122,7 @@ export class PbHighlight extends pbMixin(LitElement) {
                 animation-duration: 500ms;
                 animation-iteration-count: 1;
                 animation-timing-function: ease-in;
-
+                background-image: var(--pb-highlight-background-image);
             }
 
             .highlight-off {