configui/templates/components/toolbar.tmpl

{{define "components/toolbar"}}
<div class="level">
  <div class="level-left">
    <div class="field has-addons">
      <p class="control">
        <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>
      </p>
      <p class="control">
        <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
          </span></span>
        </button>
      </p>
      <p class="control">
        <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">
        <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"
          data-tooltip="Refresh" onclick="toolRefresh()">
          <span class="icon is-small"><span class="material-icons" id="toolRefreshIco">
            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"
              data-tooltip="Apply" onclick="toolSave()">
              <span class="icon is-small"><span class="material-icons" id="toolSaveIco">
                play_arrow
              </span></span>  
            </button>
            {{end}}
          {{else}}
            <button class="button is-small has-tooltip-arrow"
              data-tooltip="Save" onclick="toolSave()">
              <span class="icon is-small"><span class="material-icons" id="toolSaveIco">
                save
              </span></span>
            </button>
          {{end}}
        </p>
      {{end}}
      {{if .File.Action}}
      <p class="control">
        <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">
            play_arrow
          </span></span> 
        </button>
      </p>
      {{end}}

      <p class="control">
        <a class="button is-small has-tooltip-arrow" data-tooltip="Download"
          href="{{.BaseUrl}}api/export?name={{.File.Name}}">
          <span class="icon is-small"><span class="material-icons">
            download
          </span></span>
        </a>
      </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');
  let icon =document.getElementById('toolWrapIcon');
  if (mode){
    el.classList.remove('is-success');
    el.classList.add('is-danger');
    icon.innerText = 'view_headline'
  } else {
    el.classList.remove('is-danger');
    el.classList.add('is-success');
    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){
    ToolIsFollow = false
    let el = document.getElementById('toolFollow');
    let icon = document.getElementById('toolFollowIcon');
    el.classList.remove('is-primary');
    icon.classList.remove('icn-spinner');
    icon.innerText='sync_disabled';
  } else {
    ToolIsFollow = true
    let el = document.getElementById('toolFollow');
    let icon = document.getElementById('toolFollowIcon');
    el.classList.add('is-primary');
    icon.innerText='sync';
    icon.classList.add('icn-spinner');
    editor.gotoLine(editor.session.getLength());
  }
}

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}}