====== JS replacements Plugin ======

---- plugin ----
description: Extends JSINFO with 'replacements' for usage in JS scripts
author     : Oscar Segura Samper
email      : rellampec@hotmail.com 
type       : action
lastupdate : 2020-05-10
compatible : Greebo
depends    : 
conflicts  : 
similar    : 
tags       : javascript, jquery

downloadurl: https://github.com/rellampec/dokuwiki-jsreplacements/tarball/master
bugtracker : https://github.com/rellampec/dokuwiki-jsreplacements/issues
sourcerepo : https://github.com/rellampec/dokuwiki-jsreplacements

----

===== Installation =====

Install the plugin using the [[plugin:plugin|Plugin Manager]] and the download URL above, which points to latest version of the plugin. Refer to [[:Plugins]] on how to install plugins manually.

===== Usage =====
This plugins exposes the [[devel:style.ini#replacements]] through the JavaScript [[devel:javascript#jsinfo|JSINFO]] environment variable.

===== Examples/Usage =====

====Adaptive Site width when sidebar is present====

Some templates with support for [[faq:sidebar]] shrink the content ''width'' when the sidebar is present. With given the html structure they have, the only way to provide a pure ''css'' solution would be to have the [[https://www.w3.org/TR/selectors-4/#relational|relational pseudo class :has]] (**level 4 css**), provided that you can select the dokuwiki site when the sidebar is present.

However, '':has'' is still [[https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility|not supported]] by any major browser, and only ''jQuery'' provides the required support. In other words, to solve this you need to use [[devel:javascript|javascript]] by for example using the **''conf/userscript.js''** file.

This example ensures that your **content** will keep the ''width'' when you include ''sidebar'' to templates in the family of the [[template:starter| starter template]], specially the [[template:dokuwiki| dokuwiki template]], which provides the ''%%__site_width__%%'' and the ''%%__sidebar_width__%%'' placeholder variables.

<code javascript conf/userscript.js>
(function (window, document, undefined) {
  jQuery(document).ready(function() {  
    $sidebar     = jQuery("#dokuwiki__aside");
    $site        = jQuery("#dokuwiki__site");
    replacements = JSINFO.replacements;
    var site_width, sidebar_width;
    
    if ($sidebar.length && $site.length && replacements) {
      site_width    = replacements.__site_width__    || ($site.css('max-width') + "px");
      sidebar_width = replacements.__sidebar_width__ || ($sidebar.css('max-width') + "px");
      
      if (site_width && sidebar_width) {
        //console.log("adapting site max-width to", site_width + ' + ' + sidebar_width, "from", $site.css('max-width'));
        $site.css({'max-width': 'calc(' + site_width + ' + ' + sidebar_width + ')'});
        //console.log("new site max-width", $site.css('max-width'), $site);
      }
    }
    
  });
})(window, document);

</code>

===== Development =====

=== Change Log ===

{{rss>https://github.com/rellampec/dokuwiki-jsreplacements/commits/master.atom date}} 

=== Known Bugs and Issues ===

Please report bugs or feature requests at the [[https://github.com/rellampec/dokuwiki-jsreplacements/issues|Bug tracker]].

=== ToDo/Wish List ===

  * add admin configuration to expose other configuration settings