Draggable tabbar to resize tabset

[martintaal]

Hi,
I have a vlayout with multiple tabsets as members, I don't want to have a splitbar in between the members but would like to make the tabbar draggable. So that the user can drag the tabbar up and down to resize a tabset (and the one above it). I think it is doable looking at the implementation of the splitbar which implements the dragMove function. But... when I enable dragging for the tabbar the dragMove/dragStart/dragStop function does not seem to be called.

Here are the tabBarProperties i tried (ignore the console.log, I should use isc.Log I know... :-).

var tabBarProperties = {
	canDrag:true,    
    	dragAppearance:"none",   
	dragStartDistance:1,
	keepInParentRect: false,
	canDragReposition: true,
	dragMove: function() {console.log('move'); return true;},
	dragStart: function() {console.log('start'); return true;},
	dragStop: function() {console.log('stop'); return true;}
};

Is my idea in the right direction? Or why is the dragMove not called? Or should I try a different approach?

gr. Martin

[martintaal]

Hi,
I found a first workaround, it would be great if someone from Isomorphic can react on this approach, what I did is set these properties on the tabset:

canDragResize: true,
dragStartDistance:1,
edgeMarginSize:30,
resizeFrom:["T"],
dragAppearance: "target",

as the edgemarginsize is set at 30 the user can resize by dragging the tabbar up (as the tabbar is within the 30 pixels edge).

Now I have a few remaining problems (see the example code below which shows the issues):
- the resize cursor is not shown
- when resizing the tabset up, when there is no more room, the tabset height is increased downward, I would like to prevent this (so resizing should only change the top), is this possible/how can i do this?
- I would like to resize even over the content of the member above the tabset (see the example code below) until the canvas above has reached a certain minimum height, I tried minHeight but that was not enforced, is this possible? how can I do this?

Here is the example code I use and tested on the Smartclient demo:

var label = isc.Label.create({contents: 'test', height: '*'});
var tabSet = isc.TabSet.create({
tabs: [{title: 'tab1'},{title: 'tab2'}],
  canDragResize: true,
  dragStartDistance:1,
  edgeMarginSize:30,
  resizeFrom:["T"],
  dragAppearance: "target"
});

isc.VLayout.create({
	height: '100%',
	width: '100%',
	members: [label, tabSet]
});

Thanks!

gr. Martin

[Isomorphic]

Although you've made more progress with the second approach, the first approach is probably better. Can you show how you tried to apply the tabBarProperties to the TabSet - that may be where the problem is.

Regardless of the approach, you'd want to use tabBarProperties to set the resize cursor.

And also regardless of the approach, since you're not using a resizeBar (which would have respected minHeight automatically) you will need to implement a dragMove function that refuses to resize further when the prior component would be too small.

[mtaal]

Hi,
Thanks, I moved back to the tabBarProperties approach. After some trial and error it seemed that dragging it did not work because the Toolbar overrides/implements the prepareForDragging method. Overriding this helped and now I am pretty much able to drag the tabbar and resize the tabset. See the example code below.
Two problems remain:
- I had to overwrite the prepareForDragging method, is there a way for me to call the Super.Super implementation of a method (so the method of the grand parent)? Or is there another way to only clear the prepareForDragging implementation in Toolbar (so that the prepareForDragging in Canvas is callled) just for TabBar implementations?
- when dragging, the mouse first moves out of the tabbar and then changes shape, the dragRepositionMove is not called before the mouse is outside of the tabbar (I am not sure if I am clear, the code below illustrates the behavior)

isc.Toolbar.addProperties({
    	prepareForDragging: function() {
    	    	this.Super('prepareForDragging', arguments);
    	}
});

var tabBarProperties = {
    	dragAppearance:"none",   
	dragStartDistance:1,
	canDragReposition: true,
	
	dragRepositionStart: function() {
		this.tabSet.maxHeight = this.tabSet.layout.getVisibleHeight() - 30;
		this.tabSet.minHeight = 30;
	},

	dragRepositionMove: function() {
	        var offset = (0 - isc.EH.dragOffsetY);
		console.log('move ' + offset);
	        this.resizeTarget(this.tabSet, true, true, offset, null, null, true);		
		return true;
	}
};

