@windward/core 0.2.3 → 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',
@@ -145,14 +145,15 @@
 <script>
 import { mapGetters, mapMutations } from 'vuex'
 import _ from 'lodash'
+import DialogBox from '~/components/Core/DialogBox.vue'
 import Crypto from '~/helpers/Crypto'
 import Course from '~/models/Course'
-import SpeedDial from '~/components/SpeedDial.vue'
+import SpeedDial from '~/components/Core/SpeedDial.vue'
 
 import CourseGlossaryForm from './CourseGlossaryForm'
 export default {
     name: 'CourseGlossary',
-    components: { CourseGlossaryForm, SpeedDial },
+    components: { DialogBox, CourseGlossaryForm, SpeedDial },
     layout: 'course',
     middleware: ['auth'],
     props: {},

package/components/utils/glossary/CourseGlossaryForm.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script>
-import Form from '~/components/Form'
+import Form from '~/components/Core/Form'
 export default {
     name: 'CourseGlossaryForm',
     extends: Form,

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/content/blocks/image.ts

@@ -1,5 +1,5 @@
 export default {
     title: 'Pick an image',
     description: 'Pick an image to display',
-    no_image_url: 'No Image Selected',
+    no_image_url: 'No Image Set',
 }

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/content/blocks/image.ts

@@ -1,5 +1,5 @@
 export default {
     title: 'Elige una imagen',
     description: 'Elige una imagen para mostrar',
-    no_image_url: 'No hay imagen seleccionada ',
+    no_image_url: 'Sin conjunto de imágenes ',
 }