diff --git a/dist/InstagramFeed.min.js b/dist/InstagramFeed.min.js index 155389f..51514be 100644 --- a/dist/InstagramFeed.min.js +++ b/dist/InstagramFeed.min.js @@ -1 +1 @@ -function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}(function(a,b){"function"==typeof define&&define.amd?define([],b):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?module.exports=b():a.InstagramFeed=b()})(this,function(){function a(a){return a.replace(/[&<>"'`=\/]/g,function(a){return d[a]})}var b={host:"https://www.instagram.com/",username:"",tag:"",container:"",display_profile:!0,display_biography:!0,display_gallery:!0,display_igtv:!1,callback:null,styling:!0,items:8,items_per_row:4,margin:.5,image_size:640,lazy_load:!1,on_error:console.error},c={150:0,240:1,320:2,480:3,640:4},d={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="};return function(d){this.options=Object.assign({},b),this.options=Object.assign(this.options,d),this.is_tag=""==this.options.username,this.valid=!0,""==this.options.username&&""==this.options.tag&&(this.options.on_error("InstagramFeed: Error, no username or tag defined.",1),this.valid=!1),"undefined"!=typeof this.options.get_data&&console.warn("InstagramFeed: options.get_data is deprecated, options.callback is always called if defined"),null==this.options.callback&&""==this.options.container&&(this.options.on_error("InstagramFeed: Error, neither container found nor callback defined.",2),this.valid=!1),this.get=function(a){var b=this.is_tag?this.options.host+"explore/tags/"+this.options.tag+"/":this.options.host+this.options.username+"/",c=new XMLHttpRequest,d=this;c.onload=function(){if(4===c.readyState)if(200===c.status){try{var b=c.responseText.split("window._sharedData = ")[1].split("")[0]}catch(a){return void d.options.on_error("InstagramFeed: It looks like the profile you are trying to fetch is age restricted. See https://github.com/jsanahuja/InstagramFeed/issues/26",3)}if(b=JSON.parse(b.substr(0,b.length-1)),b=b.entry_data.ProfilePage||b.entry_data.TagPage,"undefined"==typeof b)return void d.options.on_error("InstagramFeed: It looks like YOUR network has been temporary banned because of too many requests. See https://github.com/jsanahuja/jquery.instagramFeed/issues/25",4);b=b[0].graphql.user||b[0].graphql.hashtag,a(b,d)}else d.options.on_error("InstagramFeed: Unable to fetch the given user/tag. Instagram responded with the status code: "+c.statusText,5)},c.open("GET",b,!0),c.send()},this.parse_caption=function(a,b){return"undefined"!=typeof a.node.edge_media_to_caption.edges[0]&&"undefined"!=typeof a.node.edge_media_to_caption.edges[0].node&&"undefined"!=typeof a.node.edge_media_to_caption.edges[0].node.text&&null!==a.node.edge_media_to_caption.edges[0].node.text?a.node.edge_media_to_caption.edges[0].node.text:"undefined"!=typeof a.node.title&&null!==a.node.title&&0!=a.node.title.length?a.node.title:"undefined"!=typeof a.node.accessibility_caption&&null!==a.node.accessibility_caption&&0!=a.node.accessibility_caption.length?a.node.accessibility_caption:(this.is_tag?b.name:b.username)+" image "},this.display=function(b){if(this.options.styling)var d=(100-2*this.options.margin*this.options.items_per_row)/this.options.items_per_row,e={profile_container:" style='text-align:center;'",profile_image:" style='border-radius:10em;width:15%;max-width:125px;min-width:50px;'",profile_name:" style='font-size:1.2em;'",profile_biography:" style='font-size:1em;'",gallery_image:" style='margin:"+this.options.margin+"% "+this.options.margin+"%;width:"+d+"%;float:left;'"};else var e={profile_container:"",profile_image:"",profile_name:"",profile_biography:"",gallery_image:""};var f="";if(this.options.display_profile&&(f+="
",f+=""+(this.is_tag?b.name+" tag pic":b.username+" profile pic")+" profile pic",f+=this.is_tag?"

#"+this.options.tag+"

":"

@"+b.full_name+" (@"+this.options.username+")

",!this.is_tag&&this.options.display_biography&&(f+="

"+b.biography+"

"),f+="
"),this.options.display_gallery){var g="undefined"==typeof c[this.options.image_size]?c[640]:c[this.options.image_size];if("undefined"!=typeof b.is_private&&!0===b.is_private)f+="

This profile is private

";else{var h=(b.edge_owner_to_timeline_media||b.edge_hashtag_to_media).edges;p=h.length>this.options.items?this.options.items:h.length,f+="
";for(var j=0;j",f+="",f+=""}f+="
"}}if(this.options.display_igtv&&"undefined"!=typeof b.edge_felix_video_timeline){var o=b.edge_felix_video_timeline.edges,p=o.length>this.options.items?this.options.items:o.length;if(0";for(var j=0;j",f+="",f+=""}f+=""}}this.options.container.innerHTML=f},this.run=function(){this.get(function(a,b){""!=b.options.container&&b.display(a),"function"==typeof b.options.callback&&b.options.callback(a)})},this.valid&&this.run()}}); +function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}(function(a,b){"function"==typeof define&&define.amd?define([],b):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?module.exports=b():a.InstagramFeed=b()})(this,function(){function a(a){return a.replace(/[&<>"'`=\/]/g,function(a){return d[a]})}var b={host:"https://www.instagram.com/",username:"",tag:"",container:"",display_profile:!0,display_biography:!0,display_gallery:!0,display_captions:!1,display_igtv:!1,callback:null,styling:!0,items:8,items_per_row:4,margin:.5,image_size:640,lazy_load:!1,on_error:console.error},c={150:0,240:1,320:2,480:3,640:4},d={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/","`":"`","=":"="};return function(d){this.options=Object.assign({},b),this.options=Object.assign(this.options,d),this.is_tag=""==this.options.username,this.valid=!0,""==this.options.username&&""==this.options.tag&&(this.options.on_error("InstagramFeed: Error, no username or tag defined.",1),this.valid=!1),"undefined"!=typeof this.options.get_data&&console.warn("InstagramFeed: options.get_data is deprecated, options.callback is always called if defined"),null==this.options.callback&&""==this.options.container&&(this.options.on_error("InstagramFeed: Error, neither container found nor callback defined.",2),this.valid=!1),this.get=function(a){var b=this.is_tag?this.options.host+"explore/tags/"+this.options.tag+"/":this.options.host+this.options.username+"/",c=new XMLHttpRequest,d=this;c.onload=function(){if(4===c.readyState)if(200===c.status){try{var b=c.responseText.split("window._sharedData = ")[1].split("")[0]}catch(a){return void d.options.on_error("InstagramFeed: It looks like the profile you are trying to fetch is age restricted. See https://github.com/jsanahuja/InstagramFeed/issues/26",3)}if(b=JSON.parse(b.substr(0,b.length-1)),b=b.entry_data.ProfilePage||b.entry_data.TagPage,"undefined"==typeof b)return void d.options.on_error("InstagramFeed: It looks like YOUR network has been temporary banned because of too many requests. See https://github.com/jsanahuja/jquery.instagramFeed/issues/25",4);b=b[0].graphql.user||b[0].graphql.hashtag,a(b,d)}else d.options.on_error("InstagramFeed: Unable to fetch the given user/tag. Instagram responded with the status code: "+c.statusText,5)},c.open("GET",b,!0),c.send()},this.parse_caption=function(a,b){return"undefined"!=typeof a.node.edge_media_to_caption.edges[0]&&"undefined"!=typeof a.node.edge_media_to_caption.edges[0].node&&"undefined"!=typeof a.node.edge_media_to_caption.edges[0].node.text&&null!==a.node.edge_media_to_caption.edges[0].node.text?a.node.edge_media_to_caption.edges[0].node.text:"undefined"!=typeof a.node.title&&null!==a.node.title&&0!=a.node.title.length?a.node.title:"undefined"!=typeof a.node.accessibility_caption&&null!==a.node.accessibility_caption&&0!=a.node.accessibility_caption.length?a.node.accessibility_caption:(this.is_tag?b.name:b.username)+" image "},this.display=function(b){var d,e="";if(this.options.styling){var f=(100-2*this.options.margin*this.options.items_per_row)/this.options.items_per_row;d={profile_container:" style='text-align:center;'",profile_image:" style='border-radius:10em;width:15%;max-width:125px;min-width:50px;'",profile_name:" style='font-size:1.2em;'",profile_biography:" style='font-size:1em;'",gallery_image:" style='width:100%;'",gallery_image_link:" style='width:"+f+"%; margin:"+this.options.margin+"%; position:relative; display: inline-flex; height: 100%;'"},this.options.display_captions&&(e+="")}else d={profile_container:"",profile_image:"",profile_name:"",profile_biography:"",gallery_image:"",gallery_image_link:""};if(this.options.display_profile&&(e+="
",e+=""+(this.is_tag?b.name+" tag pic":b.username+" profile pic")+" profile pic",e+=this.is_tag?"

#"+this.options.tag+"

":"

@"+b.full_name+" (@"+this.options.username+")

",!this.is_tag&&this.options.display_biography&&(e+="

"+b.biography+"

"),e+="
"),this.options.display_gallery){var g="undefined"==typeof c[this.options.image_size]?c[640]:c[this.options.image_size];if("undefined"!=typeof b.is_private&&!0===b.is_private)e+="

This profile is private

";else{var h=(b.edge_owner_to_timeline_media||b.edge_hashtag_to_media).edges;p=h.length>this.options.items?this.options.items:h.length,e+="
";for(var j=0;j",e+="",e+=""}e+="
"}}if(this.options.display_igtv&&"undefined"!=typeof b.edge_felix_video_timeline){var o=b.edge_felix_video_timeline.edges,p=o.length>this.options.items?this.options.items:o.length;if(0";for(var j=0;j",e+="",e+=""}e+=""}}this.options.container.innerHTML=e},this.run=function(){this.get(function(a,b){""!=b.options.container&&b.display(a),"function"==typeof b.options.callback&&b.options.callback(a)})},this.valid&&this.run()}}); diff --git a/index.html b/index.html index fc58681..7db641c 100644 --- a/index.html +++ b/index.html @@ -209,6 +209,14 @@

Options

true Enables displaying the gallery + + + display_captions + + Boolean + false + Enables displaying captions for each post as overlay on hover + display_igtv @@ -341,6 +349,7 @@

Example 1: Default feed styling

'display_profile': true, 'display_biography': true, 'display_gallery': true, + 'display_captions': true, 'callback': null, 'styling': true, 'items': 8, @@ -370,6 +379,7 @@

Example 2: Only want images?

'display_profile': false, 'display_biography': false, 'display_gallery': true, + 'display_captions': false, 'callback': null, 'styling': true, 'items': 8, @@ -397,6 +407,7 @@

Example 3: Want to load more or change the display?

'display_profile': false, 'display_biography': false, 'display_gallery': true, + 'display_captions': false, 'callback': null, 'styling': true, 'items': 12, @@ -423,6 +434,7 @@

Example 4: Want to fetch a TAG?

'container': document.getElementById("instagram-feed4"), 'display_profile': true, 'display_gallery': true, + 'display_captions': true, 'items': 100, 'items_per_row': 5, 'margin': 0.5 @@ -448,6 +460,7 @@

Example 5: Want to display IGTV?

'display_profile': false, 'display_biography': false, 'display_gallery': false, + 'display_captions': false, 'display_igtv': true, 'callback': null, 'styling': true, @@ -496,6 +509,7 @@

Example 6: Don't like our styles at all?

'display_profile': true, 'display_biography': true, 'display_gallery': true, + 'display_captions': false, 'display_igtv': true, 'callback': null, 'styling': false, @@ -552,6 +566,7 @@

Example 8: AMD (Asynchronous module definition)

'display_profile': true, 'display_biography': true, 'display_gallery': true, + 'display_captions': true, 'get_raw_json': false, 'callback': null, 'styling': true, @@ -593,6 +608,7 @@

Still not enough?

'display_profile': true, 'display_biography': true, 'display_gallery': true, + 'display_captions': true, 'callback': null, 'styling': true, 'items': 8, @@ -608,6 +624,7 @@

Still not enough?

'display_profile': false, 'display_biography': false, 'display_gallery': true, + 'display_captions': false, 'callback': null, 'styling': true, 'items': 8, @@ -620,6 +637,7 @@

Still not enough?

'display_profile': false, 'display_biography': false, 'display_gallery': true, + 'display_captions': false, 'callback': null, 'styling': true, 'items': 12, @@ -631,6 +649,7 @@

Still not enough?

'container': document.getElementById("instagram-feed4"), 'display_profile': true, 'display_gallery': true, + 'display_captions': true, 'items': 100, 'items_per_row': 5, 'margin': 0.5 @@ -641,6 +660,7 @@

Still not enough?

'display_profile': false, 'display_biography': false, 'display_gallery': false, + 'display_captions': false, 'display_igtv': true, 'callback': null, 'styling': true, diff --git a/package.json b/package.json index a4390de..3ceae66 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@jsanahuja/instagramfeed", "description": "Instagram Feed without access token. Not using the Instagram API", "homepage": "https://github.com/jsanahuja/InstagramFeed", - "version": "1.4.0", + "version": "1.5.0", "keywords": [ "instagram", "feed", diff --git a/src/InstagramFeed.js b/src/InstagramFeed.js index 47457cb..c2a4f9e 100644 --- a/src/InstagramFeed.js +++ b/src/InstagramFeed.js @@ -26,6 +26,7 @@ 'display_profile': true, 'display_biography': true, 'display_gallery': true, + 'display_captions': false, 'display_igtv': false, 'callback': null, 'styling': true, @@ -140,27 +141,49 @@ this.display = function(data) { // Styling + var html = "", + styles; if (this.options.styling) { var width = (100 - this.options.margin * 2 * this.options.items_per_row) / this.options.items_per_row; - var styles = { + styles = { 'profile_container': " style='text-align:center;'", 'profile_image': " style='border-radius:10em;width:15%;max-width:125px;min-width:50px;'", 'profile_name': " style='font-size:1.2em;'", 'profile_biography': " style='font-size:1em;'", - 'gallery_image': " style='margin:" + this.options.margin + "% " + this.options.margin + "%;width:" + width + "%;float:left;'" + 'gallery_image': " style='width:100%;'", + 'gallery_image_link': " style='width:" + width + "%; margin:" + this.options.margin + "%; position:relative; display: inline-flex; height: 100%;'" }; + // Caption Styling + if(this.options.display_captions){ + html += ""; + } } else { - var styles = { + styles = { 'profile_container': "", 'profile_image': "", 'profile_name': "", 'profile_biography': "", - 'gallery_image': "" + 'gallery_image': "", + 'gallery_image_link': "" }; } // Profile - var html = ""; if (this.options.display_profile) { html += "
"; html += "" + (this.is_tag ? data.name + " tag pic" : data.username + " profile pic") + " profile pic"; @@ -186,7 +209,6 @@ max = (imgs.length > this.options.items) ? this.options.items : imgs.length; html += "
"; - for (var i = 0; i < max; i++) { var url = "https://www.instagram.com/p/" + imgs[i].node.shortcode, image, type_resource, @@ -207,7 +229,7 @@ } if (this.is_tag) data.username = ''; - html += ""; + html += ""; html += ""; html += ""; } @@ -226,7 +248,7 @@ var url = "https://www.instagram.com/p/" + igtv[i].node.shortcode, caption = this.parse_caption(igtv[i], data); - html += ""; + html += ""; html += ""; html += ""; } diff --git a/test/index.html b/test/index.html index 930c338..6d28973 100644 --- a/test/index.html +++ b/test/index.html @@ -33,6 +33,7 @@ 'display_profile': true, 'display_biography': true, 'display_gallery': true, + 'display_captions': true, 'get_raw_json': false, 'callback': null, 'styling': true, @@ -55,6 +56,7 @@ 'display_profile': false, 'display_biography': false, 'display_gallery': true, + 'display_captions': false, 'get_raw_json': false, 'callback': null, 'styling': true, @@ -140,6 +142,7 @@ 'container': document.getElementById("instagram-feed4"), 'display_profile': true, 'display_gallery': true, + 'display_captions': true, 'items': 100, 'items_per_row': 5, 'margin': 0.5