Difference between revisions of "Dynamic Navigation"

From Organic Design wiki
(New page: == Show/Hide Boxes == Hi Peder, I've a...)
 
m
 
(12 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{legacy}}
 +
 
== Show/Hide Boxes ==
 
== Show/Hide Boxes ==
Hi Peder, I've added the DynamicNavigation code from WikiNews front page, it involves three parts:
+
This method is from [[News:Main Page|Wiki News front page]], which are maintained by Wikipedia users [[w:User:Mike Dillon|Mike Dillon]], [[w:User:R. Koot|R. Koot]] and [[w:User:SG|SG]]. The main page covering this is [[wikipedia:Wikipedia:NavFrame|Wikipedia:NavFrame]] (I think). It involves three parts, CSS styles, JavaScript code and a template, which follow here:
*[[MediaWiki:Common.css]] ''- the CSS styles''
 
*[[MediaWiki:Common.js]] ''- the JavaScript code which extends the DynamicNavigation areas''
 
*[[Template:Dynamic navigation]] ''- The template used to create a DynamicNavigation area''
 
In your wiki the JS and CSS articles contain no other code apart from that required by DynamicNavigation, but when setting it up on a different wiki you may find those articles already populated. If this is the case, just append them with the DynamicNavigation code from the corresponding articles on this wiki. The [[Template:Dynamic navigation|Dynamic navigation template]] contains usage instructions.
 
  
 
{{Dynamic navigation
 
{{Dynamic navigation
 
|BGCOLOR=#ffcccc
 
|BGCOLOR=#ffcccc
|TITLE=Add these CSS rules to [[MediaWiki:Common.css]]
+
|TITLE=Add these CSS rules to '''MediaWiki:Common.css'''
 
|CONTENT=<css>
 
|CONTENT=<css>
 
div.Boxmerge,
 
div.Boxmerge,
Line 64: Line 62:
 
</css>
 
</css>
 
|SMALLCONTENT=
 
|SMALLCONTENT=
|EXT=NavOnce
+
|EXT=NavOnce NavShow
 
}}
 
}}
 
  
 
{{Dynamic navigation
 
{{Dynamic navigation
 
|BGCOLOR=#ccffcc
 
|BGCOLOR=#ccffcc
|TITLE=Add this JavaScript to [[MediaWiki:Common.js]]
+
|TITLE=Add this JavaScript to '''MediaWiki:Common.js'''
 
|CONTENT=<js>
 
|CONTENT=<js>
 
// for backwards compatibility
 
// for backwards compatibility
Line 103: Line 100:
 
     var reCache = {};
 
     var reCache = {};
 
     return function (element, className) {
 
     return function (element, className) {
       return (reCache[className] ? reCache[className] : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
+
       return (reCache[className]
 +
        ? reCache[className]
 +
        : (reCache[className] = new RegExp("(?:\\s|^)" + className + "(?:\\s|$)"))).test(element.className);
 
     };
 
     };
 
  })();
 
  })();
Line 269: Line 268:
 
|EXT=NavOnce
 
|EXT=NavOnce
 
}}
 
}}
 
  
 
{{Dynamic navigation
 
{{Dynamic navigation
 
|BGCOLOR=#ccccff
 
|BGCOLOR=#ccccff
|TITLE=Create the [[Template:DynamicNavigation]] containing this wikitext
+
|TITLE=Create the '''Template:DynamicNavigation''' containing this wikitext
 
|CONTENT=<pre>
 
|CONTENT=<pre>
 
<div style="clear:both;text-align:center;{{#if:{{{WIDTH|}}}|width:{{{WIDTH}}}| }};margin:auto;"  align="center" class="NavFrame {{{EXT|}}}">
 
<div style="clear:both;text-align:center;{{#if:{{{WIDTH|}}}|width:{{{WIDTH}}}| }};margin:auto;"  align="center" class="NavFrame {{{EXT|}}}">
Line 293: Line 291:
 
   WIDTH  = Optional parameter to limit width
 
   WIDTH  = Optional parameter to limit width
 
   EXT    = Optional extentions [space seperated list. case-sensitive] so far only NavOnce
 
   EXT    = Optional extentions [space seperated list. case-sensitive] so far only NavOnce
       EXT=NavOnce    =    only allow one navbox with this extention visible at a time (closes other one's)</pre>
+
       EXT=NavOnce    =    only allow one navbox with this extention visible at a time (closes other one's)
</noinclude>
+
</pre><tt>&nbsp;&nbsp;&lt;/pre>&lt;/noinclude></tt><pre>
 
</pre>
 
</pre>
 
|SMALLCONTENT=
 
|SMALLCONTENT=
Line 300: Line 298:
 
}}
 
}}
  
== Language Preference ==
+
== To make the first open by default ==
I've made this quick extension, [[OD:Extension:ExtraMagic.php|ExtraMagic]], which will add some useful magic words including the current users name, language pref and skin pref. They are accessed with the following magic words:
+
At the end of the last function (called ''createNavigationBarToggleButton'') there are two loops which close all the navbars. The first loops closes the separate navs and the second closes the grouped ones (that can have only one open at a time). To make either kind default to having their first navbar open, start the loop at 2 instead of 1.
<pre>
 
{{CURRENTUSER}}
 
{{CURRENTLANG}}
 
{{CURRENTSKIN}}
 
</pre>
 
 
 
If you also install [[MW:Extension:ParserFunctions|ParserFunctions]] then you can then do conditional content based on lang pref, for example:
 
<pre>
 
<div class="{{#ifeq:{{CURRENTLANG}}|en|english-example|other-langs}}">
 
</pre>
 
 
 
which would give the following for english users
 
<pre>
 
<div class="english-example">
 
</pre>
 
 
 
or this for everyone else
 
<pre>
 
<div class="other-langs">
 
</pre>
 

Latest revision as of 22:41, 18 November 2014

Legacy.svg Legacy: This article describes a concept that has been superseded in the course of ongoing development on the Organic Design wiki. Please do not develop this any further or base work on this concept, this is only useful for a historic record of work done. You may find a link to the currently used concept or function in this article, if not you can contact the author to find out what has taken the place of this legacy item.


Show/Hide Boxes

This method is from [Page|Wiki News front page], which are maintained by Wikipedia users Mike Dillon, R. Koot and SG. The main page covering this is Wikipedia:NavFrame (I think). It involves three parts, CSS styles, JavaScript code and a template, which follow here:




To make the first open by default

At the end of the last function (called createNavigationBarToggleButton) there are two loops which close all the navbars. The first loops closes the separate navs and the second closes the grouped ones (that can have only one open at a time). To make either kind default to having their first navbar open, start the loop at 2 instead of 1.