diff --git a/src/index.interfaces.ts b/src/index.interfaces.ts index bcce7ed..5a3973b 100644 --- a/src/index.interfaces.ts +++ b/src/index.interfaces.ts @@ -32,5 +32,6 @@ module tagIt { sense: ISense; context: string; serializedSelectionRange: string; + deSerializedSelectionRange?: Range; } } diff --git a/src/menu/menu.controller.ts b/src/menu/menu.controller.ts index ecdb5a3..0897da3 100644 --- a/src/menu/menu.controller.ts +++ b/src/menu/menu.controller.ts @@ -62,7 +62,7 @@ module tagIt { // since the click did not originate from // an ng-click or the like we need to // do an explicit view refresh - this.$scope.$apply(); + this.$scope.$digest; } clearMenuVariables () { diff --git a/src/services/tagStorage.service.ts b/src/services/tagStorage.service.ts index 1bad22c..1562fcb 100644 --- a/src/services/tagStorage.service.ts +++ b/src/services/tagStorage.service.ts @@ -8,9 +8,9 @@ module tagIt { export class TagStorageService { - $http : ng.IHttpService; - $log : ng.ILogService; - $localStorage : any; + $http: ng.IHttpService; + $log: ng.ILogService; + $localStorage: any; /* @ngInject */ constructor($http: ng.IHttpService, $log: ng.ILogService, @@ -18,37 +18,42 @@ module tagIt { this.$http = $http; this.$log = $log; this.$localStorage = $localStorage; + + if (!this.$localStorage.tagStorage) { + this.$localStorage.tagStorage = []; + } + // this.deleteTags(); // reset tag storage } - deleteTagById (uuid: string) { + deleteTagById(uuid: string) { this.$log.debug('deleting tag from localstorage with uuid: ' + uuid); - var newList : ISenseTag[] = []; - angular.forEach(this.$localStorage.tagStorage, function(element) { - if(element.id !== uuid) { - this.push(element); + var newList: ISenseTag[] = []; + var tag: ISenseTag; + for (var i = 0; i < this.$localStorage.tagStorage.length; i++) { + tag = this.$localStorage.tagStorage[i]; + if (tag.id !== uuid) { + newList.push(tag); } - }, newList); + } this.$localStorage.tagStorage = newList; } - deleteTags () { + deleteTags() { this.$log.debug('deleting all tags from localstorage'); delete this.$localStorage.tagStorage; } - 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); + saveTag(tagToSave: ISenseTag) { + this.$log.debug('saving tag in localstorage:'); + this.$log.debug(tagToSave); + this.$localStorage.tagStorage.push(tagToSave); } - - loadTags () { + + 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 ee88fd2..ac9c09a 100644 --- a/src/services/webpage.service.ts +++ b/src/services/webpage.service.ts @@ -11,10 +11,10 @@ module tagIt { export class WebPageService { - $log : ng.ILogService; + $log: ng.ILogService; // when clicking the menu to select a synset // we need to remember what the currently selected word was - currentSelectionRange : any; + currentSelectionRange: any; tagStorageService: TagStorageService; /* @ngInject */ @@ -23,33 +23,33 @@ module tagIt { this.tagStorageService = TagStorageService; } - wireUpListener (callbackOnSelectFunc : (result : Object) => void, - callbackOnDeSelectFunc : () => void) { + wireUpListener(callbackOnSelectFunc: (result: Object) => void, + callbackOnDeSelectFunc: () => void) { var that = this; document.getElementById('tagit-body') - .addEventListener('click', (evt : any) => { - if (!document.hasFocus()) { - return true; - } - else if (wasRemoveTagButtonClicked(evt)) { - this.$log.debug('remove tag button was clicked'); - removeTagFromWebpage(evt); - this.tagStorageService.deleteTagById(evt.target.parentElement.id); - } - else if(this.findSelectedText()) { - this.currentSelectionRange = this.getClonedSelectionRange(); - callbackOnSelectFunc(joinLongWords(this.findSelectedText())); - } else { - callbackOnDeSelectFunc(); - } - }, false); - function joinLongWords (possiblyLongWord: string) { - return possiblyLongWord.replace(" ","_"); + .addEventListener('click', (evt: any) => { + if (!document.hasFocus()) { + return true; + } + else if (wasRemoveTagButtonClicked(evt)) { + this.$log.debug('remove tag button was clicked'); + removeTagFromWebpage(evt); + this.tagStorageService.deleteTagById(evt.target.parentElement.id); + } + else if (this.findSelectedText()) { + this.currentSelectionRange = this.getClonedSelectionRange(); + callbackOnSelectFunc(joinLongWords(this.findSelectedText())); + } else { + callbackOnDeSelectFunc(); + } + }, false); + function joinLongWords(possiblyLongWord: string) { + return possiblyLongWord.replace(" ", "_"); } - function wasRemoveTagButtonClicked (evt : any) { + function wasRemoveTagButtonClicked(evt: any) { return evt.target.className === 'js-tagit-remove-tag'; } - function removeTagFromWebpage (evt: any) { + function removeTagFromWebpage(evt: any) { var theOriginalTextNode = evt.target.previousSibling; var theSurroundingSpanElement = evt.target.parentElement; theSurroundingSpanElement.parentNode @@ -57,15 +57,15 @@ module tagIt { } } - getClonedSelectionRange () { + getClonedSelectionRange() { return this.findSelection().getRangeAt(0).cloneRange(); } - findSelection () { + findSelection() { return window.getSelection(); } - findSelectedText () { + findSelectedText() { var selectedText = this.findSelection().toString(); if (selectedText) { this.$log.debug('text that was selected: ' + selectedText); @@ -76,12 +76,12 @@ module tagIt { } // place spans around a tagged word. - addNewTagToPage = (sense : ISense) : ISenseTag => { + addNewTagToPage = (sense: ISense): ISenseTag => { this.$log.debug('addNewTagToPage'); var range = this.currentSelectionRange; var serializedRange = rangy.serializeRange( range, false, document.getElementById('tagit-body')); - var generatedUuid : string = uuid.v4(); + var generatedUuid: string = uuid.v4(); this.surroundRangeWithSpan(sense, range, generatedUuid); return { @@ -93,16 +93,52 @@ module tagIt { } }; - readdTagsToPage (tagsToLoad: ISenseTag[]) { + readdTagsToPage(tagsToLoad: ISenseTag[]) { this.$log.debug('readdTagsToPage()'); - angular.forEach(tagsToLoad, function (tag, key) { - this.readdTagToPage(tag); - }, this); + + //first deselect before we go to work + window.getSelection().removeAllRanges(); + + var tag: ISenseTag; + for (var i = 0; i < tagsToLoad.length; i++) { + tag = tagsToLoad[i]; + tag.deSerializedSelectionRange = deserializeRange(tag); + if (tag.deSerializedSelectionRange) { + this.surroundRangeWithSpan(tag.sense, + tag.deSerializedSelectionRange, tag.id); + } + } + + window.getSelection().removeAllRanges(); + + // deserializes previously saved selection + // and connects it to the active page + function deserializeRange(tagToLoad: ISenseTag) { + var savedRange: Range = undefined + var selection = window.getSelection(); + try { + savedRange = rangy.deserializeRange( + tagToLoad.serializedSelectionRange, + document.getElementById('tagit-body')); + } catch (e) { + var errorMsg = `Error in rangy.js: Was not able to deserialize range. + In other words: The page might have changed. Is not able + to determine where this tag should have been placed.` + console.log(errorMsg); + console.log(e); + return; + } + //select text on page + var deserializedRange = document.createRange(); + deserializedRange.setStart(savedRange.startContainer, savedRange.startOffset) + deserializedRange.setEnd(savedRange.endContainer, savedRange.endOffset); + return deserializedRange; + } } - private readdTagToPage (tagToLoad: ISenseTag) { + private readdTagToPage(tagToLoad: ISenseTag) { this.$log.debug('addNewTagToPage'); - var savedRange : Range = undefined + var savedRange: Range = undefined var selection = window.getSelection(); try { savedRange = rangy.deserializeRange( @@ -129,9 +165,9 @@ module tagIt { selection.getRangeAt(0).cloneRange(), tagToLoad.id); } - private surroundRangeWithSpan (sense: ISense, range: Range, uuid: string) { + private surroundRangeWithSpan(sense: ISense, range: Range, uuid: string) { // add span around content - var span : HTMLSpanElement = document.createElement('span'); + var span: HTMLSpanElement = document.createElement('span'); span.id = uuid; span.title = sense.explanation; span.className = 'tagit-tag'; @@ -144,8 +180,8 @@ module tagIt { span.appendChild(btn); //unselect everything - window.getSelection() - .removeAllRanges(); + // window.getSelection() + // .removeAllRanges(); } }