jcubic/jquery.terminal

JQuery Terminal Emulator

terminaleffect

@terminaleffect

Hello Jakub! I have run into an issue with case sensitive file names and commands. EG: ls vs LS from the user input.

and cat filename.txt vs FILENAME.txt

terminaleffect

@terminaleffect

My second issue is the rpcjson output from a text file doesnt word-break properly. it's breaks on any letter closest to the margin.

Jakub T. Jankiewicz

@jcubic

@terminaleffect by default terminal is breaking on characters that's at the edge of the terminal to enable work break you need to use word break option, not sure if you can enable it globally, aslo by default everything is case sensitive if you want case insensitive you need to write your own code to handle user input and parse it yourself

terminaleffect

@terminaleffect

Case sensitivity is OK - how would i go about enabling the word break option?

Jakub T. Jankiewicz

@jcubic

with JSON-RPC there is no option right now, unless you monkey patch echo function, will need to add global option for this.

monkey patch can look like this:

(function(echo) {
  term.echo = function(obj, options) {
    options = Object.assign({}, options, {keepWords: true});
    return echo.call(this, obj, options);
  };
})(term.echo);

terminaleffect

@terminaleffect

where would i monkey patch this in?

Jakub T. Jankiewicz

@jcubic

Just add after you create the terminal where you have access to terminal object, it should also work if you put this in onInit

terminaleffect

@terminaleffect

it work~

thank you

final question, is there a way to make images that are output from the fs resized to browser?

every way i try and do it it seems to ignore

Jakub T. Jankiewicz

@jcubic

You mean that you send binary data in JSON-RPC? as result of method?

Also I think there is other way to have JSON-RPC and echo with word break you can write general function that will get stuff from each request and you can call echo with options you like, even raw html to print images

terminaleffect

@terminaleffect

oh.

Jakub T. Jankiewicz

@jcubic

the option is processRPCResponse you will get data from RPC and you can call echo inside

with images you can always send object wtith 3 properties and it will print one of them {text, html, image} instead of image you can construct the html for image on the server

{
    processRPCResponse: function(result) {
        if (result.html) {
            this.echo(result.html, {raw: true});
        } else if (result.text) {
            this.echo(result.text, {keepWords: true});
        }
    }
}

and you can do other staff like display ASCII table if result is array or display it as columns.

terminaleffect

@terminaleffect

i add this to the json rpc

Jakub T. Jankiewicz

@jcubic

you need this as option $('...').terminal("url", {processRPCResponse: function(result) { } });

terminaleffect

@terminaleffect

can i pay pal you and you do this for me?

i have no idea where do implement this lol

Jakub T. Jankiewicz

@jcubic

Do you have any code that works?

terminaleffect

@terminaleffect

i have the version you sent me a while back with the custom commands

cat, ls, less etc

password protected

Jakub T. Jankiewicz

@jcubic

Did I send the the file, I can't find it on the chat or did I send in an email?

terminaleffect

@terminaleffect

i think you sent in email. i will send you back the email now.

terminaleffect

@terminaleffect

sent!

Jakub T. Jankiewicz

@jcubic

and what exactly you want to add to this fs code?

terminaleffect

@terminaleffect

word break, image resize to browser.

if the alternate option you mentioned using processRPCResponse works then i'd need to know how to call on that from the FS.

Jakub T. Jankiewicz

@jcubic

if you don't mind that bigger images take longer to download, if they don't break because of too much data in URI you can use css

.terminal img {
  max-width: 100%;
}

and for word break here is updated cat:

        cat: function(cmd) {
            if (cmd.args.length == 1) {
                if (!cmd.args[0].match(/^https?:\/\//)) {
                    var filename = cwd + (cwd !== '/' ? '/' : '') + cmd.args[0];
                    rpc.is_image(filename).then((image) => {
                        if (image) {
                            return rpc.data_uri(filename).then(function(data) {
                                term.echo('<img src="' + data + '"/>', {raw: true});
                            });
                        } else {
                            read(cmd, term.echo);
                        }
                    }).catch(error);
                } else {
                    read(cmd, function(text) {
                        term.echo(text, {keepWords: true});
                    });
                }
            } else {
                this.error('You need to specify the file');
            }
        },

this lines were changed:

                    read(cmd, function(text) {
                        term.echo(text, {keepWords: true});
                    });

if images are too big and they don't show up and there is some error about size limit then you need to use blob data uri, it's a way to have short urls for big blob of data

or course you can resize them on server but if transfer is not the problem I would use css

wait one more thing in cat

Jakub T. Jankiewicz

@jcubic

        cat: function(cmd) {
            function echo() {
                read(cmd, function(text) {
                    term.echo(text, {keepWords: true});
                });
            }
            if (cmd.args.length == 1) {
                if (!cmd.args[0].match(/^https?:\/\//)) {
                    var filename = cwd + (cwd !== '/' ? '/' : '') + cmd.args[0];
                    rpc.is_image(filename).then((image) => {
                        if (image) {
                            return rpc.data_uri(filename).then(function(data) {
                                term.echo('<img src="' + data + '"/>', {raw: true});
                            });
                        } else {
                            echo();
                        }
                    }).catch(error);
                } else {
                    echo();
                }
            } else {
                this.error('You need to specify the file');
            }
        },

terminaleffect

@terminaleffect

ok thank you!

terminaleffect

@terminaleffect

this works perfectly

monkey patch FTW!

Jakub T. Jankiewicz

@jcubic

monkey patch was the first one I thought that you have terminal with JSON-RCP like this $('div').terminal('script.php',

the last solution is not monkey patch

terminaleffect

@terminaleffect

shows how much i know

last question, how would i go about cat'ing a html link?

Jakub T. Jankiewicz

@jcubic

you mean url that start with http? the code should give you the html of the url

Where communities thrive

People

Repo info

Activity