mirror of
https://gitlab.com/crafty-controller/crafty-4.git
synced 2024-08-30 18:23:09 +00:00
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:
commit
2ed9e5663d
@ -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 %}
|
||||
|
Loading…
Reference in New Issue
Block a user