From c318df99700c62ddfc874f78e61546cd915eae69 Mon Sep 17 00:00:00 2001 From: muditgoel135 Date: Sat, 30 May 2026 19:32:45 +0530 Subject: [PATCH 1/5] Improve MathEditor styles and toolbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add contributor and clean up HTML/CSS; major enhancement of MathEditor defaults. - contributors.txt: add Mudit Goel. - index.html: fix indentation, remove unused second editor instance, simplify initialization and comment out template calls. - lib/matheditor.css: formatting/whitespace cleanup and several style tweaks (button sizing, toolbar/wrapper adjustments, keyboard layout spacing and positioning). - lib/matheditor.js: large refactor/extension of default configuration — reorganized variables, expanded default_toolbar_buttons and default_toolbar_tabs, and massively extended button_meta with many new symbols, operators, calculus/trig/set-theory/logic/matrix entries; preserved keyboard_keys but reformatted. This change greatly expands available toolbar items and reorganizes defaults; please review and test for any integration or API impacts. --- contributors.txt | 1 + index.html | 25 +- lib/matheditor.css | 106 +++--- lib/matheditor.js | 783 ++++++++++++++++++++++++++++++++++++--------- lib/mathquill.css | 536 ++++++++++++++++++------------- 5 files changed, 1011 insertions(+), 440 deletions(-) diff --git a/contributors.txt b/contributors.txt index c53734e..219f6a6 100644 --- a/contributors.txt +++ b/contributors.txt @@ -1 +1,2 @@ Karan Bhutwala +Mudit Goel diff --git a/index.html b/index.html index 2509114..e2c83f9 100755 --- a/index.html +++ b/index.html @@ -1,30 +1,21 @@ + - - + + - -
-
-
-
-
-
+ +
\ No newline at end of file diff --git a/lib/matheditor.css b/lib/matheditor.css index 437cefa..e5622e3 100644 --- a/lib/matheditor.css +++ b/lib/matheditor.css @@ -1,6 +1,6 @@ -.matheditor-btn-span{ - width: 45px; - height: 30px; +.matheditor-btn-span { + width: auto; + height: auto; background: transparent; border: 1px solid #ddd; margin-right: 4px; @@ -14,40 +14,50 @@ font-size: 10pt; line-height: 30px; } -.matheditor-btn-span:hover{ + +.matheditor-btn-span:hover { background: #FFF; border: 1px solid #aaa } -.mq-editable-field span.mq-hasCursor{ - box-shadow: #68b4df 0 0 3px 2px !important; + +.mq-editable-field span.mq-hasCursor { + box-shadow: #68b4df 0 0 3px 2px !important; } -.op-btn .op-btn-icon{ + +.op-btn .op-btn-icon { width: 100%; text-align: center; cursor: pointer; } -div[class^="matheditor-wrapper-"]{ - /*margin: auto;*/ -} -div[class^="matheditor-toolbar-"]{ + +/* div[class^="matheditor-wrapper-"] { + margin: auto; +} */ + +div[class^="matheditor-toolbar-"] { margin-bottom: 3px; border: 1px solid #ddd; padding: 5px; border-radius: 4px; background: #FFF; } -div[class^="matheditor-wrapper-"] sup{ + +div[class^="matheditor-wrapper-"] sup { top: 0; } -div[class^="matheditor-wrapper-"] .mq-editable-field, .mq-math-mode .mq-editable-field{ + +div[class^="matheditor-wrapper-"] .mq-editable-field, +.mq-math-mode .mq-editable-field { border: 1px solid #ddd; border-radius: 4px; } -div[class^="matheditor-wrapper-"] .mq-editable-field.mq-focused{ + +div[class^="matheditor-wrapper-"] .mq-editable-field.mq-focused { border: 1px solid #ddd; border-radius: 4px; box-shadow: none; } + div[class^="matheditor-wrapper-"] .op-btn img { width: 14pt; margin: auto; @@ -55,20 +65,23 @@ div[class^="matheditor-wrapper-"] .op-btn img { position: relative; top: 5px; } -div[class^="matheditor-wrapper-"] .mq-root-block, .mq-math-mode .mq-root-block{ + +div[class^="matheditor-wrapper-"] .mq-root-block, +.mq-math-mode .mq-root-block { white-space: initial; word-wrap: break-word; box-shadow: none !important; } -div[class^="matheditor-wrapper-"] ul[class^="tabs-"]{ +div[class^="matheditor-wrapper-"] ul[class^="tabs-"] { margin: 0px; padding: 0px; list-style: none; border-bottom: 1px solid #f4f4f4; margin-bottom: 5px; } -div[class^="matheditor-wrapper-"] ul[class^="tabs-"] li{ + +div[class^="matheditor-wrapper-"] ul[class^="tabs-"] li { display: inline-block; padding: 2px 10px; cursor: pointer; @@ -76,26 +89,29 @@ div[class^="matheditor-wrapper-"] ul[class^="tabs-"] li{ height: 20px; } -div[class^="matheditor-wrapper-"] li.current{ +div[class^="matheditor-wrapper-"] li.current { background: #F9F9F9; color: #222; font-weight: bold; } -div[class^="matheditor-wrapper-"] .tab-content-me{ +div[class^="matheditor-wrapper-"] .tab-content-me { display: none; } -div[class^="matheditor-wrapper-"] .tab-content-me.current{ +div[class^="matheditor-wrapper-"] .tab-content-me.current { display: inline-block; } -[id^="selectable-cube_root-"] .mq-root-block, [id^="selectable-root-"] .mq-root-block, [id^="selectable-square_root-"] .mq-root-block{ - padding-top: 5px !important; - font-size: 10pt; +[id^="selectable-cube_root-"] .mq-root-block, +[id^="selectable-root-"] .mq-root-block, +[id^="selectable-square_root-"] .mq-root-block { + padding-top: 5px !important; + font-size: 10pt; } -[id^="tab-2-"] .mq-root-block, [id^="tab-3-"] .mq-root-block{ +[id^="tab-2-"] .mq-root-block, +[id^="tab-3-"] .mq-root-block { padding-top: 4px !important; font-size: 15pt; } @@ -104,7 +120,8 @@ div[class^="matheditor-wrapper-"] .tab-content-me.current{ margin-right: 0; margin-left: 0; } -span[id^="close-btn-"]{ + +span[id^="close-btn-"] { float: right; border: 1px solid; border-radius: 3px; @@ -112,17 +129,19 @@ span[id^="close-btn-"]{ color: pink; cursor: pointer; } -div[id^="keys-"]{ + +div[id^="keys-"] { text-align: center; - display: none; - position:fixed; - z-index:999999; - bottom:0px; - left:0px; - width:100%; + display: none; + position: fixed; + z-index: 999999; + bottom: 0px; + left: 0px; + width: 100%; background: #f5f5f5; } -div[id^="keys-"] .ks{ + +div[id^="keys-"] .ks { height: 45px; width: 35px; display: inline-block; @@ -134,26 +153,33 @@ div[id^="keys-"] .ks{ cursor: pointer; font-size: 14pt; } -div[id^="keys-"] .ks:hover{ + +div[id^="keys-"] .ks:hover { background: #cccccc; } -div[id^="keys-"] .ks:active{ + +div[id^="keys-"] .ks:active { background: #bbbbbb; } -div[id^="keys-"] .ks.long{ + +div[id^="keys-"] .ks.long { width: 45px; } -div[id^="keys-"] .ks.icon{ + +div[id^="keys-"] .ks.icon { font-weight: bold; font-size: 14pt; } -div[id^="keys-"] .ks.takeup{ + +div[id^="keys-"] .ks.takeup { background: #FFC0CB } -div[id^="keys-"] .ks.too_long{ + +div[id^="keys-"] .ks.too_long { background: #eeeeee; } -div.close-btn{ + +div.close-btn { height: 30px; position: relative; right: 8px; diff --git a/lib/matheditor.js b/lib/matheditor.js index b6e492a..996ab26 100755 --- a/lib/matheditor.js +++ b/lib/matheditor.js @@ -1,305 +1,778 @@ -function MathEditor(id){ +function MathEditor(id) { this.isMobile = false; //initiate as false // device detection - if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))){this.isMobile = true;} - this.MQ=null; + if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0, 4))) { this.isMobile = true; } + this.MQ = null; jq = window.jQuery; this.tabEnabled = true; - this.answerMathField = ((typeof this.answerMathField != 'undefined')? this.answerMathField : {}); - this.answerSpan = ((typeof this.answerSpan != 'undefined')? this.answerSpan : {}); + this.answerMathField = ((typeof this.answerMathField != 'undefined') ? this.answerMathField : {}); + this.answerSpan = ((typeof this.answerSpan != 'undefined') ? this.answerSpan : {}); this.topElements = { wrapper: null, toolbar: null, buttons: null } - mathed_tmp = ((typeof mathed_tmp != 'undefined')? mathed_tmp : {}); + mathed_tmp = ((typeof mathed_tmp != 'undefined') ? mathed_tmp : {}); this.template = 'default'; - this.default_toolbar_buttons = ["fraction","square_root","cube_root","root",'superscript','subscript','multiplication','division','plus_minus','pi','degree','not_equal','greater_equal','less_equal','greater_than','less_than','angle','parallel_to','perpendicular','triangle','parallelogram','round_brackets']; - this.default_toolbar_tabs = ["General","Symbols","Geometry"]; - button_meta = {"fraction": {latex: "\\frac{}{}", moveto: "Up", movefor: 1, tab: 1, icon:'\\frac{\\square}{\\square}'}, "mix_fraction": {latex: "\\frac{}{}", moveto: "Up", movefor: 1, tab: 1, icon:'\\frac{\\square}{\\square}'}, "square_root": {latex: "\\sqrt{}", moveto: "Left", movefor: 1, tab: 1, icon:'\\sqrt{\\square}'}, "cube_root": {latex: "\\sqrt[3]{}", moveto: "Left", movefor: 1, tab: 1, icon:'\\sqrt[3]{\\square}'}, "root": {latex: "\\sqrt[{}]{}", moveto: "Left", movefor: 2, tab: 1, icon:'\\sqrt[\\square]{\\square}'}, "superscript": {latex: "\\^{}", moveto: "Up", movefor: 1, tab: 1, icon:'\\square^2'}, "subscript": {latex: "\\_{}", moveto: "Down", movefor: 1, tab: 1, icon:'\\square_{2}'}, "multiplication": {latex: "\\times", tab: 2, icon:'\\times'}, "division": {latex: "\\div", tab: 2, icon:'\\div'}, "plus_minus": {latex: "\\pm", tab: 2, icon:'\\pm'}, "pi": {latex: "\\pi", tab: 2, icon:'\\pi'}, "degree": {latex: "\\degree", tab: 2, icon:'\\degree'}, "not_equal": {latex: "\\neq", tab: 2, icon:'\\neq'}, "greater_equal": {latex: "\\geq", tab: 2, icon:'\\geq'}, "less_equal": {latex: "\\leq", tab: 2, icon:'\\leq'}, "greater_than": {latex: "\\gt", tab: 2, icon:'\\gt'}, "less_than": {latex: "\\lt", tab: 2, icon:'\\lt'}, "angle": {latex: "\\angle", tab: 3, icon:'\\angle'}, "parallel_to": {latex: "\\parallel", tab: 3, icon:'\\parallel'}, "perpendicular": {latex: "\\perpendicular", tab: 3, icon:'\\perpendicular'}, "triangle": {latex: "\\triangle", tab: 3, icon:'\\triangle'}, "parallelogram": {latex: "\\parallelogram", tab: 3, icon:'\\parallelogram'}, "round_brackets": {latex: "\\left(\\right)",moveto: "Left", movefor: 1, tab: 1, icon:'\\left(\\square\\right)'} }; - keyboard_keys = {'letters': [{'value': 'q', 'type': 'write', 'class':'ks', 'display':'q', 'new_line': false}, {'value': 'w', 'type': 'write', 'class':'ks', 'display':'w', 'new_line': false}, {'value': 'e', 'type': 'write', 'class':'ks', 'display':'e', 'new_line': false}, {'value': 'r', 'type': 'write', 'class':'ks', 'display':'r', 'new_line': false}, {'value': 't', 'type': 'write', 'class':'ks', 'display':'t', 'new_line': false}, {'value': 'y', 'type': 'write', 'class':'ks', 'display':'y', 'new_line': false}, {'value': 'u', 'type': 'write', 'class':'ks', 'display':'u', 'new_line': false}, {'value': 'i', 'type': 'write', 'class':'ks', 'display':'i', 'new_line': false}, {'value': 'o', 'type': 'write', 'class':'ks', 'display':'o', 'new_line': false}, {'value': 'p', 'type': 'write', 'class':'ks', 'display':'p', 'new_line': true}, {'value': 'a', 'type': 'write', 'class':'ks', 'display':'a', 'new_line': false}, {'value': 's', 'type': 'write', 'class':'ks', 'display':'s', 'new_line': false}, {'value': 'd', 'type': 'write', 'class':'ks', 'display':'d', 'new_line': false}, {'value': 'f', 'type': 'write', 'class':'ks', 'display':'f', 'new_line': false}, {'value': 'g', 'type': 'write', 'class':'ks', 'display':'g', 'new_line': false}, {'value': 'h', 'type': 'write', 'class':'ks', 'display':'h', 'new_line': false}, {'value': 'j', 'type': 'write', 'class':'ks', 'display':'j', 'new_line': false}, {'value': 'k', 'type': 'write', 'class':'ks', 'display':'k', 'new_line': false}, {'value': 'l', 'type': 'write', 'class':'ks', 'display':'l', 'new_line': true}, {'value': 'CapsLock', 'type': 'custom', 'class':'ks long icon', 'display':'⇡', 'new_line': false}, {'value': 'z', 'type': 'write', 'class':'ks', 'display':'z', 'new_line': false}, {'value': 'x', 'type': 'write', 'class':'ks', 'display':'x', 'new_line': false}, {'value': 'c', 'type': 'write', 'class':'ks', 'display':'c', 'new_line': false}, {'value': 'v', 'type': 'write', 'class':'ks', 'display':'v', 'new_line': false}, {'value': 'b', 'type': 'write', 'class':'ks', 'display':'b', 'new_line': false}, {'value': 'n', 'type': 'write', 'class':'ks', 'display':'n', 'new_line': false}, {'value': 'm', 'type': 'write', 'class':'ks', 'display':'m', 'new_line': false}, {'value': 'Backspace', 'type': 'keystroke', 'class':'ks long icon', 'display':'⇦', 'new_line': true}, {'value': 'numpad', 'type': 'custom', 'class':'ks long', 'display':'123', 'new_line': false}, {'value': ',', 'type': 'write', 'class':'ks', 'display':',', 'new_line': false}, {'value': '\\ ', 'type': 'write', 'class':'ks too_long', 'display':'Space', 'new_line': false}, {'value': '.', 'type': 'write', 'class':'ks', 'display':'.', 'new_line': false}, {'value': 'close', 'type': 'custom', 'class':'ks long takeup', 'display':'X', 'new_line': false}], 'numbers': [{'value': '1', 'type': 'write', 'class':'ks', 'display':'1', 'new_line': false}, {'value': '2', 'type': 'write', 'class':'ks', 'display':'2', 'new_line': false}, {'value': '3', 'type': 'write', 'class':'ks', 'display':'3', 'new_line': false}, {'value': '+', 'type': 'write', 'class':'ks', 'display':'+', 'new_line': false}, {'value': '-', 'type': 'write', 'class':'ks', 'display':'⁻', 'new_line': true}, {'value': '4', 'type': 'write', 'class':'ks', 'display':'4', 'new_line': false}, {'value': '5', 'type': 'write', 'class':'ks', 'display':'5', 'new_line': false}, {'value': '6', 'type': 'write', 'class':'ks', 'display':'6', 'new_line': false}, {'value': '\\times', 'type': 'write', 'class':'ks', 'display':'×', 'new_line': false}, {'value': '/', 'type': 'write', 'class':'ks', 'display':'÷', 'new_line': true}, {'value': '7', 'type': 'write', 'class':'ks', 'display':'7', 'new_line': false}, {'value': '8', 'type': 'write', 'class':'ks', 'display':'8', 'new_line': false}, {'value': '9', 'type': 'write', 'class':'ks', 'display':'9', 'new_line': false}, {'value': '=', 'type': 'write', 'class':'ks', 'display':'=', 'new_line': false}, {'value': 'Backspace', 'type': 'keystroke', 'class':'ks long icon', 'display':'⇦', 'new_line': true}, {'value': 'letters', 'type': 'custom', 'class':'ks long', 'display':'ABC', 'new_line': false}, {'value': '0', 'type': 'write', 'class':'ks', 'display':'0', 'new_line': false}, {'value': '?', 'type': 'write', 'class':'ks', 'display':'?', 'new_line': false}, {'value': '%', 'type': 'write', 'class':'ks', 'display':'%', 'new_line': false}, {'value': 'close', 'type': 'custom', 'class':'ks long takeup', 'display':'X', 'new_line': false}]}; + this.default_toolbar_buttons = [ + // Algebra & arithmetic + 'plus', 'minus', 'multiplication', 'division', 'plus_minus', + 'not_equal', 'greater_than', 'less_than', 'greater_equal', 'less_equal', + 'much_greater_than', 'much_less_than', + 'pi', 'degree', 'fraction', 'superscript', 'subscript', 'square_root', + 'cube_root', 'root', 'proportional_to', + + // Geometry + 'angle', 'triangle', 'parallel_to', 'perpendicular', 'parallelogram', + + // Symbols + 'alpha', 'beta', 'gamma', 'theta', 'Delta', 'infinity', + 'lambda', 'mu', 'nu', 'xi', 'rho', 'phi', 'psi', 'omega', 'Omega', + 'epsilon', 'zeta', 'eta', 'kappa', 'chi', 'Sigma', 'Pi', 'Gamma', 'Lambda', 'Phi', + + // Set theory + 'element_of', 'not_element_of', 'subset', 'subset_eq', 'superset', + 'superset_eq', 'union', 'intersection', 'emptyset', + 'complement', 'set_difference', 'cartesian_product', + 'natural_numbers', 'integers', 'rationals', 'reals', 'complex_numbers', + + // Statistics & probability + 'sum', 'sigma', 'mean', 'probability', + 'factorial', 'combination', 'permutation', + 'expected_value', 'variance', 'std_dev', + 'approx', 'floor', 'ceil', + + // Functions & calculus + 'log', 'log_n', 'ln', 'derivative', 'integral', 'limit', + 'definite_integral', 'partial_derivative', 'double_integral', + 'nabla', 'laplacian', + 'sum_limits', 'product', 'product_limits', + + // Brackets + 'round_brackets', 'curly_brackets', 'absolute_value', + 'floor_brackets', 'ceil_brackets', 'angle_brackets', + + // Trigonometry + 'sin', 'cos', 'tan', 'cot', 'sec', 'csc', + 'sin^-1', 'cos^-1', 'tan^-1', + 'sin^2', 'cos^2', 'tan^2', + 'sin^x', 'cos^x', 'tan^x', + 'sinh', 'cosh', 'tanh', + + // Logic + 'logical_and', 'logical_or', 'logical_not', 'logical_implies', + 'logical_iff', 'logical_forall', 'logical_exists', 'logical_not_exists', + 'logical_therefore', 'logical_because', + 'logical_xor', 'logical_nand', 'logical_nor', + + // Matrices + 'matrix_2x2', 'matrix_3x3', 'matrix_2x1', 'matrix_1x2', + 'determinant', 'transpose', 'inverse', + + // Number theory + 'divides', 'not_divides', 'modulo', + 'gcd', 'lcm', + + // Chemistry + 'leftarrow', 'rightarrow', 'leftrightarrow', 'uparrow', 'downarrow', 'updownarrow', + ]; + this.default_toolbar_tabs = [ + "General", + "Symbols", + "Geometry", + "Calculus", + "Trigonometry", + "Set Theory", + "Chemistry", + "Statistics", + "Logic", + "Matrices", + ]; + button_meta = { + // ── TAB 1: General ────────────────────────────────────────── + "fraction": { + latex: "\\frac{}{}", + moveto: "Up", movefor: 1, tab: 1, + icon: '\\frac{\\square}{\\square}' + }, + "mix_fraction": { + latex: "\\frac{}{}", + moveto: "Up", movefor: 1, tab: 1, + icon: '\\frac{\\square}{\\square}' + }, + "square_root": { + latex: "\\sqrt{}", + moveto: "Left", movefor: 1, tab: 1, + icon: '\\sqrt{\\square}' + }, + "cube_root": { + latex: "\\sqrt[3]{}", + moveto: "Left", movefor: 1, tab: 1, + icon: '\\sqrt[3]{\\square}' + }, + "root": { + latex: "\\sqrt[{}]{}", + moveto: "Left", movefor: 2, tab: 1, + icon: '\\sqrt[\\square]{\\square}' + }, + "superscript": { + latex: "\\^{}", + moveto: "Up", movefor: 1, tab: 1, + icon: '\\square^\\square' + }, + "subscript": { + latex: "\\_{}", + moveto: "Down", movefor: 1, tab: 1, + icon: '\\square_{\\square}' + }, + "multiplication": { latex: "\\times", tab: 1, icon: '\\times' }, + "division": { latex: "\\div", tab: 1, icon: '\\div' }, + "plus_minus": { latex: "\\pm", tab: 1, icon: '\\pm' }, + "plus": { latex: "+", tab: 1, icon: '+' }, + "minus": { latex: "-", tab: 1, icon: '-' }, + "not_equal": { latex: "\\neq", tab: 1, icon: '\\neq' }, + "greater_equal": { latex: "\\geq", tab: 1, icon: '\\geq' }, + "less_equal": { latex: "\\leq", tab: 1, icon: '\\leq' }, + "greater_than": { latex: "\\gt", tab: 1, icon: '\\gt' }, + "less_than": { latex: "\\lt", tab: 1, icon: '\\lt' }, + "much_greater_than": { latex: "\\gg", tab: 1, icon: '\\gg' }, + "much_less_than": { latex: "\\ll", tab: 1, icon: '\\ll' }, + "round_brackets": { + latex: "\\left(\\right)", + moveto: "Left", movefor: 1, tab: 1, + icon: '\\left(\\square\\right)' + }, + "curly_brackets": { + latex: "\\left\\{\\right\\}", + moveto: "Left", movefor: 1, tab: 1, + icon: '\\left\\{\\square\\right\\}' + }, + "absolute_value": { + latex: "\\left|\\right|", + moveto: "Left", movefor: 1, tab: 1, + icon: '\\left|\\square\\right|' + }, + "floor_brackets": { + latex: "\\lfloor\\rfloor", + moveto: "Left", movefor: 1, tab: 1, + icon: '\\lfloor\\square\\rfloor' + }, + "ceil_brackets": { + latex: "\\lceil\\rceil", + moveto: "Left", movefor: 1, tab: 1, + icon: '\\lceil\\square\\rceil' + }, + "angle_brackets": { + latex: "\\langle\\rangle", + moveto: "Left", movefor: 1, tab: 1, + icon: '\\langle\\square\\rangle' + }, + + // ── TAB 2: Symbols ────────────────────────────────────────── + "pi": { latex: "\\pi", tab: 2, icon: '\\pi' }, + "degree": { latex: "\\degree", tab: 2, icon: '\\degree' }, + "proportional_to": { latex: "\\propto", tab: 2, icon: '\\propto' }, + "infinity": { latex: "\\infty", tab: 2, icon: '\\infty' }, + "alpha": { latex: "\\alpha", tab: 2, icon: '\\alpha' }, + "beta": { latex: "\\beta", tab: 2, icon: '\\beta' }, + "gamma": { latex: "\\gamma", tab: 2, icon: '\\gamma' }, + "theta": { latex: "\\theta", tab: 2, icon: '\\theta' }, + "Delta": { latex: "\\Delta", tab: 2, icon: '\\Delta' }, + "sigma": { latex: "\\sigma", tab: 2, icon: '\\sigma' }, + "lambda": { latex: "\\lambda", tab: 2, icon: '\\lambda' }, + "mu": { latex: "\\mu", tab: 2, icon: '\\mu' }, + "nu": { latex: "\\nu", tab: 2, icon: '\\nu' }, + "xi": { latex: "\\xi", tab: 2, icon: '\\xi' }, + "rho": { latex: "\\rho", tab: 2, icon: '\\rho' }, + "phi": { latex: "\\phi", tab: 2, icon: '\\phi' }, + "psi": { latex: "\\psi", tab: 2, icon: '\\psi' }, + "omega": { latex: "\\omega", tab: 2, icon: '\\omega' }, + "Omega": { latex: "\\Omega", tab: 2, icon: '\\Omega' }, + "epsilon": { latex: "\\epsilon", tab: 2, icon: '\\epsilon' }, + "zeta": { latex: "\\zeta", tab: 2, icon: '\\zeta' }, + "eta": { latex: "\\eta", tab: 2, icon: '\\eta' }, + "kappa": { latex: "\\kappa", tab: 2, icon: '\\kappa' }, + "chi": { latex: "\\chi", tab: 2, icon: '\\chi' }, + "Sigma": { latex: "\\Sigma", tab: 2, icon: '\\Sigma' }, + "Pi": { latex: "\\Pi", tab: 2, icon: '\\Pi' }, + "Gamma": { latex: "\\Gamma", tab: 2, icon: '\\Gamma' }, + "Lambda": { latex: "\\Lambda", tab: 2, icon: '\\Lambda' }, + "Phi": { latex: "\\Phi", tab: 2, icon: '\\Phi' }, + + // ── TAB 3: Geometry ───────────────────────────────────────── + "angle": { latex: "\\angle", tab: 3, icon: '\\angle' }, + "parallel_to": { latex: "\\parallel", tab: 3, icon: '\\parallel' }, + "perpendicular": { latex: "\\perpendicular", tab: 3, icon: '\\perpendicular' }, + "triangle": { latex: "\\triangle", tab: 3, icon: '\\triangle' }, + "parallelogram": { latex: "\\parallelogram", tab: 3, icon: '\\parallelogram' }, + + // ── TAB 4: Calculus ───────────────────────────────────────── + "sum": { + latex: "\\sum", + tab: 4, icon: '\\sum_{\\square}^{\\square}\\square' + }, + "sum_limits": { + latex: "\\sum_{}^{}", + moveto: "Left", movefor: 2, tab: 4, + icon: '\\sum_{\\square}^{\\square}' + }, + "product": { + latex: "\\prod", + tab: 4, icon: '\\prod_{\\square}^{\\square}\\square' + }, + "product_limits": { + latex: "\\prod_{}^{}", + moveto: "Left", movefor: 2, tab: 4, + icon: '\\prod_{\\square}^{\\square}' + }, + "mean": { + latex: "\\bar{}", + moveto: "Left", movefor: 1, tab: 4, + icon: '\\bar{\\square}' + }, + "probability": { + latex: "P\\left(\\right)", + moveto: "Left", movefor: 1, tab: 4, + icon: 'P(\\square)' + }, + "log": { + latex: "\\log\\left(\\right)", + tab: 4, icon: '\\log\\left(\\square\\right)' + }, + "ln": { latex: "\\ln", tab: 4, icon: '\\ln' }, + "derivative": { latex: "\\frac{d}{dx}", tab: 4, icon: '\\frac{d}{dx}' }, + "integral": { latex: "\\int", tab: 4, icon: '\\int' }, + "definite_integral": { + latex: "\\int_{}^{}", + moveto: "Left", movefor: 2, tab: 4, + icon: '\\int_{\\square}^{\\square}' + }, + "double_integral": { + latex: "\\iint", + tab: 4, icon: '\\iint' + }, + "partial_derivative": { + latex: "\\frac{\\partial}{\\partial x}", + tab: 4, icon: '\\frac{\\partial}{\\partial x}' + }, + "nabla": { latex: "\\nabla", tab: 4, icon: '\\nabla' }, + "laplacian": { latex: "\\nabla^2", tab: 4, icon: '\\nabla^2' }, + "limit": { + latex: "\\lim_{{} \\to {}}", + moveto: "Left", movefor: 2, tab: 4, + icon: '\\lim_{x\\to\\square}' + }, + "log_n": { + latex: "\\log_{ }\\left(\\right)", + moveto: "Left", movefor: 3, tab: 4, + icon: '\\log_{\\square}\\left(\\square\\right)' + }, + + // ── TAB 5: Trigonometry ───────────────────────────────────── + "sin": { + latex: "\\sin\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\sin\\left(\\square\\right)' + }, + "cos": { + latex: "\\cos\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\cos\\left(\\square\\right)' + }, + "tan": { + latex: "\\tan\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\tan\\left(\\square\\right)' + }, + "cot": { + latex: "\\cot\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\cot\\left(\\square\\right)' + }, + "sec": { + latex: "\\sec\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\sec\\left(\\square\\right)' + }, + "csc": { + latex: "\\csc\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\csc\\left(\\square\\right)' + }, + "sin^-1": { + latex: "\\sin^{-1}\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\sin^{-1}\\left(\\square\\right)' + }, + "cos^-1": { + latex: "\\cos^{-1}\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\cos^{-1}\\left(\\square\\right)' + }, + "tan^-1": { + latex: "\\tan^{-1}\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\tan^{-1}\\left(\\square\\right)' + }, + "sin^2": { + latex: "\\sin^2\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\sin^2\\left(\\square\\right)' + }, + "cos^2": { + latex: "\\cos^2\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\cos^2\\left(\\square\\right)' + }, + "tan^2": { + latex: "\\tan^2\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\tan^2\\left(\\square\\right)' + }, + "sin^x": { + latex: "\\sin^{}\\left(\\right)", + moveto: "Left", movefor: 3, tab: 5, + icon: '\\sin^\\square\\left(\\square\\right)' + }, + "cos^x": { + latex: "\\cos^{}\\left(\\right)", + moveto: "Left", movefor: 3, tab: 5, + icon: '\\cos^\\square\\left(\\square\\right)' + }, + "tan^x": { + latex: "\\tan^{}\\left(\\right)", + moveto: "Left", movefor: 3, tab: 5, + icon: '\\tan^\\square\\left(\\square\\right)' + }, + "sinh": { + latex: "\\sinh\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\sinh\\left(\\square\\right)' + }, + "cosh": { + latex: "\\cosh\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\cosh\\left(\\square\\right)' + }, + "tanh": { + latex: "\\tanh\\left(\\right)", + moveto: "Left", movefor: 1, tab: 5, + icon: '\\tanh\\left(\\square\\right)' + }, + + // ── TAB 6: Set Theory ──────────────────────────────────────── + "element_of": { latex: "\\in", tab: 6, icon: '\\in' }, + "not_element_of": { latex: "\\notin", tab: 6, icon: '\\notin' }, + "subset": { latex: "\\subset", tab: 6, icon: '\\subset' }, + "subset_eq": { latex: "\\subseteq", tab: 6, icon: '\\subseteq' }, + "superset": { latex: "\\supset", tab: 6, icon: '\\supset' }, + "superset_eq": { latex: "\\supseteq", tab: 6, icon: '\\supseteq' }, + "union": { latex: "\\cup", tab: 6, icon: '\\cup' }, + "intersection": { latex: "\\cap", tab: 6, icon: '\\cap' }, + "emptyset": { latex: "\\emptyset", tab: 6, icon: '\\emptyset' }, + "complement": { latex: "\\complement", tab: 6, icon: '\\complement' }, + "set_difference": { latex: "\\setminus", tab: 6, icon: '\\setminus' }, + "cartesian_product": { latex: "\\times", tab: 6, icon: 'A\\times B' }, + "natural_numbers": { latex: "\\mathbb{N}", tab: 6, icon: '\\mathbb{N}' }, + "integers": { latex: "\\mathbb{Z}", tab: 6, icon: '\\mathbb{Z}' }, + "rationals": { latex: "\\mathbb{Q}", tab: 6, icon: '\\mathbb{Q}' }, + "reals": { latex: "\\mathbb{R}", tab: 6, icon: '\\mathbb{R}' }, + "complex_numbers": { latex: "\\mathbb{C}", tab: 6, icon: '\\mathbb{C}' }, + + // ── TAB 7: Chemistry ──────────────────────────────────────── + "leftarrow": { latex: "\\leftarrow", tab: 7, icon: '\\leftarrow' }, + "rightarrow": { latex: "\\rightarrow", tab: 7, icon: '\\rightarrow' }, + "leftrightarrow": { latex: "\\leftrightarrow", tab: 7, icon: '\\leftrightarrow' }, + "uparrow": { latex: "\\uparrow", tab: 7, icon: '\\uparrow' }, + "downarrow": { latex: "\\downarrow", tab: 7, icon: '\\downarrow' }, + "updownarrow": { latex: "\\updownarrow", tab: 7, icon: '\\updownarrow' }, + + // ── TAB 8: Statistics ─────────────────────────────────────── + "factorial": { + latex: "{}!", + moveto: "Left", movefor: 1, tab: 8, + icon: '\\square!' + }, + "combination": { + latex: "\\binom{}{}", + moveto: "Up", movefor: 1, tab: 8, + icon: '\\binom{n}{r}' + }, + "permutation": { + latex: "{}P{}", + moveto: "Left", movefor: 1, tab: 8, + icon: 'nPr' + }, + "expected_value": { + latex: "E\\left(\\right)", + moveto: "Left", movefor: 1, tab: 8, + icon: 'E(\\square)' + }, + "variance": { + latex: "Var\\left(\\right)", + moveto: "Left", movefor: 1, tab: 8, + icon: 'Var(\\square)' + }, + "std_dev": { + latex: "\\sqrt{Var\\left(\\right)}", + moveto: "Left", movefor: 1, tab: 8, + icon: '\\sigma(\\square)' + }, + "approx": { latex: "\\approx", tab: 8, icon: '\\approx' }, + "floor": { + latex: "\\lfloor\\rfloor", + moveto: "Left", movefor: 1, tab: 8, + icon: '\\lfloor\\square\\rfloor' + }, + "ceil": { + latex: "\\lceil\\rceil", + moveto: "Left", movefor: 1, tab: 8, + icon: '\\lceil\\square\\rceil' + }, + + // ── TAB 9: Logic ──────────────────────────────────────────── + "logical_and": { latex: "\\wedge", tab: 9, icon: '\\wedge' }, + "logical_or": { latex: "\\vee", tab: 9, icon: '\\vee' }, + "logical_not": { latex: "\\neg", tab: 9, icon: '\\neg' }, + "logical_implies": { latex: "\\Rightarrow", tab: 9, icon: '\\Rightarrow' }, + "logical_iff": { latex: "\\Leftrightarrow", tab: 9, icon: '\\Leftrightarrow' }, + "logical_forall": { latex: "\\forall", tab: 9, icon: '\\forall' }, + "logical_exists": { latex: "\\exists", tab: 9, icon: '\\exists' }, + "logical_not_exists": { latex: "\\nexists", tab: 9, icon: '\\nexists' }, + "logical_therefore": { latex: "\\therefore", tab: 9, icon: '\\therefore' }, + "logical_because": { latex: "\\because", tab: 9, icon: '\\because' }, + "logical_xor": { latex: "\\oplus", tab: 9, icon: '\\oplus' }, + "logical_nand": { latex: "\\uparrow", tab: 9, icon: '\\uparrow' }, + "logical_nor": { latex: "\\downarrow", tab: 9, icon: '\\downarrow' }, + "divides": { latex: "\\mid", tab: 9, icon: '\\mid' }, + "not_divides": { latex: "\\nmid", tab: 9, icon: '\\nmid' }, + "modulo": { + latex: "\\mod{}", + moveto: "Left", movefor: 1, tab: 9, + icon: '\\square\\mod\\square' + }, + "gcd": { + latex: "\\gcd\\left(,\\right)", + moveto: "Left", movefor: 2, tab: 9, + icon: '\\gcd(\\square,\\square)' + }, + "lcm": { + latex: "\\text{lcm}\\left(,\\right)", + moveto: "Left", movefor: 2, tab: 9, + icon: '\\text{lcm}(\\square,\\square)' + }, + + // ── TAB 10: Matrices ──────────────────────────────────────── + "matrix_2x2": { + latex: "\\begin{pmatrix}{}&{}\\\\{}&{}\\end{pmatrix}", + moveto: "Left", movefor: 3, tab: 10, + icon: '\\begin{pmatrix}a&b\\\\c&d\\end{pmatrix}' + }, + "matrix_3x3": { + latex: "\\begin{pmatrix}{}&{}&{}\\\\{}&{}&{}\\\\{}&{}&{}\\end{pmatrix}", + moveto: "Left", movefor: 8, tab: 10, + icon: '\\begin{pmatrix}a&b&c\\\\d&e&f\\\\g&h&i\\end{pmatrix}' + }, + "matrix_2x1": { + latex: "\\begin{pmatrix}{}\\\\{}\\end{pmatrix}", + moveto: "Left", movefor: 1, tab: 10, + icon: '\\begin{pmatrix}a\\\\b\\end{pmatrix}' + }, + "matrix_1x2": { + latex: "\\begin{pmatrix}{}&{}\\end{pmatrix}", + moveto: "Left", movefor: 1, tab: 10, + icon: '\\begin{pmatrix}a&b\\end{pmatrix}' + }, + "determinant": { + latex: "\\det\\left(\\right)", + moveto: "Left", movefor: 1, tab: 10, + icon: '\\det(\\square)' + }, + "transpose": { + latex: "{}^{T}", + moveto: "Left", movefor: 1, tab: 10, + icon: '\\square^T' + }, + "inverse": { + latex: "{}^{-1}", + moveto: "Left", movefor: 1, tab: 10, + icon: '\\square^{-1}' + }, + }; + keyboard_keys = { 'letters': [{ 'value': 'q', 'type': 'write', 'class': 'ks', 'display': 'q', 'new_line': false }, { 'value': 'w', 'type': 'write', 'class': 'ks', 'display': 'w', 'new_line': false }, { 'value': 'e', 'type': 'write', 'class': 'ks', 'display': 'e', 'new_line': false }, { 'value': 'r', 'type': 'write', 'class': 'ks', 'display': 'r', 'new_line': false }, { 'value': 't', 'type': 'write', 'class': 'ks', 'display': 't', 'new_line': false }, { 'value': 'y', 'type': 'write', 'class': 'ks', 'display': 'y', 'new_line': false }, { 'value': 'u', 'type': 'write', 'class': 'ks', 'display': 'u', 'new_line': false }, { 'value': 'i', 'type': 'write', 'class': 'ks', 'display': 'i', 'new_line': false }, { 'value': 'o', 'type': 'write', 'class': 'ks', 'display': 'o', 'new_line': false }, { 'value': 'p', 'type': 'write', 'class': 'ks', 'display': 'p', 'new_line': true }, { 'value': 'a', 'type': 'write', 'class': 'ks', 'display': 'a', 'new_line': false }, { 'value': 's', 'type': 'write', 'class': 'ks', 'display': 's', 'new_line': false }, { 'value': 'd', 'type': 'write', 'class': 'ks', 'display': 'd', 'new_line': false }, { 'value': 'f', 'type': 'write', 'class': 'ks', 'display': 'f', 'new_line': false }, { 'value': 'g', 'type': 'write', 'class': 'ks', 'display': 'g', 'new_line': false }, { 'value': 'h', 'type': 'write', 'class': 'ks', 'display': 'h', 'new_line': false }, { 'value': 'j', 'type': 'write', 'class': 'ks', 'display': 'j', 'new_line': false }, { 'value': 'k', 'type': 'write', 'class': 'ks', 'display': 'k', 'new_line': false }, { 'value': 'l', 'type': 'write', 'class': 'ks', 'display': 'l', 'new_line': true }, { 'value': 'CapsLock', 'type': 'custom', 'class': 'ks long icon', 'display': '⇡', 'new_line': false }, { 'value': 'z', 'type': 'write', 'class': 'ks', 'display': 'z', 'new_line': false }, { 'value': 'x', 'type': 'write', 'class': 'ks', 'display': 'x', 'new_line': false }, { 'value': 'c', 'type': 'write', 'class': 'ks', 'display': 'c', 'new_line': false }, { 'value': 'v', 'type': 'write', 'class': 'ks', 'display': 'v', 'new_line': false }, { 'value': 'b', 'type': 'write', 'class': 'ks', 'display': 'b', 'new_line': false }, { 'value': 'n', 'type': 'write', 'class': 'ks', 'display': 'n', 'new_line': false }, { 'value': 'm', 'type': 'write', 'class': 'ks', 'display': 'm', 'new_line': false }, { 'value': 'Backspace', 'type': 'keystroke', 'class': 'ks long icon', 'display': '⇦', 'new_line': true }, { 'value': 'numpad', 'type': 'custom', 'class': 'ks long', 'display': '123', 'new_line': false }, { 'value': ',', 'type': 'write', 'class': 'ks', 'display': ',', 'new_line': false }, { 'value': '\\ ', 'type': 'write', 'class': 'ks too_long', 'display': 'Space', 'new_line': false }, { 'value': '.', 'type': 'write', 'class': 'ks', 'display': '.', 'new_line': false }, { 'value': 'close', 'type': 'custom', 'class': 'ks long takeup', 'display': 'X', 'new_line': false }], 'numbers': [{ 'value': '1', 'type': 'write', 'class': 'ks', 'display': '1', 'new_line': false }, { 'value': '2', 'type': 'write', 'class': 'ks', 'display': '2', 'new_line': false }, { 'value': '3', 'type': 'write', 'class': 'ks', 'display': '3', 'new_line': false }, { 'value': '+', 'type': 'write', 'class': 'ks', 'display': '+', 'new_line': false }, { 'value': '-', 'type': 'write', 'class': 'ks', 'display': '⁻', 'new_line': true }, { 'value': '4', 'type': 'write', 'class': 'ks', 'display': '4', 'new_line': false }, { 'value': '5', 'type': 'write', 'class': 'ks', 'display': '5', 'new_line': false }, { 'value': '6', 'type': 'write', 'class': 'ks', 'display': '6', 'new_line': false }, { 'value': '\\times', 'type': 'write', 'class': 'ks', 'display': '×', 'new_line': false }, { 'value': '/', 'type': 'write', 'class': 'ks', 'display': '÷', 'new_line': true }, { 'value': '7', 'type': 'write', 'class': 'ks', 'display': '7', 'new_line': false }, { 'value': '8', 'type': 'write', 'class': 'ks', 'display': '8', 'new_line': false }, { 'value': '9', 'type': 'write', 'class': 'ks', 'display': '9', 'new_line': false }, { 'value': '=', 'type': 'write', 'class': 'ks', 'display': '=', 'new_line': false }, { 'value': 'Backspace', 'type': 'keystroke', 'class': 'ks long icon', 'display': '⇦', 'new_line': true }, { 'value': 'letters', 'type': 'custom', 'class': 'ks long', 'display': 'ABC', 'new_line': false }, { 'value': '0', 'type': 'write', 'class': 'ks', 'display': '0', 'new_line': false }, { 'value': '?', 'type': 'write', 'class': 'ks', 'display': '?', 'new_line': false }, { 'value': '%', 'type': 'write', 'class': 'ks', 'display': '%', 'new_line': false }, { 'value': 'close', 'type': 'custom', 'class': 'ks long takeup', 'display': 'X', 'new_line': false }] }; this.MQ = MathQuill.getInterface(2); this.answerSpan = document.getElementById(id); var config = { handlers: { - edit: function() {}, - enter: function() {}, + edit: function () { }, + enter: function () { }, } }; - this.answerMathField= this.MQ.MathField(this.answerSpan, config); - setToolbar(this.default_toolbar_buttons,this.answerSpan,this.answerMathField,this.topElements,this.default_toolbar_tabs,this.tabEnabled,this.isMobile); + this.answerMathField = this.MQ.MathField(this.answerSpan, config); + setToolbar(this.default_toolbar_buttons, this.answerSpan, this.answerMathField, this.topElements, this.default_toolbar_tabs, this.tabEnabled, this.isMobile); // basicStyling(this.answerSpan,this.topElements); } -MathEditor.prototype.getValue = function(){ +MathEditor.prototype.getValue = function () { return this.answerMathField.latex(); }; -MathEditor.prototype.getLatex = function(){ +MathEditor.prototype.getLatex = function () { return this.answerMathField.latex(); }; -MathEditor.prototype.setLatex = function(latex){ - this.answerMathField.latex(latex); +MathEditor.prototype.setLatex = function (latex) { + this.answerMathField.latex(latex); }; -MathEditor.prototype.getPrintableValue = function(){ - return "$$"+this.answerMathField.latex()+"$$"; +MathEditor.prototype.getPrintableValue = function () { + return "$$" + this.answerMathField.latex() + "$$"; }; -MathEditor.prototype.addButtons = function(btns){ +MathEditor.prototype.addButtons = function (btns) { this.default_toolbar_buttons = btns; - setToolbar(this.default_toolbar_buttons,this.answerSpan,this.answerMathField,this.topElements,this.default_toolbar_tabs,this.tabEnabled); + setToolbar(this.default_toolbar_buttons, this.answerSpan, this.answerMathField, this.topElements, this.default_toolbar_tabs, this.tabEnabled); }; -MathEditor.prototype.removeButtons = function(btns){ +MathEditor.prototype.removeButtons = function (btns) { var default_toolbar_buttons = this.default_toolbar_buttons; - btns.forEach(function(o){ + btns.forEach(function (o) { var index = default_toolbar_buttons.indexOf(o); - if(index>=0) + if (index >= 0) default_toolbar_buttons.splice(index, 1); }); - setToolbar(default_toolbar_buttons,this.answerSpan,this.answerMathField,this.topElements,this.default_toolbar_tabs,this.tabEnabled); + setToolbar(default_toolbar_buttons, this.answerSpan, this.answerMathField, this.topElements, this.default_toolbar_tabs, this.tabEnabled); }; -MathEditor.prototype.styleMe = function(options){ - jq(this.answerSpan).css('background',options.textarea_background).css('color',options.textarea_foreground).css('border-color',options.textarea_border).css('width',options.width).css('min-width',options.width).css('min-height',options.height).css('height',options.height); +MathEditor.prototype.styleMe = function (options) { + jq(this.answerSpan).css('background', options.textarea_background).css('color', options.textarea_foreground).css('border-color', options.textarea_border).css('width', options.width).css('min-width', options.width).css('min-height', options.height).css('height', options.height); answerSpanWidth = jq(this.answerSpan).width(); - this.topElements.wrapper.css('width',parseInt(options.width)+10).css('min-width',parseInt(options.width)+10); - this.topElements.toolbar.css('background',options.toolbar_background).css('color',options.toolbar_foreground).css('border-color',options.toolbar_border).css('min-width',options.width).css('width',parseInt(options.width)); - this.topElements.buttons.css('background',options.button_background).css('border-color',options.button_border); + this.topElements.wrapper.css('width', parseInt(options.width) + 10).css('min-width', parseInt(options.width) + 10); + this.topElements.toolbar.css('background', options.toolbar_background).css('color', options.toolbar_foreground).css('border-color', options.toolbar_border).css('min-width', options.width).css('width', parseInt(options.width)); + this.topElements.buttons.css('background', options.button_background).css('border-color', options.button_border); }; -MathEditor.prototype.setTemplate = function(name){ - if (name=='floating-toolbar'){ +MathEditor.prototype.setTemplate = function (name) { + if (name == 'floating-toolbar') { editor_id = jq(this.answerSpan).attr('id') this.tabEnabled = false; this.template = 'floating-toolbar' - setToolbar(this.default_toolbar_buttons,this.answerSpan,this.answerMathField,this.topElements,this.default_toolbar_tabs,this.tabEnabled); + setToolbar(this.default_toolbar_buttons, this.answerSpan, this.answerMathField, this.topElements, this.default_toolbar_tabs, this.tabEnabled); setCloseButton(this.topElements, this.answerSpan); - this.topElements.toolbar.css('position','absolute').css('min-width','315').css('width',jq(this.answerSpan).width()).css('z-index',999999); + jq(this.answerSpan).css('position', 'absolute'); + this.topElements.toolbar.css('position', 'absolute').css('min-width', '315').css('width', jq(this.answerSpan).width()).css('z-index', 999999); answerSpanHeight = jq(this.answerSpan).height(); - this.topElements.toolbar.css('margin-top',answerSpanHeight+13).hide(); - this.topElements.buttons.css('margin-right','5').css('margin-bottom','5'); + this.topElements.toolbar.css('margin-top', answerSpanHeight + 13).hide(); + this.topElements.buttons.css('margin-right', '5').css('margin-bottom', '5'); mathed_tmp[editor_id] = this.topElements - jq(this.answerSpan).focusin(function(o){ - jq.each(mathed_tmp, function(k,v){ + jq(this.answerSpan).focusin(function (o) { + jq.each(mathed_tmp, function (k, v) { v.toolbar.hide(); }); mathed_tmp[$(o.currentTarget).attr('id')].toolbar.show(); }); - }else{ - console.warn("MathEditor: "+name+" is an invalid template name"); + } else { + console.warn("MathEditor: " + name + " is an invalid template name"); } }; -MathEditor.prototype.noKeyboard = function(){ +MathEditor.prototype.noKeyboard = function () { editor_id = jq(this.answerSpan).attr('id'); jq(this.answerSpan).find('textarea').removeAttr('readonly') - jq('#keys-'+editor_id).remove(); + jq('#keys-' + editor_id).remove(); } -setVirtualKeyboard = function(top_elements,answer_span,field,keyboard_type,count){ +setVirtualKeyboard = function (top_elements, answer_span, field, keyboard_type, count) { editor_id = jq(answer_span).attr('id') - jq('#keys-'+editor_id).remove(); - html = keyboardButtons(keyboard_type,editor_id); + jq('#keys-' + editor_id).remove(); + html = keyboardButtons(keyboard_type, editor_id); jq(html).insertAfter(answer_span); - jq(answer_span).find('textarea').attr('readonly','readonly'); - jq(answer_span).focusin(function(o){ - jq("[id^=keys-]").find('a').css('width',(jq(window).width()/count)); - jq("[id^=keys-]").find('.too_long').css('width',(jq(window).width()/count)*5); - jq('#keys-'+jq(this).attr('id')).slideDown(); + jq(answer_span).find('textarea').attr('readonly', 'readonly'); + jq(answer_span).focusin(function (o) { + jq("[id^=keys-]").find('a').css('width', (jq(window).width() / count)); + jq("[id^=keys-]").find('.too_long').css('width', (jq(window).width() / count) * 5); + jq('#keys-' + jq(this).attr('id')).slideDown(); }); - jq("[id^=keys-]").find('a').css('width',(jq(window).width()/count)); - jq("[id^=keys-]").find('.too_long').css('width',(jq(window).width()/count)*5); - keyboardAction(top_elements,answer_span,field); + jq("[id^=keys-]").find('a').css('width', (jq(window).width() / count)); + jq("[id^=keys-]").find('.too_long').css('width', (jq(window).width() / count) * 5); + keyboardAction(top_elements, answer_span, field); } -keyboardButtons = function(type,editor_id){ - var html = "
"; - keyboard_keys[type].forEach(function(obj){ - html+=""+obj.display+""; - if(obj.new_line){html+="
"}; +keyboardButtons = function (type, editor_id) { + var html = "
"; + keyboard_keys[type].forEach(function (obj) { + html += "" + obj.display + ""; + if (obj.new_line) { html += "
" }; }); - html+="
" + html += "
" return html; } -keyboardAction = function(top_elements,answer_span,field){ +keyboardAction = function (top_elements, answer_span, field) { caps = false; editor_id = jq(answer_span).attr('id') - jq('#keys-'+editor_id).find('a').on('click', function(o){ + jq('#keys-' + editor_id).find('a').on('click', function (o) { editor_id = jq(this).parent().parent().attr('id').split('-')[1]; type = jq(this).data('type'); value = jq(this).data('value'); - if(type=='keystroke'){ + if (type == 'keystroke') { field.keystroke(value); field.focus(); - }else if(type=='write'){ - if(typeof value == 'string'){if(caps){value = value.toUpperCase()}else{value = value.toLowerCase()}} + } else if (type == 'write') { + if (typeof value == 'string') { if (caps) { value = value.toUpperCase() } else { value = value.toLowerCase() } } field.write(value); field.focus(); - }else if(type=='custom'){ - if(value=='CapsLock'){ + } else if (type == 'custom') { + if (value == 'CapsLock') { caps = !caps; - if (caps){ - jq(this).css('background','#bbbbbb'); - jq(this).css('color','#428bca'); - jq('.ks').css('text-transform','uppercase') - }else{ - jq(this).css('background','#f5f5f5'); - jq(this).css('color','#000000'); - jq('.ks').css('text-transform','lowercase'); + if (caps) { + jq(this).css('background', '#bbbbbb'); + jq(this).css('color', '#428bca'); + jq('.ks').css('text-transform', 'uppercase') + } else { + jq(this).css('background', '#f5f5f5'); + jq(this).css('color', '#000000'); + jq('.ks').css('text-transform', 'lowercase'); } field.focus(); - }else if(value=='numpad'){ - jq('.keyboard-letters-'+editor_id).remove(); - setVirtualKeyboard(top_elements,answer_span,field,"numbers",5); - jq('.keyboard-numbers-'+editor_id).parent().show(); - }else if(value=='letters'){ - jq('.keyboard-numbers-'+editor_id).remove(); - setVirtualKeyboard(top_elements,answer_span,field,"letters",10); - jq('.keyboard-letters-'+editor_id).parent().show(); - }else if(value=='close'){ + } else if (value == 'numpad') { + jq('.keyboard-letters-' + editor_id).remove(); + setVirtualKeyboard(top_elements, answer_span, field, "numbers", 5); + jq('.keyboard-numbers-' + editor_id).parent().show(); + } else if (value == 'letters') { + jq('.keyboard-numbers-' + editor_id).remove(); + setVirtualKeyboard(top_elements, answer_span, field, "letters", 10); + jq('.keyboard-letters-' + editor_id).parent().show(); + } else if (value == 'close') { jq(this).parent().parent().slideUp(); } } }); } -setCloseButton = function(top_elements, answer_span){ +setCloseButton = function (top_elements, answer_span) { editor_id = jq(answer_span).attr('id') - btnhtml = "
X
" + btnhtml = "
X
" jq(btnhtml).insertBefore(top_elements.wrapper.find('.matheditor-btn-span:first')); - jq('#close-btn-'+editor_id).on('click',function(e){ + jq('#close-btn-' + editor_id).on('click', function (e) { top_elements.toolbar.hide(); }); -} +} -setToolbar = function(btns,answer_span,answer_math_field,top_elements,tabs,tabEnabled,isMobile){ - if (answer_span && top_elements.toolbar){ +setToolbar = function (btns, answer_span, answer_math_field, top_elements, tabs, tabEnabled, isMobile) { + if (answer_span && top_elements.toolbar) { jq(answer_span).unwrap(); top_elements.toolbar.remove(); } required_buttons = getUniq(btns); required_tabs = getUniq(tabs); editor_id = jq(answer_span).attr('id') - wrapper_html = "
"; - html = "
"; - if(tabEnabled){ - html += "