Themes

 
 
Picture of Vijay N
Adding YUI javascripts to moodle themes pages
 

Hi All,

 

Moodle claims to want everyone to use YUI for all javascripting on sites. I am yet to find a proper working example of using customised YUI script. Here is an example YUI carousel script: http://developer.yahoo.com/yui/carousel/

 

 

How would I apply this to a particular course page. It would be helpful to say exactly where the files have been added and what lines have been used on the edit page settings., etc. The link: http://docs.moodle.org/dev/Javascript_and_YUI_3_FAQ isn't really helping me much so help from the community would be great. Like may be if some one has actually put this into use, then sharing what they did how they did would help a lot.

Thank you in advance.

V.

 
Average of ratings: -
It's only an avatar...
Re: Adding YUI javascripts to moodle themes pages
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi,

All the YUI files are in your moodle/lib/YUI directory...

https://github.com/moodle/moodle/tree/master/lib/yui/3.4.1pr1/build

This is what is current as from 2 days ago.

As for how to apply it...perhaps you might like to check out the Forum for Course Format plugins.

http://moodle.org/mod/forum/view.php?id=47

Mary

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Adding YUI javascripts to moodle themes pages
Group Particularly helpful Moodlers

Where exactly would you like to use those carousels? I have not tested them but it should not be very difficult.

If you need to use them with particular theme you can add javascript and css tags to theme layout files before </head> - if you need to use them with all themes you can add these tags to additional HTML (head) in administration menu. Then you need to know the paths of your carousel images and add the container div (like explained in those carousel examples) to your course (there where you need the carousel) or for example to theme layout files if you need the carousel in header or footer.

You don't need to use yui everywhere in moodle - you can as well use for example jQuery scripts... Yui just happens to be included to core files of moodle and it is used in many core features.

 
Average of ratings: -
Picture of Richard Oelmann
Re: Adding YUI javascripts to moodle themes pages
Group Particularly helpful MoodlersGroup Testers

If you are adding these yui scripts to particular course pages Vijay, I would recommend Mauno's solution of adding the <head> sections using the administrators additional html, otherwise if someone changes theme for the course/site any such script links will be lost and the course (or at least the yui resource on it) will crash.

The actual scripts/html code you need can then be adapted from the yui links such as the one you gave which do a good job of giving the necessary code - you can of course reference the yui in moodle core rather than the yui servers, but essentially it should work exactly the way the yui site (and the reference 'cheat sheets' on their site) say it does.

You may of course then need to add relevant css to your theme(s) to make the carousel - or other yui feature - look like it fits with your theme. For that, I'd suggest getting the code in and working the way you want it and then using a tool such as firebug to help identify the css needed.

 

Richard

 
Average of ratings: -
Picture of Vijay N
Re: Adding YUI javascripts to moodle themes pages
 

Dear All,

 

I am a little too new with playing with javascripts on moodle. What I think would be really useful for me is a step by step guide on how to set it up with the existing YUI 2/3 on Moodle 2.0.3

Its easier for me to understand it, if you could share a step by step guide on how to use the YUI javascripts for the carousel effect (does not matter which type - may be the pictures sliding left to right automatically with control panel at the bottom would be a good example on topic section of a course page.)

 

Step by step guide please..... smile 

 I feel much more confident doing this when I get the information directly from you guys rather than reading a  manual ....if you know what I mean.

Thank you for all your responses..... smile

 

V.

 
Average of ratings: -
Tim at Lone Pine Koala Sanctuary
Re: Adding YUI javascripts to moodle themes pages
 
Average of ratings: -
It's only an avatar...
Re: Adding YUI javascripts to moodle themes pages
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Tim beat me to it...

YOu may find this helpful too...

Development: Using_jQuery_with_Moodle_2.0

Mary

 
Average of ratings: -
Picture of John Whitlock
Re: Adding YUI javascripts to moodle themes pages
 

I don't mean to be rude and I acknowledge that this is an old post, but this is missing the point.  The guidelines seem to deal exclusively with PHP, not at the the "user" level.  I'm having a major headache trying to use YUI within a pure HTML block and on individual course pages.   The changes work perfectly when I test them outside of Moodle within an HTML wrapper containing all the supporting bits and pieces.  I place them in my Moodle test environments, using what I understand to be the recommended approach (similar to that described further down in this issue) and I break the pages or I literally break Moodle menus and blocks.  Days spent on this and virtually no time left to get it sorted out.   Grrrrr.

 
Average of ratings: -
It's only an avatar...
Re: Adding YUI javascripts to moodle themes pages
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

