We wanted a resizable asset map (sometimes it's a hassle to scroll around and undocking the asset map isn't always feasible). We did ask for this as a feature request a year ago apparently (it was before I joined my organisation) but we were informed "this is not technically possible".
So on that note I decided to implement it.
I've got a solution that seems to work, a few other people here have done some basic testing. I've developed the code on 3.16.2 SSV in a VM and ported it to 3.14.2 running on our current test server.
I've tested with Firefox 2.0.0.11 and IE 6.0.2900.
I would be interested in getting this integrated into the core if it passes Squiz's coding standards so that we don't have to patch matrix each upgrade and other Matrix customers can be happy that they've recieved a free feature.
Hurdle 1: Make the asset map change size when the frame around it changes size. Easy!
Add this code to "/core/lib/asset_map/asset_map.js":
// DAVE PATCH: resizable asset map function daveResizeAssetMap() { var frameWidth = document.body.clientWidth; var frameHeight = document.body.clientHeight; var assetMap = document.getElementById('sq_asset_map'); var newWidth = frameWidth - 5; var newHeight = frameHeight - 70; // argh negative size = badness if (newWidth > 0) assetMap.style.width = newWidth; if (newHeight > 0) assetMap.style.height = newHeight; } // adjust applet size after the frame is resized window.onresize = daveResizeAssetMap; window.onload = daveResizeAssetMap;
[b]Hurdle 2[/b]: make the frame resizable.
Allowing the browser to manage the resizing of the frame was only problematic from a looks perspective. I ended up with ugly borders on the screen, if someone knows enough css to make the standard browser based resizing work nicely I'd be interested to know what has to happen.
My alternative was to make the the toggle bar in the middle draggable with javascript.
All the code for this was in "/core/include/backend.inc".
To fix some bugs in ie I added noresize to the frames:
To make the toggleFrame function work with a frame that was an arbitrary size I made a few changes, I also added some code below it. Note, this bit of code didn't work when I dropped it on 3.14.2, I had to hard code the $am_width value:
// DAVE PATCH: resizable asset map function toggleFrame() { var cols = fset.cols.split(','); cols[1] = (parseInt(cols[1]) == 0)?0:10; if (hidden == false) { if (cols[1] == 10) { fset.cols = "0,10,*"; } else if (fset.cols == "<?php echo $am_width; ?>,0,*") { fset.cols = "0,0,*"; } hidden = true; } else { if (cols[1] == 10) { fset.cols = "<?php echo $am_width; ?>,10,*"; } else if (fset.cols == "0,0,*") { fset.cols = "<?php echo $am_width; ?>,0,*"; } hidden = false; } } var davesIETest = document.all?true:false; function daveAdjust(amount) { var cols = fset.cols.split(','); cols[0] = parseInt(cols[0]) + amount; cols[1] = (parseInt(cols[1]) == 0)?0:10; cols[2] = "*"; fset.cols = cols.join(','); } var daveMouseDown = false; var daveMouseOrigin = 0; function daveDrag(e) { var x; var btnActuallyDown = true; if (davesIETest) { x = event.clientX; // sometimes ie loses track of the mouse and never sends us // a mouse up event, this hack fixes it btnActuallyDown = event.button == 1; } else { // the above bug for ie exists for firefox, but we can't // tell programatically if the left mouse button is down // unless you want to make mouse2 or 3 the drag button your // stuffed. x = e.pageX; }if (daveMouseDown && btnActuallyDown) { daveAdjust(x - daveMouseOrigin); } } function daveDown(e) { if (davesIETest) { daveMouseOrigin = event.clientX; } else { daveMouseOrigin = e.pageX; } daveMouseDown = true; } function daveUp(e) { daveMouseDown = false; } document.onmousemove = daveDrag; document.onmousedown = daveDown; document.onmouseup = daveUp;</pre><br />
I tweaked the table drawing inside the frame to display a sensible cursor (so that the user actually _knows_ they can resize it).:
Edit: added info on browsers i've tested in.
Edit: please note variable names only have "dave" at the front to make sure I didn't clash with any variables already floating around, feel free to change them.