just added Rangy lib. Is now able to save and load tags but need to fix serialization/dezerialization of the selection.

Gulpfile.js

@@ -68,6 +68,7 @@ gulp.task('dist-node-modules', function () {
     'node_modules/jquery/**/*',
     'node_modules/lodash/**/*',
     'node_modules/ngstorage/**/*'
+    'node_modules/rangy/**/*'
     ], {base: 'node_modules'})
   .pipe(gulp.dest('tmp/vendor'));
 });

package.json

@@ -38,6 +38,7 @@
     "jquery": "^2.1.4",
     "lodash": "^3.10.1",
     "merge2": "^0.3.6",
-    "ngstorage": "^0.3.10"
+    "ngstorage": "^0.3.10",
+    "rangy": "^1.3.0"
   }
 }

src/index.interfaces.ts

@@ -23,14 +23,13 @@ module tagIt {
   }
 
   /*
-  sentence: represents everything contained by punctuations.
-  context: represents ten chars "in both directions" from the word.
+  context: represents the text context of the tag
+  selectionRange: selectionRangeObject
    */
   export interface ISenseTag {
-    userEmail: string,
-    senseid: string,
-    sentence: string,
-    context: string
+    userEmail: string;
+    sense: ISense;
+    context: string;
+    serializedSelectionRange: string;
   }
 }
-

src/index.ts

@@ -4,7 +4,7 @@
 /// <reference path="menu/menu.controller.ts" />
 /// <reference path="services/backend.service.ts" />
 /// <reference path="services/webpage.service.ts" />
