Proposal: new JS functionality to add for extensions

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
User avatar
javiexin
Registered User
Posts: 90
Joined: Thu Dec 22, 2011 10:04 am

Proposal: new JS functionality to add for extensions

Post by javiexin »

Hello,

I would like to propose a new functionality to facilitate the work from extension developers.

Given the current inflexibility of the Template Event mechanism, that only allows to ADD HTML code at certain points, but does not allow to replace or otherwise modify the existing code, extension developers are forced in a lot of situations to include small JS snippets to "fix" the presentation for their extensions in ways that Template Events do not allow to do.

My proposal would be to build in such a mechanism into phpbb, and provide a library to allow for such small modifications from extensions WITHOUT the need to include any more JavaScript, or more files that need to be loaded, just HTML code in standard Template Event locations.

The way it would work is similar to the way other functions are working already in phpbb, only this time it would be documented and expected to be used if feasible instead of adding extra JS (this could be a new validation criteria).

I am not an expert on JS or jQuery, so bear with me, but what I have thought about is something along the following lines:
  1. Add a hidden HTML container with the new HTML code that is going to be used
  2. That container should have a set of HTML properties that would allow for the proper placement of the contents in the current DOM tree
    • dom-target= specify the DOM object to be affected, it would be a DOM selector, as specific as possible
    • dom-closest= specify the DOM selector for the closest ancestor of the element to use as the initial point in the DOM tree (useful for loops)
    • dom-action= what action to perform, such as replace, prepend, append, after, before, others?
  3. The provided JS method(s) would pick these elements on page load, and reposition them according to the stated rules
  4. There would have to be some provision for single instance effects or multi instance effects (loops)
What do you think? Is this something worth pursuing? Anyone else interested, specially from the extension developers community?

Example of use (single instance):

Code: Select all

<div class="hidden-container" style="display: none;" dom-target="#viewprofile .panel .inner dl:last-child" dom-action="after">
<!-- This HTML markup will be moved after the selected element -->
<dl id="jxgothouse" class="right-box">
<dt class="profile-avatar">{PROFILE_JX_GOT_HOUSE_VALUE}</dt>
<dd><h3>{PROFILE_JX_GOT_HOUSE_VALUE_RAW}</h3>{PROFILE_JX_GOT_HOUSE_EXPLAIN}</dd>
</dl>
</div>
Example of use (multiple instance, loop):

Code: Select all

<div class="hidden-container" style="display: none;" dom-closest=".avatar-container" dom-target="a.avatar" dom-action="append">
<!-- This HTML markup will be appended to the current content of the selected element -->
<div class="house">{postrow.PROFILE_JX_GOT_HOUSE_VALUE}</div>
</div>
I have used examples from my Advanced Profile Fields extension to demonstrate intended use.

-javiexin

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: Proposal: new JS functionality to add for extensions

Post by brunoais »

I think you got a wrong idea.
At the extension points, it's true, you may only add HTML, js, etc...
BUT!
You may also replace the HTML files completely in your extension. The problem there, though... The unit is the file...

User avatar
javiexin
Registered User
Posts: 90
Joined: Thu Dec 22, 2011 10:04 am

Re: Proposal: new JS functionality to add for extensions

Post by javiexin »

