Merge branch 'feature/filemanager-improvements' into 'dev'

Fix Ace editor saving keybinds and ex-commands

See merge request crafty-controller/crafty-4!341
This commit is contained in:
Iain Powrie 2022-06-15 23:24:06 +00:00
commit 2ed9e5663d

View File

@ -211,29 +211,40 @@
.tree-nested {
display: none;
}
html, body, body > .container-scroller {
overflow: initial;
}
.editorManager {
top: 63px;
position: sticky;
}
</style>
<div class="col-md-6 col-sm-12">
<h2 id="fileError"></h2>
<div id="editorParent">
{{ translate('serverFiles', 'editingFile', data['lang']) }} <span id="editingFile"></span>
<div id="editor" onresize="editor.resize()" style="resize: both;width: 100%;">file_contents</div>
<br />
<div class="editorManager">
<h2 id="fileError"></h2>
<div id="editorParent">
{{ translate('serverFiles', 'editingFile', data['lang']) }} <span id="editingFile"></span>
<div id="editor" onresize="editor.resize()" style="resize: both;width: 100%;">file_contents</div>
<br />
</div>
{{ translate('serverFiles', 'keybindings', data['lang']) }}:
<div class="btn-group" role="group">
<button onclick="setKeyboard(event.target)" class="btn btn-primary" data-handler-name="null">{{
translate('serverFiles', 'default', data['lang']) }}</button>
<button onclick="setKeyboard(event.target)" class="btn btn-secondary"
data-handler-name="ace/keyboard/vim">Vim</button>
<button onclick="setKeyboard(event.target)" class="btn btn-secondary"
data-handler-name="ace/keyboard/emacs">Emacs</button>
<button onclick="setKeyboard(event.target)" class="btn btn-secondary"
data-handler-name="ace/keyboard/sublime">Sublime</button>
</div>
<h3 id="file_warn"></h3>
<button class="btn btn-success" onclick="save()"><i class="fas fa-save"></i> {{ translate('serverFiles',
'save', data['lang']) }}</button>
<span style="color: #2fb689; margin-left: 10px;" id="save_status"></span>
</div>
{{ translate('serverFiles', 'keybindings', data['lang']) }}:
<div class="btn-group" role="group">
<button onclick="setKeyboard(event.target)" class="btn btn-primary" data-handler-name="null">{{
translate('serverFiles', 'default', data['lang']) }}</button>
<button onclick="setKeyboard(event.target)" class="btn btn-secondary"
data-handler-name="ace/keyboard/vim">Vim</button>
<button onclick="setKeyboard(event.target)" class="btn btn-secondary"
data-handler-name="ace/keyboard/emacs">Emacs</button>
<button onclick="setKeyboard(event.target)" class="btn btn-secondary"
data-handler-name="ace/keyboard/sublime">Sublime</button>
</div>
<h3 id="file_warn"></h3>
<button class="btn btn-success" onclick="save()"><i class="fas fa-save"></i> {{ translate('serverFiles',
'save', data['lang']) }}</button>
<span style="color: #2fb689; margin-left: 10px;" id="save_status"></span>
</div>
</div>
@ -267,6 +278,17 @@
let editor = ace.edit('editor');
editor.setTheme('ace/theme/dracula');
editor.session.setUseSoftTabs(true);
editor.commands.addCommand({
name: 'saveFile',
bindKey: {
win: 'Ctrl-S',
mac: 'Command-S',
sender: 'editor|cli'
},
exec: function(env, args, request) {
save()
}
});
// mouseup = css resize end
document.addEventListener("mouseup", function (e) {
@ -364,8 +386,7 @@
},
];
var filePath = '';
let file_loaded = false;
let filePath = '', serverFileContent = '';
function clickOnFile(event) {
filePath = event.target.getAttribute('data-path');
@ -386,7 +407,7 @@
$('#fileError').toggle(false) // hide
setFileName(event.target.innerText);
editor.session.setValue(json.content);
file_loaded = false;
serverFileContent = json.content;
}
},
});
@ -501,36 +522,14 @@
timer = null;
};
}
editor.on('change', function (event) {
if (!event.ctrlKey && !event.shiftKey) {
if (file_loaded) {
document.getElementById('save_status').innerHTML = '<i class="fal fa-file"></i>';
document.getElementById('save_status').style.color = 'gray';
} else {
document.getElementById('save_status').innerHTML = '<i class="fal fa-file-check"></i>';
document.getElementById('save_status').style.color = '#2fb689';
}
}
});
editor.on('undo', function (event) {
document.getElementById('save_status').innerHTML = '<i class="fal fa-file-xmark"></i>';
document.getElementById('save_status').style.color = 'gray';
});
editor.on('redo', function (event) {
document.getElementById('save_status').innerHTML = '<i class="fal fa-file-xmark"></i>';
document.getElementById('save_status').style.color = 'gray';
});
$('#editor').bind('keydown', function (event) {
file_loaded = true;
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
save();
}
//console.log(event.keyCode);
});
/**
* @param {boolean} saved
*/
const setSaveStatus = (saved) => {
document.getElementById('save_status').innerHTML = `<i class="fal ${saved ? "fa-file-check" : "fa-file"}"></i>`;
document.getElementById('save_status').style.color = saved ? '#2fb689' : 'gray';
}
['change', 'undo', 'redo'].forEach(event => editor.on(event, (event) => setSaveStatus(serverFileContent === editor.session.getValue())))
setFileName();
@ -576,11 +575,10 @@
file_contents: text,
file_path: filePath
},
success: function (data) {
console.log("got response:");
document.getElementById("save_status").innerHTML = '<i class="fal fa-file-check"></i>';
document.getElementById('save_status').style.color = '#2fb689';
},
success: (data) => {
serverFileContent = text;
setSaveStatus(true)
}
});
}
@ -1097,7 +1095,13 @@
function setKeyboard(target) {
var handlerName = target.getAttribute('data-handler-name');
if (handlerName == 'null') handlerName = null;
editor.setKeyboardHandler(handlerName);
editor.setKeyboardHandler(handlerName, () => {
if (handlerName == 'ace/keyboard/vim') {
require("ace/keyboard/vim").Vim.defineEx('write', 'w', function() {
save();
});
}
});
var nodes = target.parentNode.querySelectorAll("[data-handler-name]");
nodes.forEach(node => {
@ -1113,4 +1117,4 @@
</script>
{% end %}
{% end %}