-/// <reference path="services/tag.service.ts" />
+/// <reference path="services/tagStorage.service.ts" />
 
 module tagIt {
 
@@ -13,7 +13,7 @@ module tagIt {
     .service('AppConfigService', AppConfigService)
     .service('BackendService', BackendService)
     .service('WebPageService', WebPageService)
-    .service('TagService', TagService)
+    .service('TagStorageService', TagStorageService)
     .controller('MenuCtrl', MenuCtrl);
 
   export function init (callback: () => void) {

src/load-menu-for-web-testing.js

@@ -28,7 +28,12 @@ function injectScripts () {
 
   function loadAngularDependency () {
     console.log('loading angular');
-    loadScript('vendor/ngstorage/ngStorage.js', loadPluginCode);
+    loadScript('vendor/ngstorage/ngStorage.js', loadRangy);
+  }
+
+  function loadRangy () {
+    console.log('loading angular');
+    loadScript('vendor/rangy/rangy-core.js', loadPluginCode);
   }
 
   function loadPluginCode () {

src/menu/menu.controller.ts

@@ -9,34 +9,41 @@ module tagIt {
     senses : Object[];
     backendService : BackendService;
     webPageService : WebPageService;
+    tagStorageService : TagStorageService;
     $log : ng.ILogService;
     $scope: ng.IScope;
 
     /* @ngInject */
     constructor ($scope: IVMScope, $log: angular.ILogService,
       BackendService: BackendService,
-      WebPageService: WebPageService) {
+      WebPageService: WebPageService,
+      TagStorageService: TagStorageService) {
       $scope.vm = this;
       this.$log = $log;
       this.$scope = $scope;
       this.backendService = BackendService;
       this.webPageService = WebPageService;
+      this.tagStorageService = TagStorageService;
 
       // Wire up clicklistener
       this.webPageService.wireUpListener(
         this.onWordSelected,
         this.onWordDeSelected
       );
+
+      // Reload existing tags
+      // var tagsToLoad = this.tagStorageService.loadTags();
+
+      this.$log.debug('these tags were found in storage');
+      this.$log.debug(this.tagStorageService.loadTags());
+
+      // this.webPageService.readdTagsToPage(tagsToLoad);
     }
 
     onSenseSelect (sense: ISense) {
-      this.webPageService.addTagToPage(sense);
-      this.backendService.sendTaggedDataToServer(
-        sense,
-        this.webPageService.currentSelectionRange,
-        this.selectedWord,
-        "useremail@example.org"
-      );
+      var senseTag = this.webPageService.addNewTagToPage(sense);
+      this.tagStorageService.saveTag(senseTag)
+      this.backendService.sendTaggedDataToServer(senseTag);
       this.clearMenuVariables();
     }
 

src/services/backend.service.ts

@@ -29,21 +29,14 @@ module tagIt {
       return synsets.data.senses;
     }
 
-    sendTaggedDataToServer (sense: ISense, range: Range,
-      selectedWord: string, userEmail: string) {
+    sendTaggedDataToServer (senseTag: ISenseTag) {
       this.$log.debug('sendTaggedDataToServer() was called');
-      var messageToSendToServer = {
-        sense: sense,
-        range: range,
-        selectedWord: selectedWord,
-        userEmail: userEmail
-      }
 
       this.$log.debug('would have sent this to the server:');
-      this.$log.debug(messageToSendToServer);
+      this.$log.debug(senseTag);
       this.$log.debug('please uncomment code for actually sending to server');
 
-      // this.$http.post("example.org", messageToSendToServer)
+      // this.$http.post("example.org", senseTag)
       //   .then((response) => {
       //     this.$log.debug('successfully posted to server. Response:');
       //     this.$log.debug(response);

src/services/tag.service.ts

@@ -1,34 +0,0 @@
-/// <reference path="../index.interfaces.ts" />
-
-'use strict';
-
-// responsible for saving and loading
-// any tags related to the current page
-module tagIt {
-
-  export class TagService {
-
-    $http : ng.IHttpService;
-    $log : ng.ILogService;
-
-    /* @ngInject */
-    constructor($http: ng.IHttpService, $log: ng.ILogService) {
-      this.$http = $http;
-      this.$log = $log;
-    }
-
-    // save selection
-    saveTag () {
-
-    }
-
-    loadTag () {
-
-    }
-
-    loadTags () {
-      this.$log.debug('loadTags');
-
-    }
-  }
-}

src/services/tagStorage.service.ts

@@ -0,0 +1,37 @@
+/// <reference path="../index.interfaces.ts" />
+
+'use strict';
+
+// responsible for saving and loading
+// any tags related to the current page
+module tagIt {
+
+  export class TagStorageService {
+
+    $http : ng.IHttpService;
+    $log : ng.ILogService;
+    $localStorage : any;
+
+    /* @ngInject */
+    constructor($http: ng.IHttpService, $log: ng.ILogService,
+      $localStorage: any) {
+      this.$http = $http;
+      this.$log = $log;
+      this.$localStorage = $localStorage;
+    }
+
+    saveTag (tagToSave: ISenseTag) {
+       if(!this.$localStorage.tagStorage) {
+         this.$localStorage.tagStorage = [];
+       }
+       this.$log.debug('saving tag in localstorage:');
+       this.$log.debug(tagToSave);
+       this.$localStorage.tagStorage.push(tagToSave);
+    }
+
+    loadTags () {
+      this.$log.debug('loadTags');
+      return this.$localStorage.tagStorage;
+    }
+  }
+}

src/services/webpage.service.ts

@@ -11,10 +11,12 @@ module tagIt {
     // when clicking the menu to select a synset
     // we need to remember what the currently selected word was
     currentSelectionRange : any;
+    tagStorageService: TagStorageService;
 
     /* @ngInject */
-    constructor($log: ng.ILogService) {
+    constructor($log: ng.ILogService, TagStorageService: TagStorageService) {
       this.$log = $log;
+      this.tagStorageService = TagStorageService;
     }
 
     wireUpListener (callbackOnSelectFunc : (result : Object) => void,
@@ -58,17 +60,56 @@ module tagIt {
     }
 
     // place spans around a tagged word.
-    addTagToPage = (sense : ISense) => {
-      var windowSelection = window.getSelection();
+    addNewTagToPage = (sense : ISense) : ISenseTag => {
+      this.$log.debug('addNewTagToPage');
       var range = this.currentSelectionRange;
+      var serializedRange = angular.toJson(range);
+      this.surroundRangeWithSpan(sense, range);
+      return {
+        userEmail: 'testEmail',
+        sense: sense,
+        context: range.commonAncestorContainer.innerText,
+        serializedSelectionRange: serializedRange
+      }
+    };
+
+    readdTagsToPage (tagsToLoad: ISenseTag[]) {
+      this.$log.debug('readdTagsToPage()');
+      angular.forEach(tagsToLoad, function (tag, key) {
+        this.readdTagToPage(tag);
+      }, this);
+    }
+
+    private readdTagToPage (tagToLoad: ISenseTag) {
+      this.$log.debug('addNewTagToPage');
+      var savedRange : Range = angular.fromJson(tagToLoad.serializedSelectionRange);
+      var selection = window.getSelection();
+
+      //remove any present selections
+      selection.removeAllRanges();
+
+      debugger;
+
+      //select text on page
+      var rangeToLoad = document.createRange();
+      rangeToLoad.setStart(savedRange.startContainer, savedRange.startOffset)
+      rangeToLoad.setEnd(savedRange.endContainer, savedRange.endOffset);
+      selection.addRange(rangeToLoad);
+
+      //tag that text with a span
+      this.surroundRangeWithSpan(tagToLoad.sense,
+        selection.getRangeAt(0).cloneRange());
+    }
+
+    private surroundRangeWithSpan (sense: ISense, range: Range) {
+      var windowSelection = window.getSelection();
       var span : HTMLSpanElement = document.createElement('span');
       span.id = sense.senseid;
       span.title = sense.explanation;
       span.className = 'tagit-tag';
       range.surroundContents(span);
       windowSelection.removeAllRanges();
-      // windowSelection.addRange(range);
-      this.$log.debug('addTagToPage');
     }
+
   }
 }