prisme-flow/nodes/bridge/instagram/instagram.html

prisme platform flow engine

<!--
 Created by prisme.io on 09/06/2017.

 @author <a href="mailto:hello@prisme.io">savane vamara</a> (prisme.io)

-->


<script type="text/x-red" data-template-name="instagram-credentials">
    <div id="node-config-instagram-app-keys">
        <div class="form-row">
            <p style="margin-top: 10px;"><b>1.</b> <span>Create your own app at</span>
            <a href="http://instagram.com/developer/clients/register/" target="_blank" style="text-decoration:underline;">instagram.com</a></p>
        </div>
        <div class="form-tips" id="node-config-tooltip">
            #
        </div>
        <div class="form-row">
            <p style="margin-top: 10px;"><b>2.</b> <span>Copy the app details here</span>:</p>
        </div>
        <div class="form-row">
          <label for="node-config-input-clientID"><i class="fa fa-user"></i> <span>Client Id</span></label>
          <input type="text" id="node-config-input-clientID">
        </div>
        <div class="form-row" id="node-config-clientSecret">
            <label for="node-config-input-clientSecret"><i class="fa fa-lock"></i><span>Client Secret</span></label>
            <input type="password" id="node-config-input-clientSecret">
        </div>
        <div class="form-row" id="node-config-redirectURI">
            <label for="node-config-input-redirectURI"><i class="fa fa-user"></i><span>Redirect URI</span></label>
            <input type="text" id="node-config-input-redirectURI">
        </div>
        <div class="form-row">
           <label>&nbsp;</label>
           <a class="btn" id="node-config-start-auth" href="#" target="_blank"><span>Authenticate with Instagram</span></a>
        </div>
    </div>
    <div id="node-config-instagram-user">
        <div class="form-row">
            <label><i class="fa fa-user"></i> <span>Instagram User</span></label><span id="node-config-instagram-username" class="input-xlarge uneditable-input"></span>
        </div>
        <input type="hidden" id="node-config-input-username">
    </div>
</script>

<script type="text/x-red" data-template-name="instagram">
    <div class="form-row">
        <label for="node-input-instagram"><i class="fa fa-user"></i> <span>User</span></label>
        <input type="text" id="node-input-instagram">
    </div>
    <div class="form-row">
        <label for="node-input-inputType"><i class="icon-search"></i> <span>Type</span></label>
        <select type="text" id="node-input-inputType" style="display: inline-block; vertical-align: middle; width:60%;">
            <option value="photo">User photos</option>
            <option value="like">Liked photos</option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-outputType"><i class="icon-search"></i> <span data-i18n="instagram.label.output">Output</span></label>
        <select type="text" id="node-input-outputType" style="display: inline-block; vertical-align: middle; width:60%;">
            <option value="buffer">the photo as a buffer</option>
            <option value="link">the photo url</option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
        <input type="text" id="node-input-name">
    </div>
</script>

<script type="text/x-red" data-help-name="instagram">
    <p>Get photos from Instagram.</p>

    <p>This node checks for new content in a user's account whenever it receives a
    message.</p>

    <p>It can be configured to either retrieve new photos uploaded by the user, or
    photos the user has liked. Each message sent by the node contains a single
    photo in its payload, either as a Buffer containing the photo or its URL.</p>

    <p>When the metadata is available within Instagram's service, the photo's capture time and location
    are also forwarded in the form of msg.time, msg.lat and msg.lon.</p>

    <p>Videos are currently not supported and are ignored.</p>
</script>

<script type="text/x-red" data-template-name="instagram in">
    <div class="form-row">
        <label for="node-input-instagram"><i class="fa fa-user"></i> <span>User</span></label>
        <input type="text" id="node-input-instagram">
    </div>
    <div class="form-row">
        <label for="node-input-inputType"><i class="icon-search"></i> <span>Type</span></label>
        <select type="text" id="node-input-inputType" style="display: inline-block; vertical-align: middle; width:60%;">
            <option value="photo">User photos</option>
            <option value="like" >Liked photos</option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-outputType"><i class="icon-search"></i> <span>Output</span></label>
        <select type="text" id="node-input-outputType" style="display: inline-block; vertical-align: middle; width:60%;">
            <option value="buffer">the photo as a buffer</option>
            <option value="link">the photo url</option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span>Name</span></label>
        <input type="text" id="node-input-name" >
    </div>
</script>

<script type="text/x-red" data-help-name="instagram in">
    <p>Get photos from Instagram.</p>

    <p>This node automatically checks for new content in a user's account every 15 minutes.</p>

    <p>It can be configured to either retrieve new photos uploaded by the user, or
    photos the user has liked. Each message sent by the node contains a single
    photo in its payload, either as a Buffer containing the photo or its URL.</p>

    <p>When the metadata is available within Instagram's service, the photo's capture time and location
    are also forwarded in the form of msg.time, msg.lat and msg.lon.</p>

    <p>Videos are currently not supported and are ignored.</p>
