Infinite Scroll

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Infinite Scroll
« Reply #30, on June 7th, 2013, 01:42 PM »
:(

Yeah, I can see the underlying problems with this too, and I got no ideas on fixing them :(
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Infinite Scroll
« Reply #31, on June 7th, 2013, 04:16 PM »
Well, as I said, I have a solution, but it's complicated too... I'm now using an iframe (ouch). This is the only way to get scripts to work in both the parent page, and its children. I've tested it to work. Unfortunately, I'm having trouble getting rid of everything outside of the post list (either it works, and I lose scripts again, or I just get an empty iframe, and sometimes even -- a page with everything, BUT the posts :lol:), but it's probably a jQuery issue, rather than something I just can't do. I'm taking my lunch break, and I'll see later.
Posted: June 7th, 2013, 02:06 PM

Also, I'm having trouble with a detail... I'm getting errors with YouTube videos in iframes. Apparently, iframes within iframes... You've got to be careful of what domain you're using. Or something. I don't know how to fix that one, for now... :-/

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Infinite Scroll
« Reply #32, on June 7th, 2013, 04:21 PM »
Yeah, the nesting thing is a security thing to limit people pulling in things they shouldn't. The only way really is not to nest iframes. Or indeed not use iframes if at all possible :/

Surely the secondary load (page 2 or whatever) knows it's loaded via AJAX... so it just needs to include the code for calling the menu for the items in question... the menu constructor plus main data (what buttons are available) will already be loaded so it's just a case of submitting the extra menu data and some glue, right?

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Infinite Scroll
« Reply #33, on June 7th, 2013, 04:33 PM »
Quote from Arantor on June 7th, 2013, 04:21 PM
Yeah, the nesting thing is a security thing to limit people pulling in things they shouldn't. The only way really is not to nest iframes. Or indeed not use iframes if at all possible :/
Yeah, well, not possible in our situation -- it's either an iframe, or nothing, because it's pointless really to show a list of posts without the ability to use any JS on it -- I could probably fix most things to work, but mini-menus will never work properly, unless I write two codepaths, one with the 'optimized' mini-menus, and another one with a purely inline mini-menu (i.e. all menu entries are contained within the HTML, rather than compressed at the end of the page to save bandwidth.)
The advantage of the iframe, is that I really don't have to fear any JavaScript changes in the future will break the feature, and to me that made the deal; hence, my disappointment with the YT thing.
Quote
Surely the secondary load (page 2 or whatever) knows it's loaded via AJAX...
The first draft (the one in use here), yes, it does, well it can.
The second draft, being done through an iframe, isn't loaded through AJAX at all, it's really just a regular page load... ;) (Which I'm then manipulating afterwards, to remove stuff from it, and update the pagesection area to get the proper page numbers.)
Quote
so it just needs to include the code for calling the menu for the items in question...
Oh, right, so you're talking about draft #1...
Quote
the menu constructor plus main data (what buttons are available) will already be loaded so it's just a case of submitting the extra menu data and some glue, right?
Yeah, as I said it can always be done; what I fear, though, is that once it 'works', I'll forget about it all, and then find more problems in the future.
For instance, let's just think about a per-post non-mini-menu JS snippet that's rendered through a plugin. How do I tell the plugin, "okay I've loaded the next page, now do your thing"...? I can't, not really.
So, the iframe solution, really is the only 'realistic' solution right now.

(Did anyone notice my recent tendency to, ahem, use commas everywhere, even when not needed..? It's an impulse, and I don't now where it came from, please help me, please, really, I'm sick of it, honest.)

                                       ,

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Infinite Scroll
« Reply #34, on June 7th, 2013, 04:38 PM »
Quote
The advantage of the iframe, is that I really don't have to fear any JavaScript changes in the future will break the feature, and to me that made the deal; hence, my disappointment with the YT thing.
Until you have people doing crazy stuff like iframes around the forum. Or most embed code going forward (not just YouTube)
Quote
The first draft (the one in use here), yes, it does, well it can.
I was kind of hoping you were building it via the msg skeleton so it could serve arbitrary slices of topics...
Quote
For instance, let's just think about a per-post non-mini-menu JS snippet that's rendered through a plugin. How do I tell the plugin, "okay I've loaded the next page, now do your thing"...? I can't, not really.
So, the iframe solution, really is the only 'realistic' solution right now.
If you're pulling the full page and manipulating it there and then, surely you can just run any other JS at that point in time?

I dunno, bit pissed off and a bit frazzled from the search crap right now :(

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Infinite Scroll
« Reply #35, on June 7th, 2013, 04:50 PM »
Quote from Arantor on June 7th, 2013, 04:38 PM
I was kind of hoping you were building it via the msg skeleton so it could serve arbitrary slices of topics...
Nope, I just took the easy way out...
- in index.template.php, I added a span with a class, around the 'Next page' link. (You can see it here, too.)
- in QueryString.php, I added a failsafe to disable the AJAX constant if specifically requested from the Ajax caller, (I think I'll keep this one in, regardless of what I choose to do later...)
- then, in topic.js, I'd just do an Ajax request to get the next page, and retool it to just keep the #forumposts content (also removing the form tag if it was in there, although I'm not sure it was necessary.)

That's really all it took, and the second step is not needed in the iframe version.
Quote
If you're pulling the full page and manipulating it there and then, surely you can just run any other JS at that point in time?
There are JS snippets in external files, and JS snippets in inline HTML, etc... How exactly am I supposed to find them, and run only the ones I want to run..? For instance, if you load script.js from within the Ajax-generated code, it sends me errors, while it'll work (IIRC) when loaded through an iframe, so... Well...
Quote
I dunno, bit pissed off and a bit frazzled from the search crap right now :(
Zen!

icari

  • Posts: 88
Re: Infinite Scroll
« Reply #36, on June 7th, 2013, 05:06 PM »
looks like the additional pages are not marked as read currently, the new text [not image :P ] appears on the message index if the following page was not "clicked" or something like that, i was sent to a message i had already read in this thread but i had not clicked on page 3 but read that message already with the infinite scroll.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Infinite Scroll
« Reply #37, on June 7th, 2013, 06:42 PM »
This probably won't happen with the iframe version, though.
Re: Infinite Scroll
« Reply #38, on June 7th, 2013, 07:48 PM »
So...

Ajax version: still getting errors on every page if I attempt to load the entire page (apparently, internal $.each call is broken), but user mini-menus work; if I just request the post list, no JS works, but everything else does.

Iframe version: consistently getting the same cross-origin error when the embedded page also has an embedded iframe. Can't seem to solve it, and it looks like no one has it on google. I tried commenting out the x-frame-origine stuff, to no avail. Other than media embeds, I'm getting it to work without JS errors; it's complicated to remove the surrounding tags, though (and messy), and even when I manage to, I'm stuck with html and body tag stylings that don't match the parent div. So, in addition, I'll have to reset background styling on these tags, and try to make the iframe transparent (I think it's possible). One last (big!) issue is that the iframe's height is calculated after .load(), but even though it's enough to account for images being loaded, it doesn't seem to take iframes into account, or something... Anyway, as a result, sometimes the iframe doesn't have the correct height.

As you can see, I'm quite... stuck, at this point. I don't know which direction to go, and I don't know if it's worth the hassle. I guess it is, but it's frustrating when you managed to cook up an Ajax scroller in a couple of hours, and then you spend the next day rewriting it over and over, without ever managing to get it to run flawlessly.

F*ck.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Infinite Scroll
« Reply #39, on June 7th, 2013, 08:21 PM »
Yeah, the X-Frame-Options header isn't about cross-embedding the YT page but ensuring that a Wedge page can only be inside a frame/iframe that it controlled in the first place, not infringing on what you're doing. The whole YT issue is about nesting iframes which is one of those semi-unwritten rules.

But I get the impression that the solution is to ultimately do it the long way - not using an iframe, and in the second (and onward) page, triggering the menu generation manually on the new items as inline code. I don't see how else to get around all the issues.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Infinite Scroll
« Reply #40, on June 7th, 2013, 09:25 PM »
Quote from Arantor on June 7th, 2013, 08:21 PM
But I get the impression that the solution is to ultimately do it the long way - not using an iframe, and in the second (and onward) page, triggering the menu generation manually on the new items as inline code. I don't see how else to get around all the issues.
I'm not sure it's easy to do; and as I said, it doesn't solve the issue of plugins not being able to run their code on the newly loaded posts... And that bothers me the most, really. I don't want to provide support for that later, I guess...
Re: Infinite Scroll
« Reply #41, on June 7th, 2013, 11:50 PM »
I've got it working a bit better...

First, I determined where that $.each error was coming from; it was actually from the .acme loop, and was due to the fact that the loop executed on ALL .acme items on the page, i.e. also on items that had already been transformed. So, I simply (?) added a fail-safe to the mime plugin, which would search for a mime container and, if found, skip the item.

And that actually works, now...

After that, I modified the Display template to show the scripts inside the forumposts div, but then I managed to do it another way in pure JS, by filtering the script tags.
A a result, both mini-menus will show on new posts. :)

Of course, I wasn't finished... For instance, clicking Delete on a post would show the confirm box, but immediately delete the post, too.
I determined that if I removed the script src includes from the script list, it would no longer do that; at this point, though, I'm not exactly sure why the eves list of events is actually executing, or something, but whatever...

Another bug that remains, is that if I have the Quick Reply box opened, clicking Quote on a new post will lead me to the full post page, instead of multi-quoting it.

So, yeah, it's technically working, but (1) it's fairly unstable and hard to predict, (2) I still have no frigging idea how to integrate plugins into this, (3) I think that ideally, I should rewrite all post-related code (and things that are changed in ob_sessrewrite) to use $(source).find('...') instead of $('...'), with source being div.new_page:last when called from a new page, or simply the body when called from the main page. See what I mean...? Yeah, it's pretty much impossible to rewrite all of that...

Should I be happy with the, errr... Current drawbacks, and implement it this way...? :-/
Posted: June 7th, 2013, 11:47 PM

PS: just pushed this version online, so that you can test it...
Re: Infinite Scroll
« Reply #42, on June 7th, 2013, 11:51 PM »
Quote from Nao on June 7th, 2013, 11:50 PM
PS: just pushed this version online, so that you can test it...
Hmm, just noticed that quick edit won't work, either... -_-

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Infinite Scroll
« Reply #43, on June 7th, 2013, 11:51 PM »
1) I think the behaviour needs to be predictable and documentable but that's all it needs to be.

2) Plugins will just splice themselves into the normal menus, and/or splice themselves into the template layers as given. Provided display_main is still called and there's some way for a plugin to know that it's being called via infinite scroll vs not by infinite scroll... hell, could even provide two hooks - one that will be run for each post a la display_main and one that is only run for the first place (for things like topic_solved to splice its information into the page, that's not needed every iteration of page load, only the 'master' load for a topic)

3) That sounds like a huge and drastic change :(

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Infinite Scroll
« Reply #44, on June 8th, 2013, 12:18 AM »
Quote from Arantor on June 7th, 2013, 11:51 PM
1) I think the behaviour needs to be predictable and documentable but that's all it needs to be.
Can't seem to predict anything.
For instance, 'eves' may not have the same values on the next page. Thus, it's best to add a hack to subs-template to increase the base eves number by 100 or more, so that we don't mix things incorrectly. Unfortunately, doing this... Breaks even more.
Quote from Arantor on June 7th, 2013, 11:51 PM
2) Plugins will just splice themselves into the normal menus, and/or splice themselves into the template layers as given.
Hmm, possibly...
Anyway, my current implementation (I rewrite everything every 10mn or so...), doesn't strip anything, it loads the entire page, which then prompts jQuery to run scripts, then I strip everything that isn't #forumposts. Unfortunately, it looks like the scripts are still executed in the global scope....... Meh. So, it means that functions will run twice, and that isn't too good. If I'm not mistaken, running script.js twice will break deletion confirms, while removing *.js files before their execution, will break quick edit and a few others.
Also, loading the entire page also adapts the layout internally (to make room for the sidebar, etc), and the action menu is then incorrectly positioned, at least once I remove the sidebar etc...

It's incredible, how random it all is... Definitely not for the weak-hearted.
Quote from Arantor on June 7th, 2013, 11:51 PM
Provided display_main is still called and there's some way for a plugin to know that it's being called via infinite scroll vs not by infinite scroll... hell, could even provide two hooks - one that will be run for each post a la display_main and one that is only run for the first place (for things like topic_solved to splice its information into the page, that's not needed every iteration of page load, only the 'master' load for a topic)
Hmm yeah, a possibility...

Do you like infinite scrolling enough to justify more work from both of us, though...? :P
Quote from Arantor on June 7th, 2013, 11:51 PM
3) That sounds like a huge and drastic change :(
Yeah, one I certainly won't ever do, eh.