ThickBox snippet ?

20 Posts

DATA_OK Reply #1, 17 years, 7 months ago

Hello,

for some days I found the ThickBox java applet. jquery.com/demo/thickbox/

And I like the option to put a html page in the "popup" box like the demonstrated login screen.

now I´m trying to create a snippet for that but as I´m new to modx and snippets I have a couple of problems
and as well I think I have some missing know how ;-)

So what have I done so far?

I created a normal test page to show that everything is working fine as it should: Tech Demo

In modx I have created a snippet description:

<?php
////// Setting(s) 
/////////////////////////////////////////////////////////////////////////////////
//
//
// Path where ThickBox is installed
define(THICKBOX_PATH, "assets/snippets/thickbox3.1/");
//
//include snippet file
$output = "";
include($modx->config['base_path'].THICKBOX_PATH.'thickbox.php');
//
///////////////////////////////////////////////////////////////////////////////////////////////////

return $output;
?>

and this is my thickbox.php:

<?php
//////////////////////////////////////////////////////////////////////////////////////////////////
//
// Logic code for ThickBox. Default parameter values can be changed in this file.
// Do not touch anything unless you know what you are doing.
//
//////////////////////////////////////////////////////////////////////////////////////////////////

global $modx;

if (!defined ('THICKBOX_PATH')){
        $output = 'ThickBox setup path is not defined, please check the snippet code in MODx manager.';
        return;
}

///////////////////////////////////////////////////////////////////////////////////////////////////
// CSS integration

$thickbox_css_link = '<link rel="stylesheet" href="'. $modx->config['base_url'] . THICKBOX_PATH . 'thickbox.css" type="text/css" media="screen" />';

$modx->regClientCSS($thickbox_css_link);


///////////////////////////////////////////////////////////////////////////////////////////////////
// js script integration
$thickbox_js_1 = $modx->config['base_url'] . THICKBOX_PATH . 'jquery-latest.pack.js';
$thickbox_js_2 = $modx->config['base_url'] . THICKBOX_PATH . 'thickbox-compressed.js';

$output = 'HALLO';

$modx->regClientStartupScript($thickbox_js_1);
$modx->regClientStartupScript($thickbox_js_2);


///////////////////////////////////////////////////////////////////////////////////////////////////
// Default values (can be overridden in the snippet call),
// No need to edit unless you know what you're doing!
//
// here a example:
// ^$mgconfig['debug'] = (isset($debug)) ? $debug : 0; //[0 | 1] display debug trace
$mgconfig['embedtype'] = (isset($embedtype)) ? $embedtype : "thickbox"; // [thickbox] at the moment the only one
$mgconfig['title'] = (isset($title)) ? $title : "Please Sign In"; // [ text ]
$mgconfig['page'] = (isset($page)) ? $page : "assets/snippets/thickbox3.1/ajaxLogin.html"; // [ text ]
$mgconfig['height'] = (isset($height)) ? $height : "85"; // [ height of box ]
$mgconfig['width'] = (isset($width)) ? $width : "250"; // [ width of box ]
$mgconfig['modal'] = (isset($modal)) ? $modal : "true"; // [ true | false ]
$mgconfig['buttontxt'] = (isset($buttontxt)) ? $buttontxt : "Login"; // [ text ]


///////////////////////////////////////////////////////////////////////////////////////////////////
// Build the link to call the html page, example call:
// <a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
<a href="$page?$height&$width&$modal" class="$embedtype" title="$title">$buttontxt</a> ;


$output =  $tpl->Render();


return;
?>

I have a test page in my modx without any css to reduce failure sources:

Testseite fürs Login mit snippet ohne css:

[[ThickBox &embedtype="thickbox" &title="Please Sign In" &page="assets/snippets/thickbox3.1/ajaxLogin.html" &height="85" &width="250" &modal="true" &buttontxt="Login"]]

and at last my test page to display ajaxLogin.html:
[later shoudl be here the normal modx login for my page ! with a button in the header login or logout !]

<table border="0" cellpadding="3" cellspacing="3" style="margin:0 auto;" >
  <tr>
    <td><label>Username</label>
      :</td>
    <td><input name="" type="text" size="20"></td>
  </tr>
  <tr>
    <td><label>Password</label>

      :</td>
    <td><input name="" type="text" size="20"></td>
  </tr>
  <tr align="right">
    <td colspan="2"><input type="submit" id="Login" value="  Login  "> <input type="submit" id="Login" value="  Cancel  " onclick="tb_remove()"></td>
    </tr>
</table>

It would be nice if somebody can help my as, as I have told, have less experiance with modx snippets.

thanks

-------
if you have no idea, just shut up

20 Posts

DATA_OK Reply #2, 17 years, 7 months ago

One of my problems is e.g. that I can´t see the included js files on the loaded page !
[I use firefox with firebug ... and I can´t see them in the html code].

any idee?

thanks

