9 ms·
Show HN: WideArea – an expandable textarea
- deleted 13y ago[deleted]
- grimtrigger 13y agoLooks cool. Not sure what i would use it for, though. Whats the use case you had in mind?
- afshinmeh 13y agoWriting with pleasure and keep focusing on writing. You can define your preferred color scheme and more...
- aytekin 13y agoYou guys did a great job with this library. We have just added it to JotForm. http://www.jotform.com/blog/80-New-Editor-Options-for-Text-Area-Fields http://www.jotform.com/blog/80-New-Editor-Options-for-Text-A...
- websymphony 13y agoGithub uses similar editor in their comments textarea. Very cool.
- spindritf 13y agoI like it. I'm assuming you can style colours, width of text in the wide editor, etc? Going back to the small window with an "X" would be a bit unnerving with lots of text typed in.
- afshinmeh 13y agoYeah you can simply create your preferred color scheme and use it. I will release more better version next days and also an small blog post to how write an color scheme for WideArea.
- daGrevis 13y agoI suggest to add key-bindings: <Control-Space> for going to wide-mode and <Escape> for getting back.
- afshinmeh 13y agoI really looking for a short-key for fullscreen mode but now you can use Escape key for exiting the fullscreen mode.
- atacrawl 13y agoVery nice work. Any plans of adding the ability to automatically go fullscreen on focus?
- afshinmeh 13y agoYeah sure, for next versions.
- beggi 13y agoVery nice, going to use this in a project now, so thanks a lot for this. It would be fully featured and extra sweet for me with some kind of lightweight feature to save a local backup of entered text. :)
- gbadman 13y agoThat would be a fantastic addition
- evilduck 13y agoJquery required, but there's http://sisyphus-js.herokuapp.com/ http://sisyphus-js.herokuapp.com/
- proexploit 13y agoI also used Garlic.js (http://garlicjs.org/ http://garlicjs.org/) in a project. Also requires jQuery or Zepto but I was really pleased with it. Pretty lightweight.
- afshinmeh 13y ago+1, nice.
- regularfry 13y agoSomewhat broken on android for me - maximise in landscape, rotate the phone, and it goes Wrong. The text wrapping doesn't realign, and the close button is left off screen.
- afshinmeh 13y agoThanks for report, I'm currently working on a better version for tablet/mobile devices. Could you please report it on the Github issues?
- romaniv 13y agoFirefox and Chrome already allow you to re-size textareas. At the very least this library shouldn't shut that functionality down.
- Semaphor 13y agoYeah, but it stays where it is. So if there are parts that would overlap it, they do that. A particular example here is Reddit, in deeply nested threads on smaller windows you can see maybe 30-40% of the textarea. Maybe someone will make a Chrome extension out of this :)
- deleted 13y ago[deleted]
- afshinmeh 13y agoThumb up.
- pkfrank 13y agoVery cool. Reminds me of http://www.ommwriter.com/ http://www.ommwriter.com/. I like using minimal text editors like this when I'm brainstorming or making a first pass at something; good for simple, distraction-free writing. Cheers
- jenius 13y agoFirst of all, this is awesome. Great idea, can't believe it hasn't been around till now, and will definitely be using it. The only thing I could change here is the "x" icon when expanded. Someone mentioned here that they would be unnerved hitting an "x" button with a lot of text - this is definitely valid, I felt the same thing when trying it out. A simple change to an "exit full screen" icon (like this http://findicons.com/files/icons/1667/iconic/32/fullscreen_exit.png http://findicons.com/files/icons/1667/iconic/32/fullscreen_e...), would solve the problem nicely : )
- afshinmeh 13y agoNice! Thanks for the nice suggestion.
- nfvs 13y agoAlso, the "expand" button overlaps with the h-scroll bar when it's displayed. http://i.imgur.com/4mwx7ty.png http://i.imgur.com/4mwx7ty.png Awesome project nevertheless.
- jamiecurle 13y agoThis is a very nice implementation. I did something similar myself django-writingfield[1], but it is Django specific. I much prefer your UI and the switching of dark text/light background is really slick. [1]: http://django-writingfield.obscuremetaphor.co.uk/ http://django-writingfield.obscuremetaphor.co.uk/
- StavrosK 13y agoI will second it. I would also move it on the bottom right, as I didn't look at it except with my peripheral vision and thought it was an X/close button. When instructions said to click it, I went from "why would I click the close button" to "oh, it's actually a fullscreen button" before I clicked it. I never would have discovered it.
- jjmardlin 13y ago+1 "X"s are frightening. You might just give it some tooltip text.
- Pezmc 13y agoHow does it handle multiple textboxes on the same screen?
- afshinmeh 13y agoYou will have only one fullscreen-ed textarea at the same time.
- aniketpant 13y agoWas this inspired by GitHub's new distraction-free comment feature? The styling looks exactly the same.
- deleted 13y ago[deleted]
- deleted 13y ago[deleted]
- UnoriginalGuy 13y agoThe fact it has no borders in "full screen mode" is really disorientating. I like the concept but wouldn't use it because of the loss of visual feedback (but full screen mode is optional which is fine). As an aside: It is a shame this "breaks" Chrome's ability to let you re-scale the non-full-screen box. So it is an all or nothing choice, you have to give up something to get something... It looks like you disabled Chrome's resizing on purpose too, which seems unnecessary/annoying. Why break existing functionality just to add new functionality?
- illdave 13y agoFrom a quick look, it looks like it's reasonably simple to add resizing back in. The CSS on the textarea has resize:none - removing that and removing the max-width should add that functionality back in, should you want it.
- bpatrianakos 13y agoIt should be trivial to get the resize functionality back. I think in cases like this breaking existing functionality is fine. This is obviously aimed at people with a relatively narrow use-case in mind. In a situation where the purpose of full screen mode is to remove the distractions of the surrounding document this seems fine. I personally would want my text box at a fixed size on some forms with the option to make it the only thing on the page (case in point is my own app https://writeapp.me https://writeapp.me [yes, an account is needed to see the text box]) so as to keep the design from breaking (it's a very opinionated page when it comes to design). I think overall this is an improvement to text boxes generally which is why I can forgive the breakage of one bit of existing functionality.
- fredsted 13y ago>It looks like you disabled Chrome's resizing on purpose too, which seems unnecessary/annoying. Why break existing functionality just to add new functionality? That functionality can be re-enabled by changing the "resize" CSS style[0]. [0] http://davidwalsh.name/textarea-resize http://davidwalsh.name/textarea-resize
- INTPenis 13y agoReminds me of Hallo.js, which uses the Randy js library if I'm not mistaken. I used it to make a blog for my elderly father. The goal was to make the posts easily editable. Edit: s/Randy/Rangy/
- Deestan 13y agoAdvice: Put some contrast on the page text even when not mouse-over'd. I shouldn't have to strain my eyes to read the main page text.
- ndr 13y agoI could't have said it in a better way.
- tjbiddle 13y agoBring back the ability to re-size the smaller box, and add a key board short cut and this will be glorious :-) Nice work!
- afshinmeh 13y agoSure, thanks for the feedback.
- jjmardlin 13y agoWow, what an excellent zen writing resource. Will be using for longer writing projects I'm sure!
- afshinmeh 13y agoGlad to hear.
- dylanhassinger 13y agogorgeous
- netcraft 13y agoit also breaks if you hit tab while expanded.
- afshinmeh 13y agoThanks for the bug report. It would be really good if you submit it on Github issues.
- nej 13y agoI'd like this if the back button resized the textarea back to it's normal size.
- mgeraci 13y agoThis looks great! One suggestion is that in full screen mode, the textarea doesn't stretch across the screen (it's a centered column) but since there are no borders it is hard to tell where the active area is. I think that clicking on the empty space outside of the main column could give focus to the textare, and that would have made it more clear for me.
- afshinmeh 13y agoThanks, good suggestion. It would be so better if you submit your suggestion in Github issues.
- instakill 13y agoHow would you go about populating the full-screened text-box if the regular text-box has no placeholder text?
- oftenwrong 13y agoExcellent. Nothing sucks more than having to use a tiny textbox or fiddle with a resizeable one when you are trying to write something longer than a few lines. It would be nice if it used localstorage to remember whether the user prefers dark or light. Personally, I prefer having my browser launch an external editor for textareas. However, this is better for most people because it does not require any installation or configuration.
- AndreasFrom 13y agoPerhaps this would also be useful as a browser extension so it could be used across the Internet.
- afshinmeh 13y agoI'm agree.
- btilly 13y agoFor me the expanded text area takes over my whole window, but I can't type as much text before hitting a line break as I can with the normal text area. And when I'm typing into a browser, I'm usually replying to something. Being able to read that thing I'm replying to as I'm typing has a lot of value to me.
- BillSaysThis 13y ago@afshinmeh Would this work with CodeMirror?
- afshinmeh 13y agoYes, it should work with CodeMirror also.
- durkie 13y agoYou guys do great work! This is the third thing from your group in probably as many months that is simple, clean, and useful. Thanks!
- afshinmeh 13y agoHeeeey :) Thanks man.
- mbreese 13y agoWait, what? 2kb JS? 4kb CSS? Why does this take so much? I use a similar fullscreen textarea toggle (actually an ACE editor), that is very simple. For the Javascript, you just need to add a new class to the text area. For the CSS, you need to make the '.fullscreen' class the following: .fullscreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } Now, this doesn't get you the little button in the upper right corner and the styling for the full screen textarea, but it is very functional, very configurable (just style with CSS), and quite small. Add a small button of your own and let the browser do all of the heavy work, by just adding a CSS class. Oh, and this doesn't break Chrome/webkit's ability to resize the textarea when not in fullscreen mode...
- afshinmeh 13y agoThanks, it's the first version and I'll fix this problems asap.
- Oculus 13y agoAwesome job!
- joekarma 13y agoLove the control, but hate that the page's text is kept down to a dim 40% opacity when the mouse isn't on top. I have weird mousing habits when reading blocks of text (I move the mouse around and click random things), and it's distracting to have the text fade out when my cursor ventures off course; I practically have to squint to read what the ultralight and not-quite-opaque text says when faded out.
- afshinmeh 13y agoOps! Thanks, I'll change it.
- electic 13y agoThis is awesome but it would be great if it also expanded as you type. Like on Facebook when you are typing a status update that is long. The box expands vertically as you type. Neat feature. If it could do that, this thing would be rock solid.
- jjmardlin 13y agoI've been using this all morning to write a blog post. Found it awesome! I don't really know the better way, but when I have more than one page of text, I end up with two scroll bars. https://dl.dropboxusercontent.com/u/37659951/WideArea%20-%20Better%20Textarea.jpeg https://dl.dropboxusercontent.com/u/37659951/WideArea%20-%20... Non-ideal, perhaps a different style of scroll bar, or pushing it right to the edge.