You would be better asking for help with this in the General Developer forum. 

Although I have used JavaScript and jQuery many times with success in Moodle, I just copy and paste stuff, but it works.

So if you know which bit of JS you need to make your HTML block work then just copy and paste the relevant bit of YUI JS to a blank page in Notepad and save it to a new sub-directory in your theme called 'javascript' so that you have something like this...

theme/yourthemename/javascript/myjscode.js

Next add this line to your themes config.php...

$THEME->javascripts = array('myjscode');  //if you want this in the head of the page

or

$THEME->javascripts_footer = array('myjscode');// if you want this in the footer of your page

NEXT you need to add the relevant bits of code in your HTML block that will call the JavaScript to make that HTML block do what it supposed to do.

To get this all to work you will need to Purge all caches in Settings > Site Administration > Development > Purge all caches
and maybe even clear out the js caches in your Moodledata directory too for good measure.

HTH

Mary

 
Average of ratings: -
Picture of John Whitlock
Re: Adding YUI javascripts to moodle themes pages
 

Hi Mary, thanks for the response, however I'm aware of the process ( I do read some of the documentation smile ).  What you've decribed is what I will be doing tonight when I switch from my failed YUI-based attempts to Jquery.  A Jquery-based menu solution seems to be the way to go, works perfectly in test.   I was trying to do the right thing and use YUI, which wasn't successful, at least for the menu.   My YUI approach does seem to work when I use it to enable collapsible page sections so maybe I'll swing both ways!   

Regards

 
Average of ratings: -
It's only an avatar...
Re: Adding YUI javascripts to moodle themes pages
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Hi John,

A good example of how you can utilise YUI scripts can be found in the Decaf theme. That changes the way the Custommenu works and also adds Settings and Navigation to the top of the page in what's come to be known as the 'Awesomebar'.

Here's the link to Paul Nichols GITHUB where you can see the source code.

https://github.com/leizhang/moodle-theme_decaf

Cheers

Mary

 
Average of ratings: -
Picture of John Whitlock
Re: Adding YUI javascripts to moodle themes pages
 

Thank you for the info, very much appreciated.

Regards

John

 
Average of ratings: -
Me
Re: Adding YUI javascripts to moodle themes pages
Group Moodle Course Creator Certificate holders

From what I remember of coding javascript stuff, doesn't javascript often require you to put something inside the <head> tags of the HTML page?

When you're adding HTML to an HTML block within Moodle, you aren't able to add anything to the <head> section. You'll need to actually add that into the theme, and then if someone changes the theme the javascript won't work.

But perhaps things have changed from... uh... 10 or so years ago that I was messing with javascript?

 
Average of ratings: -
Picture of John Whitlock
Re: Adding YUI javascripts to moodle themes pages
 

Thanks Miriam, I may have a solution that will do for now. Unfortunately there's really no useful documentation on doing this at what we might describe as "user level". The focus, understandably, is on tooling around with PHP.  

Cheers

 

 
Average of ratings: -
Picture of Richard Oelmann
Re: Adding YUI javascripts to moodle themes pages
Group Particularly helpful MoodlersGroup Testers

Take Tim's page link with some additional reading from links on yahoos pages - taken directly from your original link - will take you to a set of example created by yahoo eg.

http://developer.yahoo.com/yui/examples/carousel/csl_circular.html

and you should have all of the code you need as well as some instructions on where it all goes - including if you view the example and take a look at the source of the page

Richard

EDIT: Cross posted with Mary - with another reading link for you

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Adding YUI javascripts to moodle themes pages
Group Particularly helpful Moodlers

I suppose that the guides in Docs are not very practical if you need to use some javascript thing in some particular course and for example in some topic only - without activities etc that are mostly using "recommended javascript coding style"... or if you need to add yui examples from non moodle versions of yui...

OK - here a simple example without any recommended methods... smile

Go to Site administration > Appearance > Additional HTML > Within HEAD and add ther only that stylesheet of example that Richard's link because css files should always go to head part of pages

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/carousel/assets/skins/sam/carousel.css">

