search

syntaxseed / terminalfaker

Terminal Faker - A client-side Linux-like cli terminal simulation written in Javascript. Originally forked from AVGP/terminal.js.
MIT License
51 stars 20 forks source link

Input can be difficult to re-focus #21

Closed ghost closed 5 years ago

ghost commented 5 years ago

I made a fix for this earlier but forgot to branch it so it went to master. I reverted it to keep the issue/PR stream cleaner.

I'll open a pull request with the fix (an eventListener on the window that focuses the input).

syntaxseed commented 5 years ago

@jacob-shu Be careful that the eventListener doesn't grab when users are clicking outside the terminal div... or when they are trying to highlight and copy text in the terminal.

One issue is that the input span is not very long. So it can be hard to click into it. I looked into making it longer but it kept wrapping to the next line.

syntaxseed commented 5 years ago

In theory, I want the terminal to be able to drop into a full webpage with other content.

ghost commented 5 years ago

Okay, I was just thinking about how I like my personal use of the terminal to go. But you make a great point, the initial commit put the listener on the window (most similar to my terminal), but a more appropriately scoped eventListener would make a lot more sense.

One issue with that though is the current terminal div only extends to the bottom on the input. So limiting the eventListener to that div wouldn't help with any click below the input line. How about setting the CSS for #terminal height to 100vh? I think that should preserve the ability to drop in. Do you see an issue there?

ghost commented 5 years ago

If I'm reading MDN right, if terminalfaker is dropped in via <iframe> the vh should be relative to the frame.

syntaxseed commented 5 years ago

I'm not a fan of the vertical scroll bar that setting height to 100vh does. And it also needs to play nice if other content is above or below. So I kept the height as is, but added a bottom padding to help for when the user clicks just below the input. I think this is an ok compromise.