https://artsandculturecentre.com/gander/Common/Widgets/instagramFeedWebWidget.js?_=7.92.0

1// JavaScript Document
2
3function instagramFeedWidget(widgetId, widgetParams, articleContext) {
4	WidgetMaster.call(this, widgetId, widgetParams, articleContext);
5}
6
7instagramFeedWidget.prototype = Object.create(WidgetMaster.prototype);
8instagramFeedWidget.prototype.constructor = instagramFeedWidget;
9
10instagramFeedWidget.prototype.render = function () {
11	var widgetDiv = document.getElementById(this.widgetId);
12	var tagName = "";
13    
14	if (widgetDiv) {
15		this.renderWrapperContainer(widgetDiv);
16    
17		tagName = this.widgetParams["tag_name"];    
18		var userID = this.widgetParams["userID"];
19		var token = this.widgetParams["access_token"];
20		var count = "";
21		if(this.widgetParams["post_count"])
22			count = this.widgetParams["post_count"];
23		else
24			count = 21; //By default display 21 pics. Chose 21 since divisible by 3 and all carousel slides are full
25
26		if (token && (tagName || userID)) {
27			var callbackScript = document.createElement("script");
28			callbackScript.setAttribute("onload","$(\".instagram-holder .carousel\").carousel({interval: 5000,pause: \"hover\"})"); //Get the carousel moving
29
30			if(userID != "")
31				callbackScript.setAttribute("src", "https://api.instagram.com/v1/users/" + userID + "/media/recent/?access_token=" + token + "&callback=drawInstagramFeed&count=" + count);
32			else if(tagName != "")
33				callbackScript.setAttribute("src", "https://api.instagram.com/v1/tags/" + tagName + "/media/recent?access_token=" + token + "&callback=drawInstagramFeed&count=" + count);
34
35			var feedParent = document.createElement("div");
36			feedParent.setAttribute("class", "instagram-holder");
37			feedParent.setAttribute("id", "instagram-holder");
38			var feed = document.createElement("ul");
39			feed.setAttribute("class", "instagram-scroller clearfix list-unstyled");
40			feed.setAttribute("id", "instagram-block-scroller");
41
42			this.wrapperContainer.appendChild(callbackScript);
43			this.wrapperContainer.appendChild(feedParent);
44			feedParent.appendChild(feed);
45		}
46	}
47    
48	window.getTagName = function foo() {
49		return tagName;
50	};
51}
52
53instagramFeedWidget.prototype.renderWrapperContainer = function (parentElement) {
54	this.wrapperContainer = document.createElement("div");
55	if (this.widgetParams["css_id"]) {
56		this.wrapperContainer.id = this.widgetParams["css_id"];
57	}
58	if (this.widgetParams["css_class"]) {
59		this.wrapperContainer.setAttribute("class", this.widgetParams["css_class"]);
60	}
61	if (this.widgetParams["css_style"]) {
62		this.wrapperContainer.setAttribute("style", this.widgetParams["css_style"]);
63	}
64	parentElement.appendChild(this.wrapperContainer);
65};
66
67function drawInstagramFeed(obj) {
68
69	var instagramJSON = JSON.stringify(obj);
70	var instagramImages = JSON.parse(instagramJSON);
71
72	var URLsmallImage;
73	var URLlargeImage;
74	var smallImage;
75	var largeImage;
76	var imageCaption;
77	var tagName = getTagName();
78    
79	var divSlides = document.createElement("div");
80	divSlides.setAttribute("class", "carousel-inner");
81    
82	var ol = document.createElement("ol");
83	ol.setAttribute("class", "carousel-indicators");
84    
85	var ulCont = document.createElement("ul");
86	ulCont.setAttribute("class", "list-inline");
87	var entered = false;
88    
89	for (var i=0; i < instagramImages.data.length; i++) {
90    
91		if(tagName != "")
92		{
93			var showImage = false;
94			for(var j = 0; j < instagramImages.data[i].tags.length; j++)
95			{
96				var tag = instagramImages.data[i].tags[j];
97				if(tag == tagName)
98					showImage = true;
99			}
100    
101			if(!showImage)
102				continue;
103		}
104    
105		URLsmallImage = instagramImages.data[i].images.thumbnail.url; //used for the carousel    
106		URLlargeImage = instagramImages.data[i].images.standard_resolution.url; //used for the hyperlink in the image to expand
107    
108		smallImage = "https://" + URLsmallImage.substr(URLsmallImage.indexOf('://')+3);
109		largeImage = "https://" + URLlargeImage.substr(URLlargeImage.indexOf('://')+3);
110    
111		imageCaption = "";
112		if(instagramImages.data[i].caption != null){
113			imageCaption = instagramImages.data[i].caption.text;
114		}
115    
116		var feedListItem = document.createElement("li");
117		feedListItem.setAttribute("class","instagram-image");
118		feedListItem.setAttribute("id","instagram-image" + i);
119    
120		var feedImageLink = document.createElement("a");
121		feedImageLink.setAttribute("href",largeImage);
122		feedImageLink.setAttribute("rel","prettyPhoto[pp_gal]");
123		feedImageLink.setAttribute("title", imageCaption);
124		feedListItem.appendChild(feedImageLink);
125    
126		var feedImageThumb = document.createElement("img");
127		feedImageThumb.setAttribute("src", smallImage);
128		feedImageThumb.setAttribute("alt", imageCaption);    
129		feedImageLink.appendChild(feedImageThumb);
130
131		ulCont.appendChild(feedListItem);
132    
133		if((i+1) % 3 == 0) //Only displaying 3 images per carousel slide
134		{
135			entered = true; //Flag to see if we created at least one slide
136			var divItem = document.createElement("div");
137			if(i == 2)
138			{
139				divItem.setAttribute("class", "item active");
140    
141				var li = document.createElement("li");
142				li.setAttribute("class", "active");
143				ol.appendChild(li);    
144			}
145			else
146			{

147				divItem.setAttribute("class", "item");
148    
149				var li = document.createElement("li");
150				ol.appendChild(li);    
151			}
152			var cln = ulCont.cloneNode(true);
153			divItem.appendChild(cln);
154			divSlides.appendChild(divItem);
155			ulCont.innerHTML = "";    
156		}
157	}
158    
159	if(!entered && ulCont.innerHTML != "")
160	{
161		var divItem = document.createElement("div");
162		divItem.setAttribute("class", "item active");
163    
164		var li = document.createElement("li");
165		li.setAttribute("class", "active");
166		ol.appendChild(li);    
167    
168		var cln = ulCont.cloneNode(true);
169		divItem.appendChild(cln);
170		divSlides.appendChild(divItem);
171		ulCont.innerHTML = "";    
172	}
173    
174	drawPics(divSlides,ol);
175}
176
177function drawPics(divSlides,ol) {
178	var car = document.createElement("div");
179	car.setAttribute("class", "carousel slide");
180	car.setAttribute("id", "carousel-example-generic");
181	car.setAttribute("data-ride", "carousel");
182	document.getElementById("instagram-holder").appendChild(car);    
183    
184	car.appendChild(ol);    
185	car.appendChild(divSlides);
186    
187	var mycode = "  <a class=\"left carousel-control\" href=\"#carousel-example-generic\" role=\"button\" data-slide=\"prev\">\
188					<span class=\"fas fa-chevron-left\" aria-hidden=\"true\"></span>\
189					<span class=\"sr-only\">Previous</span>\
190				  </a>\
191				  <a class=\"right carousel-control\" href=\"#carousel-example-generic\" role=\"button\" data-slide=\"next\">\
192					<span class=\"fas fa-chevron-right\" aria-hidden=\"true\"></span>\
193					<span class=\"sr-only\">Next</span>\
194				  </a>";
195    
196	car.innerHTML += mycode;    
197}
198