What Mootools Components are packed in Joomla 1.5?

Joombla · Post by **Joombla** » Thu Jun 07, 2007 7:21 pm

I believe this is something that should be mentioned somewhere, is how mootools is packed in joomla 1.5, so those wanting use effects or ajax etc... know which files to use.

Ie, if I want to use fx.slide do I need to include fx.slide.js, fx.base.js, elementdimensions.js, elementevent.js, element.js .... etc.. all the way up to core, or is the whole mootools framework included?

Thanks,
Todd

Joombla · Post by **Joombla** » Thu Jun 07, 2007 7:24 pm

Should have done a bit more research first, after looking through mootools-uncompressed.js it looks like the whole framework is there.

Regards,
Todd

SineMacula · Post by **SineMacula** » Wed Jun 20, 2007 7:09 pm

Todd - would you happen to know how I could implement fx.slide effects in my content items?

I've looked at the mootools examples, and based on code there created a vertical.js file with this code:

Code: Select all

var mySlide = new Fx.Slide('vert1');
 
$('toggle').addEvent('click', function(e){
	e = new Event(e);
	mySlide.toggle();
	e.stop();
});
 

var mySlide2 = new Fx.Slide('vert2');
 
$('toggle2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.toggle();
	e.stop();
});
 

 
var mySlide3 = new Fx.Slide('vert3');
 
$('toggle3').addEvent('click', function(e){
	e = new Event(e);
	mySlide3.toggle();
	e.stop();
});
 

var mySlide4 = new Fx.Slide('vert4');
 
$('toggle4').addEvent('click', function(e){
	e = new Event(e);
	mySlide4.toggle();
	e.stop();
});

 
var mySlide5 = new Fx.Slide('vert5');
 
$('toggle5').addEvent('click', function(e){
	e = new Event(e);
	mySlide5.toggle();
	e.stop();
});
 

var mySlide6 = new Fx.Slide('vert6');
 
$('toggle6').addEvent('click', function(e){
	e = new Event(e);
	mySlide6.toggle();
	e.stop();
});

And added a call to that file in my template's index.php head.

Then in a content item I used the html code I found on the mootools demo area in a content item:

Code: Select all

<a id="toggle" href="#" name="toggle">toggle</a>
<div id="vert1">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
	et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
	aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
	qui officia deserunt mollit anim id est laborum.
</div>

But it's not doing anything.

Any ideas?

Aikidoka · Post by **Aikidoka** » Thu Jun 28, 2007 9:46 pm

I am having trouble with this also. I want something like JPaneSliders, but I want it to be a panel that slides in and out. Not a pane that changes the panel that is displayed. According to the webdeveloper add-in to Firefox it is saying that $('toggle') is not a function. Looking into it.

Aikidoka · Post by **Aikidoka** » Thu Jun 28, 2007 11:03 pm

I just did some testing. If I only include the mootools.js from Joomla into a file, the demo works. However if I try to put it into a component I am told that "$("slidein").addEvent is not a function" by the web developer add-in to Firefox. Hopefully I can test further and find a cause.

EDIT: Ok, my issue was that if the element matching the name of the js function does not exist, an error is thrown that it is not a function. Don't think that will help your issue.

SineMacula · Post by **SineMacula** » Thu Jul 19, 2007 8:54 pm

Just curious if anyone's come up with a way to get the mootools stuff (like fx.slide) working within content items.

Aikidoka · Post by **Aikidoka** » Thu Jul 19, 2007 9:44 pm

What do you mean come up with a way? I didn't have to do anything special with that slide demo. I just had to make sure the element actually existed in the page. In fact I'm using an altered version of http://pr0digy.com/mootools/mootools-slide-effect/ in a component.

SineMacula · Post by **SineMacula** » Thu Jul 19, 2007 9:54 pm

What I'm wanting to do is have the slide effect in an article (sorry, I said "content item" which isn't very specific).

I want to be able to write an article, and have "hidden" content in the article that "slides" out when a heading or question is clicked.

One option would be to find someone who could convert the Tabs & Slides mambot into a Joomla 1.5 plugin... but I thought that since mootools is included in Joomla, perhaps there might be an easy way to just tap into that, since the function is already there.

What I don't know is how to get that function to work in an article... and my previous attempts failed.

Aikidoka · Post by **Aikidoka** » Fri Jul 20, 2007 12:28 am

Yeah, that is over my skills at the moment. Unless you can view the backend html of the article and add the script. I was disappointed to find that JSlider only slide to change what you are looking at with multiple options. I, like you, wanted to be able to have all closed or all open. Perhaps another class that allows just one item that can be opened or closed would be useful. Especially as mambot.

ghazal · Post by **ghazal** » Fri Jul 20, 2007 10:40 am

A plugin that adds a php file in content should/could do the trick.
Say rd_addphp from run-digital.com for Joomla 1.5
http://www.run-digital.com/download/plugins.html