var label = isc.Label.create({contents: 'test', height: '*'});
var tabSet = isc.TabSet.create({
	tabs: [{title: 'tab1'},{title: 'tab2'}],
	initWidget: function() {
		this.tabBarProperties = isc.addProperties({}, tabBarProperties);
		this.tabBarProperties.tabSet = this;
		this.Super('initWidget', arguments);
	}
});

isc.VLayout.create({
	height: '100%',
	width: '100%',
	members: [label, tabSet],
	initWidget: function() {
		this.Super("initWidget", arguments);
		tabSet.layout = this;
	}
});

[Isomorphic]

Both problems would be solved by not trying to use dragReposition, which is not what you're doing - you are basically doing a custom drag.

So just set canDrag, when prepareForDragging is called set this.dragOperation to anything that's not built-in (eg "custom"), then implement dragStart/dragMove et al (not dragRepositionStart, etc).

[martintaal]

Hmm, I tried this (see code below) but setting the dragOperation makes it not working in chrome, in firefox this approach does not work (both with dragOperation set and not set). Should I set something else? I set the isc.EventHandler.dragTarget/dragOperation cause this also done like this in Canvas.prepareForDragging.

var tabBarProperties = {
    	dragAppearance:"none",   
	dragStartDistance:1,
	canDrag: true,
	cursor: 'hand',

	prepareForDragging: function () {
		isc.EventHandler.dragTarget = this;
		isc.EventHandler.dragOperation = 'custom';
	},

	dragStop: function() {return true;},
	dragStart: function() {
		this.tabSet.maxHeight = this.tabSet.layout.getVisibleHeight() - 30;
		this.tabSet.minHeight = 30;
		console.log('dragStart ');
		return true;
	},

	dragMove: function() {
	        var offset = (0 - isc.EH.dragOffsetY);
		console.log('move ' + offset);
	        this.resizeTarget(this.tabSet, true, true, offset, null, null, true);		
		return true;
	}
};

var label = isc.Label.create({contents: 'test', height: '*'});
var tabSet = isc.TabSet.create({
	tabs: [{title: 'tab1'},{title: 'tab2'}],
	initWidget: function() {
		this.tabBarProperties = isc.addProperties({}, tabBarProperties);
		this.tabBarProperties.tabSet = this;
		this.Super('initWidget', arguments);
	}
});

isc.VLayout.create({
	height: '100%',
	width: '100%',
	members: [label, tabSet],
	initWidget: function() {
		this.Super("initWidget", arguments);
		tabSet.layout = this;
	}
});

[Isomorphic]

Set the dragOperation on the TabBar (via this.dragOperation). Don't try to set flags on the EventHandler object, those are internal.

[martintaal]

Yes, I tried that but it does not make a difference:

	prepareForDragging: function () {
		this.dragOperation = 'custom';
	},

With this code it doesn't work in Chrome/FF, without this it does work in Chrome but not in FF.

Or should I set a different dragoperation?

gr. Martin

[Isomorphic_Paul]

We just reworked the Toolbar prepareForDragging method to better handle this case.
The change will be present in our next nightly build -- with this change you won't need to implement your own prepareForDragging or custom drag operation -- you can simply set canDrag to true and have dragStart / dragStop / dragMove methods to actually do your custom drag handling.

Give it a shot with tomorrow's nightly and let us know if you still see problems

Thanks

var tabBarProperties = {

    canDrag: true,
	dragAppearance:"none",   
	
	dragStartDistance:1,
	canReorderItems:true,
	
	cursor: 'hand',

	dragStop: function() {return true;},
	dragStart: function() {
		this.tabSet.maxHeight = this.tabSet.layout.getVisibleHeight() - 30;
		this.tabSet.minHeight = 30;
//		console.log('dragStart ');
		return true;
	},

	dragMove: function() {
        var offset = (0 - isc.EH.dragOffsetY);
        this.resizeTarget(this.tabSet, true, true, offset, null, null, true);		
		return true;
	}
	
};

[martintaal]

This works! I had to make 2 changes to the example code:
- got rid of the canReorderItems: true
- correct for the tabbar height, so the call to resizeTarget should be:
this.resizeTarget(this.tabSet, true, true, offset, -1 * this.getHeight(), null, true);

Thanks!

gr. Martin