How to drag-click status stlye buttons?

[Bruce_Dickey]

Hi,

I have a row of status style push buttons right next to each other.

How can I click one and drag across others and have all their push states toggle? Could you give a code example?

Thanks,
Bruce

[linb]

I cant get your point, can you give me more info?

[Bruce_Dickey]

Yes, lets say I have 3 buttons that are "status" style  push buttons (3 for simplicity -- I actually have many more).  The are positioned so that they touch each other like:

 __ __ __
| 1 | 2 | 3 |
|__|__|__|

In this example I want to be able to put the cursor on 1, depress the left mouse button, drag the cursor to 3, then let up. This should toggle the checked state of all three buttons.

The purpose is to be able to toggle the checked state of a large number of buttons with a single action instead of having to individually click each one.

I'm new to Linb, javascript, and the DOM. I tried beforeHoverEffect on the button to see what it would do, but it did not fire. I think I need onMouseOver from the DOM, and then check the left mouse button state. How to capture DOM events from a Linb widget?


(Later) It looks like the beforeHoverEffect event could be used, checking the  mousemove/mouseout string in the `type` parameter, in conjunction with onClick to toggle the button state only once. But why does the beforeHoverEvent not fire?

Thanks.

[linb]

I think it is some kind of weird. Actually, I have no idea on how to implement it.

[Bruce_Dickey]

Agreed, it is weird.

I think that new/different user interfaces are mostly a problem unless/until users recognize them and are used to using them.  An example of a relatively newer type of control is the linb.UI.Stacks, which I first saw in Microsoft Outlook.

Back to my question, we used the idea of "wipe" selection in a previous project (it was a Microsoft Foundation Classes desktop application) and it was well received by our users once they were informed of it.

The down side is if it conflicts with other standard behavior.

I  think I know on a conceptual level how to implement wipe selection - just not the linb or DOM details. I'll ask some specific questions in the future. I almost had it working yesterday by hijacking onShowTips() and setting the delay time to 0, except for the multiple events per widget.

[linb]

OK. I give you a demo. It can copy a item's status to other items by dragging.

Class('App', 'linb.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
           
            append(
                (new linb.UI.StatusButtons)
                .setHost(host,"ctl_statusbuttons1")
                .setItems([{"id":"a", "caption":"status 1"}, {"id":"b", "caption":"status 2"}, {"id":"c", "caption":"status 3"}, {"id":"d", "caption":"status 4"}])
                .setLeft(220)
                .setTop(180)
                .setWidth(280)
                .setHeight(30)
                .setSelMode("multi")
                .setBorderType("none")
                .setItemMargin("2px 4px")
                .setItemWidth(50)
                .setItemLinker("none")
                .setValue("a")
                .onRender("_ctl_statusbuttons1_onrender")
            );
           
            return children;
            // ]]code created by jsLinb UI Builder
        },
        _ctl_statusbuttons1_onrender : function (profile) {
            var ns = this, uictrl = profile.boxing(),
                itemNodes = profile.getSubNode('ITEM',true);
            var dragKey = profile.domId+"_dragclick";
           
            // set items draggable
            itemNodes.droppable(true, dragKey )
            // to drag item
            .onMousedown(function(prf,e,src){
                if(linb.Event.getBtn(e)!='left')return;
                var arr=uictrl.getUIValue(true),
                    item=profile.getItemByDom(src),
                    itemId=item&&item.id,
                    index=_.arr.indexOf(arr, itemId);
                linb.use(src).startDrag(e, {
                    dragCursor:'pointer',
                    dragType:'icon',
                    // to set your self drag icon
                    //dragIcon:'',
                    dragDefer:1
                }, dragKey , {src:src, checked:index!=-1});
            })
            // drag sibling item's status
            .onDragenter(function(prf,e,src){
                var dprf=linb.DragDrop.getProfile(),
                    dragKey=dprf&&dprf.dragKey,
                    dragData=dprf&&dprf.dragData;
                if(!dragKey || dragKey!=profile.domId+"_dragclick" || !dragData || dragData.src==src)
                    return;
                var arr=uictrl.getUIValue(true),
                    item=profile.getItemByDom(src),
                    itemId=item&&item.id,
                    index=_.arr.indexOf(arr, itemId);
               
                var tocheck=dragData.checked;
                if(tocheck){
                   if(index==-1){
                        arr.push(itemId);
                        uictrl.setUIValue(arr);
                   }
                }else{
                    if(index!=-1){
                        _.arr.removeFrom(arr, index);
                        uictrl.setUIValue(arr);
                    }
                }
            })
            // no drop
            .beforeDrop(function(){return false;});
        }
    }
});