brunoais wrote: Sat Jul 25, 2015 3:14 pmBUT!
You may also replace the HTML files completely in your extension. The problem there, though... The unit is the file...
But that defeats the whole purpose of extensions and events, to prevent against problems with future code changes... and to allow for multiple extensions to coexist.
The examples above are clear: they are for the user's profile (memberlist_view.html) and for the topic view (viewtopic_body.html).
If, for such small changes, I were to replace these files in my extension, that would create an enormous set of problems.
First of all, it would defeat any code changes or fixes that should be introduced in the future, either in the code that would be changed or, more importantly, in the code that would be unaffected.
And, in case a second extension decided to do the same, then... we have a MAJOR collision. Even with things that might be only remotely related (same page, but totally different sections of it.
Just to give you one such example: in the two major extensions that I have now proposed, Advanced Profile Fields and Advanced Polls, both require changes in viewtopic_body.html that require the use of JS at this point. If I were to replace viewtopic_body.html in both extensions, then there would be no way to use both together...

I am sorry, but I do not consider this an option.

However, I might use this "feature" of replacing whole templates in the future, if I finally tackle one of my projects, a generic "tabbed profile" with the ability to add tabs. That would definitely require to replace the whole memberlist_view.html template. But for a good reason, the whole presentation would be affected.

Thanks for the discussion!
-javiexin

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: Proposal: new JS functionality to add for extensions

Post by brunoais »

Yep you are right. The fact that the unit is the file doesn't help at all. It an easily cause extensions to start fighting eachother... Way more than if just using the events.
My main point is that extensions can also remove complete stuff altogether, not just add.
Other than that... yeah. It still has a lot of work to do before extensions can properly replace HTML markup being sent to the user.

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1904
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Proposal: new JS functionality to add for extensions

Post by DavidIQ »

Isn't this idea sort of extending this other idea?
https://area51.phpbb.com/phpBB/viewtopi ... 81&t=48146
(it isn't)

Wouldn't there be some page shifting problems with this approach? I would imagine things looking rather strange with all the moving/replacing happening after the page loads (jQuery is at the bottom of the page).
Image

User avatar
javiexin
Registered User
Posts: 90
Joined: Thu Dec 22, 2011 10:04 am

Re: Proposal: new JS functionality to add for extensions

Post by javiexin »

Possibly, but only on very slow connections or systems. Otherwise, it should be almost unnoticeable. The new code is hidden to begin with, and only shown after being moved to the right location. And while the existing components might have appeared before being replaced, there could be some kind of transition effect built in the JS script to minimize visual impact (although again, this should be minimal).

User avatar
brunoais
Registered User
Posts: 964
Joined: Fri Dec 18, 2009 3:55 pm

Re: Proposal: new JS functionality to add for extensions

Post by brunoais »

Personally, I don't mind as long as it shouldn't be something to forcefully being relied on when it could have been done differently.

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1904
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Proposal: new JS functionality to add for extensions

Post by DavidIQ »

javiexin wrote: Sun Jul 26, 2015 12:43 am Possibly, but only on very slow connections or systems. Otherwise, it should be almost unnoticeable. The new code is hidden to begin with, and only shown after being moved to the right location. And while the existing components might have appeared before being replaced, there could be some kind of transition effect built in the JS script to minimize visual impact (although again, this should be minimal).
Yeah I'm not seeing how one can reposition or replace things on a page via JavaScript without the user noticing, no matter the connection speed. It will take away from the user experience and make page positions jump around in the case the user has clicked on a link that loads a specific reply in a topic.

One simple example would be the moving of the user profiles to the left of the page. Under your proposal the page would load with the profiles on the right then shift them to the left once the new objects are loaded and the page finishes loading (because most JavaScript is loaded in the page footer). Then the user will have a confused look on his face...
Image

User avatar
JoshyPHP
Registered User
Posts: 381
Joined: Fri Jul 08, 2011 9:43 pm

Re: Proposal: new JS functionality to add for extensions

Post by JoshyPHP »

For what it's worth, in XenForo add-ons can apply template modifications via any number of calls to str_replace(), preg_replace() or a custom callback. When an add-on is installed, templates are recompiled with those modifications.

That seems good enough to cover just about any use case, and admins can toggle or change the order in which those modifications are applied in case of conflicts.

User avatar
javiexin
Registered User
Posts: 90
Joined: Thu Dec 22, 2011 10:04 am

Re: Proposal: new JS functionality to add for extensions

Post by javiexin »

This would be an interesting alternative. However, I would argue that it is much more complex than using JS: it almost would require a parser to do some small modifications, while in JS, the use of element selectors helps a lot, as you want to act at that level (vs the "string" level that preg_replace() uses).

Post Reply