-------
if you have no idea, just shut up

4,205 Posts

dev_cw Reply #3, 17 years, 7 months ago

It is working for me. I see this in the source of the test page and the modal window loads (without the fading out background though):

<html>
  <script type="text/javascript" src="jquery-latest.pack.js"></script>
  <script type="text/javascript" src="thickbox-compressed.js"></script>
 
  <style type="text/css" media="all">@import "thickbox.css";</style> 
 <head>
  <title>TESTSEITE</title>
 </head>
 
 <body>

  <a href="test.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>  
 </body>
</html>

Youre scriting looks correct. maybe you need to clear your MODx cache. You should call the snippet uncached [! !] rather than [[ ]]. Let us know how this works, it looks like a great idea.

BTW - ThickBox has a conflict with QuickEdit, so if you are logged into the manager it will not work and the way it is scripted noConflict() mode doesn’t help. To fix this you need to edit all the $ in the the TB script and turn them into jQuery. I have done this before but don’t remember the details.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

20 Posts

DATA_OK Reply #4, 17 years, 7 months ago

Hello dev_cw,

the link which I had postet with "Tech demo" is just a blank page without modx integration to show what the result should be and that it works in principle. That page also works fine for me ;-)

The pages where I´m working for the modx integration are:

test page for login with snippet with css

test page for login with snippet without css

but that pages do nothing for me sad

Thanks for the hint with QuickEdit. I have disabled that plugin as I had also problems with MaxiGallery and I got great support from doze !

-------
if you have no idea, just shut up

4,205 Posts

dev_cw Reply #5, 17 years, 7 months ago

$output =  $tpl->Render();

What is this? It is not a standard MODx api function. Actually there are a few issues in your snippet. I will take a look and see if i can figure it out, my brain is jelly at the moment.

Also that templates uses MooTools so there may still be a conflict with jQuery going on.

Edit: OK, I see what you have going here, you borrowed some code from MaxiGallery but it is not doing what you expect. Actually you made it more complicated than it needs to be.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

4,205 Posts

dev_cw Reply #6, 17 years, 7 months ago

OK here is the updated version.

In the snippet (manager) code i only changed the dir name removing the 3.1 (personal preference, not required:)

<?php
////// Setting(s) 
/////////////////////////////////////////////////////////////////////////////////
//
//
// Path where ThickBox is installed
define(THICKBOX_PATH, "assets/snippets/thickbox/");
//
//include snippet file
$output = "";
include($modx->config['base_path'].THICKBOX_PATH.'thickbox.php');
//
///////////////////////////////////////////////////////////////////////////////////////////////////

return $output;
?>

And the include file has a few changes, mostly cleaning up and fixing some syntax problems:

<?php
//////////////////////////////////////////////////////////////////////////////////////////////////
//
// Logic code for ThickBox. Default parameter values can be changed in this file.
// Do not touch anything unless you know what you are doing.
//
//////////////////////////////////////////////////////////////////////////////////////////////////

global $modx;

if (!defined ('THICKBOX_PATH')){
        $output = 'ThickBox setup path is not defined, please check the snippet code in MODx manager.';
        return;
}

///////////////////////////////////////////////////////////////////////////////////////////////////
// CSS integration

$thickbox_css_link = '<link rel="stylesheet" href="'. $modx->config['base_url'] . THICKBOX_PATH . 'thickbox.css" type="text/css" media="screen" />';

$modx->regClientCSS($thickbox_css_link);


///////////////////////////////////////////////////////////////////////////////////////////////////
// js script integration
$thickbox_js_1 = $modx->config['base_url'] . THICKBOX_PATH . 'jquery-latest.pack.js';
$thickbox_js_2 = $modx->config['base_url'] . THICKBOX_PATH . 'thickbox-compressed.js';

// $output = 'HALLO';

$modx->regClientStartupScript($thickbox_js_1);
$modx->regClientStartupScript($thickbox_js_2);


///////////////////////////////////////////////////////////////////////////////////////////////////
// Default values (can be overridden in the snippet call),
// No need to edit unless you know what you're doing!
//
// here a example:
// ^$mgconfig['debug'] = (isset($debug)) ? $debug : 0; //[0 | 1] display debug trace
$embedtype = (isset($embedtype)) ? $embedtype : "thickbox"; // [thickbox] at the moment the only one
$title = (isset($title)) ? $title : "Please Sign In"; // [ text ]
$page = (isset($page)) ? $page : "assets/snippets/thickbox/ajaxLogin.html"; // [ text ]
$height = (isset($height)) ? $height : "85"; // [ height of box ]
$width = (isset($width)) ? $width : "250"; // [ width of box ]
$modal = (isset($modal)) ? $modal : "true"; // [ true | false ]
$buttontxt = (isset($buttontxt)) ? $buttontxt : "Login"; // [ text ]