Put the usual suspects in tag of the php file you are creating :

Make sure all paths (js files, images, etc..) are relative to the root index.php of your Joomla folder
if needed.
Insert in content :{rdaddphp file=myphpfiles/my_file.php}
And most of the times it works.
Be careful because the CSS of your template apply to this file.
Also, there could be conflicts between this implementation and any
other component or module using a mootools library.

ianmac · Post by **ianmac** » Fri Jul 20, 2007 12:37 pm

Note that the recommended way to load the mootools library is to use:

JHTML::_( 'behavior.mootools' );

Ian

Aikidoka · Post by **Aikidoka** » Fri Jul 20, 2007 3:37 pm

ianmac wrote: Note that the recommended way to load the mootools library is to use:

JHTML::_( 'behavior.mootools' );

Ian

It isn't always getting loaded? I thought I always saw mootools.js in the document source from the browser. Or is this a recent SVN change?

ianmac · Post by **ianmac** » Fri Jul 20, 2007 4:15 pm

In the backend, it does always get loaded. It does not in the frontend. This was recently changed in the SVN.

Ian

SineMacula · Post by **SineMacula** » Fri Jul 20, 2007 4:18 pm

When I added

JHTML::_( 'behavior.mootools' );

to a php file that I then added using rdaddphp, I got an error saying:

JHTMLBehavior::mootools not supported.

Also, other than adding that call to load mootools via a php file and rdaddphp, I'm not sure how adding a php file within the article helps... what would I put in the php file?

I've got a call to the js file I did (see above) for the fx.Slide function in my template's index.php file, and the rest is html that I can put right in the article, what else should I need?

I'm sure I must be missing something.

Aikidoka · Post by **Aikidoka** » Fri Jul 20, 2007 4:19 pm

ianmac wrote: In the backend, it does always get loaded. It does not in the frontend. This was recently changed in the SVN.

Ian

Oh. Then I shall bookmark this as I'll forget when it matters!

SineMacula · Post by **SineMacula** » Fri Jul 20, 2007 4:50 pm

SineMacula wrote: When I added

JHTML::_( 'behavior.mootools' );

to a php file that I then added using rdaddphp, I got an error saying:

JHTMLBehavior::mootools not supported.

ianmac wrote: In the backend, it does always get loaded. It does not in the frontend. This was recently changed in the SVN.

Ian

It must have been recent - I was using a nightly from July 1. Just upgraded, and now the error is gone.

That said, whatever I'm doing isn't working for getting the fx.slide going.

ianmac · Post by **ianmac** » Fri Jul 20, 2007 5:12 pm

Fairly recently... it happened on Monday

How exactly are you going about your slider thingy? I can try to help if you want, but I need more info on what you've tried.

Ian

SineMacula · Post by **SineMacula** » Fri Jul 20, 2007 5:23 pm

Thanks Ian...

In the head section of my template's index.php file I've got:

Code: Select all

<script scr="templates/<?php echo $this->template ?>/js/fxslide.js" type="text/javascript"></script>

The fxslide.js file is basically slightly modified code that I found on the mootools site demo area:

Code: Select all

//-vertical
 
var mySlide = new Fx.Slide('vert1');
 
$('toggle').addEvent('click', function(e){
	e = new Event(e);
	mySlide.toggle();
	e.stop();
});
 

var mySlide2 = new Fx.Slide('vert2');
 
$('toggle2').addEvent('click', function(e){
	e = new Event(e);
	mySlide2.toggle();
	e.stop();
});
 

 
var mySlide3 = new Fx.Slide('vert3');
 
$('toggle3').addEvent('click', function(e){
	e = new Event(e);
	mySlide3.toggle();
	e.stop();
});
 

var mySlide4 = new Fx.Slide('vert4');
 
$('toggle4').addEvent('click', function(e){
	e = new Event(e);
	mySlide4.toggle();
	e.stop();
});

 
var mySlide5 = new Fx.Slide('vert5');
 
$('toggle5').addEvent('click', function(e){
	e = new Event(e);
	mySlide5.toggle();
	e.stop();
});
 

var mySlide6 = new Fx.Slide('vert6');
 
$('toggle6').addEvent('click', function(e){
	e = new Event(e);
	mySlide6.toggle();
	e.stop();
});

Then, in my article, I've got this (also basically taken from the mootools site demo):

Code: Select all

<a id="toggle" href="#" name="toggle">toggle</a>
<div id="vert1">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
	et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
	aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
	qui officia deserunt mollit anim id est laborum.
</div>
<a id="toggle2" href="#" name="toggle2">toggle</a>
<div id="vert2">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
	et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
	aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
	qui officia deserunt mollit anim id est laborum.
</div>

And using rdaddphp, I've got this:

