From 1a462cf72560f078091580c387fa7de3909d9c35 Mon Sep 17 00:00:00 2001 From: Kirill Malakhov Date: Wed, 24 Jul 2019 23:42:45 +0300 Subject: [PATCH 1/7] Clean up --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2198fb8..18f1faf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ ## v0.5.0, 2019-07-25 ### 🏭 Нові можливості -- Реалізовано підсвічування речень з вибраним терміном в елементі `#sents_from_text` та `#text-content` з використанням бібліотеки [mark.js](https://markjs.io/) +- Реалізовано підсвічування речень з вибраним терміном в елементі `#sents_from_text` та вибраних термінів в`#text-content` з використанням бібліотеки [mark.js](https://markjs.io/) ### 🔴 Виправлення помилок - Дрібні виправлення інтерфейсу. From c661b34d16a76767570bd0d4a2150dbd0e6dca12 Mon Sep 17 00:00:00 2001 From: Kirill Malakhov Date: Wed, 24 Jul 2019 23:44:19 +0300 Subject: [PATCH 2/7] Clean up --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 18f1faf..9438ed5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ ## v0.5.0, 2019-07-25 ### 🏭 Нові можливості -- Реалізовано підсвічування речень з вибраним терміном в елементі `#sents_from_text` та вибраних термінів в`#text-content` з використанням бібліотеки [mark.js](https://markjs.io/) +- Реалізовано підсвічування речень з вибраним терміном в елементі `#sents_from_text` та вибраних термінів в `#text-content` з використанням бібліотеки [mark.js](https://markjs.io/) ### 🔴 Виправлення помилок - Дрібні виправлення інтерфейсу. From 0091ec3d5cc7c043bec6c24260f78e0d7ecfbcd4 Mon Sep 17 00:00:00 2001 From: Kirill Malakhov Date: Thu, 25 Jul 2019 15:22:41 +0300 Subject: [PATCH 3/7] Clean up code and unusel libraries --- .../jquery.highlight-within-textarea.js | 216 ------------------ .../jquery.highlight-within-textarea.css | 48 ---- static/stylesheets/style.css | 2 + static/stylesheets/textAreaHighlight.css | 8 - templates/index.html | 4 - 5 files changed, 2 insertions(+), 276 deletions(-) delete mode 100755 static/javascripts/jquery.highlight-within-textarea.js delete mode 100755 static/stylesheets/jquery.highlight-within-textarea.css delete mode 100644 static/stylesheets/textAreaHighlight.css diff --git a/static/javascripts/jquery.highlight-within-textarea.js b/static/javascripts/jquery.highlight-within-textarea.js deleted file mode 100755 index 47373cb..0000000 --- a/static/javascripts/jquery.highlight-within-textarea.js +++ /dev/null @@ -1,216 +0,0 @@ -/* - * highlight-within-textarea v1.0.2 - * - * @author Will Boyd - * @github https://github.com/lonekorean/highlight-within-textarea - */ - -(function($) { - var ID = 'hwt'; - var OPEN_MARK = '--##HWT:OPEN##--'; - var CLOSE_MARK = '--##HWT:CLOSE##--'; - - var HighlightWithinTextarea = function($el, onInput) { - this.$el = $el; - this.onInput = onInput || this.onInput; - this.generate(); - }; - - HighlightWithinTextarea.prototype = { - onInput: function(text) { - throw 'onInput callback not provided.' - }, - - generate: function() { - this.$el - .addClass(ID + '-input ' + ID + '-content') - .on('input.' + ID, this.handleInput.bind(this)) - .on('scroll.' + ID, this.handleScroll.bind(this)); - - this.$highlights = $('
', { class: ID + '-highlights ' + ID + '-content' }); - - this.$backdrop = $('
', { class: ID + '-backdrop' }) - .append(this.$highlights); - - this.$container = $('
', { class: ID + '-container' }) - .insertAfter(this.$el) - .append(this.$backdrop, this.$el) // moves $el into $container - .on('scroll', this.blockContainerScroll.bind(this)); - - this.browser = this.detectBrowser(); - switch (this.browser) { - case 'firefox': - this.fixFirefox(); - break; - case 'ios': - this.fixIOS(); - break; - } - - // pre-fire this event to highlight any existing input - this.handleInput(this.$el[0]); - }, - - // yeah, browser sniffing sucks, but there are browser-specific quirks - // to handle that are not a matter of feature detection - detectBrowser: function() { - var ua = window.navigator.userAgent.toLowerCase(); - if (ua.indexOf('firefox') !== -1) { - return 'firefox'; - } else if (!!ua.match(/msie|trident\/7|edge/)) { - return 'ie'; - } else if (!!ua.match(/ipad|iphone|ipod/) && ua.indexOf('windows phone') === -1) { - // Windows Phone flags itself as "like iPhone", thus the extra check - return 'ios'; - } else { - return 'other'; - } - }, - - // Firefox doesn't show text that scrolls into the padding of a - // textarea, so rearrange a couple box models to make highlights - // behave the same way - fixFirefox: function() { - // take padding and border pixels from highlights div - var padding = this.$highlights.css([ - 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' - ]); - var border = this.$highlights.css([ - 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' - ]); - this.$highlights.css({ - 'padding': '0', - 'border-width': '0' - }); - - this.$backdrop - .css({ - // give padding pixels to backdrop div - 'margin-top': '+=' + padding['padding-top'], - 'margin-right': '+=' + padding['padding-right'], - 'margin-bottom': '+=' + padding['padding-bottom'], - 'margin-left': '+=' + padding['padding-left'], - }) - .css({ - // give border pixels to backdrop div - 'margin-top': '+=' + border['border-top-width'], - 'margin-right': '+=' + border['border-right-width'], - 'margin-bottom': '+=' + border['border-bottom-width'], - 'margin-left': '+=' + border['border-left-width'], - }); - }, - - // iOS adds 3px of (unremovable) padding to the left and right of a - // textarea, so adjust highlights div to match - fixIOS: function() { - this.$highlights.css({ - 'padding-left': '+=3px', - 'padding-right': '+=3px' - }); - }, - - getType: function(instance) { - return Object.prototype.toString.call(instance) - .replace('[object ', '') - .replace(']', '') - .toLowerCase(); - }, - - handleInput: function() { - var input = this.$el.val() - var payload = this.onInput(input); - if (payload) { - switch (this.getType(payload)) { - case 'array': - input = this.markArray(input, payload); - break; - case 'regexp': - input = this.markRegExp(input, payload); - break; - default: - throw 'Unrecognized payload type returned from onInput callback.'; - } - } - - // this keeps scrolling aligned when input ends with a newline - input = input.replace(new RegExp('\\n(' + CLOSE_MARK + ')?$'), '\n\n$1'); - - // escape HTML - input = input.replace(/&/g, '&') - .replace(//g, '>'); - - // replace tokens with actual mark tags - input = input.replace(new RegExp(OPEN_MARK, 'g'), ''); - input = input.replace(new RegExp(CLOSE_MARK, 'g'), ''); - - if (this.browser === 'ie') { - // IE wraps whitespace differently in a div vs textarea, this fixes it - input = input.replace(/ /g, ' '); - } - - this.$highlights.html(input); - }, - - handleScroll: function() { - var scrollTop = this.$el.scrollTop(); - this.$backdrop.scrollTop(scrollTop); - - // Chrome and Safari won't break long strings of spaces, which can cause - // horizontal scrolling, this compensates by shifting highlights by the - // horizontally scrolled amount to keep things aligned - var scrollLeft = this.$el.scrollLeft(); - this.$backdrop.css('transform', (scrollLeft > 0) ? 'translateX(' + -scrollLeft + 'px)' : ''); - }, - - // in Chrome, page up/down in the textarea will shift stuff within the - // container (despite the CSS), this immediately reverts the shift - blockContainerScroll: function(e) { - this.$container.scrollLeft(0); - }, - - markArray: function(input, payload) { - var offset = 0; - payload.forEach(function(element) { - // insert open tag - var open = element[0] + offset; - input = input.slice(0, open) + OPEN_MARK + input.slice(open); - offset += OPEN_MARK.length; - - // insert close tag - var close = element[1] + offset; - input = input.slice(0, close) + CLOSE_MARK + input.slice(close); - offset += CLOSE_MARK.length; - }, this); - return input; - }, - - markRegExp: function(input, payload) { - return input.replace(payload, OPEN_MARK + '$&' + CLOSE_MARK); - }, - - destroy: function() { - this.$backdrop.remove(); - this.$el - .unwrap() - .removeClass(ID + '-text ' + ID + '-input') - .off(ID) - .removeData(ID); - }, - }; - - // register the jQuery plugin - $.fn.highlightWithinTextarea = function(onInput) { - return this.each(function() { - var $this = $(this); - - var highlightWithinTextarea = $this.data(ID); - if (highlightWithinTextarea) { - highlightWithinTextarea.destroy(); - } - - highlightWithinTextarea = new HighlightWithinTextarea($this, onInput); - $this.data(ID, highlightWithinTextarea); - }); - }; -})(jQuery); diff --git a/static/stylesheets/jquery.highlight-within-textarea.css b/static/stylesheets/jquery.highlight-within-textarea.css deleted file mode 100755 index ad5d0a6..0000000 --- a/static/stylesheets/jquery.highlight-within-textarea.css +++ /dev/null @@ -1,48 +0,0 @@ -.hwt-container { - display: inline-block; - position: relative; - overflow: hidden !important; - -webkit-text-size-adjust: none !important; -} - -.hwt-backdrop { - position: absolute !important; - top: 0 !important; - right: -99px !important; - bottom: 0 !important; - left: 0 !important; - padding-right: 99px !important; - overflow-x: hidden !important; - overflow-y: auto !important; -} - -.hwt-highlights { - width: auto !important; - height: auto !important; - border-color: transparent !important; - white-space: pre-wrap !important; - word-wrap: break-word !important; - color: transparent !important; - overflow: hidden !important; -} - -.hwt-input { - display: block !important; - position: relative !important; - margin: 0; - padding: 0; - border-radius: 0; - font: inherit; - overflow-x: hidden !important; - overflow-y: auto !important; -} - -.hwt-content { - border: 1px solid; - background: none transparent !important; -} - -.hwt-content mark { - padding: 0 !important; - color: inherit; -} diff --git a/static/stylesheets/style.css b/static/stylesheets/style.css index 8827673..57b1176 100644 --- a/static/stylesheets/style.css +++ b/static/stylesheets/style.css @@ -88,6 +88,8 @@ body { display: block; overflow-y: scroll; height: 50%; + border-color: #8BC34A; + border-radius: unset; } #text-content-panel-body { diff --git a/static/stylesheets/textAreaHighlight.css b/static/stylesheets/textAreaHighlight.css deleted file mode 100644 index 7168048..0000000 --- a/static/stylesheets/textAreaHighlight.css +++ /dev/null @@ -1,8 +0,0 @@ -/* size and formatting */ -.hwt-content { - width: 500px; - height: 100px; - padding: 5px; - color: #555; - /*font: 18px/25px 'Roboto Mono', sans-serif;*/ -} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 8b6c98f..9823c26 100644 --- a/templates/index.html +++ b/templates/index.html @@ -10,9 +10,6 @@ - - @@ -165,7 +162,6 @@ - From 86f6ec5db4ad0b071540516bea8ad5172ac7fa24 Mon Sep 17 00:00:00 2001 From: Kirill Malakhov Date: Thu, 25 Jul 2019 15:38:59 +0300 Subject: [PATCH 4/7] Clean up code --- static/stylesheets/style.css | 12 +++++++++++- templates/index.html | 2 +- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/static/stylesheets/style.css b/static/stylesheets/style.css index 57b1176..61e2f68 100644 --- a/static/stylesheets/style.css +++ b/static/stylesheets/style.css @@ -226,7 +226,17 @@ select { #sents_from_text { height: auto; width: auto; - border-color: #8BC34A; + /* border-color: #8BC34A; */ +} + +#sents-from-text-panel { + /* border-radius: unset; + border: 1px solid #8BC34A; */ + border-color: unset; + border-radius: unset; + border: none; + box-shadow: none; + -webkit-box-shadow: none; } #notes { diff --git a/templates/index.html b/templates/index.html index 9823c26..25d9d25 100644 --- a/templates/index.html +++ b/templates/index.html @@ -120,7 +120,7 @@
-
+

