diff --git a/calendar/lib.php b/calendar/lib.php index 929e82ae81a..46bad088f87 100644 --- a/calendar/lib.php +++ b/calendar/lib.php @@ -425,7 +425,6 @@ function calendar_get_mini($courses, $groups, $users, $calmonth = false, $calyea } else { $popupdata = calendar_get_popup(false, $daytime, $popupcontent); } - $cellattributes = array_merge($cellattributes, $popupdata); // Class and cell content if(isset($typesbyday[$day]['startglobal'])) { @@ -440,7 +439,14 @@ function calendar_get_mini($courses, $groups, $users, $calmonth = false, $calyea if ($finishclass) { $class .= ' duration_finish'; } - $cell = html_writer::link($dayhref, $day); + + $data = array( + 'url' => $dayhref, + 'day' => $day, + 'content' => $popupdata['data-core_calendar-popupcontent'], + 'title' => $popupdata['data-core_calendar-title'] + ); + $cell = $OUTPUT->render_from_template('core_calendar/minicalendar_day_link', $data); } else { $cell = $day; } @@ -482,8 +488,13 @@ function calendar_get_mini($courses, $groups, $users, $calmonth = false, $calyea if (!isset($eventsbyday[$day]) && !isset($durationbyday[$day])) { $class .= ' eventnone'; $popupdata = calendar_get_popup(true, false); - $cellattributes = array_merge($cellattributes, $popupdata); - $cell = html_writer::link('#', $day); + $data = array( + 'url' => '#', + 'day' => $day, + 'content' => $popupdata['data-core_calendar-popupcontent'], + 'title' => $popupdata['data-core_calendar-title'] + ); + $cell = $OUTPUT->render_from_template('core_calendar/minicalendar_day_link', $data); } $cell = get_accesshide($today . ' ') . $cell; } @@ -500,12 +511,6 @@ function calendar_get_mini($courses, $groups, $users, $calmonth = false, $calyea $content .= ''; // Last row ends $content .= ''; // Tabular display of days ends - - static $jsincluded = false; - if (!$jsincluded) { - $PAGE->requires->yui_module('moodle-calendar-info', 'Y.M.core_calendar.info.init'); - $jsincluded = true; - } return $content; } diff --git a/calendar/templates/minicalendar_day_link.mustache b/calendar/templates/minicalendar_day_link.mustache new file mode 100644 index 00000000000..bdb5e676181 --- /dev/null +++ b/calendar/templates/minicalendar_day_link.mustache @@ -0,0 +1,38 @@ +{{! + This file is part of Moodle - http://moodle.org/ + + Moodle is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + Moodle is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with Moodle. If not, see . +}} +{{! + @template core_calendar/minicalendar_day_link + + Displays link to calendar day in mini calendar, with hover tooltip. + + Example context (json): + { + "day": "Today", + "url": "http://example.com/", + "title": "Monday 2nd January", + "content": "iconTest site event" + } +}} +{{< core/hover_tooltip }} + {{$anchor}} + {{day}} + {{/anchor}} + {{$tooltip}} + {{title}} + {{{content}}} + {{/tooltip}} +{{/ core/hover_tooltip }} diff --git a/calendar/yui/build/moodle-calendar-info/assets/skins/sam/moodle-calendar-info.css b/calendar/yui/build/moodle-calendar-info/assets/skins/sam/moodle-calendar-info.css deleted file mode 100644 index d895c9a3b09..00000000000 --- a/calendar/yui/build/moodle-calendar-info/assets/skins/sam/moodle-calendar-info.css +++ /dev/null @@ -1,24 +0,0 @@ -.calendar-event-panel { - background-color: #666; - border: 2px solid #666; - border-width: 0 2px 2px 0; -} - -.calendar-event-panel .yui3-overlay-content { - background-color: #fff; - border: 1px solid #555; - margin-top: -5px; - margin-left: -5px; -} - -.calendar-event-panel .yui3-overlay-content h2.eventtitle { - margin: 3px 5px 2px; - padding: 0; - text-align: center; -} - -.calendar-event-panel .eventcontent { - margin: 5px; - padding: 0; - text-align: center; -} diff --git a/calendar/yui/build/moodle-calendar-info/moodle-calendar-info-debug.js b/calendar/yui/build/moodle-calendar-info/moodle-calendar-info-debug.js deleted file mode 100644 index ff8632ae13f..00000000000 --- a/calendar/yui/build/moodle-calendar-info/moodle-calendar-info-debug.js +++ /dev/null @@ -1,283 +0,0 @@ -YUI.add('moodle-calendar-info', function (Y, NAME) { - -// This file is part of Moodle - http://moodle.org/ -// -// Moodle is free software: you can redistribute it and/or modify -// it under the terms of the GNU General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. -// -// Moodle is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU General Public License for more details. -// -// You should have received a copy of the GNU General Public License -// along with Moodle. If not, see . - -/** - * Overlay manager for the Moodle Calendar. - * - * @module moodle-core_calendar-info - * @package core_calendar - * @copyright 2014 Andrew Nicols - * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - * @main moodle-core_calendar-info - */ - -var ARIACONTROLS = 'aria-controls', - BOUNDINGBOX = 'boundingBox', - CALENDAREVENT = '[data-core_calendar-title]', - CALENDARTABLE = 'calendartable', - DATAPREFIX = 'core_calendar-', - DOT = '.', - EVENTCONTENT = 'eventcontent', - EVENTDELAY = 'delay', - EVENTTITLE = 'eventtitle', - INNERHTML = 'innerHTML', - - /** - * Overlay manager for the Moodle calendar. - * - * @namespace M.core_calendar - * @class Info - * @constructor - */ - - Info = function() { - Info.superclass.constructor.apply(this, arguments); - }; - - -Y.extend(Info, Y.Base, { - /** - * A pointer to the timer used for showing the panel. - * - * @property _showTimer - * @type object - * @private - */ - _showTimer: null, - - /** - * A pointer to the timer used for hiding the panel. - * - * @property _hideTimer - * @type object - * @private - */ - _hideTimer: null, - - /** - * A pointer for the Calendar Overlay. - * - * @property _panel - * @type object - * @private - */ - _panel: null, - - /** - * A pointer to the cell containing the currently open calendar day. - * - * @property _currentDay - * @type object - * @private - */ - _currentDay: null, - - initializer: function() { - var body = Y.one(Y.config.doc.body); - body.delegate(['mouseenter', 'focus'], this._startShow, CALENDAREVENT, this); - body.delegate(['mouseleave', 'blur'], this._startHide, CALENDAREVENT, this); - }, - - /** - * Initialise the Overlay in which information is displayed. - * - * @method __initOverlay - * @chainable - */ - _initOverlay: function() { - if (!this._panel) { - this._panel = new Y.Overlay({ - headerContent: Y.Node.create('

