Update diff view - Add/Remove over the same text. #29

- Change color styles.
- Add the status 'add' to transform as text.
- Refactor text introducing the concept of "section"
- Change jade template to ripple template.
- Add slide to left on toggle side view.

lib/bill-diff/BillSection.js

@@ -26,6 +26,8 @@ function BillTransformer() {
 function TextSection(current, diff) {
   this.current = current || '';
   this.diff = diff || { changes: [] };
+  this.sideChanges = [];
+  this.mainChanges = [];
 }
 
 /**
@@ -64,13 +66,15 @@ BillTransformer.prototype.calculateDiff = function (currentSection, previousSect
   for (var i=0; i<maxLength; i++) {
     var old = previousSection[i];
     var current = currentSection[i];
-    var diff = jsdiff.diffLines(old.current, current.current);
+    var diff = jsdiff.diffWordsWithSpace(old.current, current.current);
     var changes = diff.map(function (change) {
       var currentType = "";
 
       //TODO: should handle add  and change?
       if (change.removed) {
         currentType = 'remove';
+      } else if (change.added) {
+        currentType = 'add'
       } else {
         currentType = 'unchange';
       }
@@ -79,7 +83,9 @@ BillTransformer.prototype.calculateDiff = function (currentSection, previousSect
         , text: change.value
       }
     });
-    currentSection[i].diff = { changes: changes}
+    current.diff = { changes: changes};
+    current.sideChanges = changes.filter(function (change) { return change.type !== 'add' });
+    current.mainChanges = changes.filter(function (change) { return change.type !== 'remove' });
   }
   return currentSection;
 };

lib/bill-diff/component.json

@@ -5,17 +5,20 @@
     "visionmedia/jade": "1.3.1",
     "component/dom": "1.0.5",
     "visionmedia/superagent" : "0.18.0",
+    "visionmedia/move.js": "0.4.0",
     "vmariano/jsdiff": "*"
   },
   "local": [
       "view"
-    , "side-view"
+    , "text-section"
   ],
   "scripts": [
     "view.js",
     "BillSection.js"
   ],
   "styles": ["styles.styl"],
-  "templates": [ "template.jade" ],
+  "templates": [
+      "template.jade"
+  ],
   "main": "view.js"
 }

lib/bill-diff/styles.styl

@@ -12,40 +12,9 @@
     -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
     -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
     box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
-    width: 700px
+    width: 500px
     margin: 0 auto;
 
-    &.collapse
-      margin: 0;
-      width: 500px
-      .side-view
-        left: 460px;
-
-    //FIXME: unify with side view.
-    .side-view .side-container .text-container .text.collapse
-      width: 500px
-      padding:10px
-      opacity: 1
-
-    p
-      position: relative
-      font-size: 16px;
-
-      &.low-point
-        opacity: 0.2
-
-    .add
-      background: none repeat scroll 0 0 #5cb85c;
-      border-radius: 4px;
-      color: #fff;
-      padding: 2px 6px;
-
-    .remove
-      background: none repeat scroll 0 0 #d9534f;
-      border-radius: 4px;
-      color: #fff;
-      padding: 2px 6px;
-
 #references:after, #references:before
     content: ' ';
     display: table;

lib/bill-diff/view.js

@@ -1,15 +1,17 @@
 var View = require('view');
 var template = require('./template');
 var dom = require('dom');
-var SideView = require('side-view');
 var BillTransformer = require('./BillSection');
+var TextSection = require('text-section');
+var move = require('move');
 
 function DiffView() {
   if (!this instanceof DiffView) {
     return new DiffView();
   }
 
   View.call(this, template);
+  this.sections = [];
 }
 
 module.exports = DiffView;
@@ -37,15 +39,26 @@ DiffView.prototype.changeBillContent = function (currentStep, previousStep) {
   this.showBillText(currentParagraph);
 };
 
-
-DiffView.prototype.collapseLeft = function () {
-  dom('#bill-diff .text').addClass('collapse');
+/**
+ * Move the main text to the left.
+ */
+DiffView.prototype.collapseLeftText = function () {
+  move('#bill-diff .text')
+      .to(-250, 0)
+      .duration('1.0s')
+      .end();
   dom('#bill-diff .text p').addClass('low-point');
 };
 
-DiffView.prototype.center = function () {
+/**
+ * Center the main text in the middle of the screen
+ */
+DiffView.prototype.centerText = function () {
+  move('#bill-diff .text')
+      .to(0, 0)
+      .duration('1.0s')
+      .end();
   dom('#bill-diff .text p').removeClass('low-point');
-  dom('#bill-diff .text').removeClass('collapse');
 };
 
 /**
@@ -56,23 +69,12 @@ DiffView.prototype.center = function () {
 DiffView.prototype.showBillText = function (paragraphs) {
   var textContainer = dom('#bill-diff .text');
   var self = this;
-  textContainer.text('');   // Clean up the text container.
+   textContainer.text('');   //Clean up the text container.
 
   paragraphs.forEach(function (paragraph) {
-    var template = dom("<p>" + paragraph.current + "</p>");
-
-    // To show only if there are some change.
-    var changes = paragraph.diff.changes.filter(function (element) {
-      return  'unchange' !== element.type;
-    });
-    if (changes.length) {
-      var sideView = new SideView();
-      sideView.addChanges(paragraph.diff);
-      sideView.addContainer(template);
-      sideView.on('sidebar-status:visible', self.collapseLeft.bind(self));
-      sideView.on('sidebar-status:hidden', self.center.bind(self));
-    }
-
-    textContainer.append(template);
+    var section = new TextSection(paragraph);
+    section.on('section:side-view:hide', self.centerText.bind(self));
+    section.on('section:side-view:show', self.collapseLeftText.bind(self));
+    textContainer.append(section.el);
   });
 };

lib/boot/index.styl

@@ -31,7 +31,7 @@ header
   position: fixed
   overflow-y: scroll;
   overflow-x: hidden;
-  left: 266px
+  left: 200px
   top: 0px
   right: 0
   bottom: 0
@@ -72,12 +72,12 @@ header
       margin-right: 20px;
 
 	#homepage
-		margin: 0 20px;
+		margin: 20px 0;
 
 aside.nav
 	top: 0
 	bottom: 0
-	width: 266px
+	width: 200px
 	border-right: 1px #BDC3C7
 	overflow-y: scroll
 	background: #ECF0F1

lib/side-view/change.jade

@@ -0,0 +1 @@
+span(class='{{type}}') {{text}}

lib/side-view/component.json

@@ -21,6 +21,7 @@
   "templates": [
       "template.jade"
     , "content.jade"
+    , "change.jade"
   ],
   "main": "view.js"
 }

lib/side-view/styles.styl

@@ -6,7 +6,7 @@
   width: 45px
   min-height: 100%
   height: 100%
-  left: 660px;
+  left: 462px;
 
   .side-container
     button
@@ -23,3 +23,10 @@
       p
         padding: 6px
         margin: 0
+        opacity: 1
+
+        .remove
+          border-radius: 4px
+          color: #333333
+          padding: 1px 2px;
+          background-color: #FFECEC

lib/side-view/view.js

@@ -1,68 +1,56 @@
 var View = require('view');
 var template = require('./template');
+var changeTemplate = require('./change');
 var content = require('./content');
 var ripple = require('ripple');
 var dom = require('dom');
 
-module.exports = SideView;
-
-function SideView() {
+function SideView(changes) {
   if (!this instanceof SideView) {
-    return new SideView();
+    return new SideView(changes);
   }
 
   View.call(this, template);
   this.status = 'hidden';
   this.attachedView = {};
-  this.container = {};
+  this.diff = changes;
 }
 
+//TODO: maybe should remove the dependency of Global view, and use as ripple view.
 View(SideView);
 
 SideView.prototype.toggle = function () {
   var viewStatus = this.attachedView.get('status');
   if ('hidden' === viewStatus) {
     this.attachedView.set('status', 'visible');
-    this.emit('sidebar-status:visible');
-    this.container.removeClass('low-point');
-
   } else {
     this.attachedView.set('status', 'hidden');
-    this.emit('sidebar-status:hidden');
   }
 };
 
-SideView.prototype.addContent = function () {
-
+SideView.prototype.bindActions = function (callback) {
   var Template = ripple(content());
-  var self = this;
   var status = 'hidden'; //Initial status
 
   Template.directive('click-at', function (index, el, view) {
-    el.addEventListener('click', function () {
-      self.toggle(view);
-    });
+    el.addEventListener('click', callback);
   });
 
   this.attachedView = new Template({
     status: status
   });
 
   this.el.append(this.attachedView.el);
+  this.addChanges();
 };
 
-SideView.prototype.addChanges = function (diff) {
+SideView.prototype.addChanges = function () {
   var self = this;
-  self.addContent();
-  //TODO: this must replace with ripple template
-  diff.changes.forEach(function (change) {
-    var changeHtml = dom('<span class="' + change.type + '">' +  change.text + '</span>');
-    dom('.text', self.attachedView.el).append(changeHtml);
+  this.diff.forEach(function (change) {
+    var changeView = ripple(changeTemplate());
+    var changeHtml = new changeView(change);
+    dom('.text', self.attachedView.el).append(changeHtml.el);
   });
 };
 
-//Fixme: this relation it's turn on creepy
-SideView.prototype.addContainer = function (template) {
-  this.el.appendTo(template);
-  this.container = template;
-};
+module.exports = SideView;

lib/text-section/change.jade

@@ -0,0 +1 @@
+span(class='{{type}}') {{text}}

lib/text-section/component.json

@@ -0,0 +1,22 @@
+{
+  "name": "text-section",
+  "description": "",
+  "dependencies": {
+    "visionmedia/jade": "1.3.1",
+    "component/dom": "1.0.5"
+    , "ripplejs/ripple": "0.5.3"
+  },
+  "local": [
+      "view"
+    , "side-view"
+  ],
+  "scripts": [
+    "view.js"
+  ],
+  "styles": ["styles.styl"],
+  "templates": [
+      "template.jade"
+    , "change.jade"
+  ],
+  "main": "view.js"
+}

lib/text-section/styles.styl

@@ -0,0 +1,15 @@
+p
+  position: relative
+  font-size: 16px;
+
+  &.low-point
+    opacity: 0.2
+
+  &.changes
+    opacity: 1
+
+    .add
+      border-radius: 4px;
+      color: #333333;
+      padding: 1px 2px;
+      background-color: #EAFFEA;

lib/text-section/template.jade

@@ -0,0 +1 @@
+p