Next go to some course - turn editing on and edit some topic/label etc

Press in tinymce the HTML button and add there

everything else from that example:

<script src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/carousel/carousel-min.js"></script>
<div id="container"><ol>
<li> <img src="http://farm1.static.flickr.com/69/213130158_0d1aa23576_d.jpg" height="375" width="500" /> </li>
<li> <img src="http://farm1.static.flickr.com/72/213128367_74b0a657c3_d.jpg" height="375" width="500" /> </li>
<li> <img src="http://farm1.static.flickr.com/98/213129707_1f40c509fa_d.jpg" height="375" width="500" /> </li>
<li> <img src="http://farm1.static.flickr.com/59/213129191_b958880a96_d.jpg" height="375" width="500" /> </li>
<li> <img src="http://farm1.static.flickr.com/92/214077367_77ae970965_d.jpg" height="375" width="500" /> </li>
<li> <img src="http://farm1.static.flickr.com/81/214076446_18fe6a6c91_d.jpg" height="375" width="500" /> </li>
<li> <img src="http://farm1.static.flickr.com/93/214075781_0604edb894_d.jpg" height="375" width="500" /> </li>
<li> <img src="http://farm1.static.flickr.com/40/214075243_ea66c4cb31_d.jpg" height="375" width="500" /> </li>
<li> <img src="http://farm1.static.flickr.com/67/214074120_33933bf232_d.jpg" height="375" width="500" /> </li>
<li> <img src="http://farm1.static.flickr.com/79/214073568_f16d1ffce7_d.jpg" height="375" width="500" /> </li>
</ol></div>
<script type="text/javascript">// <![CDATA[
    (function () {
        var carousel;
                
        YAHOO.util.Event.onDOMReady(function (ev) {
            var carousel    = new YAHOO.widget.Carousel("container", {
                        isCircular: true, numVisible: 1
                });

            carousel.render(); // get ready for rendering the widget
            carousel.show();   // display the widget
        });
    })();
// ]]></script>

Press "Save changes" and see what you get:

Yui example

A fully functional YUI carousel example without any changes to core code. smile

 
Average of ratings: -
It's only an avatar...
Re: Adding YUI javascripts to moodle themes pages
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I find it really upsetting when some folks don't even bother to come back to a discussion they started, especially when so much has gone into it to help.

Thanks everyone...I appreciate what you have all contributed.

Cheers

Mary

 
Average of ratings: -
Picture of Vijay N
Re: Adding YUI javascripts to moodle themes pages
 

Still trying to get this to work.

 
Average of ratings: -
Picture of Vijay N
Re: Adding YUI javascripts to moodle themes pages
 

Thanks Mauno, Richard, TIm and Mary and everyone else.

I was off on non stop hectic business meetings the whole 2 weeks and so could not respond back sooner.

I am happy to report back that the Mauno's and Richard's suggestions worked perfectly on the course page and front page

 

Mauno, Just to comment here, I have added the  following lines to the additional html - header section:

The following lines were added in the Site Administrator/ Appearance/ Additional html/ header:

<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/carousel/assets/skins/sam/carousel.css"> 
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/carousel/carousel-min.js"></script>
 
The rest <li> stuff were added to the course page and my front page. and the pictures started working within the control panel.
 
This nows gives me ideas of testing jquery files as well. I think in theory this should apply for jquery in the same way.
 
Thanks again for all your help. You have no idea how long it took me to find a proper solution for custom javascripts to work properly in pages. 

smile

 
Thanks all.
V,
 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Adding YUI javascripts to moodle themes pages
Group Particularly helpful Moodlers

You can use jQuery the same way as yui javascripts.

The reason why I added the script tags to example course page (topic label etc) was that additional html get's added to all pages and all themes of moodle.

In some cases you need some particular javascript in some theme only, sometimes in some activity only and sometimes in some other limited case (for example for some role only).

Luckily moodle has several optional ways to add those tags (if you are an administrator of your site).

Nice to hear that you got the examples working!

 
Average of ratings: -
Picture of Vijay N
Re: Adding YUI javascripts to moodle themes pages
 

Thanks Mauno,

 

Just wanted to add a link for every one to play around with on javascript:

http://code.google.com/apis/libraries/devguide.html#jqueryUI

 