From e6f9cc289890f5a97de3a260c07a9e57afe0b192 Mon Sep 17 00:00:00 2001 From: Kirill Malakhov Date: Thu, 25 Jul 2019 15:39:47 +0300 Subject: [PATCH 5/7] Clean up code --- static/javascripts/ken-recap.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/static/javascripts/ken-recap.js b/static/javascripts/ken-recap.js index 20a2530..ad37d01 100644 --- a/static/javascripts/ken-recap.js +++ b/static/javascripts/ken-recap.js @@ -829,8 +829,7 @@ $sortSelect.on('change', function (e) { }); // Sort terms --------------------------------------------------------------------------------------------------------- -// mark.js - +// mark.js --------------------------------------------------------------------------------------------------------- function mark(text) { // Determine selected options for mark.js var options = { @@ -867,4 +866,5 @@ function markTerms(term) { $("#text-content").mark(term, options); } }); -} \ No newline at end of file +} +// mark.js --------------------------------------------------------------------------------------------------------- \ No newline at end of file From 554c799adadfb73d70157efab40e38a702f6fff6 Mon Sep 17 00:00:00 2001 From: Kirill Malakhov Date: Thu, 25 Jul 2019 16:39:00 +0300 Subject: [PATCH 6/7] fix #term-tree term click event --- static/javascripts/ken-recap.js | 71 ++++++++++++++++++++++++++------- 1 file changed, 57 insertions(+), 14 deletions(-) diff --git a/static/javascripts/ken-recap.js b/static/javascripts/ken-recap.js index ad37d01..5d54f63 100644 --- a/static/javascripts/ken-recap.js +++ b/static/javascripts/ken-recap.js @@ -475,12 +475,12 @@ function fetchFileToRecapService() { function forUploadResultListClickAndEnterPressEvents() { - //clear textArea #textContent + //clear textArea #text-content $textContent.text(''); var valOfSelectedElementInUploadResultList = termsWithIndexDict[$("#uploadResultList option:selected").text()]; - // inserting sentences with selected terms in textArea #textContent + // inserting sentences with selected terms in #text-content if (Array.isArray(resJSON.termsintext.exporterms.term[valOfSelectedElementInUploadResultList].sentpos)) { let sentIndex = []; let sentsForMark = []; @@ -521,7 +521,33 @@ function forUploadResultListClickAndEnterPressEvents() { treeData.push(objForTree); //add structure to array - $termTree.treeview({ data: treeData }); // add array data to bootstrap-treeview and view it on page + $termTree.treeview({ data: treeData, + onNodeSelected: function(event, node) { + // inserting sentences with selected terms in #text-content + //clear textArea #text-content + $textContent.text(''); + let selectedTermInTermTree = termsWithIndexDict[node.text]; + if (Array.isArray(resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos) == false) { + + $textContent.append('