Code: Select all

{rdaddphp file=myphpfiles/load_mootools.php

And load_mootools.php is just this:

Code: Select all

<?php JHTML::_('behavior.mootools'); ?>

So, that's where it stands now... and it is not functioning.

Any suggestions of things to try would be greatly appreciated!

ghazal · Post by **ghazal** » Fri Jul 20, 2007 5:59 pm

Sorry I dont know about Ianmac's proposal ie : JHTML::_( 'behavior.mootools' );
But if I understand your requirements:
implementation of the class Fx.Slide in Joomla 1.5 content
I just had it working with rdaddphp

I took this example straight away from mootools demos : http://demos.mootools.net/Fx.Slide
and added the file below with rdaddphp. Mootools file is inside FX_SLIDE folder for this example.
Not sure about security though.

In article content:
{rdaddphp file=FX_SLIDE/fx_slide.html}

Try this as it is. It works here.

Code: Select all

<script type="text/javascript" src="FX_SLIDE/mootools.v1.11.js"></script>
<style type="text/css" media="screen">
	#test {
		background: #222;
		color: #fff;
		padding: 10px;
		margin: 20px;
		border: 10px solid pink;
	}
	#test2 {
		background: #222;
		color: #fff;
		padding: 10px;
		margin: 20px;
		border: 10px solid pink;
	}
</style>

<script type="text/javascript">
		window.addEvent('domready', function(){
			//-vertical			
			var mySlide = new Fx.Slide('test');			
			$('slidein').addEvent('click', function(e){
				e = new Event(e);
				mySlide.slideIn();
				e.stop();
			});			
			$('slideout').addEvent('click', function(e){
				e = new Event(e);
				mySlide.slideOut();
				e.stop();
			});			
			$('toggle').addEvent('click', function(e){
				e = new Event(e);
				mySlide.toggle();
				e.stop();
			});
			
			$('hide').addEvent('click', function(e){
				e = new Event(e);
				mySlide.hide();
				e.stop();
			});			
			//--horizontal			
			var mySlide2 = new Fx.Slide('test2', {mode: 'horizontal'});			
			$('slidein2').addEvent('click', function(e){
				e = new Event(e);
				mySlide2.slideIn();
				e.stop();
			});			
			$('slideout2').addEvent('click', function(e){
				e = new Event(e);
				mySlide2.slideOut();
				e.stop();
			});			
			$('toggle2').addEvent('click', function(e){
				e = new Event(e);
				mySlide2.toggle();
				e.stop();
			});			
			$('hide2').addEvent('click', function(e){
				e = new Event(e);
				mySlide2.hide();
				e.stop();
			});
		}); 
	</script>

</head>
	<h3 class="section">
		Fx.Slide Vertical
	</h3><a id="slideout" href="#" name="slideout">slideout</a> | <a id="slidein" href="#" name=
	"slidein">slidein</a> | <a id="toggle" href="#" name="toggle">toggle</a> | <a id="hide" href="#" name=
	"hide">hide</a>
	<div id="test">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
		et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
		aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
		qui officia deserunt mollit anim id est laborum.
	</div>
	<h3 class="section">
		Fx.Slide Horizontal
	</h3><a id="slideout2" href="#" name="slideout2">slideout</a> | <a id="slidein2" href="#" name=
	"slidein2">slidein</a> | <a id="toggle2" href="#" name="toggle2">toggle</a> | <a id="hide2" href="#" name=
	"hide2">hide</a>
	<div id="test2">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
		et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
		aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
		qui officia deserunt mollit anim id est laborum.
	</div>

ianmac · Post by **ianmac** » Fri Jul 20, 2007 6:39 pm

So what is happening when you test it out?

Do you have SEF on?

It could be related to the href="#" - I had trouble with that.

Anyhow, I played with it a bit and I created a plugin. You can try it out if you want.

Instructions:
Install plugin.
Publish plugin.

In your article, do something like:
{beginslide id="sliderid" title="text that gets clicked on"}
This is the hidden text that should appear when the title is clicked on.
{endslide}

If you want to style this, the class for the title is slideTitle and the class for the box is slideBox. You can specify a path to a CSS file in the plugin parameters, which if set, will be loaded.

[EDIT: Please go to http://extensions.joomla.org/component/ ... Itemid,35/ to download the plugin.]

Ian

SineMacula · Post by **SineMacula** » Fri Jul 20, 2007 7:04 pm

Wow Ian, thanks!!! That's perfect!!

I did try ghazal's method, and I did manage to get it working - so thanks, ghazal, for your input also.

I do have SEF on, so I guess that may have interfered with my earlier, failed attempts.

Anyhow, the plugin is working perfectly, and nice and easy, and Joomla-esque to use!

Thanks again!

SineMacula · Post by **SineMacula** » Fri Jul 20, 2007 7:23 pm

Quick question:

I'm working on styling - for the slide elements, and it's mostly going well... but I'm wondering if there's a way to make it so the slideTitle doesn't have the hover/click underline show up the way it does for my other links. I want to keep the underline for other links, but would prefer not to have it for the slideTitle (I've added an arrow image to the slideTitle style instead).

