[ABD] Async & Dynamic Post/Signature Preview with DHTML

A place for MOD Authors to post and receive feedback on MODs still in development. No MODs within this forum should be used within a live environment! No new topics are allowed in this forum.
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

IMPORTANT: MOD Development Forum rules

On February 1, 2009 this forum will be set to read only as part of retiring of phpBB2.
markus_petrux
Former Team Member
Posts: 1887
Joined: Wed Apr 23, 2003 7:11 am
Location: Girona, Catalunya (Spain)
Contact:

[ABD] Async & Dynamic Post/Signature Preview with DHTML

Post by markus_petrux »

MOD Title: Async & Dynamic Post/Signature Preview

MOD Description: This MOD modifies the posting page, so it allows asynchronous updates of the preview box by using javascript and a hidden IFrame. It also adds the ability to dynamically preview the user signature in the user profile and the manage user in ACP pages.

MOD Version: 1.0.2


I have abandoned further development of this MOD. If you wish to take it over, please me a PM. Thanks


MOD Download: async_dynamic_post_and_signature_preview_v1.0.2.zip
No need to register. If link fails, please use right click and save as. ;)


Demo Board:

Posting preview:
http://www.phpmix.com/phpBB2/posting.ph ... topic&f=37

Please, use the demo only to test the preview button. Please, do not submit the post. This is a hidden forum where no one is allowed to view/read.

Thanks :)

Signature preview:
http://www.phpmix.com/phpBB2/viewtopic.php?p=2252#2252
No need to register. The demo is in the post itself.


MOD Header:

Code: Select all

##############################################################
## MOD Title: Async & Dynamic Post/Signature Preview
## MOD Author: markus_petrux < nospam@phpmix.com > (Markus) http://www.phpmix.com
## MOD Description: This MOD modifies the posting page, so it allows asynchronous updates of the preview box
##                  by using javascript and a hidden IFrame. It also adds the ability to dynamically preview
##                  the user signature in the user profile and the manage user in ACP pages.
## MOD Version: 1.0.2
##
## Installation Level: (Easy)
## Installation Time: 5 Minutes
## Files To Edit: 3
##		templates/subSilver/posting_body.tpl
##		templates/subSilver/profile_add_body.tpl
##		templates/subSilver/admin/user_edit_body.tpl
## Included Files: 2
##		dynpreview.php
##		templates/dynpreview.js
##############################################################
## For Security Purposes, Please Check: http://www.phpbb.com/mods/ for the
## latest version of this MOD. Downloading this MOD from other sites could cause malicious code
## to enter into your phpBB Forum. As such, phpBB will not offer support for MOD's not offered
## in our MOD-Database, located at: http://www.phpbb.com/mods/
##############################################################
## Author Notes:
##
## - How does the Post Preview work?
##
##   Instead of a whole page refresh, it uses javascript to perform a request to a server-side
##   script through a hidden IFrame. BBCodes et all are parsed on the server and the HTML
##   representation of the message (note it does not send a whole HTML, but just the required
##   HTML code) is sent back to the hidden IFrame. When the onload event of this IFrame is fired,
##   the content of the preview box (a DIV element, aka layer) is dynamically updated.
##   When no reliable support is detected, it degrades gracefully, so the conventional method of
##   sending the post form to update the preview box is used.
##
## - How does the Signature Preview work?
##
##   A signature preview layer is dynamically updated whenever a change is detected. To avoid too
##   many update requests, the script waits until the signature remains unchanged for more than one
##   second, at which time the request to the server-side script is automatically launched (without
##   user intervention) and the parsed signature is displayed as soon as the server response comes.
##
## - Known Issues/Caveats:
##
##   AFAIK, once an HTML page is completely loaded there is no reliable way to dynamically inject
##   javascript to a layer (the preview box). If for whatever reason javascript was present in the
##   stream received from the server, it would be executed in the hidden IFrame itself, generating
##   errors or (at worst) unexpected results.
##   For this reason, if javascript has to be sent as part of the message, the server-side script
##   generates a full HTML page (with no menus, using same method used for the phpBB popups such
##   as the more emoticons or the search user windows) and the preview box will be directly shown
##   using the hidden IFrame (which becomes visible) instead of updating the layer.
##   Note javascript might be added to the message by some BBCodes such as the Hide BBCode, the
##   Select/Expand BBCodes, the HTML BBCode, etc.
##
## - MOD related comments:
##
##   1) This MOD has been tested with phpBB 2.0.16.
##   2) This MOD is EasyMOD friendly. Highly recommended.
##
##############################################################
## MOD History:
##
## 2005/07/21 - 1.0.2
##  - Added the ability to dynamically show signature when editing user profile.
##
## 2005/07/19 - 1.0.0
##  - Initial release
##
##############################################################
## Before Adding This MOD To Your Forum, You Should Back Up All Files Related To This MOD
##############################################################


