|
|
(30 intermediate revisions not shown) |
Line 1: |
Line 1: |
| <html> | | <html> |
| <script type="text/javascript"> | | <script type="text/javascript"> |
- | /**
| + | (function($) { |
- | * Dynamic Navigation Bars. See [[Wikipedia:NavFrame]]
| + | $.fn.extend({ |
- | *
| + | collapsiblePanel: function() { |
- | * Based on script from en.wikipedia.org, 2008-09-15.
| + | // Call the ConfigureCollapsiblePanel function for the selected element |
- | *
| + | return $(this).each(ConfigureCollapsiblePanel); |
- | * @source www.mediawiki.org/wiki/MediaWiki:Gadget-NavFrame.js
| + | |
- | * @maintainer Helder.wiki, 2012–2013
| + | |
- | * @maintainer Krinkle, 2013
| + | |
- | */
| + | |
- | ( function () { | + | |
- |
| + | |
- | // Set up the words in your language
| + | |
- | var collapseCaption = 'hide';
| + | |
- | var expandCaption = 'show';
| + | |
- |
| + | |
- | var navigationBarHide = '[' + collapseCaption + ']';
| + | |
- | var navigationBarShow = '[' + expandCaption + ']';
| + | |
- |
| + | |
- | /**
| + | |
- | * Shows and hides content and picture (if available) of navigation bars.
| + | |
- | *
| + | |
- | * @param {number} indexNavigationBar The index of navigation bar to be toggled
| + | |
- | * @param {jQuery.Event} e Event object
| + | |
- | */
| + | |
- | function toggleNavigationBar( indexNavigationBar, e ) {
| + | |
- | var navChild, | + | |
- | navToggle = document.getElementById( 'NavToggle' + indexNavigationBar ),
| + | |
- | navFrame = document.getElementById( 'NavFrame' + indexNavigationBar );
| + | |
- |
| + | |
- | // Prevent browser from jumping to href "#"
| + | |
- | e.preventDefault();
| + | |
- |
| + | |
- | if ( !navFrame || !navToggle ) {
| + | |
- | return false;
| + | |
- | }
| + | |
- |
| + | |
- | // If shown now
| + | |
- | if ( navToggle.firstChild.data == navigationBarHide ) {
| + | |
- | for ( navChild = navFrame.firstChild; navChild != null; navChild = navChild.nextSibling ) {
| + | |
- | if ( hasClass( navChild, 'NavPic' ) ) {
| + | |
- | navChild.style.display = 'none';
| + | |
- | }
| + | |
- | if ( hasClass( navChild, 'NavContent' ) ) {
| + | |
- | navChild.style.display = 'none';
| + | |
- | }
| + | |
- | }
| + | |
- | navToggle.firstChild.data = navigationBarShow;
| + | |
- |
| + | |
- | // If hidden now
| + | |
- | } else if ( navToggle.firstChild.data == navigationBarShow ) {
| + | |
- | for ( navChild = navFrame.firstChild; navChild != null; navChild = navChild.nextSibling ) {
| + | |
- | if ( $( navChild ).hasClass( 'NavPic' ) || $( navChild ).hasClass( 'NavContent' ) ) {
| + | |
- | navChild.style.display = 'block';
| + | |
- | }
| + | |
- | }
| + | |
- | navToggle.firstChild.data = navigationBarHide;
| + | |
| } | | } |
| + | }); |
| + | |
| + | })(jQuery); |
| + | |
| + | function ConfigureCollapsiblePanel() { |
| + | $(this).addClass("ui-widget"); |
| + | |
| + | // Wrap the contents of the container within a new div. |
| + | $(this).children().wrapAll("<div class='collapsibleContainerContent ui-widget-content'></div>"); |
| + | |
| + | // Create a new div as the first item within the container. Put the title of the panel in here. |
| + | $("<div class='collapsibleContainerTitle ui-widget-header'><div>" + $(this).attr("title") + "</div></div>").prependTo($(this)); |
| + | |
| + | // Assign a call to CollapsibleContainerTitleOnClick for the click event of the new title div. |
| + | $(".collapsibleContainerTitle", this).click(CollapsibleContainerTitleOnClick); |
| } | | } |
- |
| + | function CollapsibleContainerTitleOnClick() { |
- | /**
| + | // The item clicked is the title div... get this parent (the overall container) and toggle the content within it. |
- | * Adds show/hide-button to navigation bars.
| + | $(".collapsibleContainerContent", $(this).parent()).slideToggle(); |
- | *
| + | |
- | * @param {jQuery} $content
| + | strBefore = "collapse"; |
- | */
| + | str = "expand"; |
- | function createNavigationBarToggleButton( $content ) { | + | if ($(this).children('.collapsibleContainerTitle div').html().indexOf("expand") >= 0) |
- | var i, j, navFrame, navToggle, navToggleText, navChild,
| + | { |
- | indexNavigationBar = 0,
| + | str = [strBefore, strBefore = str][0]; |
- | navFrames = $content.find( 'div.NavFrame' ).toArray();
| + | } |
- |
| + | $(this).children('.collapsibleContainerTitle div').html($(this).children('.collapsibleContainerTitle div').html().replace(strBefore, str)); |
- | // Iterate over all (new) nav frames
| + | |
- | for ( i = 0; i < navFrames.length; i++ ) {
| + | |
- | navFrame = navFrames[i];
| + | |
- | // If found a navigation bar
| + | |
- | indexNavigationBar++;
| + | |
- | navToggle = document.createElement( 'a' );
| + | |
- | navToggle.className = 'NavToggle';
| + | |
- | navToggle.setAttribute( 'id', 'NavToggle' + indexNavigationBar );
| + | |
- | navToggle.setAttribute( 'href', '#' );
| + | |
- | $( navToggle ).on( 'click', $.proxy( toggleNavigationBar, null, indexNavigationBar ) );
| + | |
- |
| + | |
- | navToggleText = document.createTextNode( navigationBarHide );
| + | |
- | for ( navChild = navFrame.firstChild; navChild != null; navChild = navChild.nextSibling ) {
| + | |
- | if ( $( navChild ).hasClass( 'NavPic' ) || $( navChild ).hasClass( 'NavContent' ) ) {
| + | |
- | if ( navChild.style.display == 'none' ) {
| + | |
- | navToggleText = document.createTextNode( navigationBarShow );
| + | |
- | break;
| + | |
- | }
| + | |
- | }
| + | |
- | }
| + | |
- |
| + | |
- | navToggle.appendChild( navToggleText );
| + | |
- | // Find the NavHead and attach the toggle link (Must be this complicated because Moz's firstChild handling is borked)
| + | |
- | for ( j = 0; j < navFrame.childNodes.length; j++ ) {
| + | |
- | if ( $( navFrame.childNodes[j] ).hasClass( 'NavHead' ) ) {
| + | |
- | navFrame.childNodes[j].appendChild( navToggle );
| + | |
- | }
| + | |
- | }
| + | |
- | navFrame.setAttribute( 'id', 'NavFrame' + indexNavigationBar );
| + | |
- | }
| + | |
| } | | } |
- |
| + | $(document).ready(function() { |
- | mw.hook( 'wikipage.content' ).add( createNavigationBarToggleButton );
| + | $(".collapsibleContainer").collapsiblePanel(); |
- |
| + | }); |
- | }()); | + | |
| </script> | | </script> |
| + | |
| <style type="text/css"> | | <style type="text/css"> |
- | /* Standard Navigationsleisten, aka box hiding thingy
| + | .collapsibleContainer |
- | from .de. Documentation at [[Wikipedia:NavFrame]]. */
| + | { |
- | div.NavFrame {
| + | border:none; |
- | margin: 0;
| + | |
- | padding: 4px;
| + | |
- | border: 1px solid #aaa; | + | |
- | text-align: center;
| + | |
- | border-collapse: collapse;
| + | |
- | font-size: 95%;
| + | |
- | }
| + | |
- | div.NavFrame + div.NavFrame {
| + | |
- | border-top-style: none;
| + | |
- | border-top-style: hidden;
| + | |
- | }
| + | |
- | div.NavPic {
| + | |
- | background-color: #fff;
| + | |
- | margin: 0;
| + | |
- | padding: 2px;
| + | |
- | /* @noflip */
| + | |
- | float: left;
| + | |
- | }
| + | |
- | div.NavFrame div.NavHead {
| + | |
- | height: 1.6em;
| + | |
- | font-weight: bold;
| + | |
- | background-color: #ccf;
| + | |
- | position: relative;
| + | |
| } | | } |
- | div.NavFrame p,
| + | |
- | div.NavFrame div.NavContent,
| + | .collapsibleContainerTitle |
- | div.NavFrame div.NavContent p {
| + | { |
- | font-size: 100%; | + | cursor:pointer; |
| } | | } |
- | div.NavEnd {
| + | |
- | margin: 0; | + | .collapsibleContainerTitle div |
- | padding: 0; | + | { |
- | line-height: 1px; | + | padding-top:5px; |
- | clear: both; | + | padding-left:10px; |
| + | color:Blue; |
| + | font-size:13px; |
| } | | } |
- | a.NavToggle {
| + | |
- | position: absolute; | + | .collapsibleContainerContent |
- | top: 0;
| + | { |
- | /* @noflip */
| + | padding: 10px; |
- | right: 3px;
| + | display:none; |
- | font-weight: normal;
| + | |
- | font-size: 90%; | + | |
| } | | } |
| </style> | | </style> |
| </html> | | </html> |