@oat-sa/tao-core-ui 1.67.0 → 2.0.0

package/src/maths/calculator/plugins/screen/simpleScreen/simpleScreen.js

@@ -13,35 +13,29 @@
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  *
- * Copyright (c) 2018 Open Assessment Technologies SA ;
+ * Copyright (c) 2018-2023 Open Assessment Technologies SA ;
  */
 /**
  * Plugin that manages a simple screen for the calculator, with configurable layout.
- * @author Jean-Sébastien Conan <jean-sebastien@taotesting.com>
  */
 import $ from 'jquery';
-import _ from 'lodash';
 import nsHelper from 'util/namespace';
 import scrollHelper from 'ui/scroller';
-import registeredTerms from 'ui/maths/calculator/core/terms';
-import expressionHelper from 'ui/maths/calculator/core/expression';
+import { terms, tokensHelper } from '@oat-sa/tao-calculator/dist';
 import pluginFactory from 'ui/maths/calculator/core/plugin';
 import historyTpl from 'ui/maths/calculator/plugins/screen/simpleScreen/history';
 import defaultScreenTpl from 'ui/maths/calculator/plugins/screen/simpleScreen/defaultTemplate';
 
-var pluginName = 'simpleScreen';
-
-/**
- * Default displayed value
- * @type {String}
- */
-var defaultExpression = '0';
+const pluginName = 'simpleScreen';
+const lastResultVariable = terms.VAR_ANS.value;
+const errorValue = terms.ERROR.value;
+const defaultExpression = '0';
 
 /**
  * Default plugin config
- * @type {Object}
+ * @type {object}
  */
