@windward/core 0.3.0 → 0.4.0

package/components/utils/glossary/CourseGlossary.vue

@@ -14,7 +14,7 @@
                             <DialogBox
                                 v-model="dialog"
                                 color="primary"
-                                max-width="600px"
+                                max-width="600"
                                 :trigger="
                                     $PermissionService.userHasAccessTo(
                                         'windward.global.course,windward.organization.course.contentBlock',

package/config/tinymce.config.ts

@@ -24,6 +24,14 @@ export default {
                                 cmd: false,
                                 text: 'i',
                             },
+                            {
+                                cmd: false,
+                                text: '\\$',
+                            },
+                            {
+                                cmd: false,
+                                text: '\\%',
+                            },
                             {
                                 cmd: true,
                                 text: '\\pi',
@@ -31,44 +39,43 @@ export default {
                             },
                             {
                                 cmd: true,
-                                text: '{x}^{2}',
-                                latex: 'x^2',
+                                text: 'x^2',
+                                latex: '^2',
                             },
                             {
                                 cmd: true,
                                 text: '{x}^{y}',
-                                latex: '\\placeholder{x}^\\placeholder{y}',
+                                latex: '^\\placeholder{}',
                             },
                             {
                                 cmd: true,
                                 text: '{x}_{y}',
-                                latex: '\\placeholder{x}_\\placeholder{y}',
+                                latex: '_\\placeholder{}',
                             },
                             {
                                 text: '\\sqrt{x}',
-                                latex: '\\sqrt{x}',
+                                latex: '\\sqrt{\\placeholder{}}',
                                 cmd: true,
                             },
                             {
-                                latex: '\\sqrt[\\placeholder{n}]{\\placeholder{x}}',
+                                latex: '\\sqrt[\\placeholder{}]{\\placeholder{}}',
                                 text: '\\sqrt[n]{x}',
                                 cmd: true,
                             },
                             {
-                                cmd: false,
+                                cmd: true,
                                 text: '\\frac{x}{y}',
-                                latex:
-                                    '\\frac\n' +
-                                    '    {\\placeholder[numerator]{?}}\n' +
-                                    '    {\\placeholder[denominator]{?}}',
+                                latex: '\\frac',
                             },
                             {
-                                cmd: false,
+                                cmd: true,
                                 text: '\\left|x\\right|',
+                                latex: '\\left|\\placeholder{}\\right|',
                             },
                             {
-                                cmd: false,
-                                text: '\\left\\{\\right\\}',
+                                cmd: true,
+                                text: '\\left\\{x\\right\\}',
+                                latex: '\\left\\{\\placeholder{}\\right\\}',
                             },
                             {
                                 cmd: false,
@@ -78,6 +85,7 @@ export default {
                                 cmd: false,
                                 text: '(x,y)',
                             },
+
                         ],
                     },
                     {

package/helpers/FillInBlankHelper.ts

@@ -1,53 +1,59 @@
-
 export default class FillInBlankHelper {
-
-    private static FillBlankRegex = /<span.*?.class="windward-fill-blank".*?>(.*?)<\/span>/gi;
+    private static FillBlankRegex =
+        /<span.*?.class="windward-fill-blank".*?>(.*?)<\/span>/gi
 
     public static containsFillInBlank(content: string): boolean {
-        const regex = new RegExp(this.FillBlankRegex);
+        const regex = new RegExp(this.FillBlankRegex)
 
-        return regex.exec(content) !== null;
+        return regex.exec(content) !== null
     }
 
     public static makeToolTip(htmlString: string): string {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(htmlString, "text/html");
+        const parser: any = new DOMParser()
+        const doc: any = parser.parseFromString(htmlString, 'text/html')
         // doc.body.firstChild can be null
-        let answer = doc.body.firstChild ? doc.body.firstChild.textContent : "";
-        let feedback = "";
-        if (doc.body.getElementsByClassName("windward-fill-blank")[0]["dataset"]["feedback"] !== undefined) {
-            feedback = doc.body.getElementsByClassName("windward-fill-blank")[0]["dataset"]["feedback"];
+        let answer = doc.body.firstChild ? doc.body.firstChild.textContent : ''
+        let feedback = ''
+        if (
+            doc.body.getElementsByClassName('windward-fill-blank')[0][
+                'dataset'
+            ]['feedback'] !== undefined
+        ) {
+            feedback = doc.body.getElementsByClassName(
+                'windward-fill-blank'
+            )[0]['dataset']['feedback']
         }
 
         return (
-            "<plugin-core-fill-in-blank-input answer=\"" + answer + "\" description=\"" + feedback + "\">" +
-            "</template>" + "</plugin-core-fill-in-blank-input>");
-
+            '<plugin-core-fill-in-blank-input answer="' +
+            answer +
+            '" description="' +
+            feedback +
+            '">' +
+            '</template>' +
+            '</plugin-core-fill-in-blank-input>'
+        )
     }
 
-    public escapeHtml(html) {
-        var text = document.createTextNode(html);
-        var p = document.createElement("p");
-        p.appendChild(text);
-        return p.innerHTML;
+    public escapeHtml(html: any) {
+        var text = document.createTextNode(html)
+        var p = document.createElement('p')
+        p.appendChild(text)
+        return p.innerHTML
     }
 
     public static renderFillInTHeBlankHtml(content: string, glossary: any) {
-        const regex = new RegExp(this.FillBlankRegex);
-
+        const regex = new RegExp(this.FillBlankRegex)
 
-        let match;
+        let match
         while ((match = regex.exec(content)) !== null) {
             // This is necessary to avoid infinite loops with zero-width matches
             if (match.index === regex.lastIndex) {
-                regex.lastIndex++;
+                regex.lastIndex++
             }
-            content = content.replace(
-                match[0],
-                this.makeToolTip(match[0])
-            );
+            content = content.replace(match[0], this.makeToolTip(match[0]))
         }
 
-        return content;
+        return content
     }
 }

package/helpers/GlossaryHelper.ts

@@ -1,53 +1,49 @@
-import GlossaryTerm from "../helpers/GlossaryTerm";
+import GlossaryTerm from '../helpers/GlossaryTerm'
 import * as _ from 'lodash'
 
 export default class GlossaryHelper {
-   private static glossaryRegex = /<span.*?.class="glossary-word".*?>(.*?)<\/span>/g
-   public static makeToolTip(term :GlossaryTerm,text :String): string {
-       let word =
-           _.isString(term.term)?
-       '<template v-slot:term>' +
-               text +
-       '</template>' :''
-       let definition =
-           _.isString(term.definition)?
-               '<template v-slot:definition>' +
-               term.definition +
-               '</template>' :''
-       let alternate_forms =
-           _.isString(term.alternate_forms)?
-               '<template v-slot:alternate_forms>' +
-               term.alternate_forms +
-               '</template>' :''
-       let related_terms =
-           _.isString(term.related_term)?
-               '<template v-slot:related_terms>' +
-               term.related_term +
-               '</template>' :''
-       return (
-           '<plugin-core-glossary-tool-tip>' +
-           word
-           +
-           definition
-           +
-           alternate_forms
-           +
-           related_terms
-           +
-           '</plugin-core-glossary-tool-tip>')
-
+    private static glossaryRegex =
+        /<span.*?.class="glossary-word".*?>(.*?)<\/span>/g
+    public static makeToolTip(term: GlossaryTerm, text: String): string {
+        let word = _.isString(term.term)
+            ? '<template v-slot:term>' + text + '</template>'
+            : ''
+        let definition = _.isString(term.definition)
+            ? '<template v-slot:definition>' + term.definition + '</template>'
+            : ''
+        let alternate_forms = _.isString(term.alternate_forms)
+            ? '<template v-slot:alternate_forms>' +
+              term.alternate_forms +
+              '</template>'
+            : ''
+        let related_terms = _.isString(term.related_term)
+            ? '<template v-slot:related_terms>' +
+              term.related_term +
+              '</template>'
+            : ''
+        return (
+            '<plugin-core-glossary-tool-tip>' +
+            word +
+            definition +
+            alternate_forms +
+            related_terms +
+            '</plugin-core-glossary-tool-tip>'
+        )
     }
-    public static containsGlossaryTerms(content :string): boolean {
+    public static containsGlossaryTerms(content: string): boolean {
         const regex = new RegExp(this.glossaryRegex)
 
         return regex.exec(content) !== null
     }
 
-    public static getContentVerifiedGlossaryTerms(content :string, glossary :any) {
-        const regex =  new RegExp( this.glossaryRegex)
+    public static getContentVerifiedGlossaryTerms(
+        content: string,
+        glossary: any
+    ) {
+        const regex = new RegExp(this.glossaryRegex)
         const currentGlossary = glossary
 
-        let match
+        let match: any
         const verifiedTerms: GlossaryTerm[] = []
         while ((match = regex.exec(content)) !== null) {
             // This is necessary to avoid infinite loops with zero-width matches
@@ -56,28 +52,40 @@ export default class GlossaryHelper {
             }
 
             // The result can be accessed through the `m`-variable.
-            currentGlossary.forEach((term) => {
+            currentGlossary.forEach((term: any) => {
                 let addTerm = true
-                verifiedTerms.forEach((verifiedTerm)=>{
-                    if(_.trim(_.toLower(verifiedTerm.term)) === _.trim(_.toLower(term.term))){
+                verifiedTerms.forEach((verifiedTerm) => {
+                    if (
+                        _.trim(_.toLower(verifiedTerm.term)) ===
+                        _.trim(_.toLower(term.term))
+                    ) {
                         addTerm = false
                     }
-            })
-                if (_.trim(_.toLower(match[1]))=== _.trim(_.toLower(term.term)) && addTerm) {
+                })
+                if (
+                    _.trim(_.toLower(match[1])) ===
+                        _.trim(_.toLower(term.term)) &&
+                    addTerm
+                ) {
                     verifiedTerms.push(new GlossaryTerm(term))
                 }
             })
-
         }
 
         return verifiedTerms
     }
 
-    public static getContentUnVerifiedGlossaryTerms(content :string, glossary :any) {
-        const regex =  new RegExp( this.glossaryRegex)
-
-        let match
-        const verifiedTerms = this.getContentVerifiedGlossaryTerms(content,glossary)
+    public static getContentUnVerifiedGlossaryTerms(
+        content: string,
+        glossary: any
+    ) {
+        const regex: any = new RegExp(this.glossaryRegex)
+
+        let match: any
+        const verifiedTerms = this.getContentVerifiedGlossaryTerms(
+            content,
+            glossary
+        )
         const unVerifiedTerms: GlossaryTerm[] = []
         while ((match = regex.exec(content)) !== null) {
             // This is necessary to avoid infinite loops with zero-width matches
@@ -87,33 +95,41 @@ export default class GlossaryHelper {
 
             let inGlossary = []
 
-            inGlossary = glossary.filter(item =>  {
-                if(_.trim(_.toLower(item.term ))=== _.trim(_.toLower(match[1]))){
+            inGlossary = glossary.filter((item: any) => {
+                if (
+                    _.trim(_.toLower(item.term)) === _.trim(_.toLower(match[1]))
+                ) {
                     return item
-
                 }
-            });
+            })
 
             let inUnverifiedArray = false
-            unVerifiedTerms.forEach((unVerifiedTerm)=>{
-                if(_.trim(_.toLower(unVerifiedTerm.term)) ===  _.trim(_.toLower(match[1]))){
+            unVerifiedTerms.forEach((unVerifiedTerm: any) => {
+                if (
+                    _.trim(_.toLower(unVerifiedTerm.term)) ===
+                    _.trim(_.toLower(match[1]))
+                ) {
                     inUnverifiedArray = true
                 }
             })
-            if (  inGlossary.length===0 && !inUnverifiedArray){
-                unVerifiedTerms.push(new GlossaryTerm( {term:_.trim(match[1]),definition:'n/a'}))
+            if (inGlossary.length === 0 && !inUnverifiedArray) {
+                unVerifiedTerms.push(
+                    new GlossaryTerm({
+                        term: _.trim(match[1]),
+                        definition: 'n/a',
+                    })
+                )
             }
-
-
         }
 
         return unVerifiedTerms
     }
-    public static renderGlossaryWordsHtml(content :string, glossary :any) {
-        const regex = new RegExp( this.glossaryRegex)
-        const currentGlossary = glossary
+    public static renderGlossaryWordsHtml(content: string, glossary: any) {
+        const regex: any = new RegExp(this.glossaryRegex)
+        const currentGlossary: any = glossary
+
+        let match: any = []
 
-        let match
         while ((match = regex.exec(content)) !== null) {
             // This is necessary to avoid infinite loops with zero-width matches
             if (match.index === regex.lastIndex) {
@@ -121,15 +137,16 @@ export default class GlossaryHelper {
             }
 
             // The result can be accessed through the `m`-variable.
-                currentGlossary.forEach((term) => {
-                    if (_.trim(_.toLower(match[1]))=== _.trim(_.toLower(term.term))) {
-                        content = content.replace(
-                            match[0],
-                            this.makeToolTip(term,match[1])
-                        )
-                    }
-                })
-
+            currentGlossary.forEach((term: any) => {
+                if (
+                    _.trim(_.toLower(match[1])) === _.trim(_.toLower(term.term))
+                ) {
+                    content = content.replace(
+                        match[0],
+                        this.makeToolTip(term, match[1])
+                    )
+                }
+            })
         }
 
         return content

package/helpers/MathHelper.ts

@@ -1,6 +1,6 @@
 import * as mathLiveObject from 'mathlive'
 import * as _ from 'lodash'
-import { MathMLToLaTeX } from 'mathml-to-latex';
+import { MathMLToLaTeX } from 'mathml-to-latex'
 export default class MathHelper {
     /**
      * expose mathlive object
@@ -67,38 +67,59 @@ export default class MathHelper {
         return content
     }
 
+
     /**
-     * wrapMathContentForTinyMCE
-     * @param content
-     * wrap content in span with math class for tinymce
-     * @return string
+     * Wraps math content.
+     *
+     * @param {string} match - The matched string to be wrapped.
+     * @param {string} content - The content to be replaced.
+     * @param {string} temp - The temporary string.
+     * @return {string} - The replaced content with wrapped math content.
+     */
+    private static wrapMathContentMatch(match : string, content: string, temp: string): string {
+        let wrapped = `<span class ='windward-math-content'>${match}</span> &nbsp;`;
+        if (match.match(/\$\$.*?\$\$/g) !== null && temp !== '') {
+            wrapped = `<span class ='windward-math-content'>$$$${temp}$$$</span> &nbsp;`;
+        }
+        return content.replaceAll(match, wrapped);
+    }
+
+    /**
+     * Checks if the given content already has a specific template wrapped around it.
+     *
+     * @param {string} content - The original content to be checked.
+     * @param {string} match - The template string to be compared against.
+     * @param {string} temp - The temp string to be compared against for final template.
+     * @return {boolean} - True if the content already contains the specified template, false otherwise.
+     */
+    private static contentAlreadyWrapped(content: string, match: string, temp: string): boolean {
+        const wrappedTemplates = [
+            `<span class=\"windward-math-content\" contenteditable=\"true\">$$${temp}$$</span>`,
+            `<span class='windward-math-content'>$$${temp}$$</span>`,
+            `<span class ='windward-math-content'>$$${temp}$$</span>`,
+            `<span class=\"windward-math-content\">$$${temp}$$</span>`];
+        return _.some(wrappedTemplates, template => _.includes(content, template));
+    }
+
+    /**
+     * Wraps math content for TinyMCE.
+     *
+     * @param {string} content - The content to be wrapped.
+     * @returns {string} - The wrapped content.
      */
     public static wrapMathContentForTinyMCE(content: string): string {
-        const regex = /(\*\*|\$\$)(.*?)\1/g
-        const matches = content.match(regex)
+        const regex = /(\*\*|\$\$)(.*?)\1/g;
+        const matches = content.match(regex);
+
         if (matches) {
             matches.forEach((match) => {
-                const temp = match.replace(/\$\$/g, '')
-                if (match.match(/\$\$.*?\$\$/g) !== null) {
-                    content = content.replace(
-                        match,
-                        "<span class ='windward-math-content'>$$$" +
-                            temp +
-                            '$$$</span>'
-                    )
-                }
-                if (match.match(/\*\*(.*?)\*\*/g) !== null) {
-                    content = content.replace(
-                        match,
-                        "<span class ='windward-math-content'>" +
-                            match +
-                            '</span>'
-                    )
+                const temp = match.replace(/\$\$/g, '');
+                if (!this.contentAlreadyWrapped(content, match, temp)) {
+                    content = this.wrapMathContentMatch(match, content, temp);
                 }
-            })
+            });
         }
-
-        return content
+        return content;
     }
 
     /**
@@ -109,7 +130,7 @@ export default class MathHelper {
      */
     public static checkMathContentWrappedForTMCE(content: string): boolean {
         const regex =
-            /\<span class ='windward-math-content'>(\*\*|\$\$)(.*?)\1<\/span>/g
+            /<span\s+class.*?=.*?(windward-math-content).*?>(.*?)<\/span>/g
 
         return regex.exec(content) !== null
     }
@@ -184,7 +205,7 @@ export default class MathHelper {
             MathHelper.convertContentLatexToHtml(
                 MathHelper.convertContentMathMLtoLatex(content)
             )
-        ).replace(/contenteditable="true"/g, '');
+        ).replace(/contenteditable="true"/g, '')
     }
 
     /**

package/helpers/tinymce/plugin.ts

@@ -1,3 +1,4 @@
+import MathHelper from "../MathHelper";
 const WindwardPlugins = function (editor: any) {
     let formula: any
     let fillInBlank: any
@@ -12,8 +13,6 @@ const WindwardPlugins = function (editor: any) {
         return editor.windowManager.openUrl({
             url: '/plugins/tinymce/math',
             title: 'Equation editor',
-            width: window.innerWidth*.50,
-            height: window.innerHeight*.75,
             buttons: [
                 {
                     type: 'cancel',
@@ -32,7 +31,7 @@ const WindwardPlugins = function (editor: any) {
                 editor.selection.setContent(
                     `        <span class='windward-math-content'>` +
                         formula +
-                        `</span>`
+                        `</span> `
                 )
 
                 editor.windowManager.close()
@@ -69,10 +68,15 @@ const WindwardPlugins = function (editor: any) {
         setOnClickEquationContent(editor)
         setOnClickFillInBlank(editor)
     })
+
     editor.on('SetContent', function () {
         setOnClickEquationContent(editor)
         setOnClickFillInBlank(editor)
     })
+    editor.on('input', function () {
+        setOnClickEquationContent(editor)
+        setOnClickFillInBlank(editor)
+    })
     function setOnClickEquationContent(editor: any) {
         const tinymceDoc = editor.getDoc()
         const mqSpan = tinymceDoc.getElementsByClassName(
@@ -86,7 +90,7 @@ const WindwardPlugins = function (editor: any) {
                 continue
             }
 
-            equationContent.onclick = (event: any) => {
+            equationContent.ondblclick = (event: any) => {
                 event.stopPropagation()
                 editor.execCommand('equation-window', {
                     latex: event.target.innerText,
@@ -100,8 +104,6 @@ const WindwardPlugins = function (editor: any) {
         return editor.windowManager.openUrl({
             url: '/plugins/tinymce/FIB',
             title: 'Fill in the blank',
-            width: window.innerWidth*.50,
-            height: window.innerHeight*.75,
             buttons: [
                 {
                     type: 'cancel',
@@ -193,7 +195,7 @@ const WindwardPlugins = function (editor: any) {
                 continue
             }
 
-            fib.onclick = (event: any) => {
+            fib.ondblclick = (event: any) => {
                 event.stopPropagation()
                 editor.execCommand('fib-window', {
                     answer: event.target.innerText,

package/i18n/en-US/components/settings/clickable_icon.ts

@@ -8,10 +8,12 @@ export default {
     item_color: 'Item Color',
     item_text: 'Item Text',
     autocolor: 'Auto-color Options',
+    icon_image: 'Use image for icon',
     display: {
         show_title: 'Always Show Title',
         show_background: 'Show Background',
         round_icon: 'Round Icons',
         italic_icon: 'Italic Icons',
+        large_icon: 'Large Icons',
     },
 }

package/i18n/en-US/components/settings/image.ts

@@ -2,11 +2,16 @@ export default {
     hide_background: 'Hide Background',
     modal: 'Click to open in modal',
     decorative: 'Decorative Image',
-    toggle_description:
+    decorative_toggle_description:
         'To meet accessibility standards, alt text is required for all images except for purely decorative images. This setting will add the proper alt text and screen reader text for learners.',
+    inherit_global_toggle_description:
+        'When enabled, the selected image will use alt text and screen reader text stored on the file, managed in the file manager. When disabled, the selected image will have its own unique alt text and screen reader text that is not shared globally on the file.',
     alt_description:
         'Alternative text is descriptive text that conveys the meaning and context of a visual item in a digital setting, intended for users who are visually impaired or otherwise unable to visually identify an image. This should be short and clear.',
     screenreader: 'Screen Reader Text',
     screenreader_description:
         'Screen reader text can be added to give a user using assistive technology more information about the elements on the page',
+    inherit: 'Inherit global settings',
+    inherit_no_alt: 'No global alt text available for file',
+    inherit_no_aria: 'No global screen reader text available for file',
 }

package/i18n/en-US/shared/settings.ts

@@ -22,4 +22,7 @@ export default {
         instructions: 'Instructions',
         placeholder: 'Enter text here',
     },
+    upload_file: 'Upload File',
+    alt_image: 'Alternate text for image',
+    aria_described: 'Aria described by',
 }

package/i18n/es-ES/components/settings/clickable_icon.ts

@@ -9,10 +9,12 @@ export default {
     item_color: 'Color del artículo',
     item_text: 'Texto del elemento',
     autocolor: 'Opciones de color automático',
+    icon_image: 'Usar imagen como ícono',
     display: {
         show_title: 'Mostrar siempre el título',
         show_background: 'Mostrar fondo',
         round_icon: 'Iconos redondos',
         italic_icon: 'Iconos en cursiva',
+        large_icon: 'Iconos grandes',
     },
 }

package/i18n/es-ES/components/settings/image.ts

@@ -2,11 +2,18 @@ export default {
     hide_background: 'Ocultar fondo',
     modal: 'Haga clic para abrir en modal',
     decorative: 'Imagen decorativa',
-    toggle_description:
+    decorative_toggle_description:
         'Para cumplir con los estándares de accesibilidad, se requiere texto alternativo para todas las imágenes, excepto para las imágenes puramente decorativas. Esta configuración agregará el texto alternativo y el texto del lector de pantalla adecuados para los estudiantes.',
+    inherit_global_toggle_description:
+        'Cuando está habilitado, la imagen seleccionada utilizará texto alternativo y texto del lector de pantalla almacenado en el archivo, administrado en el administrador de archivos. Cuando está deshabilitada, la imagen seleccionada tendrá su propio texto alternativo y texto de lector de pantalla que no se comparte globalmente en el archivo.',
     alt_description:
         'El texto alternativo es un texto descriptivo que transmite el significado y el contexto de un elemento visual en un entorno digital, destinado a usuarios con discapacidad visual o que no pueden identificar visualmente una imagen. Esto debe ser breve y claro.',
     screenreader: 'Texto del lector de pantalla',
     screenreader_description:
         'Se puede agregar texto al lector de pantalla para brindarle al usuario que utiliza tecnología de asistencia más información sobre los elementos de la página',
+    inherit: 'Heredar configuración global',
+    inherit_no_alt:
+        'No hay texto alternativo global disponible para el archivo',
+    inherit_no_aria:
+        'No hay texto de lector de pantalla global disponible para el archivo',
 }