Make the Text Input Expandable

[ghost]

It's difficult to proofread submissions to the chat that are greater than two lines, so it would be cool if there was a way to expand the textbox via a click and drag control.

[sylae]

iirc just add resizable="resizable" attribute to do this. Might need some css help to make it pretty but it'd do for a one-time thing On Jun 23, 2016 4:10 PM, "Nebedia" notifications@github.com wrote:

It's difficult to proofread submissions to the chat that are greater than two lines, so it would be cool if there was a way to expand the textbox via a click and drag control.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/cburschka/cadence/issues/420, or mute the thread https://github.com/notifications/unsubscribe/ACqYzOZf7Iha6qgA9GvNdJxHKHZR9-nRks5qOwRIgaJpZM4I9Sf9 .

[cburschka]

Probably need some css magic to make sure it doesn't fuck with the layout, but yeah.

Also, I'll check this out: https://github.com/ro31337/jquery.ns-autogrow

[cburschka]

Actually the resizable property seems to be useless, because browsers put that widget into the lower-right corner and fix the position of the top-left. We want a widget on the top, and the textarea must remain flush with the bottom.

Also, the text box is actually invisible, with the background added by the surrounding div#inputFieldContainer. So that needs to grow too.

[cburschka]

[sylae]

Looks perfect to me On Jun 23, 2016 4:20 PM, "Christoph Burschka" notifications@github.com wrote:

[image: screenshot from 2016-06-24 00-19-59] https://cloud.githubusercontent.com/assets/1448001/16322145/79512584-39a1-11e6-8156-c431286c2585.png

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/cburschka/cadence/issues/420#issuecomment-228203145, or mute the thread https://github.com/notifications/unsubscribe/ACqYzF00-930sxX-nCaJf6ZqtiT_BjcIks5qOwa8gaJpZM4I9Sf9 .

[ghost]

If the lower right becomes the resize widget, that wouldn't help too much because the textbox is already at the bottom of the screen. It would be even less useful for mobile, but I'm not sure you can put it at the top.

[sylae]

Iirc, maybe it was bleeding or maybe something else, but a site had it so the resizable widget "grew" upwards instead of downwards. Sort of a float:bottom I guess On Jun 23, 2016 4:21 PM, "Nebedia" notifications@github.com wrote:

If the lower right becomes the resize widget, that wouldn't help too much because the textbox is already at the bottom of the screen. It would be even less useful for mobile, but I'm not sure you can put it at the top.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/cburschka/cadence/issues/420#issuecomment-228203425, or mute the thread https://github.com/notifications/unsubscribe/ACqYzKpwodGGspGPxWWeb9SLsdu1kF0-ks5qOwcFgaJpZM4I9Sf9 .

[cburschka]

oh hey, actually I'm not using the native property but jQuery UI. And that has options! :D http://api.jqueryui.com/resizable/#option-handles

[cburschka]

Very nearly works out of the box via {handles: 'n', 'alsoResize': ui.dom.inputField} if I put the resizer on the container instead of the textarea.

The sidebars and chat pane still need to shrink accordingly, though.

Also resizing the textarea fixes its absolute position on the page relative to the top (instead of the bottom, which it starts out with), so you can't resize the window afterward.

[cburschka]

Yeah, it adds inline top and width properties in pixels to both. That's bad; it would remain flush with the bottom on its own, and the width shouldn't be changeable anyway.

[cburschka]

The "alsoResize" is unnecessary since the textarea's 100% width/height settings already make it scale with the container. Removing it also fixes the width problem.

The top property cannot be avoided, but it can be removed by an event after the resizing operation is done.

$('#inputFieldContainer').resizable({
    handles: 'n',
    stop: function () { $(this).css('top', ''); }
});

Now we just need the chat pane and sidebar to shrink so the textarea doesn't overlap them.

[cburschka]

Moving to #160 .

[cburschka]

@TODO: Make it a persistent setting.

Unfortunately non-trivial. The resizable widget cannot be triggered programmatically, and trying to manually set heights will run into problems (because the input field and its wrapper both get explicit heights, which are calculated by the library).

https://stackoverflow.com/questions/2523522/how-to-trigger-jquery-resizable-resize-programmatically

As the best solutions seem to be, alternately, "inject extra code into the library" or "fire the mouse events directly :aaaaa:", I'll put that on ice for now. Maybe this could be a feature.