Merge branch 'feature/add-character-count-to-dialogues' into develop

praekeltfoundation · Apr 22, 2015 · 61dc9aa · 61dc9aa
2 parents 4c6fb49 + ced2827
commit 61dc9aa
Show file tree

Hide file tree

Showing 13 changed files with 311 additions and 10 deletions.
diff --git a/go/base/static/js/src/apps/dialogue/states/choice.js b/go/base/static/js/src/apps/dialogue/states/choice.js
@@ -14,7 +14,8 @@
       DialogueStateView = states.DialogueStateView,
       DialogueStateEditView = states.DialogueStateEditView,
       DialogueStatePreviewView = states.DialogueStatePreviewView,
-      TextEditView = states.partials.TextEditView;
+      TextEditView = states.partials.TextEditView,
+      maxChars = states.maxChars;
 
   var plumbing = go.components.plumbing,
       EndpointViewCollection = plumbing.endpoints.EndpointViewCollection,
@@ -123,6 +124,7 @@
       this.model.set(
         'label',
         this.$('.choice-label').prop('value'));
+      this.mode.render();
     },
 
     onRemoveClick: function(e) {
@@ -162,14 +164,14 @@
 
   var ChoiceStateEditView = DialogueStateEditView.extend({
     events: _({
-      'click .new-choice': 'onNewChoice'
+      'click .new-choice': 'onNewChoice',
+      'change .text': 'onTextChange'
     }).defaults(DialogueStateEditView.prototype.events),
 
     bodyOptions: function() {
       return {
         jst: 'JST.apps_dialogue_states_choice_edit',
         partials: {
-          text: new TextEditView({mode: this}),
           choices: new ChoiceEditCollection({
             mode: this,
             models: this.state.model.get('choice_endpoints')
@@ -192,6 +194,11 @@
       }
     },
 
+    onTextChange: function(e) {
+      this.state.model.set('text', $(e.target).val(), {silent: true});
+      this.state.render();
+    },
+
     onNewChoice: function(e) {
       e.preventDefault();
       this.newChoice();
@@ -215,6 +222,8 @@
   });
 
   var ChoiceStateView = DialogueStateView.extend({
+    maxChars: maxChars,
+
     typeName: 'choice',
 
     editModeType: ChoiceStateEditView,
@@ -227,7 +236,27 @@
       attr: 'choice_endpoints',
       type: ChoiceEndpointView,
       collectionType: ChoiceEndpointCollection
-    }]
+    }],
+
+    calcChars: function() {
+      var numChars = this.model.get('choice_endpoints')
+        .reduce(function(count, choice) {
+          return ('N. ' + choice.get('label') + '\n').length + count;
+        }, 0);
+
+      // Remove the '\n' from the last choice_endpoint
+      numChars--;
+      numChars += this.model.get('text').length;
+      return Math.max(numChars, 0);
+    },
+
+    charsLeft: function() {
+      return this.maxChars - this.calcChars();
+    },
+
+    tooManyChars: function() {
+      return (this.charsLeft() < 0) ? 'text-danger' : '';
+    }
   });
 
   _(exports).extend({

diff --git a/go/base/static/js/src/apps/dialogue/states/end.js b/go/base/static/js/src/apps/dialogue/states/end.js
@@ -9,7 +9,8 @@
       DialogueStateView = states.DialogueStateView,
       DialogueStateEditView = states.DialogueStateEditView,
       DialogueStatePreviewView = states.DialogueStatePreviewView,
-      TextEditView = states.partials.TextEditView;
+      TextEditView = states.partials.TextEditView,
+      maxChars = states.maxChars;
 
   var EndStateEditView = DialogueStateEditView.extend({
     bodyOptions: function() {
@@ -29,12 +30,35 @@
   });
 
   var EndStateView = DialogueStateView.extend({
+    maxChars: maxChars,
+
     typeName: 'end',
 
     editModeType: EndStateEditView,
     previewModeType: EndStatePreviewView,
 
-    endpointSchema: [{attr: 'entry_endpoint', type: EntryEndpointView}]
+    endpointSchema: [{attr: 'entry_endpoint', type: EntryEndpointView}],
+
+    events: _({
+      'change .text': 'onTextChange'
+    }).defaults(DialogueStateEditView.prototype.events),
+
+    onTextChange: function(e) {
+      this.model.set('text', $(e.target).val(), {silent: true});
+      this.render();
+    },
+
+    calcChars: function() {
+      return this.model.get('text').length;
+    },
+
+    charsLeft: function() {
+      return this.maxChars - this.calcChars();
+    },
+
+    tooManyChars: function() {
+      return (this.charsLeft() < 0) ? 'text-danger' : '';
+    }
   });
 
   _(exports).extend({

diff --git a/go/base/static/js/src/apps/dialogue/states/freetext.js b/go/base/static/js/src/apps/dialogue/states/freetext.js
@@ -9,7 +9,8 @@
       DialogueStateView = states.DialogueStateView,
       DialogueStateEditView = states.DialogueStateEditView,
       DialogueStatePreviewView = states.DialogueStatePreviewView,
-      TextEditView = states.partials.TextEditView;
+      TextEditView = states.partials.TextEditView,
+      maxChars = states.maxChars;
 
   var FreeTextStateEditView = DialogueStateEditView.extend({
     bodyOptions: function() {
@@ -29,14 +30,37 @@
   });
 
   var FreeTextStateView = DialogueStateView.extend({
+    maxChars: maxChars,
+
     typeName: 'freetext',
 
     editModeType: FreeTextStateEditView,
     previewModeType: FreeTextStatePreviewView,
 
     endpointSchema: [
       {attr: 'entry_endpoint', type: EntryEndpointView},
-      {attr: 'exit_endpoint', type: ExitEndpointView}]
+      {attr: 'exit_endpoint', type: ExitEndpointView}],
+
+    events: _({
+      'change .text': 'onTextChange'
+    }).defaults(DialogueStateEditView.prototype.events),
+
+    onTextChange: function(e) {
+      this.model.set('text', $(e.target).val(), {silent: true});
+      this.render();
+    },
+
+    calcChars: function() {
+      return this.model.get('text').length;
+    },
+
+    charsLeft: function() {
+      return this.maxChars - this.calcChars();
+    },
+
+    tooManyChars: function() {
+      return (this.charsLeft() < 0) ? 'text-danger' : '';
+    }
   });
 
   _(exports).extend({

diff --git a/go/base/static/js/src/apps/dialogue/states/states.js b/go/base/static/js/src/apps/dialogue/states/states.js
@@ -18,6 +18,8 @@
       ParametricEndpointView = endpoints.ParametricEndpointView,
       AligningEndpointCollection = endpoints.AligningEndpointCollection;
 
+  var maxChars = 140;
+
   var DialogueEndpointView = ParametricEndpointView.extend();
 
   var EntryEndpointView = DialogueEndpointView.extend({
@@ -481,6 +483,8 @@
 
     DialogueStateView: DialogueStateView,
     DialogueStateGridView: DialogueStateGridView,
-    DialogueStateCollection: DialogueStateCollection
+    DialogueStateCollection: DialogueStateCollection,
+
+    maxChars: maxChars
   });
 })(go.apps.dialogue.states = {});
diff --git a/go/base/static/js/test/apps/dialogue/states/choice.test.js b/go/base/static/js/test/apps/dialogue/states/choice.test.js
@@ -212,5 +212,78 @@ describe("go.apps.dialogue.states.choice", function() {
           editMode.$('[data-uuid="choice:new-endpoint"]')));
       });
     });
+
+    describe(".render", function() {
+      it("should display the char count", function() {
+
+        assert.equal(state.$('.char-count').text().trim(), '44 characters used.');
+        var endpoints = state.model.get('choice_endpoints');
+        endpoints.at(0).set('label', 'A new label');
+        endpoints.at(1).set('label', 'Another  new label');
+
+        state.model.set('text', 'Some text for testing char count');
+        state.render();
+        assert.equal(state.$('.char-count').text().trim(), '68 characters used.');
+      });
+    });
+  });
+
+  describe(".ChoiceStatePreviewView", function() {
+    var ChoiceStatePreviewView = states.choice.ChoiceStatePreviewView;
+
+    var state,
+        previewMode,
+        choice1,
+        choice2;
+
+    beforeEach(function() {
+      state = diagram.states.get('state1');
+      previewMode = state.modes.preview;
+      state.preview();
+    });
+
+    describe(".render", function() {
+      it("should display the char count", function() {
+        assert.equal(state.$('.char-count').text().trim(), '44 characters used.');
+        var endpoints = state.model.get('choice_endpoints');
+        endpoints.at(0).set('label', 'A new label');
+        endpoints.at(1).set('label', 'Another  new label');
+        state.model.set('text', 'Some text for testing char count');
+        state.render();
+        assert.equal(state.$('.char-count').text().trim(), '68 characters used.');
+      });
+    });
+  });
+
+  describe(".ChoiceStateView", function() {
+    var state;
+
+    beforeEach(function() {
+      state = diagram.states.get('state1');
+      state.maxChars = 100;
+    });
+
+    describe(".calcChars", function(){
+      it("should calculate the number of characters used", function(){
+        assert.equal(state.calcChars(), 44);
+      });
+    });
+
+    describe(".charsLeft", function(){
+      it("should calculate the number of characters left", function(){
+        assert.equal(state.charsLeft(), 56);
+      });
+    });
+
+    describe(".tooManyChars", function(){
+      it("should not add a class when maxChars exceeds calcChars", function(){
+        assert.equal(state.tooManyChars(),'');
+      });
+
+      it("should add a class when calcChars exceeds maxChars", function(){
+        state.maxChars = 5;
+        assert.equal(state.tooManyChars(), 'text-danger');
+      });
+    });
   });
 });
