launcher.js.svn-base

嵌入式无线路由系统openwrt的web配置工具

// Copyright (C) 2008 OpenRB.com
FlashSYS.Launcher = {
	options: {
    parent: 'desktopHeader',       // launcher's container
    wrapPadding: 4,                // wrap element's inner padding
    itemWidth: 48,                 // item width in pixels
    itemMargin: 24,                // item margin in pixels
    cornerRadius: 8,               // both corner radius and height
    fillColor: 'rgb(15,40,77)',    // background color
    iconPath: '/images/launcher/', // path for storing icons
    iconExt: '.png'                // icon image type
  },

  init: function(items, options) {
    this.options = $merge(this.options, options);

    var parent = $(this.options.parent);

    this.wrap = new Element('div', {
      'id': 'LauncherWrap'
    }).inject(parent);

    this.container = new Element('div', {
      'id': 'Launcher'
    }).inject(this.wrap);

    this.title = new Element('div', {
      'id': 'LauncherTitle'
    }).inject(this.wrap);

    this.handle = new Element('div', {
      'id': 'LauncherToggle'
    }).inject(this.wrap);

    this.subWrap = new Element('div', {
      'id': 'LauncherSubWrap'
    }).inject(this.wrap);

    this.subTop = new Element('div', {
      'id': 'LauncherSubTop'
    }).inject(this.subWrap);

    this.subItemElem = new Element('div', {
      'id': 'LauncherSub'
    }).inject(this.subWrap);

    this.subBottom = new Element('div', {'id':
      'LauncherSubBottom'
    }).inject(this.subWrap);

    this.container.setStyle('display', 'none');

    this.items = [];

    this.wrap.addEvents({
      'mouseenter': this.showLauncher.bind(this),
      'mouseleave': this.hideLauncher.bind(this)
    });

    if (items) {
      this.addItem(items);
    }
  },

  addItem: function(items) {
    $splat(items).each(function(item) {
      if ($type(item) == 'string') {
        item = { 'module': item }
      }

      item.title = FlashSYS.translate(item.title || item.module);

      // create top-level item
      var newItem = new Element('span', {
        'id': 'LauncherItem' + this.items.length.toString()
      }).inject(this.container);

      this.setBackground(newItem, (item.icon || item.module));

      newItem.addEvents({
        'click': this.itemClick.bind(this, newItem),
        'mouseover': this.showItem.bind(this, newItem),
        'mouseout': this.hideItem.bind(this)
      });

      // add subitems
      if (item.subItems) {
        var subItemWrap = new Element('div',{
          'id': 'LauncherItem' + this.items.length.toString()
        }).inject(this.subItemElem);

        item.subItem = subItemWrap;

        item.subItems.each(function(subItem) {
          if ($type(subItem) == 'string') {
            subItem = { 'module': subItem }
          }
          subItem.title = FlashSYS.translate(subItem.title || subItem.module);

          var newSubItem = new Element('span').inject(subItemWrap).store('options', subItem);
          this.setBackground(newSubItem, (subItem.icon || subItem.module));

          newSubItem.addEvents({
            'click': this.itemClick.bind(this, newSubItem),
            'mouseover': this.showTitle.bind(this, newSubItem)
          });
        }, this);
      }

      newItem.store('options', item);

      this.items.push( newItem );
    }, this);

    var wrapWidth = this.calcWidth();

    this.wrap.setStyles({
      'width': wrapWidth,
      'margin-left': (-wrapWidth) / 2
    });

    this.subWrap.setStyle('width', wrapWidth);

    return this.drawElems();
  },
  // set item background
  setBackground: function(elem, icon) {
    if (icon) {
      elem.setStyle('background','url(' + this.options.iconPath + icon + this.options.iconExt + ')');
    }
    return elem;
  },
  // shows launcher block
  showLauncher: function() {
    this.container.setStyle('display', 'block');
    this.title.setStyle('display', 'block');
  },
  // hides launcher block
  hideLauncher: function() {
    this.container.setStyle('display', 'none');
    this.title.setStyle('display', 'none');
    this.subWrap.setStyle('display', 'none');
  },
  // show element's title from its options
  showTitle: function(elem) {
    var options = elem.retrieve('options');
    this.title.set('text', options.title);
  },
  // fires element's own onClick if supplied
  itemClick: function(elem) {
    var options = elem.retrieve('options');
    $load(options);
    this.hideLauncher();
  },
  // element's mouse over event
  showItem: function(elem) {
    var options = elem.retrieve('options');
    this.title.set('text', options.title);

    // show sub block if exists
    if (options.subItems) {
      this.subItemElem.getChildren().addClass('Hidden');
      options.subItem.removeClass('Hidden');
      this.subWrap.setStyle('display', 'block');
    }
    else {
      this.subWrap.setStyle('display', 'none');
    }

    return this;
  },
  hideItem: function() {
    return this;
  },
  // redraw whole launcher
  drawElems: function() {
    var width = this.calcWidth();

    this.drawElem(this.handle, {
      width: width,
      triangle: true
    });

    this.drawElem(this.subTop, {
      width: width,
      topCorner: true
    });

    this.drawElem(this.subBottom, {
      width: width
    });
  },
  // draw single element
  drawElem: function(injectTo, options) {
    // recreate the canvas object
    var canvas = injectTo.retrieve('canvas', null);
    if (canvas) canvas.destroy();

    // adjust container height
    injectTo.setStyle('height', this.options.cornerRadius);

  	canvas = new Element('canvas', {
      'class': 'LauncherCanvas',
      'width': options.width,
      'height': this.options.cornerRadius
  	}).inject(injectTo);

  	if (Browser.Engine.trident) {
  		G_vmlCanvasManager.initElement(canvas);
  	}

  	var ctx = injectTo.getElement('.LauncherCanvas').getContext('2d');
  	ctx.fillStyle = this.options.fillColor;

    ctx.beginPath();

    // top
    if (options.topCorner) {
      ctx.moveTo(0,this.options.cornerRadius);
      ctx.lineTo(options.width,this.options.cornerRadius);
      ctx.quadraticCurveTo(options.width,0,options.width-this.options.cornerRadius,0);
      ctx.lineTo(this.options.cornerRadius,0);
      ctx.quadraticCurveTo(0,0,0,this.options.cornerRadius);
    }
    // bottom
    else {
      ctx.moveTo(0,0);
      ctx.lineTo(options.width,0);
      ctx.quadraticCurveTo(options.width,this.options.cornerRadius,options.width-this.options.cornerRadius,this.options.cornerRadius);
      ctx.lineTo(this.options.cornerRadius,this.options.cornerRadius);
      ctx.quadraticCurveTo(0,this.options.cornerRadius,0,0);
    }

    ctx.fill();

    // draw drop-down triangle
    if (options.triangle) {
      var hCenter = Math.round(options.width / 2);
      var vCenter = Math.round(this.options.cornerRadius / 2);

      ctx.fillStyle = 'rgb(255,255,255)';
      ctx.beginPath();
      ctx.moveTo(hCenter, vCenter + 2);
      ctx.lineTo(hCenter - 3, vCenter - 2);
      ctx.lineTo(hCenter + 3, vCenter - 2);
      ctx.lineTo(hCenter, vCenter + 2);
      ctx.fill();
    }

    // save canvas pointer
    injectTo.store('canvas', canvas);
  },
  // calculates width of launcher based on item count and sizing
  calcWidth: function(){
    return this.items.length * (this.options.itemWidth + this.options.itemMargin) + this.options.wrapPadding;
  }
};