'), - bodyContent: Y.Node.create('
'), - visible: false, - render: true - }); - - this._panel.get(BOUNDINGBOX) - .addClass('calendar-event-panel'); - } - - return this; - }, - - /** - * Prepare to show the Overlay, and kick off the jobs that cause it to be shown. - * - * @method _startShow - * @param {EventFacade} e - * @private - */ - _startShow: function(e) { - if (this._isCurrentDayVisible(e.currentTarget)) { - // Only start the show if the current day isn't already visible. - return; - } - - this._cancelHide() - ._cancelShow() - - // Initialise the panel now - this will only happen once. This way - // it's ready for when the timer times out. - ._initOverlay(); - - - this._showTimer = setTimeout(Y.bind(function() { - var calendarCell = e.target.ancestor(CALENDAREVENT, true); - this._show(calendarCell); - }, this), this.get(EVENTDELAY)); - }, - - /** - * Display the Overlay immediately. - * - * @method _show - * @param {Node} dayCell The location that the Overlay should be displayed. - */ - _show: function(dayCell) { - var bb = this._panel.get(BOUNDINGBOX), - widgetPositionAlign = Y.WidgetPositionAlign, - calendarParent = dayCell.ancestor(DOT + CALENDARTABLE); - - bb.one(DOT + EVENTTITLE).set(INNERHTML, dayCell.getData(DATAPREFIX + 'title')); - bb.one(DOT + EVENTCONTENT).set(INNERHTML, dayCell.getData(DATAPREFIX + 'popupcontent')); - - // Set the ARIA attributes for the owning cell. - if (this._currentDay) { - this._currentDay.setAttribute(ARIACONTROLS, null); - } - dayCell.setAttribute(ARIACONTROLS, dayCell.get('id')); - - // Move the panel to the current target. - dayCell.appendChild(bb); - - // Keep track of the new day being shown. - this._currentDay = dayCell; - - this._panel.constrain(calendarParent); - this._panel - .set('width', calendarParent.get('offsetWidth') + 'px') - // Align it with the area clicked. - .align(calendarParent, [ - widgetPositionAlign.TC, - widgetPositionAlign.TC - ]) - // Show it. - .show(); - - bb.setAttribute('tabindex', '0') - .focus(); - }, - - /** - * Cancel the timers which would cause the overlay to be shown. - * - * @method _cancelShow - * @chainable - * @private - */ - _cancelShow: function() { - if (this._showTimer) { - clearTimeout(this._showTimer); - } - - return this; - }, - - /** - * Prepare to hide the Overlay, and kick off the jobs that cause it to be hidden. - * - * @method _startHide - * @param {EventFacade} e - * @private - */ - _startHide: function(e) { - if (e.type === 'blur' && e.currentTarget.contains(e.target)) { - return; - } - this._cancelShow() - ._cancelHide(); - this._hideTimer = setTimeout(Y.bind(function() { - this._hide(); - }, this), this.get(EVENTDELAY)); - }, - - /** - * Hide the Overlay immediately. - * - * @method _hide - */ - _hide: function() { - if (this._panel) { - this._panel.hide(); - } - }, - - /** - * Cancel the timers which would cause the overlay to be hidden. - * - * @method _cancelHide - * @chainable - * @private - */ - _cancelHide: function() { - if (this._hideTimer) { - clearTimeout(this._hideTimer); - } - - return this; - }, - - /** - * Determine whether the specified day is currently visible. - * - * @method _isCurrentDayVisible - * @param specifiedDay {Node} The Node to check visibility for. - * @private - */ - _isCurrentDayVisible: function(specifiedDay) { - if (!this._panel || !this._panel.get('visible')) { - return false; - } - - if (specifiedDay !== this._currentDay) { - return false; - } - - return true; - } -}, { - NAME: 'calendarInfo', - ATTRS: { - /** - * The delay to use before showing or hiding the calendar. - * - * @attribute delay - * @type Number - * @default 300 - */ - delay: { - value: 300 - } - } -}); - -Y.namespace('M.core_calendar.info').init = function(config) { - return new Info(config); -}; - - -}, '@VERSION@', {"requires": ["base", "node", "event-mouseenter", "event-key", "overlay", "moodle-calendar-info-skin"]}); diff --git a/calendar/yui/build/moodle-calendar-info/moodle-calendar-info-min.js b/calendar/yui/build/moodle-calendar-info/moodle-calendar-info-min.js deleted file mode 100644 index 8c9ec46888e..00000000000 --- a/calendar/yui/build/moodle-calendar-info/moodle-calendar-info-min.js +++ /dev/null @@ -1 +0,0 @@ -YUI.add("moodle-calendar-info",function(e,t){var n="aria-controls",r="boundingBox",i="[data-core_calendar-title]",s="calendartable",o="core_calendar-",u=".",a="eventcontent",f="delay",l="eventtitle",c="innerHTML",h=function(){h.superclass.constructor.apply(this,arguments)};e.extend(h,e.Base,{_showTimer:null,_hideTimer:null,_panel:null,_currentDay:null,initializer:function(){var t=e.one(e.config.doc.body);t.delegate(["mouseenter","focus"],this._startShow,i,this),t.delegate(["mouseleave","blur"],this._startHide,i,this)},_initOverlay:function(){return this._panel||(this._panel=new e.Overlay({headerContent:e.Node.create('

