MDL-30899 moodle-core-notification Adding focus to non modal windows
[moodle.git] / blocks / community / yui / comments / comments.js
CommitLineData
1ce282c8 1YUI.add('moodle-block_community-comments', function(Y) {
2
3 var COMMENTSNAME = 'blocks_community_comments';
4
5 var COMMENTS = function() {
6 COMMENTS.superclass.constructor.apply(this, arguments);
f7af9f2e 7 };
1ce282c8 8
9 Y.extend(COMMENTS, Y.Base, {
10
11 event:null,
789819a9
DM
12 panelevent: null,
13 panels: [], //all the comment boxes
1ce282c8 14
15 initializer : function(params) {
16
17 //attach a show event on the div with id = comments
18 for (var i=0;i<this.get('commentids').length;i++)
f7af9f2e 19 {
1ce282c8 20 var commentid = this.get('commentids')[i];
789819a9 21 this.panels[commentid] = new M.core.dialogue({
729c1151
DM
22 headerContent:Y.Node.create('<h1>')
23 .append(Y.one('#commentoverlay-'+commentid+' .commenttitle').get('innerHTML')),
1ce282c8 24 bodyContent:Y.one('#commentoverlay-'+commentid).get('innerHTML'),
25 visible: false, //by default it is not displayed
26 lightbox : false,
0e0f3beb 27 zIndex:100
1ce282c8 28 });
29
789819a9
DM
30 this.panels[commentid].get('contentBox').one('.commenttitle').remove();
31 this.panels[commentid].render();
32 this.panels[commentid].hide();
1ce282c8 33
1ce282c8 34 Y.one('#comments-'+commentid).on('click', this.show, this, commentid);
35 }
36
37 },
38
39 show : function (e, commentid) {
40
789819a9 41 // Hide all panels.
1ce282c8 42 for (var i=0;i<this.get('commentids').length;i++)
43 {
44 this.hide(e, this.get('commentids')[i]);
45 }
46
789819a9 47 this.panels[commentid].show(); //show the panel
1ce282c8 48
789819a9 49 e.halt(); // we are going to attach a new 'hide panel' event to the body,
1ce282c8 50 // because javascript always propagate event to parent tag,
51 // we need to tell Yahoo to stop to call the event on parent tag
52 // otherwise the hide event will be call right away.
53
789819a9 54 // We add a new event on the body in order to hide the panel for the next click.
1ce282c8 55 this.event = Y.one(document.body).on('click', this.hide, this, commentid);
789819a9
DM
56 // We add a new event on the panel in order to hide the panel for the next click (touch device).
57 this.panelevent = Y.one("#commentoverlay-"+commentid).on('click', this.hide, this, commentid);
f068cac1
DM
58
59 // Focus on the close button
60 this.panels[commentid].get('buttons').header[0].focus();
1ce282c8 61 },
62
63 hide : function (e, commentid) {
789819a9 64 this.panels[commentid].hide(); //hide the panel
1ce282c8 65 if (this.event != null) {
66 this.event.detach(); //we need to detach the body hide event
67 //Note: it would work without but create js warning everytime
68 //we click on the body
69 }
789819a9
DM
70 if (this.panelevent != null) {
71 this.panelevent.detach(); //we need to detach the panel hide event
1ce282c8 72 //Note: it would work without but create js warning everytime
73 //we click on the body
74 }
f7af9f2e 75
1ce282c8 76 }
77
78 }, {
79 NAME : COMMENTSNAME,
80 ATTRS : {
81 commentids: {}
82 }
83 });
84
85 M.blocks_community = M.blocks_community || {};
86 M.blocks_community.init_comments = function(params) {
87 return new COMMENTS(params);
88 }
89
90}, '@VERSION@', {
789819a9 91 requires:['base', 'moodle-core-notification']
d2a27ab0 92});