From 40eaa0e86a31f0e1efe46bd1fa5539af88377d53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nils=20Norman=20Hauk=C3=A5s?= Date: Sun, 15 Nov 2015 00:55:57 +0100 Subject: [PATCH] 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 | 24 ++++++++++++++++-------- README.md | 2 +- src/load-menu-for-web-testing.js | 23 ++++++----------------- src/menu/menu.controller.ts | 11 ++++++++--- src/plugin-specific/popup.js | 24 +++++++----------------- src/services/tagStorage.service.ts | 6 ++++++ src/services/webpage.service.ts | 13 +++++++++---- 7 files changed, 53 insertions(+), 50 deletions(-) diff --git a/Gulpfile.js b/Gulpfile.js index 7bec75f..aa0c31a 100644 --- a/Gulpfile.js +++ b/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 () { diff --git a/README.md b/README.md index 6712ef8..eaac508 100644 --- a/README.md +++ b/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 diff --git a/src/load-menu-for-web-testing.js b/src/load-menu-for-web-testing.js index 98a85d6..2ce73fc 100644 --- a/src/load-menu-for-web-testing.js +++ b/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'); diff --git a/src/menu/menu.controller.ts b/src/menu/menu.controller.ts index 0d5d40a..ecdb5a3 100644 --- a/src/menu/menu.controller.ts +++ b/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(); diff --git a/src/plugin-specific/popup.js b/src/plugin-specific/popup.js index a7eb909..a0f3b90 100644 --- a/src/plugin-specific/popup.js +++ b/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 () { diff --git a/src/services/tagStorage.service.ts b/src/services/tagStorage.service.ts index 7c61335..e412c90 100644 --- a/src/services/tagStorage.service.ts +++ b/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) { diff --git a/src/services/webpage.service.ts b/src/services/webpage.service.ts index 4d7513d..af61f46 100644 --- a/src/services/webpage.service.ts +++ b/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)