The Coding Paparazzi: Sub-SubMenu for Blogger with Artisteer, part 2

Thursday, 10 December, 2009

Sub-SubMenu for Blogger with Artisteer, part 2

4:04 PM | Posted by Sylvain Lafontaine | Edit Post

The revised artDisplayTopMenu() function that we have seen in the first part of this article (see "Sub-SubMenu for Blogger with Artisteer, part 1") is interesting but it still has its flaws: firstly, it is not recursive, so it cannot give us an unlimited number of levels: if you need access to a fourth level, you'll have to modify it. Also, it doesn't include any control error; for example if you make a mistake about the order of tags "-", "-+" and "-+=". However, these are moot points in comparaison to its main problem: the difficulty that we'll have to manage the long series of options for the menu by using the standard configuration dialog of Blogger. In effect, if you need a second or a third level, for your menus, it's because you have tens or even hundreds of options to put there. For example, although the demonstration site Sub-SubMenu for Blogger with Artisteer contains only a tiny fraction of a menu that I'm building for another blog, manage it already requires a very long long series of clicks for inserting a new option or moving them around:

The final menu will be tens of times longer than that, with around one hundred options for the french version and the same for the engligh version; making its management prohibitively time consuming. In this part 2 of this article about sub-menus, Blogger and Artisteer, we will see how to solve this problem.

