From 2d957ea30a6d5957f4b9a3a2ffabae3838e5f227 Mon Sep 17 00:00:00 2001 From: Jumana Date: Thu, 4 Feb 2021 01:47:42 -0500 Subject: [PATCH 01/36] inti innotation --- package.json | 6 ++-- src/components/highlights/NbHighlight.vue | 33 ++++++++++++++++++++++ src/components/highlights/NbHighlights.vue | 19 +++++++++++++ 3 files changed, 56 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 5e97467..ca5ce82 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "jsdoc": "^3.6.2", "jsdoc-vuejs": "^3.0.0", "style-loader": "^0.23.1", - "vue-loader": "^15.7.0", + "vue-loader": "^15.9.6", "vue-style-loader": "^4.1.2", "vue-template-compiler": "^2.6.10", "webpack": "^4.43.0", @@ -43,7 +43,9 @@ "quill-mention": "^2.1.1", "v-tooltip": "^2.0.1", "vue": "^2.6.10", + "vue-cli": "^2.9.6", "vue-jwt-decode": "^0.1.0", - "vue-quill": "^1.5.1" + "vue-quill": "^1.5.1", + "webpack-dev-server": "^3.11.2" } } diff --git a/src/components/highlights/NbHighlight.vue b/src/components/highlights/NbHighlight.vue index d6af60e..b718043 100644 --- a/src/components/highlights/NbHighlight.vue +++ b/src/components/highlights/NbHighlight.vue @@ -80,6 +80,39 @@ export default { default: true } }, +// created: function() { +// const commentsBlock = document.createElement("div") +// const newDiv = document.createElement("div") +// newDiv.innerText=(`${this.thread.text} - ${this.thread.authorName}`) +// const commonAncestor = this.thread.range.commonAncestor +// const parent = commonAncestor.parentNode +// const wrapperDiv = document.createElement("div") +// parent.replaceChild(wrapperDiv, commonAncestor) +// wrapperDiv.appendChild(commentsBlock) +// wrapperDiv.appendChild(commonAncestor) +// wrapperDiv.style.display="flex" +// // wrapperDiv.className = "wrapperDiv" +// // wrapperDiv.style.position="relative"; +// commentsBlock.style.display="block"; +// commonAncestor.style.display="inline" +// commonAncestor.style.position="relative" + +// console.log(this.thread.range.commonAncestor.parentNode); + +// // wrapperDiv.append(commonAncestor) + +// // this.thread.range.commonAncestor.insertAdjacentElement('afterend', newDiv) +// // beforebegin +// // console.log("created FUNCTION"); +// // console.log(this.thread); +// // console.log(this.thread.text); +// // console.log(this.thread.authorName); +// //console.log(this.thread.range.commonAncestor); +// // console.log(this.thread.range.commonAncestor.nextElementSibling); +// // document.body.insertBefore(newDiv, this.thread.range.commonAncestor) +// // console.log(this.thread); + +// }, watch: { /** * When the currently selected thread changes, check if the highlight is diff --git a/src/components/highlights/NbHighlights.vue b/src/components/highlights/NbHighlights.vue index aaad653..94da697 100644 --- a/src/components/highlights/NbHighlights.vue +++ b/src/components/highlights/NbHighlights.vue @@ -60,6 +60,25 @@ export default { default: true } }, + + watch: { + threads: function(val, oldVal) { + console.log('watching...'); + console.log(this.threads); + const commonAncestors = new Set() + for (const t of this.threads) { + console.log(t); + commonAncestors.add(t.range.commonAncestor) + } + + console.log(commonAncestors); + + commonAncestors.forEach(ancestor => { + console.log(ancestor); + }) + + } + }, mounted: function () { eventsProxyMouse(document.body, this.$el) }, From 98ea8e871f3c95384435586ae63eb84f603af461 Mon Sep 17 00:00:00 2001 From: Jumana Date: Sat, 13 Feb 2021 22:10:22 -0500 Subject: [PATCH 02/36] dev mode --- package.json | 3 +- src/components/highlights/NbHighlight.vue | 58 +++++++++++------------ 2 files changed, 31 insertions(+), 30 deletions(-) diff --git a/package.json b/package.json index ca5ce82..eb71af5 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "start": "node app.js" + "start": "node app.js", + "dev": "webpack --watch --progress" }, "author": "", "license": "ISC", diff --git a/src/components/highlights/NbHighlight.vue b/src/components/highlights/NbHighlight.vue index b718043..d1ea1e8 100644 --- a/src/components/highlights/NbHighlight.vue +++ b/src/components/highlights/NbHighlight.vue @@ -80,39 +80,39 @@ export default { default: true } }, -// created: function() { -// const commentsBlock = document.createElement("div") -// const newDiv = document.createElement("div") -// newDiv.innerText=(`${this.thread.text} - ${this.thread.authorName}`) -// const commonAncestor = this.thread.range.commonAncestor -// const parent = commonAncestor.parentNode -// const wrapperDiv = document.createElement("div") -// parent.replaceChild(wrapperDiv, commonAncestor) -// wrapperDiv.appendChild(commentsBlock) -// wrapperDiv.appendChild(commonAncestor) -// wrapperDiv.style.display="flex" -// // wrapperDiv.className = "wrapperDiv" -// // wrapperDiv.style.position="relative"; -// commentsBlock.style.display="block"; -// commonAncestor.style.display="inline" -// commonAncestor.style.position="relative" + created: function() { + const commentsBlock = document.createElement("div") + const newDiv = document.createElement("div") + newDiv.innerText=(`${this.thread.text} - ${this.thread.authorName}`) + const commonAncestor = this.thread.range.commonAncestor + const parent = commonAncestor.parentNode + const wrapperDiv = document.createElement("div") + parent.replaceChild(wrapperDiv, commonAncestor) + wrapperDiv.appendChild(commentsBlock) + wrapperDiv.appendChild(commonAncestor) + wrapperDiv.style.display="flex" + // wrapperDiv.className = "wrapperDiv" + // wrapperDiv.style.position="relative"; + commentsBlock.style.display="block"; + commonAncestor.style.display="inline" + commonAncestor.style.position="relative" -// console.log(this.thread.range.commonAncestor.parentNode); + console.log(this.thread.range.commonAncestor.parentNode); -// // wrapperDiv.append(commonAncestor) + // wrapperDiv.append(commonAncestor) -// // this.thread.range.commonAncestor.insertAdjacentElement('afterend', newDiv) -// // beforebegin -// // console.log("created FUNCTION"); -// // console.log(this.thread); -// // console.log(this.thread.text); -// // console.log(this.thread.authorName); -// //console.log(this.thread.range.commonAncestor); -// // console.log(this.thread.range.commonAncestor.nextElementSibling); -// // document.body.insertBefore(newDiv, this.thread.range.commonAncestor) -// // console.log(this.thread); + // this.thread.range.commonAncestor.insertAdjacentElement('afterend', newDiv) + // beforebegin + // console.log("created FUNCTION"); + // console.log(this.thread); + // console.log(this.thread.text); + // console.log(this.thread.authorName); + //console.log(this.thread.range.commonAncestor); + // console.log(this.thread.range.commonAncestor.nextElementSibling); + // document.body.insertBefore(newDiv, this.thread.range.commonAncestor) + // console.log(this.thread); -// }, + }, watch: { /** * When the currently selected thread changes, check if the highlight is From af574746934217aa4e7e180574925eea263b0e96 Mon Sep 17 00:00:00 2001 From: Jumana Date: Sun, 14 Feb 2021 00:29:41 -0500 Subject: [PATCH 03/36] created new components --- public/style/plugin.css | 4 + src/app.js | 5 ++ src/components/highlights/NbHighlight.vue | 74 +++++++++++-------- src/components/highlights/NbHighlights.vue | 26 +++---- .../innotations/NbInnotationBellow.vue | 61 +++++++++++++++ src/components/innotations/NbInnotations.vue | 25 +++++++ 6 files changed, 153 insertions(+), 42 deletions(-) create mode 100644 src/components/innotations/NbInnotationBellow.vue create mode 100644 src/components/innotations/NbInnotations.vue diff --git a/public/style/plugin.css b/public/style/plugin.css index e6afbc2..163d511 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -720,4 +720,8 @@ .filter-options .hashtags span { font-size: 11px; +} +.nb-innotation { + border: 2px limegreen solid; + margin: 5px; } \ No newline at end of file diff --git a/src/app.js b/src/app.js index 4c0a1c6..0e16343 100644 --- a/src/app.js +++ b/src/app.js @@ -11,6 +11,7 @@ import { createNbRange, deserializeNbRange } from './models/nbrange.js' import NbComment from './models/nbcomment.js' import { isNodePartOf } from './utils/dom-util.js' +import NbInnotations from './components/innotations/NbInnotations.vue' import NbHighlights from './components/highlights/NbHighlights.vue' import NbSidebar from './components/NbSidebar.vue' import NbNoAccess from './components/NbNoAccess.vue' @@ -125,6 +126,9 @@ function embedNbApp () {
+ + { - console.log(ancestor); - }) + // commonAncestors.forEach(ancestor => { + // console.log(ancestor); + // }) - } + // } }, mounted: function () { eventsProxyMouse(document.body, this.$el) diff --git a/src/components/innotations/NbInnotationBellow.vue b/src/components/innotations/NbInnotationBellow.vue new file mode 100644 index 0000000..0a13d14 --- /dev/null +++ b/src/components/innotations/NbInnotationBellow.vue @@ -0,0 +1,61 @@ + + + \ No newline at end of file diff --git a/src/components/innotations/NbInnotations.vue b/src/components/innotations/NbInnotations.vue new file mode 100644 index 0000000..c633e57 --- /dev/null +++ b/src/components/innotations/NbInnotations.vue @@ -0,0 +1,25 @@ + + + \ No newline at end of file From 79d8f1bff1917362bc5ff91802aefbda342e5b9f Mon Sep 17 00:00:00 2001 From: Jumana Date: Wed, 17 Feb 2021 00:11:51 -0500 Subject: [PATCH 04/36] accomodate DOM and xpath --- public/style/plugin.css | 22 ++++- src/components/highlights/NbHighlight.vue | 49 ----------- src/components/innotations/NbInnotation.vue | 87 +++++++++++++++++++ .../innotations/NbInnotationAbove.vue | 61 +++++++++++++ .../innotations/NbInnotationAside.vue | 36 ++++++++ .../innotations/NbInnotationPosition.js | 6 ++ src/components/innotations/NbInnotations.vue | 26 +++++- 7 files changed, 234 insertions(+), 53 deletions(-) create mode 100644 src/components/innotations/NbInnotation.vue create mode 100644 src/components/innotations/NbInnotationAbove.vue create mode 100644 src/components/innotations/NbInnotationAside.vue create mode 100644 src/components/innotations/NbInnotationPosition.js diff --git a/public/style/plugin.css b/public/style/plugin.css index 163d511..0984a8a 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -721,7 +721,25 @@ .filter-options .hashtags span { font-size: 11px; } -.nb-innotation { +nb-innotation { border: 2px limegreen solid; - margin: 5px; + margin: 10px; + padding: 10px; + flex: 1; +} +.nb-innotation-wrapper { + /* plan to make up and down part of this wrapper */ +} + +.nb-innotation-wrapper.aside { + display: flex; + flex-wrap: nowrap; + align-items: baseline; +} + +.nb-innotation-wrapper.aside.right{ + flex-direction: row-reverse; +} +.nb-innotation-wrapper .nb-common-ancestor { + flex: 2; } \ No newline at end of file diff --git a/src/components/highlights/NbHighlight.vue b/src/components/highlights/NbHighlight.vue index e7c7ee7..d6af60e 100644 --- a/src/components/highlights/NbHighlight.vue +++ b/src/components/highlights/NbHighlight.vue @@ -80,55 +80,6 @@ export default { default: true } }, -// created: function() { -// console.log("=======NEW THREAD==========="); -// console.log(this.thread); -// console.log(this.thread.text); -// console.log(this.thread.authorName); -// console.log("COMMON ANCESTOR"); -// console.log(this.thread.range.commonAncestor); -// console.log("PARENT OF COMMON ANCERSTOR"); -// console.log(this.thread.range.commonAncestor.parentNode); - -// //innotation bellow -// const newDiv = document.createElement("div") -// newDiv.className = "nb-innotation" -// newDiv.innerText=(`${this.thread.text} - ${this.thread.authorName}`) -// this.thread.range.commonAncestor.insertAdjacentElement('afterend', newDiv) - - -// // //innotation before -// // const newDiv = document.createElement("div") -// // newDiv.className = "nb-innotation" -// // newDiv.innerText=(`${this.thread.text} - ${this.thread.authorName}`) -// // this.thread.range.commonAncestor.insertAdjacentElement('beforebegin', newDiv) - - -// // this is for the insert right and left -// // const commentsBlock = document.createElement("div") -// // const parent = commonAncestor.parentNode -// // const wrapperDiv = document.createElement("div") -// // parent.replaceChild(wrapperDiv, commonAncestor) -// // wrapperDiv.appendChild(commonAncestor) -// // wrapperDiv.appendChild(commentsBlock) -// // wrapperDiv.style.display="flex" -// // // wrapperDiv.className = "wrapperDiv" -// // // wrapperDiv.style.position="relative"; -// // commentsBlock.style.display="block"; -// // commonAncestor.style.display="inline" -// // commonAncestor.style.position="relative" - -// // wrapperDiv.append(commonAncestor) - -// // this.thread.range.commonAncestor.insertAdjacentElement('afterend', newDiv) -// // beforebegin -// // console.log("created FUNCTION"); - -// // console.log(this.thread.range.commonAncestor.nextElementSibling); -// // document.body.insertBefore(newDiv, this.thread.range.commonAncestor) -// // console.log(this.thread); - -// }, watch: { /** * When the currently selected thread changes, check if the highlight is diff --git a/src/components/innotations/NbInnotation.vue b/src/components/innotations/NbInnotation.vue new file mode 100644 index 0000000..8f7c715 --- /dev/null +++ b/src/components/innotations/NbInnotation.vue @@ -0,0 +1,87 @@ + + + \ No newline at end of file diff --git a/src/components/innotations/NbInnotationAbove.vue b/src/components/innotations/NbInnotationAbove.vue new file mode 100644 index 0000000..6e32b7e --- /dev/null +++ b/src/components/innotations/NbInnotationAbove.vue @@ -0,0 +1,61 @@ + + + \ No newline at end of file diff --git a/src/components/innotations/NbInnotationAside.vue b/src/components/innotations/NbInnotationAside.vue new file mode 100644 index 0000000..1823299 --- /dev/null +++ b/src/components/innotations/NbInnotationAside.vue @@ -0,0 +1,36 @@ + + + \ No newline at end of file diff --git a/src/components/innotations/NbInnotationPosition.js b/src/components/innotations/NbInnotationPosition.js new file mode 100644 index 0000000..b7f6fc1 --- /dev/null +++ b/src/components/innotations/NbInnotationPosition.js @@ -0,0 +1,6 @@ +export default { + TOP: 'top', + BOTTOM: 'bottom', + LEFT: 'left', + RIGHT: 'right' +} \ No newline at end of file diff --git a/src/components/innotations/NbInnotations.vue b/src/components/innotations/NbInnotations.vue index c633e57..05d8cce 100644 --- a/src/components/innotations/NbInnotations.vue +++ b/src/components/innotations/NbInnotations.vue @@ -1,15 +1,34 @@ \ No newline at end of file From e66395833a3b19163c08fa9944335b1fece0da45 Mon Sep 17 00:00:00 2001 From: Jumana Date: Fri, 26 Feb 2021 01:31:56 -0500 Subject: [PATCH 05/36] block and inline innotation --- public/style/plugin.css | 88 +++++++++++++- src/components/innotations/NbInnotation.vue | 87 -------------- .../innotations/NbInnotationBlock.vue | 111 ++++++++++++++++++ .../innotations/NbInnotationInline.vue | 77 ++++++++++++ src/components/innotations/NbInnotations.vue | 42 +++---- 5 files changed, 288 insertions(+), 117 deletions(-) delete mode 100644 src/components/innotations/NbInnotation.vue create mode 100644 src/components/innotations/NbInnotationBlock.vue create mode 100644 src/components/innotations/NbInnotationInline.vue diff --git a/public/style/plugin.css b/public/style/plugin.css index 0984a8a..1de3e0d 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -1,3 +1,5 @@ +@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap'); + #nb-app { position: absolute; top: 0; @@ -722,11 +724,93 @@ font-size: 11px; } nb-innotation { - border: 2px limegreen solid; + border: 2px #20a720 solid; + border-radius: 15px; + color: white; margin: 10px; - padding: 10px; flex: 1; + padding: 20px; + background: limegreen; + align-items: center; + display: flex; + justify-content: center; + text-align: center; +} + +nb-innotation-inline { + background: white; + margin: 0 5px; + font-family: 'Handlee', cursive; + color: blue; + cursor: pointer; + border: 3px white solid; +} + +nb-innotation-collection { + display: flex; +} + +nb-innotation-collection.nb-top, +nb-innotation-collection.nb-bottom { + flex-direction: row; + width: 100%; +} + +nb-innotation-collection.nb-right, +nb-innotation-collection.nb-left { + flex-direction: column; + /* height: 100%; */ +} + +nb-innotation-collection.nb-top { + height: 180px; + position: absolute; + top: 0; + left: 0; +} + +nb-innotation-collection.nb-bottom { + height: 180px; + position: absolute; + bottom: 0; + left: 0; } + +nb-innotation-collection.nb-right { + width: 180px; + position: absolute; + top: 0; + right: 0; +} + +nb-innotation-collection.nb-left { + width: 180px; + position: absolute; + top: 0; + left: 0; +} + +.nb-innotation-ancestor { + position: relative; +} + +.nb-innotation-ancestor.nb-top { + padding-top: 190px; +} + +.nb-innotation-ancestor.nb-bottom { + padding-bottom: 190px; +} + +.nb-innotation-ancestor.nb-right { + padding-right: 190px; +} + +.nb-innotation-ancestor.nb-left { + padding-left: 190px; +} + + .nb-innotation-wrapper { /* plan to make up and down part of this wrapper */ } diff --git a/src/components/innotations/NbInnotation.vue b/src/components/innotations/NbInnotation.vue deleted file mode 100644 index 8f7c715..0000000 --- a/src/components/innotations/NbInnotation.vue +++ /dev/null @@ -1,87 +0,0 @@ - - - \ No newline at end of file diff --git a/src/components/innotations/NbInnotationBlock.vue b/src/components/innotations/NbInnotationBlock.vue new file mode 100644 index 0000000..f16a8f3 --- /dev/null +++ b/src/components/innotations/NbInnotationBlock.vue @@ -0,0 +1,111 @@ + + + \ No newline at end of file diff --git a/src/components/innotations/NbInnotationInline.vue b/src/components/innotations/NbInnotationInline.vue new file mode 100644 index 0000000..334f1a4 --- /dev/null +++ b/src/components/innotations/NbInnotationInline.vue @@ -0,0 +1,77 @@ + + + \ No newline at end of file diff --git a/src/components/innotations/NbInnotations.vue b/src/components/innotations/NbInnotations.vue index 05d8cce..ce89a8c 100644 --- a/src/components/innotations/NbInnotations.vue +++ b/src/components/innotations/NbInnotations.vue @@ -1,33 +1,21 @@ \ No newline at end of file From d86538bdd9271b6bdc36cc28d641b47e2e4b3b9b Mon Sep 17 00:00:00 2001 From: Jumana Date: Fri, 26 Feb 2021 16:12:01 -0500 Subject: [PATCH 06/36] init controller --- public/style/plugin.css | 18 ++ .../innotations/NbInnotationBlock.vue | 194 +++++++++++++----- .../innotations/NbInnotationInline.vue | 107 +++++++--- src/components/innotations/NbInnotations.vue | 59 +++++- 4 files changed, 282 insertions(+), 96 deletions(-) diff --git a/public/style/plugin.css b/public/style/plugin.css index 1de3e0d..21bf9f8 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -810,6 +810,24 @@ nb-innotation-collection.nb-left { padding-left: 190px; } +nb-innotation-controller { + position: fixed; + display: flex; + height: 30px; + width: 171px; + background: #4a2270; + z-index: 99999999; + bottom: 0; + left: 41px; + color: white; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + padding: 10px; + box-shadow: 0px -4px 11px 0px rgb(143 141 143 / 72%); + font-size: 30px; + justify-content: center; + vertical-align: middle; +} .nb-innotation-wrapper { /* plan to make up and down part of this wrapper */ diff --git a/src/components/innotations/NbInnotationBlock.vue b/src/components/innotations/NbInnotationBlock.vue index f16a8f3..9e2da72 100644 --- a/src/components/innotations/NbInnotationBlock.vue +++ b/src/components/innotations/NbInnotationBlock.vue @@ -1,5 +1,4 @@ \ No newline at end of file From 78089963fc1b4dc02a69fa4866bbafcfd2c6b932 Mon Sep 17 00:00:00 2001 From: Jumana Almahmoud Date: Wed, 17 Mar 2021 16:34:37 -0400 Subject: [PATCH 07/36] Added innotations control and connect to backend --- public/style/plugin.css | 51 +++- src/app.js | 17 +- .../innotations/NbInnotationAbove.vue | 61 ----- .../innotations/NbInnotationAside.vue | 36 --- .../innotations/NbInnotationBellow.vue | 61 ----- .../innotations/NbInnotationBlock.vue | 243 +++++------------- .../innotations/NbInnotationControl.vue | 50 ++++ .../innotations/NbInnotationInline.vue | 104 ++------ src/components/innotations/NbInnotations.vue | 75 ++---- src/components/list/ListRow.vue | 4 + src/components/thread/ThreadView.vue | 8 +- src/models/nbcomment.js | 10 + 12 files changed, 238 insertions(+), 482 deletions(-) delete mode 100644 src/components/innotations/NbInnotationAbove.vue delete mode 100644 src/components/innotations/NbInnotationAside.vue delete mode 100644 src/components/innotations/NbInnotationBellow.vue create mode 100644 src/components/innotations/NbInnotationControl.vue diff --git a/public/style/plugin.css b/public/style/plugin.css index 21bf9f8..e2108e0 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -359,6 +359,43 @@ height: 16px; } +#nb-app .nb-sidebar .list-view .list-row .flags .icon-wrapper.inno { + background-color: #4a2270; + color: #fff; + font-size: 9px; + font-family: monospace; +} +#nb-app .nb-sidebar .list-view .list-row .flags .placeholder.inno { + width: 16px; + height: 16px; +} + +#nb-app .nb-inno-control { + display: inline-flex; + vertical-align: middle; +} + + +#nb-app .nb-inno-control span { + background-color: #a67cce; + color: #fff; + font-size: 9px; + font-family: monospace; + display: flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + border-radius: 3px; + margin: 0 2px; + cursor: pointer; +} + +#nb-app .nb-inno-control span.active { + background-color: #4a2270; + cursor: not-allowed; +} + #nb-app .nb-sidebar .thread-view { min-height: 100px; margin-bottom: 10px; @@ -730,7 +767,7 @@ nb-innotation { margin: 10px; flex: 1; padding: 20px; - background: limegreen; + background: green; align-items: center; display: flex; justify-content: center; @@ -750,8 +787,8 @@ nb-innotation-collection { display: flex; } -nb-innotation-collection.nb-top, -nb-innotation-collection.nb-bottom { +nb-innotation-collection.nb-up, +nb-innotation-collection.nb-down { flex-direction: row; width: 100%; } @@ -762,14 +799,14 @@ nb-innotation-collection.nb-left { /* height: 100%; */ } -nb-innotation-collection.nb-top { +nb-innotation-collection.nb-up { height: 180px; position: absolute; top: 0; left: 0; } -nb-innotation-collection.nb-bottom { +nb-innotation-collection.nb-down { height: 180px; position: absolute; bottom: 0; @@ -794,11 +831,11 @@ nb-innotation-collection.nb-left { position: relative; } -.nb-innotation-ancestor.nb-top { +.nb-innotation-ancestor.nb-up { padding-top: 190px; } -.nb-innotation-ancestor.nb-bottom { +.nb-innotation-ancestor.nb-down { padding-bottom: 190px; } diff --git a/src/app.js b/src/app.js index 0e16343..fcc5bca 100644 --- a/src/app.js +++ b/src/app.js @@ -127,7 +127,8 @@ function embedNbApp () {
+ :innotationsBlock="innotationsBlock" + :innotationsInline="innotationsInline"> t.innotation && t.innotation.position !== 'IN') + }, + innotationsInline: function () { + return this.threads.filter(t => t.innotation && t.innotation.position === 'IN') + }, filteredThreads: function () { let items = this.threads let searchText = this.filter.searchText @@ -374,6 +381,12 @@ function embedNbApp () { const decoded = VueJwtDecode.decode(token) this.user = decoded.user } + + // remove hypothesis + const hypothesisSidebar = document.getElementsByTagName('hypothesis-sidebar') + const hypothesisAdder = document.getElementsByTagName('hypothesis-adder') + hypothesisSidebar && hypothesisSidebar[0] && hypothesisSidebar[0].remove() + hypothesisAdder && hypothesisAdder[0] && hypothesisAdder[0].remove() }, methods: { setUser: function (user) { diff --git a/src/components/innotations/NbInnotationAbove.vue b/src/components/innotations/NbInnotationAbove.vue deleted file mode 100644 index 6e32b7e..0000000 --- a/src/components/innotations/NbInnotationAbove.vue +++ /dev/null @@ -1,61 +0,0 @@ - - - \ No newline at end of file diff --git a/src/components/innotations/NbInnotationAside.vue b/src/components/innotations/NbInnotationAside.vue deleted file mode 100644 index 1823299..0000000 --- a/src/components/innotations/NbInnotationAside.vue +++ /dev/null @@ -1,36 +0,0 @@ - - - \ No newline at end of file diff --git a/src/components/innotations/NbInnotationBellow.vue b/src/components/innotations/NbInnotationBellow.vue deleted file mode 100644 index 0a13d14..0000000 --- a/src/components/innotations/NbInnotationBellow.vue +++ /dev/null @@ -1,61 +0,0 @@ - - - \ No newline at end of file diff --git a/src/components/innotations/NbInnotationBlock.vue b/src/components/innotations/NbInnotationBlock.vue index 9e2da72..727988e 100644 --- a/src/components/innotations/NbInnotationBlock.vue +++ b/src/components/innotations/NbInnotationBlock.vue @@ -8,185 +8,80 @@ export default { name: 'nb-highlight-block', props: { thread: Object, - innotationBlockPosition: String, - isInline: Boolean, + }, + data () { + return { + innoPos: null + } }, created: function() { - // // remove elm if exists - // const elm = document.getElementById(`nb-innotation-block-${this.thread.id}`) - // if (elm) elm.remove() - - // if (this.isInline) return - - // console.log("=======NEW THREAD==========="); - // console.log(this.thread); - // console.log(this.thread.text); - // console.log(this.thread.authorName); - // console.log("COMMON ANCESTOR"); - // console.log(this.thread.range.commonAncestor); - // console.log("PARENT OF COMMON ANCERSTOR"); - // console.log(this.thread.range.commonAncestor.parentNode); - - // const commonAncestor = this.thread.range.commonAncestor - - // // get pos of inno. (from db) - // const innoPos = this.innotationBlockPosition - - // // build innotation item - // const innotation = document.createElement('nb-innotation') - // innotation.id = `nb-innotation-block-${this.thread.id}` - // const text = this.thread.text.length > 200 ? `${this.thread.text.substring(0, 200)}...` : this.thread.text; - // innotation.innerText = (`${text}\n\n${this.thread.authorName}`) - - // // check if there is a collection for the position? - // console.log('commonAncestor.childNodes'); - // console.log(commonAncestor.childNodes); - // console.log(commonAncestor.childNodes.values()); - // console.log(Array.from(commonAncestor.childNodes.values())); - // const innotationCollection = Array.from(commonAncestor.childNodes.values()).find( elm => { - // console.log('in find collection'); - // console.log(elm.nodeName.toLowerCase()); - // console.log(elm.className); - // console.log(elm); - - // return elm.nodeName.toLowerCase() === 'nb-innotation-collection' && elm.className.includes(`nb-${innoPos}`) - // }) - // console.log(innotationCollection); - // if (innotationCollection) { - // console.log('there is a collection'); - // // if yes add the innotation - // innotationCollection.appendChild(innotation) - // } else { - // console.log('NO collection'); - - // // if not create a collection, edit commonancestor css based on collection then add the innotation - // commonAncestor.classList.add('nb-innotation-ancestor', `nb-${innoPos}`) - // const innotationCollection = document.createElement('nb-innotation-collection') - - // innotationCollection.className = `nb-${innoPos}` - // commonAncestor.appendChild(innotationCollection) - // innotationCollection.appendChild(innotation) - // } - - - //----------------------------- - // const newDiv = document.createElement("div") - // newDiv.className = "nb-innotation" - // newDiv.innerText=(`${this.thread.text} - ${this.thread.authorName}`) - // this.thread.range.commonAncestor.insertAdjacentElement('afterend', newDiv) - - - // //innotation before - // const newDiv = document.createElement("div") - // newDiv.className = "nb-innotation" - // newDiv.innerText=(`${this.thread.text} - ${this.thread.authorName}`) - // this.thread.range.commonAncestor.insertAdjacentElement('beforebegin', newDiv) - + console.log('nb-highlight-block Created') + // remove elm if exists + const elm = document.getElementById(`nb-innotation-block-${this.thread.id}`) + if (elm) elm.remove() + + const commonAncestor = this.thread.range.commonAncestor + + console.log(this.thread) + // get pos of inno. (from db) + this.innoPos = this.thread.innotation.position.toLowerCase() + + console.log(this.innoPos) + + // build innotation item + const innotation = document.createElement('nb-innotation') + innotation.id = `nb-innotation-block-${this.thread.id}` + const text = this.thread.text.length > 200 ? `${this.thread.text.substring(0, 200)}...` : this.thread.text; + innotation.innerText = (`${text}\n\n${this.thread.authorName}`) + + // check if there is a collection for the position? + console.log('check if there is a collection for the position?'); + const innotationCollection = Array.from(commonAncestor.childNodes.values()).find( elm => { + return elm.nodeName.toLowerCase() === 'nb-innotation-collection' && elm.className.includes(`nb-${this.innoPos}`) + }) - // this is for the insert right and left - // const commentsBlock = document.createElement("div") - // const parent = commonAncestor.parentNode - // const wrapperDiv = document.createElement("div") - // parent.replaceChild(wrapperDiv, commonAncestor) - // wrapperDiv.appendChild(commonAncestor) - // wrapperDiv.appendChild(commentsBlock) - // wrapperDiv.style.display="flex" - // // wrapperDiv.className = "wrapperDiv" - // // wrapperDiv.style.position="relative"; - // commentsBlock.style.display="block"; - // commonAncestor.style.display="inline" - // commonAncestor.style.position="relative" - - // wrapperDiv.append(commonAncestor) - - // this.thread.range.commonAncestor.insertAdjacentElement('afterend', newDiv) - // beforebegin - // console.log("created FUNCTION"); - - // console.log(this.thread.range.commonAncestor.nextElementSibling); - // document.body.insertBefore(newDiv, this.thread.range.commonAncestor) - // console.log(this.thread); - // window.dispatchEvent(new Event('resize')) - },computed:{ - combined(){ - return this.isInline || this.innotationBlockPosition + console.log(innotationCollection); + if (innotationCollection) { + console.log('there is a collection'); + // if yes add the innotation + innotationCollection.appendChild(innotation) + } else { + console.log('NO collection'); + + // if not create a collection, edit commonancestor css based on collection then add the innotation + commonAncestor.classList.add('nb-innotation-ancestor', `nb-${this.innoPos}`) + const innotationCollection = document.createElement('nb-innotation-collection') + + innotationCollection.className = `nb-${this.innoPos}` + commonAncestor.appendChild(innotationCollection) + innotationCollection.appendChild(innotation) } + + window.dispatchEvent(new Event('resize')) }, - watch: { - combined: function(val) { - // remove elm if exists - const elm = document.getElementById(`nb-innotation-block-${this.thread.id}`) - if (elm) elm.remove() - - if (this.isInline){ - const allAncestor = document.getElementsByClassName('nb-innotation-ancestor') - const allCollections = document.getElementsByTagName('nb-innotation-collection') - Array.from(allAncestor).forEach(elm => { - console.log(elm); - elm.classList.remove('nb-innotation-ancestor') - elm.classList.remove('nb-top') - elm.classList.remove('nb-bottom') - elm.classList.remove('nb-left') - elm.classList.remove('nb-right') - }) - Array.from(allCollections).forEach(elm => elm.remove()) - window.dispatchEvent(new Event('resize')) - return - } - - console.log("=======NEW THREAD==========="); - console.log(this.thread); - console.log(this.thread.text); - console.log(this.thread.authorName); - console.log("COMMON ANCESTOR"); - console.log(this.thread.range.commonAncestor); - console.log("PARENT OF COMMON ANCERSTOR"); - console.log(this.thread.range.commonAncestor.parentNode); - - const commonAncestor = this.thread.range.commonAncestor - - // get pos of inno. (from db) - const innoPos = this.innotationBlockPosition - - // build innotation item - const innotation = document.createElement('nb-innotation') - innotation.id = `nb-innotation-block-${this.thread.id}` - const text = this.thread.text.length > 200 ? `${this.thread.text.substring(0, 200)}...` : this.thread.text; - innotation.innerText = (`${text}\n\n${this.thread.authorName}`) - - // check if there is a collection for the position? - console.log('commonAncestor.childNodes'); - console.log(commonAncestor.childNodes); - console.log(commonAncestor.childNodes.values()); - console.log(Array.from(commonAncestor.childNodes.values())); - const innotationCollection = Array.from(commonAncestor.childNodes.values()).find( elm => { - console.log('in find collection'); - console.log(elm.nodeName.toLowerCase()); - console.log(elm.className); - console.log(elm); - - return elm.nodeName.toLowerCase() === 'nb-innotation-collection' && elm.className.includes(`nb-${innoPos}`) - }) - console.log(innotationCollection); - if (innotationCollection) { - console.log('there is a collection'); - // if yes add the innotation - innotationCollection.appendChild(innotation) - } else { - console.log('NO collection'); - - // if not create a collection, edit commonancestor css based on collection then add the innotation - commonAncestor.classList.add('nb-innotation-ancestor', `nb-${innoPos}`) - const innotationCollection = document.createElement('nb-innotation-collection') - - innotationCollection.className = `nb-${innoPos}` - commonAncestor.appendChild(innotationCollection) - innotationCollection.appendChild(innotation) - } - window.dispatchEvent(new Event('resize')) - - } - } + beforeUpdate: function (val) { + console.log("beforeDestroy nb-highlight-block") + console.log(this.thread) + console.log(val) + }, + beforeDestroy: function() { + console.log("beforeDestroy nb-highlight-block") + console.log(this.thread) + // remove elm if exists + const elm = document.getElementById(`nb-innotation-block-${this.thread.id}`) + if (elm) elm.remove() + window.dispatchEvent(new Event('resize')) + + // remove collection if no elm left in item + const commonAncestor = this.thread.range.commonAncestor + const innotationCollection = Array.from(commonAncestor.childNodes.values()).find( elm => { + return elm.nodeName.toLowerCase() === 'nb-innotation-collection' && elm.className.includes(`nb-${this.innoPos}`) + }) + console.log(this.innoPos) + console.log(innotationCollection) + if(innotationCollection) innotationCollection.remove() + commonAncestor.classList.remove(`nb-${this.innoPos}`) + } // TODO: add functions for manipulations } diff --git a/src/components/innotations/NbInnotationControl.vue b/src/components/innotations/NbInnotationControl.vue new file mode 100644 index 0000000..8921fe2 --- /dev/null +++ b/src/components/innotations/NbInnotationControl.vue @@ -0,0 +1,50 @@ + + + \ No newline at end of file diff --git a/src/components/innotations/NbInnotationInline.vue b/src/components/innotations/NbInnotationInline.vue index b708160..d816c20 100644 --- a/src/components/innotations/NbInnotationInline.vue +++ b/src/components/innotations/NbInnotationInline.vue @@ -1,5 +1,4 @@ \ No newline at end of file diff --git a/src/components/list/ListRow.vue b/src/components/list/ListRow.vue index fad0765..6f4927e 100644 --- a/src/components/list/ListRow.vue +++ b/src/components/list/ListRow.vue @@ -14,6 +14,10 @@ i
+
+ {{thread.innotation.position.slice(0,2)}} +
+
diff --git a/src/components/thread/ThreadView.vue b/src/components/thread/ThreadView.vue index e149668..e47f15e 100644 --- a/src/components/thread/ThreadView.vue +++ b/src/components/thread/ThreadView.vue @@ -6,6 +6,10 @@ {{ thread.countAllReplyReqs() }} +  ·  + +
import ThreadComment from './ThreadComment.vue' +import NbInnotationControl from '../innotations/NbInnotationControl.vue' /** * Component for the nested discussion view of thread on the side bar. @@ -82,7 +87,8 @@ export default { } }, components: { - ThreadComment + ThreadComment, + NbInnotationControl } } diff --git a/src/models/nbcomment.js b/src/models/nbcomment.js index f4a692a..1ad0f92 100644 --- a/src/models/nbcomment.js +++ b/src/models/nbcomment.js @@ -26,6 +26,7 @@ class NbComment { * @param {Number} data.starCount - total upvotes for this comment, sets {@link NbComment#upvoteCount} * @param {Boolean} data.seenByMe - true if the current user's seen this comment, sets {@link NbComment#seenByMe} * @param {Boolean} data.bookmarked - true if the current user bookmarked this comment, sets {@link NbComment#bookmarked} + * @param {Object} data.innotation */ constructor (data, annotationsData) { /** @@ -188,6 +189,8 @@ class NbComment { * @type Number */ this.setText() + + this.innotation = data.innotation } /** @@ -419,6 +422,13 @@ class NbComment { return false } + isInnotated() { + if (this.innotation) { + return true + } + return false + } + /** * Check recursively if this comment (or descendant) is authored by the user * defined by the given user ID. From 3aebfdee905f9b4d07af311adf7577e570a58ae0 Mon Sep 17 00:00:00 2001 From: Jumana Date: Thu, 18 Mar 2021 06:47:08 -0400 Subject: [PATCH 08/36] update block innotation style --- public/style/plugin.css | 28 +++++++++++++++---- .../innotations/NbInnotationBlock.vue | 3 +- .../innotations/NbInnotationControl.vue | 2 +- 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/public/style/plugin.css b/public/style/plugin.css index e2108e0..0fac137 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -761,17 +761,33 @@ font-size: 11px; } nb-innotation { - border: 2px #20a720 solid; - border-radius: 15px; - color: white; + border-radius: 1px; margin: 10px; flex: 1; padding: 20px; - background: green; align-items: center; display: flex; - justify-content: center; - text-align: center; + text-align: left; + justify-content: left; + background-color: #fff5a4; + box-shadow: 0px 2px 5px -1px rgb(0 0 0 / 20%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 1px 3px 0px rgb(0 0 0 / 12%); + box-sizing: border-box; + font-size: 1.0rem; + font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; + transition: 0.5s; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + +} +nb-innotation:hover { + box-shadow: 5px 7px 9px 0px rgb(0 0 0 / 20%), 2px 1px 2px 1px rgb(0 0 0 / 14%), 1px 1px 10px 0px rgb(0 0 0 / 12%); + cursor: pointer; + transition: 0.5s; + background-color: #fff7b3; } nb-innotation-inline { diff --git a/src/components/innotations/NbInnotationBlock.vue b/src/components/innotations/NbInnotationBlock.vue index 727988e..1de5d7d 100644 --- a/src/components/innotations/NbInnotationBlock.vue +++ b/src/components/innotations/NbInnotationBlock.vue @@ -29,9 +29,10 @@ export default { console.log(this.innoPos) // build innotation item + // TODO: Seperate the author name from content. create new element const innotation = document.createElement('nb-innotation') innotation.id = `nb-innotation-block-${this.thread.id}` - const text = this.thread.text.length > 200 ? `${this.thread.text.substring(0, 200)}...` : this.thread.text; + const text = this.thread.text.length > 400 ? `${this.thread.text.substring(0, 400)}...` : this.thread.text; innotation.innerText = (`${text}\n\n${this.thread.authorName}`) // check if there is a collection for the position? diff --git a/src/components/innotations/NbInnotationControl.vue b/src/components/innotations/NbInnotationControl.vue index 8921fe2..009a184 100644 --- a/src/components/innotations/NbInnotationControl.vue +++ b/src/components/innotations/NbInnotationControl.vue @@ -3,7 +3,7 @@ X IN UP - DO + BO LE RI From e99764199073191a42c71049f084f247834c676e Mon Sep 17 00:00:00 2001 From: Jumana Almahmoud Date: Thu, 18 Mar 2021 06:50:56 -0400 Subject: [PATCH 09/36] fix block innotation issue --- public/style/plugin.css | 8 ++--- src/app.js | 16 +++++++-- src/components/highlights/NbHighlights.vue | 19 ----------- .../innotations/NbInnotationBlock.vue | 34 ++++++++++++++----- .../innotations/NbInnotationControl.vue | 15 ++++---- .../innotations/NbInnotationInline.vue | 1 - src/components/innotations/NbInnotations.vue | 15 ++++++-- src/components/list/ListRow.vue | 8 ++--- 8 files changed, 68 insertions(+), 48 deletions(-) diff --git a/public/style/plugin.css b/public/style/plugin.css index e2108e0..81c3643 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -362,8 +362,8 @@ #nb-app .nb-sidebar .list-view .list-row .flags .icon-wrapper.inno { background-color: #4a2270; color: #fff; - font-size: 9px; - font-family: monospace; + font-size: 14px; + font-family: 'Verdana', 'Geneva', sans-serif; } #nb-app .nb-sidebar .list-view .list-row .flags .placeholder.inno { width: 16px; @@ -379,8 +379,8 @@ #nb-app .nb-inno-control span { background-color: #a67cce; color: #fff; - font-size: 9px; - font-family: monospace; + font-size: 14px; + font-family: 'Verdana', 'Geneva', sans-serif; display: flex; align-items: center; justify-content: center; diff --git a/src/app.js b/src/app.js index fcc5bca..78db9c2 100644 --- a/src/app.js +++ b/src/app.js @@ -128,7 +128,8 @@ function embedNbApp () {
+ :innotationsInline="innotationsInline" + :show-highlights="showHighlights"> t.innotation && t.innotation.position !== 'IN') + return this.filteredThreads.filter(t => t.innotation && t.innotation.position !== 'IN') }, innotationsInline: function () { - return this.threads.filter(t => t.innotation && t.innotation.position === 'IN') + return this.filteredThreads.filter(t => t.innotation && t.innotation.position === 'IN') }, filteredThreads: function () { let items = this.threads @@ -710,4 +711,13 @@ function embedNbApp () { window.addEventListener('resize', _ => { app.handleResize() }) + + window.addEventListener('scroll', _ => { + app.handleResize() + }) + + window.addEventListener('click', _ => { + app.handleResize() + }) + } diff --git a/src/components/highlights/NbHighlights.vue b/src/components/highlights/NbHighlights.vue index ce4d992..aaad653 100644 --- a/src/components/highlights/NbHighlights.vue +++ b/src/components/highlights/NbHighlights.vue @@ -60,25 +60,6 @@ export default { default: true } }, - - watch: { - // threads: function(val, oldVal) { - // console.log('watching...'); - // console.log(this.threads); - // const commonAncestors = new Set() - // for (const t of this.threads) { - // console.log(t); - // commonAncestors.add(t.range.commonAncestor) - // } - - // console.log(commonAncestors); - - // commonAncestors.forEach(ancestor => { - // console.log(ancestor); - // }) - - // } - }, mounted: function () { eventsProxyMouse(document.body, this.$el) }, diff --git a/src/components/innotations/NbInnotationBlock.vue b/src/components/innotations/NbInnotationBlock.vue index 727988e..1c9a3aa 100644 --- a/src/components/innotations/NbInnotationBlock.vue +++ b/src/components/innotations/NbInnotationBlock.vue @@ -15,22 +15,23 @@ export default { } }, created: function() { + this.innoPos = this.thread.innotation.position.toLowerCase() + console.log('nb-highlight-block Created') // remove elm if exists - const elm = document.getElementById(`nb-innotation-block-${this.thread.id}`) + const elm = document.getElementById(`nb-innotation-block-${this.thread.id}-${this.innoPos}`) if (elm) elm.remove() const commonAncestor = this.thread.range.commonAncestor console.log(this.thread) - // get pos of inno. (from db) - this.innoPos = this.thread.innotation.position.toLowerCase() + console.log(this.innoPos) // build innotation item const innotation = document.createElement('nb-innotation') - innotation.id = `nb-innotation-block-${this.thread.id}` + innotation.id = `nb-innotation-block-${this.thread.id}-${this.innoPos}` const text = this.thread.text.length > 200 ? `${this.thread.text.substring(0, 200)}...` : this.thread.text; innotation.innerText = (`${text}\n\n${this.thread.authorName}`) @@ -60,15 +61,23 @@ export default { window.dispatchEvent(new Event('resize')) }, beforeUpdate: function (val) { - console.log("beforeDestroy nb-highlight-block") + console.log("beforeUpdate nb-highlight-block") + console.log(this.thread) + console.log(val) + }, + updated: function (val) { + console.log("updated nb-highlight-block") console.log(this.thread) console.log(val) }, beforeDestroy: function() { console.log("beforeDestroy nb-highlight-block") console.log(this.thread) + console.log(this.innoPos) // remove elm if exists - const elm = document.getElementById(`nb-innotation-block-${this.thread.id}`) + const elm = document.getElementById(`nb-innotation-block-${this.thread.id}-${this.innoPos}`) + console.log('old inno:') + console.log(elm) if (elm) elm.remove() window.dispatchEvent(new Event('resize')) @@ -79,8 +88,17 @@ export default { }) console.log(this.innoPos) console.log(innotationCollection) - if(innotationCollection) innotationCollection.remove() - commonAncestor.classList.remove(`nb-${this.innoPos}`) + if(innotationCollection) { + const hasOtherInnotations = Array.from(innotationCollection.childNodes.values()).find( elm => { + return elm.nodeName.toLowerCase() === 'nb-innotation' + }) + + if (!hasOtherInnotations) { + innotationCollection.remove() + commonAncestor.classList.remove(`nb-${this.innoPos}`) + } + + } } // TODO: add functions for manipulations diff --git a/src/components/innotations/NbInnotationControl.vue b/src/components/innotations/NbInnotationControl.vue index 8921fe2..0d745a2 100644 --- a/src/components/innotations/NbInnotationControl.vue +++ b/src/components/innotations/NbInnotationControl.vue @@ -1,11 +1,11 @@ @@ -41,7 +41,10 @@ export default { position: position }, headers) - if (res.status === 200) this.thread.innotation.position = position + if (res.status === 200) { + this.thread.innotation.position = position + this.thread.updatedDate = Date.now() + } } }, diff --git a/src/components/innotations/NbInnotationInline.vue b/src/components/innotations/NbInnotationInline.vue index d816c20..d543c02 100644 --- a/src/components/innotations/NbInnotationInline.vue +++ b/src/components/innotations/NbInnotationInline.vue @@ -45,7 +45,6 @@ export default { }, }, beforeDestroy: function() { - console.log("beforeDestroy") // remove elm if exists const elm = document.getElementById(`nb-innotation-inline-${this.thread.id}`) if (elm) elm.remove() diff --git a/src/components/innotations/NbInnotations.vue b/src/components/innotations/NbInnotations.vue index 14d2c08..9133ea9 100644 --- a/src/components/innotations/NbInnotations.vue +++ b/src/components/innotations/NbInnotations.vue @@ -1,13 +1,13 @@ @@ -31,15 +31,15 @@ export default { console.log(this.thread.range.commonAncestor.getBoundingClientRect().top - document.body.getBoundingClientRect().top); console.log(getTextBoundingBoxes(this.thread.range.toRange())) console.log(this.getOffset(this.thread.range.commonAncestor).top) - let style = `top: ${this.getOffset(this.thread.range.commonAncestor).top}px; transition: 0.3s;` + let style = `top: ${getTextBoundingBoxes(this.thread.range.toRange())[0].top - document.body.getBoundingClientRect().top}px; transition: 0.3s;` if (this.threadsHovered.includes(this.thread)) { // style = `${style} outline: 2px dashed #ccc;` - style = `${style} background-color: #fef5d7;` + style = `${style} background-color: #fef5d7; z-index: 1;` } if (this.thread === this.threadSelected) { - style = `${style} mask-image: unset; background-color: #fef5d7;` + style = `${style} mask-image: unset; background-color: #fef5d7; z-index: 2;` } return style From c1c28085632206931fd6f5a04a06808df72793dc Mon Sep 17 00:00:00 2001 From: Jumana Almahmoud Date: Wed, 31 Mar 2021 22:07:21 -0400 Subject: [PATCH 24/36] enable marginalia in nb_viewer only --- public/style/plugin.css | 2 +- src/app.js | 16 +++++++++++++++- src/components/NbSidebar.vue | 4 ++++ .../innotations/NbInnotationControl.vue | 15 +++++++++------ src/components/list/ListRow.vue | 9 +++++---- src/components/marginalias/NbMarginalia.vue | 14 +++++++------- src/components/thread/ThreadView.vue | 12 ++++++++++-- 7 files changed, 51 insertions(+), 21 deletions(-) diff --git a/public/style/plugin.css b/public/style/plugin.css index e00f549..b2f88ee 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -329,7 +329,7 @@ background-color: #f0f0f0; } #nb-app .nb-sidebar .list-view .list-row .flags { - min-width: 50px; + width: 60px; display: flex; align-items: center; justify-content: space-between; diff --git a/src/app.js b/src/app.js index ee869cb..990d083 100644 --- a/src/app.js +++ b/src/app.js @@ -128,6 +128,7 @@ function embedNbApp () {
t.innotation && t.innotation.position === 'IN') }, marginalias: function () { - return this.filteredThreads // this.filteredThreads.filter(t => t.innotation && t.innotation.position === 'IN') + return this.filteredThreads.filter(t => t.innotation && t.innotation.position === 'MARGIN') }, filteredThreads: function () { let items = this.threads @@ -421,6 +427,14 @@ function embedNbApp () { this.user = decoded.user } + if (document.location.href.includes('/nb_viewer.html')) { + this.isMarginalia = true + this.isInnotation = false + } else { + this.isMarginalia = false + this.isInnotation = true + } + //TEMP remove NB2 on test Array.from(document.getElementsByTagName("link")).forEach(elm => { if (elm.href.includes("https://nb2.csail.mit.edu")){ diff --git a/src/components/NbSidebar.vue b/src/components/NbSidebar.vue index 485ae75..8c25713 100644 --- a/src/components/NbSidebar.vue +++ b/src/components/NbSidebar.vue @@ -45,6 +45,8 @@ :thread="threadSelected" :me="user" :replyToComment="replyToComment" + :is-marginalia="isMarginalia" + :is-innotation="isInnotation" @edit-comment="onEditComment" @delete-comment="onDeleteComment" @draft-reply="onDraftReply"> @@ -111,6 +113,8 @@ export default { type: Boolean, default: true }, + isMarginalia: Boolean, + isInnotation: Boolean, threads: { // threads after filter type: Object, default: () => {} diff --git a/src/components/innotations/NbInnotationControl.vue b/src/components/innotations/NbInnotationControl.vue index 22db49f..dd1fbd0 100644 --- a/src/components/innotations/NbInnotationControl.vue +++ b/src/components/innotations/NbInnotationControl.vue @@ -1,11 +1,12 @@ @@ -16,6 +17,8 @@ export default { name: 'nb-innotation-control', props: { thread: Object, + isMarginalia: Boolean, + isInnotation: Boolean, }, methods: { onClick: async function (position) { diff --git a/src/components/list/ListRow.vue b/src/components/list/ListRow.vue index 073b343..964c63c 100644 --- a/src/components/list/ListRow.vue +++ b/src/components/list/ListRow.vue @@ -8,11 +8,12 @@ @click="$emit('select-thread', thread)">
- {{(thread.innotation.position === "IN" && "~") || - (thread.innotation.position === "ABOVE" && "↑") || + {{(thread.innotation.position === "IN" && "~") || + (thread.innotation.position === "ABOVE" && "↑") || (thread.innotation.position === "BELLOW" && "↓") || - (thread.innotation.position === "LEFT" && "←") || - (thread.innotation.position === "RIGHT" && "→")}} + (thread.innotation.position === "LEFT" && "←") || + (thread.innotation.position === "RIGHT" && "→") || + (thread.innotation.position === "MARGIN" && "ℳ")}}
diff --git a/src/components/marginalias/NbMarginalia.vue b/src/components/marginalias/NbMarginalia.vue index 24c1048..646acbc 100644 --- a/src/components/marginalias/NbMarginalia.vue +++ b/src/components/marginalias/NbMarginalia.vue @@ -24,13 +24,13 @@ export default { }, computed: { style: function () { - console.log('====================================='); - console.log(this.thread.range) - console.log(document.body.getBoundingClientRect().top); - console.log(this.thread.range.commonAncestor.getBoundingClientRect().top); - console.log(this.thread.range.commonAncestor.getBoundingClientRect().top - document.body.getBoundingClientRect().top); - console.log(getTextBoundingBoxes(this.thread.range.toRange())) - console.log(this.getOffset(this.thread.range.commonAncestor).top) + // console.log('====================================='); + // console.log(this.thread.range) + // console.log(document.body.getBoundingClientRect().top); + // console.log(this.thread.range.commonAncestor.getBoundingClientRect().top); + // console.log(this.thread.range.commonAncestor.getBoundingClientRect().top - document.body.getBoundingClientRect().top); + // console.log(getTextBoundingBoxes(this.thread.range.toRange())) + // console.log(this.getOffset(this.thread.range.commonAncestor).top) let style = `top: ${getTextBoundingBoxes(this.thread.range.toRange())[0].top - document.body.getBoundingClientRect().top}px; transition: 0.3s;` if (this.threadsHovered.includes(this.thread)) { diff --git a/src/components/thread/ThreadView.vue b/src/components/thread/ThreadView.vue index e47f15e..057cf6b 100644 --- a/src/components/thread/ThreadView.vue +++ b/src/components/thread/ThreadView.vue @@ -8,7 +8,10 @@ {{ thread.countAllReplyReqs() }}  ·  + v-if="isEnabled" + :thread="thread" + :is-marginalia="isMarginalia" + :is-innotation="isInnotation">
Date: Thu, 1 Apr 2021 00:51:20 -0400 Subject: [PATCH 25/36] update fill opacity --- public/style/plugin.css | 2 +- src/components/highlights/NbHighlight.vue | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/public/style/plugin.css b/public/style/plugin.css index e00f549..a35255a 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -111,7 +111,7 @@ } #nb-app .nb-highlights .nb-highlight { fill: rgb(255, 204, 1); - opacity: 0.2; + fill-opacity: 0.2; } #nb-app .nb-sidebar { diff --git a/src/components/highlights/NbHighlight.vue b/src/components/highlights/NbHighlight.vue index fc15f77..7f32840 100644 --- a/src/components/highlights/NbHighlight.vue +++ b/src/components/highlights/NbHighlight.vue @@ -108,13 +108,16 @@ export default { computed: { style: function () { if (!this.thread) { - return 'fill: rgb(231, 76, 60); opacity: 0.3;' + return 'fill: rgb(231, 76, 60); fill-opacity: 0.3;' } if (this.thread === this.threadSelected) { - return 'fill: rgb(1, 99, 255); opacity: 0.3;' + return 'fill: rgb(1, 99, 255); fill-opacity: 0.3;' } if (this.threadsHovered.includes(this.thread)) { - return 'fill: rgb(1, 99, 255); opacity: 0.12;' + return 'fill: rgb(1, 99, 255); fill-opacity: 0.12;' + } + else { + return 'stroke: lime; fill: lime; fill-opacity: 0.3; stroke-opacity: 0.9; stroke-dasharray: 1,1; stroke-width: 2px;' } return null }, From 1f4857a23ca89c92385a888a6cbb8331a307f9ce Mon Sep 17 00:00:00 2001 From: Jumana Almahmoud Date: Thu, 1 Apr 2021 01:30:02 -0400 Subject: [PATCH 26/36] added 'em' type --- src/components/highlights/NbHighlight.vue | 2 +- src/components/innotations/NbInnotationControl.vue | 3 ++- src/components/list/ListRow.vue | 3 ++- src/components/thread/ThreadView.vue | 2 +- 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/highlights/NbHighlight.vue b/src/components/highlights/NbHighlight.vue index 7f32840..bb2f754 100644 --- a/src/components/highlights/NbHighlight.vue +++ b/src/components/highlights/NbHighlight.vue @@ -116,7 +116,7 @@ export default { if (this.threadsHovered.includes(this.thread)) { return 'fill: rgb(1, 99, 255); fill-opacity: 0.12;' } - else { + if (this.thread.innotation && this.thread.innotation.position === 'EM') { return 'stroke: lime; fill: lime; fill-opacity: 0.3; stroke-opacity: 0.9; stroke-dasharray: 1,1; stroke-width: 2px;' } return null diff --git a/src/components/innotations/NbInnotationControl.vue b/src/components/innotations/NbInnotationControl.vue index dd1fbd0..158d594 100644 --- a/src/components/innotations/NbInnotationControl.vue +++ b/src/components/innotations/NbInnotationControl.vue @@ -6,7 +6,8 @@ ↓ ← → - ℳ + Ɱ + ❖
diff --git a/src/components/list/ListRow.vue b/src/components/list/ListRow.vue index 964c63c..32e686d 100644 --- a/src/components/list/ListRow.vue +++ b/src/components/list/ListRow.vue @@ -13,7 +13,8 @@ (thread.innotation.position === "BELLOW" && "↓") || (thread.innotation.position === "LEFT" && "←") || (thread.innotation.position === "RIGHT" && "→") || - (thread.innotation.position === "MARGIN" && "ℳ")}} + (thread.innotation.position === "MARGIN" && "Ɱ") || + (thread.innotation.position === "EM" && "❖")}}
diff --git a/src/components/thread/ThreadView.vue b/src/components/thread/ThreadView.vue index 057cf6b..ac122bc 100644 --- a/src/components/thread/ThreadView.vue +++ b/src/components/thread/ThreadView.vue @@ -80,7 +80,7 @@ export default { } }, isEnabled: function () { - return this.isInnotation || this.isMarginalia + return this.me.role === 'instructor' && (this.isInnotation || this.isMarginalia) } }, methods: { From 19f607d3f6c53d4fca6c1e066b776acee5fe58ea Mon Sep 17 00:00:00 2001 From: Jumana Date: Sat, 3 Apr 2021 22:17:59 -0400 Subject: [PATCH 27/36] add characters --- src/components/marginalias/NbMarginalia.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/marginalias/NbMarginalia.vue b/src/components/marginalias/NbMarginalia.vue index 646acbc..ec71aba 100644 --- a/src/components/marginalias/NbMarginalia.vue +++ b/src/components/marginalias/NbMarginalia.vue @@ -5,7 +5,7 @@ @click="$emit('select-thread',thread)" @mouseenter="onHover(true)" @mouseleave="onHover(false)"> - {{this.thread.text.length > 200 ? `${this.thread.text.substring(0, 200)}...` : this.thread.text}} + {{this.thread.text.length > 200 ? `${this.thread.text.substring(0, 400)}...` : this.thread.text}}
From f19669747340b9dc0f1c642bb3e2c753661f115f Mon Sep 17 00:00:00 2001 From: Jumana Almahmoud Date: Sun, 4 Apr 2021 23:13:33 -0400 Subject: [PATCH 28/36] add spotlight log --- public/style/plugin.css | 6 +- src/app.js | 13 +++-- src/components/highlights/NbHighlight.vue | 14 ++++- src/components/highlights/NbHighlights.vue | 4 +- .../innotations/NbInnotationControl.vue | 57 ------------------- src/components/list/ListRow.vue | 16 +++--- .../spotlights/NbSpotlightControl.vue | 57 +++++++++++++++++++ .../innotations/NbInnotationBlock.vue | 8 ++- .../innotations/NbInnotationInline.vue | 8 +++ .../innotations/NbInnotationPosition.js | 0 .../innotations/NbInnotations.vue | 6 +- .../marginalias/NbMarginalia.vue | 10 +++- .../marginalias/NbMarginalias.vue | 2 + src/components/thread/ThreadView.vue | 8 +-- src/models/nbcomment.js | 8 +-- 15 files changed, 127 insertions(+), 90 deletions(-) delete mode 100644 src/components/innotations/NbInnotationControl.vue create mode 100644 src/components/spotlights/NbSpotlightControl.vue rename src/components/{ => spotlights}/innotations/NbInnotationBlock.vue (93%) rename src/components/{ => spotlights}/innotations/NbInnotationInline.vue (83%) rename src/components/{ => spotlights}/innotations/NbInnotationPosition.js (100%) rename src/components/{ => spotlights}/innotations/NbInnotations.vue (92%) rename src/components/{ => spotlights}/marginalias/NbMarginalia.vue (85%) rename src/components/{ => spotlights}/marginalias/NbMarginalias.vue (95%) diff --git a/public/style/plugin.css b/public/style/plugin.css index a4e0622..d454720 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -378,13 +378,13 @@ height: 16px; } -#nb-app .nb-inno-control { +#nb-app .nb-spotlight-control { display: inline-flex; vertical-align: middle; } -#nb-app .nb-inno-control span { +#nb-app .nb-spotlight-control span { background-color: #a67cce; color: #fff; font-size: 14px; @@ -399,7 +399,7 @@ cursor: pointer; } -#nb-app .nb-inno-control span.active { +#nb-app .nb-spotlight-control span.active { background-color: #4a2270; cursor: not-allowed; } diff --git a/src/app.js b/src/app.js index 990d083..53d6954 100644 --- a/src/app.js +++ b/src/app.js @@ -11,8 +11,8 @@ import { createNbRange, deserializeNbRange } from './models/nbrange.js' import NbComment from './models/nbcomment.js' import { isNodePartOf } from './utils/dom-util.js' -import NbInnotations from './components/innotations/NbInnotations.vue' -import NbMarginalias from './components/marginalias/NbMarginalias.vue' +import NbInnotations from './components/spotlights/innotations/NbInnotations.vue' +import NbMarginalias from './components/spotlights/marginalias/NbMarginalias.vue' import NbHighlights from './components/highlights/NbHighlights.vue' import NbSidebar from './components/NbSidebar.vue' import NbNoAccess from './components/NbNoAccess.vue' @@ -133,6 +133,7 @@ function embedNbApp () { :innotationsInline="innotationsInline" :show-highlights="showHighlights" :thread-selected="threadSelected" + :user="user" @select-thread="onSelectThread" @unselect-thread="onUnselectThread" @hover-innotation="onHoverInnotation" @@ -144,6 +145,7 @@ function embedNbApp () { :show-highlights="showHighlights" :thread-selected="threadSelected" :threads-hovered="threadsHovered" + :user="user" @select-thread="onSelectThread" @unselect-thread="onUnselectThread" @hover-thread="onHoverThread" @@ -156,6 +158,7 @@ function embedNbApp () { :threads-hovered="threadsHovered" :draft-range="draftRange" :show-highlights="showHighlights" + :user="user" @select-thread="onSelectThread" @unselect-thread="onUnselectThread" @hover-thread="onHoverThread" @@ -250,13 +253,13 @@ function embedNbApp () { return this.threads.length }, innotationsBlock: function () { - return [] // this.filteredThreads.filter(t => t.innotation && t.innotation.position !== 'IN') + return this.filteredThreads.filter(t => t.spotlight && ['ABOVE', 'BELLOW', 'LEFT', 'RIGHT'].includes(t.spotlight.position)) }, innotationsInline: function () { - return [] // this.filteredThreads.filter(t => t.innotation && t.innotation.position === 'IN') + return this.filteredThreads.filter(t => t.spotlight && t.spotlight.position === 'IN') }, marginalias: function () { - return this.filteredThreads.filter(t => t.innotation && t.innotation.position === 'MARGIN') + return this.filteredThreads.filter(t => t.spotlight && t.spotlight.position === 'MARGIN') }, filteredThreads: function () { let items = this.threads diff --git a/src/components/highlights/NbHighlight.vue b/src/components/highlights/NbHighlight.vue index bb2f754..307e152 100644 --- a/src/components/highlights/NbHighlight.vue +++ b/src/components/highlights/NbHighlight.vue @@ -3,7 +3,7 @@ class="nb-highlight" v-if="visible" :style="style" - @click="$emit('select-thread',thread)" + @click="onClick()" @mouseenter="onHover(true)" @mouseleave="onHover(false)"> import { getTextBoundingBoxes } from '../../utils/overlay-util.js' +import axios from 'axios' /** * Component for individual highlight overlay corresponding to each thread. @@ -69,6 +70,7 @@ export default { name: 'nb-highlight', props: { thread: Object, + user: Object, threadSelected: Object, threadsHovered: { type: Array, @@ -116,7 +118,7 @@ export default { if (this.threadsHovered.includes(this.thread)) { return 'fill: rgb(1, 99, 255); fill-opacity: 0.12;' } - if (this.thread.innotation && this.thread.innotation.position === 'EM') { + if (this.thread.spotlight && this.thread.spotlight.position === 'EM') { return 'stroke: lime; fill: lime; fill-opacity: 0.3; stroke-opacity: 0.9; stroke-dasharray: 1,1; stroke-width: 2px;' } return null @@ -144,6 +146,14 @@ export default { onHover: function (state) { this.$emit(state ? 'hover-thread' : 'unhover-thread', this.thread) }, + onClick: function () { + if (this.thread.spotlight && this.thread.spotlight.position === 'EM') { + const token = localStorage.getItem("nb.user"); + const headers = { headers: { Authorization: 'Bearer ' + token }} + axios.post(`/api/spotlights/log`, { action: 'CLICK', position: 'EM', annotation_id: this.thread.id, role: this.user.role.toUpperCase() }, headers) + } + this.$emit('select-thread', this.thread) + } } } diff --git a/src/components/highlights/NbHighlights.vue b/src/components/highlights/NbHighlights.vue index aaad653..34c2620 100644 --- a/src/components/highlights/NbHighlights.vue +++ b/src/components/highlights/NbHighlights.vue @@ -7,6 +7,7 @@ :thread-selected="threadSelected" :threads-hovered="threadsHovered" :show-highlights="showHighlights" + :user="user" @select-thread="$emit('select-thread',thread)" @hover-thread="$emit('hover-thread',thread)" @unhover-thread="$emit('unhover-thread',thread)"> @@ -58,7 +59,8 @@ export default { showHighlights: { type: Boolean, default: true - } + }, + user: Object, }, mounted: function () { eventsProxyMouse(document.body, this.$el) diff --git a/src/components/innotations/NbInnotationControl.vue b/src/components/innotations/NbInnotationControl.vue deleted file mode 100644 index 158d594..0000000 --- a/src/components/innotations/NbInnotationControl.vue +++ /dev/null @@ -1,57 +0,0 @@ - - - diff --git a/src/components/list/ListRow.vue b/src/components/list/ListRow.vue index 32e686d..7929370 100644 --- a/src/components/list/ListRow.vue +++ b/src/components/list/ListRow.vue @@ -7,14 +7,14 @@ @mouseleave="$emit('unhover-thread', thread)" @click="$emit('select-thread', thread)">
-
- {{(thread.innotation.position === "IN" && "~") || - (thread.innotation.position === "ABOVE" && "↑") || - (thread.innotation.position === "BELLOW" && "↓") || - (thread.innotation.position === "LEFT" && "←") || - (thread.innotation.position === "RIGHT" && "→") || - (thread.innotation.position === "MARGIN" && "Ɱ") || - (thread.innotation.position === "EM" && "❖")}} +
+ {{(thread.spotlight.position === "IN" && "~") || + (thread.spotlight.position === "ABOVE" && "↑") || + (thread.spotlight.position === "BELLOW" && "↓") || + (thread.spotlight.position === "LEFT" && "←") || + (thread.spotlight.position === "RIGHT" && "→") || + (thread.spotlight.position === "MARGIN" && "Ɱ") || + (thread.spotlight.position === "EM" && "❖")}}
diff --git a/src/components/spotlights/NbSpotlightControl.vue b/src/components/spotlights/NbSpotlightControl.vue new file mode 100644 index 0000000..9eae6f5 --- /dev/null +++ b/src/components/spotlights/NbSpotlightControl.vue @@ -0,0 +1,57 @@ + + + diff --git a/src/components/innotations/NbInnotationBlock.vue b/src/components/spotlights/innotations/NbInnotationBlock.vue similarity index 93% rename from src/components/innotations/NbInnotationBlock.vue rename to src/components/spotlights/innotations/NbInnotationBlock.vue index d265b77..b512609 100644 --- a/src/components/innotations/NbInnotationBlock.vue +++ b/src/components/spotlights/innotations/NbInnotationBlock.vue @@ -3,6 +3,7 @@ diff --git a/src/models/nbcomment.js b/src/models/nbcomment.js index f586232..4d7d503 100644 --- a/src/models/nbcomment.js +++ b/src/models/nbcomment.js @@ -26,7 +26,7 @@ class NbComment { * @param {Number} data.starCount - total upvotes for this comment, sets {@link NbComment#upvoteCount} * @param {Boolean} data.seenByMe - true if the current user's seen this comment, sets {@link NbComment#seenByMe} * @param {Boolean} data.bookmarked - true if the current user bookmarked this comment, sets {@link NbComment#bookmarked} - * @param {Object} data.innotation + * @param {Object} data.spotlight */ constructor (data, annotationsData) { /** @@ -190,7 +190,7 @@ class NbComment { */ this.setText() - this.innotation = data.innotation + this.spotlight = data.spotlight } /** @@ -422,8 +422,8 @@ class NbComment { return false } - isInnotated() { - if (this.innotation) { + isSpotlighted() { + if (this.spotlight) { return true } return false From e8aa5b928514cf34944ea68119750c5888e6a81a Mon Sep 17 00:00:00 2001 From: Jumana Date: Tue, 6 Apr 2021 18:00:17 -0400 Subject: [PATCH 29/36] fading transition of margins --- public/style/plugin.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/style/plugin.css b/public/style/plugin.css index d454720..90c40b7 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -983,8 +983,8 @@ nb-innotation-controller { transition: 0.3s; cursor: pointer; width: 180px; - -webkit-mask-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5410539215686274) 60%, rgba(255,255,255,1) 100%); - mask-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5410539215686274) 60%, rgba(255,255,255,1) 100%); + -webkit-mask-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5410539215686274) 30%, rgba(255,255,255,1) 100%); + mask-image: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5410539215686274) 30%, rgba(255,255,255,1) 100%); background-color: #ffffff; } From 906b97af1ec99c717a7f5442242d9da41e0cbaab Mon Sep 17 00:00:00 2001 From: Jumana Almahmoud Date: Thu, 8 Apr 2021 01:15:47 -0400 Subject: [PATCH 30/36] add session logs --- src/app.js | 79 +++++++++++++------ src/components/highlights/NbHighlight.vue | 22 ++++-- src/components/highlights/NbHighlights.vue | 5 ++ src/components/list/ListRow.vue | 14 ++-- .../spotlights/NbSpotlightControl.vue | 28 +++---- .../innotations/NbInnotationBlock.vue | 19 ++++- .../innotations/NbInnotationInline.vue | 16 +++- .../spotlights/innotations/NbInnotations.vue | 9 ++- .../spotlights/marginalias/NbMarginalia.vue | 18 ++++- .../spotlights/marginalias/NbMarginalias.vue | 5 ++ 10 files changed, 157 insertions(+), 58 deletions(-) diff --git a/src/app.js b/src/app.js index 53d6954..b10b1cd 100644 --- a/src/app.js +++ b/src/app.js @@ -134,6 +134,7 @@ function embedNbApp () { :show-highlights="showHighlights" :thread-selected="threadSelected" :user="user" + :activeClass="activeClass" @select-thread="onSelectThread" @unselect-thread="onUnselectThread" @hover-innotation="onHoverInnotation" @@ -146,6 +147,7 @@ function embedNbApp () { :thread-selected="threadSelected" :threads-hovered="threadsHovered" :user="user" + :activeClass="activeClass" @select-thread="onSelectThread" @unselect-thread="onUnselectThread" @hover-thread="onHoverThread" @@ -159,6 +161,7 @@ function embedNbApp () { :draft-range="draftRange" :show-highlights="showHighlights" :user="user" + :activeClass="activeClass" @select-thread="onSelectThread" @unselect-thread="onUnselectThread" @hover-thread="onHoverThread" @@ -253,13 +256,13 @@ function embedNbApp () { return this.threads.length }, innotationsBlock: function () { - return this.filteredThreads.filter(t => t.spotlight && ['ABOVE', 'BELLOW', 'LEFT', 'RIGHT'].includes(t.spotlight.position)) + return this.filteredThreads.filter(t => t.spotlight && ['ABOVE', 'BELLOW', 'LEFT', 'RIGHT'].includes(t.spotlight.type)) }, innotationsInline: function () { - return this.filteredThreads.filter(t => t.spotlight && t.spotlight.position === 'IN') + return this.filteredThreads.filter(t => t.spotlight && t.spotlight.type === 'IN') }, marginalias: function () { - return this.filteredThreads.filter(t => t.spotlight && t.spotlight.position === 'MARGIN') + return this.filteredThreads.filter(t => t.spotlight && t.spotlight.type === 'MARGIN') }, filteredThreads: function () { let items = this.threads @@ -400,25 +403,37 @@ function embedNbApp () { }, activeClass: async function (newActiveClass) { if (newActiveClass != {} && this.user) { - let source = window.location.origin + window.location.pathname - if (this.sourceURL.length > 0) { - source = this.sourceURL - } - const token = localStorage.getItem("nb.user"); - const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: source, class: newActiveClass.id } } - - axios.get('/api/annotations/allUsers', config) - .then(res => { - this.users = res.data - this.$set(this.user, 'role', this.users[this.user.id].role) - }) - - axios.get('/api/annotations/allTagTypes', config) - .then(res => { - this.hashtags = res.data - }) - - this.getAllAnnotations(source, newActiveClass) // another axios call put into a helper method + let source = window.location.origin + window.location.pathname + if (this.sourceURL.length > 0) { + source = this.sourceURL + } + const token = localStorage.getItem("nb.user"); + const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: source, class: newActiveClass.id } } + const decoded = VueJwtDecode.decode(token) + + axios.get('/api/annotations/allUsers', config) + .then(res => { + console.log(res.data) + this.users = res.data + this.$set(this.user, 'role', this.users[this.user.id].role) + + console.log('Session start') + console.log(this.users[decoded.user.id]) + const configSessionStart = { headers: { Authorization: 'Bearer ' + token }, params: { url: this.sourceURL } } + axios.post(`/api/spotlights/log/session/start`, { + action: 'SESSION_START', + type: 'NONE', + class_id: this.activeClass.id, + role: this.users[this.user.id].role.toUpperCase() + }, configSessionStart) + }) + + axios.get('/api/annotations/allTagTypes', config) + .then(res => { + this.hashtags = res.data + }) + + this.getAllAnnotations(source, newActiveClass) // another axios call put into a helper method } } @@ -729,7 +744,18 @@ function embedNbApp () { onSwitchClass: function(newClass) { this.activeClass = newClass }, - onLogout: function () { + onSessionEnd: async function () { + const token = localStorage.getItem("nb.user"); + const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: this.sourceURL } } + await axios.post(`/api/spotlights/log/session/end`, { + action: 'SESSION_END', + type: 'NONE', + class_id: this.activeClass.id, + role: this.user.role.toUpperCase() + }, config) + }, + onLogout: async function () { + await this.onSessionEnd() localStorage.removeItem("nb.user") this.user = null this.myClasses = [] @@ -805,4 +831,11 @@ function embedNbApp () { app.handleResize() }) + window.addEventListener('beforeunload', async function (e) { + e.preventDefault() + await app.onSessionEnd() + return + }) + + } diff --git a/src/components/highlights/NbHighlight.vue b/src/components/highlights/NbHighlight.vue index 307e152..02f632a 100644 --- a/src/components/highlights/NbHighlight.vue +++ b/src/components/highlights/NbHighlight.vue @@ -80,7 +80,11 @@ export default { showHighlights: { type: Boolean, default: true - } + }, + activeClass: { + type: Object, + default: () => {} + }, }, watch: { /** @@ -118,7 +122,7 @@ export default { if (this.threadsHovered.includes(this.thread)) { return 'fill: rgb(1, 99, 255); fill-opacity: 0.12;' } - if (this.thread.spotlight && this.thread.spotlight.position === 'EM') { + if (this.thread.spotlight && this.thread.spotlight.type === 'EM') { return 'stroke: lime; fill: lime; fill-opacity: 0.3; stroke-opacity: 0.9; stroke-dasharray: 1,1; stroke-width: 2px;' } return null @@ -147,10 +151,18 @@ export default { this.$emit(state ? 'hover-thread' : 'unhover-thread', this.thread) }, onClick: function () { - if (this.thread.spotlight && this.thread.spotlight.position === 'EM') { + if (this.thread.spotlight && this.thread.spotlight.type === 'EM') { + const source = window.location.pathname === '/nb_viewer.html' ? window.location.href : window.location.origin + window.location.pathname const token = localStorage.getItem("nb.user"); - const headers = { headers: { Authorization: 'Bearer ' + token }} - axios.post(`/api/spotlights/log`, { action: 'CLICK', position: 'EM', annotation_id: this.thread.id, role: this.user.role.toUpperCase() }, headers) + const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: source } } + axios.post(`/api/spotlights/log`, { + spotlight_id: this.thread.spotlight.id, + action: 'CLICK', + type: this.thread.spotlight.type.toUpperCase(), + annotation_id: this.thread.id, + class_id: this.activeClass.id, + role: this.user.role.toUpperCase() + }, config) } this.$emit('select-thread', this.thread) } diff --git a/src/components/highlights/NbHighlights.vue b/src/components/highlights/NbHighlights.vue index 34c2620..2682050 100644 --- a/src/components/highlights/NbHighlights.vue +++ b/src/components/highlights/NbHighlights.vue @@ -8,6 +8,7 @@ :threads-hovered="threadsHovered" :show-highlights="showHighlights" :user="user" + :activeClass="activeClass" @select-thread="$emit('select-thread',thread)" @hover-thread="$emit('hover-thread',thread)" @unhover-thread="$emit('unhover-thread',thread)"> @@ -61,6 +62,10 @@ export default { default: true }, user: Object, + activeClass: { + type: Object, + default: () => {} + }, }, mounted: function () { eventsProxyMouse(document.body, this.$el) diff --git a/src/components/list/ListRow.vue b/src/components/list/ListRow.vue index 7929370..ed0545b 100644 --- a/src/components/list/ListRow.vue +++ b/src/components/list/ListRow.vue @@ -8,13 +8,13 @@ @click="$emit('select-thread', thread)">
- {{(thread.spotlight.position === "IN" && "~") || - (thread.spotlight.position === "ABOVE" && "↑") || - (thread.spotlight.position === "BELLOW" && "↓") || - (thread.spotlight.position === "LEFT" && "←") || - (thread.spotlight.position === "RIGHT" && "→") || - (thread.spotlight.position === "MARGIN" && "Ɱ") || - (thread.spotlight.position === "EM" && "❖")}} + {{(thread.spotlight.type === "IN" && "~") || + (thread.spotlight.type === "ABOVE" && "↑") || + (thread.spotlight.type === "BELLOW" && "↓") || + (thread.spotlight.type === "LEFT" && "←") || + (thread.spotlight.type === "RIGHT" && "→") || + (thread.spotlight.type === "MARGIN" && "Ɱ") || + (thread.spotlight.type === "EM" && "❖")}}
diff --git a/src/components/spotlights/NbSpotlightControl.vue b/src/components/spotlights/NbSpotlightControl.vue index 9eae6f5..bd4ef23 100644 --- a/src/components/spotlights/NbSpotlightControl.vue +++ b/src/components/spotlights/NbSpotlightControl.vue @@ -1,13 +1,13 @@ @@ -22,9 +22,9 @@ export default { isInnotation: Boolean, }, methods: { - onClick: async function (position) { - if (!this.thread.spotlight && position === 'X') return - if (this.thread.spotlight && this.thread.spotlight.position === position) return + onClick: async function (type) { + if (!this.thread.spotlight && type === 'X') return + if (this.thread.spotlight && this.thread.spotlight.type === type) return const token = localStorage.getItem("nb.user"); const headers = { headers: { Authorization: 'Bearer ' + token }} @@ -32,21 +32,21 @@ export default { if (!this.thread.spotlight) { const res = await axios.post(`/api/spotlights/spotlight/`, { annotation_id: this.thread.id, - position: position + type: type }, headers) if (res.status === 200) this.thread.spotlight = res.data - } else if (position === 'X') { + } else if (type === 'X') { const res = await axios.delete(`/api/spotlights/spotlight/${this.thread.spotlight.id}`, headers) if (res.status === 200) this.thread.spotlight = null } else { const res = await axios.put(`/api/spotlights/spotlight/${this.thread.spotlight.id}`, { - position: position + type: type }, headers) if (res.status === 200) { - this.thread.spotlight.position = position + this.thread.spotlight.type = type this.thread.updatedDate = Date.now() } } diff --git a/src/components/spotlights/innotations/NbInnotationBlock.vue b/src/components/spotlights/innotations/NbInnotationBlock.vue index b512609..45e9390 100644 --- a/src/components/spotlights/innotations/NbInnotationBlock.vue +++ b/src/components/spotlights/innotations/NbInnotationBlock.vue @@ -14,6 +14,10 @@ export default { thread: Object, user: Object, threadSelected: Object, + activeClass: { + type: Object, + default: () => {} + }, }, data () { return { @@ -21,7 +25,7 @@ export default { } }, created: function() { - this.innoPos = this.thread.spotlight.position.toLowerCase() + this.innoPos = this.thread.spotlight.type.toLowerCase() // remove elm if exists const elm = document.getElementById(`nb-innotation-block-${this.thread.id}-${this.innoPos}`) @@ -104,9 +108,18 @@ export default { this.$emit('unhover-innotation', this.thread) }, onClick: function () { + const source = window.location.pathname === '/nb_viewer.html' ? window.location.href : window.location.origin + window.location.pathname const token = localStorage.getItem("nb.user"); - const headers = { headers: { Authorization: 'Bearer ' + token }} - axios.post(`/api/spotlights/log`, { action: 'CLICK', position: this.thread.spotlight.position, annotation_id: this.thread.id, role: this.user.role.toUpperCase() }, headers) + const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: source } } + axios.post(`/api/spotlights/log`, { + spotlight_id: this.thread.spotlight.id, + action: 'CLICK', + type: this.thread.spotlight.type.toUpperCase(), + annotation_id: this.thread.id, + class_id: this.activeClass.id, + role: this.user.role.toUpperCase() + }, config) + this.$emit('select-thread', this.thread) }, realignInnotationCollections: function () { diff --git a/src/components/spotlights/innotations/NbInnotationInline.vue b/src/components/spotlights/innotations/NbInnotationInline.vue index 798b413..40aa50c 100644 --- a/src/components/spotlights/innotations/NbInnotationInline.vue +++ b/src/components/spotlights/innotations/NbInnotationInline.vue @@ -9,6 +9,10 @@ export default { props: { thread: Object, user: Object, + activeClass: { + type: Object, + default: () => {} + }, }, created: function() { // remove elm if exists @@ -30,9 +34,17 @@ export default { }, methods: { onClick: function () { + const source = window.location.pathname === '/nb_viewer.html' ? window.location.href : window.location.origin + window.location.pathname const token = localStorage.getItem("nb.user"); - const headers = { headers: { Authorization: 'Bearer ' + token }} - axios.post(`/api/spotlights/log`, { action: 'CLICK', position: 'IN', annotation_id: this.thread.id, role: this.user.role.toUpperCase() }, headers) + const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: source } } + axios.post(`/api/spotlights/log`, { + spotlight_id: this.thread.spotlight.id, + action: 'CLICK', + type: this.thread.spotlight.type.toUpperCase(), + annotation_id: this.thread.id, + class_id: this.activeClass.id, + role: this.user.role.toUpperCase() + }, config) }, onHover: function (state) { console.log('onHover'); diff --git a/src/components/spotlights/innotations/NbInnotations.vue b/src/components/spotlights/innotations/NbInnotations.vue index b36437c..770d838 100644 --- a/src/components/spotlights/innotations/NbInnotations.vue +++ b/src/components/spotlights/innotations/NbInnotations.vue @@ -4,7 +4,8 @@ v-for="thread in innotationsInline" :key="key(thread)" :thread="thread" - :user="user"> + :user="user" + :activeClass="activeClass"> @@ -40,7 +42,10 @@ export default { }, threadSelected: Object, user: Object, - + activeClass: { + type: Object, + default: () => {} + }, }, methods: { key: function (t) { diff --git a/src/components/spotlights/marginalias/NbMarginalia.vue b/src/components/spotlights/marginalias/NbMarginalia.vue index e68267c..6182211 100644 --- a/src/components/spotlights/marginalias/NbMarginalia.vue +++ b/src/components/spotlights/marginalias/NbMarginalia.vue @@ -23,6 +23,10 @@ export default { type: Array, default: () => [] }, + activeClass: { + type: Object, + default: () => {} + }, }, computed: { style: function () { @@ -62,9 +66,19 @@ export default { this.$emit('unhover-innotation', this.thread) }, onClick: function () { + console.log(this.thread); + const source = window.location.pathname === '/nb_viewer.html' ? window.location.href : window.location.origin + window.location.pathname const token = localStorage.getItem("nb.user"); - const headers = { headers: { Authorization: 'Bearer ' + token }} - axios.post(`/api/spotlights/log`, { action: 'CLICK', position: 'MARGIN', annotation_id: this.thread.id, role: this.user.role.toUpperCase() }, headers) + const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: source } } + axios.post(`/api/spotlights/log`, { + spotlight_id: this.thread.spotlight.id, + action: 'CLICK', + type: this.thread.spotlight.type.toUpperCase(), + annotation_id: this.thread.id, + class_id: this.activeClass.id, + role: this.user.role.toUpperCase() + }, config) + this.$emit('select-thread', this.thread) }, onHover: function (state) { diff --git a/src/components/spotlights/marginalias/NbMarginalias.vue b/src/components/spotlights/marginalias/NbMarginalias.vue index 420c426..61a561f 100644 --- a/src/components/spotlights/marginalias/NbMarginalias.vue +++ b/src/components/spotlights/marginalias/NbMarginalias.vue @@ -7,6 +7,7 @@ :thread-selected="threadSelected" :user="user" :threads-hovered="threadsHovered" + :activeClass="activeClass" @select-thread="$emit('select-thread',thread)" @hover-thread="$emit('hover-thread',thread)" @unhover-thread="$emit('unhover-thread',thread)"> @@ -34,6 +35,10 @@ export default { }, threadSelected: Object, user: Object, + activeClass: { + type: Object, + default: () => {} + }, }, methods: { key: function (t) { From 5caf425b97cb2b0630ed4bafa49511191d984cb1 Mon Sep 17 00:00:00 2001 From: Jumana Almahmoud Date: Thu, 8 Apr 2021 04:19:25 -0400 Subject: [PATCH 31/36] add spotlight log for actions (reply, bookmark, request, star) --- src/app.js | 15 ++++--- src/components/NbSidebar.vue | 9 +++- src/components/highlights/NbHighlight.vue | 7 ++- src/components/highlights/NbHighlights.vue | 7 ++- .../innotations/NbInnotationBlock.vue | 4 +- .../innotations/NbInnotationInline.vue | 3 -- .../spotlights/innotations/NbInnotations.vue | 7 ++- .../spotlights/marginalias/NbMarginalia.vue | 5 +-- .../spotlights/marginalias/NbMarginalias.vue | 7 ++- src/components/thread/ThreadComment.vue | 12 ++++-- src/components/thread/ThreadView.vue | 4 ++ src/models/nbcomment.js | 43 +++++++++++++++++-- 12 files changed, 90 insertions(+), 33 deletions(-) diff --git a/src/app.js b/src/app.js index b10b1cd..2f7d776 100644 --- a/src/app.js +++ b/src/app.js @@ -183,6 +183,8 @@ function embedNbApp () { :source-url="sourceURL" :is-marginalia="isMarginalia" :is-innotation="isInnotation" + :activeClass="activeClass" + :is-spotlight-initiated="isSpotlightInitiated" @switch-class="onSwitchClass" @toggle-highlights="onToggleHighlights" @search-option="onSearchOption" @@ -247,6 +249,7 @@ function embedNbApp () { showHighlights: true, resizeKey: Date.now(), // work around to force redraw highlights, sourceURL: '', + isSpotlightInitiated: false, }, computed: { style: function () { @@ -413,12 +416,9 @@ function embedNbApp () { axios.get('/api/annotations/allUsers', config) .then(res => { - console.log(res.data) this.users = res.data this.$set(this.user, 'role', this.users[this.user.id].role) - console.log('Session start') - console.log(this.users[decoded.user.id]) const configSessionStart = { headers: { Authorization: 'Bearer ' + token }, params: { url: this.sourceURL } } axios.post(`/api/spotlights/log/session/start`, { action: 'SESSION_START', @@ -696,16 +696,17 @@ function embedNbApp () { } this.filter.minUpvotes = min }, - onSelectThread: function (thread) { - //console.log('APP onSelectThread: ' + thread) + onSelectThread: function (thread, isSpotlightInitiated=false) { + this.isSpotlightInitiated = isSpotlightInitiated + //console.log('isSpotlightInitiated: ' + this.isSpotlightInitiated) this.threadSelected = thread thread.markSeenAll() }, onUnselectThread: function (thread) { - //console.log('we are here onUnselectThread') + this.isSpotlightInitiated = false; + //console.log('isSpotlightInitiated: ' + this.isSpotlightInitiated) if (!this.isInnotationHover) { this.threadSelected = null - } if (this.draftRange && this.isEditorEmpty) { this.onCancelDraft() diff --git a/src/components/NbSidebar.vue b/src/components/NbSidebar.vue index 8c25713..f0a205e 100644 --- a/src/components/NbSidebar.vue +++ b/src/components/NbSidebar.vue @@ -47,6 +47,8 @@ :replyToComment="replyToComment" :is-marginalia="isMarginalia" :is-innotation="isInnotation" + :activeClass="activeClass" + :is-spotlight-initiated="isSpotlightInitiated" @edit-comment="onEditComment" @delete-comment="onDeleteComment" @draft-reply="onDraftReply"> @@ -132,7 +134,9 @@ export default { sourceUrl: { type: String, default: "" - } + }, + activeClass: Object, + isSpotlightInitiated: Boolean, }, data () { return { @@ -311,8 +315,9 @@ export default { upvoteCount: 0, seenByMe: true }) + let source = this.sourceUrl.length > 0 ? this.sourceUrl : window.location.href.split('?')[0] - comment.submitAnnotation(this.activeClass.id, source) + comment.submitAnnotation(this.activeClass.id, source, this.isSpotlightInitiated, this.replyToComment, this.activeClass, this.user) if (this.draftRange) { this.$emit('new-thread', comment) diff --git a/src/components/highlights/NbHighlight.vue b/src/components/highlights/NbHighlight.vue index 02f632a..4706e08 100644 --- a/src/components/highlights/NbHighlight.vue +++ b/src/components/highlights/NbHighlight.vue @@ -164,7 +164,12 @@ export default { role: this.user.role.toUpperCase() }, config) } - this.$emit('select-thread', this.thread) + + if (this.thread.spotlight && (this.thread.spotlight.type === 'EM' || this.thread.spotlight.type === 'IN')) { + this.$emit('select-thread', this.thread, true) + } else { + this.$emit('select-thread', this.thread) + } } } } diff --git a/src/components/highlights/NbHighlights.vue b/src/components/highlights/NbHighlights.vue index 2682050..ab0c3aa 100644 --- a/src/components/highlights/NbHighlights.vue +++ b/src/components/highlights/NbHighlights.vue @@ -9,7 +9,7 @@ :show-highlights="showHighlights" :user="user" :activeClass="activeClass" - @select-thread="$emit('select-thread',thread)" + @select-thread="onSelectThread" @hover-thread="$emit('hover-thread',thread)" @unhover-thread="$emit('unhover-thread',thread)"> @@ -67,6 +67,11 @@ export default { default: () => {} }, }, + methods: { + onSelectThread: function (thread, isSpotlightInitiated=false) { + this.$emit('select-thread', thread, isSpotlightInitiated) + }, + }, mounted: function () { eventsProxyMouse(document.body, this.$el) }, diff --git a/src/components/spotlights/innotations/NbInnotationBlock.vue b/src/components/spotlights/innotations/NbInnotationBlock.vue index 45e9390..f54b733 100644 --- a/src/components/spotlights/innotations/NbInnotationBlock.vue +++ b/src/components/spotlights/innotations/NbInnotationBlock.vue @@ -100,11 +100,9 @@ export default { }, methods: { onMouseEnter: function () { - console.log('onMouseEnter'); this.$emit('hover-innotation', this.thread) }, onMouseLeave: function () { - console.log('onMouseLeave'); this.$emit('unhover-innotation', this.thread) }, onClick: function () { @@ -120,7 +118,7 @@ export default { role: this.user.role.toUpperCase() }, config) - this.$emit('select-thread', this.thread) + this.$emit('select-thread', this.thread, true) }, realignInnotationCollections: function () { const commonAncestor = this.thread.range.commonAncestor diff --git a/src/components/spotlights/innotations/NbInnotationInline.vue b/src/components/spotlights/innotations/NbInnotationInline.vue index 40aa50c..5b6c189 100644 --- a/src/components/spotlights/innotations/NbInnotationInline.vue +++ b/src/components/spotlights/innotations/NbInnotationInline.vue @@ -47,17 +47,14 @@ export default { }, config) }, onHover: function (state) { - console.log('onHover'); }, onMouseEnter: function (state) { - console.log('onMouseEnter'); const innotation = document.getElementById(`nb-innotation-inline-${this.thread.id}`) const text = this.thread.text.length > 300 ? `${this.thread.text.substring(0, 300)}...` : this.thread.text; innotation.innerText = (`${text}`) window.dispatchEvent(new Event('resize')) }, onMouseLeave: function (state) { - console.log('onMouseLeave'); const innotation = document.getElementById(`nb-innotation-inline-${this.thread.id}`) const text = this.thread.text.length > 100 ? `${this.thread.text.substring(0, 100)}...` : this.thread.text; innotation.innerText = (`${text}`) diff --git a/src/components/spotlights/innotations/NbInnotations.vue b/src/components/spotlights/innotations/NbInnotations.vue index 770d838..e683131 100644 --- a/src/components/spotlights/innotations/NbInnotations.vue +++ b/src/components/spotlights/innotations/NbInnotations.vue @@ -14,7 +14,7 @@ :thread-selected="threadSelected" :user="user" :activeClass="activeClass" - @select-thread="$emit('select-thread',thread)" + @select-thread="onSelectThread" @hover-innotation="$emit('hover-innotation',thread)" @unhover-innotation="$emit('unhover-innotation',thread)"> @@ -50,7 +50,10 @@ export default { methods: { key: function (t) { return t.id + '' + t.updatedDate - } + }, + onSelectThread: function (thread, isSpotlightInitiated=false) { + this.$emit('select-thread', thread, isSpotlightInitiated) + }, }, components: { NbInnotationBlock, diff --git a/src/components/spotlights/marginalias/NbMarginalia.vue b/src/components/spotlights/marginalias/NbMarginalia.vue index 6182211..03ee2ba 100644 --- a/src/components/spotlights/marginalias/NbMarginalia.vue +++ b/src/components/spotlights/marginalias/NbMarginalia.vue @@ -58,15 +58,12 @@ export default { }, methods: { onMouseEnter: function () { - console.log('onMouseEnter'); this.$emit('hover-innotation', this.thread) }, onMouseLeave: function () { - console.log('onMouseLeave'); this.$emit('unhover-innotation', this.thread) }, onClick: function () { - console.log(this.thread); const source = window.location.pathname === '/nb_viewer.html' ? window.location.href : window.location.origin + window.location.pathname const token = localStorage.getItem("nb.user"); const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: source } } @@ -79,7 +76,7 @@ export default { role: this.user.role.toUpperCase() }, config) - this.$emit('select-thread', this.thread) + this.$emit('select-thread', this.thread, true) }, onHover: function (state) { this.$emit(state ? 'hover-thread' : 'unhover-thread', this.thread) diff --git a/src/components/spotlights/marginalias/NbMarginalias.vue b/src/components/spotlights/marginalias/NbMarginalias.vue index 61a561f..96da3dd 100644 --- a/src/components/spotlights/marginalias/NbMarginalias.vue +++ b/src/components/spotlights/marginalias/NbMarginalias.vue @@ -8,7 +8,7 @@ :user="user" :threads-hovered="threadsHovered" :activeClass="activeClass" - @select-thread="$emit('select-thread',thread)" + @select-thread="onSelectThread" @hover-thread="$emit('hover-thread',thread)" @unhover-thread="$emit('unhover-thread',thread)"> @@ -43,7 +43,10 @@ export default { methods: { key: function (t) { return t.id + '' + t.updatedDate - } + }, + onSelectThread: function (thread, isSpotlightInitiated=false) { + this.$emit('select-thread', thread, isSpotlightInitiated) + }, }, components: { NbMarginalia, diff --git a/src/components/thread/ThreadComment.vue b/src/components/thread/ThreadComment.vue index 23c458c..66126e1 100644 --- a/src/components/thread/ThreadComment.vue +++ b/src/components/thread/ThreadComment.vue @@ -94,6 +94,8 @@ :me="me" :replyToComment="replyToComment" :key="child.id" + :activeClass="activeClass" + :is-spotlight-initiated="isSpotlightInitiated" @edit-comment="editComment" @delete-comment="deleteComment" @draft-reply="draftReply" @@ -132,7 +134,9 @@ export default { props: { comment: Object, me: Object, - replyToComment: Object + replyToComment: Object, + activeClass: Object, + isSpotlightInitiated: Boolean, }, data () { return { @@ -166,13 +170,13 @@ export default { this.$emit('draft-reply', comment) }, toggleBookmark: function (comment) { - comment.toggleBookmark() + comment.toggleBookmark(this.isSpotlightInitiated, this.comment, this.activeClass, this.me) }, toggleUpvote: function (comment) { - comment.toggleUpvote() + comment.toggleUpvote(this.isSpotlightInitiated, this.comment, this.activeClass, this.me) }, toggleReplyRequest: function (comment) { - comment.toggleReplyRequest() + comment.toggleReplyRequest(this.isSpotlightInitiated, this.comment, this.activeClass, this.me) } }, computed: { diff --git a/src/components/thread/ThreadView.vue b/src/components/thread/ThreadView.vue index ef45498..33ffd23 100644 --- a/src/components/thread/ThreadView.vue +++ b/src/components/thread/ThreadView.vue @@ -18,6 +18,8 @@ :comment="thread" :me="me" :replyToComment="replyToComment" + :activeClass="activeClass" + :is-spotlight-initiated="isSpotlightInitiated" @edit-comment="editComment" @delete-comment="deleteComment" @draft-reply="draftReply"> @@ -59,6 +61,8 @@ export default { replyToComment: Object, isMarginalia: Boolean, isInnotation: Boolean, + activeClass: Object, + isSpotlightInitiated: Boolean, }, computed: { numComments: function () { diff --git a/src/models/nbcomment.js b/src/models/nbcomment.js index 4d7d503..4de2588 100644 --- a/src/models/nbcomment.js +++ b/src/models/nbcomment.js @@ -218,7 +218,7 @@ class NbComment { * On success, set {@link NbComment#id}. If this is a thread head, * {@link NbComment#loadReplies} will be called to also load replies. */ - submitAnnotation (classId, sourceUrl) { + submitAnnotation (classId, sourceUrl, isSpotlightInitiated=false, thread={}, activeClass={}, user={}) { const token = localStorage.getItem("nb.user"); const headers = { headers: { Authorization: 'Bearer ' + token }} if (!this.parent) { @@ -252,6 +252,9 @@ class NbComment { bookmark: this.bookmarked }, headers).then(res => { this.id = res.data.id + if (isSpotlightInitiated) { + this.logSpotlightAction('REPLY', thread, activeClass, user) + } }) } } @@ -534,13 +537,17 @@ class NbComment { /** * Toggle the upvote for this comment by the current user. */ - toggleUpvote () { + toggleUpvote (isSpotlightInitiated=false, thread={}, activeClass={}, user={}) { if (this.upvotedByMe) { this.upvoteCount -= 1 this.upvotedByMe = false } else { this.upvoteCount += 1 this.upvotedByMe = true + + if (isSpotlightInitiated) { + this.logSpotlightAction('STAR', thread, activeClass, user) + } } if (this.id) { const token = localStorage.getItem("nb.user"); @@ -552,13 +559,17 @@ class NbComment { /** * Toggle the reply request for this comment by the current user. */ - toggleReplyRequest () { + toggleReplyRequest (isSpotlightInitiated=false, thread={}, activeClass={}, user={}) { if (this.replyRequestedByMe) { this.replyRequestCount -= 1 this.replyRequestedByMe = false } else { this.replyRequestCount += 1 this.replyRequestedByMe = true + + if (isSpotlightInitiated) { + this.logSpotlightAction('REPLY_REQUEST', thread, activeClass, user) + } } if (this.id) { const token = localStorage.getItem("nb.user"); @@ -570,15 +581,39 @@ class NbComment { /** * Toggle the bookmark for this comment by the current user. */ - toggleBookmark () { + toggleBookmark (isSpotlightInitiated=false, thread={}, activeClass={}, user={}) { this.bookmarked = !this.bookmarked if (this.id) { const token = localStorage.getItem("nb.user"); const headers = { headers: { Authorization: 'Bearer ' + token }} axios.post(`/api/annotations/bookmark/${this.id}`, { bookmark: this.bookmarked }, headers) + + if (isSpotlightInitiated) { + this.logSpotlightAction('BOOKMARK', thread, activeClass, user) + } } } + logSpotlightAction(action, comment, activeClass, user) { + const source = window.location.pathname === '/nb_viewer.html' ? window.location.href : window.location.origin + window.location.pathname + const token = localStorage.getItem("nb.user"); + const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: source } } + const headComment = this.getHeadComment(comment) + axios.post(`/api/spotlights/log`, { + spotlight_id: headComment.spotlight.id, + action: action.toUpperCase(), + type: headComment.spotlight.type.toUpperCase(), + annotation_id: headComment.id, + class_id: activeClass.id, + role: user.role.toUpperCase() + }, config) + } + + getHeadComment(comment) { + if (!comment.parent) return comment + return this.getHeadComment(comment.parent) + } + /** * Update the content and settings of this comment and save changes to the backend. * From a1df95eacf451ed371ce84176374d7d6dbef2144 Mon Sep 17 00:00:00 2001 From: Jumana Date: Sun, 11 Apr 2021 18:52:16 -0400 Subject: [PATCH 32/36] add performance logging --- package.json | 6 ++++-- src/app.js | 14 +++++++++++++- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index fabb090..1c265e1 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,8 @@ "@fortawesome/free-regular-svg-icons": "^5.8.1", "@fortawesome/free-solid-svg-icons": "^5.8.1", "@fortawesome/vue-fontawesome": "^0.1.6", + "@sentry/tracing": "^6.2.5", + "@sentry/vue": "^6.2.5", "axios": "^0.18.0", "express": "^4.17.0", "html-to-text": "^5.1.1", @@ -47,7 +49,7 @@ "vue-cli": "^2.9.6", "vue-jwt-decode": "^0.1.0", "vue-quill": "^1.5.1", - "webpack-dev-server": "^3.11.2", - "vue-spinners": "^1.0.2" + "vue-spinners": "^1.0.2", + "webpack-dev-server": "^3.11.2" } } diff --git a/src/app.js b/src/app.js index 2f7d776..0cca89a 100644 --- a/src/app.js +++ b/src/app.js @@ -19,7 +19,19 @@ import NbNoAccess from './components/NbNoAccess.vue' import NbLogin from './components/NbLogin.vue' import axios from 'axios' import VueJwtDecode from "vue-jwt-decode"; - +import * as Sentry from "@sentry/vue"; +import { Integrations } from "@sentry/tracing"; + +Sentry.init({ + Vue, + dsn: "https://0166e76b64ce48cf97d7df2b6d93ea90@o564291.ingest.sentry.io/5714967", + integrations: [new Integrations.BrowserTracing()], + + // Set tracesSampleRate to 1.0 to capture 100% + // of transactions for performance monitoring. + // We recommend adjusting this value in production + tracesSampleRate: 1.0, +}); Vue.use(VueQuill) Vue.use(VTooltip) From 104f971b5a040f0c7e58232e260badc39cdc87ea Mon Sep 17 00:00:00 2001 From: Jumana Almahmoud Date: Mon, 12 Apr 2021 04:41:29 -0400 Subject: [PATCH 33/36] add config for spotlight --- src/app.js | 38 ++++++++++++------- src/components/NbSidebar.vue | 5 +++ src/components/highlights/NbHighlight.vue | 3 +- src/components/highlights/NbHighlights.vue | 2 + src/components/list/ListRow.vue | 16 +++++++- src/components/list/ListView.vue | 8 +++- .../spotlights/NbSpotlightControl.vue | 8 +++- src/components/thread/ThreadView.vue | 6 ++- src/models/nbcomment.js | 20 +++------- 9 files changed, 70 insertions(+), 36 deletions(-) diff --git a/src/app.js b/src/app.js index 0cca89a..2bff1f9 100644 --- a/src/app.js +++ b/src/app.js @@ -19,19 +19,19 @@ import NbNoAccess from './components/NbNoAccess.vue' import NbLogin from './components/NbLogin.vue' import axios from 'axios' import VueJwtDecode from "vue-jwt-decode"; -import * as Sentry from "@sentry/vue"; -import { Integrations } from "@sentry/tracing"; +// import * as Sentry from "@sentry/vue"; +// import { Integrations } from "@sentry/tracing"; -Sentry.init({ - Vue, - dsn: "https://0166e76b64ce48cf97d7df2b6d93ea90@o564291.ingest.sentry.io/5714967", - integrations: [new Integrations.BrowserTracing()], +// Sentry.init({ +// Vue, +// dsn: "https://0166e76b64ce48cf97d7df2b6d93ea90@o564291.ingest.sentry.io/5714967", +// integrations: [new Integrations.BrowserTracing()], - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for performance monitoring. - // We recommend adjusting this value in production - tracesSampleRate: 1.0, -}); +// // Set tracesSampleRate to 1.0 to capture 100% +// // of transactions for performance monitoring. +// // We recommend adjusting this value in production +// tracesSampleRate: 1.0, +// }); Vue.use(VueQuill) Vue.use(VTooltip) @@ -174,6 +174,7 @@ function embedNbApp () { :show-highlights="showHighlights" :user="user" :activeClass="activeClass" + :is-emphasize="isEmphasize" @select-thread="onSelectThread" @unselect-thread="onUnselectThread" @hover-thread="onHoverThread" @@ -195,6 +196,7 @@ function embedNbApp () { :source-url="sourceURL" :is-marginalia="isMarginalia" :is-innotation="isInnotation" + :is-emphasize="isEmphasize" :activeClass="activeClass" :is-spotlight-initiated="isSpotlightInitiated" @switch-class="onSwitchClass" @@ -241,6 +243,7 @@ function embedNbApp () { isInnotationHover: false, isMarginalia: false, isInnotation: false, + isEmphasize: false, filter: { searchOption: 'text', searchText: '', @@ -262,6 +265,7 @@ function embedNbApp () { resizeKey: Date.now(), // work around to force redraw highlights, sourceURL: '', isSpotlightInitiated: false, + nbConfigs: {}, }, computed: { style: function () { @@ -450,7 +454,13 @@ function embedNbApp () { } }, - created: function () { + created: async function () { + const req = await axios.get('/api/nb/config') + const configs = req.data + this.nbConfigs = configs + + this.isEmphasize = configs['SPOTLIGHT_EM'] === 'true' ? true : false + const token = localStorage.getItem("nb.user") if (token) { const decoded = VueJwtDecode.decode(token) @@ -458,11 +468,11 @@ function embedNbApp () { } if (document.location.href.includes('/nb_viewer.html')) { - this.isMarginalia = true + this.isMarginalia = configs['SPOTLIGHT_MARGIN'] === 'true' ? true : false this.isInnotation = false } else { this.isMarginalia = false - this.isInnotation = true + this.isInnotation = configs['SPOTLIGHT_INNOTATION'] === 'true' ? true : false } //TEMP remove NB2 on test diff --git a/src/components/NbSidebar.vue b/src/components/NbSidebar.vue index f0a205e..c17e911 100644 --- a/src/components/NbSidebar.vue +++ b/src/components/NbSidebar.vue @@ -35,6 +35,9 @@ :threads-hovered="threadsHovered" :show-highlights="showHighlights" :still-gathering-threads="stillGatheringThreads" + :is-marginalia="isMarginalia" + :is-emphasize="isEmphasize" + :is-innotation="isInnotation" @toggle-highlights="onToggleHighlights" @select-thread="onSelectThread" @hover-thread="onHoverThread" @@ -46,6 +49,7 @@ :me="user" :replyToComment="replyToComment" :is-marginalia="isMarginalia" + :is-emphasize="isEmphasize" :is-innotation="isInnotation" :activeClass="activeClass" :is-spotlight-initiated="isSpotlightInitiated" @@ -117,6 +121,7 @@ export default { }, isMarginalia: Boolean, isInnotation: Boolean, + isEmphasize: Boolean, threads: { // threads after filter type: Object, default: () => {} diff --git a/src/components/highlights/NbHighlight.vue b/src/components/highlights/NbHighlight.vue index 4706e08..12a852a 100644 --- a/src/components/highlights/NbHighlight.vue +++ b/src/components/highlights/NbHighlight.vue @@ -85,6 +85,7 @@ export default { type: Object, default: () => {} }, + isEmphasize: Boolean, }, watch: { /** @@ -122,7 +123,7 @@ export default { if (this.threadsHovered.includes(this.thread)) { return 'fill: rgb(1, 99, 255); fill-opacity: 0.12;' } - if (this.thread.spotlight && this.thread.spotlight.type === 'EM') { + if (this.thread.spotlight && this.thread.spotlight.type === 'EM' && this.isEmphasize) { return 'stroke: lime; fill: lime; fill-opacity: 0.3; stroke-opacity: 0.9; stroke-dasharray: 1,1; stroke-width: 2px;' } return null diff --git a/src/components/highlights/NbHighlights.vue b/src/components/highlights/NbHighlights.vue index ab0c3aa..e5475a5 100644 --- a/src/components/highlights/NbHighlights.vue +++ b/src/components/highlights/NbHighlights.vue @@ -9,6 +9,7 @@ :show-highlights="showHighlights" :user="user" :activeClass="activeClass" + :is-emphasize="isEmphasize" @select-thread="onSelectThread" @hover-thread="$emit('hover-thread',thread)" @unhover-thread="$emit('unhover-thread',thread)"> @@ -66,6 +67,7 @@ export default { type: Object, default: () => {} }, + isEmphasize: Boolean, }, methods: { onSelectThread: function (thread, isSpotlightInitiated=false) { diff --git a/src/components/list/ListRow.vue b/src/components/list/ListRow.vue index ed0545b..5acd9c6 100644 --- a/src/components/list/ListRow.vue +++ b/src/components/list/ListRow.vue @@ -7,7 +7,7 @@ @mouseleave="$emit('unhover-thread', thread)" @click="$emit('select-thread', thread)">
-
+
{{(thread.spotlight.type === "IN" && "~") || (thread.spotlight.type === "ABOVE" && "↑") || (thread.spotlight.type === "BELLOW" && "↓") || @@ -70,9 +70,21 @@ export default { threadsHovered: { type: Array, default: () => [] - } + }, + isMarginalia: Boolean, + isInnotation: Boolean, + isEmphasize: Boolean, }, computed: { + isSpotlighted: function () { + if (this.thread.isSpotlighted()) { + if (['ABOVE', 'BELLOW', 'LEFT', 'RIGHT', 'IN'].includes(this.thread.spotlight.type) && this.isInnotation) return true + if (this.thread.spotlight.type === 'EM' && this.isEmphasize) return true + if (this.thread.spotlight.type === 'MARGIN' && this.isMarginalia) return true + } + + return false + }, rowStyle: function () { if (this.threadSelected && this.thread === this.threadSelected) { return 'background-color: #70a0f0; color: #fff' diff --git a/src/components/list/ListView.vue b/src/components/list/ListView.vue index 51e04f4..bd3f446 100644 --- a/src/components/list/ListView.vue +++ b/src/components/list/ListView.vue @@ -35,6 +35,9 @@ :thread="thread" :thread-selected="threadSelected" :threads-hovered="threadsHovered" + :is-marginalia="isMarginalia" + :is-emphasize="isEmphasize" + :is-innotation="isInnotation" @select-thread="$emit('select-thread', thread)" @hover-thread="$emit('hover-thread', thread)" @unhover-thread="$emit('unhover-thread', thread)"> @@ -102,7 +105,10 @@ export default { stillGatheringThreads: { type: Boolean, default: true - } + }, + isMarginalia: Boolean, + isInnotation: Boolean, + isEmphasize: Boolean, }, data () { return { diff --git a/src/components/spotlights/NbSpotlightControl.vue b/src/components/spotlights/NbSpotlightControl.vue index bd4ef23..cb7d7e4 100644 --- a/src/components/spotlights/NbSpotlightControl.vue +++ b/src/components/spotlights/NbSpotlightControl.vue @@ -7,7 +7,7 @@ ← → Ɱ - ❖ + ❖
@@ -20,6 +20,7 @@ export default { thread: Object, isMarginalia: Boolean, isInnotation: Boolean, + isEmphasize: Boolean, }, methods: { onClick: async function (type) { @@ -39,7 +40,10 @@ export default { } else if (type === 'X') { const res = await axios.delete(`/api/spotlights/spotlight/${this.thread.spotlight.id}`, headers) - if (res.status === 200) this.thread.spotlight = null + if (res.status === 200) { + this.thread.spotlight.type = 'NONE' + this.thread.updatedDate = Date.now() + } } else { const res = await axios.put(`/api/spotlights/spotlight/${this.thread.spotlight.id}`, { type: type diff --git a/src/components/thread/ThreadView.vue b/src/components/thread/ThreadView.vue index 33ffd23..a0de1e6 100644 --- a/src/components/thread/ThreadView.vue +++ b/src/components/thread/ThreadView.vue @@ -11,7 +11,8 @@ v-if="isEnabled" :thread="thread" :is-marginalia="isMarginalia" - :is-innotation="isInnotation"> + :is-innotation="isInnotation" + :is-emphasize="isEmphasize">
{ this.id = res.data.id - if (isSpotlightInitiated) { - this.logSpotlightAction('REPLY', thread, activeClass, user) - } + this.logSpotlightAction('REPLY', thread, activeClass, user, isSpotlightInitiated) }) } } @@ -545,9 +543,7 @@ class NbComment { this.upvoteCount += 1 this.upvotedByMe = true - if (isSpotlightInitiated) { - this.logSpotlightAction('STAR', thread, activeClass, user) - } + this.logSpotlightAction('STAR', thread, activeClass, user, isSpotlightInitiated) } if (this.id) { const token = localStorage.getItem("nb.user"); @@ -567,9 +563,7 @@ class NbComment { this.replyRequestCount += 1 this.replyRequestedByMe = true - if (isSpotlightInitiated) { - this.logSpotlightAction('REPLY_REQUEST', thread, activeClass, user) - } + this.logSpotlightAction('REPLY_REQUEST', thread, activeClass, user, isSpotlightInitiated) } if (this.id) { const token = localStorage.getItem("nb.user"); @@ -588,13 +582,11 @@ class NbComment { const headers = { headers: { Authorization: 'Bearer ' + token }} axios.post(`/api/annotations/bookmark/${this.id}`, { bookmark: this.bookmarked }, headers) - if (isSpotlightInitiated) { - this.logSpotlightAction('BOOKMARK', thread, activeClass, user) - } + this.logSpotlightAction('BOOKMARK', thread, activeClass, user, isSpotlightInitiated) } } - logSpotlightAction(action, comment, activeClass, user) { + logSpotlightAction(action, comment, activeClass, user, isSpotlightInitiated) { const source = window.location.pathname === '/nb_viewer.html' ? window.location.href : window.location.origin + window.location.pathname const token = localStorage.getItem("nb.user"); const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: source } } @@ -602,7 +594,7 @@ class NbComment { axios.post(`/api/spotlights/log`, { spotlight_id: headComment.spotlight.id, action: action.toUpperCase(), - type: headComment.spotlight.type.toUpperCase(), + type: isSpotlightInitiated ? headComment.spotlight.type.toUpperCase() : 'NONE', annotation_id: headComment.id, class_id: activeClass.id, role: user.role.toUpperCase() From 1d97859c5af13aef73627bba45443476f70a4a2b Mon Sep 17 00:00:00 2001 From: Jumana Almahmoud Date: Wed, 14 Apr 2021 02:00:06 -0400 Subject: [PATCH 34/36] improve logging --- public/style/plugin.css | 2 +- src/app.js | 18 ++-- src/components/NbSidebar.vue | 12 ++- src/components/highlights/NbHighlight.vue | 37 ++++--- src/components/highlights/NbHighlights.vue | 6 +- src/components/list/ListRow.vue | 99 ++++++++++++------- src/components/list/ListView.vue | 14 ++- .../innotations/NbInnotationBlock.vue | 2 +- .../innotations/NbInnotationInline.vue | 24 ++--- .../spotlights/innotations/NbInnotations.vue | 4 +- .../spotlights/marginalias/NbMarginalia.vue | 2 +- .../spotlights/marginalias/NbMarginalias.vue | 4 +- src/components/thread/ThreadComment.vue | 10 +- src/components/thread/ThreadView.vue | 4 +- src/models/nbcomment.js | 26 ++--- 15 files changed, 159 insertions(+), 105 deletions(-) diff --git a/public/style/plugin.css b/public/style/plugin.css index 90c40b7..16dde09 100644 --- a/public/style/plugin.css +++ b/public/style/plugin.css @@ -329,7 +329,7 @@ background-color: #f0f0f0; } #nb-app .nb-sidebar .list-view .list-row .flags { - width: 60px; + /* width: 60px; */ display: flex; align-items: center; justify-content: space-between; diff --git a/src/app.js b/src/app.js index 2bff1f9..b7b6831 100644 --- a/src/app.js +++ b/src/app.js @@ -175,6 +175,7 @@ function embedNbApp () { :user="user" :activeClass="activeClass" :is-emphasize="isEmphasize" + :is-innotation="isInnotation" @select-thread="onSelectThread" @unselect-thread="onUnselectThread" @hover-thread="onHoverThread" @@ -198,7 +199,7 @@ function embedNbApp () { :is-innotation="isInnotation" :is-emphasize="isEmphasize" :activeClass="activeClass" - :is-spotlight-initiated="isSpotlightInitiated" + :thread-view-initiator="threadViewInitiator" @switch-class="onSwitchClass" @toggle-highlights="onToggleHighlights" @search-option="onSearchOption" @@ -264,7 +265,7 @@ function embedNbApp () { showHighlights: true, resizeKey: Date.now(), // work around to force redraw highlights, sourceURL: '', - isSpotlightInitiated: false, + threadViewInitiator: 'NONE', // what triggered the thread view open ['NONE', 'LIST', 'HIGHLIGHT', 'SPOTLIGHT'] nbConfigs: {}, }, computed: { @@ -472,7 +473,8 @@ function embedNbApp () { this.isInnotation = false } else { this.isMarginalia = false - this.isInnotation = configs['SPOTLIGHT_INNOTATION'] === 'true' ? true : false + this.isInnotation = false //configs['SPOTLIGHT_INNOTATION'] === 'true' ? true : false + this.isEmphasize = false } //TEMP remove NB2 on test @@ -718,15 +720,15 @@ function embedNbApp () { } this.filter.minUpvotes = min }, - onSelectThread: function (thread, isSpotlightInitiated=false) { - this.isSpotlightInitiated = isSpotlightInitiated - //console.log('isSpotlightInitiated: ' + this.isSpotlightInitiated) + onSelectThread: function (thread, threadViewInitiator='NONE') { + this.threadViewInitiator = threadViewInitiator + console.log('threadViewInitiator: ' + this.threadViewInitiator) this.threadSelected = thread thread.markSeenAll() }, onUnselectThread: function (thread) { - this.isSpotlightInitiated = false; - //console.log('isSpotlightInitiated: ' + this.isSpotlightInitiated) + this.threadViewInitiator = 'NONE' + console.log('threadViewInitiator: ' + this.threadViewInitiator) if (!this.isInnotationHover) { this.threadSelected = null } diff --git a/src/components/NbSidebar.vue b/src/components/NbSidebar.vue index c17e911..0703097 100644 --- a/src/components/NbSidebar.vue +++ b/src/components/NbSidebar.vue @@ -38,6 +38,8 @@ :is-marginalia="isMarginalia" :is-emphasize="isEmphasize" :is-innotation="isInnotation" + :activeClass="activeClass" + :user="user" @toggle-highlights="onToggleHighlights" @select-thread="onSelectThread" @hover-thread="onHoverThread" @@ -52,7 +54,7 @@ :is-emphasize="isEmphasize" :is-innotation="isInnotation" :activeClass="activeClass" - :is-spotlight-initiated="isSpotlightInitiated" + :thread-view-initiator="threadViewInitiator" @edit-comment="onEditComment" @delete-comment="onDeleteComment" @draft-reply="onDraftReply"> @@ -141,7 +143,7 @@ export default { default: "" }, activeClass: Object, - isSpotlightInitiated: Boolean, + threadViewInitiator: String, }, data () { return { @@ -251,8 +253,8 @@ export default { onMinUpvotes: function (min) { this.$emit('min-upvotes', min) }, - onSelectThread: function (thread) { - this.$emit('select-thread', thread) + onSelectThread: function (thread, threadViewInitiator='NONE') { + this.$emit('select-thread', thread, threadViewInitiator) }, onHoverThread: function (thread) { this.$emit('hover-thread', thread) @@ -322,7 +324,7 @@ export default { }) let source = this.sourceUrl.length > 0 ? this.sourceUrl : window.location.href.split('?')[0] - comment.submitAnnotation(this.activeClass.id, source, this.isSpotlightInitiated, this.replyToComment, this.activeClass, this.user) + comment.submitAnnotation(this.activeClass.id, source, this.threadViewInitiator, this.replyToComment, this.activeClass, this.user) if (this.draftRange) { this.$emit('new-thread', comment) diff --git a/src/components/highlights/NbHighlight.vue b/src/components/highlights/NbHighlight.vue index 12a852a..b22bb5b 100644 --- a/src/components/highlights/NbHighlight.vue +++ b/src/components/highlights/NbHighlight.vue @@ -86,6 +86,7 @@ export default { default: () => {} }, isEmphasize: Boolean, + isInnotation: Boolean, }, watch: { /** @@ -152,24 +153,30 @@ export default { this.$emit(state ? 'hover-thread' : 'unhover-thread', this.thread) }, onClick: function () { - if (this.thread.spotlight && this.thread.spotlight.type === 'EM') { - const source = window.location.pathname === '/nb_viewer.html' ? window.location.href : window.location.origin + window.location.pathname - const token = localStorage.getItem("nb.user"); - const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: source } } - axios.post(`/api/spotlights/log`, { - spotlight_id: this.thread.spotlight.id, - action: 'CLICK', - type: this.thread.spotlight.type.toUpperCase(), - annotation_id: this.thread.id, - class_id: this.activeClass.id, - role: this.user.role.toUpperCase() - }, config) + let type = 'HIGHLIGHT' + + if ((this.isEmphasize && this.thread.spotlight && this.thread.spotlight.type === 'EM') || (this.isInnotation && this.thread.spotlight && this.thread.spotlight.type === 'IN')) { + type = this.thread.spotlight.type.toUpperCase() } - if (this.thread.spotlight && (this.thread.spotlight.type === 'EM' || this.thread.spotlight.type === 'IN')) { - this.$emit('select-thread', this.thread, true) + const source = window.location.pathname === '/nb_viewer.html' ? window.location.href : window.location.origin + window.location.pathname + const token = localStorage.getItem("nb.user"); + const config = { headers: { Authorization: 'Bearer ' + token }, params: { url: source } } + axios.post(`/api/spotlights/log`, { + spotlight_id: type === 'HIGHLIGHT' ? null : this.thread.spotlight.id, + action: 'CLICK', + type: type, + annotation_id: this.thread.id, + class_id: this.activeClass.id, + role: this.user.role.toUpperCase() + }, config) + + if (this.isEmphasize && this.thread.spotlight && this.thread.spotlight.type === 'EM') { + this.$emit('select-thread', this.thread, 'SPOTLIGHT') + } else if (this.isInnotation && this.thread.spotlight && this.thread.spotlight.type === 'IN') { + this.$emit('select-thread', this.thread, 'SPOTLIGHT') } else { - this.$emit('select-thread', this.thread) + this.$emit('select-thread', this.thread, 'HIGHLIGHT') } } } diff --git a/src/components/highlights/NbHighlights.vue b/src/components/highlights/NbHighlights.vue index e5475a5..53693c9 100644 --- a/src/components/highlights/NbHighlights.vue +++ b/src/components/highlights/NbHighlights.vue @@ -10,6 +10,7 @@ :user="user" :activeClass="activeClass" :is-emphasize="isEmphasize" + :is-innotation="isInnotation" @select-thread="onSelectThread" @hover-thread="$emit('hover-thread',thread)" @unhover-thread="$emit('unhover-thread',thread)"> @@ -68,10 +69,11 @@ export default { default: () => {} }, isEmphasize: Boolean, + isInnotation: Boolean, }, methods: { - onSelectThread: function (thread, isSpotlightInitiated=false) { - this.$emit('select-thread', thread, isSpotlightInitiated) + onSelectThread: function (thread, threadViewInitiator='NONE') { + this.$emit('select-thread', thread, threadViewInitiator) }, }, mounted: function () { diff --git a/src/components/list/ListRow.vue b/src/components/list/ListRow.vue index 5acd9c6..a238bbb 100644 --- a/src/components/list/ListRow.vue +++ b/src/components/list/ListRow.vue @@ -1,43 +1,47 @@