major refactoring of the AceCtrl and segmentArea

chrishokamp · Mar 7, 2014 · d32accf · d32accf
1 parent 53080a8
commit d32accf
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 130 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,5 +3,4 @@ dist
 .tmp
 .sass-cache
 .css
-app/bower_components
 heroku_app
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -372,9 +372,21 @@ module.exports = function (grunt) {
  // Test settings
  karma: {
  unit: {
- configFile: 'config/karma.conf.js',
+ configFile: './test/karma-unit.conf.js',
+ autoWatch: false,
  singleRun: true
- }
+ },
+ unit_auto: {
+ configFile: './test/karma-unit.conf.js',
+ autoWatch: true,
+ singleRun: false
+ },
+ //backgroundUnit: {
+ // configFile: 'karma.conf.js',
+ // runnerPort: 9999,
+ // browsers: ['Chrome'],
+ // background: true,
+ //},
  }
  });
 

diff --git a/app/scripts/aceEditor/AceCtrl.js b/app/scripts/aceEditor/AceCtrl.js
@@ -7,17 +7,7 @@ angular.module('controllers').controller('AceCtrl',
  // require some stuff from the ace object
  var aceRange = ace.require('ace/range').Range;
 
- // special chars toolbar showing
- $scope.showSpecialChars = true;
-
- // testing the special chars directive
- $scope.germanChars = ['ä','ö','ü','Ä','Ö','Ü','ß'];
- $scope.insertChar = function(char) {
- $log.log("char to insert: " + char);
- $scope.insertText(char);
- }
-
- $scope.allSegments = Document.segments;
+ // $scope.allSegments = Document.segments;
 
  // the values for this instance set from the view with ng-init and the ng-repeat index
  $scope.setSegments = function(index) {
@@ -76,21 +66,13 @@ angular.module('controllers').controller('AceCtrl',
 
  // get the range of the current token under the cursor
  // Chris: working here - call this as part of the selection workflow, when tokens need to be selected or reselected
- var getCurrentTokenRange = function() {
+ var getCurrentTokenAndRange = function() {
  var editor = $scope.editor;
  // get cursor position, then token
  var pos = editor.getCursorPosition();
- $log.log('current cursor position: ');
- $log.log(pos);
  var token = editor.session.getTokenAt(pos.row, pos.column);
- $log.log("LOG: token object is: ");
- $log.log(token);
-
  var tokenRange = new aceRange(pos.row, token.start, pos.row, token.start + token.value.length);
- $log.log("logging the tokens range");
- $log.log(tokenRange)
-
- // editor.session.selection.setRange(tokenRange);
+ return {token: token, range: tokenRange};
  }
 
  // replace the current selection in the editor with this text
@@ -103,14 +85,22 @@ angular.module('controllers').controller('AceCtrl',
  editor.session.getDocument().replace(currentSelection, text);
  $log.log("replaced current selection with: " + text);
 
+
  // refocus the AceEditor
  $scope.editor.focus();
  }
+ // let the parent see replaceSelection too
+ $scope.$parent.replaceSelection = $scope.replaceSelection;
 
  $scope.insertText = function(text) {
+ $log.log('insertText called with value: ' + text);
  var editor = $scope.editor;
- editor.insert(text);
+
+ // insert the text with a space before and after
+ editor.insert(' ' + text + ' ');
  }
+ // let the $parent controller see insertText, so that we can hit it from sibling controllers
+ $scope.$parent.insertText = $scope.insertText;
 
  $scope.clearEditor = function() {
  $log.log('clearEditor fired...');
@@ -147,57 +137,40 @@ angular.module('controllers').controller('AceCtrl',
  editor.resize();
  };
 
- // TESTING the index directive
-// $timeout(function() { $log.log("the index property on this AceEditor ctrl is: " + $scope.index)},1500);
-
  // Note: this is the path for the ace require modules
  var langTools = ace.require("ace/ext/language_tools");
  $scope.editor = editor;
- $log.log('logging ace editor');
- $log.log(editor);
- // WORKING - use ace.require to create an edit mode - in lib/
 
  $scope.editor.session.setMode('ace/mode/text');
 
  // Testing token mouseover
  editor.on('click', function(e) {
- // testing only
- getCurrentTokenRange();
-
- // open the toolbar to show word forms, etc...
- $scope.toolbarOpen = true;
-
- var position = e.getDocumentPosition();
- var token = editor.session.getTokenAt(position.row, position.column);
- $log.log("LOG: token object is: ");
- $log.log(token);
 
- $log.log("LOG: Stemmed token is: ");
- var stemmedToken = GermanStemmer.stem(token.value)
- $log.log(stemmedToken);
-
- $log.log("map output is: ");
- var otherForms = GermanStemmer.getOtherForms(stemmedToken)
- $log.log(otherForms);
-
- // now select token (first clear any existing selection)
- // editor.session.removeMarker(markerId)
- var tokenRange = new aceRange(position.row, token.start, position.row, token.start + token.value.length);
- $log.log("logging the tokens range");
- $log.log(tokenRange)
-
- // we currently don't need to use clearSelection(), but switching to multi-select may require that
+// TODO: move this side-effect elsewhere
+ $scope.$parent.$apply(
+ function() {
+ $scope.$parent.toggleToolbar(false);
+ }
+ );
 
- editor.session.selection.setRange(tokenRange);
+ var tokenAndRange = getCurrentTokenAndRange();
+ var token = tokenAndRange.token;
+ var stemmedToken = GermanStemmer.stem(token.value);
+ $log.log('token: '+ token, 'stemmed: ' + stemmedToken);
 
- //TODO - move to a directive for wordForms?
- if (otherForms) {
- $log.log("setting otherWordForms");
- $scope.otherWordForms = otherForms;
- $scope.$apply();
+ // TODO: move this out of AceCtrl - function is on segmentCtrl
+ $scope.$parent.$apply(
+ function() {
+ $scope.getOtherWordForms(stemmedToken);
  }
- });
+ );
+
+ // now select token (first clear any existing selection)
+ editor.session.selection.setRange(tokenAndRange.range);
+ // we currently don't need to use clearSelection(), but switching to multi-select may require that
+ });
 
+// Chris: use the function below to highlight the search term in the text
  // a way of getting the current token on click
 // var Range = ace.require("ace/range").Range, markerId
 // var handler = function(e){
@@ -213,18 +186,12 @@ angular.module('controllers').controller('AceCtrl',
 // pos.row, token.start + token.value.length)
 // console.log(range)
 // editor.session.removeMarker(markerId)
+//
+// // Chris - ace_bracket would be the css class
 // markerId = editor.session.addMarker(range, 'ace_bracket red')
 // }
 // editor.on("click", handler)
 
- // TESTING - focus the editor
- // what is the editor object?
- //$log.log(editor);
-
- // TESTING: set the content of the editor as the target segment
- //$log.log("setting the value of the ace editor to: " + $scope.targetSegment);
- //editor.setValue($scope.targetSegment);
-
  editor.setOptions({enableBasicAutocompletion: true});
  var tmCompleter = {
  getCompletions: function(editor, session, pos, prefix, callback) {
@@ -303,18 +270,10 @@ angular.module('controllers').controller('AceCtrl',
  // the size again
  editor.getSession().on('change', heightUpdateFunction);
 
-
+// Move styling into the Ace Editor directive
 // TODO: see moses - how to get translation alignments?
  editor.setFontSize(20);
  editor.setFontSize(20);
- // sampleSen is initialized earlier in the controller
- // editor.setValue($scope.sampleSen);
- //editor.setTheme("ace/theme/twilight"); // Note: the editor themes are called by their string names (these are not paths)
- //console.log(_renderer.getTheme());
-
- //session.on("change", function(){
- //console.log(editor.getValue());
- //console.log("the ace session change event fired") });
  }
 
  // BEGIN - managing the active segment

diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -34,11 +34,20 @@ var App = window.App = angular.module('editorComponentsApp',
  $urlRouterProvider
  .otherwise('/project');
 
-});
-//domReady(function() {angular.bootstrap(document, ['editorComponentsApp']);})
-
-// app.config(['$httpProvider', function($httpProvider) {
-// $httpProvider.defaults.useXDomain = true;
-// delete $httpProvider.defaults.headers.common['X-Requested-With'];
-// }]);
+})
+//.constant('baseUrl', 'http:https://protected-crag-2517.herokuapp.com/glossary');
+.constant('baseUrl', 'http:https://localhost:5000');
+// TODO
+// check window.location to see where we are, and set the baseUrl accordingly
+//.run(['$location', '$log', function($location, $log) {
+// App.provider('baseUrl', function() {
+// return {
+// $get: function() {
+// $log.log('inside config, $location.absUrl: ' + $location.absUrl());
+// $log.log('inside config, $location.host: ' + $location.host());
+// return 'http:https://protected-crag-2517.herokuapp.com/glossary';
+// }
+// }
+// });
+//}]);
 
diff --git a/app/scripts/segmentArea/segmentArea.js b/app/scripts/segmentArea/segmentArea.js
@@ -1,18 +1,13 @@
 // the segment area is the area of the UI representing a single translation unit
 // this is a source + target pair
 angular.module('controllers')
-.controller('SegmentAreaCtrl', ['$scope', 'Wikipedia', 'Glossary', '$sce', '$log', function($scope, Wikipedia, Glossary, $sce, $log) {
+.controller('SegmentAreaCtrl', ['$scope', 'Wikipedia', 'Glossary', 'GermanStemmer', '$sce', '$log', function($scope, Wikipedia, Glossary, GermanStemmer, $sce, $log) {
 // TODO: display the results of the concordancer here, not from the AceCtrl
 
  // Note: don't do $scope.$watches, because we reuse this controller many times!
- // Toggle opening / collapsing the toolbar
- $scope.isCollapsed = true;
-
  // TODO: set this only when this is the active scope
  $scope.active = true;
 
- // Toolbar open
- $scope.toolbarOpen = false;
  $scope.queryConcordancer = function(query) {
  $log.log('query is: ' + query);
  Wikipedia.getConcordances(query);
@@ -22,7 +17,16 @@ angular.module('controllers')
  $scope.concordanceMatches = Wikipedia.currentQuery;
  })
 
-// http:https://glosbe.com/gapi/tm?from=eng&dest=deu&format=json&phrase="the company grew"&pretty=true
+ // special chars toolbar showing
+ $scope.showSpecialChars = true;
+
+ // testing the special chars directive
+ $scope.germanChars = ['ä','ö','ü','Ä','Ö','Ü','ß'];
+ $scope.insertChar = function(char) {
+ $log.log("char to insert: " + char);
+ $scope.insertText(char);
+ }
+
 
  // convert a snippet to trusted html - TODO: this isn't reusable becuase we send back x.snippet
  $scope.getSnippet = function(concordanceMatch) {
@@ -39,13 +43,23 @@ angular.module('controllers')
  }
 
 // TODO: testing
- $scope.isCollapsed = true;
- $scope.toggleToolbar = function() {
- $scope.isCollapsed = !$scope.isCollapsed;
- $log.log("isCollapsed: the value of isCollapsed is: " + $scope.isCollapsed);
+ $scope.isCollapsed = {collapsed: true};
+ $scope.toggleToolbar = function(bool) {
+ if (arguments.length > 0) {
+ $scope.isCollapsed = { collapsed: bool };
+// TODO: there is a broken corner-case here
+ } else {
+ $scope.isCollapsed = { collapsed: !$scope.isCollapsed.collapsed };
+ }
+ $log.log("isCollapsed: the value of isCollapsed is: " + $scope.isCollapsed.collapsed);
  }
 
-// TODO: use a callback
+ $scope.getOtherWordForms = function(stemmedToken) {
+ $log.log('other word forms called with: ' + stemmedToken);
+ $scope.otherWordForms = GermanStemmer.getOtherForms(stemmedToken);
+ };
+
+// TODO: use a promise
  $scope.queryGlossary = function(query) {
  Glossary.getMatches(query, updateGlossaryArea);
 

diff --git a/app/scripts/services/glossary.js b/app/scripts/services/glossary.js
@@ -1,18 +1,17 @@
 // Working - provide the ectaco dictionary from this service
-angular.module('services').factory('Glossary', [ '$http', '$log', function($http,$log) {
- // load the file from data/
- // TODO: move this glossary to a backend service
-// var glossaryFile = 'data/ectaco-en-pos-de.tsv';
+angular.module('services').factory('Glossary', [ '$http', 'baseUrl', '$log', function($http,baseUrl,$log) {
 
  //development
  // the ectaco german dictionary
  var glossaryFile = 'data/glossary.small.tsv';
+// var glossaryFile = 'data/ectaco-en-pos-de.tsv';
 
+ // the glossary server
+ var urlPrefix = '/glossary';
+ var glossaryUrl = baseUrl + urlPrefix;
  // working -- interface with the glosbe translate API
  // check whether CORS is ok
 // http:https://glosbe.com/gapi/tm?from=eng&dest=deuk&format=json&phrase="the company grew"&pretty=true
-// var baseUrl = 'http:https://localhost:5000/glossary';
- var baseUrl = 'http:https://protected-crag-2517.herokuapp.com/glossary';
 
  // Note: a glossary is for LOOKUP, not autocomplete
  var Glossary = {
@@ -28,7 +27,7 @@ angular.module('services').factory('Glossary', [ '$http', '$log', function($http
  callback(self.glossary[phrase]);
  } else {
 
- $http.get(baseUrl, {
+ $http.get(glossaryUrl, {
  params: {
  phrase: phrase,
  from: 'eng',

diff --git a/app/scripts/services/wikipedia.js b/app/scripts/services/wikipedia.js
@@ -2,13 +2,14 @@
 // a sample query
 // http:https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch="indubitably"&srprop=snippet
 
-angular.module('services').factory('Wikipedia', ['$http', '$rootScope', '$log', function($http, $rootScope, $log) {
+angular.module('services').factory('Wikipedia', ['$http', '$rootScope', 'baseUrl', '$log', function($http, $rootScope, baseUrl, $log) {
 
  // the query url: 'http:https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srprop=snippet';
+ var urlPrefix = '/wikipedia';
+ var concordanceUrl = baseUrl + urlPrefix;
 
 // TODO: set this url dynamically, because we dont know where we're getting deployed from
 // var baseUrl = 'http:https://localhost:5000/wikipedia';
- var baseUrl = 'http:https://protected-crag-2517.herokuapp.com/wikipedia';
  var Wikipedia = {
  concordances: {},
  // TODO: reset currentQuery when user moves to a new segment?
@@ -23,7 +24,7 @@ angular.module('services').factory('Wikipedia', ['$http', '$rootScope', '$log',
  } else {
 
  // TODO: make sure the backend actually returns responses to this query
- $http.get(baseUrl, {
+ $http.get(concordanceUrl, {
  params: {
  srsearch: query,
  origin: 'http:https://0.0.0.0:9000'

diff --git a/app/scripts/services/xliffParser.js b/app/scripts/services/xliffParser.js
@@ -55,7 +55,10 @@ angular.module('services').factory('XliffParser', ['$rootScope','fileReader','Do
  var targetText = seg[1] ? seg[1].textContent : '';
  $log.log("sourceText: " + sourceText)
  $log.log("targetText: " + targetText)
- var segPair = [sourceText, targetText];
+ var segPair = {
+ source: sourceText,
+ target: targetText
+ };
 
  // TODO how to replace and add nodes to the document as the translator works?
  Document.sourceSegments.push(sourceText);