@oat-sa/tao-core-ui 1.5.4 → 1.6.3

package/dist/previewer.js

@@ -14,7 +14,7 @@ define(['jquery', 'lodash', 'i18n', 'core/mimetype', 'core/pluginifier', 'ui/med
      * @author Bertrand Chevrier <bertrand@taotesting.com>
      */
     var ns = 'previewer';
-    var dataNs = 'ui.' + ns; //the plugin defaults
+    var dataNs = "ui.".concat(ns); //the plugin defaults
 
     var defaults = {
       containerClass: 'previewer'
@@ -59,7 +59,7 @@ define(['jquery', 'lodash', 'i18n', 'core/mimetype', 'core/pluginifier', 'ui/med
        * @returns {String} the tags
        */
       generate: function generate(type, data) {
-        var tmpl = this[type + 'Template'];
+        var tmpl = this["".concat(type, "Template")];
         data.jsonurl = JSON.stringify(data.url);
 
         if (_.isFunction(tmpl)) {
@@ -83,10 +83,10 @@ define(['jquery', 'lodash', 'i18n', 'core/mimetype', 'core/pluginifier', 'ui/med
        * @constructor
        * @param {Object} [options] - the plugin options
        * @returns {jQueryElement} for chaining
+       * @fires playerready when the mediaplayer (video) is sucessfully loaded and configured
        */
       init: function init(options) {
-        var self = previewer; //get options using default
-
+        //get options using default
         options = _.defaults(options || {}, defaults);
         return this.each(function () {
           var $elt = $(this);
@@ -98,14 +98,14 @@ define(['jquery', 'lodash', 'i18n', 'core/mimetype', 'core/pluginifier', 'ui/med
 
             $elt.data(dataNs, options);
 
-            self._update($elt);
+            previewer._update($elt);
             /**
              * The plugin has been created.
              * @event previewer#create.previewer
              */
 
 
-            $elt.trigger('create.' + ns);
+            $elt.trigger("create.".concat(ns));
           } else {
             $elt.previewer('update', options);
           }
@@ -131,6 +131,8 @@ define(['jquery', 'lodash', 'i18n', 'core/mimetype', 'core/pluginifier', 'ui/med
 
       /**
        * Set the player
+       * @param {JQueryElement} $elt
+       * @param {Object} player
        * @private
        */
       _setPlayer: function _setPlayer($elt, player) {
@@ -139,6 +141,7 @@ define(['jquery', 'lodash', 'i18n', 'core/mimetype', 'core/pluginifier', 'ui/med
 
       /**
        * Uninstalls the player if any
+       * @param {JQueryElement} $elt
        * @private
        */
       _clearPlayer: function _clearPlayer($elt) {
@@ -154,13 +157,12 @@ define(['jquery', 'lodash', 'i18n', 'core/mimetype', 'core/pluginifier', 'ui/med
        * @param {jQueryElement} $elt - the current element
        */
       _update: function _update($elt) {
-        var self = previewer;
         var player;
         var $content, $controls;
         var options = $elt.data(dataNs);
         var content, type;
 
-        self._clearPlayer($elt);
+        previewer._clearPlayer($elt);
 
         if (options) {
           type = options.type || mimeType.getFileType({
@@ -200,24 +202,28 @@ define(['jquery', 'lodash', 'i18n', 'core/mimetype', 'core/pluginifier', 'ui/med
 
           if (options.url) {
             if (type === 'audio' || type === 'video') {
+              var defSize = _defaultSize[type] || _defaultSize.video;
+              var width = options.width || defSize.width;
+              var height = options.height || defSize.height;
               player = mediaplayer({
                 url: options.url,
                 type: options.mime,
-                renderTo: $content
+                renderTo: $content,
+                width: width,
+                height: height
               }).on('ready', function () {
-                var defSize = _defaultSize[this.getType()] || _defaultSize.video;
-
-                var width = options.width || defSize.width;
-                var height = options.height || defSize.height;
-                this.resize(width, height);
+                /**
+                 * @event playerready
+                 */
+                $elt.trigger('playerready');
               });
 
-              self._setPlayer($elt, player); // stop video and free the socket on escape keypress(modal window hides)
+              previewer._setPlayer($elt, player); // stop video and free the socket on escape keypress(modal window hides)
 
 
               $('body').off('keydown.mediaelement').on('keydown.mediaelement', function (event) {
                 if (event.keyCode === 27) {
-                  self._clearPlayer($elt);
+                  previewer._clearPlayer($elt);
                 }
               }); // stop the video and free the socket on file select from the action icons
               // stop video, free the socket and remove player interface on video deletion
@@ -230,7 +236,7 @@ define(['jquery', 'lodash', 'i18n', 'core/mimetype', 'core/pluginifier', 'ui/med
                 if (!$(this).closest('.mediaplayer').length) {
                   $controls.off('mousedown.mediaelement');
 
-                  self._clearPlayer($elt);
+                  previewer._clearPlayer($elt);
                 }
               });
             } else if (type === 'pdf') {
@@ -254,7 +260,7 @@ define(['jquery', 'lodash', 'i18n', 'core/mimetype', 'core/pluginifier', 'ui/med
            */
 
 
-          $elt.trigger('update.' + ns);
+          $elt.trigger("update.".concat(ns));
         }
       },
 
@@ -276,7 +282,7 @@ define(['jquery', 'lodash', 'i18n', 'core/mimetype', 'core/pluginifier', 'ui/med
            */
 
 
-          $elt.trigger('destroy.' + ns);
+          $elt.trigger("destroy.".concat(ns));
         });
       }
     }; //Register the incrementer to behave as a jQuery plugin.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "1.5.4",
+    "version": "1.6.3",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {

package/scss/basic.scss

@@ -12,3 +12,4 @@
 @import "inc/forms";
 @import "inc/flex-grid";
 @import "inc/report";
+@import "inc/jquery.nouislider";

package/scss/inc/_jquery.nouislider.scss

@@ -0,0 +1,254 @@
+/* Functional styling;
+ * These styles are required for noUiSlider to function.
+ * You don't need to change these rules to apply your design.
+ */
+
+.noUi-target,
+.noUi-target * {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -ms-touch-action: none;
+    -ms-user-select: none;
+    -moz-user-select: none;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.noUi-base {
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+.noUi-origin {
+    position: absolute;
+    right: 0;
+    top: 0;
+    left: 0;
+    bottom: 0;
+}
+.noUi-handle {
+    position: relative;
+    z-index: 1;
+}
+.noUi-stacking .noUi-handle {
+    /* This class is applied to the lower origin when
+       its values is > 50%. */
+    z-index: 10;
+}
+.noUi-stacking + .noUi-origin {
+    /* Fix stacking order in IE7, which incorrectly
+       creates a new context for the origins. */
+    *z-index: -1;
+}
+.noUi-state-tap .noUi-origin {
+}
+.noUi-state-drag * {
+    cursor: inherit !important;
+}
+
+/* Slider size and handle placement;
+ */
+.noUi-horizontal {
+    height: 11px;
+}
+.noUi-horizontal .noUi-handle {
+    width: 10px;
+    height: 17px;
+    left: -5px;
+    top: -4px;
+}
+
+.noUi-horizontal .noUi-handle:after {
+    border-top: 3px solid $uiClickableActiveBg;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    content: "";
+    left: 0;
+    position: absolute;
+    bottom: -3px;
+    width: 0;
+}
+
+.qti-slider-values{
+    margin-top: 6px !important;
+}
+
+.noUi-horizontal .noUi-handle {
+    &:hover:after {
+        border-top: 3px solid $uiClickableHoverBg;
+    }
+    &.noUi-active {
+        &:after {
+            border-top-color: $uiClickableHoverBg;
+        }
+    }
+}
+
+.noUi-horizontal.noUi-extended {
+    padding: 0 15px;
+}
+.noUi-horizontal.noUi-extended .noUi-origin  {
+    right: -15px;
+}
+.noUi-vertical {
+    width: 11px;
+    height: 200px;
+    display: inline-block;
+}
+.noUi-vertical .noUi-handle {
+    width: 17px;
+    height: 10px;
+    left: -4px;
+    top: -5px;
+}
+.noUi-vertical.noUi-extended {
+    padding: 15px 0;
+}
+.noUi-vertical.noUi-extended .noUi-origin  {
+    bottom: -15px;
+}
+
+/* Styling;
+ */
+.noUi-background {
+    background: $uiGeneralContentBg;
+}
+.noUi-connect {
+    background: $uiClickableDefaultBg;
+}
+.noUi-origin {
+}
+.noUi-target {
+    @include simple-border()
+}
+
+/* Handles and cursors;
+ */
+.noUi-dragable {
+    cursor: w-resize;
+}
+.noUi-vertical .noUi-dragable {
+    cursor: n-resize;
+}
+.noUi-handle {
+    background: $uiClickableActiveBg;
+    color: $uiClickableActiveBg;
+    cursor: default;
+}
+
+.noUi-active, .noUi-handle:hover{
+    background:$uiClickableHoverBg;
+    color: $uiClickableHoverBg;
+}
+
+.noUi-handle:after {
+    left: 17px;
+}
+.noUi-vertical .noUi-handle:before,
+.noUi-vertical .noUi-handle:after {
+    width: 14px;
+    height: 1px;
+    left: 6px;
+    top: 14px;
+}
+.noUi-vertical .noUi-handle:after {
+    top: 17px;
+}
+
+/* Disabled state;
+ */
+[disabled].noUi-connect,
+[disabled] .noUi-connect {
+    background: #B8B8B8;
+}
+[disabled] .noUi-handle {
+    cursor: not-allowed;
+}
+
+.noUi-horizontal {
+
+    .step-marker {
+        position:relative;
+        //margin-bottom: 10px;
+        span {
+            font-size: 10px;
+            position: relative;
+            display:block;
+            float:left;
+            text-align:center;
+            min-height: 10px;
+            &:before {
+                width: 1px;
+                height: 5px;
+                position: absolute;
+                content: '';
+                background: whiten($textColor, .15);
+                left: 50%;
+            }
+        }
+        &:before {
+        }
+        &.after {
+            top: 5px;
+            span {
+                &:before {
+                    top: -4px;
+                }
+            }
+        }
+        &.before {
+            top: -28px;
+            span {
+                &:before {
+                    top: 13px;
+                }
+            }
+        }
+    }
+}
+
+.item-editor-sidebar .noUi-target {
+    margin-left: 4px;
+    margin-right: 4px;
+}
+
+.noUi-vertical-wrapper {
+    position: relative;
+    display: inline-block;
+    .step-marker {
+        position:absolute;
+        height: 100%;
+        top: 0;
+        span {
+            font-size: 10px;
+            position: relative;
+            display: block;
+            &:before {
+                width: 5px;
+                height: 1px;
+                position: absolute;
+                content: '';
+                background: whiten($textColor, .15);
+                top: 50%;
+            }
+        }
+        &:before {
+        }
+
+        &.after {
+            left: 20px;
+            span {
+                &:before {
+                    left: -9px;
+                }
+            }
+        }
+        &.before {
+            span {
+                &:before {
+                    left: -40%;
+                }
+            }
+        }
+    }
+}
+

package/src/ckeditor/ckConfigurator.js

@@ -25,6 +25,15 @@ import 'ckeditor';
  */
 var originalConfig = _.cloneDeep(window.CKEDITOR.config);
 
+function getUserLanguage() {
+    var documentLang = window.document.documentElement.getAttribute('lang');
+    var documentLocale = documentLang && documentLang.split('-')[0];
+
+    return documentLocale;
+}
+
+var lang = getUserLanguage();
+
 var ckConfigurator = (function() {
     /**
      * Toolbar presets that you normally never would need to change, they can however be overridden with options.toolbar.
@@ -172,7 +181,7 @@ var ckConfigurator = (function() {
         floatSpaceDockedOffsetY: 0,
         forcePasteAsPlainText: true,
         skin: 'tao',
-        language: 'en',
+        language: lang,
         removePlugins: '',
         linkShowAdvancedTab: false,
         justifyClasses: ['txt-lft', 'txt-ctr', 'txt-rgt', 'txt-jty'],

package/src/itemButtonList/css/item-button-list.css

@@ -0,0 +1,225 @@
+/**
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; under version 2
+ * of the License (non-upgradable).
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * 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) 2022 Open Assessment Technologies SA ;
+ */
+/*
+Usage:
+- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
+   if 3 colors used then the position of each will be 33,33%
+- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
+   first param - color, second - position. Also you can use px or other valid units for set position.
+*/
+/* Do not edit */
+.buttonlist-items {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: start;
+    padding: 0;
+    /****** base styles *******/
+    /****** step state styles *******/
+    /* disabling is applied at the buttonlist-items level */
+    /****** keyboard focus styles *******/
+}
+
+.buttonlist-items .buttonlist-item {
+    height: 6.25rem;
+    width: 6.25rem;
+    display: flex;
+    justify-content: center;
+    /* aligning left - cut focusing board for keyboard interacting */
+    align-items: center;
+    /* reset parent styles */
+    padding: 0;
+    border: none;
+}
+
+.buttonlist-items .buttonlist-btn {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 4rem;
+    width: 4rem;
+    border-style: solid;
+    border-radius: 50%;
+    border-width: 0.125rem;
+    border-color: #737373;
+    margin: 1.3rem 0.75rem 1rem 0.75rem;
+    padding: 0;
+    /*Fixes firefox button jumps*/
+    font-weight: bold;
+    font-size: 1.6rem;
+    background-color: white;
+    color: #737373;
+    text-shadow: none;
+    cursor: pointer;
+}
+
+.buttonlist-items .buttonlist-label {
+    font-family: 'Nunito Sans', 'Source Sans Pro', Arial, sans-serif;
+    max-width: 3.75rem;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: initial;
+}
+
+.buttonlist-items .buttonlist-icon {
+    padding: 0;
+    top: 0;
+    left: 0;
+}
+
+.buttonlist-items .indicator {
+    display: none;
+}
+
+.buttonlist-items .buttonlist-score-badge {
+    position: absolute;
+    top: -0.9rem;
+    right: -0.9rem;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 100%;
+    color: white;
+    border: 0.1rem solid white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.buttonlist-items .buttonlist-score-icon {
+    font-size: 1.2rem;
+    padding: 0;
+    top: 0;
+    left: 0;
+}
+
+.buttonlist-items .icon-info::before {
+    content: "\e923";
+}
+
+.buttonlist-items .icon-flagged::before {
+    content: "\e921";
+}
+
+.buttonlist-items .icon-correct::before {
+    content: "\e69f";
+}
+
+.buttonlist-items .icon-incorrect::before {
+    content: "\e69e";
+}
+
+.buttonlist-items .buttonlist-item {
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -o-user-select: none;
+    user-select: none;
+}
+
+.buttonlist-items .buttonlist-item.viewed .buttonlist-btn {
+    border-width: 0.25rem;
+    color: #1f1f1f;
+    border-color: #1f1f1f;
+}
+
+.buttonlist-items .buttonlist-item.answered .buttonlist-btn {
+    border-width: 0.25rem;
+    background-color: #1f1f1f;
+    color: white;
+    border-color: #1f1f1f;
+}
+
+.buttonlist-items .buttonlist-item.buttonlist-item-active .indicator {
+    position: absolute;
+    display: block;
+    z-index: 1;
+    color: #1f1f1f;
+    height: 1.4rem;
+    min-width: 1.6rem;
+    top: unset;
+    bottom: -1.7rem;
+    padding: 0;
+    /* centering horizontally */
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.buttonlist-items .buttonlist-item.correct .buttonlist-score-badge {
+    background-color: #0e914b;
+}
+
+.buttonlist-items .buttonlist-item.incorrect .buttonlist-score-badge {
+    background-color: #ba122b;
+}
+
+.buttonlist-items:not(.disabled) .buttonlist-btn:hover {
+    background-color: #e6f3ff;
+    color: #0057a3;
+    border-color: #0057a3;
+}
+
+.buttonlist-items.disabled {
+    /* reset global styles */
+    background-color: unset !important;
+    opacity: 1 !important;
+    text-shadow: none !important;
+}
+
+.buttonlist-items.disabled .buttonlist-btn {
+    cursor: not-allowed;
+    /* reset global styles */
+    opacity: 0.5;
+    text-shadow: none;
+}
+
+.buttonlist-items .buttonlist-item.key-navigation-highlight .buttonlist-btn::before,
+.buttonlist-items .buttonlist-item .buttonlist-btn.buttonlist-btn-focus:focus::before {
+    content: '';
+    display: block;
+    position: absolute;
+    width: 5.2rem;
+    height: 5.2rem;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-width: 0.25rem;
+    border-color: #0057a3;
+    border-style: dotted;
+    border-radius: 50%;
+}
+
+.buttonlist-items .buttonlist-item.key-navigation-highlight.buttonlist-item-active .buttonlist-btn .indicator,
+.buttonlist-items .buttonlist-item.buttonlist-item-active .buttonlist-btn.buttonlist-btn-focus:focus .indicator,
+.buttonlist-items .buttonlist-item.buttonlist-item-active .buttonlist-btn:focus-visible .indicator {
+    color: #0057a3;
+}
+
+.buttonlist-items .buttonlist-item.key-navigation-highlight.viewed .buttonlist-btn,
+.buttonlist-items .buttonlist-item.viewed .buttonlist-btn.buttonlist-btn-focus:focus {
+    background-color: white;
+    color: #0057a3;
+    border-color: #0057a3;
+}
+
+.buttonlist-items .buttonlist-item.key-navigation-highlight.answered .buttonlist-btn,
+.buttonlist-items .buttonlist-item.answered .buttonlist-btn.buttonlist-btn-focus:focus {
+    background-color: #0057a3;
+    color: white;
+    border-color: #0057a3;
+}
+
+/*# sourceMappingURL=item-button-list.css.map */