Merge pull request #877 from Patternslib/pat-push-append

feat(pat push): Added the option to append the fetched content at the…

Author: thet

src/pat/push/documentation.md

@@ -7,3 +7,5 @@ When an element is equipped with class="pat-push" and a push ID it will listen t
    data-pat-push="push-id: message_counter; url: /message-counter">
 Messages <sup class="counter digit-1">1</sup>
 </a>
+
+If you add the `mode: append` option, the fetched content will be appended to the element.

src/pat/push/index-push-messages.html

@@ -0,0 +1 @@
+<li>A <strong>new</strong> message</li>

src/pat/push/index.html

@@ -42,5 +42,18 @@ <h2>push-id: message_counter2</h2>
         >
             messages <sup class="counter digit-1">1</sup>
         </div>
+
+        <h2>push-id: message_incoming; mode: append</h2>
+        <div>
+            If a message is sent through RabbitMQ on the "patternslib" exchange on the
+            push_marker topic containing the message "message_incoming" the list below
+            will be updated.
+            <ul
+                class="pat-push"
+                data-pat-push="push-id: message_incoming; url: index-push-messages.html; mode: append"
+            >
+                <li>Old message</li>
+            </ul>
+        </div>
     </body>
 </html>

src/pat/push/push.js

@@ -8,6 +8,7 @@ const logger = logging.getLogger("push");
 export const parser = new Parser("push");
 parser.addArgument("url", null);
 parser.addArgument("push-id", null);
+parser.addArgument("mode", "replace");
 
 export default Base.extend({
     name: "push",
@@ -32,7 +33,11 @@ export default Base.extend({
         try {
             const response = await fetch(this.options.url);
             const data = await response.text();
-            this.el.innerHTML = data;
+            if (this.options.mode === "append") {
+                this.el.insertAdjacentHTML("beforeend", data);
+            } else {
+                this.el.innerHTML = data;
+            }
         } catch (e) {
             logger.error(
                 `Could not fetch from ${this.options.url} on push-id ${this.options.pushId}.`