Skip to content

Commit c55eea2

Browse files
zobaloghzobalogh
committed
Adding Instagram nodes
1 parent 16a52f4 commit c55eea2

File tree

4 files changed

+612
-2
lines changed

4 files changed

+612
-2
lines changed

‎instagram/icons/instagram.png

716 Bytes
Loading

‎instagram/instagram.html

+284
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,284 @@
1+
<!--
2+
Copyright 2014 IBM Corp.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
-->
16+
17+
18+
<script type="text/x-red" data-template-name="instagram-credentials">
19+
<div id="node-config-instagram-app-keys">
20+
<div class="form-row">
21+
<p style="margin-top: 10px;"><b>1.</b> Create your own app at <a href="http://instagram.com/developer/clients/register/" target="_blank" style="text-decoration:underline;">instagram.com</a></p>
22+
</div>
23+
<div class="form-tips" id="node-config-tooltip">
24+
#
25+
</div>
26+
<div class="form-row">
27+
<p style="margin-top: 10px;"><b>2.</b> Copy the app details here:</p>
28+
</div>
29+
<div class="form-row">
30+
<label for="node-config-input-clientID"><i class="fa fa-user"></i> Client ID</label>
31+
<input type="text" id="node-config-input-clientID">
32+
</div>
33+
<div class="form-row" id="node-config-clientSecret">
34+
<label for="node-config-input-clientSecret"><i class="fa fa-lock"></i>Client Secret</label>
35+
<input type="password" id="node-config-input-clientSecret">
36+
</div>
37+
<div class="form-row" id="node-config-redirectURI">
38+
<label for="node-config-input-redirectURI"><i class="fa fa-user"></i>Redirect URI</label>
39+
<input type="text" id="node-config-input-redirectURI">
40+
</div>
41+
<div class="form-row">
42+
<label>&nbsp;</label>
43+
<a class="btn" id="node-config-start-auth" href="#" target="_blank">Authenticate with Instagram</a>
44+
</div>
45+
</div>
46+
<div id="node-config-instagram-user">
47+
<div class="form-row">
48+
<label><i class="fa fa-user"></i> Instagram User</label><span id="node-config-instagram-username" class="input-xlarge uneditable-input"></span>
49+
</div>
50+
<input type="hidden" id="node-config-input-username">
51+
</div>
52+
</script>
53+
54+
<script type="text/x-red" data-template-name="instagram">
55+
<div class="form-row">
56+
<label for="node-input-instagram"><i class="fa fa-user"></i> User</label>
57+
<input type="text" id="node-input-instagram">
58+
</div>
59+
<div class="form-row">
60+
<label for="node-input-inputType"><i class="icon-search"></i> Type</label>
61+
<select type="text" id="node-input-inputType" style="display: inline-block; vertical-align: middle; width:60%;">
62+
<option value="photo">User photos</option>
63+
<option value="like">Liked photos</option>
64+
</select>
65+
</div>
66+
<div class="form-row">
67+
<label for="node-input-outputType"><i class="icon-search"></i> Output</label>
68+
<select type="text" id="node-input-outputType" style="display: inline-block; vertical-align: middle; width:60%;">
69+
<option value="file">The photo as a buffer</option>
70+
<option value="link">The photo url</option>
71+
</select>
72+
</div>
73+
<div class="form-row">
74+
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
75+
<input type="text" id="node-input-name" placeholder="Name">
76+
</div>
77+
</script>
78+
79+
<script type="text/x-red" data-help-name="instagram">
80+
<p>Get photos from Instagram.</p>
81+
82+
<p>This node checks for new content in a user's account whenever it receives a
83+
message.</p>
84+
85+
<p>It can be configured to either retrieve new photos uploaded by the user, or
86+
photos the user has liked. Each message sent by the node contains a single
87+
photo in its payload, either as a Buffer containing the photo or its URL.</p>
88+
89+
<p>Videos are currently not supported and are ignored.</p>
90+
</script>
91+
92+
<script type="text/x-red" data-template-name="instagram in">
93+
<div class="form-row">
94+
<label for="node-input-instagram"><i class="fa fa-user"></i> User</label>
95+
<input type="text" id="node-input-instagram">
96+
</div>
97+
<div class="form-row">
98+
<label for="node-input-inputType"><i class="icon-search"></i> Type</label>
99+
<select type="text" id="node-input-inputType" style="display: inline-block; vertical-align: middle; width:60%;">
100+
<option value="photo">User photos</option>
101+
<option value="like">Liked photos</option>
102+
</select>
103+
</div>
104+
<div class="form-row">
105+
<label for="node-input-outputType"><i class="icon-search"></i> Output</label>
106+
<select type="text" id="node-input-outputType" style="display: inline-block; vertical-align: middle; width:60%;">
107+
<option value="file">The photo as a buffer</option>
108+
<option value="link">The photo url</option>
109+
</select>
110+
</div>
111+
<div class="form-row">
112+
<label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
113+
<input type="text" id="node-input-name" placeholder="Name">
114+
</div>
115+
</script>
116+
117+
<script type="text/x-red" data-help-name="instagram in">
118+
<p>Get photos from Instagram.</p>
119+
120+
<p>This node automatically checks for new content in a user's account every 15 minutes.</p>
121+
122+
<p>It can be configured to either retrieve new photos uploaded by the user, or
123+
photos the user has liked. Each message sent by the node contains a single
124+
photo in its payload, either as a Buffer containing the photo or its URL.</p>
125+
126+
<p>Videos are currently not supported and are ignored.</p>
127+
</script>
128+
129+
<script type="text/javascript">
130+
(function() {
131+
132+
RED.nodes.registerType('instagram-credentials',{
133+
category: 'config',
134+
defaults: {
135+
username: {value:""}
136+
},
137+
credentials: {
138+
username: {type:"text"},
139+
clientID: {type:"text"},
140+
redirectURI: { type:"text"},
141+
access_token: { type:"password"}
142+
},
143+
label: function() {
144+
return this.username;
145+
},
146+
exportable: false,
147+
oneditprepare: function() {
148+
var id = this.id;
149+
150+
function updateInstagramAuthButton() {
151+
var v1 = $("#node-config-input-clientID").val();
152+
var v2 = $("#node-config-input-clientSecret").val();
153+
154+
$("#node-config-start-auth").toggleClass("disabled",(v1.length === 0 || v2.length === 0));
155+
}
156+
$("#node-config-input-clientID").on('change keydown paste input',updateInstagramAuthButton);
157+
$("#node-config-input-clientSecret").on('change keydown paste input',updateInstagramAuthButton);
158+
159+
function updateInstagramScreenName(sn) {
160+
$("#node-config-instagram-app-keys").hide();
161+
$("#node-config-instagram-user").show();
162+
$("#node-config-input-username").val(sn);
163+
$("#node-config-instagram-username").html(sn);
164+
}
165+
166+
function pollInstagramCredentials() {
167+
$.getJSON('credentials/instagram-credentials/'+id,function(data) {
168+
if (data.username) {
169+
$("#node-config-dialog-ok").button("enable");
170+
updateInstagramScreenName(data.username);
171+
delete window.instagramConfigNodeIntervalId;
172+
} else {
173+
window.instagramConfigNodeIntervalId = window.setTimeout(pollInstagramCredentials,2000);
174+
}
175+
});
176+
}
177+
178+
updateInstagramAuthButton();
179+
180+
if (this.username) {
181+
updateInstagramScreenName(this.username);
182+
} else {
183+
$("#node-config-instagram-app-keys").show();
184+
$("#node-config-instagram-user").hide();
185+
$("#node-config-dialog-ok").button("disable");
186+
}
187+
188+
function updateRedirectURI() {
189+
var protocol = location.protocol;
190+
var separator = '//';
191+
var host = location.hostname;
192+
var port = location.port;
193+
var callbackPath = 'instagram-credentials/auth/callback';
194+
195+
var constructedURI = protocol + separator + host + ':' + port + '/' + callbackPath;
196+
197+
$("#node-config-tooltip").html('<p>Please configure Instagram to accept the following <b>Redirect URL</b> for authentication of your application: </p>\n<code>' + constructedURI + '</code>');
198+
$("#node-config-input-redirectURI").val(constructedURI);
199+
$("#node-config-input-redirectURI").hide();
200+
$("#node-config-redirectURI").hide();
201+
}
202+
203+
updateRedirectURI();
204+
205+
$("#node-config-start-auth").mousedown(function() {
206+
var clientID = $("#node-config-input-clientID").val();
207+
var clientSecret = $("#node-config-input-clientSecret").val();
208+
var redirectURI = $("#node-config-input-redirectURI").val();
209+
210+
var query = "node_id=" + id + "&client_id=" + clientID + "&client_secret=" + clientSecret + "&redirect_uri=" + redirectURI;
211+
var url = 'instagram-credentials/auth/?' + query;
212+
$(this).attr("href",url);
213+
window.instagramConfigNodeIntervalId = window.setTimeout(pollInstagramCredentials,2000);
214+
});
215+
216+
$("#node-config-start-auth").click(function(e) {
217+
var clientID = $("#node-config-input-clientID").val();
218+
var redirectURI = $("#node-config-input-redirectURI").val();
219+
var clientSecret = $("#node-config-input-redirectURI").val();
220+
if (clientID === "" || redirectURI === "" || clientSecret === "") {
221+
e.preventDefault();
222+
}
223+
});
224+
},
225+
oneditsave: function() {
226+
if (window.instagramConfigNodeIntervalId) {
227+
window.clearTimeout(window.instagramConfigNodeIntervalId);
228+
delete window.instagramConfigNodeIntervalId;
229+
}
230+
},
231+
oneditcancel: function() {
232+
if (window.instagramConfigNodeIntervalId) {
233+
window.clearTimeout(window.instagramConfigNodeIntervalId);
234+
delete window.instagramConfigNodeIntervalId;
235+
}
236+
}
237+
});
238+
})();
239+
</script>
240+
241+
<script type="text/javascript">
242+
RED.nodes.registerType('instagram in',{
243+
category: 'social',
244+
defaults: {
245+
instagram: { type:"instagram-credentials", required: true },
246+
inputType: { value: "photo"},
247+
outputType: { value:"file" },
248+
name: {value:""}
249+
},
250+
color:"#889FB3",
251+
inputs:0,
252+
outputs:1,
253+
icon: "instagram.png",
254+
label: function() {
255+
return this.name||"Instagram";
256+
},
257+
labelStyle: function() {
258+
return this.name?"node_label_italic":"";
259+
}
260+
});
261+
</script>
262+
263+
<script type="text/javascript">
264+
RED.nodes.registerType('instagram',{
265+
category: 'social',
266+
defaults: {
267+
instagram: { type:"instagram-credentials", required: true },
268+
inputType: { value: "photo"},
269+
outputType: { value:"file" },
270+
name: {value:""}
271+
},
272+
color:"#889FB3",
273+
inputs:1,
274+
outputs:1,
275+
icon: "instagram.png",
276+
align: "right",
277+
label: function() {
278+
return this.name||"Instagram";
279+
},
280+
labelStyle: function() {
281+
return this.name?"node_label_italic":"";
282+
}
283+
});
284+
</script>

0 commit comments

Comments
 (0)