node-red-contrib-tekosbot/nodes/chatbot-generic-template.html

Tekos bot based on matrix

<script type="text/javascript">
  RED.nodes.registerType("chatbot-generic-template", {
    category: "Dialogue",
    color: "#81DAF5",
    defaults: {
      name: {
        value: ""
      },
      title: {
        value: "",
        validate: function(title) {
          return title.length <= 80;
        }
      },
      subtitle: {
        value: "",
        validate: function(subtitle) {
          return subtitle == null || subtitle.length <= 80;
        }
      },
      imageUrl: {
        value: ""
      },
      theme: {
        value: ""
      },
      sharable: {
        value: true
      },
      aspectRatio: {
        value: "horizontal"
      },
      buttons: {
        value: [],
        validate: function(buttons) {
          var valid = true;
          var idx;
          for (idx = 0; idx < buttons.length; idx++) {
            if (!$.RedBot.validate.button(buttons[idx])) {
              valid = false;
            }
          }
          return valid && buttons.length <= 3 && buttons.length >= 0;
        }
      }
    },
    inputs: 1,
    outputs: 1,
    paletteLabel: "Card",
    icon: "chatbot-generic-template.png",
    align: "left",
    label: function() {
      return this.name || "Card";
    },
    oneditsave: function() {
      var buttons = $("#node-input-buttons-container").editableList("items");
      var node = this;
      node.buttons = [];
      var idx;
      for (idx = 0; idx < buttons.length; idx++) {
        node.buttons.push($(buttons[idx]).RB_getButtonData());
      }
    },
    oneditprepare: function() {
      $("#node-input-buttons-container")
        .css("min-width", "450px")
        .editableList({
          addItem: function(container, i, item) {
            $(container).RB_mountButtonDialog({
              types: ["url", "postback"],
              // types: ['url', 'postback', 'call', 'login', 'newline', 'logout', 'share'],
              platforms: ["facebook", "slack"],
              badges: true
            });
            $(container).RB_setButtonData(item, {
              badges: false
            });
          },
          removable: true,
          sortable: true
        });

      if (this.buttons != null) {
        this.buttons.forEach(function(button) {
          $("#node-input-buttons-container").editableList("addItem", button);
        });
      }
    },
    oneditresize: function() {
      var dialogForm = $("#dialog-form");
      var rowName = $(".form-row-name", dialogForm);
      var rowTitle = $(".form-row-title", dialogForm);
      var rowSubtitle = $(".form-row-subtitle", dialogForm);
      var rowImageUrl = $(".form-row-imageUrl", dialogForm);
      var rowLabel = $(".form-row-label", dialogForm);
      var rowCarousel = $(".form-row-carousel", dialogForm);
      var height =
        dialogForm.height() -
        rowName.height() -
        rowTitle.height() -
        rowSubtitle.height() -
        rowImageUrl.height() -
        rowLabel.height() -
        rowCarousel.height() -
        40;
      $("#node-input-buttons-container").editableList("height", height);
    }
  });
</script>

<script type="text/x-red" data-template-name="chatbot-generic-template">
  <div class="form-row form-row-name">
    <label for="node-input-name"><i class="icon-tag"></i> Name</label>
    <input type="text" id="node-input-name" placeholder="Name">
  </div>
  <div class="form-row form-row-title">
    <label for="node-input-title">Title</label>
    <input type="text" id="node-input-title" placeholder="Title">
  </div>
  <div class="form-row form-row-subtitle">
    <label for="node-input-subtitle">Subtitle</label>
    <input type="text" id="node-input-subtitle" placeholder="Subtitle">
  </div>
  <div class="form-row form-row-imageUrl">
    <label for="node-input-image_url">Image URL</label>
    <input type="text" id="node-input-imageUrl" placeholder="Image URL">
  </div>
  <div class="form-row form-row-theme">
    <label for="node-input-theme">Type</label>
    <select id="node-input-theme" placeholder="Select Theme">
      <option value="" selected="true">Default</option>
      <option value="style1">Style 1</option>
      <option value="style2">Style 2</option>
      <option value="poster">Poster</option>
    </select>
  </div>
  <div class="form-row form-row-label" style="margin-bottom:0;">
    <label><i class="fa fa-list"></i> <span>Buttons</span></label>
  </div>
  <div class="form-row node-input-rule-container-row">
    <ol id="node-input-buttons-container"></ol>
  </div>
  
  <div class="redbot-form-legend">
    Available platforms:<br>
    <span class="icon-platform-hanna"></span> = <span style="font-size:10px">Tekos</span>
    <span class="icon-platform-facebook"></span> = <span style="font-size:10px">Facebook</span>
    <span class="icon-platform-telegram"></span> = <span style="font-size:10px">Telegram</span>
    <span class="icon-platform-smooch"></span> = <span style="font-size:10px">Smooch</span>
    <span class="icon-platform-slack"></span> = <span style="font-size:10px">Slack</span>
  </div>
