added gutterId to the options

[veetrp]

First of all, thanks for nice project! I've included it in my openlayers project.
Second, I have 'enhanced' the code (I think) by adding a gutterId to the options. It'll set the id of the gutter element created:
`
(...)

var gutter = document.createElement('div')

if (options.gutterId) gutter.id = options.gutterId

(...)
`

Why? Because this way you are able to attach an eventlistener to the gutter using:
`

addListenerById = function(listenertype,id,handlerfunction) {

var elm = document.getElementById(id);

if (elm) {

	elm.addEventListener(listenertype, handlerfunction, false);

	console.log("listener type="+listenertype+" attached to id="+id);

}

else {

	console.log("could not find element with id="+id);

}

}
`

Extremely handy to use when the gutter has resized a div and you need to, in my case, redraw the map div/canvas. As you may know, there is no 'resize' event available for a div, only for the window (which isn't resized when the gutter is dragged).
Thought to let you know.

[nathancahill]

Can you use the onDragEnd callback to resize the map? Or if you have to do it constantly, onDrag?

[veetrp]

I did not want to interfere with your split.js, but instead pick up the gutter through getElementById(id) and add my own event listener. There's no need for me to have a listener onDrag. If you know openlayers and open street maps (OSM) a bit then you can imagine that I put a map in one of your split panes. If you move the splitter (as I refer to it coming from .Net :) ), then the map is squashed. If you release the mbutton (or if you would catch onDragEnd), the map redraws itself properly. For some reason, don't know yet why, I could not get the drag end to work, but the mouseUp worked fine. I dropped a jpg to clarify my above million words...

Btw, I wanted to post this 'issue' as an enhancement but didn't know how. I'm new on github (but more active on codeproject). Cheers, Reinoud

PS: sorry I accidently closed this comment line. Don't know if I can re-open it again...

[veetrp]

it worked re-opening it... hooray

[nathancahill]

So onDragEnd isn't being called? Or it is being called but isn't working with the map?

[veetrp]

With my function(listenertype,id,handlerfunction) in my own js lib, I was trying to attach onDragEnd to your gutter. It wasn't fired. When attaching onMouseUp with the above function, it worked. I probably did it incorrectly.

In any case, I'm sort of coding it myself now from scratch using only mouseDown, mouseMove and mouseUp events on the gutter. Partly just hobbying and partly because I'm using flex display a lot and that interferes sometimes in mysterious ways in various browsers. I want to find out exactly how, when and what. Let me know if you're interested in the end result.
Rgds.

[veetrp]

In your profile I see that you specifically work on mapping projects. So you must be familiar with openlayers3?

[nathancahill]

Yes, I originally wrote Split.js for a similar interface to the one in your screenshot, and needed onDrag and onDragEnd for resizing the map, the same way you need it.

Don't attach the event listeners, instead pass them in the options:

Split([..], {
onDrag: function () {},
onDragEnd: function () {},
}

[veetrp]

Aha, funny, isn't it? Passing the callback is a good idea. I'll let you know. I probably not going to implement the onDrag. It is not problem if the map gets squashed or stretched, as long as it refreshes when the mouse is released again. I'm developing this now for my colleagues over the intranet, so it doesn't have to be 100% perfect. As long as they can get to the data and do coord transformations.
In that respect: I am really happy about proj4. They really done an excellent job with that. You're involved in the delopment of that too?

[veetrp]

Nathan, I attach my version of splitter panels here. It sits together with a panels module I made earlier and uses the .net-like classes docktop, dockleft, dockfill etc. It works completely with the css flex and only uses js. For the splitter I added a couple of options wrt your splitter: splitter.isFixed, fixedPanel2, minSizePanel1 and minSizePanel2. These are the options I am familiar with working .Net.
If you have time and able to check this out and comment, I'd be grateful. Tnx, Reinoud

zip file: veetsplitpanels.zip

[nathancahill]

Thanks!