Jump to content
nbcommunication

InstagramBasicDisplayApi

Recommended Posts

The API issue with account_type has been resolved, so I've reinstated this in the module, version 1.3.2.

Share this post


Link to post
Share on other sites
18 hours ago, nbcommunication said:

Hi @jonatan,

I'm not sure what more I'd be able to do to directly help here. At this point your best bet is to add a bunch of logging to try and determine where the problem is occurring.

For example:


// Attach listener
console.log("Should only log once on init");
$(window).scroll(this.debounce(function() {
  console.log("Probably not needed, this will log during scrolling");
  if(!this$1.busy && $(window).scrollTop() == $(document).height() - $(window).height()) {
    console.log("User has reached the bottom.");
    // When this is logged I should really only see one at the time due to the debounce function and the 'busy' switch.
    this$1.get();
    // Similar logging to be added to get()
  }
}, 256));

<?php

$instagram = $modules->get("InstagramBasicDisplayApi");

// The next url is stored in session. The code below will log it.
$instagram->log($session->getFor($instagram, "next$page->id"));

if($config->ajax) {
    $instagram->log("You may want to log here to test how often AJAX requests are made");
    header("Content-Type: application/json");
    echo $instagram->getMedia(); // ["json" => true] is inferred by $config->ajax
    die();
}

By using logging to trace the process, you will hopefully be able to figure out what is causing the issue. I suspect it is still the listener.

Cheers,

Chris

HEUREKA!!!  💥 🎉 

No idea what the difference is... but I updated the code and without even looking at the log it just worked perfectly now!! 😃😃😃😃

Tadaaaa:

I am so so so glad for all of the massive help that you've given me Criss @nbcommunication!!! 😃

Really could never have gotten even close to getting it working without you and the nice module! I am so glad! 

Can I please buy you a beer or a coffee?? 🍺I'd love to thank you somehow! 😃 


All the best,
Jonatan.

Share this post


Link to post
Share on other sites

Oooonly thing now though, is that the loading element still keeps showing up, when there's no more content to load 😊

Share this post


Link to post
Share on other sites
21 minutes ago, jonatan said:

Oooonly thing now though, is that the loading element still keeps showing up, when there's no more content to load 😊

Nevermind,

Fixed it:

var postnum = <?php echo $postsnum; ?>;
// Show spinner
if (this$1.total < postnum){
this$1.$loading.show();
}

😄

Share this post


Link to post
Share on other sites

Hi @jonatan,

Nice one! No thanks required - you've highlighted issues which has made the module significantly better!

Cheers,

Chris

  • Like 1

Share this post


Link to post
Share on other sites

Hi,

Update to 1.3.3 - tweak to how the cache name/key is generated, shouldn't effect anything...

Cheers,

Chris

  • Like 1

Share this post


Link to post
Share on other sites

Hi @nbcommunication / Criss !

I've gotten myself out into some barba.js fading page transitions. Which means.. the DOM isn't fully reloaded.. Which means.. using the fabulous module of yours, when the instagram page is shown, the pagination script runs, but, when I then go to another page, and then back to the instagram page, the pagination is not reset, so instagram.init() starts out again, but, not all fresh, it loads the second batch of media and not the first batch again – as it would have done on a proper page refresh and new HTTP request. 

So, can you think of some smart way to reset the pagination? ...a.k.a this: (ehh.. I think?.. maybe? right? maybe?) 

$this->wire("session")->remove($this, $this->getNextKey());

– using a javascript function? 

 

My idea is that then I would run that function every time the Instagram page is faux-DOM-loaded (js-barba-magic-replaced-without-proper-DOM-reload-and-hence-no-HTTP-requests), right before the instagram.init() function 🙂 

 

Does it make any sense at all..? 😅

 

All the best,
Jonatan  

Share this post


Link to post
Share on other sites

Hi @jonatan,

You would probably need to do something like:

var resetPagination = new Promise(function (resolve, reject) {

	var xhr = new XMLHttpRequest();
	xhr.open("GET", window.location.href);

	oReq.addEventListener(xhr, "load", function() {
		if (xhr.status === 0 || xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
			resolve(xhr);
		} else {
			reject();
		}
	});

	oReq.addEventListener(xhr, "error", function() {
		reject();
	});

	oReq.addEventListener(xhr, "timeout", function() {
		reject()
	});

	xhr.send();
});

resetPagination.then(function() {
	instagram.init();
}, function() {
	// Error
});

If I remember correctly, this kind of plain Javascript request doesn't actually register as an ajax request, so $config->ajax returns false, and the pagination will be reset.

I'm not sure this is the best way to go though - I'd probably be trying to store the requested data in an array/object and then just pull it from there when the page changes e.g.

var requests = {},
var items = [];

// On page change
var page = "page" + pageNum; // whereever you get this info from
if(page in requests) {
  items = requests[page];
} else {
  items = "an AJAX request to get the next page of items";
  requests[page] = items;
}

It will probably require a bit of reworking of your code, but it's a far better way to go. You shouldn't have to request the data more than once - store it!

Hope that helps,

Chris

  • Like 1

Share this post


Link to post
Share on other sites

@nbcommunication Thanks a million Chris! 🏆 And thank you for the tip. You're the best :)

 

I'll try and see if I can get it working. 

 

All the best, 

Jonatan 

Share this post


Link to post
Share on other sites

So.. after trial and error, and trial, and error, and more trial, and.. fails and fails and fails... stupidly tumbling around in the dark.. because my js skills / understanding are about as good as my russian skills (limited to "da" that is). But... yay! I discovered something brilliant.

So.. just in case anyone's intereste in barba.js and the Instagram Basic Display API combo cocktail 🍸, (and perhaps isn't any properly js sufficient...), here goes how:

I found out after confusingly and hopingly staring  at the barba.js docs for any miracles, I finally discovered this https://barba.js.org/docs/advanced/strategies/#Cache :

 

barba.init({
    cacheIgnore: ['/instagram'],
});

And that does the trick! 

But again, thank you @nbcommunication once again, for being such an awesome and so helpfu Processwirian !  ❤️

Have a great weekend!  🍻
Jonatan 

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...