///////////////////////////////////////////////////////////////////////////////////////////////////
// Build the link to call the html page, example call:
// <a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a>
$output = '<a href="'.$page.'?'.$height.'&'.$width.'&'.$modal.'" class="'.$embedtype.'" title="'.$title.'">'.$buttontxt.'</a>';


?>

See if this works.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

20 Posts

DATA_OK Reply #7, 17 years, 7 months ago

Quote from: dev_cw at Feb 24, 2009, 12:38 PM

$output =  $tpl->Render();
What is this? It is not a standard MODx api function. Actually there are a few issues in your snippet. I will take a look and see if i can figure it out, my brain is jelly at the moment.

Also that templates uses MooTools so there may still be a conflict with jQuery going on.

Edit: OK, I see what you have going here, you borrowed some code from MaxiGallery but it is not doing what you expect. Actually you made it more complicated than it needs to be.

OK you got me ;-)

As I´m a noob to snippet programming in modx I have looked into MaxiGallery how doze made it and tried to learn from him and get it working.

I updated my script with your changes but it don´t work. I just can not see the included js files !

-------
if you have no idea, just shut up

4,205 Posts

dev_cw Reply #8, 17 years, 7 months ago

Did you update the folder name removing the 3.1? I changed the path to use simply thickbox (all lower case) removing the numbers to make it easier to update. Works here in my test.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

20 Posts

DATA_OK Reply #9, 17 years, 7 months ago

I don´t get it working.

I changed the folder from thickbox3.1 to thickbox and updated the snippet, the snippet call on my page and also checked all files in my thickbox folder. I think I updated everything.

But still it´s not working.

I can´t see anything from the snippet ! [like including the js files or so]

Did you set up a own test environment?

EDIT:

OK I found my fault. I had a wrong snippet call. I have forgotten the ? behind the snippet name ! I now corrected this and it works as it should! That´s really great. Thanks for help so far.

Unfortunately the link which is generated looks like that:

<a class="" in="" sign="" please="" title="" thickbox="" true="" &="" 250="" 85="" ?="" ajaxlogin.html="" snippets="" assets="" href="">"Login"</a>

EDIT 2:

OK I found my fault again ! It was again the snippet call. Here is the correct call and it works very fine:

[!ThickBox? &embedtype=`thickbox` &title=`Please Sign In` &page=`assets/snippets/thickbox/ajaxLogin.html` &height=`85` &width=`250` &modal=`true` &buttontxt=`Login`!]

-------
if you have no idea, just shut up

20 Posts

DATA_OK Reply #10, 17 years, 7 months ago

OK as this is working fine now I want to put in the standard modx login / logout function into that box ! A dynamic button login / logout should be shown.

I will test a bit and give you feedback about my result.

I will start with that code in ajaxLogin.html: [ I took this from the weblogin snippet ! ]

But maybei it will be easier to use that snippet, or ?

<!-- #declare:separator <hr> -->
<!-- login form section-->
<form method="post" name="loginfrm" action="[+action+]" style="margin: 0px; padding: 0px;">
<input type="hidden" value="[+rememberme+]" name="rememberme">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><b>User:</b></td>
    <td><input type="text" name="username" tabindex="1" onkeypress="return webLoginEnter(document.loginfrm.password);" size="8" style="width: 150px;" value="[+username+]" /></td>
  </tr>
  <tr>
    <td><b>Password:</b></td>
    <td><input type="password" name="password" tabindex="2" onkeypress="return webLoginEnter(document.loginfrm.cmdweblogin);" style="width: 150px;" value="" /></td>
  </tr>
  <tr>
    <td><label for="chkbox" style="cursor:pointer">Remember me:  </label></td>
    <td>
    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="top"><input type="checkbox" id="chkbox" name="chkbox" tabindex="4" size="1" value="" [+checkbox+] onclick="webLoginCheckRemember()" /></td>
        <td align="right">
        <input type="submit" value="[+logintext+]" name="cmdweblogin" /></td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td colspan="2"><a href="#" onclick="webLoginShowForm(2);return false;">Forget Password?</a></td>
  </tr>
</table>
</td>
</tr>
</table>
</form>
<hr>
<!-- log out hyperlink section -->
<a href='[+action+]'>[+logouttext+]</a>
<hr>
<!-- Password reminder form section -->
<form name="loginreminder" method="post" action="[+action+]" style="margin: 0px; padding: 0px;">
<input type="hidden" name="txtpwdrem" value="0" />
<table border="0">
    <tr>
      <td>Enter the email address of your account <br />below to receive your password:</td>
    </tr>
    <tr>
      <td><input type="text" name="txtwebemail" size="24" /></td>
    </tr>
    <tr>
      <td align="right"><input type="submit" value="Submit" name="cmdweblogin" />
      <input type="reset" value="Cancel" name="cmdcancel" onclick="webLoginShowForm(1);" /></td>
    </tr>
  </table>
</form>

-------
if you have no idea, just shut up