' + resJSON.termsintext.sentences.sent[resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos.substring(0, resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos.indexOf("/")) - 1] + '


'); + + mark(resJSON.termsintext.sentences.sent[resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos.substring(0, resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos.indexOf("/")) - 1]); + } + if (Array.isArray(resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos)) { + let sentIndex = []; + let sentsForMark = []; + for (let elementForUploadResultListDbClickAndEnterPress of resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos) { + if (!sentIndex.includes(parseInt(elementForUploadResultListDbClickAndEnterPress.substring(0, elementForUploadResultListDbClickAndEnterPress.indexOf("/")) - 1))) { + $textContent.append('

' + resJSON.termsintext.sentences.sent[elementForUploadResultListDbClickAndEnterPress.substring(0, elementForUploadResultListDbClickAndEnterPress.indexOf("/")) - 1] + '


'); + sentsForMark.push(resJSON.termsintext.sentences.sent[elementForUploadResultListDbClickAndEnterPress.substring(0, elementForUploadResultListDbClickAndEnterPress.indexOf("/")) - 1]); + sentIndex.push(parseInt(elementForUploadResultListDbClickAndEnterPress.substring(0, elementForUploadResultListDbClickAndEnterPress.indexOf("/")) - 1)); + } + } + mark(sentsForMark); + } + markTerms(node.text); + } + }); // add array data to bootstrap-treeview and view it on page } if (resJSON.termsintext.exporterms.term[valOfSelectedElementInUploadResultList].hasOwnProperty('relup')) { @@ -543,23 +569,40 @@ function forUploadResultListClickAndEnterPressEvents() { treeData.push(objForTree); //add structure to array - $termTree.treeview({ data: treeData }); // add array data to bootstrap-treeview and view it on page + $termTree.treeview({ data: treeData, + onNodeSelected: function(event, node) { + // inserting sentences with selected terms in #text-content + + //clear textArea #textContent + $textContent.text(''); + let selectedTermInTermTree = termsWithIndexDict[node.text]; + if (Array.isArray(resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos) == false) { + + $textContent.append('

