diff --git a/lib/formslib.php b/lib/formslib.php index 0ff5c0f61b9..d3aa51d72e1 100644 --- a/lib/formslib.php +++ b/lib/formslib.php @@ -1354,6 +1354,8 @@ class MoodleQuickForm extends HTML_QuickForm_DHTMLRulesTableless { $linktext = isset($buttonargs[3]) ? $buttonargs[3] : false; $element->_helpbutton = $OUTPUT->old_help_icon($page, $text, $module, $linktext); + //$OUTPUT->help_icon($identifier, $component, $linktext); + // $OUTPUT->help_icon($elementname, $module); // this is works } else if (!$suppresscheck) { print_error('nonexistentformelements', 'form', '', $elementname); @@ -1385,8 +1387,8 @@ class MoodleQuickForm extends HTML_QuickForm_DHTMLRulesTableless { function addHelpButton($elementname, $identifier, $component = 'moodle', $linktext = '', $suppresscheck = false) { global $OUTPUT; if (array_key_exists($elementname, $this->_elementIndex)) { - $element = $this->_elements[$this->_elementIndex[$elementname]]; - $element->_helpbutton = $OUTPUT->help_icon($identifier, $component, $linktext); + $element = $this->_elements[$this->_elementIndex[$elementname]]; + $element->_helpbutton = $OUTPUT->help_icon($identifier, $component, $linktext); } else if (!$suppresscheck) { debugging(get_string('nonexistentformelements', 'form', $elementname)); } diff --git a/lib/javascript-static.js b/lib/javascript-static.js index 3758d0e788f..dce0f977e21 100644 --- a/lib/javascript-static.js +++ b/lib/javascript-static.js @@ -1220,21 +1220,26 @@ function getElementsByClassName(oElm, strTagName, name) { function openpopup(event, args) { YAHOO.util.Event.preventDefault(event); - - var fullurl = args.url; - if (!args.url.match(/https?:\/\//)) { - fullurl = M.cfg.wwwroot + args.url; + + if (M.help_content.instance !== null) { + var id = '#' + args.id; + M.help_content.instance.load_from_openpopup(event, args); + } else { + var fullurl = args.url; + if (!args.url.match(/https?:\/\//)) { + fullurl = M.cfg.wwwroot + args.url; + } + var windowobj = window.open(fullurl,args.name,args.options); + if (!windowobj) { + return true; + } + if (args.fullscreen) { + windowobj.moveTo(0,0); + windowobj.resizeTo(screen.availWidth,screen.availHeight); + } + windowobj.focus(); + return false; } - var windowobj = window.open(fullurl,args.name,args.options); - if (!windowobj) { - return true; - } - if (args.fullscreen) { - windowobj.moveTo(0,0); - windowobj.resizeTo(screen.availWidth,screen.availHeight); - } - windowobj.focus(); - return false; } /* This is only used on a few help pages. */ @@ -1460,3 +1465,133 @@ function hide_item(itemid) { item.style.display = "none"; } } + +M.help_content = { + instance : null, + init : function(Y) { + Y.use('overlay', 'io', 'event-mouseenter', 'node', "*", function(Y) { + + var help_content_overlay = { + overlay : null, + init : function() { + var xy = Y.one('#helpcontent').getXY(); + + // Create an overlay from markup + this.overlay = new Y.Overlay({ + srcNode : "#helpcontent", + contentBox: '#helpcontent', + width:'400px', + xy:[xy[0] + 200, xy[1] + 300] + }); + this.overlay.render(); + this.overlay.hide(); + + Y.on("click", Y.bind(this.overlay.show, this.overlay), "#show"); + Y.on("click", Y.bind(this.overlay.hide, this.overlay), "#hide"); + + var menuButton = Y.one(".helplink"), + overlaycontent = this; + + var boundingBox = this.overlay.get("boundingBox"); + + // Hide the menu if the user clicks outside of its content + boundingBox.get("ownerDocument").on("mousedown", function (event) { + var oTarget = event.target; + + if (!oTarget.compareTo(menuButton) && + !menuButton.contains(oTarget) && + !oTarget.compareTo(boundingBox) && + !boundingBox.contains(oTarget)) { + overlaycontent.overlay.hide(); + } + }); + }, + + load_from_openpopup : function(event, node) { + var spinner = document.createElement('img'); + spinner.src = M.cfg.loadingicon; + this.overlay.set('bodyContent', spinner); + + var positionX = 0; + var positionY = 0; + + if (event.pageX && !Y.UA.chrome) { + positionX = event.pageX; + positionY = event.pageY; + } else if (event.pageX && !Y.UA.chrome) { + positionX = document.getElementById(node['id']).offsetLeft + 200; + positionY = document.getElementById(node['id']).offsetTop + 500; + } else { //chrome browser + positionX = event.clientX + document.body.scrollLeft ; + positionY = document.body.scrollTop; + if (event.clientX > document.body.scrollTop) { + positionY += event.clientY; + } + } + + if (Y.UA.chrome) { + positionX = event.clientX + document.body.scrollLeft ; + positionY = document.body.scrollTop; + if (event.clientX > document.body.scrollTop) { + positionY += event.clientY; + } + } + + var contentwidth = parseInt(this.overlay.get('width')); + var overlayalign = 'right'; + if (document.getElementById('page').offsetWidth <= (positionX + contentwidth )) { + overlayalign = 'left'; + } + + var WidgetPositionAlign = Y.WidgetPositionAlign; + if (overlayalign == 'right') { + this.overlay.set("align", {node:"#" + node['id'], + points:[WidgetPositionAlign.TL, WidgetPositionAlign.RC]}); + } else { + this.overlay.set("align", {node:"#" + node['id'], + points:[WidgetPositionAlign.TR, WidgetPositionAlign.LC]}); + } + + var fullurl = node.url; + if (!node.url.match(/https?:\/\//)) { + fullurl = M.cfg.wwwroot + node.url; + } + + var ajaxurl = fullurl + '&ajax=1'; + thishelpcontent = this; + + var cfg = { + method: 'get', + on: { + success: function(id, o, node) { + thishelpcontent.load_from_openpopup_callback(o.responseText); + }, + failure: function(id, o, node) { + var debuginfo = o.statusText; + if (M.cfg.developerdebug) { + o.statusText += ' (' + ajaxurl + ')'; + } + thishelpcontent.load_from_openpopup_callback('bodyContent',debuginfo); + } + } + }; + + var conn = Y.io(ajaxurl, cfg); + this.overlay.show(); + }, + + load_from_openpopup_callback : function(content) { + this.overlay.setStdModContent(Y.WidgetStdMod.BODY, content, Y.WidgetStdMod.REPLACE); + }, + + hideContent : function() { + help = this; + help.overlay.hide(); + } + } + help_content_overlay.init(); + M.help_content.instance = help_content_overlay; + + }); + } +} diff --git a/lib/outputactions.php b/lib/outputactions.php index e9427163c41..7fbde60c57e 100644 --- a/lib/outputactions.php +++ b/lib/outputactions.php @@ -122,7 +122,7 @@ class popup_action extends component_action { * @param array $params An array of popup parameters * @return void */ - public function __construct($event, $url, $name='popup', $params=array()) { + public function __construct($event, $url, $name='popup', $params=array()) { global $CFG; $this->name = $name; @@ -143,7 +143,12 @@ class popup_action extends component_action { $this->params[$var] = $params[$var]; } } - parent::__construct($event, 'openpopup', array('url' => $url->out(false), 'name' => $name, 'options' => $this->get_js_options($params))); + + $attributes = array('url' => $url->out(false), 'name' => $name, 'options' => $this->get_js_options($params)); + if (array_key_exists('id', $params)) { + $attributes['id'] = $params['id']; + } + parent::__construct($event, 'openpopup', $attributes); } /** diff --git a/lib/outputrenderers.php b/lib/outputrenderers.php index 5f42de24a3e..faf66ee17fd 100644 --- a/lib/outputrenderers.php +++ b/lib/outputrenderers.php @@ -62,7 +62,7 @@ class renderer_base { * @return string */ public function render(renderable $widget) { - $rendermethod = 'render_'.get_class($widget); + $rendermethod = 'render_'.get_class($widget); if (method_exists($this, $rendermethod)) { return $this->$rendermethod($widget); } @@ -623,6 +623,10 @@ class core_renderer extends renderer_base { $output = $this->container_end_all(true); + $helpcontent_body = html_writer::tag('div', '', array('class'=>'helpcontent_body')); + $output .= html_writer::tag('div', $helpcontent_body, array('id'=>'helpcontent', 'class'=>'yui3-overlay-loading')); + $this->page->requires->js_init_call('M.help_content.init'); + $footer = $this->opencontainers->pop('header/footer'); if (debugging() and $DB and $DB->is_transaction_started()) { @@ -645,7 +649,7 @@ class core_renderer extends renderer_base { $footer = str_replace(self::END_HTML_TOKEN, $this->page->requires->get_end_code(), $footer); $this->page->set_state(moodle_page::STATE_DONE); - + return $output . $footer; } @@ -739,7 +743,7 @@ class core_renderer extends renderer_base { $output = html_writer::tag('a', get_string('skipa', 'access', $skiptitle), array('href' => '#sb-' . $bc->skipid, 'class' => 'skip-block')); $skipdest = html_writer::tag('span', '', array('id' => 'sb-' . $bc->skipid, 'class' => 'skip-block-to')); } - + $output .= html_writer::start_tag('div', $bc->attributes); $controlshtml = $this->block_controls($bc->controls); @@ -1460,9 +1464,9 @@ END; $attributes = array('href'=>$url, 'title'=>$title); $id = html_writer::random_id('helpicon'); $attributes['id'] = $id; - $this->add_action_handler(new popup_action('click', $url), $id); + $this->add_action_handler(new popup_action('click', $url, 'popup', array('id'=>$id)), $id); $output = html_writer::tag('a', $output, $attributes); - + // and finally span return html_writer::tag('span', $output, array('class' => 'helplink')); } @@ -1476,7 +1480,7 @@ END; * @return string HTML fragment */ public function help_icon($identifier, $component = 'moodle', $linktext = '') { - $icon = new help_icon($identifier, $component); + $icon = new help_icon($identifier, $component); $icon->diag_strings(); if ($linktext === true) { $icon->linktext = get_string($icon->identifier, $icon->component); @@ -1523,7 +1527,7 @@ END; $attributes = array('href'=>$url, 'title'=>$title); $id = html_writer::random_id('helpicon'); $attributes['id'] = $id; - $this->add_action_handler(new popup_action('click', $url), $id); + $this->add_action_handler(new popup_action('click', $url, 'popup', array('id'=>$id)), $id); $output = html_writer::tag('a', $output, $attributes); // and finally span diff --git a/lib/outputrequirementslib.php b/lib/outputrequirementslib.php index 776acabb2a3..099fbcda1ca 100644 --- a/lib/outputrequirementslib.php +++ b/lib/outputrequirementslib.php @@ -241,7 +241,7 @@ class page_requirements_manager { } // accessibility stuff - $this->skip_link_to('maincontent', get_string('tocontent', 'access')); + $this->skip_link_to('maincontent', get_string('tocontent', 'access')); // to be removed soon $this->yui2_lib('dom'); // at least javascript-static.js needs to be migrated to YUI3 @@ -249,8 +249,7 @@ class page_requirements_manager { $this->string_for_js('confirmation', 'admin'); $this->string_for_js('cancel', 'moodle'); $this->string_for_js('yes', 'moodle'); - $this->js_init_call('M.util.init_help_icons'); - + if ($page->pagelayout === 'frametop') { $this->js_init_call('M.util.init_frametop'); } @@ -715,8 +714,8 @@ class page_requirements_manager { * @param string $function The name of the function to call * @param array $arguments An optional array of argument parameters to pass to the function * @return void - */ - public function event_handler($selector, $event, $function, array $arguments = null) { + */ + public function event_handler($selector, $event, $function, array $arguments = null) { $this->eventhandlers[] = array('selector'=>$selector, 'event'=>$event, 'function'=>$function, 'arguments'=>$arguments); } @@ -937,13 +936,13 @@ class page_requirements_manager { * @return string the HTML code to to at the end of the page. */ public function get_end_code() { - global $CFG; + global $CFG; // add other requested modules $output = $this->get_extra_modules_code(); // add missing YUI2 YUI - to be removed once we convert everything to YUI3! $output .= $this->get_yui2lib_code(); - + // all the other linked scripts - there should be as few as possible if ($this->jsincludes['footer']) { foreach ($this->jsincludes['footer'] as $url) { diff --git a/theme/base/style/core.css b/theme/base/style/core.css index e56c0646e53..bb4ae93850d 100644 --- a/theme/base/style/core.css +++ b/theme/base/style/core.css @@ -533,3 +533,15 @@ body.tag .managelink {padding: 5px;} * Web Service */ #webservice-doc-generator td {text-align: left;border: 0px solid black;} + + +/** + * Help Content (pop-up) + */ +#helpcontent { background-color: #FFE691; border: 1px solid #848484; z-index: 10; } +#show { margin-left:5px; padding:0; } +#hide { float: right; } +.closehelpbutton { border: none; background: none; } +.yui3-js-enabled .yui3-overlay-loading { top:-1000em; left:-1000em; position:absolute; display: none; } +.yui3-widget-bd { float: none; clear: both; margin: 1em;} +#helpcontent .helpheading {font-size: 1em;}