@windward/core 0.0.1

package/components/utils/ContentViewer.vue

@@ -0,0 +1,69 @@
+<template>
+    <component
+        :class="textViewer ? 'text-viewer' : ''"
+        :is="convertedContent"
+    ></component>
+</template>
+
+<script>
+import MathHelper from '../../helpers/MathHelper'
+import GlossaryHelper from '../../helpers/GlossaryHelper'
+import { mapGetters } from 'vuex'
+import Vue from 'vue'
+export default {
+    name: 'ContentViewer',
+    props: {
+        value: { type: String, required: false, default: '' },
+        textViewer: { type: Boolean, required: false, default: false },
+    },
+    data() {
+        return {
+            content: '',
+        }
+    },
+    beforeMount() {},
+    computed: {
+        ...mapGetters({
+            course: 'course/get',
+        }),
+        convertedContent() {
+            let content = ''
+            if (this.value) {
+                if (
+                    GlossaryHelper.containsGlossaryTerms(this.value) &&
+                    _.isObject(this.course.metadata) &&
+                    _.isArray(this.course.metadata.glossary)
+                ) {
+                    content = GlossaryHelper.renderGlossaryWordsHtml(
+                        MathHelper.convertMathContentToHtml(this.value),
+                        this.course.metadata.glossary
+                    )
+                } else {
+                    content = MathHelper.convertMathContentToHtml(this.value)
+                }
+            }
+            return Vue.compile('<div>' + content + '</div>')
+        },
+    },
+}
+</script>
+
+<style>
+.text-viewer {
+    min-height: 100px;
+}
+.text-viewer table tr td {
+    padding: 10px !important;
+}
+@media (max-width: 600px) {
+    .text-viewer {
+        overflow-x: auto !important;
+        display: flex !important;
+        flex-wrap: wrap !important;
+    }
+}
+img {
+    height: 100% !important;
+    width: 100% !important;
+}
+</style>

package/components/utils/MathExpressionEditor.vue