' + resJSON.termsintext.sentences.sent[resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos.substring(0, resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos.indexOf("/")) - 1] + '


'); + + mark(resJSON.termsintext.sentences.sent[resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos.substring(0, resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos.indexOf("/")) - 1]); + } + if (Array.isArray(resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos)) { + let sentIndex = []; + let sentsForMark = []; + for (let elementForUploadResultListDbClickAndEnterPress of resJSON.termsintext.exporterms.term[selectedTermInTermTree].sentpos) { + if (!sentIndex.includes(parseInt(elementForUploadResultListDbClickAndEnterPress.substring(0, elementForUploadResultListDbClickAndEnterPress.indexOf("/")) - 1))) { + $textContent.append('

' + resJSON.termsintext.sentences.sent[elementForUploadResultListDbClickAndEnterPress.substring(0, elementForUploadResultListDbClickAndEnterPress.indexOf("/")) - 1] + '


'); + sentsForMark.push(resJSON.termsintext.sentences.sent[elementForUploadResultListDbClickAndEnterPress.substring(0, elementForUploadResultListDbClickAndEnterPress.indexOf("/")) - 1]); + sentIndex.push(parseInt(elementForUploadResultListDbClickAndEnterPress.substring(0, elementForUploadResultListDbClickAndEnterPress.indexOf("/")) - 1)); + } + } + mark(sentsForMark); + } + markTerms(node.text); + } + }); // add array data to bootstrap-treeview and view it on page } if (resJSON.termsintext.exporterms.term[valOfSelectedElementInUploadResultList].hasOwnProperty('relup') == false && resJSON.termsintext.exporterms.term[valOfSelectedElementInUploadResultList].hasOwnProperty('reldown') == false) { $termTree.treeview({}); } - // Highlight-within-textarea - // https://github.com/lonekorean/highlight-within-textarea - -/* function onInput(input) { - let term = $("#uploadResultList option:selected").text().replace(/\s?([-])\s?/g,'-'); - var regex = new RegExp('\\b(\\w*' + term + '\\w*)\\b', 'gi'); - return regex; - } - $textContent.highlightWithinTextarea(onInput); */ - markTerms($("#uploadResultList option:selected").text().replace(/\s?([-])\s?/g,'-')); // visualize noun chunk / term From 6ef7f6ffe588206f89f831ddb217bac34defea3e Mon Sep 17 00:00:00 2001 From: Kirill Malakhov Date: Thu, 25 Jul 2019 16:45:43 +0300 Subject: [PATCH 7/7] Update changelog --- CHANGELOG.md | 9 +++++++++ templates/index.html | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9438ed5..fb864d2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## v0.5.1, 2019-07-25 + +### 🔴 Виправлення помилок + +- Виправлено дерево термінів: + Реалізовано активне дерево термінів, тобто - перехід до вибраного терміну в дереві термінів (відповідне відображення речень з терміном в елементі `#term-tree` та виділення речень з терміном в `sents_from_text`). +- Дрібні виправлення інтерфейсу. +- Видалено невикористовувані `JavaScript`-бібліотеки. + ## v0.5.0, 2019-07-25 ### 🏭 Нові можливості diff --git a/templates/index.html b/templates/index.html index 25d9d25..fdaa856 100644 --- a/templates/index.html +++ b/templates/index.html @@ -2,7 +2,7 @@ - Конспект 2019 - v0.5.0 + Конспект 2019 - v0.5.1