'),bodyContent:e.Node.create('
'),visible:!1,render:!0}),this._panel.get(r).addClass("calendar-event-panel")),this},_startShow:function(t){if(this._isCurrentDayVisible(t.currentTarget))return;this._cancelHide()._cancelShow()._initOverlay(),this._showTimer=setTimeout(e.bind(function(){var e=t.target.ancestor(i,!0);this._show(e)},this),this.get(f))},_show:function(t){var i=this._panel.get(r),f=e.WidgetPositionAlign,h=t.ancestor(u+s);i.one(u+l).set(c,t.getData(o+"title")),i.one(u+a).set(c,t.getData(o+"popupcontent")),this._currentDay&&this._currentDay.setAttribute(n,null),t.setAttribute(n,t.get("id")),t.appendChild(i),this._currentDay=t,this._panel.constrain(h),this._panel.set("width",h.get("offsetWidth")+"px").align(h,[f.TC,f.TC]).show(),i.setAttribute("tabindex","0").focus()},_cancelShow:function(){return this._showTimer&&clearTimeout(this._showTimer),this},_startHide:function(t){if(t.type==="blur"&&t.currentTarget.contains(t.target))return;this._cancelShow()._cancelHide(),this._hideTimer=setTimeout(e.bind(function(){this._hide()},this),this.get(f))},_hide:function(){this._panel&&this._panel.hide()},_cancelHide:function(){return this._hideTimer&&clearTimeout(this._hideTimer),this},_isCurrentDayVisible:function(e){return!this._panel||!this._panel.get("visible")?!1:e!==this._currentDay?!1:!0}},{NAME:"calendarInfo",ATTRS:{delay:{value:300}}}),e.namespace("M.core_calendar.info").init=function(e){return new h(e)}},"@VERSION@",{requires:["base","node","event-mouseenter","event-key","overlay","moodle-calendar-info-skin"]}); diff --git a/calendar/yui/build/moodle-calendar-info/moodle-calendar-info.js b/calendar/yui/build/moodle-calendar-info/moodle-calendar-info.js deleted file mode 100644 index ff8632ae13f..00000000000 --- a/calendar/yui/build/moodle-calendar-info/moodle-calendar-info.js +++ /dev/null @@ -1,283 +0,0 @@ -YUI.add('moodle-calendar-info', function (Y, NAME) { - -// This file is part of Moodle - http://moodle.org/ -// -// Moodle is free software: you can redistribute it and/or modify -// it under the terms of the GNU General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. -// -// Moodle is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU General Public License for more details. -// -// You should have received a copy of the GNU General Public License -// along with Moodle. If not, see . - -/** - * Overlay manager for the Moodle Calendar. - * - * @module moodle-core_calendar-info - * @package core_calendar - * @copyright 2014 Andrew Nicols - * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - * @main moodle-core_calendar-info - */ - -var ARIACONTROLS = 'aria-controls', - BOUNDINGBOX = 'boundingBox', - CALENDAREVENT = '[data-core_calendar-title]', - CALENDARTABLE = 'calendartable', - DATAPREFIX = 'core_calendar-', - DOT = '.', - EVENTCONTENT = 'eventcontent', - EVENTDELAY = 'delay', - EVENTTITLE = 'eventtitle', - INNERHTML = 'innerHTML', - - /** - * Overlay manager for the Moodle calendar. - * - * @namespace M.core_calendar - * @class Info - * @constructor - */ - - Info = function() { - Info.superclass.constructor.apply(this, arguments); - }; - - -Y.extend(Info, Y.Base, { - /** - * A pointer to the timer used for showing the panel. - * - * @property _showTimer - * @type object - * @private - */ - _showTimer: null, - - /** - * A pointer to the timer used for hiding the panel. - * - * @property _hideTimer - * @type object - * @private - */ - _hideTimer: null, - - /** - * A pointer for the Calendar Overlay. - * - * @property _panel - * @type object - * @private - */ - _panel: null, - - /** - * A pointer to the cell containing the currently open calendar day. - * - * @property _currentDay - * @type object - * @private - */ - _currentDay: null, - - initializer: function() { - var body = Y.one(Y.config.doc.body); - body.delegate(['mouseenter', 'focus'], this._startShow, CALENDAREVENT, this); - body.delegate(['mouseleave', 'blur'], this._startHide, CALENDAREVENT, this); - }, - - /** - * Initialise the Overlay in which information is displayed. - * - * @method __initOverlay - * @chainable - */ - _initOverlay: function() { - if (!this._panel) { - this._panel = new Y.Overlay({ - headerContent: Y.Node.create('

