prisme-flow/nodes/bridge/flickr/flickr.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="flickr-credentials">
    <div id="node-config-flickr-app-keys">
        <div class="form-row">
            <p style="margin-top: 10px;"><b>1.</b> Create your own app at
             <a href="https://www.flickr.com/services/apps/create/apply/"
             target="_blank" style="text-decoration:underline;">flickr.com</a></p>
        </div>
        <div class="form-row">
            <p style="margin-top: 10px;"><b>2.</b> Copy the app details here:</p>
        </div>
        <div class="form-row">
            <label style="margin-left: 10px; margin-right: -10px;"
            for="node-config-input-client_key"><i class="fa fa-user"></i>Key</label>
            <input type="password" id="node-config-input-client_key">
        </div>
        <div class="form-row">
            <label style="margin-left: 10px; margin-right: -10px;" for="node-config-input-client_secret"><i class="fa fa-key"></i> Secret</label>
            <input type="password" id="node-config-input-client_secret">
        </div>
        <div class="form-row">
           <label>&nbsp;</label>
           <a class="btn" id="node-config-start-auth" href="#" target="_blank">Authenticate with Flickr</a>
        </div>
    </div>
    <div id="node-config-flickr-user">
        <div class="form-row">
            <label><i class="fa fa-user"></i> Flickr ID</label>UserName
        </div>
        <input type="hidden" id="node-config-input-username">
    </div>
</script>

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

    RED.nodes.registerType('flickr-credentials',{
        category: 'config',
        defaults: {
            username: {value:""}
        },
        credentials: {
            username: {type:"text"},
            user_nsid: { type:"text"},
            client_key: { type: "password"},
            client_secret: { type: "password"},
            access_token: {type: "password"},
            access_token_secret: {type:"password"}
        },

        label: function() {
            return this.username;
        },
        exportable: false,
        oneditprepare: function() {
            var id = this.id;

            function updateFlickrAuthButton() {
                var v1 = $("#node-config-input-client_key").val();
                var v2 = $("#node-config-input-client_secret").val();

                $("#node-config-start-auth").toggleClass("disabled",(v1.length === 0 || v2.length === 0));

            }
            $("#node-config-input-client_key").on('change keydown paste input',updateFlickrAuthButton);
            $("#node-config-input-client_secret").on('change keydown paste input',updateFlickrAuthButton);

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

            function pollFlickrCredentials(e) {
                $.getJSON('credentials/flickr-credentials/'+id,function(data) {
                    if (data.username) {
                        $("#node-config-dialog-ok").button("enable");
                        updateFlickrScreenName(data.username);
                        delete window.flickrConfigNodeIntervalId;
                    } else {
                        window.flickrConfigNodeIntervalId = window.setTimeout(pollFlickrCredentials,2000);
                    }
                });
            }

            updateFlickrAuthButton();

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

            $("#node-config-start-auth").mousedown(function(e) {
                var key = $("#node-config-input-client_key").val();
                var secret = $("#node-config-input-client_secret").val();
                var pathname = document.location.pathname;
                if (pathname.slice(-1) != "/") {
                    pathname += "/";
                }
                var callback = encodeURIComponent(location.protocol+"//"+location.hostname+
                    (location.port?":"+location.port:"")+
                    pathname+"flickr-credentials/"+id+"/auth/callback");
                var url = 'flickr-credentials/'+id+'/auth?callback='+callback+'&client_key='+key+"&client_secret="+secret;
                $(this).attr("href",url);
                window.flickrConfigNodeIntervalId = window.setTimeout(pollFlickrCredentials,2000);
            });
            $("#node-config-start-auth").click(function(e) {
                var key = $("#node-config-input-client_key").val();
                var secret = $("#node-config-input-client_secret").val();
                if (key === "" || secret === "") {
                    e.preventDefault();
                }
            });

        },
        oneditsave: function() {
            if (window.flickrConfigNodeIntervalId) {
                window.clearTimeout(window.flickrConfigNodeIntervalId);
                delete window.flickrConfigNodeIntervalId;
            }
        },
        oneditcancel: function(adding) {
            if (window.flickrConfigNodeIntervalId) {
                window.clearTimeout(window.flickrConfigNodeIntervalId);
                delete window.flickrConfigNodeIntervalId;
            }
        }
    });
})();
</script>


<script type="text/x-red" data-template-name="flickr out">
    <div class="form-row">
        <label for="node-input-flickr"><i class="fa fa-user"></i>Flickr</label>
        <input type="text" id="node-input-flickr">
    </div>
    <div class="form-row">
        <label for="node-input-tags"><i class="fa fa-tags"></i>Tags</label>
        <input type="text" id="node-input-tags">
    </div>
    <div class="form-row">
        <label for="node-input-privacy"><i class="fa fa-unlock-alt"></i>Privacy</label>
        <select id="node-input-privacy">
            <option value="" >User default</option>
            <option value="p">Public</option>
            <option value="pr">Private</option>
            <option value="fr">Friends</option>
            <option value="fa">Family</option>
            <option value="frfa">Friends & Family</option>
        </select>
    </div>


    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i>Flickr</label>
        <input type="text" id="node-input-name">
    </div>
</script>

<script type="text/x-red" data-help-name="flickr out">
    <p>Saves photos to <a href="http://www.flickr.com">Flickr</a>.</p>
    <p>The incoming message can provide the following properties:
        <ul>
          <li><b>payload</b> - a Buffer containing the image (required)</li>
          <li><b>title</b> - the title for the photo (optional)</li>
          <li><b>description</b> - the description for the photo (optional)</li>
          <li><b>tags</b> - tags to be applied to the photo. Can be either a string
                            containing space-separated tags, or an array of tags. (optional)</li>
        </ul>
    </p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('flickr out',{
        category: 'social',
        color:"#C0DEED",
        defaults: {
            flickr: {type:"flickr-credentials",required:true},
            privacy: {value:""},
            tags: {value:""},
            name: {value:""}
        },
        inputs:1,
        outputs:0,
        icon: "flickr.png",
        align: "right",
        label: function() {
            return this.name || 'flickr';
        }
    });
</script>