node-red-contrib-sendgrid/node.html

Sending e-mail node using SendGrid service

<script type="text/javascript">
  RED.nodes.registerType('sendgrid', {
    category: 'social',
    color: '#489be8',
    defaults: {
      from: {value: ""},
      multiple: {value: false},
      to: {value: ""},
      name: {value: ""},
      content: {value: "text"},
      templateId: {value: ""},
      templateData: {value: ""}
    },
    credentials: {
      key: {type: "password"},
    },
    inputs: 1,
    outputs: 0,
    icon: "envelope.png",
    align: "right",
    label: function() {
      return this.name || "sendgrid";
    },
    oneditprepare: function() {
      var that = this;
      this.editor = RED.editor.createEditor({
        id: 'node-input-templateData-editor',
        mode: 'ace/mode/json',
        value: $("#node-input-templateData").val()
      });
      var showTemplate = function () {
        if ($("#node-input-template").prop('checked')) {
          $('#node-input-templateId-label').show();
          $('#node-input-templateId').show();
          $('#node-input-templateData-label').show();
          $('#node-input-templateData').show();
          $('#node-input-templateData-editor').show();
          $('#node-templateData-expand-editor').show();
        } else {
          $('#node-input-templateId-label').hide();
          $('#node-input-templateId').hide();
          $('#node-input-templateData-label').hide();
          $('#node-input-templateData').hide();
          $('#node-input-templateData-editor').hide();
          $('#node-templateData-expand-editor').hide();
        }
      };
      showTemplate();
      $("#node-input-template").change(function () {
        showTemplate();
      });
      $("#node-templateData-expand-editor").on("click", function(e) {
        e.preventDefault();
        var value = that.editor.getValue();
        RED.editor.editText({
          mode: 'json',
          value: value,
          width: "Infinity",
          cursor: that.editor.getCursorPosition(),
          complete: function(v,cursor) {
            that.editor.setValue(v, -1);
            that.editor.gotoLine(cursor.row+1,cursor.column,false);
            setTimeout(function() {
              that.editor.focus();
            },300);
          }
        });
      })
    },
    oneditsave: function() {
      $("#node-input-templateData").val(this.editor.getValue());
      this.editor.destroy();
      delete this.editor;
    },
    oneditcancel: function() {
      this.editor.destroy();
      delete this.editor;
    },
    oneditresize: function(size) {
      var rows = $("#dialog-form>div:not(.node-text-editor-row)");
      var height = $("#dialog-form").height();
      for (var i=0; i<rows.length; i++) {
        height -= $(rows[i]).outerHeight(true);
      }
      var editorRow = $("#dialog-form>div.node-text-editor-row");
      height -= (parseInt(editorRow.css("marginTop"))+parseInt(editorRow.css("marginBottom")));
      $(".node-text-editor").css("height",height+"px");
      this.editor.resize();
    }
  });
</script>

<style type="text/css">
  .form-row label[for="node-input-templateData"] {
    width: 90%;
  }
</style>

<script type="text/html" data-template-name="sendgrid">
  <div class="form-row">
    <label for="node-input-key"><i class="fa fa-lock"></i> <span data-i18n="sendgrid.label.apiKey"></label>
    <input type="password" id="node-input-key" data-i18n="[placeholder]sendgrid.label.apiKeyPlaceholder">
  </div>
  <div class="form-row">
    <label for="node-input-from"><i class="fa fa-user"></i> <span data-i18n="sendgrid.label.from"></label>
    <input type="text" id="node-input-from" placeholder="example@example.com">
  </div>
  <div class="form-row">
    <label for="node-input-to"><i class="fa fa-envelope"></i> <span data-i18n="sendgrid.label.to"></label>
    <input type="text" id="node-input-to" placeholder="youremail@ddress.com" style="width:50%;">
    <input type="checkbox" id="node-input-multiple" style="width:20px;">
    <label for="node-input-multiple" style="width:60px;">
      <span data-i18n="sendgrid.label.multiple">
    </label>
  </div>
  <div class="form-row">
    <label for="node-input-content"><i class="fa fa-code"></i> <span data-i18n="sendgrid.label.format"></label>
    <select id="node-input-content">
      <option selected value="text" data-i18n="sendgrid.label.text"></option>
      <option value="html" data-i18n="sendgrid.label.html"></option>
    </select>
    <input type="checkbox" id="node-input-template" style="width:20px;">
    <label for="node-input-template" style="width:85px;">
      <span data-i18n="sendgrid.label.template">
    </label>
  </div>
  <div class="form-row">
    <label for="node-input-templateId" id="node-input-templateId-label"><i class="fa fa-tag"></i><span data-i18n="sendgrid.label.templateId"></span></label>
    <input type="text" id="node-input-templateId">
  </div>
  <div class="form-row" style="position: relative;margin-bottom:0;">
    <label for="node-input-templateData" id="node-input-templateData-label"><i class="fa fa-file-code-o"></i><span data-i18n="sendgrid.label.templateData"></span></label>
    <input type="hidden" id="node-input-templateData">
    <div style="position: absolute; right:0;display:inline-block; text-align: right; font-size: 0.8em;">
        <button id="node-templateData-expand-editor" class="red-ui-button red-ui-button-small"><i class="fa fa-expand"></i></button>
    </div>
  </div>
  <div class="form-row node-text-editor-row">
    <div style="height: 250px; min-height:150px;" class="node-text-editor" id="node-input-templateData-editor"></div>
  </div>
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
    <input type="text" id="node-input-name" data-i18n="[placeholder]node-red:common.label.name">
  </div>
</script>