'), - bodyContent: Y.Node.create('
'), - visible: false, - render: true - }); - - this._panel.get(BOUNDINGBOX) - .addClass('calendar-event-panel'); - } - - return this; - }, - - /** - * Prepare to show the Overlay, and kick off the jobs that cause it to be shown. - * - * @method _startShow - * @param {EventFacade} e - * @private - */ - _startShow: function(e) { - if (this._isCurrentDayVisible(e.currentTarget)) { - // Only start the show if the current day isn't already visible. - return; - } - - this._cancelHide() - ._cancelShow() - - // Initialise the panel now - this will only happen once. This way - // it's ready for when the timer times out. - ._initOverlay(); - - - this._showTimer = setTimeout(Y.bind(function() { - var calendarCell = e.target.ancestor(CALENDAREVENT, true); - this._show(calendarCell); - }, this), this.get(EVENTDELAY)); - }, - - /** - * Display the Overlay immediately. - * - * @method _show - * @param {Node} dayCell The location that the Overlay should be displayed. - */ - _show: function(dayCell) { - var bb = this._panel.get(BOUNDINGBOX), - widgetPositionAlign = Y.WidgetPositionAlign, - calendarParent = dayCell.ancestor(DOT + CALENDARTABLE); - - bb.one(DOT + EVENTTITLE).set(INNERHTML, dayCell.getData(DATAPREFIX + 'title')); - bb.one(DOT + EVENTCONTENT).set(INNERHTML, dayCell.getData(DATAPREFIX + 'popupcontent')); - - // Set the ARIA attributes for the owning cell. - if (this._currentDay) { - this._currentDay.setAttribute(ARIACONTROLS, null); - } - dayCell.setAttribute(ARIACONTROLS, dayCell.get('id')); - - // Move the panel to the current target. - dayCell.appendChild(bb); - - // Keep track of the new day being shown. - this._currentDay = dayCell; - - this._panel.constrain(calendarParent); - this._panel - .set('width', calendarParent.get('offsetWidth') + 'px') - // Align it with the area clicked. - .align(calendarParent, [ - widgetPositionAlign.TC, - widgetPositionAlign.TC - ]) - // Show it. - .show(); - - bb.setAttribute('tabindex', '0') - .focus(); - }, - - /** - * Cancel the timers which would cause the overlay to be shown. - * - * @method _cancelShow - * @chainable - * @private - */ - _cancelShow: function() { - if (this._showTimer) { - clearTimeout(this._showTimer); - } - - return this; - }, - - /** - * Prepare to hide the Overlay, and kick off the jobs that cause it to be hidden. - * - * @method _startHide - * @param {EventFacade} e - * @private - */ - _startHide: function(e) { - if (e.type === 'blur' && e.currentTarget.contains(e.target)) { - return; - } - this._cancelShow() - ._cancelHide(); - this._hideTimer = setTimeout(Y.bind(function() { - this._hide(); - }, this), this.get(EVENTDELAY)); - }, - - /** - * Hide the Overlay immediately. - * - * @method _hide - */ - _hide: function() { - if (this._panel) { - this._panel.hide(); - } - }, - - /** - * Cancel the timers which would cause the overlay to be hidden. - * - * @method _cancelHide - * @chainable - * @private - */ - _cancelHide: function() { - if (this._hideTimer) { - clearTimeout(this._hideTimer); - } - - return this; - }, - - /** - * Determine whether the specified day is currently visible. - * - * @method _isCurrentDayVisible - * @param specifiedDay {Node} The Node to check visibility for. - * @private - */ - _isCurrentDayVisible: function(specifiedDay) { - if (!this._panel || !this._panel.get('visible')) { - return false; - } - - if (specifiedDay !== this._currentDay) { - return false; - } - - return true; - } -}, { - NAME: 'calendarInfo', - ATTRS: { - /** - * The delay to use before showing or hiding the calendar. - * - * @attribute delay - * @type Number - * @default 300 - */ - delay: { - value: 300 - } - } -}); - -Y.namespace('M.core_calendar.info').init = function(config) { - return new Info(config); -}; - - -}, '@VERSION@', {"requires": ["base", "node", "event-mouseenter", "event-key", "overlay", "moodle-calendar-info-skin"]}); diff --git a/calendar/yui/src/info/assets/skins/sam/moodle-calendar-info.css b/calendar/yui/src/info/assets/skins/sam/moodle-calendar-info.css deleted file mode 100644 index d895c9a3b09..00000000000 --- a/calendar/yui/src/info/assets/skins/sam/moodle-calendar-info.css +++ /dev/null @@ -1,24 +0,0 @@ -.calendar-event-panel { - background-color: #666; - border: 2px solid #666; - border-width: 0 2px 2px 0; -} - -.calendar-event-panel .yui3-overlay-content { - background-color: #fff; - border: 1px solid #555; - margin-top: -5px; - margin-left: -5px; -} - -.calendar-event-panel .yui3-overlay-content h2.eventtitle { - margin: 3px 5px 2px; - padding: 0; - text-align: center; -} - -.calendar-event-panel .eventcontent { - margin: 5px; - padding: 0; - text-align: center; -} diff --git a/calendar/yui/src/info/build.json b/calendar/yui/src/info/build.json deleted file mode 100644 index 71b3e85bf97..00000000000 --- a/calendar/yui/src/info/build.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "name": "moodle-calendar-info", - "builds": { - "moodle-calendar-info": { - "jsfiles": [ - "info.js" - ] - } - } -} diff --git a/calendar/yui/src/info/js/info.js b/calendar/yui/src/info/js/info.js deleted file mode 100644 index 9efe553b407..00000000000 --- a/calendar/yui/src/info/js/info.js +++ /dev/null @@ -1,278 +0,0 @@ -// This file is part of Moodle - http://moodle.org/ -// -// Moodle is free software: you can redistribute it and/or modify -// it under the terms of the GNU General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. -// -// Moodle is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU General Public License for more details. -// -// You should have received a copy of the GNU General Public License -// along with Moodle. If not, see . - -/** - * Overlay manager for the Moodle Calendar. - * - * @module moodle-core_calendar-info - * @package core_calendar - * @copyright 2014 Andrew Nicols - * @license http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later - * @main moodle-core_calendar-info - */ - -var ARIACONTROLS = 'aria-controls', - BOUNDINGBOX = 'boundingBox', - CALENDAREVENT = '[data-core_calendar-title]', - CALENDARTABLE = 'calendartable', - DATAPREFIX = 'core_calendar-', - DOT = '.', - EVENTCONTENT = 'eventcontent', - EVENTDELAY = 'delay', - EVENTTITLE = 'eventtitle', - INNERHTML = 'innerHTML', - - /** - * Overlay manager for the Moodle calendar. - * - * @namespace M.core_calendar - * @class Info - * @constructor - */ - - Info = function() { - Info.superclass.constructor.apply(this, arguments); - }; - - -Y.extend(Info, Y.Base, { - /** - * A pointer to the timer used for showing the panel. - * - * @property _showTimer - * @type object - * @private - */ - _showTimer: null, - - /** - * A pointer to the timer used for hiding the panel. - * - * @property _hideTimer - * @type object - * @private - */ - _hideTimer: null, - - /** - * A pointer for the Calendar Overlay. - * - * @property _panel - * @type object - * @private - */ - _panel: null, - - /** - * A pointer to the cell containing the currently open calendar day. - * - * @property _currentDay - * @type object - * @private - */ - _currentDay: null, - - initializer: function() { - var body = Y.one(Y.config.doc.body); - body.delegate(['mouseenter', 'focus'], this._startShow, CALENDAREVENT, this); - body.delegate(['mouseleave', 'blur'], this._startHide, CALENDAREVENT, this); - }, - - /** - * Initialise the Overlay in which information is displayed. - * - * @method __initOverlay - * @chainable - */ - _initOverlay: function() { - if (!this._panel) { - this._panel = new Y.Overlay({ - headerContent: Y.Node.create('

