From 638ec426e5a0e77b84b4b693d3340cfc39d5b306 Mon Sep 17 00:00:00 2001 From: Adam Brown Date: Tue, 26 May 2015 10:41:06 -0400 Subject: [PATCH] add option to display as plain text --- Gruntfile.js | 4 +- client/app/app.scss | 1 + client/app/compare/compare.js | 4 ++ client/app/compare/compare.scss | 24 ++++++- .../app/compare/create/create.controller.js | 16 ++++- client/app/compare/create/create.jade | 8 ++- client/app/compare/show/show.controller.js | 34 ++++++++-- client/app/compare/show/show.jade | 36 ++++++++--- package.json | 62 +++++++++---------- .../api/comparison/comparison.controller.js | 20 ++++++ server/api/comparison/index.js | 2 + server/components/wdiff/index.js | 8 +-- 12 files changed, 161 insertions(+), 58 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 192d19b..197aaa2 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,6 +1,7 @@ // Generated on 2015-02-05 using generator-angular-fullstack 2.0.13 'use strict'; + module.exports = function (grunt) { var localConfig; try { @@ -9,6 +10,7 @@ module.exports = function (grunt) { localConfig = {}; } + // Load grunt tasks automatically, when needed require('jit-grunt')(grunt, { express: 'grunt-express-server', @@ -501,7 +503,7 @@ module.exports = function (grunt) { '<%= yeoman.client %>/app', '<%= yeoman.client %>/components' ], - compass: false + compass:false }, files: { '.tmp/app/app.css' : '<%= yeoman.client %>/app/app.scss' diff --git a/client/app/app.scss b/client/app/app.scss index 5425a93..84df511 100644 --- a/client/app/app.scss +++ b/client/app/app.scss @@ -2,6 +2,7 @@ $icon-font-path: "/bower_components/bootstrap-sass-official/vendor/assets/fonts/ $fa-font-path: "/bower_components/font-awesome/fonts"; @import 'bootstrap-sass-official/vendor/assets/stylesheets/bootstrap'; + @import 'font-awesome/scss/font-awesome'; /** diff --git a/client/app/compare/compare.js b/client/app/compare/compare.js index effcfd6..021b803 100644 --- a/client/app/compare/compare.js +++ b/client/app/compare/compare.js @@ -10,5 +10,9 @@ angular.module('markdownFormatWdiffApp') .when('/:id', { templateUrl: 'app/compare/show/show.html', controller: 'CompareShowCtrl' + }) + .when('/:id/:format', { + templateUrl: 'app/compare/show/show.html', + controller: 'CompareShowCtrl' }); }); diff --git a/client/app/compare/compare.scss b/client/app/compare/compare.scss index 9c0e561..76fecf3 100644 --- a/client/app/compare/compare.scss +++ b/client/app/compare/compare.scss @@ -1,7 +1,27 @@ -.wdiff-container .ins { +.wdiff ins { + background-color: #dbffdb; } -.wdiff-container .del { +.wdiff del { + background-color: #f8cbcb; +} + +.content-pre { + font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif; + margin-bottom: 10px; + padding: 5px; + width: auto; + white-space: pre-wrap; +} + +.content-well { + min-height: 20px; + padding: 19px; + margin-bottom: 20px; + //background-color: #f5f5f5; + border: 1px solid #e3e3e3; + border-radius: 4px; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } #docA, #docB { diff --git a/client/app/compare/create/create.controller.js b/client/app/compare/create/create.controller.js index 1b9a59f..73ba3cb 100644 --- a/client/app/compare/create/create.controller.js +++ b/client/app/compare/create/create.controller.js @@ -6,17 +6,27 @@ angular.module('markdownFormatWdiffApp') $scope.docB = ""; $scope.wdiff = ""; $scope.wdiffMarkdown = ""; - $scope.displayAsMarkdown = true; + $scope.isMarkdownFormat = true; $scope.compare = function() { $http.post('/api/compare', - { a: $scope.docA, b: $scope.docB }, + { a: _.escape($scope.docA), b: _.escape($scope.docB) }, {headers:{"Content-Type":"application/json"}}) .success(function (comparison) { - $location.path('/'+comparison._id) + $location.path('/'+comparison._id); + $location.hash($scope.isMarkdownFormat?'markdown':'plaintext'); }); }; + $scope.toggleMarkdownFormat = function() { + if ($scope.isMarkdownFormat) { + $scope.isMarkdownFormat = false; + } + else { + $scope.isMarkdownFormat = true; + } + } + }) diff --git a/client/app/compare/create/create.jade b/client/app/compare/create/create.jade index 9d612e8..eb74cba 100644 --- a/client/app/compare/create/create.jade +++ b/client/app/compare/create/create.jade @@ -7,9 +7,15 @@ nav(ng-include='"components/elements/header.html"', onload='title = "dubdiff"; ' form.row .col-md-2.col-sm-12.form-group - .controls.well + .controls.well.col-lg-12 a.btn.btn-block.btn-primary(type='button', ng-click='compare()') compare + .controls.well.btn-group.col-lg-12 + a.btn.btn-block.btn-primary(ng-class='{"active": isMarkdownFormat}', type='submit', ng-click='toggleMarkdownFormat()') + span.glyphicon(ng-class='{"glyphicon-ok": isMarkdownFormat}') + |   As Markdown + + .col-lg-5.col-sm-12.form-group label(for='docA') | Original diff --git a/client/app/compare/show/show.controller.js b/client/app/compare/show/show.controller.js index ee6f3d2..ad0d4a2 100644 --- a/client/app/compare/show/show.controller.js +++ b/client/app/compare/show/show.controller.js @@ -1,17 +1,26 @@ 'use strict'; -angular.module('markdownFormatWdiffApp') - .controller('CompareShowCtrl', function ($scope, $routeParams, $http) { - $scope.wdiff = {}; - $scope.before = {}; - $scope.after = {}; - $scope.isShowWdiff = true; +var MARKDOWN = "markdown"; +var PLAINTEXT = "plaintext"; +angular.module('markdownFormatWdiffApp') + .controller('CompareShowCtrl', function ($scope, $routeParams, $http, $location) { + $scope.wdiff = ''; + $scope.before = ''; + $scope.after = ''; + $scope.isShowWdiff = true; + $scope.isMarkdownFormat = true; + + + var paramFormat = $location.hash(); + if (paramFormat == "plain" || paramFormat == "plaintext") + $scope.isMarkdownFormat = false; // if routeParams specifies a user, restrict the query to that user var path = '/api/compare/wdiff/' + $routeParams.id; $http.get(path).success(function(comparison) { $scope.wdiff = comparison.wdiff; + $scope.before = comparison.a; $scope.after = comparison.b; }); @@ -32,4 +41,17 @@ angular.module('markdownFormatWdiffApp') $scope.isShowWdiff = true; } + $scope.toggleMarkdownFormat = function() { + if ($scope.isMarkdownFormat) { + $scope.isMarkdownFormat = false; + $location.hash('plaintext'); + $location.replace(); + } + else { + $scope.isMarkdownFormat = true; + $location.hash('markdown'); + $location.replace(); + } + } + }) diff --git a/client/app/compare/show/show.jade b/client/app/compare/show/show.jade index 4bfa2e5..857b6d0 100644 --- a/client/app/compare/show/show.jade +++ b/client/app/compare/show/show.jade @@ -5,7 +5,7 @@ nav(ng-include='"components/elements/header.html"', onload='title = "dubdiff"; .container .row .col-md-2.col-sm-12 - .controls.well.btn-group + .controls.well.btn-group.col-lg-12 a.btn.btn-block.btn-primary(ng-class='{"active": isShowBefore}', type='submit', ng-click='showBefore()') | Original a.btn.btn-block.btn-primary(ng-class='{"active": isShowAfter}', type='submit', ng-click='showAfter()') @@ -13,16 +13,34 @@ nav(ng-include='"components/elements/header.html"', onload='title = "dubdiff"; a.btn.btn-block.btn-primary(ng-class='{"active": isShowWdiff}', type='submit', ng-click='showWdiff()') | Difference - .col-md-10.col-sm-12.well(ng-show='isShowBefore') - div(btf-markdown='before') + .controls.well.btn-group.col-lg-12 + a.btn.btn-block.btn-primary(ng-class='{"active": isMarkdownFormat}', type='submit', ng-click='toggleMarkdownFormat()') + span.glyphicon(ng-class='{"glyphicon-ok": isMarkdownFormat}') + |   As Markdown - .col-md-10.col-sm-12.well(ng-show='isShowWdiff') - div(btf-markdown='wdiff') - .col-md-10.col-sm-12.well(ng-show='isShowAfter') - div(btf-markdown='after') - //pre - {{json(result)}} + div(ng-if='isMarkdownFormat') + + .col-md-10.col-sm-12.content-well(ng-show='isShowBefore') + div.before(btf-markdown='before') + + .col-md-10.col-sm-12.content-well(ng-show='isShowWdiff') + div.wdiff(btf-markdown='wdiff') + + .col-md-10.col-sm-12.content-well(ng-show='isShowAfter') + div.after(btf-markdown='after') + + + div(ng-if='!isMarkdownFormat') + + .col-md-10.col-sm-12.content-well(ng-show='isShowBefore') + .content-pre.before(ng-bind-html='before') + + .col-md-10.col-sm-12.content-well(ng-show='isShowWdiff') + .content-pre.wdiff(ng-bind-html='wdiff') + + .col-md-10.col-sm-12.content-well(ng-show='isShowAfter') + .content-pre.after(ng-bind-html='after') footer(ng-include='"components/elements/footer.html"') diff --git a/package.json b/package.json index 45b988a..c95ab71 100644 --- a/package.json +++ b/package.json @@ -25,9 +25,12 @@ "temp": "^0.8.1" }, "devDependencies": { + "connect-livereload": "~0.4.0", "grunt": "~0.4.4", + "grunt-angular-templates": "^0.5.4", + "grunt-asset-injector": "^0.1.0", "grunt-autoprefixer": "~0.7.2", - "grunt-wiredep": "~1.8.0", + "grunt-build-control": "DaftMonk/grunt-build-control", "grunt-concurrent": "~0.5.0", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-concat": "~0.4.0", @@ -35,50 +38,47 @@ "grunt-contrib-cssmin": "~0.9.0", "grunt-contrib-htmlmin": "~0.2.0", "grunt-contrib-imagemin": "~0.7.1", + "grunt-contrib-jade": "^0.11.0", "grunt-contrib-jshint": "~0.10.0", + "grunt-contrib-sass": "^0.9.2", "grunt-contrib-uglify": "~0.4.0", "grunt-contrib-watch": "~0.6.1", - "grunt-contrib-jade": "^0.11.0", + "grunt-dom-munger": "^3.4.0", + "grunt-env": "~0.4.1", + "grunt-express-server": "~0.4.17", "grunt-google-cdn": "~0.4.0", + "grunt-karma": "~0.8.2", + "grunt-mocha-test": "~0.10.2", "grunt-newer": "~0.7.0", "grunt-ng-annotate": "^0.2.3", + "grunt-node-inspector": "~0.1.5", + "grunt-nodemon": "~0.2.0", + "grunt-open": "~0.2.3", + "grunt-protractor-runner": "^1.1.0", "grunt-rev": "~0.1.0", "grunt-svgmin": "~0.4.0", "grunt-usemin": "~2.1.1", - "grunt-env": "~0.4.1", - "grunt-node-inspector": "~0.1.5", - "grunt-nodemon": "~0.2.0", - "grunt-angular-templates": "^0.5.4", - "grunt-dom-munger": "^3.4.0", - "grunt-protractor-runner": "^1.1.0", - "grunt-asset-injector": "^0.1.0", - "grunt-karma": "~0.8.2", - "grunt-build-control": "DaftMonk/grunt-build-control", - "grunt-mocha-test": "~0.10.2", - "grunt-contrib-sass": "^0.7.3", + "grunt-wiredep": "~1.8.0", "jit-grunt": "^0.5.0", - "time-grunt": "~0.3.1", - "grunt-express-server": "~0.4.17", - "grunt-open": "~0.2.3", - "open": "~0.0.4", "jshint-stylish": "~0.1.5", - "connect-livereload": "~0.4.0", - "karma-ng-scenario": "~0.1.0", - "karma-firefox-launcher": "~0.1.3", - "karma-script-launcher": "~0.1.0", - "karma-html2js-preprocessor": "~0.1.0", - "karma-ng-jade2js-preprocessor": "^0.1.2", - "karma-jasmine": "~0.1.5", - "karma-chrome-launcher": "~0.1.3", - "requirejs": "~2.1.11", - "karma-requirejs": "~0.2.1", - "karma-coffee-preprocessor": "~0.2.1", - "karma-jade-preprocessor": "0.0.11", - "karma-phantomjs-launcher": "~0.1.4", "karma": "~0.12.9", + "karma-chrome-launcher": "~0.1.3", + "karma-coffee-preprocessor": "~0.2.1", + "karma-firefox-launcher": "~0.1.3", + "karma-html2js-preprocessor": "~0.1.0", + "karma-jade-preprocessor": "0.0.11", + "karma-jasmine": "~0.1.5", "karma-ng-html2js-preprocessor": "~0.1.0", + "karma-ng-jade2js-preprocessor": "^0.1.2", + "karma-ng-scenario": "~0.1.0", + "karma-phantomjs-launcher": "~0.1.4", + "karma-requirejs": "~0.2.1", + "karma-script-launcher": "~0.1.0", + "open": "~0.0.4", + "requirejs": "~2.1.11", + "should": "~3.3.1", "supertest": "~0.11.0", - "should": "~3.3.1" + "time-grunt": "~0.3.1" }, "engines": { "node": ">=0.10.0" diff --git a/server/api/comparison/comparison.controller.js b/server/api/comparison/comparison.controller.js index c85e6fd..6f6f628 100644 --- a/server/api/comparison/comparison.controller.js +++ b/server/api/comparison/comparison.controller.js @@ -29,6 +29,26 @@ exports.showComparison = function showComparison(req, res) { }); } +//return the a or b doc for a comparison given an id, if it exsits +exports.showComparison = function showComparison(req, res) { + //generate a filename + var filename = fnComparison(req.params.id); + + //check if that file exists + fs.exists(filename, function (exists) { + //if the file does not exist, return a 404 + if (!exists) return res.send(404); + + //otherwise, read the file as JSON + jf.readFile(filename, function(err, comparison) { + if(err) { return handleError(res, err); } + + //and return + return res.json(comparison); + }); + }); +} + //return a markdown wdiff for the comparison given an id, if it exsits exports.wdiffMarkdownComparison = function wdiffMarkdownComparison(req, res) { //generate a filename diff --git a/server/api/comparison/index.js b/server/api/comparison/index.js index efaabc0..ab1809d 100644 --- a/server/api/comparison/index.js +++ b/server/api/comparison/index.js @@ -8,7 +8,9 @@ var router = express.Router(); //router.get('/', controller.index); router.get('/:id', controller.showComparison); +//router.get('/:id/:doc', controller.showComparisonDoc); router.get('/wdiff/:id', controller.wdiffMarkdownComparison); +//router.get('/wdiff/:id/nomarkdown', controller.wdiffNoMarkdownComparison); router.post('/', controller.create); diff --git a/server/components/wdiff/index.js b/server/components/wdiff/index.js index 4eaf921..fa7532f 100644 --- a/server/components/wdiff/index.js +++ b/server/components/wdiff/index.js @@ -43,11 +43,9 @@ module.exports = function(a, b, asMarkdown, callback) { if (err) return callback(err); - var cmd = "./bin/wdiff " + filea.path + " " +fileb.path; + var cmd = "wdiff " + filea.path + " " +fileb.path; exec(cmd, function(err, stdout) { -//console.log(cmd); -//console.log(err); -//console.log(stdout); + if (err && err.code!=1 && err.code!=0) { return callback(err); } @@ -56,7 +54,7 @@ module.exports = function(a, b, asMarkdown, callback) { wdiffSame = (err && err.code == 0) ? true:false; - var resData = {wdiff:stdout, same: wdiffSame}; + var resData = {wdiffNoMarkdown:stdout, same: wdiffSame}; if (asMarkdown) { //!!! this needs more sophisticated parsing