Hi,
I am working with course format and I use YUI widget panel. There is one problem - if I drag panel on the top (left/right corner), some elements cover this. I set zIndex (in css and javascript, too) - without result.
Many thanks for help
Martin
He himself asked himself answered . The problem is solved. To get out of #page-content, you must set the following css:
#page #page-content {overflow: visible;}
Good luck
Martin
Also consider using moodle-core-notification (since 2.4) instead of Widget. It's available at M.core.dialogue and from Moodle 2.5 will come with the standard Moodle diaogue styling to help ensure a consistent user interface across Moodle,
Best wishes,
Andrew
Hi,
I don't know how use M.core.dialogue. Can you give me simple example, please?
Many thanks
Martin
It depends a little on how you're doing this, but at present you're using a YUI Widget. I presume therefore that you're writing a YUI module as per the docs at http://docs.moodle.org/dev/How_to_create_a_YUI_3_module or http://docs.moodle.org/dev/YUI.
So you should have a list of dependencies, and one of those dependencies will be 'widget'.
If you change that from widget to 'moodle-core-dialogue', you can just change your uses of Y.Widget (or Y.Panel, or Y.Overlay, or whichever you're using) to M.core.dialogue.
If you have some code to share, I should be able to assist more.
Good luck
Andrew
Hi Andrew,
I have this code from Moodle JavaScript Cookbook:
YUI().use("yui2-container", "yui2-dragdrop", "node", function(Y)
{
var YAHOO = Y.YUI2;
var panel = new YAHOO.widget.Panel("modalPanel",
{
visible:false,
modal:true,
width:"300px",
height:"auto",
close: true,
draggable: false,
fixedcenter: true
}
);
panel.hideEvent.subscribe(function()
{
Y.one('#modalContainer').setStyle('height', null);
});
panel.render();
function showPanel()
{
Y.one('#modalContainer').setStyle('height',Y.one('body').get
('winHeight'));
panel.show();
}
Y.on('click', showPanel, "#show");
});
I work with new course format based on topics format. I implement some additional functionality above this topics. It's similar to gradebook table. I need afret click on cell containing grade to open dialogue window with assign grade. I have one other problem with it - I need grading page in this dialog (https://moodle.org/mod/forum/discuss.php?d=224301).
Thank you for your help
Martin
Oh, ick.... the Moodle JavaScript cookbook is very out of date I'm afraid.
I've been trying to update the documentation in the developer wiki (http://docs.moodle./dev/YUI is a good place to start), and the documentation on the YUI website is really rather good (http://yuilibrary.com).
If you're after a decent book on YUI (not specific to Moodle) then I can highly recommend the YUI 3 Cookbook by Evan Goer. There is a PDF sample of it online somewhere. It's an O'Reilly book and I've found it useful.
So on to your code...
This is basically what the code you have above does, but using up-to-date techniques and modules:
YUI.use('node', 'moodle-core-notification', function(Y) {
// Don't set up the dialogue until it's needed
var dialogue = null;
// Use a delegate rather than on. It's much more efficient for large numbers of nodes. This one will call
// display_popup whenever anything with the class 'clickedcell' is called anywhere within the document.
Y.delegate('click', display_popup, Y.config.doc, '.clickedcell');
display_popup = function(thisevent) {
if (!dialogue) {
dialogue = new M.core.dialogue({
visible: false,
modal: true,
close: true,
draggable: true
});
dialogue.render();
}
dialogue.set('bodyContent', Y.one('#somecontent');
dialogue.show();
};
});
This should get you pointed in the right direction. You should be able to apply specific styling to the dialogue based on it's existing CSS path.
Andrew
Hi Andrew, it works great! Many thanks for your help. Just one question . I have problem with
dialogue.set('bodyContent', Y.one('#somecontent');
If I comment out this line, the dialogue is shown without content ofcourse. Else dialogue doesn't work. I think I have a bug in the structure of html - #somecontent is id of element with content of dialogue and bodyContent is "container" for this element?
<div id="bodyContent">
<div id="somecontent">
<div class="hd">Moodle dialogue</div>
<div class="bd">Body of Moodle dialogue.</div>
<div class="ft">Footer</div>
</div>
</div>
Thanks
Martin
Hi Martin,
It's part of the underlying Panel (and WidgetStd) in YUI that M.core.dialogue extends. It's a way of replacing the body content of the dialogue with an existing HTML structure and it handles modifying the contents of the boundingBox for you. See the API docs at http://yuilibrary.com/yui/docs/api/classes/Panel.html#attr_bodyContent for more info and the Panel documentation at http://yuilibrary.com/yui/docs/panel/ for info on other ways of doing similar things (e.g. set('srcNode', someNode);)
What I suggested was just an example... and based on your HTML structure you may want to do:
var mycontent = Y.one('#somecontent');
dialogue.setAttrs({
'headerContent': mycontent.one('hd'),
'bodyContent': mycontent.one('bd'),
'footerContent': mycontent.one('ft')
});
This should set the respective header, body, and footer for the dialogue for example.
Andrew
Andrew, thank you for your help and links! It works correctly. Now I deal with, how to re-open the dialog. When i clicked on the button - in my case - the dialog is opened. After close it, other click on button does not work. I'll probably need to open the dialog when the page loads (I need some parametres from URL). When I tried this, the dialogue was not centered, but in the upper left corner of the page. I'm sorry for more and more questions .
Thanks
Martin
Hmm,
Without knowing more about your code it's difficult to know what's going on there. There's probably something wrong in my JS (sorry). Have you tried adding a breakpoint to the first if test in the display_popup() function? If you do so and walk through you should be able to determine whether dialogue.show() is being reached.
It shouldn't be necessary to have the dialogue created on page load to get the URL parameters, but equally, you can pass parameters into the yui_module call with:
$PAGE->requires->yui_module('moodle-local_pluginname-mypluginname', 'M.local_pluginname-yuimodulename', array(array(
'param1' => 'value1',
'param2' => 'value2',
));
These values will then be passed into your function at startup.
Rendering and showing a new dialogue is fairly expensive (computationally) and is best avoided until required.
Is your code online somewhere and I may be able to help further?
Andrew