From 062d27eb8a89688ad668b213b452b25ce3b0b2f0 Mon Sep 17 00:00:00 2001 From: Ramil Valitov Date: Sat, 24 Oct 2020 10:55:03 +0300 Subject: [PATCH 1/6] [fix] make sure the DOM is updated after append --- spectragram.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/spectragram.js b/spectragram.js index 7d32828..2442d29 100644 --- a/spectragram.js +++ b/spectragram.js @@ -146,11 +146,15 @@ if ( typeof Object.create !== "function" ) { } } - this.$elem.append( imageGroup ); - - if ( typeof this.options.complete === "function" ) { - this.options.complete.call( this ); - } + var t = this; + this.$elem.append(imageGroup).append(function () { + /** + * Nested appends makes sure that we fire the callback function after the DOM has been actually updated + */ + if (typeof t.options.complete === "function") { + t.options.complete.call(t); + } + }); } }; From 3b21e8736810f9b66a6729e5a5d57ad478cb9c64 Mon Sep 17 00:00:00 2001 From: Ramil Valitov Date: Sat, 24 Oct 2020 10:55:36 +0300 Subject: [PATCH 2/6] [fix] correct callback example --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e643bd8..1388edd 100644 --- a/README.md +++ b/README.md @@ -99,7 +99,7 @@ jQuery.fn.spectragram.accessData = { }; $('ul').spectragram({ - complete : myCallbackFunc(), + complete : myCallbackFunc, max: 4, size: "medium", wrapEachWith: "
  • " From 4b504d3e7696d070123fbf68ff073977b503fa69 Mon Sep 17 00:00:00 2001 From: Ramil Valitov Date: Sat, 24 Oct 2020 10:56:01 +0300 Subject: [PATCH 3/6] [add] info about callback argument --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1388edd..52a362f 100644 --- a/README.md +++ b/README.md @@ -89,7 +89,7 @@ An object to configure the properties of spectragram: | **max** | No | *Number* | `25` | A number between 1 and 25 of photos to show. | | **size** | No | *String* | `large` | The size of the photos. 'small', 'medium' or 'large'. | | **wrapEachWith** | No | *String* | `'
  • '` | The HTML tag to wrap every result. | -| **complete** | No | *Function* | `null` | A callback function to execute after the display of the photos. | +| **complete** | No | *Function* | `null` | A callback function to execute after the display of the photos. The function takes one argument - the `spectragram` object that called this function. | ### Example From 429bf1f1b0c29cdbb7028caad2d93669a3df4de7 Mon Sep 17 00:00:00 2001 From: Ramil Valitov Date: Sat, 24 Oct 2020 10:57:58 +0300 Subject: [PATCH 4/6] Update spectragram.min.js --- spectragram.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spectragram.min.js b/spectragram.min.js index 3d31ebd..a55e487 100644 --- a/spectragram.min.js +++ b/spectragram.min.js @@ -1 +1 @@ -if(typeof Object.create!=="function"){Object.create=function(obj){function F(){}F.prototype=obj;return new F}}(function($,window,document,undefined){var Instagram={API_URL:"https://graph.instagram.com/me/media?fields=",API_FIELDS:"caption,media_url,media_type,permalink,timestamp,username",initialize:function(options,elem){this.elem=elem;this.$elem=$(elem);this.accessToken=$.fn.spectragram.accessData.accessToken,this.options=$.extend({},$.fn.spectragram.options,options);this.messages={defaultImageAltText:"Instagram Photo",notFound:"This user account is private or doesn't have any photos."};this.getPhotos()},getPhotos:function(){var self=this;self.fetch().done(function(results){if(results.data&&results.data.length){self.displayPhotos(results)}else if(results.error.message){$.error("Spectragram.js - Error: "+results.error.message)}else{$.error("Spectragram.js - Error: user does not have photos.")}})},fetch:function(){var getUrl=this.API_URL+this.API_FIELDS+"&access_token="+this.accessToken;return $.ajax({type:"GET",dataType:"jsonp",cache:false,url:getUrl})},displayPhotos:function(results){var $element,$image,hasCaption,isWrapperEmpty,isImage,imageGroup=[],imageCaption,max,size;var sizeChart={small:160,medium:320,large:640};isWrapperEmpty=$(this.options.wrapEachWith).length===0;max=this.options.max>=results.data.length?results.data.length:this.options.max;size=sizeChart[this.options.size];if(results.data===undefined||results.data.length===0){if(isWrapperEmpty){this.$elem.append(this.messages.notFound)}else{this.$elem.append($(this.options.wrapEachWith).append(this.messages.notFound))}return}for(var i=0;i").text(results.data[i].caption).html():this.messages.defaultImageAltText;$image=$("",{alt:imageCaption,attr:{height:size,width:size},src:results.data[i].media_url});$element=$("",{href:results.data[i].permalink,target:"_blank",title:imageCaption}).append($image);if(isWrapperEmpty){imageGroup.push($element)}else{imageGroup.push($(this.options.wrapEachWith).append($element))}}}this.$elem.append(imageGroup);if(typeof this.options.complete==="function"){this.options.complete.call(this)}}};jQuery.fn.spectragram=function(options){if(jQuery.fn.spectragram.accessData.accessToken){this.each(function(){var instagram=Object.create(Instagram);instagram.initialize(options,this)})}else{$.error("You must define an accessToken on jQuery.spectragram")}};jQuery.fn.spectragram.options={complete:null,max:25,size:"large",wrapEachWith:"
  • "};jQuery.fn.spectragram.accessData={accessToken:null}})(jQuery,window,document); \ No newline at end of file +if(typeof Object.create!=="function"){Object.create=function(obj){function F(){}F.prototype=obj;return new F}}(function($,window,document,undefined){var Instagram={API_URL:"https://graph.instagram.com/me/media?fields=",API_FIELDS:"caption,media_url,media_type,permalink,timestamp,username",initialize:function(options,elem){this.elem=elem;this.$elem=$(elem);this.accessToken=$.fn.spectragram.accessData.accessToken,this.options=$.extend({},$.fn.spectragram.options,options);this.messages={defaultImageAltText:"Instagram Photo",notFound:"This user account is private or doesn't have any photos."};this.getPhotos()},getPhotos:function(){var self=this;self.fetch().done(function(results){if(results.data&&results.data.length){self.displayPhotos(results)}else if(results.error.message){$.error("Spectragram.js - Error: "+results.error.message)}else{$.error("Spectragram.js - Error: user does not have photos.")}})},fetch:function(){var getUrl=this.API_URL+this.API_FIELDS+"&access_token="+this.accessToken;return $.ajax({type:"GET",dataType:"jsonp",cache:false,url:getUrl})},displayPhotos:function(results){var $element,$image,hasCaption,isWrapperEmpty,isImage,imageGroup=[],imageCaption,max,size;var sizeChart={small:160,medium:320,large:640};isWrapperEmpty=$(this.options.wrapEachWith).length===0;max=this.options.max>=results.data.length?results.data.length:this.options.max;size=sizeChart[this.options.size];if(results.data===undefined||results.data.length===0){if(isWrapperEmpty){this.$elem.append(this.messages.notFound)}else{this.$elem.append($(this.options.wrapEachWith).append(this.messages.notFound))}return}for(var i=0;i").text(results.data[i].caption).html():this.messages.defaultImageAltText;$image=$("",{alt:imageCaption,attr:{height:size,width:size},src:results.data[i].media_url});$element=$("    ",{href:results.data[i].permalink,target:"_blank",title:imageCaption}).append($image);if(isWrapperEmpty){imageGroup.push($element)}else{imageGroup.push($(this.options.wrapEachWith).append($element))}}}var t=this;this.$elem.append(imageGroup).append(function(){if(typeof t.options.complete==="function"){t.options.complete.call(t)}})}};jQuery.fn.spectragram=function(options){if(jQuery.fn.spectragram.accessData.accessToken){this.each(function(){var instagram=Object.create(Instagram);instagram.initialize(options,this)})}else{$.error("You must define an accessToken on jQuery.spectragram")}};jQuery.fn.spectragram.options={complete:null,max:25,size:"large",wrapEachWith:"
  • "};jQuery.fn.spectragram.accessData={accessToken:null}})(jQuery,window,document); \ No newline at end of file From ed5b1d88fd994a0a996ba529834cfd4f71073349 Mon Sep 17 00:00:00 2001 From: Ramil Valitov Date: Fri, 26 Mar 2021 11:09:33 +0300 Subject: [PATCH 5/6] Revert "Update spectragram.min.js" This reverts commit 429bf1f1b0c29cdbb7028caad2d93669a3df4de7. --- spectragram.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/spectragram.min.js b/spectragram.min.js index a55e487..3d31ebd 100644 --- a/spectragram.min.js +++ b/spectragram.min.js @@ -1 +1 @@ -if(typeof Object.create!=="function"){Object.create=function(obj){function F(){}F.prototype=obj;return new F}}(function($,window,document,undefined){var Instagram={API_URL:"https://graph.instagram.com/me/media?fields=",API_FIELDS:"caption,media_url,media_type,permalink,timestamp,username",initialize:function(options,elem){this.elem=elem;this.$elem=$(elem);this.accessToken=$.fn.spectragram.accessData.accessToken,this.options=$.extend({},$.fn.spectragram.options,options);this.messages={defaultImageAltText:"Instagram Photo",notFound:"This user account is private or doesn't have any photos."};this.getPhotos()},getPhotos:function(){var self=this;self.fetch().done(function(results){if(results.data&&results.data.length){self.displayPhotos(results)}else if(results.error.message){$.error("Spectragram.js - Error: "+results.error.message)}else{$.error("Spectragram.js - Error: user does not have photos.")}})},fetch:function(){var getUrl=this.API_URL+this.API_FIELDS+"&access_token="+this.accessToken;return $.ajax({type:"GET",dataType:"jsonp",cache:false,url:getUrl})},displayPhotos:function(results){var $element,$image,hasCaption,isWrapperEmpty,isImage,imageGroup=[],imageCaption,max,size;var sizeChart={small:160,medium:320,large:640};isWrapperEmpty=$(this.options.wrapEachWith).length===0;max=this.options.max>=results.data.length?results.data.length:this.options.max;size=sizeChart[this.options.size];if(results.data===undefined||results.data.length===0){if(isWrapperEmpty){this.$elem.append(this.messages.notFound)}else{this.$elem.append($(this.options.wrapEachWith).append(this.messages.notFound))}return}for(var i=0;i").text(results.data[i].caption).html():this.messages.defaultImageAltText;$image=$("",{alt:imageCaption,attr:{height:size,width:size},src:results.data[i].media_url});$element=$("    ",{href:results.data[i].permalink,target:"_blank",title:imageCaption}).append($image);if(isWrapperEmpty){imageGroup.push($element)}else{imageGroup.push($(this.options.wrapEachWith).append($element))}}}var t=this;this.$elem.append(imageGroup).append(function(){if(typeof t.options.complete==="function"){t.options.complete.call(t)}})}};jQuery.fn.spectragram=function(options){if(jQuery.fn.spectragram.accessData.accessToken){this.each(function(){var instagram=Object.create(Instagram);instagram.initialize(options,this)})}else{$.error("You must define an accessToken on jQuery.spectragram")}};jQuery.fn.spectragram.options={complete:null,max:25,size:"large",wrapEachWith:"
  • "};jQuery.fn.spectragram.accessData={accessToken:null}})(jQuery,window,document); \ No newline at end of file +if(typeof Object.create!=="function"){Object.create=function(obj){function F(){}F.prototype=obj;return new F}}(function($,window,document,undefined){var Instagram={API_URL:"https://graph.instagram.com/me/media?fields=",API_FIELDS:"caption,media_url,media_type,permalink,timestamp,username",initialize:function(options,elem){this.elem=elem;this.$elem=$(elem);this.accessToken=$.fn.spectragram.accessData.accessToken,this.options=$.extend({},$.fn.spectragram.options,options);this.messages={defaultImageAltText:"Instagram Photo",notFound:"This user account is private or doesn't have any photos."};this.getPhotos()},getPhotos:function(){var self=this;self.fetch().done(function(results){if(results.data&&results.data.length){self.displayPhotos(results)}else if(results.error.message){$.error("Spectragram.js - Error: "+results.error.message)}else{$.error("Spectragram.js - Error: user does not have photos.")}})},fetch:function(){var getUrl=this.API_URL+this.API_FIELDS+"&access_token="+this.accessToken;return $.ajax({type:"GET",dataType:"jsonp",cache:false,url:getUrl})},displayPhotos:function(results){var $element,$image,hasCaption,isWrapperEmpty,isImage,imageGroup=[],imageCaption,max,size;var sizeChart={small:160,medium:320,large:640};isWrapperEmpty=$(this.options.wrapEachWith).length===0;max=this.options.max>=results.data.length?results.data.length:this.options.max;size=sizeChart[this.options.size];if(results.data===undefined||results.data.length===0){if(isWrapperEmpty){this.$elem.append(this.messages.notFound)}else{this.$elem.append($(this.options.wrapEachWith).append(this.messages.notFound))}return}for(var i=0;i").text(results.data[i].caption).html():this.messages.defaultImageAltText;$image=$("",{alt:imageCaption,attr:{height:size,width:size},src:results.data[i].media_url});$element=$("    ",{href:results.data[i].permalink,target:"_blank",title:imageCaption}).append($image);if(isWrapperEmpty){imageGroup.push($element)}else{imageGroup.push($(this.options.wrapEachWith).append($element))}}}this.$elem.append(imageGroup);if(typeof this.options.complete==="function"){this.options.complete.call(this)}}};jQuery.fn.spectragram=function(options){if(jQuery.fn.spectragram.accessData.accessToken){this.each(function(){var instagram=Object.create(Instagram);instagram.initialize(options,this)})}else{$.error("You must define an accessToken on jQuery.spectragram")}};jQuery.fn.spectragram.options={complete:null,max:25,size:"large",wrapEachWith:"
  • "};jQuery.fn.spectragram.accessData={accessToken:null}})(jQuery,window,document); \ No newline at end of file From abecaad8c3cb94165adc6f3894dd0feba84a50c3 Mon Sep 17 00:00:00 2001 From: Ramil Valitov Date: Fri, 26 Mar 2021 11:09:38 +0300 Subject: [PATCH 6/6] Revert "[fix] make sure the DOM is updated after append" This reverts commit 062d27eb8a89688ad668b213b452b25ce3b0b2f0. --- spectragram.js | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/spectragram.js b/spectragram.js index 2442d29..7d32828 100644 --- a/spectragram.js +++ b/spectragram.js @@ -146,15 +146,11 @@ if ( typeof Object.create !== "function" ) { } } - var t = this; - this.$elem.append(imageGroup).append(function () { - /** - * Nested appends makes sure that we fire the callback function after the DOM has been actually updated - */ - if (typeof t.options.complete === "function") { - t.options.complete.call(t); - } - }); + this.$elem.append( imageGroup ); + + if ( typeof this.options.complete === "function" ) { + this.options.complete.call( this ); + } } };