Skip to content

Commit

Permalink
Merge pull request #129 from Kibibit/code-editor-settings
Browse files Browse the repository at this point in the history 
Code editor settings
  • Loading branch information
@thatkookooguy
thatkookooguy committed May 19, 2016
2 parents d148c76 + aae5fff commit 1048c46
Show file tree
Hide file tree
Showing 10 changed files with 497 additions and 86 deletions.
14 changes: 13 additions & 1 deletion public/app/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,4 +54,16 @@ angular.module('kibibitCodeEditor',
return function(input) {
return marked(input || '');
};
}]);
}])
.constant('CODE_EDITOR', {
'MODE_LIST': ace.require('ace/ext/modelist'),
'THEME_LIST': ace.require('ace/ext/themelist')
})
.constant('TYPE_ERROR_MSGS', function(varName, typeExpected, typeRecieved) {
return [
varName,
' should be a ',
typeExpected,
' but was given a ',
typeRecieved].join('');
});
32 changes: 24 additions & 8 deletions public/app/components/codeEditor/codeEditor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,30 +27,46 @@ angular.module('kibibitCodeEditor')
SettingsService) {

var vm = this;
var editor;
var editorSettings = SettingsService.settings.editorSettings;

var init = function(settings) {
editor.setOptions({
'wrap': settings.lineWrap,
'mode': 'ace/mode/' + settings.syntaxMode,
'theme': 'ace/theme/' + settings.theme,
'tabSize': settings.tabWidth,
'fontSize': settings.fontSize,
'showGutter': settings.isGutter,
'useSoftTabs': settings.isSoftTabs,
'showPrintMargin': settings.ruler
});
};

// initialize the editor session
vm.aceLoaded = function(_editor) {
vm.aceSession = _editor.getSession();
vm.undoManager = _editor.getSession().getUndoManager();
editor = _editor;
vm.aceSession = editor.getSession();
vm.undoManager = editor.getSession().getUndoManager();
SettingsService.settings.currentUndoManager = vm.undoManager;
SettingsService.settings.currentEditor = _editor;
SettingsService.settings.currentEditor = editor;
init(editorSettings);
// save cursor position
_editor.on('changeSelection', function() {
editor.on('changeSelection', function() {
$timeout(function() {
var cursor = _editor.selection.getCursor();
var cursor = editor.selection.getCursor();
cursor.row++;
SettingsService.settings.cursor = cursor;
});
});
};

// save the content of the editor on-change
vm.aceChanged = function(_editor) {
vm.aceDocumentValue = vm.aceSession.getDocument().getValue();
};

vm.editorOptions = {
mode: 'javascript',
theme: 'monokai',
vm.attachedEditorFunctions = {
onLoad: vm.aceLoaded,
onChange: vm.aceChanged
};
Expand Down
2 changes: 1 addition & 1 deletion public/app/components/codeEditor/codeEditorTemplate.html
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div class="editor"
ui-ace="codeEditorCtrl.editorOptions"
ui-ace="codeEditorCtrl.attachedEditorFunctions"
ng-model="codeEditorCtrl.code"></div>
15 changes: 15 additions & 0 deletions public/app/components/menuBar/menuBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,4 +72,19 @@ angular.module('kibibitCodeEditor')
vm.toggleFullscreen = function() {
vm.settings.isFullscreen = !vm.settings.isFullscreen;
};

vm.toggleLineWrap = function() {
vm.settings.editorSettings.lineWrap = !vm.settings.editorSettings.lineWrap;
};

vm.toggleSoftTabs = function() {
var editorSettings = vm.settings.editorSettings;
editorSettings.isSoftTabs = !editorSettings.isSoftTabs;
};

vm.toggleGutter = function() {
var editorSettings = vm.settings.editorSettings;
editorSettings.isGutter = !editorSettings.isGutter;
};

});
97 changes: 84 additions & 13 deletions public/app/components/menuBar/menuBarTemplate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,23 +125,94 @@ <h2 class="md-toolbar-tools">{{main.projectFolderPath}}</h2>
View
</button>
<md-menu-content>
<md-menu-item type="checkbox" ng-model="menuBarCtrl.settings.printLayout">Print layout</md-menu-item>
<md-menu-item class="md-indent">
<md-menu>
<md-button ng-click="$mdOpenMenu()">Mode</md-button>
<md-menu-content width="3">
<md-menu-item type="radio" ng-model="menuBarCtrl.settings.presentationMode" value="'presentation'">Presentation</md-menu-item>
<md-menu-item type="radio" ng-model="menuBarCtrl.settings.presentationMode" value="'edit'">Edit</md-menu-item>
<md-menu-item type="radio" ng-model="menuBarCtrl.settings.presentationMode" value="'modifiable'">Modifiable</md-menu-item>
</md-menu-content>
</md-menu>
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.lineWrap ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.toggleLineWrap()">Line Wrap</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.isGutter ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.toggleGutter()">Show Gutter</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">blur_linear</md-icon>
<md-menu>
<md-button ng-click="$mdOpenMenu()">Ruler</md-button>
<md-menu-content width="3">
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.ruler == 0 ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.settings.editorSettings.ruler = 0">None</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.ruler == 80 ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.settings.editorSettings.ruler = 80">80px</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.ruler == 100 ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.settings.editorSettings.ruler = 100">100px</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.ruler == 120 ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.settings.editorSettings.ruler = 120">120px</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">format_size</md-icon>
<md-menu>
<md-button ng-click="$mdOpenMenu()">Font Size</md-button>
<md-menu-content width="3">
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.fontSize == 12 ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.settings.editorSettings.fontSize = 12">12px</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.fontSize == 14 ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.settings.editorSettings.fontSize = 14">14px</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.fontSize == 16 ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.settings.editorSettings.fontSize = 16">16px</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.fontSize == 18 ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.settings.editorSettings.fontSize = 18">18px</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.fontSize == 20 ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.settings.editorSettings.fontSize = 20">20px</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item type="checkbox" ng-model="menuBarCtrl.settings.showRuler">Show ruler</md-menu-item>
<md-menu-item type="checkbox" ng-model="menuBarCtrl.settings.showEquationToolbar">Show equation toolbar</md-menu-item>
<md-menu-item type="checkbox" ng-model="menuBarCtrl.settings.showSpellingSuggestions">Show spelling suggestions</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">format_indent_increase</md-icon>
<md-menu>
<md-button ng-click="$mdOpenMenu()">Indentation</md-button>
<md-menu-content width="3">
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.isSoftTabs ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.toggleSoftTabs()">Indent Using Spaces</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.tabWidth == 2 ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.settings.editorSettings.tabWidth = 2">Tab Width: 2</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.tabWidth == 4 ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.settings.editorSettings.tabWidth = 4">Tab Width: 4</md-button>
</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ menuBarCtrl.settings.editorSettings.tabWidth == 8 ? 'check' : '' }}</md-icon>
<md-button ng-click="menuBarCtrl.settings.editorSettings.tabWidth = 8">Tab Width: 8</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item type="checkbox" ng-model="menuBarCtrl.settings.compactControls">Compact controls</md-menu-item>
<md-menu-item class="md-indent">
<md-icon class="material-icons">{{ main.settings.isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</md-icon>
<md-button ng-click="menuBarCtrl.toggleFullscreen()">
Expand Down
Loading

0 comments on commit 1048c46

Please sign in to comment.