~~~~~~~~~~ Original Post ~~~~~~~~~~

Hi!

I wanted to make an experiment to compare AJAX with DHTML capabilities. It all started here:
http://area51.phpbb.com/phpBB/viewtopic ... 889#122889

The idea here is to compare DHTML with one of the features of wGEric's AJAXed MOD, the "Inline post and subject editing when viewing a topic". If it worths (and this is why I posted this topic in this forum) I might continue working on it to fix bugs and submit to the MODs database.

If anyone wants to try it, here's how to. It only involves 2 steps (modify posting_body.tpl and upload a new script to the phpBB folder).
  1. OPEN: templates/subSilver/posting_body.tpl

    FIND (this is a partial match):

    Code: Select all

    <form
    BEFORE ADD:

    Code: Select all

    //
    // Code removed from this post
    //
  2. Create a file named dynpreview.php and upload to the phpBB folder with the following contents:

    Code: Select all

    //
    // Code removed from this post
    //
Last edited by markus_petrux on Thu Nov 17, 2005 9:00 am, edited 5 times in total.
EasyMOD Standards | MOD Template Actions | MODs in Development Rules
Useful information for MOD Authors | MOD Queue Stats | Search MODs
Write SQL/DDL portable to all SQL servers supported by phpBB!
Get EasyMOD 0.3.0! | Suport al phpBB en Català!
8)
afterlife_69
I've Been Banned!
Posts: 630
Joined: Tue Nov 30, 2004 10:35 am

Post by afterlife_69 »

Demo anywhere?
DKing
Registered User
Posts: 751
Joined: Sat Jul 03, 2004 8:38 pm

Post by DKing »

Yeah... I like demos! :P

Also, area51's down... SQL error :roll: anyways... once it's up I'll read the little topic you posted up there...
-DKing
Latest phpBB Version: 2.0.21
Search For a MOD: MOD Search
markus_petrux
Former Team Member
Posts: 1887
Joined: Wed Apr 23, 2003 7:11 am
Location: Girona, Catalunya (Spain)
Contact:

Post by markus_petrux »

Nope no demos, yet.

To see it in action is pretty easy, upload dynpreview.php to your phpBB folder and temporaly patch posting_body.tpl with the first code snippet.

ATM, it works so every second it checks if the textarea has been changed, if so a request to refresh the preview area is launched through a hidden IFrame. BBCodes et all are parsed on the server. When the onload event of the IFrame fires, the preview area is updated using the innerHTML attribute of the layer.

The preview button is hidden at start up. So, it is all automatic. I might change this though, since a viewport scroll happens on large posts (somehow annoying). I believe the workaroud would be to keep the preview button, so the user decides when to launch the process. Ideas here?
EasyMOD Standards | MOD Template Actions | MODs in Development Rules
Useful information for MOD Authors | MOD Queue Stats | Search MODs
Write SQL/DDL portable to all SQL servers supported by phpBB!
Get EasyMOD 0.3.0! | Suport al phpBB en Català!
8)
markus_petrux
Former Team Member
Posts: 1887
Joined: Wed Apr 23, 2003 7:11 am
Location: Girona, Catalunya (Spain)
Contact:

Post by markus_petrux »

Hi all.

I've been slightly changing the code. The server side script will support Gzip compression. As per the client side I'm moving all javascript to an external file. Also I don't like the auto refresh thingy. I'm adding a new "Preview" button, next to the subject field (more handy, no need to scroll down to see the normal preview button when poll options are displayed).

Anyone tried the above code? Oh well, I'll pack all stuff in MOD format and setup a demo or something...
EasyMOD Standards | MOD Template Actions | MODs in Development Rules
Useful information for MOD Authors | MOD Queue Stats | Search MODs
Write SQL/DDL portable to all SQL servers supported by phpBB!
Get EasyMOD 0.3.0! | Suport al phpBB en Català!
8)
markus_petrux
Former Team Member
Posts: 1887
Joined: Wed Apr 23, 2003 7:11 am
Location: Girona, Catalunya (Spain)
Contact:

Post by markus_petrux »

I have updated the topic starter to match the MOD development rules. Also, I've posted a link to a demo. :)

When installing the MOD on my board I found a problem when javascript is included as part of the post itself. This might happen with some BBCodes, such as the Select/Expand BBCodes MOD, etc.

It has not been easy to solve. I've finally coded the MOD so the IFrame itself is displayed instead of the Layer, but only when javascript is generated as part of the post. This even is detected by the server side script prior to generating the response. When javascript is detected a full page is generated without the menu on the header. In this case, the client side script shows the IFrame. Otherwise the server side script generates only the HTML required for the post itself and the client side script displays the response on a dynamic layer. It seems it all loads pretty fast.

Next step: I'll prepare the code in MOD format and post a link to download as soon as possible.
EasyMOD Standards | MOD Template Actions | MODs in Development Rules
Useful information for MOD Authors | MOD Queue Stats | Search MODs
Write SQL/DDL portable to all SQL servers supported by phpBB!
Get EasyMOD 0.3.0! | Suport al phpBB en Català!
8)
afterlife_69
I've Been Banned!
Posts: 630
Joined: Tue Nov 30, 2004 10:35 am

Post by afterlife_69 »

Wow... this kicks the **** out of ajax... its alot faster and handles just as well.
markus_petrux
Former Team Member
Posts: 1887
Joined: Wed Apr 23, 2003 7:11 am
Location: Girona, Catalunya (Spain)
Contact:

Post by markus_petrux »

Yep!

Well, I ran into another problem related to the way I'm passing parameters to the IFrame script on the server. I've been using GET variables (URL parameters) and what-not, I realised it is going to fill the server logs pretty fast and also, if the textarea is too big, it generates a 413 HTTP error (Request Entity Too Large). :o

I have made a temporary fix to the javascript code, so if the size of the textarea is bigger than 4096 bytes, the preview button submits the form (as always). I'll try to fix this properly though, as soon as I find the time. I'll use a form on the hidden IFrame, so the limit of POST variables is much higher (at least as higher as normal posting form :P ). Once this is done, I'll post a link to download the MOD. :)

Note: someone posted a comment related to page load speed. This is not related to this "feature", but something underlying on the demo. The posting form on my board in integrated with the portal page, so it contains much more stuff than normal phpBB posting page.
EasyMOD Standards | MOD Template Actions | MODs in Development Rules
Useful information for MOD Authors | MOD Queue Stats | Search MODs
Write SQL/DDL portable to all SQL servers supported by phpBB!
Get EasyMOD 0.3.0! | Suport al phpBB en Català!
8)
Swizec
Former Team Member
Posts: 1701
Joined: Mon Mar 10, 2003 9:42 pm
Location: Slovenia
Contact:

Post by Swizec »