@@ -0,0 +1,294 @@
+<template>
+    <div>
+        <v-card flat class="py-12">
+            <label>Add Math Below</label>
+            <math-live-wrapper
+                ref="mathfield"
+                v-model="formula"
+                :options="options"
+                :value="value"
+                @change="submit"
+            ></math-live-wrapper>
+        </v-card>
+        <v-card>
+            <v-card-text>
+                <v-tabs
+                    v-model="tab"
+                    align-with-title
+                    next-icon="mdi-arrow-right-bold-box-outline"
+                    prev-icon="mdi-arrow-left-bold-box-outline"
+                    show-arrows
+                >
+                    <v-tabs-slider color="primary"></v-tabs-slider>
+                    <v-tab>
+                        {{ $t('shared.accessibility.accessibility') }}</v-tab
+                    >
+                    <v-tab
+                        v-for="(keyboard, index) in config.buttons.groups"
+                        :key="index"
+                    >
+                        {{ $tc(keyboard.name, keyboard.buttons.length) }}
+                    </v-tab>
+                </v-tabs>
+
+                <v-tabs-items v-model="tab">
+                    <v-tab-item>
+                        <v-card-text>
+                            <v-container>
+                                <v-row align="center">
+                                    <v-checkbox
+                                        v-model="spokenTextChanged"
+                                        hide-details
+                                        class="shrink mr-2 mt-0"
+                                    ></v-checkbox>
+                                    <v-textarea
+                                        v-model="spokenText"
+                                        :disabled="!spokenTextChanged"
+                                        :label="
+                                            $t(
+                                                'shared.accessibility.set_aria_label_text'
+                                            )
+                                        "
+                                        class="col-md-12"
+                                        @input="submit"
+                                    ></v-textarea>
+                                </v-row>
+                            </v-container>
+
+                            <br />
+                            <v-btn
+                                primary
+                                color="success"
+                                @click="setSRText"
+                                :class="shrinkClass"
+                                >{{ $t('shared.accessibility.default_text') }}
+                            </v-btn>
+                            <v-btn
+                                :disabled="spokenTextChanged"
+                                color="primary"
+                                :class="shrinkClass"
+                                @click="readSRText"
+                                >{{
+                                    $t(
+                                        'shared.accessibility.read_default_aria_label_text'
+                                    )
+                                }}</v-btn
+                            >
+                        </v-card-text>
+                    </v-tab-item>
+                    <v-tab-item
+                        v-for="(keyboard, index) in config.buttons.groups"
+                        :key="index"
+                    >
+                        <v-card flat>
+                            <v-card-text>
+                                <v-container>
+                                    <v-btn-toggle mandatory>
+                                        <button
+                                            v-for="(
+                                                button, buttonIndex
+                                            ) in keyboard.buttons"
+                                            :key="buttonIndex"
+                                            class="btn"
+                                            @click="insert(button)"
+                                        >
+                                            <div
+                                                v-html="
+                                                    convertLatexToMarkup(
+                                                        button.text
+                                                    )
+                                                "
+                                            ></div>
+                                        </button>
+                                    </v-btn-toggle>
+                                </v-container>
+                            </v-card-text>
+                        </v-card>
+                    </v-tab-item>
+                </v-tabs-items>
+            </v-card-text>
+        </v-card>
+    </div>
+</template>
+
+<script>
+import MathHelper from '../../helpers/MathHelper'
+import MathLiveWrapper from './MathLiveWrapper'
+import tinymceConfig from '../../config/tinymce.config'
+export default {
+    components: { MathLiveWrapper },
+    layout: 'plugin',
+    props: {
+        mode: { type: String, required: false, default: 'plugin' },
+        value: { type: String, required: false, default: null },
+        shrinkFont: { type: Boolean, required: false, default: null },
+    },
+    data() {
+        return {
+            formula: '',
+            keystroke: '',
+            spokenText: '',
+            spokenTextChanged: false,
+            options: {
+                smartFence: true,
+                smartMode: true,
+                virtualKeyboardMode: 'manual',
+                keypressSound: 'none',
+                plonkSound: 'none',
+                readOnly: false,
+            },
+            tab: null,
+            toggle_exclusive: true,
+            panel: [],
+            shrinkClass: '',
+        }
+    },
+    computed: {
+        config() {
+            const plugin = tinymceConfig.plugins.filter((item) => {
+                return item.name === 'math'
+            })
+
+            return plugin[0]
+        },
+    },
+    beforeMount() {
+        if (this.mode === 'standalone') {
+            this.initStandaloneMode()
+        }
+    },
+    mounted() {
+        if (this.shrinkFont === true) {
+            this.shrinkClass = 'adjustFont'
+        }
+        if (this.mode === 'plugin') {
+            window.parent.postMessage(
+                {
+                    mceAction: 'math-plugin-mounted',
+                    status: true,
+                },
+                '*'
+            )
+        }
+        this.$refs.mathfield.focus()
+    },
+    created() {
+        if (this.mode === 'plugin') {
+            window.parent.addEventListener('message', (event) => {
+                if (event.data.latex) this.initPluginMode(event.data.latex)
+            })
+        }
+    },
+    methods: {
+        initStandaloneMode() {
+            if (this.value && MathHelper.containsLatex(this.value)) {
+                this.formula = MathHelper.parseLatexString(this.value)
+            } else if (
+                this.value &&
+                MathHelper.containSREnhancedLatex(this.value)
+            ) {
+                const formulaObject = MathHelper.parseSREnhancedLatexString(
+                    this.value
+                )
+                this.formula = formulaObject.latex
+                this.spokenText = formulaObject.sr_text
+                this.spokenTextChanged = true
+            } else if (this.value) {
+                this.formula = this.value
+            }
+        },
+        initPluginMode(value) {
+            if (value && MathHelper.containsLatex(value)) {
+                this.formula = MathHelper.parseLatexString(value)
+            } else if (value && MathHelper.containSREnhancedLatex(value)) {
+                const formulaObject =
+                    MathHelper.parseSREnhancedLatexString(value)
+                this.formula = formulaObject.latex
+                this.spokenText = formulaObject.sr_text
+                this.spokenTextChanged = true
+            }
+            this.$refs.mathfield.setValue(this.formula)
+        },
+        convertLatexToSpeakableText(latex) {
+            return MathHelper.Mathlive.convertLatexToSpeakableText(latex)
+        },
+        convertLatexToMarkup(latex) {
+            return MathHelper.Mathlive.convertLatexToMarkup(latex)
+        },
+        submit() {
+            let latex = '$$' + this.formula + '$$'
+            if (this.spokenTextChanged) {
+                latex =
+                    '**' +
+                    JSON.stringify({
+                        latex: this.formula,
+                        sr_text: this.spokenText,
+                    }) +
+                    '**'
+            }
+            if (this.mode === 'plugin') {
+                window.parent.postMessage(
+                    {
+                        mceAction: 'equation-insert',
+                        content: latex,
+                    },
+                    '*'
+                )
+            } else {
+                this.$emit('input', latex)
+            }
+        },
+        getBtnCode(button) {
+            if (button.cmd) {
+                return button.latex
+            }
+            return button.text
+        },
+        insert(latex) {
+            this.$refs.mathfield.insert(this.getBtnCode(latex), {
+                selectionMode: 'placeholder',
+            })
+        },
+
+        setSRText() {
+            this.spokenTextChanged = false
+            this.spokenText = this.convertLatexToSpeakableText(this.formula)
+        },
+        readSRText() {
+            this.$refs.mathfield.executeCommand('speak')
+        },
+    },
+}
+</script>
+
+<style scoped>
+/* stylelint-disable-next-line selector-type-no-unknown */
+math-field {
+    min-height: 150px;
+    outline: 2px solid #64b5f6;
+    border-radius: 4px;
+}
+/* stylelint-disable-next-line selector-type-no-unknown */
+math-field:focus-within {
+    outline: 4px solid #52d70b;
+    border-radius: 4px;
+    background: rgba(251, 187, 182, 0.1);
+}
+.btn {
+    cursor: pointer;
+    margin: 0 5px 5px 0;
+    border: 1px solid #595959;
+    background: white;
+    border-radius: 5px;
+    padding: 5px 10px;
+    min-height: 40px;
+}
+
+.btn:hover {
+    background: #595959;
+    color: white;
+}
+.adjustFont {
+    font-size: 12px !important;
+}
+</style>

