Load statusbar template by string-loader

This commit is contained in:
Yukai Huang 2017-04-09 20:05:48 +08:00
parent 5343a61ae9
commit db06a51299
5 changed files with 29 additions and 35 deletions

View file

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

View file

@ -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&nbsp;&nbsp;<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>