diff --git a/lms/static/js/edxnotes/plugins/ai_summarize.js b/lms/static/js/edxnotes/plugins/ai_summarize.js new file mode 100644 index 000000000000..4aa86ffb5456 --- /dev/null +++ b/lms/static/js/edxnotes/plugins/ai_summarize.js @@ -0,0 +1,101 @@ +(function(define, undefined) { + 'use strict'; + define(['jquery', 'underscore', 'annotator_1.2.9'], function($, _, Annotator) { + /** + * AiSummarize plugin adds a button to the annotatorjs adder in order to + * summarize the text selected and save as annotation. + **/ + Annotator.Plugin.AiSummarize = function() { + Annotator.Plugin.apply(this, arguments); + }; + + $.extend(Annotator.Plugin.AiSummarize.prototype, new Annotator.Plugin(), { + pluginInit: function() { + // Overrides of annotatorjs HTML/CSS to add summarize button. + var style = document.createElement('style'); + style.innerHTML = ` + .annotator-adder::before { + content: ''; + width: 10px; + height: 10px; + background-color: white; + display: block; + position: absolute; + top: 100%; + left: 5px; + border-bottom: 1px solid gray; + border-right: 1px solid gray; + z-index: 0; + transform: translateY(-50%) rotate(45deg); + } + + .annotator-adder button::before, + .annotator-adder button::after { + display: none !important; + } + + .annotator-adder #annotateButton, + .annotator-adder #summarizeButton { + border: none !important; + background: rgb(0, 48, 87) !important; + box-shadow: none !important; + width: initial; + transition: color .1s; + text-indent: initial; + font-size: 20px; + padding: 0; + height: fit-content; + color: white; + border-radius: 5px; + padding-left: 5px; + padding-right: 5px; + font-weight: normal; + } + + .annotator-adder button i.fa { + font-style: normal; + } + + .annotator-adder { + width: fit-content; + height: fit-content; + padding: 5px; + background-color: white; + border: 1px solid gray; + gap: 5px; + } + `; + document.head.appendChild(style); + var annotator = this.annotator; + annotator.adder[0].children[0].id = 'annotateButton'; + annotator.adder[0].children[0].innerHTML = ''; + annotator.adder[0].innerHTML += ` + + `; + function onDisplayStyleChange(mutationsList, observer) { + for (const mutation of mutationsList) { + if (mutation.type === 'attributes' && mutation.attributeName === 'style') { + if (mutation.target.style.display == 'block') { + mutation.target.style.display = 'flex'; + }; + }; + }; + }; + const observer = new MutationObserver(onDisplayStyleChange); + const config = { + attributes: true, + attributeFilter: ['style'], + }; + observer.observe(annotator.adder[0], config); + + const summarizeButton = document.getElementById('summarizeButton'); + summarizeButton.addEventListener('click', this.summarize); + }, + summarize: function(event) { + // implement summarize functionality. + }, + }); + }); +}).call(this, define || RequireJS.define); diff --git a/lms/static/js/edxnotes/views/notes_factory.js b/lms/static/js/edxnotes/views/notes_factory.js index 5c98bc7683b7..7513a0bdd141 100644 --- a/lms/static/js/edxnotes/views/notes_factory.js +++ b/lms/static/js/edxnotes/views/notes_factory.js @@ -7,9 +7,11 @@ 'js/edxnotes/plugins/events', 'js/edxnotes/plugins/accessibility', 'js/edxnotes/plugins/caret_navigation', 'js/edxnotes/plugins/store_error_handler', - 'js/edxnotes/plugins/search_override' + 'js/edxnotes/plugins/search_override', + + 'js/edxnotes/plugins/ai_summarize' ], function($, _, Annotator, NotesLogger, NotesCollector) { - var plugins = ['Auth', 'Store', 'Scroller', 'Events', 'Accessibility', 'CaretNavigation', 'Tags'], + var plugins = ['Auth', 'Store', 'Scroller', 'Events', 'Accessibility', 'CaretNavigation', 'Tags', 'AiSummarize'], getOptions, setupPlugins, getAnnotator; /**