package/components/utils/MathLiveWrapper.vue

@@ -0,0 +1,86 @@
+<template>
+    <math-field :id="id"><slot></slot></math-field>
+</template>
+
+<script>
+import * as mathlive from 'mathlive'
+import 'mathlive/dist/mathlive-fonts.css'
+import 'mathlive/dist/mathlive-static.css'
+export default {
+    props: {
+        id: { type: String, default: '' },
+        value: { type: String, default: '' },
+        options: { type: Object, default: () => ({}) },
+    },
+    data() {
+        return {
+            version: mathlive.version.mathlive,
+            key: 1,
+        }
+    },
+    watch: {
+        options: {
+            deep: true,
+            handler(newValue) {
+                this.$el.setOptions(newValue)
+            },
+        },
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.$el.setOptions({
+                ...this.options,
+                macros: {
+                    ...this.$el.getOptions('macros'),
+                    smallfrac: '{}^{#1}\\!\\!/\\!{}_{#2}',
+                },
+                onContentDidChange: () => {
+                    this.$emit('input', this.$el.getValue())
+                    this.$emit('change')
+                },
+                onFocus: () => {
+                    this.$emit('focus')
+                },
+                onBlur: () => {
+                    this.$emit('blur')
+                },
+                onUndoStateDidChange: (t, e) => {
+                    this.$emit('undo-state-did-change', e)
+                },
+                onReadAloudStatus: (t, e) => {
+                    this.$emit('read-aloud-status-change', e)
+                },
+            })
+        })
+        if (this.value !== '') {
+            this.$el.setValue(this.value)
+        }
+    },
+    methods: {
+        executeCommand(command) {
+            this.$el.executeCommand(command)
+        },
+        hasFocus() {
+            return this.$el.hasFocus()
+        },
+        focus() {
+            this.$el.focus()
+        },
+        blur() {
+            this.$el.blur()
+        },
+        getValue(t) {
+            return this.$el.getValue(t)
+        },
+        insert(content, options) {
+            this.$el.insert(content, options)
+        },
+        select() {
+            this.$el.select()
+        },
+        setValue(value) {
+            this.$el.setValue(value)
+        },
+    },
+}
+</script>