I thought adding an a.slideTitle statement to my css might work, but it seems I was wrong.

ianmac · Post by **ianmac** » Fri Jul 20, 2007 7:26 pm

Try it without the a

Just do a .slideTitle (the text is inside of a span)

Ian

ianmac · Post by **ianmac** » Fri Jul 20, 2007 7:40 pm

okay... I just updated it and added a class to the links - slideTitleLink

Ian

SineMacula · Post by **SineMacula** » Fri Jul 20, 2007 7:51 pm

ianmac wrote: okay... I just updated it and added a class to the links - slideTitleLink

Ian

Cool... got it working now with a.slideTitleLink

Thanks again!

ianmac · Post by **ianmac** » Fri Jul 20, 2007 7:56 pm

Your welcome!

Let me know if you have further feedback that I might use to improve it.

Ian

SineMacula · Post by **SineMacula** » Sat Jul 21, 2007 12:14 am

ianmac wrote: Your welcome!

Let me know if you have further feedback that I might use to improve it.

Ian

It's very cool to learn that I can use

Code: Select all

templates/<?php echo $this->template ?>/css/<?php echo $this->params->get('colorVariation'); ?>.css

in the css path parameter! Now I've got it set with slight differences for each of the template color options.

One thing I've noticed - when using TinyMCE, you have to be careful about what kind of element is getting put in the html code when you hit "Return" -- if it puts in divs, it "escapes" the span and the text won't be in the slideBox, and therefore won't be hidden or formatted for the slideBox.

For example, when I type it in with a return after the {beginslide...} - like this:

{beginslide id="sliderid" title="text that gets clicked on"}
This is the hidden text that should appear when the title is clicked on.
{endslide}

Then the "hidden" text isn't hidden upon loading the page - and then clicking on the slideTitle will slide out some empty space above the text.

It seems that hitting "return" puts in a div and knocks everything after the first line out of the slideBox.

So this:

{beginslide id="sliderid" title="text that gets clicked on"}This is the hidden text that should appear when the title is clicked on.
This is a new line.
This is another new line.

And a new paragraph goes here.
{endslide}

Results in the the first line ("This is the hidden text...") being hidden and formatted according to the css for slideBox, but the rest of the lines are visible, and not formatted as slideBox.

If I go into the html and change the those divs to p elements, then it works fine.

I checked the TinyMCE plugin parameters, and it shows that new lines should be p elements - but it appears to be putting divs in there. I also tried with shift+return, and that put br elements in, and it works fine with those.

Is this a common issue when using TinyMCE (or other wysiwyg editors)?

Is there a way around it so that one can type as one might "normally" do, and not get divs in there messing it up?

ghazal · Post by **ghazal** » Mon Jul 23, 2007 11:50 am

@ian
very interesting plugin you whipped up. Thks.
Can I post it on the french forum as it is?

As I am trying to learn how to adapt simple mambots to plugins for J!1.5, it'll help greatly.
BTW, documentation about this is scarce. And ...Yes, I read the Joomla! Development Wiki.

@SineMacula
You're welcome. But Ian's one is much more elegant, of course.
I just want to add that my goal is to experiment several JS framework (jQuery, Prototype, etc...) within one Joomla site and avoid conflict between these (specially jQuery and Prototype ). So I am trying one-shot solutions with plugins aiming at publishing php/html in content.

ianmac · Post by **ianmac** » Mon Jul 23, 2007 12:05 pm

Bonjour Ghazal!

The extension can be downloaded from:
http://extensions.joomla.org/component/ ... Itemid,35/

We are happy to take submissions for documentation if you would like to contribute

There is a lot of documentation to write and at this point very few people who have been willing to write. Plugins aren't any more complicated than mambots. All you have to do is follow the naming convention for your class so they get autoloaded and then inside your class, write a function for each event that you want to handle.

Feel free to post questions here and I will help out as able.

Ian

ghazal · Post by **ghazal** » Mon Jul 23, 2007 1:26 pm

ianmac wrote: We are happy to take submissions for documentation if you would like to contribute

Hmmm..I am very flattered but I might not be up to the the task.

I am just a fairly basic joomla fan/user.
Documentation is always a sore spot, but I'll always opt for good code rather than extensive documentation.
And I know that's what you Joomla guys have been focusing on. For everyone's good.

Well, now, I have work to do. Mapya is waiting ! Miam.

The Joomla! Forum™

What Mootools Components are packed in Joomla 1.5?

What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?

Re: What Mootools Components are packed in Joomla 1.5?