Moodle

Need a require_css function, like require_js

Details

  • Type: New Feature New Feature
  • Status: Closed Closed
  • Priority: Critical Critical
  • Resolution: Fixed
  • Affects Version/s: 1.9.2
  • Fix Version/s: 2.0
  • Component/s: Libraries
  • Labels:
    None
  • Affected Branches:
    MOODLE_19_STABLE
  • Fixed Branches:
    MOODLE_20_STABLE

Description

It would be really, really nice to have a require_css function that works a bit like require_js. It would make it much easier for plugins and patches that need to get stylesheet links into the header, but which don't make the print_header call directly. See http://cvs.moodle.org/contrib/plugins/admin/report/userroles/index.php?revision=1.2&view=markup for an implementation. You aslo need to change the $meta .= "\n".require_js(); line in print_header.

Activity

Hide
Olli Savolainen added a comment -

As we are approaching AJAXy times, I think it would help if this function had a parameter to make it load the requested css via javascript. Currently I am using this for hiding an element (repaginating form) before the page gets loaded if the user has javascript - if they don't, that element displays as an alternative for the ajax form.

In moodle quiz UI redesign, I currently have this hack in weblib.php print_header(), and I am not sure, this should probably be done via YUI as the newer versions provide the facilities for dynamically loading things, and they are probably more reliable than some piece of code I cut-and-pasted from http://some.randomurldotcom.

$meta .= <<<EOF
<script>
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'edit-js.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);

</script>

EOF;

Show
Olli Savolainen added a comment - As we are approaching AJAXy times, I think it would help if this function had a parameter to make it load the requested css via javascript. Currently I am using this for hiding an element (repaginating form) before the page gets loaded if the user has javascript - if they don't, that element displays as an alternative for the ajax form. In moodle quiz UI redesign, I currently have this hack in weblib.php print_header(), and I am not sure, this should probably be done via YUI as the newer versions provide the facilities for dynamically loading things, and they are probably more reliable than some piece of code I cut-and-pasted from http://some.randomurldotcom. $meta .= <<<EOF <script> var headID = document.getElementsByTagName("head")[0]; var cssNode = document.createElement('link'); cssNode.type = 'text/css'; cssNode.rel = 'stylesheet'; cssNode.href = 'edit-js.css'; cssNode.media = 'screen'; headID.appendChild(cssNode); </script> EOF;
Hide
Tim Hunt added a comment -

Olli, for HTML that is not normally needed, but is needed by my JavaScript, my preferred approach is to generate the the HTML in my JavaScript code, and have any necessary CSS already in a stylesheet attached to the page.

For HTML that should be visible normally, but which is irrelevant with JavaScript on, I prefer to use JavaScript to add a class to an element, that triggers a display: none in one of the stylesheets.

Therefore, I don't really see the need for what you propose. For now I am just going to do a basic implementation.

Show
Tim Hunt added a comment - Olli, for HTML that is not normally needed, but is needed by my JavaScript, my preferred approach is to generate the the HTML in my JavaScript code, and have any necessary CSS already in a stylesheet attached to the page. For HTML that should be visible normally, but which is irrelevant with JavaScript on, I prefer to use JavaScript to add a class to an element, that triggers a display: none in one of the stylesheets. Therefore, I don't really see the need for what you propose. For now I am just going to do a basic implementation.
Hide
Olli Savolainen added a comment -

Ah, yes. I have actually done that in an earlier development, but forgotten about it.

Show
Olli Savolainen added a comment - Ah, yes. I have actually done that in an earlier development, but forgotten about it.
Hide
Olli Savolainen added a comment -

The thing is though, the JS I am talking about still needs to load in the header whether it just toggles a class or loads extra CSS: otherwise, an element, which should only show if the user doesn't have javascript, will flicker at every load of the page.

Show
Olli Savolainen added a comment - The thing is though, the JS I am talking about still needs to load in the header whether it just toggles a class or loads extra CSS: otherwise, an element, which should only show if the user doesn't have javascript, will flicker at every load of the page.
Hide
Olli Savolainen added a comment -

Just to note it here, too: require_js indeed has a parameter to load js in the header (in order to do what Tim suggests above) even in moodle 2.0, though the default is to load it at the end of the content.
http://docs.moodle.org/en/Development:JavaScript_guidelines#Getting_Moodle_to_load_your_JavaScript_files

Show
Olli Savolainen added a comment - Just to note it here, too: require_js indeed has a parameter to load js in the header (in order to do what Tim suggests above) even in moodle 2.0, though the default is to load it at the end of the content. http://docs.moodle.org/en/Development:JavaScript_guidelines#Getting_Moodle_to_load_your_JavaScript_files
Hide
Tim Hunt added a comment -

This got done the other day as part of MDL-16695.

Show
Tim Hunt added a comment - This got done the other day as part of MDL-16695.

People

Vote (5)
Watch (3)

Dates

  • Created:
    Updated:
    Resolved: