Add keyboard shortcuts

cidrblock · Nov 28, 2017 · 4b49576 · 4b49576
1 parent 85da8b4
commit 4b49576
Show file tree

Hide file tree

Showing 8 changed files with 143 additions and 94 deletions.
diff --git a/README.md b/README.md
@@ -26,6 +26,12 @@ The UI is broken into three sections:
 2) TEMPLATE, the jinja2 template to be rendered.
 3) RESULT, after clicking the render button, the result pane will be populated with the rendered template.
 
+### Keyboard shortcuts
+
+`cmd+r`: Render the template
+`cmd+s`: Save the data in browser local storage
+`cmd+b`: Begin new, clear the screen
+
 ### Custom filters
 
 TD4A can load custom filters from a directory specified from the command line:

diff --git a/bower.json b/bower.json
@@ -25,6 +25,7 @@
     "angular-ui-codemirror": "^0.3.0",
     "ng-split": "^0.2.0",
     "angular-material": "^1.1.5",
-    "angular-cookies": "^1.6.7"
+    "angular-cookies": "^1.6.7",
+    "angular-local-storage": "^0.7.1"
   }
 }
diff --git a/gulpfile.js b/gulpfile.js
@@ -12,7 +12,7 @@ var cssDest = 'td4a/static/css';
 gulp.task('default', function() {
 });
 
-gulp.task('codemirror', [], function() {
+gulp.task('codemirror', function(done) {
   gulp.src("bower_components/codemirror/lib/codemirror.js")
       .pipe(gulp.dest(jsDest));
   gulp.src("bower_components/codemirror/mode/jinja2/jinja2.js")
@@ -37,9 +37,10 @@ gulp.task('codemirror', [], function() {
       .pipe(gulp.dest(cssDest));
   gulp.src("bower_components/codemirror/theme/material.css")
       .pipe(gulp.dest(cssDest));
+  done();
 });
 
-gulp.task('angular', [], function() {
+gulp.task('angular', function(done) {
   gulp.src("bower_components/angular/angular.js")
       .pipe(gulp.dest(jsDest));
   gulp.src("bower_components/angular-animate/angular-animate.js")
@@ -50,32 +51,41 @@ gulp.task('angular', [], function() {
       .pipe(gulp.dest(jsDest));
   gulp.src("bower_components/angular-route/angular-route.js")
       .pipe(gulp.dest(jsDest));
+  gulp.src("bower_components/angular-cookies/angular-cookies.js")
+      .pipe(gulp.dest(jsDest));
+  gulp.src("bower_components/angular-local-storage/dist/angular-local-storage.js")
+      .pipe(gulp.dest(jsDest));
+  done();
 });
 
-gulp.task('angular-material', [], function() {
+gulp.task('angular-material', function(done) {
   gulp.src("bower_components/angular-material/angular-material.js")
       .pipe(gulp.dest(jsDest));
   gulp.src("bower_components/angular-material/angular-material.css")
       .pipe(gulp.dest(cssDest));
+  done();
 });
 
-gulp.task('split', [], function() {
+gulp.task('split', function(done) {
   gulp.src("bower_components/Split.js/split.js")
       .pipe(gulp.dest(jsDest));
+  done();
 });
 
-gulp.task('ui-codemirror', [], function() {
+gulp.task('ui-codemirror', function(done) {
   gulp.src("bower_components/angular-ui-codemirror/ui-codemirror.js")
       .pipe(gulp.dest(jsDest));
+  done();
 });
 
-gulp.task('ng-split', [], function() {
+gulp.task('ng-split', function(done) {
   gulp.src("bower_components/ng-split/dist/ng-split.js")
       .pipe(gulp.dest(jsDest));
+  done();
 });
 
-gulp.task('scripts', ['clean'], function() {
-  return gulp.src([
+gulp.task('scripts', function(done) {
+  gulp.src([
                     'td4a/static/jsTemp/angular.js',
                     'td4a/static/jsTemp/codemirror.js',
                     'td4a/static/jsTemp/*.js'
@@ -86,13 +96,15 @@ gulp.task('scripts', ['clean'], function() {
     .pipe(uglify())
     .pipe(gulp.dest('td4a/static/js'))
     .pipe(notify({ message: 'Scripts task complete' }));
+  done();
 });
 
-gulp.task('clean', function () {
-    return gulp.src(['td4a/static/jsTemp',
+gulp.task('clean', function (done) {
+  gulp.src(['td4a/static/jsTemp',
                      'dist'
                     ], {read: false})
         .pipe(clean({force: true}));
+  done();
 });
 
-gulp.task('default', ['codemirror', 'angular', 'angular-material', 'split', 'ng-split', 'ui-codemirror', 'scripts']);
+gulp.task('default', gulp.series('codemirror', 'angular', 'angular-material', 'split', 'ng-split', 'ui-codemirror', 'scripts'))
diff --git a/package.json b/package.json
@@ -3,12 +3,11 @@
   "version": "1.0.0",
   "description": "",
   "main": "gulpfile.js",
-  "dependencies": {
-  },
+  "dependencies": {},
   "devDependencies": {
-    "gulp-clean": "^0.3.2",
     "del": "^3.0.0",
-    "gulp": "^3.9.1",
+    "gulp": "github:gulpjs/gulp#4.0",
+    "gulp-clean": "^0.3.2",
     "gulp-concat": "^2.6.1",
     "gulp-jshint": "^2.0.4",
     "gulp-notify": "^3.0.0",

diff --git a/setup.py b/setup.py
@@ -1,7 +1,7 @@
 from setuptools import setup
 
 setup(name='td4a',
-      version='0.08',
+      version='0.1',
       description='A browser based jinja template renderer',
       url='http://github.com/cidrblock/td4a',
       author='Bradley A. Thornton',

diff --git a/td4a/__main__.py b/td4a/__main__.py
@@ -132,21 +132,24 @@ def render():
     """ render path
     """
     payload = request.json
-    error, data = load_data(payload['data'])
-    if error:
-        response = jsonify(error)
-        response.status_code = 400
-        return response
-    error, template = check_template(payload['template'])
-    if error:
-        response = jsonify(error)
-        response.status_code = 400
-        return response
-    error, result = render_template(data, template)
-    if error:
-        response = jsonify(error)
-        response.status_code = 400
-        return response
+    if payload['data'] and payload['template']:
+        error, data = load_data(payload['data'])
+        if error:
+            response = jsonify(error)
+            response.status_code = 400
+            return response
+        error, template = check_template(payload['template'])
+        if error:
+            response = jsonify(error)
+            response.status_code = 400
+            return response
+        error, result = render_template(data, template)
+        if error:
+            response = jsonify(error)
+            response.status_code = 400
+            return response
+    else:
+        result = ""
     return jsonify({"result": result})
 
 def main():

diff --git a/td4a/static/js/app.js b/td4a/static/js/app.js
@@ -1,14 +1,44 @@
-var app = angular.module('mainController', ['ngRoute', 'ngMaterial', 'ngMessages', 'ui.codemirror', 'ng-split', 'ngCookies']);
+var app = angular.module('mainController', ['ngRoute', 'ngMaterial', 'ngMessages', 'ui.codemirror', 'ng-split', 'ngCookies', 'LocalStorageModule'])
 
-app.config(function($routeProvider,$locationProvider) {
-    $locationProvider.html5Mode(true);
-})
+    .config(function($routeProvider,$locationProvider) {
+        $locationProvider.html5Mode(true);
+    })
+    .config(function (localStorageServiceProvider) {
+        localStorageServiceProvider
+          .setPrefix('td4a')
+    });
 
-app.controller('main', function($scope, $http, $window, $mdToast, $routeParams, $location, $cookies) {
+app.controller('main', function($scope, $http, $window, $mdToast, $timeout, $routeParams, $location, $cookies, localStorageService) {
   $scope.error = {}
   $scope.template = { data: '', jinja: '' }
   $scope.renderButton = false;
   $scope.showDemo = $cookies.firstVisit || "";
+  extraKeys= {
+    Tab: function(cm) {
+      var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
+      cm.replaceSelection(spaces);
+    },
+    "Cmd-S": function(cm) {
+      localStorageService.set('data', $scope.template)
+      var toast = $mdToast.simple()
+        .textContent("Saved")
+        .action('close')
+        .highlightAction(true)
+        .highlightClass('md-primary')
+        .position('top right')
+        .hideDelay('2000');
+      $mdToast.show(toast)
+    },
+    "Cmd-R": function(cm) {
+      $scope.render()
+    },
+    "Cmd-B": function(cm) {
+      $scope.template = { data: '', jinja: '', result: '' };
+      $timeout(function() {cm.refresh();});
+    },
+
+  }
+
   $scope.codemirror = {
     dataOptions:
      {
@@ -18,19 +48,15 @@ app.controller('main', function($scope, $http, $window, $mdToast, $routeParams,
         mode: 'yaml',
         indentUnit: 2,
         tabSize: 2,
-        extraKeys: {
-          Tab: function(cm) {
-            var spaces = Array(cm.getOption("indentUnit") + 1).join(" ");
-            cm.replaceSelection(spaces);
-          }
-        }
+        extraKeys: extraKeys
       },
     templateOptions:
      {
         lineNumbers: true,
         theme:'material',
         lineWrapping : true,
-        mode: 'jinja2'
+        mode: 'jinja2',
+        extraKeys: extraKeys
       },
     resultOptions:
      {
@@ -39,7 +65,8 @@ app.controller('main', function($scope, $http, $window, $mdToast, $routeParams,
         lineWrapping : true,
         mode: 'yaml',
       }
-  }
+  };
+
   $scope.demoShown = $cookies.get('demoShown') || false;
   if (!($scope.demoShown)) {
     $cookies.put('demoShown',true);
@@ -61,54 +88,55 @@ app.controller('main', function($scope, $http, $window, $mdToast, $routeParams,
               $scope.template.jinja = response.data
             }
       })
+  } else {
+    $scope.template = localStorageService.get('data')
+  };
+
+  $scope.render = function() {
+    $scope.renderButton = true;
+    if ('line_number' in $scope.error) {
+      $scope.error.codeMirrorEditor.removeLineClass($scope.error.line_number, 'wrap', 'error');
     }
+    $http({
+          method  : 'POST',
+          url     : '/render',
+          data    : { "data": $scope.template.data, "template": $scope.template.jinja },
+          headers : { 'Content-Type': 'application/json' }
+         })
+      .then(function(response) {
+          if (response.status == 200) {
+              $scope.template.result = response.data.result;
+              $scope.renderButton = false;
+            }
+          })
+      .catch(function(error) {
+        if ("Error" in error.data) {
+          var errorMessage = `${error.data.Error.title}, ${error.data.Error.details}, line number: ${error.data.Error.line_number}\n`;
+          var toast = $mdToast.simple()
+            .textContent(errorMessage)
+            .action('close')
+            .highlightAction(true)
+            .highlightClass('md-warn')
+            .position('top right')
+            .hideDelay('60000');
+          $mdToast.show(toast)
 
-$scope.render = function() {
-  $scope.renderButton = true;
-  if ('line_number' in $scope.error) {
-    $scope.error.codeMirrorEditor.removeLineClass($scope.error.line_number, 'wrap', 'error');
-  }
-  $http({
-        method  : 'POST',
-        url     : '/render',
-        data    : { "data": $scope.template.data, "template": $scope.template.jinja },
-        headers : { 'Content-Type': 'application/json' }
-       })
-    .then(function(response) {
-        if (response.status == 200) {
-            $scope.template.result = response.data.result;
-            $scope.renderButton = false;
+          var actualLineNumber = error.data.Error.line_number -1 ;
+          if (error.data.Error.in == "template") {
+            var myEditor = angular.element(document.getElementById('templateEditor'))
+          } else if (error.data.Error.in == "data") {
+            var myEditor = angular.element(document.getElementById('dataEditor'))
           }
-        })
-    .catch(function(error) {
-      if ("Error" in error.data) {
-        var errorMessage = `${error.data.Error.title}, ${error.data.Error.details}, line number: ${error.data.Error.line_number}\n`;
-        var toast = $mdToast.simple()
-          .textContent(errorMessage)
-          .action('close')
-          .highlightAction(true)
-          .highlightClass('md-warn')
-          .position('top right')
-          .hideDelay('60000');
-        $mdToast.show(toast)
-
-        var actualLineNumber = error.data.Error.line_number -1 ;
-        if (error.data.Error.in == "template") {
-          var myEditor = angular.element(document.getElementById('templateEditor'))
-        } else if (error.data.Error.in == "data") {
-          var myEditor = angular.element(document.getElementById('dataEditor'))
-        }
-         var codeMirrorEditor = myEditor[0].childNodes[0].CodeMirror
-         $scope.error.codeMirrorEditor = codeMirrorEditor
-         $scope.error.line_number = actualLineNumber
-         $scope.error.codeMirrorEditor.addLineClass($scope.error.line_number, 'wrap', 'error');
-         codeMirrorEditor.scrollIntoView({line: actualLineNumber});
-         $scope.renderButton = false;
-      } else {
-        console.log(error.data)
-        $scope.renderButton = false;
-
-      }
-    });
-  }
-});
+           var codeMirrorEditor = myEditor[0].childNodes[0].CodeMirror
+           $scope.error.codeMirrorEditor = codeMirrorEditor
+           $scope.error.line_number = actualLineNumber
+           $scope.error.codeMirrorEditor.addLineClass($scope.error.line_number, 'wrap', 'error');
+           codeMirrorEditor.scrollIntoView({line: actualLineNumber});
+           $scope.renderButton = false;
+        } else {
+          console.log(error.data)
+          $scope.renderButton = false;
+        } //else
+      }) //catch
+    } //render
+}); //controller
diff --git a/td4a/static/js/main.min.js b/td4a/static/js/main.min.js