</script>

<script type="text/javascript">
(function() {

    RED.nodes.registerType('instagram-credentials',{
        category: 'config',
        defaults: {
            username: {value:""}
        },
        credentials: {
            username: {type:"text"},
            clientID: {type:"text"},
            redirectURI: { type:"text"},
            access_token: { type:"password"}
        },
        label: function() {
            return this.username;
        },
        exportable: false,
        oneditprepare: function() {
            var id = this.id;
            var pathname = document.location.pathname;
            if (pathname.slice(-1) != "/") {
                pathname += "/";
            }
            var constructedURI = location.protocol + '//' + location.hostname + (location.port ? ":"+location.port : "") + pathname + 'instagram-credentials/auth/callback';
            var tip = this._("Please configure Instagram to accept the following Redirect URL for authentication of your application: __constructedURI__", {constructedURI: constructedURI});

            function updateInstagramAuthButton() {
                var v1 = $("#node-config-input-clientID").val();
                var v2 = $("#node-config-input-clientSecret").val();

                $("#node-config-start-auth").toggleClass("disabled",(v1.length === 0 || v2.length === 0));
            }
            $("#node-config-input-clientID").on('change keydown paste input',updateInstagramAuthButton);
            $("#node-config-input-clientSecret").on('change keydown paste input',updateInstagramAuthButton);

            function updateInstagramScreenName(sn) {
                $("#node-config-instagram-app-keys").hide();
                $("#node-config-instagram-user").show();
                $("#node-config-input-username").val(sn);
                $("#node-config-instagram-username").html(sn);
            }

            function pollInstagramCredentials() {
                $.getJSON('credentials/instagram-credentials/'+id,function(data) {
                    if (data.username) {
                        $("#node-config-dialog-ok").button("enable");
                        updateInstagramScreenName(data.username);
                        delete window.instagramConfigNodeIntervalId;
                    } else {
                        window.instagramConfigNodeIntervalId = window.setTimeout(pollInstagramCredentials,2000);
                    }
                });
            }

            updateInstagramAuthButton();

            if (this.username) {
                updateInstagramScreenName(this.username);
            } else {
                $("#node-config-instagram-app-keys").show();
                $("#node-config-instagram-user").hide();
                $("#node-config-dialog-ok").button("disable");
            }

            function updateRedirectURI() {
                $("#node-config-tooltip").html(tip);
                $("#node-config-input-redirectURI").val(constructedURI);
                $("#node-config-input-redirectURI").hide();
                $("#node-config-redirectURI").hide();
            }

            updateRedirectURI();

            $("#node-config-start-auth").mousedown(function() {
                var clientID = $("#node-config-input-clientID").val();
                var clientSecret = $("#node-config-input-clientSecret").val();
                var redirectURI = $("#node-config-input-redirectURI").val();

                var query = "node_id=" + id + "&client_id=" + clientID + "&client_secret=" + clientSecret + "&redirect_uri=" + redirectURI;
                var url = 'instagram-credentials/auth/?' + query;
                $(this).attr("href",url);
                window.instagramConfigNodeIntervalId = window.setTimeout(pollInstagramCredentials,2000);
            });

            $("#node-config-start-auth").click(function(e) {
                var clientID = $("#node-config-input-clientID").val();
                var redirectURI = $("#node-config-input-redirectURI").val();
                var clientSecret = $("#node-config-input-redirectURI").val();
                if (clientID === "" || redirectURI === "" || clientSecret === "") {
                    e.preventDefault();
                }
            });
        },
        oneditsave: function() {
            if (window.instagramConfigNodeIntervalId) {
                window.clearTimeout(window.instagramConfigNodeIntervalId);
                delete window.instagramConfigNodeIntervalId;
            }
        },
        oneditcancel: function() {
            if (window.instagramConfigNodeIntervalId) {
                window.clearTimeout(window.instagramConfigNodeIntervalId);
                delete window.instagramConfigNodeIntervalId;
            }
        }
    });
})();
</script>

<script type="text/javascript">
    RED.nodes.registerType('instagram in',{
        category: 'social',
        defaults: {
            instagram: { type:"instagram-credentials", required: true },
            inputType: { value: "photo"},
            outputType: { value:"buffer" },
            name: {value:""}
        },
        color:"#889FB3",
        inputs:0,
        outputs:1,
        icon: "instagram.png",
        label: function() {
            return this.name || 'instagram';
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        }
    });
</script>

<script type="text/javascript">
    RED.nodes.registerType('instagram',{
        category: 'social',
        defaults: {
            instagram: { type:"instagram-credentials", required: true },
            inputType: { value: "photo"},
            outputType: { value:"buffer" },
            name: {value:""}
        },
        color:"#889FB3",
        inputs:1,
        outputs:1,
        icon: "instagram.png",
        label: function() {
            return this.name || 'instagram';
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        }
    });
</script>