is now able to serialize and deserialize selections if the document does not change too much. Furthermore app is now capable of persisting tags between refreshes

Gulpfile.js

@@ -62,15 +62,23 @@ gulp.task('dist', ['tmp'], function () {
 });
 
 gulp.task('dist-node-modules', function () {
-  return gulp.src([
-    'node_modules/bootstrap/**/*',
-    'node_modules/angular/**/*',
-    'node_modules/jquery/**/*',
-    'node_modules/lodash/**/*',
-    'node_modules/ngstorage/**/*'
-    'node_modules/rangy/**/*'
+  var cssDeps = gulp.src([
+    'node_modules/bootstrap/**/*'
+    ], {base: 'node_modules'});
+  var jsDeps = gulp.src([
+    'node_modules/angular/angular.js',
+    'node_modules/jquery/dist/jquery.js',
+    'node_modules/lodash/index.js',
+    'node_modules/ngstorage/ngStorage.js',
+    'node_modules/rangy/lib/rangy-core.js',
+    'node_modules/rangy/lib/rangy-serializer.js'
     ], {base: 'node_modules'})
-  .pipe(gulp.dest('tmp/vendor'));
+  .pipe($.sourcemaps.init())
+  .pipe($.concat('vendor.js'))
+  .pipe($.sourcemaps.write());
+
+  return $.merge([cssDeps, jsDeps])
+    .pipe(gulp.dest('tmp/vendor'));
 });
 
 gulp.task('clean', function () {

README.md

@@ -6,7 +6,7 @@ A chrome extension for tagging words with semantic information.
 1. To try it out, just [download this plugin](https://github.com/nilsnh/tag-youre-it/archive/master.zip).
 2. You'll need to have installed [node.js](https://nodejs.org/en/).
 3. Go inside the unzipped folder and run `npm install && npm install -g gulp`. In addition to installing development dependencies it will also install Gulp which is useful for active development.
-4. ~~Run `gulp serve` to serve up the prototype for live development.~~ In need of a bugfix.
+4. Run `gulp serve` to serve up the prototype for live development.
 5. Run `gulp dist` to build the chrome plugin in the `dist/` folder.
 
 ## Chrome testing

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

@@ -7,6 +7,10 @@ document.addEventListener("DOMContentLoaded", function(event) {
   .addEventListener('click', function () {
     if (!document.getElementById('tagit-menu')) injectScripts();
   });
+  document.getElementById('js-reset-tags')
+  .addEventListener('click', function () {
+    // nothing here yet
+  });
 });
 
 function injectScripts () {
@@ -18,23 +22,8 @@ function injectScripts () {
   // angular.js to load itself into
   var angular = (window.angular = {});
 
-  console.log('loading jquery');
-  loadScript('vendor/jquery/dist/jquery.js', loadAngular);
-
-  function loadAngular () {
-    console.log('loading angular');
-    loadScript('vendor/angular/angular.js', loadAngularDependency);
-  }
-
-  function loadAngularDependency () {
-    console.log('loading angular');
-    loadScript('vendor/ngstorage/ngStorage.js', loadRangy);
-  }
-
-  function loadRangy () {
-    console.log('loading angular');
-    loadScript('vendor/rangy/rangy-core.js', loadPluginCode);
-  }
+  console.log('loading dependencies');
+  loadScript('vendor/vendor.js', loadPluginCode);
 
   function loadPluginCode () {
     console.log('loading tagit');

src/menu/menu.controller.ts

@@ -32,12 +32,12 @@ module tagIt {
       );
 
       // Reload existing tags
-      // var tagsToLoad = this.tagStorageService.loadTags();
+      var tagsToLoad = this.tagStorageService.loadTags();
 
       this.$log.debug('these tags were found in storage');
-      this.$log.debug(this.tagStorageService.loadTags());
+      this.$log.debug(tagsToLoad);
 
-      // this.webPageService.readdTagsToPage(tagsToLoad);
+      this.webPageService.readdTagsToPage(tagsToLoad);
     }
 
     onSenseSelect (sense: ISense) {
@@ -70,6 +70,11 @@ module tagIt {
       this.senses = [];
     }
 
+    deleteTags () {
+      this.tagStorageService.deleteTags();
+      location.reload();
+    }
+
     removeMenu() {
       $('.tagit-body').children().unwrap();
       $('.tagit-menu').remove();

src/plugin-specific/popup.js

@@ -14,28 +14,18 @@ function injectScripts () {
   // Prevent immediate automatic bootstrapping
   chrome.tabs.executeScript(null, {
     code: 'window.name = "NG_DEFER_BOOTSTRAP!" + window.name;'
-  }, loadJquery);
+  }, loadPluginDeps);
 
-  function loadJquery () {
+  function loadPluginDeps () {
     chrome.tabs.executeScript(null, {
-      file: 'vendor/jquery/dist/jquery.js'
-    }, loadAngular);
+      file: 'vendor/vendor.js'
+    }, loadPlugin);
   }
 
-  function loadAngular () {
+  function loadPlugin () {
     chrome.tabs.executeScript(null, {
-      file: 'vendor/angular/angular.js'
-    }, loadAngularDependency);
-  }
-
-  function loadAngularDependency () {
-    chrome.tabs.executeScript(null, {
-      file: 'vendor/ngstorage/ngStorage.js'
-    }, loadMainCode);
-  }
-
-  function loadMainCode () {
-    chrome.tabs.executeScript(null, {file: 'bundle.js'}, loadCss);
+      file: 'bundle.js'
+    }, loadCss);
   }
 
   function loadCss () {

src/services/tagStorage.service.ts

@@ -18,6 +18,12 @@ module tagIt {
       this.$http = $http;
       this.$log = $log;
       this.$localStorage = $localStorage;
+      // this.deleteTags(); // reset tag storage
+    }
+
+    deleteTags () {
+      this.$log.debug('deleting all tags from localstorage');
+      delete this.$localStorage.tagStorage;
     }
 
     saveTag (tagToSave: ISenseTag) {

src/services/webpage.service.ts

@@ -5,6 +5,9 @@ module tagIt {
    * Takes care of figuring out what word
    * is selected.
    */
+
+  declare var rangy: any;
+
   export class WebPageService {
 
     $log : ng.ILogService;
@@ -63,8 +66,10 @@ module tagIt {
     addNewTagToPage = (sense : ISense) : ISenseTag => {
       this.$log.debug('addNewTagToPage');
       var range = this.currentSelectionRange;
-      var serializedRange = angular.toJson(range);
+      var serializedRange = rangy.serializeRange(
+        range, false, document.getElementById('tagit-body'));
       this.surroundRangeWithSpan(sense, range);
+
       return {
         userEmail: 'testEmail',
         sense: sense,
@@ -82,14 +87,14 @@ module tagIt {
 
     private readdTagToPage (tagToLoad: ISenseTag) {
       this.$log.debug('addNewTagToPage');
-      var savedRange : Range = angular.fromJson(tagToLoad.serializedSelectionRange);
+      var savedRange : Range = rangy.deserializeRange(
+        tagToLoad.serializedSelectionRange,
+        document.getElementById('tagit-body'));
       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)