I think this link would be useful for loading javascripts without having to download them to the moodle theme directory.

One odd thing that is happening now is that the yui slides appears to work only on one activity in the course page and not if I have multiple instances of the course page. By this I mean that the top activity/ label that has the javascript in it l work fine but any other labels besides or below it same or different topic sections will just load all the pictures in a vertical list - any clues why that is happening.?

 

Thanks in advance.

 

V.

 
Average of ratings: -
It's only an avatar...
Re: Adding YUI javascripts to moodle themes pages
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

I don't know how you have configured this but in Moodle 2.x.x you add all your javascript file names to the config.php inside the theme and Moodle does the rest. No need to download any scripts which are already in Moodle/lib/yui/..

Cheers

Mary

 
Average of ratings: -
Picture of Mauno Korpelainen
Re: Adding YUI javascripts to moodle themes pages
Group Particularly helpful Moodlers

It's probably caused by the fact that there can be only one element in web page with each unique id so if the script is using

div id="container"

for carousel effect you should have some other ids for other carousels.

Same css class can be used for several elemets.

But that might require modifying the example script itself... it is not caused by moodle.

 
Average of ratings: -
Picture of Vijay N
Re: Adding YUI javascripts to moodle themes pages
 

Thanks Mauno,

 

I will have a go with that divs.

 

Mary, thanks for the info, but nothing has changed with the config.php and javascript is enabled.

 
Average of ratings: -
Picture of Łukasz Styś
Odp: Re: Adding YUI javascripts to moodle themes pages
 

Hi Mauno,

Can you please give me some hints on the theme customization I want to develop? Basically I want to have animated login panel, something similar to: http://yuilibrary.com/yui/docs/panel/panel-animate.html

I pasted the below part into my frontpage.php file (head):

<script type="text/javascript">
YUI().use('transition', 'panel', function (Y) {

var openBtn = Y.one('#openButton'),
panel, bb;

function showPanel() {
panel.show();
bb.transition({
duration: 0.5,
top : '80px'
});
}

function hidePanel() {
bb.transition({
duration: 0.5,
top : '-300px'
}, function () {
panel.hide();
});
}

panel = new Y.Panel({
srcNode: '#panelContent',
width : 330,
xy : [300, -300],
zIndex : 5,
modal : true,
visible: false,
render : true,
buttons: [
{
value : 'Close the panel',
section: 'footer',
action : function (e) {
e.preventDefault();
hidePanel();
}
}
]
});

bb = panel.get('boundingBox');

openBtn.on('click', function (e) {
showPanel();
});

});

</script>

and then in the boody I pasted:

<button id="openButton">Open Panel</button>

<div id="panelContent" class="yui3-widget-loading">
<div class="yui3-widget-hd">
Showing an animated panel
</div>
<div class="yui3-widget-bd">
<p>Making panels animate is easy with the "transition" module!</p>
</div>
</div>

Now if I open my page I see the button to open my panel, I press on the button to open it and it works - the only thing is that I want to customize it.

Could you please tell me how to change the CSS for this panel? I want to put my CSS stuff into a separate CSS file (according to the best practices). I created the file under /theme/myTheme/style directory, copy paste the example styles, modified it a little bit but when I open my page I still see the defualt YUI skin for the panel.

I would also like to put the script into a separate js file - can you help here?

 
Average of ratings: -
Picture of Łukasz Styś
Odp: Re: Adding YUI javascripts to moodle themes pages
 

one step forward smile I added the css file into sheets definition in the config.php file and now this is fine. JS left, any help?

 
Average of ratings: -
It's only an avatar...
Re: Odp: Re: Adding YUI javascripts to moodle themes pages
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

What kind of help do you want?

If it is to know how to add the JS script to a js file, and then add this file name into your theme config.php then I have added your JS to the attached file and called it openButton.js. Here are the instructions for adding this into your theme.

Add the attached file to theme/yourthemename/javascript/
directory that you will need to create first.

Then add the following to your theme/yourthemename/config.php where yourthemename is the name of YOUR theme.

$THEME->javascripts = array('openButton');

Now you can remove the script in the header as the code added to the config will add the JS automatically into the header when the page loads.

Also to see any changes to CSS & JavaScript you will need to Purge all caches in Site Administration > Development > Purge all caches

HTH

Mary

 
Average of ratings: -