code is now able to add and remove tags properly
This commit is contained in:
parent
a69d801aaf
commit
5859b7ba1a
7 changed files with 12413 additions and 75 deletions
|
@ -68,12 +68,12 @@ gulp.task('dist-node-modules', function () {
|
|||
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/node-uuid/uuid.js',
|
||||
'node_modules/rangy/lib/rangy-core.js',
|
||||
'node_modules/rangy/lib/rangy-serializer.js',
|
||||
'node_modules/rangy/lib/rangy-selectionsaverestore.js'
|
||||
'node_modules/rangy/lib/rangy-selectionsaverestore.js',
|
||||
'src/lodash.js'
|
||||
], {base: 'node_modules'})
|
||||
.pipe($.sourcemaps.init())
|
||||
.pipe($.concat('vendor.js'))
|
||||
|
|
|
@ -32,6 +32,6 @@ module tagIt {
|
|||
sense: ISense;
|
||||
context: string;
|
||||
serializedSelectionRange: string;
|
||||
deSerializedSelectionRange?: Range;
|
||||
deserializedRange?: Range;
|
||||
}
|
||||
}
|
||||
|
|
12352
src/lodash.js
Normal file
12352
src/lodash.js
Normal file
File diff suppressed because it is too large
Load diff
|
@ -6,15 +6,15 @@ module tagIt {
|
|||
export class MenuCtrl {
|
||||
|
||||
selectedWord = "";
|
||||
senses : Object[];
|
||||
backendService : BackendService;
|
||||
webPageService : WebPageService;
|
||||
tagStorageService : TagStorageService;
|
||||
$log : ng.ILogService;
|
||||
senses: Object[];
|
||||
backendService: BackendService;
|
||||
webPageService: WebPageService;
|
||||
tagStorageService: TagStorageService;
|
||||
$log: ng.ILogService;
|
||||
$scope: ng.IScope;
|
||||
|
||||
/* @ngInject */
|
||||
constructor ($scope: IVMScope, $log: angular.ILogService,
|
||||
constructor($scope: IVMScope, $log: angular.ILogService,
|
||||
BackendService: BackendService,
|
||||
WebPageService: WebPageService,
|
||||
TagStorageService: TagStorageService) {
|
||||
|
@ -40,29 +40,29 @@ module tagIt {
|
|||
this.webPageService.readdTagsToPage(tagsToLoad);
|
||||
}
|
||||
|
||||
onSenseSelect (sense: ISense) {
|
||||
onSenseSelect(sense: ISense) {
|
||||
//remove all tags so that new tag range is serialized
|
||||
//based on a document without any highlights
|
||||
this.webPageService.removeAllTagsFromPage();
|
||||
|
||||
//initialize and save the new tag
|
||||
var senseTag = this.webPageService.initializeNewTag(sense);
|
||||
this.tagStorageService.saveTag(senseTag);
|
||||
this.backendService.sendTaggedDataToServer(senseTag);
|
||||
this.webPageService.removeAllTagsFromPage(() => {
|
||||
//initialize and save the new tag
|
||||
var senseTag = this.webPageService.initializeNewTag(sense);
|
||||
this.tagStorageService.saveTag(senseTag);
|
||||
this.backendService.sendTaggedDataToServer(senseTag);
|
||||
|
||||
//re-add tags, with new tag. Clear menu options.
|
||||
this.webPageService.readdTagsToPage(
|
||||
this.tagStorageService.loadTags()
|
||||
);
|
||||
this.clearMenuVariables();
|
||||
//re-add tags, with new tag. Clear menu options.
|
||||
this.webPageService.readdTagsToPage(
|
||||
this.tagStorageService.loadTags()
|
||||
);
|
||||
this.clearMenuVariables();
|
||||
});
|
||||
}
|
||||
|
||||
onWordSelected = (newWord : string) => {
|
||||
onWordSelected = (newWord: string) => {
|
||||
this.selectedWord = newWord;
|
||||
this.backendService.callServer(newWord)
|
||||
.then((synsets : Object) => {
|
||||
.then((synsets: Object) => {
|
||||
this.$log.debug(synsets);
|
||||
this.senses = this.backendService.processSynsets(<ISynset> synsets);
|
||||
this.senses = this.backendService.processSynsets(<ISynset>synsets);
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -75,12 +75,12 @@ module tagIt {
|
|||
this.$scope.$digest;
|
||||
}
|
||||
|
||||
clearMenuVariables () {
|
||||
clearMenuVariables() {
|
||||
this.selectedWord = "";
|
||||
this.senses = [];
|
||||
}
|
||||
|
||||
deleteTags () {
|
||||
deleteTags() {
|
||||
this.tagStorageService.deleteTags();
|
||||
location.reload();
|
||||
}
|
||||
|
|
0
src/plugin-specific/background.js
Normal file
0
src/plugin-specific/background.js
Normal file
|
@ -3,7 +3,6 @@
|
|||
<head>
|
||||
<title>Popup menu for TagIt plugin</title>
|
||||
|
||||
<script src="vendor/lodash/index.js"></script>
|
||||
<script src="popup.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css">
|
||||
|
|
|
@ -8,6 +8,7 @@ module tagIt {
|
|||
|
||||
declare var rangy: any;
|
||||
declare var uuid: any;
|
||||
declare var _: any;
|
||||
|
||||
export class WebPageService {
|
||||
|
||||
|
@ -76,18 +77,14 @@ module tagIt {
|
|||
}
|
||||
}
|
||||
|
||||
// place spans around a tagged word.
|
||||
initializeNewTag = (sense: ISense): ISenseTag => {
|
||||
this.$log.debug('addNewTagToPage');
|
||||
rangy.restoreSelection(this.savedSelection);
|
||||
rangy.removeMarkers(this.savedSelection);
|
||||
var range = rangy.getSelection().getRangeAt(0);
|
||||
var range: Range = rangy.getSelection().getRangeAt(0);
|
||||
var serializedRange = rangy.serializeRange(
|
||||
range, true, document.getElementById('tagit-body'));
|
||||
var generatedUuid: string = uuid.v4();
|
||||
|
||||
// this.surroundRangeWithSpan(sense, range, generatedUuid);
|
||||
|
||||
return {
|
||||
id: generatedUuid,
|
||||
userEmail: 'testEmail',
|
||||
|
@ -96,19 +93,19 @@ module tagIt {
|
|||
serializedSelectionRange: serializedRange
|
||||
}
|
||||
};
|
||||
|
||||
removeAllTagsFromPage() {
|
||||
// find all tags
|
||||
var elements = document.getElementsByClassName('tagit-tag');
|
||||
// remove them from page
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var tagElement = elements[i];
|
||||
var tagElementParentNode = tagElement.parentNode;
|
||||
tagElementParentNode.replaceChild(
|
||||
tagElement.previousSibling,
|
||||
tagElement);
|
||||
tagElementParentNode.normalize();
|
||||
|
||||
removeAllTagsFromPage(callback: () => void) {
|
||||
//loop that will keep asking for spans to remove
|
||||
//until they are all gone.
|
||||
while (document.getElementsByClassName('tagit-tag').length > 0) {
|
||||
var spanElement = document.getElementsByClassName('tagit-tag')[0];
|
||||
var spanElementParent = spanElement.parentNode;
|
||||
spanElementParent.replaceChild(
|
||||
spanElement.firstChild,
|
||||
spanElement);
|
||||
spanElementParent.normalize();
|
||||
}
|
||||
callback();
|
||||
}
|
||||
|
||||
readdTagsToPage(tagsToLoad: ISenseTag[]) {
|
||||
|
@ -116,34 +113,33 @@ module tagIt {
|
|||
|
||||
//first deselect before we go to work
|
||||
window.getSelection().removeAllRanges();
|
||||
|
||||
var selection = rangy.getSelection();
|
||||
|
||||
for (var i = 0; i < tagsToLoad.length; i++) {
|
||||
var tag = tagsToLoad[i];
|
||||
tag.deSerializedSelectionRange = deserializeRange(tag);
|
||||
}
|
||||
|
||||
//deserialize ranges
|
||||
_.map(tagsToLoad, deserializeRange);
|
||||
|
||||
this.$log.debug('finished deserializing tags');
|
||||
|
||||
for (var i = 0; i < tagsToLoad.length; i++) {
|
||||
var tag = tagsToLoad[i];
|
||||
if (tag.deSerializedSelectionRange) {
|
||||
this.surroundRangeWithSpan(tag.sense,
|
||||
tag.deSerializedSelectionRange, tag.id);
|
||||
}
|
||||
}
|
||||
|
||||
//sort tags by ascending so that they can be properly inserted
|
||||
tagsToLoad = _.sortBy(tagsToLoad, (tag: ISenseTag) => {
|
||||
return tag.deserializedRange.startOffset;
|
||||
});
|
||||
|
||||
this.$log.debug('finished sorting tags');
|
||||
|
||||
_.map(tagsToLoad, (tag: ISenseTag) => {
|
||||
if (tag.deserializedRange) {
|
||||
this.surroundRangeWithSpan(tag.sense,
|
||||
tag.deserializedRange, tag.id);
|
||||
}
|
||||
});
|
||||
|
||||
this.$log.debug('finished adding tags to page');
|
||||
|
||||
window.getSelection().removeAllRanges();
|
||||
|
||||
// deserializes previously saved selection
|
||||
// and connects it to the active page
|
||||
function deserializeRange(tagToLoad: ISenseTag) {
|
||||
var savedRange: Range = undefined
|
||||
try {
|
||||
savedRange = rangy.deserializeRange(
|
||||
tagToLoad.deserializedRange = rangy.deserializeRange(
|
||||
tagToLoad.serializedSelectionRange,
|
||||
document.getElementById('tagit-body'));
|
||||
} catch (e) {
|
||||
|
@ -151,17 +147,12 @@ module tagIt {
|
|||
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("Couldn't load: " + tagToLoad.sense.word);
|
||||
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 updateSavedSelection() {
|
||||
if (this.savedSelection) {
|
||||
rangy.removeMarkers(this.savedSelection);
|
||||
|
@ -175,6 +166,7 @@ module tagIt {
|
|||
span.id = uuid;
|
||||
span.title = sense.explanation;
|
||||
span.className = 'tagit-tag';
|
||||
|
||||
range.surroundContents(span);
|
||||
|
||||
// add a button for removing the tag.
|
||||
|
@ -182,11 +174,6 @@ module tagIt {
|
|||
btn.className = 'js-tagit-remove-tag';
|
||||
btn.appendChild(document.createTextNode("X"));
|
||||
span.appendChild(btn);
|
||||
|
||||
//unselect everything
|
||||
// window.getSelection()
|
||||
// .removeAllRanges();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue