So, the best I have been able to come up with so far is:
var modal = ModalFactory.create({
type: ModalFactory.types.CONFIRM,
title: M.util.get_string('removeconfirmtitle', 'block_dashboardboxes'),
body: M.util.get_string('removeconfirmmessage', 'block_dashboardboxes', item.find('span').text().trim()),
// footer: '<button type="button" class="btn btn-primary" data-action="yes">' + M.util.get_string('remove') + '</button>' +
// '<button type="button" class="btn btn-secondary" data-action="cancel">' + M.util.get_string('cancel') + '</button>'
}).done(function (modal) {
modal.getRoot().on(ModalEvents.yes, t.deleteItemConfirmed);
modal.show();
}).catch(Notification.exception);
With that code:
- It is quite slow from clicking the button to the dialogue acuitally appearing, which is presumably due to the 5(!) Ajax calls it takes to show the dialogue.
- The dialogues does not look anything like any of the other dialogue boxes in the plugin I am making. So, if you want to theme Moodle dialogues, you now have to do it twice, once for old YUI dialogues, and one for new-style ones.
- If you un-comment the bit that tries to set more meaningful button labels, you get an exception. I don't know what that is necessary.
- I don't know why the .getRoot() incantation is necessary to add the event handler. I just copied it from some other code using modal_factory why doing the obvious thing did not work.
But, apart from that, it works.
Note, when I say that our old CSS for styling dialogues does not apply here, that CSS was using class names like:
.moodle-dialogue-base .moodle-dialogue-lightbox {
background-color: #464542;
opacity: 0.7;
}
.moodle-dialogue-base .moodle-dialogue {
max-width: 1280px;
}
.moodle-dialogue-base .moodle-dialogue-wrap {
border: 0;
border-radius: 0;
margin-right: 5px;
}
.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd,
Not anything YUI-specific.