'), - bodyContent: Y.Node.create('
'), - visible: false, - render: true - }); - - this._panel.get(BOUNDINGBOX) - .addClass('calendar-event-panel'); - } - - return this; - }, - - /** - * Prepare to show the Overlay, and kick off the jobs that cause it to be shown. - * - * @method _startShow - * @param {EventFacade} e - * @private - */ - _startShow: function(e) { - if (this._isCurrentDayVisible(e.currentTarget)) { - // Only start the show if the current day isn't already visible. - return; - } - - this._cancelHide() - ._cancelShow() - - // Initialise the panel now - this will only happen once. This way - // it's ready for when the timer times out. - ._initOverlay(); - - - this._showTimer = setTimeout(Y.bind(function() { - var calendarCell = e.target.ancestor(CALENDAREVENT, true); - this._show(calendarCell); - }, this), this.get(EVENTDELAY)); - }, - - /** - * Display the Overlay immediately. - * - * @method _show - * @param {Node} dayCell The location that the Overlay should be displayed. - */ - _show: function(dayCell) { - var bb = this._panel.get(BOUNDINGBOX), - widgetPositionAlign = Y.WidgetPositionAlign, - calendarParent = dayCell.ancestor(DOT + CALENDARTABLE); - - bb.one(DOT + EVENTTITLE).set(INNERHTML, dayCell.getData(DATAPREFIX + 'title')); - bb.one(DOT + EVENTCONTENT).set(INNERHTML, dayCell.getData(DATAPREFIX + 'popupcontent')); - - // Set the ARIA attributes for the owning cell. - if (this._currentDay) { - this._currentDay.setAttribute(ARIACONTROLS, null); - } - dayCell.setAttribute(ARIACONTROLS, dayCell.get('id')); - - // Move the panel to the current target. - dayCell.appendChild(bb); - - // Keep track of the new day being shown. - this._currentDay = dayCell; - - this._panel.constrain(calendarParent); - this._panel - .set('width', calendarParent.get('offsetWidth') + 'px') - // Align it with the area clicked. - .align(calendarParent, [ - widgetPositionAlign.TC, - widgetPositionAlign.TC - ]) - // Show it. - .show(); - - bb.setAttribute('tabindex', '0') - .focus(); - }, - - /** - * Cancel the timers which would cause the overlay to be shown. - * - * @method _cancelShow - * @chainable - * @private - */ - _cancelShow: function() { - if (this._showTimer) { - clearTimeout(this._showTimer); - } - - return this; - }, - - /** - * Prepare to hide the Overlay, and kick off the jobs that cause it to be hidden. - * - * @method _startHide - * @param {EventFacade} e - * @private - */ - _startHide: function(e) { - if (e.type === 'blur' && e.currentTarget.contains(e.target)) { - return; - } - this._cancelShow() - ._cancelHide(); - this._hideTimer = setTimeout(Y.bind(function() { - this._hide(); - }, this), this.get(EVENTDELAY)); - }, - - /** - * Hide the Overlay immediately. - * - * @method _hide - */ - _hide: function() { - if (this._panel) { - this._panel.hide(); - } - }, - - /** - * Cancel the timers which would cause the overlay to be hidden. - * - * @method _cancelHide - * @chainable - * @private - */ - _cancelHide: function() { - if (this._hideTimer) { - clearTimeout(this._hideTimer); - } - - return this; - }, - - /** - * Determine whether the specified day is currently visible. - * - * @method _isCurrentDayVisible - * @param specifiedDay {Node} The Node to check visibility for. - * @private - */ - _isCurrentDayVisible: function(specifiedDay) { - if (!this._panel || !this._panel.get('visible')) { - return false; - } - - if (specifiedDay !== this._currentDay) { - return false; - } - - return true; - } -}, { - NAME: 'calendarInfo', - ATTRS: { - /** - * The delay to use before showing or hiding the calendar. - * - * @attribute delay - * @type Number - * @default 300 - */ - delay: { - value: 300 - } - } -}); - -Y.namespace('M.core_calendar.info').init = function(config) { - return new Info(config); -}; diff --git a/calendar/yui/src/info/meta/info.json b/calendar/yui/src/info/meta/info.json deleted file mode 100644 index b4db742fc3c..00000000000 --- a/calendar/yui/src/info/meta/info.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "moodle-calendar-info": { - "requires": [ - "base", - "node", - "event-mouseenter", - "event-key", - "overlay", - "moodle-calendar-info-skin" - ] - } -} diff --git a/theme/boost/amd/build/loader.min.js b/theme/boost/amd/build/loader.min.js index a4885a44fbd..89873f66318 100644 --- a/theme/boost/amd/build/loader.min.js +++ b/theme/boost/amd/build/loader.min.js @@ -1 +1 @@ -define(["jquery","./tether","core/event"],function(a,b,c){return window.jQuery=a,window.Tether=b,require(["theme_boost/util","theme_boost/alert","theme_boost/button","theme_boost/carousel","theme_boost/collapse","theme_boost/dropdown","theme_boost/modal","theme_boost/scrollspy","theme_boost/tab","theme_boost/tooltip","theme_boost/popover"],function(){a("body").popover({selector:'[data-toggle="popover"]',trigger:"focus"}),c.getLegacyEvents().done(function(b){a(document).on(b.FILTER_CONTENT_UPDATED,function(){a("body").popover({selector:'[data-toggle="popover"]',trigger:"focus"})})})}),{}}); \ No newline at end of file +define(["jquery","./tether","core/event"],function(a,b,c){return window.jQuery=a,window.Tether=b,require(["theme_boost/util","theme_boost/alert","theme_boost/button","theme_boost/carousel","theme_boost/collapse","theme_boost/dropdown","theme_boost/modal","theme_boost/scrollspy","theme_boost/tab","theme_boost/tooltip","theme_boost/popover"],function(){a("body").popover({selector:"[data-toggle=popover][data-trigger!=hover]"}),a("html").popover({container:"body",selector:"[data-toggle=popover][data-trigger=hover]",trigger:"hover"}),c.getLegacyEvents().done(function(b){a(document).on(b.FILTER_CONTENT_UPDATED,function(){a("body").popover({selector:'[data-toggle="popover"]',trigger:"focus"})})})}),{}}); \ No newline at end of file diff --git a/theme/boost/amd/src/loader.js b/theme/boost/amd/src/loader.js index ac95dea3560..51aff15d218 100644 --- a/theme/boost/amd/src/loader.js +++ b/theme/boost/amd/src/loader.js @@ -41,9 +41,15 @@ define(['jquery', './tether', 'core/event'], function(jQuery, Tether, Event) { 'theme_boost/popover'], function() { + // We do twice because: https://github.com/twbs/bootstrap/issues/10547 jQuery('body').popover({ - selector: '[data-toggle="popover"]', - trigger: 'focus' + selector: "[data-toggle=popover][data-trigger!=hover]" + }); + + jQuery("html").popover({ + container: "body", + selector: "[data-toggle=popover][data-trigger=hover]", + trigger: "hover" }); // We need to call popover automatically if nodes are added to the page later. diff --git a/theme/boost/scss/moodle/calendar.scss b/theme/boost/scss/moodle/calendar.scss index bd146188bb7..3a3de0798a0 100644 --- a/theme/boost/scss/moodle/calendar.scss +++ b/theme/boost/scss/moodle/calendar.scss @@ -141,20 +141,6 @@ $calendarEventUserColor: #dce7ec !default; // Pale blue. .calendar_event_user { border-color: $calendarEventUserColor; } - //.calendar-event-panel { - // background-color: $grayLighter; - // border: 2px solid $grayLighter; - // .yui3-overlay-content { - // padding: 19px; - // background-color: lighten($wellBackground, 3%); - // border: 1px solid darken($wellBackground, 7%); - // @include border-radius($baseBorderRadius); - // @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05)); - // } - //} - .calendar-event-panel { - @extend .card; - } .calendar-controls { .current { @@ -266,31 +252,6 @@ $calendarEventUserColor: #dce7ec !default; // Pale blue. } } - .calendar-event-panel { - //background-color: $grayLighter; - //border: 1px solid $grayLighter; - .yui3-overlay-content { - @extend .card; - // padding: 19px; - // background-color: lighten($wellBackground, 3%); - // border: 1px solid darken($wellBackground, 7%); - // @include border-radius($baseBorderRadius); - // @include box-shadow(inset 0 1px 1px rgba(0 ,0 ,0 , .05)); - h2 { - &.eventtitle { - line-height: 1.2; - font-size: 18px; - } - } - - .eventcontent { - img { - padding-right: 5px; - } - } - } - } - .calendar-controls { .previous, .current, diff --git a/theme/boost/templates/core_calendar/minicalendar_day_link.mustache b/theme/boost/templates/core_calendar/minicalendar_day_link.mustache new file mode 100644 index 00000000000..d4ce07caca4 --- /dev/null +++ b/theme/boost/templates/core_calendar/minicalendar_day_link.mustache @@ -0,0 +1,38 @@ +{{! + This file is part of Moodle - http://moodle.org/ + + Moodle is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + Moodle is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with Moodle. If not, see . +}} +{{! + @template core_calendar/minicalendar_day_link + + Displays link to calendar day in mini calendar, with hover tooltip. + + Example context (json): + { + "day": "Today", + "url": "http://example.com/", + "title": "Monday 2nd January", + "content": "Test site event" + } +}} +{{day}} diff --git a/theme/bootstrapbase/less/moodle/calendar.less b/theme/bootstrapbase/less/moodle/calendar.less index 6256bedf2d0..f8f9ca5d368 100644 --- a/theme/bootstrapbase/less/moodle/calendar.less +++ b/theme/bootstrapbase/less/moodle/calendar.less @@ -124,17 +124,6 @@ .calendar_event_user { border-color: @calendarEventUserColor; } - .calendar-event-panel { - background-color: @grayLighter; - border: 2px solid @grayLighter; - .yui3-overlay-content { - padding: 19px; - background-color: lighten(@wellBackground, 3%); - border: 1px solid darken(@wellBackground, 7%); - .border-radius(@baseBorderRadius); - .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .05)); - } - } .calendar-controls { .current { font-family: @headingsFontFamily; @@ -276,28 +265,6 @@ text-align: center; } } - .calendar-event-panel { - background-color: @grayLighter; - border: 1px solid @grayLighter; - .yui3-overlay-content { - padding: 19px; - background-color: lighten(@wellBackground, 3%); - border: 1px solid darken(@wellBackground, 7%); - .border-radius(@baseBorderRadius); - .box-shadow(inset 0 1px 1px rgba(0 ,0 ,0 , .05)); - h2 { - &.eventtitle { - line-height: 1.2; - font-size: 18px; - } - } - .eventcontent { - img { - padding-right: 5px; - } - } - } - } .calendar-controls { .previous, .current, diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css index 6e979da8749..1399cf55016 100644 --- a/theme/bootstrapbase/style/moodle.css +++ b/theme/bootstrapbase/style/moodle.css @@ -3265,21 +3265,6 @@ img.iconsmall { .path-calendar .maincalendar .calendar_event_user { border-color: #dce7ec; } -.path-calendar .maincalendar .calendar-event-panel { - background-color: #eee; - border: 2px solid #eee; -} -.path-calendar .maincalendar .calendar-event-panel .yui3-overlay-content { - padding: 19px; - background-color: #fdfdfd; - border: 1px solid #e3e3e3; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -} .path-calendar .maincalendar .calendar-controls .current { font-family: inherit; font-weight: bold; @@ -3402,28 +3387,6 @@ img.iconsmall { line-height: inherit; text-align: center; } -.block .calendar-event-panel { - background-color: #eee; - border: 1px solid #eee; -} -.block .calendar-event-panel .yui3-overlay-content { - padding: 19px; - background-color: #fdfdfd; - border: 1px solid #e3e3e3; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -} -.block .calendar-event-panel .yui3-overlay-content h2.eventtitle { - line-height: 1.2; - font-size: 18px; -} -.block .calendar-event-panel .yui3-overlay-content .eventcontent img { - padding-right: 5px; -} .block .calendar-controls .previous, .block .calendar-controls .current, .block .calendar-controls .next { diff --git a/theme/bootstrapbase/templates/core_calendar/minicalendar_day_link.mustache b/theme/bootstrapbase/templates/core_calendar/minicalendar_day_link.mustache new file mode 100644 index 00000000000..c3a003417c7 --- /dev/null +++ b/theme/bootstrapbase/templates/core_calendar/minicalendar_day_link.mustache @@ -0,0 +1,44 @@ +{{! + This file is part of Moodle - http://moodle.org/ + + Moodle is free software: you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation, either version 3 of the License, or + (at your option) any later version. + + Moodle is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License + along with Moodle. If not, see . +}} +{{! + @template core_calendar/minicalendar_day_link + + Displays link to calendar day in mini calendar, with hover tooltip. + + Example context (json): + { + "day": "Today", + "url": "http://example.com/", + "title": "Monday 2nd January", + "content": "Test site event" + } +}} +{{day}} +{{#js}} +require(['jquery'], function($) { + require(['theme_bootstrapbase/bootstrap'], function() { + $('#{{uniqid}}').popover(); + }); +}); +{{/js}}