go-tour: store file contents in local storage
Added reset button and moved the syntax checkbox to the top of the editor.
Fixes #179
LGTM=adg
R=adg
CC=golang-codereviews
https://golang.org/cl/135040043
diff --git a/static/css/app.css b/static/css/app.css
index db4d078..c63cc6c 100755
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -239,6 +239,9 @@
#explorer .menu-button.active {
cursor: default;
}
+#explorer .syntax-checkbox {
+ float: right;
+}
/* CodeMirror */
#file-editor {
diff --git a/static/js/controllers.js b/static/js/controllers.js
index c58e7b3..2156ae6 100755
--- a/static/js/controllers.js
+++ b/static/js/controllers.js
@@ -10,12 +10,21 @@
angular.module('tour.controllers', []).
// Navigation controller
-controller('EditorCtrl', ['$scope', '$routeParams', '$location', 'toc', 'i18n', 'run', 'fmt', 'editor', 'analytics',
- function($scope, $routeParams, $location, toc, i18n, run, fmt, editor, analytics) {
+controller('EditorCtrl', ['$scope', '$routeParams', '$location', 'toc', 'i18n', 'run', 'fmt', 'editor', 'analytics', 'storage',
+ function($scope, $routeParams, $location, toc, i18n, run, fmt, editor, analytics, storage) {
var lessons = [];
toc.lessons.then(function(v) {
lessons = v;
$scope.gotoPage($scope.curPage);
+
+ // Store changes on the current file to local storage.
+ $scope.$watch(function() {
+ var f = file();
+ return f && f.Content;
+ }, function(val) {
+ var key = $scope.lessonId + '.' + ($scope.curPage - 1) + '.' + $scope.curFile;
+ storage.set(key, val);
+ });
});
$scope.toc = toc;
@@ -85,5 +94,9 @@
log('stderr', error);
});
};
+
+ $scope.reset = function() {
+ file().Content = file().OrigContent;
+ };
}
-]);
\ No newline at end of file
+]);
diff --git a/static/js/services.js b/static/js/services.js
index 3e81a7c..fa2e55a 100755
--- a/static/js/services.js
+++ b/static/js/services.js
@@ -114,8 +114,8 @@
]).
// Table of contents management and navigation
-factory('toc', ['$http', '$q', '$log', 'tableOfContents',
- function($http, $q, $log, tableOfContents) {
+factory('toc', ['$http', '$q', '$log', 'tableOfContents', 'storage',
+ function($http, $q, $log, tableOfContents, storage) {
var modules = tableOfContents;
var lessons = {};
@@ -155,6 +155,18 @@
var lesson = lessons[lessonName];
lesson.module = module;
module.lesson[lessonName] = lesson;
+
+ // replace file contents with locally stored copies.
+ for (var p = 0; p < lesson.Pages.length; p++) {
+ var page = lesson.Pages[p];
+ for (var f = 0; f < page.Files.length; f++) {
+ page.Files[f].OrigContent = page.Files[f].Content;
+ var val = storage.get(lessonName + '.' + p + '.' + f);
+ if (val !== null) {
+ page.Files[f].Content = val;
+ }
+ }
+ }
}
}
moduleQ.resolve(modules);
diff --git a/static/partials/editor.html b/static/partials/editor.html
index 20f5c11..08a5a1f 100644
--- a/static/partials/editor.html
+++ b/static/partials/editor.html
@@ -16,6 +16,7 @@
<div id="left-side" class="relative-content">
<div id="explorer" ng-class="{hidden: toc.lessons[lessonId].Pages[curPage-1].Files.length==0}">
<a class="menu-button" ng-repeat="f in toc.lessons[lessonId].Pages[curPage-1].Files" ng-click="openFile($index)" ng-class="{active: $index==curFile}">{{f.Name}}</a>
+ <a syntax-checkbox ng-class="{active: editor.syntax}" class="menu-button syntax-checkbox">Syntax</a>
</div>
<div class="relative-content" ng-class="{hidden: toc.lessons[lessonId].Pages[curPage-1].Files.length==0}">
@@ -36,7 +37,7 @@
<div id="file-menu">
<a class="menu-button" id="run" ng-click="run()">Run</a>
<a class="menu-button" id="format" ng-click="format()">Format</a>
- <a syntax-checkbox ng-class="{active: editor.syntax}" class="menu-button syntax-checkbox">Syntax</a>
+ <a class="menu-button" id="reset" ng-click="reset()">Reset</a>
</div>
<div class="output" ng-repeat="f in toc.lessons[lessonId].Pages[curPage-1].Files" ng-class="{active: $index==curFile}" ng-bind-html-unsafe="f.Output">