If we take a look at the widget's source code that will inserts the HTML items (<ul>, <li> tags, etc.) for the menu, we see that this is mainly a XML loop (the <b:loop ... in the figure below) that is running on the server; ie., before the HTML is sent back the client's browser. (Note: don't forget that you must first check the "Expand Widget Templates" option if you want to see this piece of code.)

This loop will builds a list of items with the Javascript code necessary to store them one by one in the dynamic array menuitems; you can see part of the final result below. This list of menuitems.push(...) is part of the javascript code inside the HTML page that is sent to the browser client. Once there, this code will be executed by the client's browser's javascript interpreter. As this part will run locally on your machine (unlike the XML loop which is executed on the server), you can see it by looking directly at the source code of the page in your browser (use the "View Source" or its equivalent on the menu of your browser):

...

                  menuitems.push(new Array('Site web (français)','http://www.sylvainlafontaine.com/'));
                
                  menuitems.push(new Array('-Blogues','http://paparazzi-codeur.sylvainlafontaine.com/'));
                
                  menuitems.push(new Array('-+Access, ADP et SQL-Server','http://access-adp-sqlserver-francais.sylvainlafontaine.com/'));
                
                  menuitems.push(new Array('-+Le Paparazzi~Codeur','http://paparazzi-codeur.sylvainlafontaine.com/'));
                
                  menuitems.push(new Array('-La Transformée de Fourier','http://transformee-fourier.sylvainlafontaine.com/'));
                
                  menuitems.push(new Array('-+Chapitre 1 - Les Séries de Fourier','http://transformee-fourier.sylvainlafontaine.com/2009/11/chapitre-1-les-series-de-fourier.html'));
                
                  menuitems.push(new Array('-+=A- Principe des Séries de Fourier','http://transformee-fourier.sylvainlafontaine.com/2009/11/chapitre-1-les-series-de-fourier.html#A- Principe des Séries de Fourier'));
                
                  menuitems.push(new Array('-+=B- Les Séries de Fourier','http://transformee-fourier.sylvainlafontaine.com/2009/11/chapitre-1-les-series-de-fourier_29.html#B- Les Séries de Fourier'));
                
                  menuitems.push(new Array('-+Chapitre 2 - La diffraction aux rayons-X','http://transformee-fourier.sylvainlafontaine.com/2009/11/chapitre-2-la-diffraction-aux-rayons-x.html'));
                
                  menuitems.push(new Array('-+=A- Loi de Laue','http://transformee-fourier.sylvainlafontaine.com/2009/11/chapitre-2-la-diffraction-aux-rayons-x.html#Loi de Laue'));
                
                  menuitems.push(new Array('-+=B- Les réseaux cristallins','http://transformee-fourier.sylvainlafontaine.com/2009/11/chapitre-2-la-diffraction-aux-rayons-x_29.html#B- Les réseaux cristallins'));
                
                  menuitems.push(new Array('Web site (english)','http://english.sylvainlafontaine.com/'));
                
                  menuitems.push(new Array('-Blogs','http://coding-paparazzi.sylvainlafontaine.com/'));
                
                  menuitems.push(new Array('-+Access, ADP and SQL-Server','http://access-adp-sqlserver.sylvainlafontaine.com/'));
                
                  menuitems.push(new Array('-+The Coding Paparazzi','http://coding-paparazzi.sylvainlafontaine.com/'));
                
                  menuitems.push(new Array('-The Fourier Transform','http://fourier-transform.sylvainlafontaine.com/'));
                
                  menuitems.push(new Array('-+Chapter 1 - The Fourier Series','http://fourier-transform.sylvainlafontaine.com/2009/11/chapter-1-fourier-series.html'));
                
                  menuitems.push(new Array('-+=A- The Principle of Fourier Series','http://fourier-transform.sylvainlafontaine.com/2009/11/chapter-1-fourier-series.html#A- The Principle of Fourier Series'));
                
                  menuitems.push(new Array('-+=B- The Fourier Series','http://fourier-transform.sylvainlafontaine.com/2009/11/chapter-1-fourier-series-section-b.html#B- The Fourier Series'));
                
                  menuitems.push(new Array('-+Chapter 2 - The X-Ray Diffraction','http://fourier-transform.sylvainlafontaine.com/2009/11/chapter-2-x-ray-diffraction.html'));
                
                  menuitems.push(new Array('-+=A- Laue\'s law','http://fourier-transform.sylvainlafontaine.com/2009/11/chapter-2-x-ray-diffraction.html#Laue'));
                
                  menuitems.push(new Array('-+=B- Crystalline networks','http://fourier-transform.sylvainlafontaine.com/2009/11/chapter-2-x-ray-diffraction-section-b.html#Crystalline networks'));
                
                artDisplayTopMenu(menuitems);
            </script></span>
</ul>
</div></div>
...

The array menuitems and the first item of the menu's list (usually "Home" but "Accueil" in the example below) have already been created by the template Artisteer in a piece of javascript code just before that:

Once the array menuitems has been completed, the artDisplayTopMenu() function is called, with the array passed in as parameter:

captured_Image.png[25]

To get rid of the need to use the "Configure Link List" window of Blogger, what we have to do would be simply to replace the function artDisplayTopMenu() with a new one that will have the necessary static code to build this list. After that, a call to the original function artDisplayTopMenu() - renamed for the occasion artDisplayTopMenu2 - will build the HTML menu but now by using our own version of the menuitems array:

// New version for artDisplayTopMenu(); allowing for
// second and third sub-menu levels.
// First level: option name must begin with a '-'
// Second level: begin with a '-+'
// Third level: begin with a '-+='

// Not HTML escaped so // <![CDATA[ ... // ]]> must be used:
// <![CDATA[

function artDisplayTopMenu(menuitems_dummy)
{
  var menuitems = new Array();

  menuitems.push(new Array('Accueil • ','http://test-sub-submenu-artisteer-blogger.blogspot.com/'));

  menuitems.push(new Array('Site web (français)','http://www.sylvainlafontaine.com/'));
                
  menuitems.push(new Array('-Blogues','http://paparazzi-codeur.sylvainlafontaine.com/'));
                
  menuitems.push(new Array('-+Access, ADP et SQL-Server','http://access-adp-sqlserver-francais.sylvainlafontaine.com/'));
                
  menuitems.push(new Array('-+Le Paparazzi~Codeur','http://paparazzi-codeur.sylvainlafontaine.com/'));
                
  menuitems.push(new Array('-La Transformée de Fourier','http://transformee-fourier.sylvainlafontaine.com/'));
                
  menuitems.push(new Array('-+Chapitre 1 - Les Séries de Fourier','http://draft.blogger.com/http//transformee-fourier.sylvainlafontaine.com/2009/11/chapitre-1-les-series-de-fourier.html'));
                
  menuitems.push(new Array('-+=A- Principe des Séries de Fourier','http://transformee-fourier.sylvainlafontaine.com/2009/11/chapitre-1-les-series-de-fourier.html#A- Principe des Séries de Fourier'));
                
  menuitems.push(new Array('-+=B- Les Séries de Fourier','http://transformee-fourier.sylvainlafontaine.com/2009/11/chapitre-1-les-series-de-fourier_29.html#B- Les Séries de Fourier'));
                
  menuitems.push(new Array('-+Chapitre 2 - La diffraction aux rayons-X','http://transformee-fourier.sylvainlafontaine.com/2009/11/chapitre-2-la-diffraction-aux-rayons-x.html'));
                
  menuitems.push(new Array('-+=A- Loi de Laue','http://transformee-fourier.sylvainlafontaine.com/2009/11/chapitre-2-la-diffraction-aux-rayons-x.html#Loi de Laue'));
                
  menuitems.push(new Array('-+=B- Les réseaux cristallins','http://transformee-fourier.sylvainlafontaine.com/2009/11/chapitre-2-la-diffraction-aux-rayons-x_29.html#B- Les réseaux cristallins'));

  menuitems.push(new Array('Web site (english)','http://english.sylvainlafontaine.com/'));
                
  menuitems.push(new Array('-Blogs','http://coding-paparazzi.sylvainlafontaine.com/'));
                
  menuitems.push(new Array('-+Access, ADP and SQL-Server','http://access-adp-sqlserver.sylvainlafontaine.com/'));
                
  menuitems.push(new Array('-+The Coding Paparazzi','http://coding-paparazzi.sylvainlafontaine.com/'));
                
  menuitems.push(new Array('-The Fourier Transform','http://fourier-transform.sylvainlafontaine.com/'));
                
  menuitems.push(new Array('-+Chapter 1 - The Fourier Series','http://fourier-transform.sylvainlafontaine.com/2009/11/chapter-1-fourier-series.html'));
                
  menuitems.push(new Array('-+=A- The Principle of Fourier Series','http://fourier-transform.sylvainlafontaine.com/2009/11/chapter-1-fourier-series.html#A- The Principle of Fourier Series'));
                
  menuitems.push(new Array('-+=B- The Fourier Series','http://fourier-transform.sylvainlafontaine.com/2009/11/chapter-1-fourier-series-section-b.html#B- The Fourier Series'));
                
  menuitems.push(new Array('-+Chapter 2 - The X-Ray Diffraction','http://fourier-transform.sylvainlafontaine.com/2009/11/chapter-2-x-ray-diffraction.html'));
                
  menuitems.push(new Array('-+=A- Laue\'s law','http://fourier-transform.sylvainlafontaine.com/2009/11/chapter-2-x-ray-diffraction.html#Laue'));
                
  menuitems.push(new Array('-+=B- Crystalline networks','http://fourier-transform.sylvainlafontaine.com/2009/11/chapter-2-x-ray-diffraction-section-b.html#Crystalline networks'));
                
  artDisplayTopMenu2 (menuitems);
}

function artDisplayTopMenu2(menuitems) {

    var i = 0;
    var subList = false;
    var subList2 = false;
    var subList3 = false;

    for (i=0; i < menuitems.length; i++) {
      var item = menuitems[i];
      var itemname = item[0];
      var itemlink = item[1];
      
      if ( ((itemname.indexOf("=") == 2) && !subList3)
        || ((itemname.indexOf("+") == 1) && !subList2)
        || ( (itemname.indexOf("-") == 0) && !subList) ) {
          document.write('<ul>');

      } else if ( ((itemname.indexOf("=") != 2) && subList3)
	|| ((itemname.indexOf("+") != 1) && subList2)
                || ((itemname.indexOf("-") != 0) && subList) ) {

        if ( (itemname.indexOf("=") != 2) && subList3) {
          document.write("</li></ul>");
          subList3 = false;
        }

        if ( (itemname.indexOf("+") != 1) && subList2) {
          document.write("</li></ul>");
          subList2 = false;
        }

        if ( (itemname.indexOf("-") != 0) && subList) {
          document.write("</li></ul>");
          subList = false;
        }

        document.write("</li>");

      } else if (i != 0) {
        document.write("</li>");
      }
      
      document.write("<li>");

      if (itemname.indexOf("-") != 0) {
        if (window.location == itemlink) {
          document.write('<a href="'+itemlink+'" class="active"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');

        } else if(itemlink == "http://./") {
          document.write('<a href="#"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');

        } else {
          document.write('<a href="'+itemlink+'"><span class="l"></span><span class="r"></span><span class="t">'+itemname+'</span></a>');
        }

      } else {

        if (itemname.indexOf("=") == 2) {
          document.write('<a href="'+itemlink+'">'+itemname.substr(3,itemname.length)+'</a>'); 
          subList = true;
          subList2 = true;
          subList3 = true;

        } else if (itemname.indexOf("+") == 1) {
          document.write('<a href="'+itemlink+'">'+itemname.substr(2,itemname.length)+'</a>');
          subList = true;
          subList2 = true;

        } else {
          document.write('<a href="'+itemlink+'">'+itemname.substr(1,itemname.length)+'</a>');
          subList = true;
        }
      }

      if (i == (menuitems.length-1)) {
        if (subList3)
          document.write("</li></ul>");
           
        if (subList2)
          document.write("</li></ul>");

        if (subList)
          document.write("</li></ul>");

        document.write("</li>");
      }
    }
}
// ]]>

As we are now replacing the whole menuitems array, we must not forget to also include the option "Home" at its beginning; unless you don't want it there, of course!

However, if you try this code directly, it won't work at first as we have one last final adjustement to make: Blogger will not take the time to call the artDisplayTopMenu() (the original or our own version) if it doesn't see any created item in the Top Menu; so we have to create a dummy one to act as a trigger. As this is a dummy argument that will never make it to the client's browser, you can write anything for it:

You can see the an example of the result of this code on the demonstration site "Test2 - Sub-SubMenu with Artisteer".

When you have long menus or multiple blogs, it's much faster to manage them using this then by using the standard interface of Blogger (the "Configure Link List" dialog window).

However, there is one small problem remaining: this code will be erased if you refresh your Blogger template using Artisteer; so it is advisable to always make a backup copy of your code somewhere. Artisteer will also make a backup copy of your older template in the directory "C:\Documents and Settings\***YourUserName***\Application Data\Artisteer\Artisteer2\Library\BloggerBackup/" (for Windows XP); so you can always find a copy of your code there. Notice that this an ordinary problem that you'll always have once you start customizing your templates.

This concludes Part 2 of the article on the sub-sousMenu of Artisteer for Blogger. In Part 4 we will see a new way to write our list of options for the menu without even having to go through the form "Edit HTML" each time but first, we'll see in part 3 how to adjust the width of the boxes created for the menu by Artisteer so that they will automatically adapt their size to their content instead of having all the same width.

Labels: Artisteer, Blogger

The Coding Paparazzi

Sub-SubMenu for Blogger with Artisteer, part 2

0 comments:

Post a Comment

Welcome!

Labels

Blog Archive

Latest comments

Share - Bookmark - Email

Google Friend Connect

Translate this page

About Me

Donate ($CAD)

Advertisements

Disclaimer • Privacy policy