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:
- Add a hidden HTML container with the new HTML code that is going to be used
- 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 possibledom-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?
- The provided JS method(s) would pick these elements on page load, and reposition them according to the stated rules
- There would have to be some provision for single instance effects or multi instance effects (loops)
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>
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>
-javiexin