Better "Preview" for templates in the CP

This is a very quick hack that enhaces the "Preview" feature in the Template Editor. Currently I find the preview to be useless, I can also see funky colors and odd tables.
With this hack, you will get a slightly better idea of how the template will really look like, because all the {replacement} variables will be replaced with their real value.

If you have Mutt's "Advanced Template Editor" hack installed, please follow the directions in this post:
https://vborg.vbsupport.ru/showthrea...&postid=253878
Thanks Mutt!

In template.php replace:

PHP Code:

function dotemplatejavascript() {

    $buttonextra="
<SCRIPT LANGUAGE=\"JavaScript\">
function displayHTML() {
var inf = document.name.template.value;
win = window.open(\", \", 'popup', 'toolbar = no, status = no, scrollbars=yes'); 


With this:

PHP Code:

function dotemplatejavascript() {
    global $DB_site, $bburl;

    $replacementsetid = 1;    ### Change me to use a different replacement set!

    $vars = $DB_site->query("
        SELECT findword,replaceword FROM replacement
        WHERE replacementsetid IN(-1,'$replacementsetid')
        ORDER BY replacementsetid DESC,replacementid DESC
    ");
    while ($var=$DB_site->fetch_array($vars)) {
        if ($var['findword']!="") {
            if ($var['findword'] == '{images[i][/i]folder}'
                or $var['findword'] == '{titl[i][/i]eimage}'
                or $var['findword'] == '{newthr[i][/i]eadimage}'
                or $var['findword'] == '{closed[i][/i]threadimage}') {
                $var['replaceword'] = $bburl . '/' . $var['replaceword'];
            }
            $varinf .= 'inf = replace(inf,"'.addslashes($var['findword']).'","'.addslashes($var['replaceword']).'");
';
        }
    }

    $buttonextra="
<SCRIPT LANGUAGE=\"JavaScript\">

function replace(string,text,by) {
// Replaces text with by in string
    var strLength = string.length, txtLength = text.length;
    if ((strLength == 0) || (txtLength == 0)) return string;

    var i = string.indexOf(text);
    if ((!i) && (text != string.substring(0,txtLength))) return string;
    if (i == -1) return string;

    var newstr = string.substring(0,i) + by;

    if (i+txtLength < strLength)
        newstr += replace(string.substring(i+txtLength,strLength),text,by);

    return newstr;
}

function displayHTML() {
var inf = document.name.template.value;
$varinf
win = window.open(\", \", 'popup', 'toolbar=no,status=no,scrollbars=yes,width=800,height=600'); 


You can change the $replacementsetid if you want:

	$replacementsetid = 1;	### Change me to use a different replacement set!

Enjoy!

[squawell]

NICE HACK!! squawell like this one too...thankz..FireFly..

[Xelation]

hmmm, I installed the first part yesterday... and today I did the upgrade for the images... everything is fine except the images still dont show up... you know what could be wrong?......




update, figured out my problem... your code says to search for the word { imagesfolder } (w/o the spaces) erm, I dont use that, I just do images/yaddayaddayadda.gif oh well, never the less its a good hack

[Mutt]

Nice job Firefly

When I first added the preview button, I really wanted it to replace the vars but counldn't think of any easy way to do it. I know it was ugly, but I found it better than nothing. It was just some code I found at a javscript site. this is 100% better. a huge improvement.

I read that it didn't work with the template editor. i'll figure it out and see where the conflict is.

thanks again. very cool

[Dark_Wizard]

Originally posted by Mutt
Nice job Firefly

When I first added the preview button, I really wanted it to replace the vars but counldn't think of any easy way to do it. I know it was ugly, but I found it better than nothing. It was just some code I found at a javscript site. this is 100% better. a huge improvement.

I read that it didn't work with the template editor. i'll figure it out and see where the conflict is.

thanks again. very cool

Thx Jeff...I was going to look into it but don't have the time right now...

[Mutt]

Fireflys hack is a huge improvement. everyone should install it. Great job!!

I was able to get it working with my advanced template editor. the changes are minimal. function dotemplatejavascript from the advanced template editor is slightly different than the original one. here is the slightly modified version that works with it.

THIS IS ONLY FOR PEOPLE USING THE ADVANCED TEMPLATE EDITOR!!!!!

here is the code to look for

PHP Code:

function dotemplatejavascript() {
global $template;
$buttonextra="
<SCRIPT LANGUAGE=\"JavaScript\">
function displayHTML(form) {
var inf = form.template.value; 


and replace it with this

PHP Code:

function dotemplatejavascript() {
global $DB_site, $bburl, $template;

    $replacementsetid = 1;    ### Change me to use a different replacement set!

    $vars = $DB_site->query("
        SELECT findword,replaceword FROM replacement
        WHERE replacementsetid IN(-1,'$replacementsetid')
        ORDER BY replacementsetid DESC,replacementid DESC
    ");
    while ($var=$DB_site->fetch_array($vars)) {
        if ($var['findword']!="") {
          if ($var['findword'] == '{images[i][/i]folder}'
            or $var['findword'] == '{titl[i][/i]eimage}'
            or $var['findword'] == '{newthr[i][/i]eadimage}'
            or $var['findword'] == '{closed[i][/i]threadimage}') {
                $var['replaceword'] = $bburl . '/' . $var['replaceword'];
            }
            $varinf .= 'inf = replace(inf,"'.addslashes($var['findword']).'","'.addslashes($var['replaceword']).'");
';
        }
    }

$buttonextra="
<SCRIPT LANGUAGE=\"JavaScript\">
function replace(string,text,by) {
// Replaces text with by in string
    var strLength = string.length, txtLength = text.length;
    if ((strLength == 0) || (txtLength == 0)) return string;

    var i = string.indexOf(text);
    if ((!i) && (text != string.substring(0,txtLength))) return string;
    if (i == -1) return string;

    var newstr = string.substring(0,i) + by;

    if (i+txtLength < strLength)
        newstr += replace(string.substring(i+txtLength,strLength),text,by);

    return newstr;
}

function displayHTML(form) {
var inf = form.template.value;
$varinf 


ONCE AGAIN, THIS IS ONLY FOR PEOPLE USING THE ADVANCED TEMPLATE EDITOR!!

[FWC]

Well done, Firefly!

[Admin]

Thanks Mutt! I edited your post BTW, you had replacement in the code.

[Neo]

Originally posted by FireFly
Making it eval() the $variables would be a much more complicated, because you need to set an "example url" for each template, then call it with the temp template. It's not very simple, trust me.

I'll try to fix the images not showing in a minute...

Hmm looks like something I might try to do, but I just might be insane

[Boofo]

Whenever I try to preview a template now, I get a Runtime Error. The error says "Line 324" "Object expected". The file is says it is in is the template.php. Here is the code and the line it stops at is the Preview line.

<input name='string' type='text' accesskey='t' size=20 onChange='n=0;'>
<input type='button' value='Find' accesskey='f' onClick='javascript:findInPage(document.name.string.value)'>&nbsp;&nbsp;&nbsp;
<input type='button' value='Preview' accesskey='p' onclick='javascript:displayHTML()'>
<input type='button' value='Copy' accesskey='c' onclick='javascript:HighlightAll()'></p></td>

I have the better template preview hack AND the images hack installed. Any ideas on this one, anybody?

[Illuvatar]

Thanks Firefly!!

And yet another usefull hack that was very easy to install!!

/me bows down!!