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

markus_petrux · Post by **markus_petrux** » Mon Jul 18, 2005 6:04 am

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).

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
//
```
Create a file named dynpreview.php and upload to the phpBB folder with the following contents:
Code: Select all
```
//
// Code removed from this post
//
```

afterlife_69 · Post by **afterlife_69** » Mon Jul 18, 2005 10:56 am

Demo anywhere?

DKing · Post by **DKing** » Mon Jul 18, 2005 12:19 pm

Yeah... I like demos!

Also, area51's down... SQL error

anyways... once it's up I'll read the little topic you posted up there...

markus_petrux · Post by **markus_petrux** » Mon Jul 18, 2005 5:57 pm

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?

markus_petrux · Post by **markus_petrux** » Tue Jul 19, 2005 1:10 am

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...

markus_petrux · Post by **markus_petrux** » Tue Jul 19, 2005 6:38 am

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.

afterlife_69 · Post by **afterlife_69** » Tue Jul 19, 2005 7:30 am

Wow... this kicks the **** out of ajax... its alot faster and handles just as well.

markus_petrux · Post by **markus_petrux** » Tue Jul 19, 2005 7:57 am

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).

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

). 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.

Swizec · Post by **Swizec** » Tue Jul 19, 2005 8:10 am

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 · Post by **markus_petrux** » Tue Jul 19, 2005 8:42 am

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

Swizec · Post by **Swizec** » Tue Jul 19, 2005 8:53 am

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 · Post by **markus_petrux** » Tue Jul 19, 2005 9:03 am

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.

Swizec · Post by **Swizec** » Tue Jul 19, 2005 9:17 am

oh yeah, forgot about that little detail, lol

markus_petrux · Post by **markus_petrux** » Tue Jul 19, 2005 5:12 pm

Hi all!

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

Entering beta stage....

markus_petrux · Post by **markus_petrux** » Wed Jul 20, 2005 8:21 am

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?

advertisements