package/components/utils/TinyMCEWrapper.vue

@@ -0,0 +1,103 @@
+<template>
+    <editor
+        v-model="text"
+        initial-value=""
+        :api-key="api_key"
+        :init="config"
+        tag-name="div"
+        model-events="change keydown blur focus paste input"
+        @input="change"
+    >
+    </editor>
+</template>
+
+<script>
+import Editor from '@tinymce/tinymce-vue'
+import { MathEditorPlugin } from '../../helpers/tinymce/plugin'
+export default {
+    name: 'ContentEditorRichText',
+    components: {
+        editor: Editor,
+    },
+    props: {
+        value: { type: String, required: true, default: '' },
+        api_key: { type: String, required: true, default: '' },
+    },
+    beforeMount() {
+        this.text = this.value
+    },
+    data() {
+        return {
+            render: true,
+            text: '',
+            config: {
+                height: 500,
+                menubar: true,
+                plugins: [
+                    'advlist autolink lists link image charmap',
+                    'searchreplace visualblocks code fullscreen',
+                    'print preview anchor insertdatetime media',
+                    'paste code help wordcount table MathEditor ',
+                ],
+                toolbar:
+                    'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | MathEditor | help',
+                setup() {
+                    // Here we can add plugin
+                    window.tinymce.PluginManager.add(
+                        'MathEditor',
+                        MathEditorPlugin
+                    )
+                },
+                formats: {
+                    glossary: {
+                        inline: 'span',
+                        attributes: {
+                            'aria-label': this.$t(
+                                'windward.core.components.utils.tiny_mce_wrapper.term'
+                            ),
+                        },
+                        classes: 'glossary-word',
+                    },
+                    removeformat: [
+                        // Configures `clear formatting` to remove the class glossary-word from spans and if the element then becomes empty it's left intact
+                        {
+                            selector: 'span',
+                            classes: 'glossary-word',
+                            remove: 'all',
+                        },
+                    ],
+                },
+                style_formats: [
+                    {
+                        title: this.$t(
+                            'windward.core.components.utils.tiny_mce_wrapper.term'
+                        ),
+                        format: 'glossary',
+                    },
+                ],
+                style_formats_merge: true,
+                placeholder: this.$t(
+                    'windward.core.shared.content_blocks.grouping.placeholder'
+                ),
+                //required as it will be displayed as inline style in tinymce renderer
+                content_style:
+                    '.glossary-word {\n' +
+                    '    display: inline-block;\n' +
+                    '    border-radius: 12px;\n' +
+                    '    padding: 0px 7px;\n' +
+                    '    background-color: #ffd269;\n ' +
+                    '    font-weight: bold;\n' +
+                    '    color: #1a1d1e;' +
+                    '}',
+                importcss_append: true,
+            },
+        }
+    },
+    updated() {},
+    methods: {
+        change() {
+            this.$emit('input', this.text)
+        },
+    },
+}
+</script>