you could always use some form of encryption algorithm so you encrypt enormous amounts of data to 30char

wow, I was even so nice as to find a pretty good api to do it :)
http://www.tonymarston.net/php-mysql/encryption.html
markus_petrux
Former Team Member
Posts: 1887
Joined: Wed Apr 23, 2003 7:11 am
Location: Girona, Catalunya (Spain)
Contact:

Post by markus_petrux »

Swizec: Encryption doesn't solve the problem (encrypting the post doesn't shrink its size). :(
markus_petrux wrote: I'll use a form on the hidden IFrame, so the limit of POST variables is much higher...

Well, the problem with using a form on the hidden frame is the browser history is altered. So, this is not a reasonable solution. hmm... aha! This is something that probably doesn't happen with AJAX.

Oh well, should I continue... or is it better to go the AJAX way, at least for the post preview.

FWIW, I could keep using GET variables. The only problem with GETs is it might make server logs bigger, and the mentioned URL size limit (HTTP error 413) which can be bypassed by sending the preview button to the server when the textarea is larger than say 4096 bytes. Actually, this is how the demo currently does.

What do do? Where to go :?:
EasyMOD Standards | MOD Template Actions | MODs in Development Rules
Useful information for MOD Authors | MOD Queue Stats | Search MODs
Write SQL/DDL portable to all SQL servers supported by phpBB!
Get EasyMOD 0.3.0! | Suport al phpBB en Català!
8)
Swizec
Former Team Member
Posts: 1701
Joined: Mon Mar 10, 2003 9:42 pm
Location: Slovenia
Contact:

Post by Swizec »

well the api I gave you encrypts a string of any length to the length you define
so fi I understand correctly you could be passing 30 bits or something instead of 5k bits...
markus_petrux
Former Team Member
Posts: 1887
Joined: Wed Apr 23, 2003 7:11 am
Location: Girona, Catalunya (Spain)
Contact:

Post by markus_petrux »

Unfortunatelly, this library is coded in PHP and we would need to compress the message in the client side (javascript) prior to sending the GET request.

If there was a little javascript library to compress strings. I guess we would reach the limit anyway.
EasyMOD Standards | MOD Template Actions | MODs in Development Rules
Useful information for MOD Authors | MOD Queue Stats | Search MODs
Write SQL/DDL portable to all SQL servers supported by phpBB!
Get EasyMOD 0.3.0! | Suport al phpBB en Català!
8)
Swizec
Former Team Member
Posts: 1701
Joined: Mon Mar 10, 2003 9:42 pm
Location: Slovenia
Contact:

Post by Swizec »

oh yeah, forgot about that little detail, lol
markus_petrux
Former Team Member
Posts: 1887
Joined: Wed Apr 23, 2003 7:11 am
Location: Girona, Catalunya (Spain)
Contact:

Post by markus_petrux »

Hi all!

I have updated the topic starter where a link to download the MOD can be found.

Entering beta stage.... :wink:
EasyMOD Standards | MOD Template Actions | MODs in Development Rules
Useful information for MOD Authors | MOD Queue Stats | Search MODs
Write SQL/DDL portable to all SQL servers supported by phpBB!
Get EasyMOD 0.3.0! | Suport al phpBB en Català!
8)
markus_petrux
Former Team Member
Posts: 1887
Joined: Wed Apr 23, 2003 7:11 am
Location: Girona, Catalunya (Spain)
Contact:

Post by markus_petrux »

hmmm... is this approach too bad? :?

Should I add AJAX related methods to this MOD to allow supported browsers to "instant preview" even for large posts?

Any other idea?
EasyMOD Standards | MOD Template Actions | MODs in Development Rules
Useful information for MOD Authors | MOD Queue Stats | Search MODs
Write SQL/DDL portable to all SQL servers supported by phpBB!
Get EasyMOD 0.3.0! | Suport al phpBB en Català!
8)
Locked

Return to “[2.0.x] MODs in Development”