Changeset 3712

Timestamp:

04/29/06 14:11:04 (3 years ago)

Author:

cal

Message:

added a menu bar widget to simulate window menus

Location:

trunk

Files:

• src/widget/Menu2.js (modified) (4 diffs)
• src/widget/templates/HtmlMenu2.css (modified) (2 diffs)
• tests/widget/test_Menu2_Bar.html (added)

trunk/src/widget/Menu2.js

@@ -3 +3 @@
 dojo.provide("dojo.widget.PopupMenu2");
 dojo.provide("dojo.widget.MenuItem2");
+dojo.provide("dojo.widget.MenuBar2");
 
 dojo.require("dojo.html");
@@ -34 +35 @@
         currentSubmenuTrigger: null,
         parentMenu: null,
+        parentMenuBar: null,
         isShowingNow: false,
         menuX: 0,
@@ -318 +320 @@
                 this.isShowingNow = false;
                 dojo.widget.html.Menu2Manager.closed(this);
+
+                if (this.parentMenuBar){
+                        this.parentMenuBar.closedMenu(this);
+                }
         },
 
@@ -861 +867 @@
 };
 
+
+dojo.widget.MenuBar2 = function(){
+        dojo.widget.HtmlWidget.call(this);
+}
+
+dojo.inherits(dojo.widget.MenuBar2, dojo.widget.HtmlWidget);
+
+dojo.lang.extend(dojo.widget.MenuBar2, {
+        widgetType: "MenuBar2",
+        isContainer: true,
+
+        snarfChildDomOutput: true,
+
+        currentItem: null,
+        isExpanded: false,
+
+        currentSubmenu: null,
+        currentSubmenuTrigger: null,
+
+        domNode: null,
+        containerNode: null,
+
+        templateString: '<div class="dojoMenuBar2"><div dojoAttachPoint="containerNode" class="dojoMenuBar2Client"></div></div>',
+        templateCssPath: dojo.uri.dojoUri("src/widget/templates/HtmlMenu2.css"),
+
+        itemHeight: 18,
+        openEvent: null,
+
+
+        postCreate: function(){
+
+                // do something here
+
+                this.layoutMenuSoon();
+        },
+
+        layoutMenuSoon: function(){
+                dojo.lang.setTimeout(this, "layoutMenu", 0);
+        },
+
+        layoutMenu: function(){
+
+                // menu must be attached to DOM for size calculations to work
+
+                var parent = this.domNode.parentNode;
+                if (! parent || parent == undefined) {
+                        document.body.appendChild(this.domNode);
+                }
+
+
+                // determine menu height
+
+                var max_label_h = 0;
+
+                for(var i=0; i<this.children.length; i++){
+
+                        if (this.children[i].getLabelHeight){
+
+                                max_label_h = Math.max(max_label_h, this.children[i].getLabelHeight());
+                        }
+                }
+
+                if (isNaN(max_label_h)){
+                        // Browser needs some more time to calculate sizes
+                        this.layoutMenuSoon();
+                        return;
+                }
+
+                var clientLeft = dojo.style.getPixelValue(this.domNode, "padding-left", true)
+                                + dojo.style.getPixelValue(this.containerNode, "margin-left", true)
+                                + dojo.style.getPixelValue(this.containerNode, "padding-left", true);
+                var clientTop  = dojo.style.getPixelValue(this.domNode, "padding-top", true)
+                                + dojo.style.getPixelValue(this.containerNode, "padding-top", true);
+
+                if (isNaN(clientLeft) || isNaN(clientTop)){
+                        // Browser needs some more time to calculate sizes
+                        this.layoutMenuSoon();
+                        return;
+                }
+
+                var max_item_height = 0;
+                var x = clientLeft;
+
+                for (var i=0; i<this.children.length; i++){
+
+                        var ch = this.children[i];
+
+                        ch.layoutItem(max_label_h);
+
+                        ch.leftPosition = x;
+                        ch.domNode.style.left = x + 'px';
+
+                        x += dojo.style.getOuterWidth(ch.domNode);
+                        max_item_height = Math.max(max_item_height, dojo.style.getOuterHeight(ch.domNode));
+                }
+
+                dojo.style.setContentHeight(this.containerNode, max_item_height);
+                dojo.style.setContentHeight(this.domNode, dojo.style.getOuterHeight(this.containerNode));
+        },
+
+        openSubmenu: function(submenu, from_item){
+
+                var our_pos = dojo.style.getAbsolutePosition(this.domNode, false);
+
+                var our_h = dojo.style.getOuterHeight(this.domNode);
+                var item_x = from_item.leftPosition;
+
+                var x = our_pos.x + item_x;
+                var y = our_pos.y + our_h;
+
+                this.currentSubmenu = submenu;
+                this.currentSubmenu.open(x, y, this, from_item.domNode);
+                this.currentSubmenu.parentMenuBar = this;
+        },
+
+        closeSubmenu: function(){
+
+                if (this.currentSubmenu == null){ return; }
+
+                var menu = this.currentSubmenu;
+                this.currentSubmenu = null;
+                menu.close();
+        },
+
+        itemHover: function(item){
+
+                if (item == this.currentItem) return;
+
+                if (this.currentItem){
+                        this.currentItem.unhighlightItem();
+
+                        if (this.isExpanded){
+                                this.closeSubmenu();
+                        }
+                }
+
+                this.currentItem = item;
+                this.currentItem.highlightItem();
+
+                if (this.isExpanded){
+                        this.currentItem.expandMenu();
+                }
+        },
+
+        itemUnhover: function(item){
+
+                if (item != this.currentItem) return;
+
+                if (!this.isExpanded){
+                        this.currentItem.unhighlightItem();
+                        this.currentItem = null;
+                }
+        },
+
+        itemClick: function(item){
+
+                if (item != this.currentItem){
+
+                        this.itemHover(item);
+                }
+
+                if (this.isExpanded){
+
+                        this.isExpanded = false;
+                        this.closeSubmenu();
+
+                }else{
+
+                        this.isExpanded = true;
+                        this.currentItem.expandMenu();
+                }
+        },
+
+        closedMenu: function(menu){
+
+                if (this.currentSubmenu == menu){
+
+                        this.isExpanded = false;
+                        this.itemUnhover(this.currentItem);
+                }
+        }
+});
+
+
+dojo.widget.MenuBarItem2 = function(){
+        dojo.widget.HtmlWidget.call(this);
+}
+
+dojo.inherits(dojo.widget.MenuBarItem2, dojo.widget.HtmlWidget);
+
+dojo.lang.extend(dojo.widget.MenuBarItem2, {
+
+        widgetType: "MenuBarItem2",
+        templateString:
+                         '<div class="dojoMenuBarItem2">'
+                        +'<span dojoAttachPoint="labelNode" class="dojoMenuBarItem2Label"><span><span></span></span></span>'
+                        +'<div dojoAttachPoint="targetNode" class="dojoMenuBarItem2Target" dojoAttachEvent="onMouseOver: onHover; onMouseOut: onUnhover; onClick: _onClick;">&nbsp;</div>'
+                        +'</div>',
+
+        //
+        // nodes
+        //
+
+        domNode: null,
+        labelNode: null,
+        targetNode: null,
+
+        //
+        // internal settings
+        //
+
+        is_hovering: false,
+        hover_timer: null,
+        is_open: false,
+
+        //
+        // options
+        //
+
+        caption: 'Untitled',
+        accelKey: '',
+        iconSrc: '',
+        submenuId: '',
+        disabled: false,
+        eventNaming: "default",
+
+
+        postCreate: function(){
+
+                dojo.html.disableSelection(this.domNode);
+
+                if (this.disabled){
+                        this.setDisabled(true);
+                }
+
+                this.labelNode.childNodes[0].appendChild(document.createTextNode(this.caption));
+
+                this.labelShadowNode = this.labelNode.childNodes[0].childNodes[0];
+                this.labelShadowNode.appendChild(document.createTextNode(this.caption));
+
+                if (this.eventNaming == "default") {
+                        for (eventName in this.eventNames) {
+                                this.eventNames[eventName] = this.widgetId+"/"+eventName;
+                        }
+                }
+        },
+
+        layoutItem: function(item_h){
+
+                var label_w = dojo.style.getOuterWidth(this.labelNode);
+
+                var clientLeft = dojo.style.getPixelValue(this.domNode, "padding-left", true);
+                var clientTop  = dojo.style.getPixelValue(this.domNode, "padding-top", true);
+
+                this.labelNode.style.left = clientLeft + 'px';
+
+                dojo.style.setOuterHeight(this.labelNode, item_h);
+                dojo.style.setContentWidth(this.domNode, label_w);
+                dojo.style.setContentHeight(this.domNode, item_h);
+
+                this.labelNode.style.left = '0px';
+
+                dojo.style.setOuterWidth(this.targetNode, label_w);
+                dojo.style.setOuterHeight(this.targetNode, item_h);
+        },
+
+        getLabelHeight: function(){
+
+                return dojo.style.getOuterHeight(this.labelNode);
+        },
+
+        onHover: function(){
+                this.parent.itemHover(this);
+        },
+
+        onUnhover: function(){
+                this.parent.itemUnhover(this);
+        },
+
+        _onClick: function(){
+                this.parent.itemClick(this);
+        },
+
+        highlightItem: function(){
+                dojo.html.addClass(this.domNode, 'dojoMenuBarItem2Hover');
+        },
+
+        unhighlightItem: function(){
+                dojo.html.removeClass(this.domNode, 'dojoMenuBarItem2Hover');
+        },
+
+        expandMenu: function(){
+
+                var submenu = dojo.widget.getWidgetById(this.submenuId);
+                if (submenu){
+
+                        this.parent.openSubmenu(submenu, this);
+                }
+        },
+
+        setDisabled: function(value){
+                this.disabled = value;
+
+                if (this.disabled){
+                        dojo.html.addClass(this.domNode, 'dojoMenuBarItem2Disabled');
+                }else{
+                        dojo.html.removeClass(this.domNode, 'dojoMenuBarItem2Disabled');
+                }
+        }
+});
+
 // make it a tag
