configui/templates/components/toolbar.tmpl

219 lines
6.4 KiB
Cheetah
Raw Normal View History

{{define "components/toolbar"}}
<div class="level">
<div class="level-left">
<div class="field has-addons">
<p class="control">
2021-10-21 11:00:25 +00:00
<button class="button is-small has-tooltip-arrow"
data-tooltip="Go to last line"
onclick="editor.gotoLine(editor.session.getLength())">
<span class="icon is-small"><span class="material-icons">
vertical_align_bottom
</span></span>
</button>
2021-10-21 08:04:57 +00:00
</p>
<p class="control">
2021-10-21 11:00:25 +00:00
<button class="button is-small has-tooltip-arrow" id="toolFollow"
data-tooltip="Follow file change (1s)" onclick="toolFollow()">
<span class="icon is-small"><span class="material-icons" id="toolFollowIcon">
sync_disabled
2021-10-21 11:00:25 +00:00
</span></span>
</button>
</p>
<p class="control">
2021-10-21 11:00:25 +00:00
<button class="button is-small has-tooltip-arrow"
data-tooltip="Format Code"
onclick="toolFormat()">
<span class="icon is-small"><span class="material-icons">
code
</span></span>
</button>
</p>
<p class="control">
2021-10-21 11:00:25 +00:00
<button class="button is-small is-light is-danger has-tooltip-arrow"
data-tooltip="Line Wrap"
id="toolWrap" onclick="toggleWrap()">
<span class="icon is-small"><span class="material-icons" id="toolWrapIcon">
view_headline
</span></span>
</button>
</p>
<p class="control">
<div class="select is-small">
<select onchange="SetTabstop(this)">
<option value="0">Tabstop</option>
<option value="4">Tabstop 4</option>
<option value="2">Tabstop 2</option>
<option value="-1">Tab</option>
</select>
</div>
</p>
<p class="control">
<div class="select is-small">
<select onchange="toolSetFontSize(this)">
<option value="1rem">1rem</option>
{{range step 8 36 2}}
<option value="{{.}}px">{{.}}px</option>
{{end}}
</select>
</div>
</p>
</div>
</div>
<div class="level-right">
<div class="field has-addons">
<p class="control">
<button class="button is-small has-tooltip-arrow"
2021-10-21 11:00:25 +00:00
data-tooltip="Refresh" onclick="toolRefresh()">
<span class="icon is-small"><span class="material-icons" id="toolRefreshIco">
2021-10-21 11:00:25 +00:00
refresh
</span></span>
</button>
</p>
{{if not .File.RO}}
<p class="control">
{{if eq .File.Name .AppName}}
{{if not .Static}}
<button class="button is-small has-tooltip-arrow"
2021-10-21 11:00:25 +00:00
data-tooltip="Apply" onclick="toolSave()">
<span class="icon is-small"><span class="material-icons" id="toolSaveIco">
2021-10-21 11:00:25 +00:00
play_arrow
</span></span>
</button>
{{end}}
{{else}}
<button class="button is-small has-tooltip-arrow"
2021-10-21 11:00:25 +00:00
data-tooltip="Save" onclick="toolSave()">
<span class="icon is-small"><span class="material-icons" id="toolSaveIco">
2021-10-21 11:00:25 +00:00
save
</span></span>
</button>
{{end}}
</p>
{{end}}
{{if .File.Action}}
<p class="control">
2021-10-21 08:04:57 +00:00
<button class="button is-small has-tooltip-arrow"
data-tooltip="{{.File.Action}}"
onclick="toolApply()">
<span class="icon is-small"><span class="material-icons"id="toolApplyIco">
2021-10-21 11:00:25 +00:00
play_arrow
</span></span>
</button>
</p>
{{end}}
2021-10-21 08:04:57 +00:00
<p class="control">
2021-10-21 11:00:25 +00:00
<a class="button is-small has-tooltip-arrow" data-tooltip="Download"
2021-10-24 07:06:02 +00:00
href="{{.BaseUrl}}api/export?name={{.File.Name}}">
2021-10-21 11:00:25 +00:00
<span class="icon is-small"><span class="material-icons">
download
</span></span>
</a>
2021-10-21 08:04:57 +00:00
</p>
</div>
</div>
</div>
<script>
function SetTabstop(obj){
let value = obj.value;
switch (value) {
case "-1":
editor.session.setUseSoftTabs(false);
break;
case "2":
editor.session.setTabSize(2);
editor.session.setUseSoftTabs(true);
break;
case "4":
editor.session.setTabSize(4);
editor.session.setUseSoftTabs(true);
break;
default:
break;
}
}
function toggleWrap(){
let mode = editor.session.getUseWrapMode();
editor.session.setUseWrapMode(!mode)
let el = document.getElementById('toolWrap');
2021-10-21 11:00:25 +00:00
let icon =document.getElementById('toolWrapIcon');
if (mode){
el.classList.remove('is-success');
el.classList.add('is-danger');
2021-10-21 11:00:25 +00:00
icon.innerText = 'view_headline'
} else {
el.classList.remove('is-danger');
el.classList.add('is-success');
2021-10-21 11:00:25 +00:00
icon.innerText = 'wrap_text';
}
}
function toolFormat(){
beautify.beautify(editor.session);
}
function toolSetFontSize(obj){
let value = obj.value;
document.getElementById('editor').style.fontSize=value;
document.getElementById('result_editor').style.fontSize=value;
}
function toolFollow(){
if (ToolIsFollow){
2021-11-03 08:21:49 +00:00
ToolIsFollow = false;
editor.setReadOnly({{.File.RO}});
let el = document.getElementById('toolFollow');
2021-10-21 11:00:25 +00:00
let icon = document.getElementById('toolFollowIcon');
el.classList.remove('is-primary');
2021-10-21 11:00:25 +00:00
icon.classList.remove('icn-spinner');
icon.innerText='sync_disabled';
} else {
2021-11-03 08:21:49 +00:00
editor.setReadOnly(true);
let el = document.getElementById('toolFollow');
2021-10-21 11:00:25 +00:00
let icon = document.getElementById('toolFollowIcon');
el.classList.add('is-primary');
2021-10-21 11:00:25 +00:00
icon.innerText='sync';
icon.classList.add('icn-spinner');
editor.gotoLine(editor.session.getLength());
2021-11-03 08:21:49 +00:00
FileGet().then(()=>{
ToolIsFollow = true
})
}
}
async function toolRefresh(){
let el = document.getElementById('toolRefreshIco');
el.classList.toggle('icn-loading')
await FileGet()
el.classList.toggle('icn-loading')
}
async function toolSave(){
let el = document.getElementById('toolSaveIco');
let originText = el.innerText;
el.innerText='refreash';
el.classList.add("icn-loading")
await FileSave()
el.innerText=originText;
el.classList.remove("icn-loading")
}
async function toolApply(){
let el = document.getElementById('toolApplyIco');
let originText = el.innerText;
el.innerText='rotate_right';
el.classList.add("icn-loading")
if (window.ContentChanged){
await FileSave()
}
await FileApply()
el.innerText=originText;
el.classList.remove("icn-loading")
{{if not .ResultBellow}}ResultViewTog(){{end}}
}
</script>
{{end}}