node-red-node-web-nodes/flickr/flickr.html

A collection of Node-RED nodes for popular web services.

<!--
  Copyright 2013 IBM Corp.

  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.
-->

<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><span id="node-config-flickr-username" class="input-xlarge uneditable-input"></span>
        </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" placeholder="space-separated tags to add">
    </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 &amp; Family</option>
        </select>
    </div>
    
    
    <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>
</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>