translate.html

<!--
Copyright 2019 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<style>
  .red-ui-editor a {
    text-decoration: none;
    color: cornflowerblue;
  }

  .red-ui-editor a:hover {
    text-decoration: underline;
  }
</style>

<script type="text/html" data-template-name="google-cloud-translate">
    <!--Name-->
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name">
    </div>

    <!--Credentials-->
    <div class="form-row">
        <label for="node-input-account"><i class="fa fa-user"></i> Credentials</label>
        <input type="text" id="node-input-account">
    </div>

    <!--Key File-->
    <div class="form-row">
        <label for="node-input-keyFilename"><i class="fa fa-user"></i> Key File</label>
        <input type="text" id="node-input-keyFilename">
    </div>

    <!--Project-->
    <div class="form-row">
        <label for="node-input-projectId"><i class="fa fa-cloud"></i> Project</label>
        <input type="text" id="node-input-projectId">
    </div>

    <!--Source Language-->
    <div class="form-row">
        <label for="node-input-sourceLanguageCode"><i class="fa fa-cloud"></i> Source Language</label>
        <input type="text" id="node-input-sourceLanguageCode">
        <input type="hidden" id="node-input-sourceLanguageCodeType">
    </div>

    <!--Target Language-->
    <div class="form-row">
        <label>&nbsp;</label>
        <span>(<a href="https://cloud.google.com/translate/docs/languages" target="_blank">view Supported Language Codes</a> or leave blank for automatic detection)</span>
    </div>
    <div class="form-row">
        <label for="node-input-targetLanguageCode"><i class="fa fa-cloud"></i> Target Language</label>
        <input type="text" id="node-input-targetLanguageCode">
        <input type="hidden" id="node-input-targetLanguageCodeType">
    </div>

    <!--Output Format-->
    <div class="form-row">
        <label>&nbsp;</label>
        <span>(<a href="https://cloud.google.com/translate/docs/languages" target="_blank">view Supported Language Codes</a>)</span>
    </div>
    <div class="form-row">
        <label for="node-input-outputFormat"><i class="fa fa-envelope"></i> Output Format</label>
        <select id="node-input-outputFormat">
            <option value="full">Full (advanced)</option>
            <option value="str">Translation only</option>
        </select>
    </div>
    <div class="form-row">
        <label>&nbsp;</label>
        <label style="width:70%">
        <ul>
            <li><strong>Full:</strong> Set <code>msg.payload</code> to the <a href="https://googleapis.dev/nodejs/translate/latest/google.cloud.translation.v3beta1.TranslateTextResponse.html">full response value</a> returned by Google Translate</li>
            <li><strong>Translation only:</strong> Set <code>msg.payload</code> to the translated value</li>
        </ul>
        </label>
    </div>

</script>

<script type="text/html" data-help-name="google-cloud-translate">
    <p>Translate from one language to another.</p>
    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt>msg.payload
            <span class="property-type">string</span>
        </dt>
        <dd>The payload to be translated.</dd>
    </dl>
    <h3>Details</h3>
    <p>
    The translation API must be enabled for your GCP project before use.  The node expects a text string be supplied as input in <code>msg.payload</code>.
    The language of the text is specified in the source language configuration parameter and the target language specified in the target
    language configuration parameter.  After the node has executed, the output will be placed in msg.payload and will be an instance of
    the object described <a href="https://googleapis.dev/nodejs/translate/latest/google.cloud.translation.v3beta1.html#.TranslateTextResponse">here</a>.
    </p>
</script>

<script type="text/javascript">
RED.nodes.registerType("google-cloud-translate", {
    category: "GCP",
    defaults: {
        account: { type: "google-cloud-credentials", required: false },
        keyFilename: { value: "", required: false },
        projectId: { value: "", required: true },
        sourceLanguageCode: {
            value: "en",
            required: false,
            validate: RED.validators.typedInput("sourceLanguageCodeType"),
        },
        sourceLanguageCodeType: { value: "str" },
        targetLanguageCode: {
            value: "es",
            required: true,
            validate: RED.validators.typedInput("targetLanguageCodeType"),
        },
        targetLanguageCodeType: { value: "str" },
        outputFormat: { value: "full" },
        name: { value: "", required: false },
    },
    inputs: 1,
    outputs: 1,
    icon: "translate.png",
    align: "left",
    color: "#3FADB5",
    label: function () {
        return (
            this.name ||
            `translate ${this.sourceLanguageCode || "[detect-language]"} to ${
            this.targetLanguageCodeType === "str"
                ? ""
                : this.targetLanguageCodeType + "."
            }${this.targetLanguageCode}`
        );
    },
    paletteLabel: "translate",
    oneditprepare: function () {
        $("#node-input-sourceLanguageCodeType").val(this.sourceLanguageCodeType);
        $("#node-input-sourceLanguageCode").typedInput({
            default: this.sourceLanguageCodeType || "str",
            typeField: $("#node-input-sourceLanguageCodeType"),
            types: ["msg", "flow", "global", "str"],
        });
        $("#node-input-sourceLanguageCode").typedInput(
            "type",
            this.sourceLanguageCodeType
        );

        $("#node-input-targetLanguageCodeType").val(this.targetLanguageCodeType);
        $("#node-input-targetLanguageCode").typedInput({
            default: this.targetLanguageCodeType || "str",
            typeField: $("#node-input-targetLanguageCodeType"),
            types: ["msg", "flow", "global", "str"],
        });
        $("#node-input-targetLanguageCode").typedInput(
            "type",
            this.targetLanguageCodeType
        );
    },
});
</script>