node-red-contrib-chatbot/nodes/chatbot-list-template.html

REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required

<script type="text/javascript">

  RED.nodes.registerType('chatbot-list-template', {
    category: 'RedBot',
    color: '#FFCC66',
    defaults: {
      name: {
        value: ''
      },
      title: {
        value: '',
        validate: function(title) {
          return $.RedBot.validate.notEmpty(title) && title.length <= 80 ;
        }
      },
      subtitle: {
        value: '',
        validate: function(subtitle) {
          return subtitle == null || subtitle.length <= 80
        }
      },
      imageUrl: {
        value: ''
      },
      sharable: {
        value: true
      },
      topElementStyle: {
        value: 'large'
      },
      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 <= 1 && buttons.length > 0;
        }
      }
    },
    inputs: 1,
    outputs: 1,
    paletteLabel: 'List Template',
    icon: 'chatbot-list-template.png',
    label: function() {
      return this.name || 'List Template';
    },
    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', 'call', 'login', 'newline', 'logout', 'share'],
              platforms: ['facebook'],
              badges: false
            });
            $(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-list-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-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="form-row form-row-carousel">
  <label for="node-input-topElementStyle">Top Element Style</label>
  <select id="node-input-topElementStyle" style="width: 150px;" placeholder="Top element style">
    <option value="large">Large</option>
    <option value="compact">Compact</option>
   </select>
   <input type="checkbox" value="true" id="node-input-sharable" style="width: 20px; margin:0px 0px 0px 15px;">
   <span>Sharable</span>
</div>
</script>

<script type="text/x-red" data-help-name="chatbot-list-template"><p>The <code>List Template node</code> is a template that allows you to present a set of items vertically.</p>
<p>It can be rendered in two different ways.
The first way renders the first item with a cover image with text overlaid. This is good to making the first item appear prominently above the other items.
The second way renders each item identically and is useful for presenting a list of items where no item is shown prominently.</p>
<p>Two or more <code>List Template node</code> can be chained to create a list to a maximum of four elements. Each template may have a maximum of one button.
To see a list of available buttons see the <code>Button node</code>.</p>
<p>The list may have a global button at the end of the list, to add the global button just chain a <code>List Template node</code> with an empty title, the buttons here will be used as global button for the list.</p>
<p>For each <code>List Template node</code> only the first button of the <em>buttons</em> section will be shown. Every list item has also a <em>default action</em> which acts like a <code>url</code> button. The first button of type <code>url</code> will be used as default action of the item (only the first button will be shown, if there&#39;s an additional <code>url</code> button in the <em>buttons</em> list it will be used as default action).</p>
<p>In order to create a list template element 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,
  topElementStyle: &#39;large&#39;
}
</code></pre><p>or in order to pass a collection of list element </p>
<pre><code>msg.payload = {
  sharable: true,
  topElementStyle: &#39;large&#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;
        }
      ]
    },
    {
      title: &#39;&#39;, // global button    
      buttons: [
        {
          type: &#39;url&#39;,
          url: &#39;http://my-site.com&#39;,
          label: &#39;Open&#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>topElementStyle<span class="property-type">string</span><dd>Style for the first element. Valid values: <em>large</em>, <em>compact</em></dd>
<dt>elements<span class="property-type">array of [element]</span><dd>An array of elements for the list template (here are the elements created by the previous chained <code>List 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 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 element 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>
<p><img src="https://img.shields.io/badge/platform-Facebook-blue.svg" alt="Facebook"></p>
</script>