Opensource, CMS, PHP, MySql, Drupal, Frameworks

Thursday, February 24, 2011

JavaScript Theming in Drupal


$(document).ready(function () {
     var links = [
         {name: 'Drupal.org', link:'http://drupal.org'},
         {name: 'jQuery', link:'http://jquery.com'},
         {name: 'No Link'}
    ];
    var text = Drupal.theme('shallow_menu', links);
    var blockInfo = {
         title: 'JavaScript Menu',
         content: text
    };
    var block = Drupal.theme('block', blockInfo);
    $('.block:first').before(block);
});

//Block Prototype
Drupal.theme.prototype.block = function (block) {
     if (!block.id) {
          block.id = "frobnitz-" + Math.floor(Math.random() * 9999);
     }
     var text = '<div class="block block-frobnitz" id="block-' +
          block.id +
          '">' +
          '<h2 class="title">' +
          block.title +
          '</h2><div class="content">' +
          block.content +
          '</div></div>';
     return text;
};

//Menu Prototype
Drupal.theme.prototype.shallow_menu = function (items) {

     var list = $('<ul class="menu"></ul>');
     for (var i = 0; i < items.length; ++i) {
          var item = items[i];
         // Get text for menu item
         var menuText = null;
         if (item.link) {
              menuText = item.name.link(item.link);
         }
         else {
              menuText = item.name;
         }
         // Create item
         var li = $('<li class="leaf"></li>');
         // figure out if this is first or last
         if (i == 0) {
              li.addClass('first');
         }
         else if (i == items.length - 1) {
              li.addClass('last');
         }
         // Add item to list
         li.html(menuText).appendTo(list);
     }
     return list.parent().html();
};