mirror of
https://github.com/moodle/moodle.git
synced 2025-04-07 09:23:31 +02:00
MDL-30899 moodle-core-notification Replacing Y.Overlay for Y.Panel
References to lightbox are still there to maintain the same external API but are converted to a modal attribute internally, same with closeButton, now it uses the Y.Panel close button
This commit is contained in:
parent
f42c34a38a
commit
7cd301d191
@ -1,11 +1,13 @@
|
||||
.moodle-dialogue-base .hidden,
|
||||
.moodle-dialogue-base .moodle-dialogue-hidden {display:none;}
|
||||
.moodle-dialogue-base .moodle-dialogue-lightbox {background-color:#AAA;position:absolute;top:0;left:0;width:100%;height:100%;}
|
||||
.moodle-dialogue-base .moodle-dialogue-lightbox {background-color:#AAA;}
|
||||
.moodle-dialogue-base .moodle-dialogue {background-color:#666;border:0 solid #666;border-right-width:3px;border-bottom-width:3px;}
|
||||
.moodle-dialogue-base .moodle-dialogue-wrap {background-color:#FFF;margin-top:-3px;margin-left:-3px;border:1px solid #555;height:auto;}
|
||||
.moodle-dialogue-base .moodle-dialogue-hd {font-size:110%;color:inherit;font-weight:bold;text-align:left;padding:5px 6px;margin:0;border-bottom:1px solid #ccc;background-color:#f6f6f6;}
|
||||
.moodle-dialogue-base .closebutton {background-image:url(sprite.png);width:25px;height:15px;background-repeat:no-repeat;float:right;vertical-align:middle;display:inline-block;cursor:pointer;}
|
||||
.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd {font-size:110%;color:inherit;font-weight:bold;text-align:left;padding:5px 6px;margin:0;border-bottom:1px solid #ccc;background:#f6f6f6;}
|
||||
.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-hd .yui3-widget-buttons {padding: 5px;}
|
||||
.moodle-dialogue-base .closebutton {background-image:url(sprite.png);width:25px;height:15px;background-repeat:no-repeat;float:right;vertical-align:middle;display:inline-block;cursor:pointer;padding:0px;border-style:none;}
|
||||
.moodle-dialogue-base .moodle-dialogue-bd {padding:5px; overflow: auto;}
|
||||
.moodle-dialogue-base .moodle-dialogue-wrap .moodle-dialogue-content {background:#FFF;padding:0px;}
|
||||
.moodle-dialogue-base .moodle-dialogue-ft {}
|
||||
|
||||
.moodle-dialogue-confirm .confirmation-dialogue {text-align:center;}
|
||||
|
50
lib/yui/notification/notification.js
vendored
50
lib/yui/notification/notification.js
vendored
@ -8,8 +8,6 @@ var DIALOGUE_NAME = 'Moodle dialogue',
|
||||
ALERT_NAME = 'Moodle alert',
|
||||
C = Y.Node.create,
|
||||
BASE = 'notificationBase',
|
||||
LIGHTBOX = 'lightbox',
|
||||
NODELIGHTBOX = 'nodeLightbox',
|
||||
COUNT = 0,
|
||||
CONFIRMYES = 'yesLabel',
|
||||
CONFIRMNO = 'noLabel',
|
||||
@ -31,7 +29,6 @@ var DIALOGUE = function(config) {
|
||||
var id = 'moodle-dialogue-'+COUNT;
|
||||
config.notificationBase =
|
||||
C('<div class="'+CSS.BASE+'">')
|
||||
.append(C('<div class="'+CSS.LIGHTBOX+' '+CSS.HIDDEN+'"></div>'))
|
||||
.append(C('<div id="'+id+'" class="'+CSS.WRAP+'"></div>')
|
||||
.append(C('<div class="'+CSS.HEADER+' yui3-widget-hd"></div>'))
|
||||
.append(C('<div class="'+CSS.BODY+' yui3-widget-bd"></div>'))
|
||||
@ -42,41 +39,45 @@ var DIALOGUE = function(config) {
|
||||
config.visible = config.visible || false;
|
||||
config.center = config.centered || true;
|
||||
config.centered = false;
|
||||
|
||||
// lightbox param to keep the stable versions API.
|
||||
if (config.lightbox !== false) {
|
||||
config.modal = true;
|
||||
}
|
||||
delete config.lightbox;
|
||||
|
||||
// closeButton param to keep the stable versions API.
|
||||
if (config.closeButton === false) {
|
||||
config.buttons = null;
|
||||
} else {
|
||||
config.buttons = [
|
||||
{
|
||||
section: Y.WidgetStdMod.HEADER,
|
||||
classNames: 'closebutton',
|
||||
action: function (e) {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
DIALOGUE.superclass.constructor.apply(this, [config]);
|
||||
};
|
||||
Y.extend(DIALOGUE, Y.Overlay, {
|
||||
Y.extend(DIALOGUE, Y.Panel, {
|
||||
initializer : function(config) {
|
||||
this.set(NODELIGHTBOX, this.get(BASE).one('.'+CSS.LIGHTBOX).setStyle('opacity', 0.5));
|
||||
this.after('visibleChange', this.visibilityChanged, this);
|
||||
this.after('headerContentChange', function(e){
|
||||
var h = (this.get('closeButton'))?this.get(BASE).one('.'+CSS.HEADER):false;
|
||||
if (h && !h.one('.closebutton')) {
|
||||
var c = C('<div class="closebutton"></div>');
|
||||
c.on('click', this.hide, this);
|
||||
h.append(c);
|
||||
}
|
||||
}, this);
|
||||
this.render();
|
||||
this.show();
|
||||
},
|
||||
visibilityChanged : function(e) {
|
||||
switch (e.attrName) {
|
||||
case 'visible':
|
||||
if (this.get(LIGHTBOX)) {
|
||||
var l = this.get(NODELIGHTBOX);
|
||||
if (!e.prevVal && e.newVal) {
|
||||
l.setStyle('height',l.get('docHeight')+'px').removeClass(CSS.HIDDEN);
|
||||
} else if (e.prevVal && !e.newVal) {
|
||||
l.addClass(CSS.HIDDEN);
|
||||
}
|
||||
}
|
||||
this.get('maskNode').addClass(CSS.LIGHTBOX);
|
||||
if (this.get('center') && !e.prevVal && e.newVal) {
|
||||
this.centerDialogue();
|
||||
}
|
||||
if (this.get('draggable')) {
|
||||
var titlebar = '#' + this.get('id') + ' .' + CSS.HEADER;
|
||||
this.plug(Y.Plugin.Drag, {handles : [titlebar]});
|
||||
this.dd.addInvalid('div.closebutton');
|
||||
Y.one(titlebar).setStyle('cursor', 'move');
|
||||
}
|
||||
break;
|
||||
@ -101,9 +102,6 @@ Y.extend(DIALOGUE, Y.Overlay, {
|
||||
ATTRS : {
|
||||
notificationBase : {
|
||||
|
||||
},
|
||||
nodeLightbox : {
|
||||
value : null
|
||||
},
|
||||
lightbox : {
|
||||
validator : Y.Lang.isBoolean,
|
||||
@ -382,4 +380,4 @@ M.core.confirm = CONFIRM;
|
||||
M.core.exception = EXCEPTION;
|
||||
M.core.ajaxException = AJAXEXCEPTION;
|
||||
|
||||
}, '@VERSION@', {requires:['base','node','overlay','event-key', 'moodle-core-notification-skin', 'dd-plugin']});
|
||||
}, '@VERSION@', {requires:['base','node','panel','event-key', 'moodle-core-notification-skin', 'dd-plugin']});
|
||||
|
Loading…
x
Reference in New Issue
Block a user