diff --git a/Gulpfile.js b/Gulpfile.js index 23698ea..7bec75f 100644 --- a/Gulpfile.js +++ b/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')); }); diff --git a/package.json b/package.json index 05a3dde..6c92714 100644 --- a/package.json +++ b/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" } } diff --git a/src/index.interfaces.ts b/src/index.interfaces.ts index c97a561..5a3ad69 100644 --- a/src/index.interfaces.ts +++ b/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; } } - diff --git a/src/index.ts b/src/index.ts index 1fc267f..af15a20 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,7 +4,7 @@ /// /// /// -/// +/// 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) { diff --git a/src/load-menu-for-web-testing.js b/src/load-menu-for-web-testing.js index d38ed0b..98a85d6 100644 --- a/src/load-menu-for-web-testing.js +++ b/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 () { diff --git a/src/menu/menu.controller.ts b/src/menu/menu.controller.ts index 82671aa..0d5d40a 100644 --- a/src/menu/menu.controller.ts +++ b/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(); } diff --git a/src/services/backend.service.ts b/src/services/backend.service.ts index 94ed294..02df4c3 100644 --- a/src/services/backend.service.ts +++ b/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); diff --git a/src/services/tag.service.ts b/src/services/tag.service.ts deleted file mode 100644 index b096570..0000000 --- a/src/services/tag.service.ts +++ /dev/null @@ -1,34 +0,0 @@ -/// - -'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'); - - } - } -} \ No newline at end of file diff --git a/src/services/tagStorage.service.ts b/src/services/tagStorage.service.ts new file mode 100644 index 0000000..7c61335 --- /dev/null +++ b/src/services/tagStorage.service.ts @@ -0,0 +1,37 @@ +/// + +'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; + } + } +} \ No newline at end of file diff --git a/src/services/webpage.service.ts b/src/services/webpage.service.ts index 9f6104f..4d7513d 100644 --- a/src/services/webpage.service.ts +++ b/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'); } + } }