[Bruce_Dickey]

Thank you very much! I made the changes shown below. It also demonstrates some techniques I was not aware of so thank your for that as well.

Class('App', 'linb.Com',{
    Instance:{
        iniComponents : function(){
            // [[code created by jsLinb UI Builder
            var host=this, children=[], append=function(child){children.push(child.get(0))};
           
            append(
                (new linb.UI.StatusButtons)
                .setHost(host,"ctl_statusbuttons1")
                .setItems([{"id":"a", "caption":"status 1"}, {"id":"b", "caption":"status 2"}, {"id":"c", "caption":"status 3"}, {"id":"d", "caption":"status 4"}])
                .setLeft(220)
                .setTop(180)
                .setWidth(280)
                .setHeight(30)
                .setSelMode("multi")
                .setBorderType("none")
                .setItemMargin("2px 4px")
                .setItemWidth(50)
                .setItemLinker("none")
                .setValue("a")
                .onRender("_ctl_statusbuttons1_onrender")
            );
           
            return children;
            // ]]code created by jsLinb UI Builder
        },
        _ctl_statusbuttons1_onrender : function (profile) {
            var ns = this, uictrl = profile.boxing(),
                itemNodes = profile.getSubNode('ITEM',true);
           
            var dragKey = profile.domId+"_dragclick";
           
            // set items draggable
            itemNodes.droppable(true, dragKey )
               
            // to drag item
            .onMousedown(function(prf,e,src){
                if(linb.Event.getBtn(e)!='left')
                    return;
               
                var arr = uictrl.getUIValue(true),
                    item = profile.getItemByDom(src),
                    itemId = item && item.id,
                    //index = _.arr.indexOf(arr, itemId);   // Worked without change
                    index = arr.search(itemId); 
               
                linb.use(src).startDrag(e, {
                    dragCursor:'pointer',
                    dragType:'icon',
                    // to set your self drag icon
                    //dragIcon:'',
                    dragDefer:1
                }, dragKey , {src:src, checked:index != -1});
            })
               
            // drag sibling item's status
            .onDragenter(function(prf,e,src){
                var dprf = linb.DragDrop.getProfile(),
                    dragKey = dprf && dprf.dragKey,
                    dragData = dprf && dprf.dragData;
               
                if (!dragKey || (dragKey!=profile.domId+"_dragclick") || !dragData || (dragData.src==src) )
                    return;
               
                var arr = uictrl.getUIValue(true),
                    item = profile.getItemByDom(src),
                    itemId = item && item.id,
                    //index = _.arr.indexOf(arr, itemId);
                    index = arr.search(itemId);
               
                var tocheck = dragData.checked;
               
                if (tocheck)
                {
                   if (index == -1) {
                       arr += ';' + itemId;
                       //arr.push(itemId);
                        uictrl.setUIValue(arr);
                   }
                }
                else
                {
                    if (index != -1) {
                        //_.arr.removeFrom(arr, index);
                        arr = arr.replace(itemId, "");
                        uictrl.setUIValue(arr);
                    }
                }
            })
               
            // no drop
            .beforeDrop(function(){return false;});
        }
    }
});

[linb]

My code is based on 4.0 version.

[Bruce_Dickey]

Great - thank you! (I was using v3.0).