+dojo.widget.tags.addParseTreeHandler("dojo:MenuBar2");
+dojo.widget.tags.addParseTreeHandler("dojo:MenuBarItem2");
 dojo.widget.tags.addParseTreeHandler("dojo:PopupMenu2");
 dojo.widget.tags.addParseTreeHandler("dojo:MenuItem2");

trunk/src/widget/templates/HtmlMenu2.css

@@ -106 +106 @@
         font-size: 1px;
         background-image: url('images/transparent.gif');
-        cursor: pointer;
-        _cursor: hand;
 }
 
@@ -128 +126 @@
         font-size: 1px;
 }
+
+
+
+.dojoMenuBar2 {
+        position: relative;
+        background-color: ThreeDFace;
+        border-bottom: 1px solid ThreeDHighlight;
+}
+
+.dojoMenuBar2Client {
+        padding: 1px;
+        border-top: 1px solid ThreeDHighlight;
+        border-bottom: 1px solid ThreeDShadow;
+}
+
+.dojoMenuBarItem2 {
+        position: absolute;
+        white-space: nowrap;
+        font: menu;
+        color: WindowText;
+        margin: 0;
+}
+
+.dojoMenuBarItem2 span {
+        margin: 0;
+}
+
+.dojoMenuBarItem2Target {
+        position: absolute;
+        z-index: 10;
+        font-size: 1px;
+        background-image: url('images/transparent.gif');
+}
+
+.dojoMenuBarItem2Label {
+        position: absolute;
+        vertical-align: middle;
+        z-index: 1;
+        padding: 3px 8px;
+}
+
+.dojoMenuBarItem2Label span {
+        position: relative;
+        z-index: 2;
+}
+
+.dojoMenuBarItem2Label span span {
+        position: absolute;
+        color: ThreeDHighlight;
+        display: none;
+        left: 1px;
+        top: 1px;
+        z-index: -2;
+}
+
+.dojoMenuBarItem2Hover {
+        background-color: Highlight;
+        color: HighlightText;
+}
+
+.dojoMenuBarItem2Disabled .dojoMenuBarItem2Label span,
+.dojoMenuBarItem2Disabled .dojoMenuBarItem2Accel span {
+        color: ThreeDShadow;
+}
+
+.dojoMenuBarItem2Disabled .dojoMenuBarItem2Label span span,
+.dojoMenuBarItem2Disabled .dojoMenuBarItem2Accel span span {
+        color: ThreeDHighlight;
+        display: block;
+}
+
+.dojoMenuBarItem2Hover .dojoMenuBarItem2Label span span,
+.dojoMenuBarItem2Hover .dojoMenuBarItem2Accel span span {
+        display: none;
+}