</script>

<script type="text/x-red" data-help-name="chatbot-generic-template">
  <h3>Generic Template</h3>
  <p>Generic Template is a small card with few lines of text, an optional image and buttons.</p>
  <p>Two or more generic templates can be combined together in a carousel by simply chaining <code>Generic Template node</code> (to maximum of 10). Each template can have a maximum of 3 buttons, <code>title</code> and <code>subtitle</code> are limited to 80 chars.</p>
  <p>Each template can have up to 3 buttons, see <code>Buttons node</code> for a complete list of available buttons. <!-- (only <code>quick-reply</code> and <code>location</code> are not available here). --> </p>
  <p>Each <code>Generic Template node</code> has also a <em>default action</em> which acts like a <code>url</code> button. The first button of type <code>url</code> in the <em>buttons</em> section will be used as default action of the item.</p>
  <p>In order to create a generic template in a upstream <code>Function node</code></p>
  <pre><code>msg.payload = {
    title: &#39;my title&#39;,
    subtitle: &#39;I am a sub title&#39;,
    imageUrl: &#39;http://image.server.com/cover.png&#39;,
    buttons: [
      {
        type: &#39;url&#39;,
        url: &#39;http://javascript-jedi.com&#39;,
        label: &#39;Javascript Jedi&#39;
      }
    ],
    <!-- sharable: true,
    aspectRatio: &#39;horizontal&#39; -->
  }
  </code></pre><p>or in order to pass a collection of elements for the carousel</p>
  <pre><code>msg.payload = {
    <!-- sharable: true,
    aspectRatio: &#39;horizontal&#39;, -->
    elements: [
      {
        title: &#39;my title&#39;,
        subtitle: &#39;I am a sub title&#39;,
        imageUrl: &#39;http://image.server.com/cover.png&#39;,
        buttons: [
          {
            type: &#39;url&#39;,
            url: &#39;http://javascript-jedi.com&#39;,
            label: &#39;Javascript Jedi&#39;
          }
        ]
      },
      {
        title: &#39;another title&#39;,
        subtitle: &#39;Second sub title&#39;,
        imageUrl: &#39;http://image.server.com/cover2.png&#39;,
        buttons: [
          {
            type: &#39;url&#39;,
            url: &#39;http://javascript-jedi.com&#39;,
            label: &#39;Javascript Jedi&#39;
          }
        ]
      }
    ]
  }
  </code></pre><p>Available parameters for the <code>msg.payload</code></p>
  <dl class="message-properties">


  <dt>title<span class="property-type">string</span><dd>Title of the list element</dd>
  <dt>subtitle<span class="property-type">string</span><dd>Sub title of the list element</dd>
  <dt>imageUrl<span class="property-type">string</span><dd>Url of the image element</dd>
  <dt>buttons<span class="property-type">array of [button]</span><dd>Array of buttons, see <code>Buttons node</code> for more details</dd>
  <!-- <dt>sharable<span class="property-type">boolean</span><dd>The list can be shared</dd>
  <dt>aspectRatio<span class="property-type">string</span><dd>Aspect ratio of the image. Valid values: <em>horizontal</em>, <em>square</em></dd> -->
  <dt>elements<span class="property-type">array of [element]</span><dd>An array of elements for the carousel (here are the elements created by the previous chained <code>Generic Template node</code>)</dd>

  </dl>
  <p>The <code>[element]</code> object</p>
  <dl class="message-properties">


  <dt>title<span class="property-type">string</span><dd>Title of the generic template element</dd>
  <dt>subtitle<span class="property-type">string</span><dd>Sub title of the generic template element</dd>
  <dt>imageUrl<span class="property-type">string</span><dd>Url of the generic template image</dd>
  <dt>buttons<span class="property-type">array of [button]</span><dd>Array of buttons, see <code>Buttons node</code> for more details</dd>

  </dl>
</script>