davidecaruso / shell.js Goto Github PK
View Code? Open in Web Editor NEW:zap: A JavaScript library to create HTML terminals in web pages.
Home Page: https://davidecaruso.github.io/shell.js/
License: MIT License
:zap: A JavaScript library to create HTML terminals in web pages.
Home Page: https://davidecaruso.github.io/shell.js/
License: MIT License
Title is in the center of the window and I think it should be in the center of free space so not including the buttons because when window is small (width 250 + windows 10 + "C:\windows" title)
You can see this in this demo https://codepen.io/jcubic/pen/WZvYGj just edit the resizable width and then change type to windows and resize the window.
Currently, (depending on screen viewport width - especially on a narrow mobile) the shell.js window height may not be sufficiently large initially to contain all the commands that will be displayed by shell.js.
Hence, as typed.js continues filling the screen, this may cause in the window height shifting towards the end of the commands. Cumulative layout shift would then present an issue with google pagerank. Adding scrollbars could fix this issue. Is it possible to have a max-window-height with scrollbar options, or perhaps to define a min-window-height (and no scrollbars)?
shell__content css specification currently are given as
.shell__content {\n font-family: monospace; }\n\n.shell {\n font-weight: 400; }\n\n.shell {\n width: 400px;\n height: 300px;\n display: -webkit-box;\n display: **-ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n** flex-wrap: wrap;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n text-align: left;\n color: #F1F1F1;\n **overflow: hidden**;\n font-weight: 300;\n -webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.5);\n
Flexbox will cause the size of the box to increase as needed - this is not best practice for inclusion on a webpage though, as it will negatively impact google pagerank if layout shift occurs.
Perhaps a modification can be made to
Hi
I would like to use your script like a terminal screen but want ti add texts after initialize
is is possible to add more commands after initialize without user input?
something like:
const shell = Shell("#shell", ["Hello, world!"], { "user": "root", "host": "ctb", "responsive": true, "shadow": true, }).type();
shell.write('additional output will be here').type();
is it possible?
Hi! Can i use it with user input?
For example i want to create few commands and give an ability to user type it with keyboard, but now i can't understand how to do it, because according to Docs all i can to do - this is invoke type(['command']) so user can't type it directly in terminal?
Thanks.
Is there a function where you can get a callback when a certain command is executed?
EDIT: Add a function to use the console as a normal console
Hi David, thanks for the great project! Is there any way to implement some kind of function to handle cd
commands? If one of the commands requests a change of directory, then ideally this would update the path of the emulator in the main window and the title bar.
Or perhaps even simpler: in the commands argument, accept a key:value pair of something like:
commands = {
['input': 'cd mydir'],
['input':'ls', 'output', 'subdir1 subdir2', 'path': '~/mydir/']
}
adding 'path' as an optional parameter for each command allows the user to override the path being displayed for each command, and makes it not necessary to keep track of the filesystem by any other means.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.