-var defaultConfig = {
+const defaultConfig = {
     // the layout of the screen
     layout: defaultScreenTpl,
 
@@ -49,6 +43,26 @@ var defaultConfig = {
     decimalDigits: 5
 };
 
+/**
+ * Auto scroll to the last child of a container
+ * @param {jQuery} $container
+ * @param {string} [sel]
+ */
+function autoScroll($container, sel) {
+    scrollHelper.scrollTo($container.find(':last-child ' + (sel || '')), $container);
+}
+
+/**
+ * Renders HTML into a container and make sure the last child is visible.
+ * @param {jQuery} $container
+ * @param {string} html
+ * @param {string} [sel]
+ */
+function renderHtml($container, html, sel) {
+    $container.html(html);
+    autoScroll($container, sel);
+}
+
 export default pluginFactory(
     {
         name: pluginName,
@@ -56,134 +70,114 @@ export default pluginFactory(
         /**
          * Called when the plugin should be initialized.
          */
-        init: function init() {
-            var calculator = this.getCalculator();
-
-            /**
-             * Reset the current expression
-             */
-            function reset() {
-                calculator.replace(calculator.getConfig().expression || defaultExpression);
-            }
-
-            reset();
-
-            calculator
-                .after(nsHelper.namespaceAll('expressionchange', pluginName), function (expression) {
-                    // ensure the displayed expression is at least a 0 (never be an empty string)
-                    if (!expression.trim()) {
-                        _.defer(reset);
-                    }
-                })
-                .after(nsHelper.namespaceAll('evaluate', pluginName), function () {
-                    // when the expression is computed, replace it with the result as a variable
-                    calculator.replace(registeredTerms.ANS.value);
-                })
-                .on(nsHelper.namespaceAll('clear', pluginName), reset);
+        init() {
+            // required by the plugin factory to validate this plugin
         },
 
         /**
          * Called when the plugin should be rendered.
          */
-        render: function render() {
-            var self = this;
-            var calculator = this.getCalculator();
-            var areaBroker = calculator.getAreaBroker();
-            var pluginConfig = this.getConfig();
-            var tokenizer = calculator.getTokenizer();
-
-            /**
-             * Auto scroll to the last child of a container
-             * @param {jQuery} $container
-             * @param {String} [sel]
-             */
-            function autoScroll($container, sel) {
-                scrollHelper.scrollTo($container.find(':last-child ' + (sel || '')), $container);
-            }
+        render() {
+            const calculator = this.getCalculator();
+            const engine = calculator.getCalculator();
+            const areaBroker = calculator.getAreaBroker();
+            const pluginConfig = this.getConfig();
 
-            /**
-             * Renders the expression into a string
-             * @param {String|Object|token[]} expression
-             * @returns {String}
-             */
-            function renderExpression(expression) {
-                var variables = expressionHelper.roundLastResultVariable(
-                    calculator.getVariables(),
-                    pluginConfig.decimalDigits
-                );
-                return expressionHelper.render(expression, variables, tokenizer);
-            }
-
-            /**
-             * Updates the expression area
-             * @param {String|Object|token[]} tokens
-             */
-            function showExpression(tokens) {
-                self.controls.$expression.html(renderExpression(tokens));
-                autoScroll(self.controls.$expression);
+            if ('function' !== typeof pluginConfig.layout) {
+                throw new TypeError('The screen plugin requires a template to render!');
             }
 
-            if (!_.isFunction(pluginConfig.layout)) {
-                throw new TypeError('The screen plugin requires a template to render!');
+            if (!calculator.getExpression().trim()) {
+                calculator.replace(defaultExpression);
             }
 
             this.$layout = $(
                 pluginConfig.layout(
-                    _.defaults(
-                        {
-                            expression: renderExpression(calculator.getTokens())
-                        },
-                        pluginConfig
-                    )
+                    Object.assign({}, pluginConfig, {
+                        expression: calculator.renderExpression()
+                    })
                 )
             );
+            areaBroker.getScreenArea().append(this.$layout);
 
-            this.controls = {
-                $history: this.$layout.find('.history'),
-                $expression: this.$layout.find('.expression')
-            };
+            const $history = this.$layout.find('.history');
+            const $expression = this.$layout.find('.expression');
+            const showExpression = tokens => renderHtml($expression, calculator.renderExpression(tokens));
+            let active = false;
 
             calculator
-                .on(nsHelper.namespaceAll('command-clearAll', pluginName), function () {
-                    self.controls.$history.empty();
-                })
-                .on(nsHelper.namespaceAll('expressionchange', pluginName), function () {
-                    calculator.setState('error', false);
+                .on(nsHelper.namespaceAll('expressionchange', pluginName), () => {
                     showExpression(calculator.getTokens());
                 })
-                .on(nsHelper.namespaceAll('evaluate', pluginName), function (result) {
-                    self.controls.$history.html(
+                .on(nsHelper.namespaceAll('result', pluginName), result => {
+                    const { error } = engine;
+                    calculator.setState('error', error);
+                    active = false;
+
+                    renderHtml(
+                        $history,
                         historyTpl({
-                            expression: renderExpression(calculator.getTokens()),
-                            result: renderExpression(result)
-                        })
+                            expression: calculator.renderExpression(),
+                            result: calculator.renderExpression(result)
+                        }),
+                        '.history-result'
                     );
-                    autoScroll(self.controls.$history, '.history-result');
-                })
-                .after(nsHelper.namespaceAll('evaluate', pluginName), function (result) {
-                    if (expressionHelper.containsError(result.value)) {
+                    calculator.replace(lastResultVariable);
+
+                    if (error) {
                         showExpression(result);
                     }
                 })
-                .on(nsHelper.namespaceAll('syntaxerror', pluginName), function () {
+                .on(nsHelper.namespaceAll('command', pluginName), (name, parameter) => {
+                    if (active || calculator.is('error')) {
+                        return;
+                    }
+
+                    if (engine.isInstantMode()) {
+                        if (name === 'execute') {
+                            calculator.replace(lastResultVariable);
+                        }
+                        return;
+                    }
+
+                    // The expression is inactive.
+                    // The result was just calculated, any command invoked now would start a new expression.
+                    let expr = '';
+
+                    if (name === 'term') {
+                        // If the invoked command introduces an operator, we want to apply it on the last result.
+                        const [token] = parameter.split(/\s+/);
+                        if (tokensHelper.isOperator(terms[token])) {
+                            expr = lastResultVariable;
+                        }
+                    }
+
+                    calculator.replace(expr);
+                })
+                .on(nsHelper.namespaceAll('clear', pluginName), () => {
+                    $history.empty();
+                    calculator.replace(defaultExpression);
+                })
+                .on(nsHelper.namespaceAll('command clear', pluginName), () => {
+                    calculator.setState('error', false);
+                    active = true;
+                })
+                .on(nsHelper.namespaceAll('syntaxerror', pluginName), () => {
+                    showExpression(calculator.getExpression() + errorValue);
                     calculator.setState('error', true);
-                    showExpression(calculator.getExpression() + registeredTerms.ERROR.value);
+                    active = false;
                 });
-
-            areaBroker.getScreenArea().append(this.$layout);
         },
 
         /**
          * Called when the plugin is destroyed. Mostly when the host is destroyed itself.
          */
-        destroy: function destroy() {
-            var calculator = this.getCalculator();
+        destroy() {
             if (this.$layout) {
-                this.$layout.off('.' + pluginName).remove();
+                this.$layout.off(`.${pluginName}`).remove();
                 this.$layout = null;
             }
-            this.controls = null;
-            calculator.off('.' + pluginName);
+            this.getCalculator().off(`.${pluginName}`);
         }
     },
     defaultConfig

package/src/maths/calculator/scientificCalculator.js

@@ -13,16 +13,11 @@
  * along with this program; if not, write to the Free Software
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  *
- * Copyright (c) 2018 Open Assessment Technologies SA ;
- */
-/**
- * @author Jean-Sébastien Conan <jean-sebastien@taotesting.com>
+ * Copyright (c) 2018-2023 Open Assessment Technologies SA ;
  */
 import _ from 'lodash';
 import __ from 'i18n';
 import defaultCalculatorFactory from 'ui/maths/calculator/defaultCalculator';
-import pluginSign from 'ui/maths/calculator/plugins/modifiers/sign';
-import pluginPow10 from 'ui/maths/calculator/plugins/modifiers/pow10';
 import keyboardTpl from 'ui/maths/calculator/tpl/scientificKeyboard';
 import screenTpl from 'ui/maths/calculator/tpl/scientificScreen';
 
@@ -30,7 +25,7 @@ import screenTpl from 'ui/maths/calculator/tpl/scientificScreen';
  * Default config values
  * @type {Object}
  */
-var defaultConfig = {
+const defaultConfig = {
     title: __('Scientific Calculator'),
     width: 450,
     height: 400,
@@ -53,9 +48,6 @@ export default function scientificCalculator(config) {
     return defaultCalculatorFactory(
         _.merge(
             {
-                loadedPlugins: {
-                    modifiers: [pluginSign, pluginPow10]
-                },
                 calculator: {
                     plugins: {
                         templateKeyboard: {

package/src/maths/calculator/scss/calculator.scss

@@ -67,6 +67,19 @@
         bottom: -0.5em;
     }
 
+    [data-type='exponent'] {
+        vertical-align: super;
+        font-size: 0.75em;
+    }
+
+    [data-type='variable'] {
+        font-weight: bold;
+    }
+
+    [data-type='function']:not([data-value*='rt']) {
+        padding-right: 0.3em;
+    }
+
     .screen,
     .input {
         position: relative;
@@ -142,8 +155,8 @@
                     display: inline-block;
                     position: absolute;
                     z-index: 0;
-                    top: calc(50% - #{$calculatorButtonSize / 2} + #{$calculatorButtonPadding});
-                    left: calc(50% - #{$calculatorButtonSize / 2} + #{$calculatorButtonPadding});
+                    top: calc(50% - #{calc($calculatorButtonSize / 2)} + #{$calculatorButtonPadding});
+                    left: calc(50% - #{calc($calculatorButtonSize / 2)} + #{$calculatorButtonPadding});
                     width: calc(#{$calculatorButtonSize} - #{$calculatorButtonPadding * 2});
                     height: calc(#{$calculatorButtonSize} - #{$calculatorButtonPadding * 2});
                 }
@@ -190,8 +203,8 @@
                     display: inline-block;
                     position: absolute;
                     z-index: 0;
-                    top: calc(50% - #{$calculatorFontSizeBtnSwitch / 2}em - #{$calculatorSwitchPadding});
-                    bottom: calc(50% - #{$calculatorFontSizeBtnSwitch / 2}em - #{$calculatorSwitchPadding});
+                    top: calc(50% - #{calc($calculatorFontSizeBtnSwitch / 2)}em - #{$calculatorSwitchPadding});
+                    bottom: calc(50% - #{calc($calculatorFontSizeBtnSwitch / 2)}em - #{$calculatorSwitchPadding});
                     left: 3px;
                     right: 3px;
                 }
@@ -318,8 +331,8 @@
             }
             &.term-operator[data-token='FAC'],
             &.term-operator[data-token='NEG'] {
-                margin-left: -$calculatorTermSpace / 2;
-                margin-right: -$calculatorTermSpace / 2;
+                margin-left: calc(-1 * $calculatorTermSpace / 2);
+                margin-right: calc(-1 * $calculatorTermSpace / 2);
             }
             &.term-operator[data-token='POS'] {
                 display: none;
@@ -341,7 +354,7 @@
                 font-weight: bold;
                 color: $calculatorScreenSpecialTxt;
             }
-            &.term-variable[data-token='ANS'] {
+            &.term-variable[data-token='VAR_ANS'] {
                 background: $calculatorScreenSpecialBg;
                 padding: 0;
                 margin: 0 #{$calculatorTermSpace * 2};

package/src/maths/calculator/tpl/basicKeyboard.tpl

@@ -2,8 +2,8 @@
     <div class="row">
         <button class="key command" data-command="historyUp"><span>{{{labels.HISTORYUP}}}</span></button>
         <button class="key command" data-command="historyDown"><span>{{{labels.HISTORYDOWN}}}</span></button>
-        <button class="key command" data-command="stepDeleteLeft"><span>{{{labels.BACKSPACE}}}</span></button>
-        <button class="key command" data-command="clear"><span>{{{labels.CLEARALL}}}</span></button>
+        <button class="key command" data-command="deleteLeft"><span>{{{labels.BACKSPACE}}}</span></button>
+        <button class="key command" data-command="clear"><span>{{{labels.RESET}}}</span></button>
     </div>
     <div class="row">
         <button class="key operator" data-command="term" data-param="LPAR"><span>{{{labels.LPAR}}}</span></button>
@@ -35,4 +35,4 @@
         <button class="key execute" data-command="execute"><span>{{{labels.EXECUTE}}}</span></button>
         <button class="key operator" data-command="term" data-param="ADD"><span>{{{labels.ADD}}}</span></button>
     </div>
-</div>
+</div>

package/src/maths/calculator/tpl/scientificKeyboard.tpl

@@ -6,8 +6,8 @@
         <span class="spacer">{{{labels.SPACER}}}</span>
         <button class="key command" data-command="historyUp"><span>{{{labels.HISTORYUP}}}</span></button>
         <button class="key command" data-command="historyDown"><span>{{{labels.HISTORYDOWN}}}</span></button>
-        <button class="key command" data-command="stepDeleteLeft"><span>{{{labels.BACKSPACE}}}</span></button>
-        <button class="key command" data-command="clear"><span>{{{labels.CLEARALL}}}</span></button>
+        <button class="key command" data-command="deleteLeft"><span>{{{labels.BACKSPACE}}}</span></button>
+        <button class="key command" data-command="clear"><span>{{{labels.RESET}}}</span></button>
     </div>
     <div class="row">
         <button class="key operator" data-command="term" data-param="SIN"><span>{{{labels.SIN}}}</span></button>
@@ -43,7 +43,7 @@
         <button class="key operator" data-command="term" data-param="SQRT"><span>{{{labels.SQRT}}}</span></button>
         <button class="key operator" data-command="term" data-param="CBRT"><span>{{{labels.CBRT}}}</span></button>
         <button class="key operator" data-command="term" data-param="@NTHRT"><span>{{{labels.NTHRT}}}</span></button>
-        <button class="key operator" data-command="pow10"><span>{{{labels.POW10}}}</span></button>
+        <button class="key operator" data-command="term" data-param="TEN POW"><span>{{{labels.POW10}}}</span></button>
         <button class="key operand" data-command="term" data-param="NUM1"><span>{{{labels.NUM1}}}</span></button>
         <button class="key operand" data-command="term" data-param="NUM2"><span>{{{labels.NUM2}}}</span></button>
         <button class="key operand" data-command="term" data-param="NUM3"><span>{{{labels.NUM3}}}</span></button>
@@ -59,4 +59,4 @@
         <button class="key operand" data-command="term" data-param="DOT"><span>{{{labels.DOT}}}</span></button>
         <button class="key execute" data-command="execute"><span>{{{labels.EXECUTE}}}</span></button>
     </div>
-</div>
+</div>