Question about function loadCSSFile

[Antechinus]

Ok, so code says this:

Code Select Expand

// And of course, let's load the default CSS file.
loadCSSFile('index.css');

// Here is my luvly Responsive CSS
loadCSSFile('responsive.css', array('force_current' => false, 'validate' => true));

if ($context['right_to_left'])
loadCSSFile('rtl.css');

// We allow theme variants, because we're cool.
$context['theme_variant'] = '';
$context['theme_variant_url'] = '';
if (!empty($settings['theme_variants']))
{
// Overriding - for previews and that ilk.
if (!empty($_REQUEST['variant']))
$_SESSION['id_variant'] = $_REQUEST['variant'];
// User selection?
if (empty($settings['disable_user_variant']) || allowedTo('admin_forum'))
$context['theme_variant'] = !empty($_SESSION['id_variant']) ? $_SESSION['id_variant'] : (!empty($options['theme_variant']) ? $options['theme_variant'] : '');
// If not a user variant, select the default.
if ($context['theme_variant'] == '' || !in_array($context['theme_variant'], $settings['theme_variants']))
$context['theme_variant'] = !empty($settings['default_variant']) && in_array($settings['default_variant'], $settings['theme_variants']) ? $settings['default_variant'] : $settings['theme_variants'][0];

// Do this to keep things easier in the templates.
$context['theme_variant'] = '_' . $context['theme_variant'];
$context['theme_variant_url'] = $context['theme_variant'] . '/';

if (!empty($context['theme_variant']))
{
loadCSSFile('index' . $context['theme_variant'] . '.css');
if ($context['right_to_left'])
loadCSSFile('rtl' . $context['theme_variant'] . '.css');
}

What happens if some of these files don't exist? Examples:

1/ If a variant only changes colours it may not need to have an rtl_variant.css (pretty common).

2/ If the variant is doing small layout changes, it may make more sense to just include the variant code in index.css rather than a separate variant file (I have done this before).

3/ If a themer is writing responsive CSS they may want that included in index.css too, to save on http requests, so would not have a responsive.css file (have done this too). However, they would definitely not want their theme falling back to the default theme's equivalent file.

I can probably think of more use cases, but those are fairly obvious ones to start with.

Something similar applies to the javascript files:

Code Select Expand

// script.js and theme.js, always required, so always add them! Makes index.template.php cleaner and all.
loadJavascriptFile('script.js', array('default_theme' => true, 'defer' => false), 'smf_scripts');
loadJavascriptFile('theme.js', array(), 'theme_scripts');

They aren't always required, or at least they really shouldn't be. What if someone wants to merge js files to save requests, even if SMF doesn't do this by default (yup, done that too)? Will they need to hack Sources to stop 404's?

And does array('default_theme' => true mean that script.js will only ever be loaded from the default theme? (The same question applies to smf_jquery_plugins.js)

ETA: Come to think of it, since the Superfish and SMFTooltip plugins call hoverIntent, why are you loading it after the plugins that depend on it, instead of loading hoverIntent first?

[Antes]

I don't understand how loadCSSFile/JavascriptFile works or falls. It should check the theme first then fallback to default (or based-on). I had big headache on Lunarfall because of this fallback thingy? One other thing loading new things into theme requires either a modification to add those into load.php or wrote directly inside index.template, since we have loadCSSFile goodie -with auto cache handling- it seems second one is not recommended method anymore.

That's a small mistake I think hoverIntent should be loaded first we'll take care of it.

[Antechinus]

Yeah I'm a bit worried about how this loading works. It may have all been sorted, but at the moment it's looking like it's just another variation on locking down presentation in Sources, not by inline CSS this time but by forcing files to load even if you don't want them, with no control possible on a per theme basis.

If that's the case, it's a big step backwards for flexibility. If you have already had problems with it, that's not a good sign.

[live627]

http://live627.github.io/SMF2.1/function-loadCSSFile.html

Whoever made that function tried too hard.

I had big headache on Lunarfall because of this fallback

go  on....

One other thing loading new things into theme requires either a modification to add those into load.php or wrote directly inside index.template, since we have loadCSSFile goodie -with auto cache handling- it seems second one is not recommended method anymore.

you ca n call it in template_init, surely?

What happens if some of these files don't exist?

Nothing, they don't get added.

[Antes]

Load at theme then fallback to default (or based-on) only applies for theme.js, copy script.js into your custom theme yet SMF keeps loading script.js from default theme.

(If I'm missing something sorry about that :/)

[live627]

I see. So everything should load current theme then fallback.

[Antes]

I see. So everything should load current theme then fallback.

yeap.

[Antechinus]

Hang on. What if you do_not_want it to fallback to default, but don't want to include the called files in your theme either? I did specifically mention that in my post. How do you get around that? It used to be simple and obvious. You'd just call whatever files you wanted in index.template.php. It doesn't seem to be so simple and obvious any more.

What concerns me is that the files in question deal with presentation and behaviour. IOW, front end stuff. That being the case, they should be controllable by front end people, yes? Controlling the feral mongrels shouldn't require themers to start by writing a mod to disable a function in Load.php. I mean I can do that easily enough if necessary, but it seems a bit bonkers.

<?xml version="1.0"?>
<!DOCTYPE modification SYSTEM "http://www.simplemachines.org/xml/modification">
<modification xmlns="http://www.simplemachines.org/xml/modification" xmlns:smf="http://www.simplemachines.org/">
   <id>Antechinus:Control_Your_Own_Destiny</id>
   <version>1.0</version>
   <file name="$sourcedir/Load.php">
      <operation>
         <search position="replace"><![CDATA[   // And of course, let's load the default CSS file.
   loadCSSFile('index.css');

   // Here is my luvly Responsive CSS
   loadCSSFile('responsive.css', array('force_current' => false, 'validate' => true));

   if ($context['right_to_left'])
      loadCSSFile('rtl.css');

   // We allow theme variants, because we're cool.
   $context['theme_variant'] = '';
   $context['theme_variant_url'] = '';
   if (!empty($settings['theme_variants']))
   {
      // Overriding - for previews and that ilk.
      if (!empty($_REQUEST['variant']))
         $_SESSION['id_variant'] = $_REQUEST['variant'];
      // User selection?
      if (empty($settings['disable_user_variant']) || allowedTo('admin_forum'))
         $context['theme_variant'] = !empty($_SESSION['id_variant']) ? $_SESSION['id_variant'] : (!empty($options['theme_variant']) ? $options['theme_variant'] : '');
      // If not a user variant, select the default.
      if ($context['theme_variant'] == '' || !in_array($context['theme_variant'], $settings['theme_variants']))
         $context['theme_variant'] = !empty($settings['default_variant']) && in_array($settings['default_variant'], $settings['theme_variants']) ? $settings['default_variant'] : $settings['theme_variants'][0];

      // Do this to keep things easier in the templates.
      $context['theme_variant'] = '_' . $context['theme_variant'];
      $context['theme_variant_url'] = $context['theme_variant'] . '/';

      if (!empty($context['theme_variant']))
      {
         loadCSSFile('index' . $context['theme_variant'] . '.css');
         if ($context['right_to_left'])
            loadCSSFile('rtl' . $context['theme_variant'] . '.css');
      }
   }]]></search>
         <add><![CDATA[echo ' https://www.youtube.com/watch?v=yljbcRu3tiU
]]></add>
      </operation>
   </file>

[Antechinus]

Ok, tyre-kicking thoughts about possible solutions.

How about being able to set a flag in index.template.php, for files you do not want called from default? So you could do it much like the definition of variant names: have a comma-separated list of file names, and if any file is listed there then the theme will not fall back to default for that file.

This would be handy if you wanted to write your own responsive.css, and did not want to waste an http request by including a separate file. IOW, do the lot in index.css.

So then in Load.php you could have something like:

Code Select Expand

// Here is my luvly Responsive CSS
   loadCSSFile('responsive.css', array(($context['oh_no_you_bloody_well_dont'] ? '': 'force_current' => false,') 'validate' => true);

Or however you'd syntax that sucker when you have to get 'force_current' => false, into one tenary (can't be bothered thinking about PHP syntax right now).

ETA: On second thought it'd make more sense to just do it something like this:

Code Select Expand

// Here is my luvly Responsive CSS
if (empty($context['oh_no_you_bloody_well_dont']))
   {
   loadCSSFile('responsive.css', array('force_current' => false,' 'validate' => true);
   }

[Kindred]

Antechinus -- I think that you are missing a huge part of the point...
(and dropping back to the default theme for anything needed but not defined in the theme is a critical part of the system)

Seriously -- you are dragging backend stuff into YOUR concept of a front-end/presentation -- but I think it is not quite as you put it....

it has been commented to me separately that
Themers do not need to use source functions like loadcss() and loadjs() those functions are for modders who want to add their own files.

additionally the loadCSSFile() has a $params array....


there may be a few tweaks which can smooth things out a bit -- but you're getting a bit aggressive in your assertions about the presentation versus behavior...   and in some cases I disagree with those assertions.

[Antechinus]

I'm not missing the point. I know that falling back to default is a critical part of the system, but only when you want the fallback. When you specifically don't want it, it would be handy to be able to specify this.

At the moment this isn't possible, because at the moment index.template.php doesn't give any conditionals at all for loading of theme-specific CSS files while deliberately preventing default files being loaded. The loading of default files is hidden in the back end. Yes, you can add calls for files to index.template.php, but there doesn't appear to be any way of preventing fallback files from being called from default via Load.php.

IOW themers don't get a choice about it. The current 2.1 system is actually less flexible than 1.1.x in this regard.*

I know how the loading of mod CSS and JS files works (same way it has always worked). That's a separate issue. I'm not talking about that.

*Incidentally this applies to javascript files as well.

[Antechinus]

Ok, tell ya what. Let's assume, for the sake of discussion, that I am missing the point. I'll tell you what I want to do, and since this is the 2.1 support board you can tell me how to do it. If it can be done easily, no problem. If it can't, then there's an issue. Sound ok?

First case:

I want to write my own responsive.css. Since I'm not keen on useless HTTP requests I am going to incorporate my media queries into index.css. This means that my theme will not include a copy of a file named responsive.css, and that I do not want the default theme's copy of said file interfering.

How do I do this?

[Joshua Dickerson]

Whoever made that function tried too hard.

Why?

[live627]

template_css() has a hook called integrate_pre_css_output which was designed for this very problem. With it you can unset $context['css_files']['responsive.css']

http://live627.github.io/SMF2.1/function-template_css.html

[Antechinus]

Ok, so how do I use that in index.template.php for an array of files?

And presumably the same can be done with js files.

BTW, that page you linked to doesn't actually give any information.

[live627]

Whoever made that function tried too hard.

Why?

all params but seed are unnecessary imo

http://live627.github.io/SMF2.1/function-loadCSSFile.html

Ok, so how do I use that in index.template.php for an array of files?

In iinit, add thr hook

Code Select Expand


add_integration_function('integrate_pre_css_output', 'fixCSS', false, '$themedir/custom/fn.php', false);

Code Select Expand


function fixCSS()
{
global $context, $settings;

unset($context['css_files']['responsive.css']);
combineCSS($context['css_files']);
}

And presumably the same can be done with js files.

Yes, just replace css with js


HTH

[Antechinus]

So can I do an array of files like:

Code Select Expand

unset($context['css_files']['index.css, responsive.css, rtl.css']);

Come to think of it, can I unset the whole lot in one go, without writing an array? Not essential, but curious in case anyone wants to.

[live627]

   unset($context['css_files']['responsive.css'], $context['css_files']['rtl.css']);

Not limited to two parameters, Check php.net for more info on unset().

[Antechinus]

Ok, cool. So presumably that means it's not possible to unset the lot in one go. unset($context['css_files']['*.css']) would be awesome.

What determines the load order for CSS files? I'm just wondering about possibly tracking down cascade issues. Obviously the default ones that are clearly listed in Load.php will be loaded in that order, but what about mods?

Are the CSS files for mods loaded in alphabetical order? That's how they'd be listed in the default/css directory, so I suppose that's how they're done if they are in default/css.

If they're not in default/css, what happens then? Does it go by alphabetical order of mod directory name, then by file name?

IOW, load all in default/css alphabetically, then load A_mod/css alphabetically, then load Better_mod/css etc?

[live627]

AFAICT the files are added in the order in which they appear  in the code execution flow. So files loaded in template_iinit() get added before responsive.css  because that's the order in which they appear.