diff --git a/go/base/static/js/test/apps/dialogue/states/end.test.js b/go/base/static/js/test/apps/dialogue/states/end.test.js
@@ -44,5 +44,66 @@ describe("go.apps.dialogue.states.end", function() {
           'So Long, and Thanks for All the Fish');
       });
     });
+
+    describe(".render", function() {
+      it("should display the char count", function() {
+        assert.equal(state.$('.char-count').text().trim(), '31 characters used.');
+
+        state.model.set('text', 'Some text for testing char count');
+        state.render();
+        assert.equal(state.$('.char-count').text().trim(), '32 characters used.');
+      });
+    });
+  });
+
+  describe(".EndStatePreviewView", function() {
+    var state;
+
+    beforeEach(function() {
+      state = diagram.states.get('state3');
+      state.preview();
+    });
+
+    describe(".render", function() {
+      it("should display the char count", function() {
+        assert.equal(state.$('.char-count').text().trim(), '31 characters used.');
+
+        state.model.set('text', 'Some text for testing char count');
+        state.render();
+        assert.equal(state.$('.char-count').text().trim(), '32 characters used.');
+      });
+    });
+  });
+
+  describe(".EndStateView", function() {
+    var state;
+
+    beforeEach(function() {
+      state = diagram.states.get('state3');
+      state.maxChars = 100;
+    });
+
+    describe(".calcChars", function(){
+      it("should calculate the number of characters used", function(){
+        assert.equal(state.calcChars(), 31);
+      });
+    });
+
+    describe(".charsLeft", function(){
+      it("should calculate the number of characters left", function(){
+        assert.equal(state.charsLeft(), 69);
+      });
+    });
+
+    describe(".tooManyChars", function(){
+      it("should not add a class when maxChars exceeds calcChars", function(){
+        assert.equal(state.tooManyChars(),'');
+      });
+
+      it("should add a class when calcChars exceeds maxChars", function(){
+        state.maxChars = 5;
+        assert.equal(state.tooManyChars(), 'text-danger');
+      });
+    });
   });
 });