Sidebar Icons

ウィキトラベルで使おうと思って1年前に作成したJavaScriptですが、残念ながらサイトの管理者（開発者）に興味を持ってもらえず、採用には至りませんでした。

先日、Blogger Slippy Mapウィジェットを作成した際にちらちらと見ていたので、こっちに貼っておこうと思います。

ウィキトラベルはMediaWikiを使っていますので、MediaWikiで動くように書いたつもりですが、動作確認はローカル (自分のPCのブラウザ) でしか行っておらず、サーバーに置いての確認はしていません。（サーバー持ってないし、ウィキトラベルではユーザーのCSSやJavaScriptを使うことできないので...）

JavaScript

+ expand sourceview plainprint?

1. /*  
2.  
3.     User JavaScript 
4.  
5. */  
6.   
7. /** Icons for sidebar links *************************************** 
8.  * 
9.  *  Description: Mark sidebar links with icons (star, dotm, otbp) by changing the bullet  
10.  *                 into other list marker designated by Template:Sidebar-icons. 
11.  *  Author: [[User:Tatata]] 
12.  */  
13.   
14. function SidebarIcons()  {  
15.   
16.     var markers, pLangLinks;  
17.   
18.     // find marking template info  
19.     markers = document.getElementsByTagName("span");  
20.     for ( var i=0; i < markers.length; i++ ) {  
21.   
22.          switch ( markers[i].className ) {  
23.             case "sidebaricon-star":  
24.             case "sidebaricon-dotm":  
25.             case "sidebaricon-otbp":  
26.   
27.                // links in p-lang ( "In other languages" box )  
28.                if ( document.getElementById( "p-lang" ) ) {  
29.                   pLangLinks = document.getElementById( "p-lang" ).getElementsByTagName( "li" );  
30.   
31.                   // find language code and replace class name with if matched  
32.                   for ( var j=0; j < pLangLinks.length; j++) {  
33.   
34.                      var a, b;  
35.                      a = markers[i].id;  
36.                      b = markers[i].className + "-lang-" + pLangLinks[j].getElementsByTagName("a")[0].getAttribute("hreflang");  
37.   
38.                      if ( a == b ) {  
39.                         switch ( markers[i].className ) {  
40.                            case "sidebaricon-star":  
41.                               pLangLinks[j].className = markers[i].className;  
42.                               pLangLinks[j].title = "This is a Star article in another language.";  
43.                               break;  
44.                            case "sidebaricon-dotm":  
45.                               pLangLinks[j].className = markers[i].className;  
46.                               pLangLinks[j].title = "This is a previous Destinations of the month article in another language.";  
47.                               break;  
48.                            case "sidebaricon-otbp":  
49.                               pLangLinks[j].className = markers[i].className;  
50.                               pLangLinks[j].title = "This is a previous Off the beaten path article in another language.";  
51.                               break;  
52.                            default:  
53.                               break;  
54.                         }  
55.                      }  
56.                   }  
57.                }  
58.                break;  
59.   
60.             default:  
61.                break;  
62.   
63.          }  
64.   
65.     }  
66.   
67. }  
68.   
69. addOnloadHook( SidebarIcons );  

 /* 
 
     User JavaScript
 
 */

 /** Icons for sidebar links ***************************************
  *
  *  Description: Mark sidebar links with icons (star, dotm, otbp) by changing the bullet 
  *                 into other list marker designated by Template:Sidebar-icons.
  *  Author: [[User:Tatata]]
  */
 
 function SidebarIcons()  {

     var markers, pLangLinks;

     // find marking template info
     markers = document.getElementsByTagName("span");
     for ( var i=0; i < markers.length; i++ ) {

          switch ( markers[i].className ) {
             case "sidebaricon-star":
             case "sidebaricon-dotm":
             case "sidebaricon-otbp":

                // links in p-lang ( "In other languages" box )
                if ( document.getElementById( "p-lang" ) ) {
                   pLangLinks = document.getElementById( "p-lang" ).getElementsByTagName( "li" );

                   // find language code and replace class name with if matched
                   for ( var j=0; j < pLangLinks.length; j++) {

                      var a, b;
                      a = markers[i].id;
                      b = markers[i].className + "-lang-" + pLangLinks[j].getElementsByTagName("a")[0].getAttribute("hreflang");

                      if ( a == b ) {
                         switch ( markers[i].className ) {
                            case "sidebaricon-star":
                               pLangLinks[j].className = markers[i].className;
                               pLangLinks[j].title = "This is a Star article in another language.";
                               break;
                            case "sidebaricon-dotm":
                               pLangLinks[j].className = markers[i].className;
                               pLangLinks[j].title = "This is a previous Destinations of the month article in another language.";
                               break;
                            case "sidebaricon-otbp":
                               pLangLinks[j].className = markers[i].className;
                               pLangLinks[j].title = "This is a previous Off the beaten path article in another language.";
                               break;
                            default:
                               break;
                         }
                      }
                   }
                }
                break;

             default:
                break;

          }

     }

 }
 
 addOnloadHook( SidebarIcons );

CSS

+ expand sourceview plainprint?

1. /*  
2.   
3. User CSS (Cascading Style Sheets)   
4.   
5. */  
6.    
7. /* Sidebar  Icons */  
8.   
9. li.sidebaricon-star {  
10.   list-style-image: url("http://wikitravel.org/upload/ja/0/07/Listmarker-star.png");  
11. }  
12.    
13. li.sidebaricon-dotm {  
14.   list-style-image: url("http://wikitravel.org/upload/ja/0/08/Listmarker-dotm.png");  
15. }  
16.   
17. li.sidebaricon-otbp {  
18.   list-style-image: url("http://wikitravel.org/upload/ja/e/e6/Listmarker-otbp.png");  
19. }  

/* 
 
User CSS (Cascading Style Sheets)  
 
*/
 
/* Sidebar  Icons */

li.sidebaricon-star {
  list-style-image: url("http://wikitravel.org/upload/ja/0/07/Listmarker-star.png");
}
 
li.sidebaricon-dotm {
  list-style-image: url("http://wikitravel.org/upload/ja/0/08/Listmarker-dotm.png");
}

li.sidebaricon-otbp {
  list-style-image: url("http://wikitravel.org/upload/ja/e/e6/Listmarker-otbp.png");
}

   [ More... ]