diff options
Diffstat (limited to 'public/js/lib')
| -rw-r--r-- | public/js/lib/editor/index.js | 54 | ||||
| -rw-r--r-- | public/js/lib/editor/statusbar.html | 41 | 
2 files changed, 61 insertions, 34 deletions
diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js index c807a17f..8cab486c 100644 --- a/public/js/lib/editor/index.js +++ b/public/js/lib/editor/index.js @@ -1,5 +1,6 @@  import * as utils from './utils'  import config from './config' +import statusBarTemplate from './statusbar.html'  /* config section */  const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault @@ -132,40 +133,27 @@ export default class Editor {      })    } -  getStatusBarTemplate () { -    return new Promise((resolve, reject) => { -      $.get(window.serverurl + '/views/statusbar.html').done(template => { -        this.statusBarTemplate = template -        resolve() -      }).fail(reject) -    }) -  } -    addStatusBar () { -    if (!this.statusBarTemplate) { -      this.getStatusBarTemplate.then(this.addStatusBar) -    } else { -      this.statusBar = $(this.statusBarTemplate) -      this.statusCursor = this.statusBar.find('.status-cursor > .status-line-column') -      this.statusSelection = this.statusBar.find('.status-cursor > .status-selection') -      this.statusFile = this.statusBar.find('.status-file') -      this.statusIndicators = this.statusBar.find('.status-indicators') -      this.statusIndent = this.statusBar.find('.status-indent') -      this.statusKeymap = this.statusBar.find('.status-keymap') -      this.statusLength = this.statusBar.find('.status-length') -      this.statusTheme = this.statusBar.find('.status-theme') -      this.statusSpellcheck = this.statusBar.find('.status-spellcheck') -      this.statusPreferences = this.statusBar.find('.status-preferences') -      this.statusPanel = this.editor.addPanel(this.statusBar[0], { -        position: 'bottom' -      }) +    this.statusBar = $(statusBarTemplate) +    this.statusCursor = this.statusBar.find('.status-cursor > .status-line-column') +    this.statusSelection = this.statusBar.find('.status-cursor > .status-selection') +    this.statusFile = this.statusBar.find('.status-file') +    this.statusIndicators = this.statusBar.find('.status-indicators') +    this.statusIndent = this.statusBar.find('.status-indent') +    this.statusKeymap = this.statusBar.find('.status-keymap') +    this.statusLength = this.statusBar.find('.status-length') +    this.statusTheme = this.statusBar.find('.status-theme') +    this.statusSpellcheck = this.statusBar.find('.status-spellcheck') +    this.statusPreferences = this.statusBar.find('.status-preferences') +    this.statusPanel = this.editor.addPanel(this.statusBar[0], { +      position: 'bottom' +    }) -      this.setIndent() -      this.setKeymap() -      this.setTheme() -      this.setSpellcheck() -      this.setPreferences() -    } +    this.setIndent() +    this.setKeymap() +    this.setTheme() +    this.setSpellcheck() +    this.setPreferences()    }    updateStatusBar () { @@ -508,8 +496,6 @@ export default class Editor {        placeholder: "← Start by entering a title here\n===\nVisit /features if you don't know what to do.\nHappy hacking :)"      }) -    this.getStatusBarTemplate() -      return this.editor    } diff --git a/public/js/lib/editor/statusbar.html b/public/js/lib/editor/statusbar.html new file mode 100644 index 00000000..24cbf6c2 --- /dev/null +++ b/public/js/lib/editor/statusbar.html @@ -0,0 +1,41 @@ +<div class="status-bar"> +    <div class="status-info"> +        <div class="status-cursor"> +          <span class="status-line-column"></span> +          <span class="status-selection"></span> +        </div> +        <div class="status-file"></div> +    </div> +    <div class="status-indicators"> +        <div class="status-length"></div> +        <div class="status-preferences dropup toggle-dropdown pull-right"> +            <a id="preferencesLabel" class="ui-preferences-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Click to change preferences"> +                <i class="fa fa-wrench fa-fw"></i> +            </a> +            <ul class="dropdown-menu" aria-labelledby="preferencesLabel"> +                <li class="ui-preferences-override-browser-keymap"><a><label>Allow override browser keymap  <input type="checkbox"></label></a></li> +            </ul> +        </div> +        <div class="status-keymap dropup pull-right"> +            <a id="keymapLabel" class="ui-keymap-label text-uppercase" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" title="Click to change keymap"> +            Sublime +            </a> +            <ul class="dropdown-menu" aria-labelledby="keymapLabel"> +                <li class="ui-keymap-sublime"><a>Sublime</a></li> +                <li class="ui-keymap-emacs"><a>Emacs</a></li> +                <li class="ui-keymap-vim"><a>Vim</a></li> +            </ul> +        </div> +        <div class="status-indent"> +            <div class="indent-type" title="Click to switch indentation type">Spaces:</div> +            <div class="indent-width-label" title="Click to change indentation size">4</div> +            <input class="indent-width-input hidden" type="number" min="1" max="10" maxlength="2" size="2"> +        </div> +        <div class="status-theme"> +            <a class="ui-theme-toggle" title="Toggle editor theme"><i class="fa fa-sun-o fa-fw"></i></a> +        </div> +        <div class="status-spellcheck"> +            <a class="ui-spellcheck-toggle" title="Toggle spellcheck"><i class="fa fa-check fa-fw"></i></a> +        </div> +    </div> +</div>  | 
