first big version

Gruntfile.js

@@ -29,11 +29,13 @@ module.exports = function (grunt) {
  watch: {
  js: {
  files: ['{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js'],
- tasks: ['newer:jshint:all', 'test']
+ //tasks: ['newer:jshint:all', 'test']
+ tasks: ['newer:jshint:all']
  },
  jsTest: {
  files: ['test/spec/{,*/}*.js'],
- tasks: ['newer:jshint:test', 'karma']
+ //tasks: ['newer:jshint:test', 'karma']
+ tasks: ['karma']
  },
  compass: {
  files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],

app/scripts/aceEditor/AceCtrl.js

@@ -0,0 +1,114 @@
+'use strict';
+
+define(['controllers/controllers'], function(controllers) {
+
+ controllers.controller('AceCtrl', ['$scope', function($scope) {
+
+ $scope.getSelection = function() {
+ var editor = $scope.editor;
+ if (editor) {
+ // TEST: log the text
+ console.log($scope.editor.session.getTextRange(editor.getSelectionRange()));
+
+ //get selection range
+ var r = editor.getSelectionRange();
+ // Now add some markup to this text
+ //add marker
+ var session = editor.session;
+ r.start = session.doc.createAnchor(r.start);
+ r.end = session.doc.createAnchor(r.end);
+ //r.id = session.addMarker(r, "ace_step", "text")
+
+ // the last element tells us whether to put the marker in front of the text or behind it
+ // true = in front, false = behind
+ // there are two marker layers
+ r.id = session.addMarker(r, "was-selected", "text", false);
+
+ // TODO: what does addDynamicMarker do?
+ //r.id = session.addDynamicMarker(r, "was-selected", "text", false);
+
+ // TODO: move this UI-logic into a dynamically-creatable directive
+ // Another option is adding the directive into the Ace marker creation template
+ $('.was-selected').css('background-color', 'yellow');
+ $('.was-selected').addClass('selectedByJquery');
+
+ $('.was-selected').draggable({
+ revert: function(droppable) {
+ if (!droppable) {
+ d("reverting to orginal position");
+ return true;
+ } else {
+ return false;
+ }
+ },
+ start: function(ev, ui) {
+ var $elem = $(ev.target);
+ d("you started dragging a draggable");
+ // TODO: disable any droppables attached to this element when the whole element is being dragged
+ var $gaps = $elem.children('.ui-droppable');
+ $gaps.droppable('option', 'disabled', true);
+
+ var $token = $(ev.target);
+
+ // TODO: tests only!
+ //$token.addClass('in-drag');
+ $token.addClass('i-was-dragged');
+ //$token.removeClass('i-was-dragged');
+ },
+ stop: function(ev, ui) {
+ var $elem = $(ev.target);
+ var $gaps = $elem.children('.ui-droppable');
+ $gaps.droppable('option', 'disabled', false);
+
+ var $token = $(ev.target);
+ //$token.removeClass('in-drag');
+
+ }
+ });
+ // TODO: add logic to handle splitting the marker when user types <space>
+ } else {
+ d("ERROR: no editor on the scope!");
+ }
+ }
+
+ $scope.insertText = function(text) {
+ var editor = $scope.editor;
+ editor.insert(text);
+ }
+
+ $scope.currentPrefix = function() {
+ var editor = $scope.editor;
+ console.log(editor.getValue());
+ }
+
+ // Use this function to configure the ace editor instance
+ $scope.aceLoaded = function (_editor) {
+ var editor = _editor;
+ // TODO: move styling to the view
+ editor.setShowPrintMargin(false);
+
+ // TODO: how to limit the Ace editor to a certain number of lines?
+ //editor.setOption("maxLines", 1);
+ //editor.setOptions({
+ // maxLines: 1
+ //});
+
+ $scope.startText = "gloss over source to see the target phrase alignment";
+// TODO: see moses - how to get translation alignment?
+ $scope.editor = editor;
+ editor.setFontSize(20);
+ editor.setValue($scope.startText);
+ //editor.setTheme("ace/theme/twilight"); // Note: the editor themes are called by their string names (these are not paths)
+ //console.log("here's the _renderer theme:")
+ //console.log(_renderer.getTheme());
+ // interact with the ace session using editor, session, etc...
+ var _session = _editor.getSession();
+ var _renderer = _editor.renderer;
+ _session.on("change", function(){
+ console.log(editor.getValue());
+ console.log("the ace session change event fired") });
+ }
+
+ }]);
+});
+

app/scripts/app.js

@@ -7,18 +7,23 @@ define(
  'ngSanitize',
  'ngRoute',
  'controllers/controllers',
- 'directives/directives'
- //'services/services',
+ 'directives/directives',
+ 'services/services',
  //'filters/filters',
+ 'uiAce',
+ 'uiBootstrap'
  ],
  function(angular){
  var app = angular.module('editorComponentsApp',
  [
  'ngRoute',
  'ngResource',
  'controllers',
- 'directives'
- //'services',
+ 'directives',
+ 'services',
+ 'ui.ace',
+ 'ui.bootstrap',
+ 'services'
  //'filters',
  //'ui.bootstrap',
  //'ngTouch'

app/scripts/directives/ngFileSelect.js

@@ -0,0 +1,14 @@
+'use strict';
+define(['../directives/directives'], function(directives){
+ directives.directive('ngFileSelect', function() {
+ return {
+ link: function($scope,el){
+
+ el.bind("change", function(e){
+ $scope.file = (e.srcElement || e.target).files[0];
+ $scope.getFile();
+ })
+ }
+ };
+ });
+});

app/scripts/glossary/Glossary.js

@@ -0,0 +1,19 @@
+// Controller for any element that uses the glossary service
+// TODO: define live template before proceeding
+
+'use strict';
+
+define(['../controllers/controllers'], function(controllers) {
+
+ controllers.controller('GlossaryCtrl', ['$scope', 'Glossary', function($scope, Glossary) {
+
+ $scope.makeHtml = function() {
+ var out = "";
+ Glossary.words.forEach(function(word) {
+ out += '<div>' + word + '</div>';
+ });
+ return out;
+ }
+
+ }]);
+});

app/scripts/glossary/glossary-template.html

@@ -0,0 +1,5 @@
+<div>
+ <div>dog</div>
+ <div>cat</div>
+ <div>fish</div>
+</div>

app/scripts/glossary/glossaryFileUpload.js

@@ -0,0 +1,35 @@
+'use strict';
+define(['controllers/controllers'], function(controllers) {
+
+ controllers.controller('UploadCtrl', function($scope, fileReader) {
+
+// TODO: parse a local xml file - see the escriba project
+// TODO: think about how to implement the client side parser(s)
+// Parsing on the server is also a perfectly valid option
+// server needs to know how to synchronize with the file format at all times
+
+ // reader.readAsText(f);
+
+
+ console.log(fileReader)
+ $scope.getFile = function () {
+ $scope.progress = 0;
+ // FOR A TEXT FILE
+ fileReader.readAsText($scope.file, $scope)
+ .then(function(result) {
+ $scope.textFromFile = result;
+ });
+
+ // FOR IMAGES
+ //fileReader.readAsDataUrl($scope.file, $scope)
+ // .then(function(result) {
+ // $scope.imageSrc = result;
+ // });
+ };
+
+ $scope.$on("fileProgress", function(e, progress) {
+ $scope.progress = progress.loaded / progress.total;
+ });
+ });
+});
+

app/scripts/main.js

@@ -13,10 +13,15 @@ require.config({
  ngResource: '../bower_components/angular-resource/angular-resource',
  jquery: '../bower_components/jquery/jquery.min',
  jqueryui: '../bower_components/jqueryui/ui/jquery-ui',
- underscore: '../bower_components/underscore/underscore-min',
+ underscore: '../bower_components/underscore/underscore-min',
  domReady: '../bower_components/domready/ready',
  ngCookies: '../bower_components/angular-cookies/angular-cookies',
- ngSanitize: '../bower_components/angular-sanitize/angular-sanitize'
+ ngSanitize: '../bower_components/angular-sanitize/angular-sanitize',
+ uiAce: '../bower_components/angular-ui-ace/ui-ace',
+ ace: '../bower_components/ace-builds/src/ace',
+ //uiBootstrap: '../bower_components/angular-ui-bootstrap/dist/ui-bootstrap-tpls-0.10.0'
+ // TODO: added to get access to the new popover template directive
+ uiBootstrap: 'vendor/ui-bootstrap-tpls-0.10.0'
  },
  shim: {
  angular: {
@@ -26,6 +31,10 @@ require.config({
  jqueryui: {
  deps: ['jquery'],
  exports: 'jqueryui'
+ },
+ uiBootstrap: {
+ deps: ['angular'],
+ exports: 'uiBootstrap'
  },
  ngRoute: {
  deps: ['angular'],
@@ -42,6 +51,10 @@ require.config({
  ngSanitize: {
  deps: ['angular'],
  exports: 'ngSanitize'
+ },
+ uiAce: {
+ deps: ['angular', 'ace'],
+ exports: 'uiAce'
  }
  }
 });
@@ -55,14 +68,20 @@ require(
  'ngResource',
  'ngCookies',
  'ngSanitize',
- 'underscore',
  'controllers/controllers',
+ 'services/services',
+ 'directives/directives',
  'tokenRow/tokenRow',
  'tokenRow/draggable',
  'tokenRow/gap',
  'tokenRow/token',
+ 'aceEditor/AceCtrl',
+ 'glossary/Glossary',
  'controllers/main',
- 'directives/directives'
+ 'services/glossary',
+ 'services/fileReader',
+ 'glossary/glossaryFileUpload',
+ 'directives/ngFileSelect'
  ],
  function(angular, app, domReady){
  app.config(['$routeProvider',

app/scripts/services/document.js

@@ -0,0 +1,13 @@
+'use strict';
+
+// A Document Service which manages syncing with the server
+// TODO: create a segment object model - i.e. "bilingualPhrase"
+
+// properties = { segments: <numSegments>, docTree: { <documentObject> } }
+
+define(['services/services'], function(services) {
+
+ services.factory('Document', ['', function( ) {
+
+ }]);
+});

app/scripts/services/fileReader.js

@@ -0,0 +1,70 @@
+// TODO: add to require
+'use strict';
+
+define(['services/services'], function(services) {
+
+ var fileReader = function ($q, $log) {
+
+ var onLoad = function(reader, deferred, scope) {
+ return function () {
+ scope.$apply(function () {
+ deferred.resolve(reader.result);
+ });
+ };
+ };
+
+ var onError = function (reader, deferred, scope) {
+ return function () {
+ scope.$apply(function () {
+ deferred.reject(reader.result);
+ });
+ };
+ };
+
+ var onProgress = function(reader, scope) {
+ return function (event) {
+ scope.$broadcast("fileProgress",
+ {
+ total: event.total,
+ loaded: event.loaded
+ });
+ };
+ };
+
+ var getReader = function(deferred, scope) {
+ var reader = new FileReader();
+ reader.onload = onLoad(reader, deferred, scope);
+ reader.onerror = onError(reader, deferred, scope);
+ reader.onprogress = onProgress(reader, scope);
+ return reader;
+ };
+
+ var readAsDataURL = function (file, scope) {
+ var deferred = $q.defer();
+
+ var reader = getReader(deferred, scope);
+ reader.readAsDataURL(file);
+
+ return deferred.promise;
+ };
+
+ var readAsText = function (file, scope) {
+ var deferred = $q.defer();
+
+ var reader = getReader(deferred, scope);
+ reader.readAsText(file);
+
+ return deferred.promise;
+ };
+
+ return {
+ readAsDataUrl: readAsDataURL,
+ readAsText: readAsText
+ };
+ };
+
+ services.factory('fileReader',
+ ['$q', '$log', fileReader]);
+
+
+});

app/scripts/services/glossary.js

@@ -0,0 +1,11 @@
+'use strict';
+
+define(['services/services'], function(services) {
+
+ services.factory('Glossary', [ function() {
+ return {
+ words: ["apple", "pear", "peach"]
+ }
+
+ }]);
+});