mumuki-laboratory 7.6.2 → 7.8.0

data/app/assets/javascripts/mumuki_laboratory/application/custom-editor.js

@@ -1,21 +1,59 @@
-var mumuki = mumuki || {};
+/**
+ * @typedef {{name: string, value: string}} EditorProperty
+ */
 
-(function (mumuki) {
+/**
+ * @typedef {{getContent: () => EditorProperty}} CustomEditorSource
+ */
 
-  var CustomEditor = {
+/**
+ * This module allows custom editors to register
+ * content sources that can not me mapped to standard selectors {@code mu-custom-editor-value},
+ * {@code mu-custom-editor-extra} and {@code mu-custom-editor-test}
+ *
+ * CustomEditor sources are cleared after page reload even when using turbolinks
+ */
+mumuki.CustomEditor = (() => {
+
+  const CustomEditor = {
+    /**
+     * @type {CustomEditorSource[]}
+     */
     sources: [],
 
-    addSource: function (source) {
+    /**
+     * @param {CustomEditorSource} source
+     */
+    addSource(source) {
       CustomEditor.sources.push(source);
     },
 
-    // Each external source must implement getContent method
+    /**
+     * @deprecated use getContents instead
+     */
+    getContent() {
+      return this.getContents();
+    },
 
-    getContent: function () {
+    /**
+     * @returns {EditorProperty[]}
+     */
+    getContents() {
       return CustomEditor.sources.map( e => e.getContent() );
+    },
+
+    clearSources() {
+      this.sources = [];
+    },
+
+    get hasSources() {
+      return this.sources.length > 0;
     }
   };
 
-  mumuki.CustomEditor = CustomEditor;
+  mumuki.load(() => {
+    mumuki.CustomEditor.clearSources();
+  });
 
-}(mumuki));
+  return CustomEditor;
+})();

data/app/assets/javascripts/mumuki_laboratory/application/discussions.js

@@ -1,23 +1,11 @@
-var mumuki = mumuki || {};
-
-mumuki.load(function () {
-  var $newDiscussionModal = $('.new-discussion-modal');
-  var $newDiscussion = $('.discussion-create');
-
-  $newDiscussion.click(function () {
-    $newDiscussionModal.modal({
-      backdrop: 'static',
-      keyboard: false
-    });
-  });
-
+mumuki.load(() => {
   var $subscriptionSpans = $('.discussion-subscription > span');
   var $upvoteSpans = $('.discussion-upvote > span');
 
   function createNewMessageEditor() {
     var $textarea = $("#new-discussion-message");
     var textarea = $textarea[0];
-    if(!textarea) return;
+    if (!textarea) return;
 
     return new mumuki.editor.CodeMirrorBuilder(textarea)
       .setupSimpleEditor()
@@ -39,7 +27,7 @@ mumuki.load(function () {
 
   createReadOnlyEditors();
   createNewMessageEditor();
-  
+
   var Forum = {
     toggleButton: function (spans) {
       spans.toggleClass('hidden');
@@ -64,10 +52,21 @@ mumuki.load(function () {
     discussionPostAndToggle: function (url, elem) {
       Forum.discussionPost(url).done(Forum.toggleButton(elem))
     },
-    discussionMessageToggleApprove : function (url, elem) {
+    discussionMessageToggleApprove: function (url, elem) {
       Forum.discussionPost(url).done(function () {
         elem.toggleClass("selected");
       })
+    },
+    discussionMessageToggleNotActuallyAQuestion: function (url, elem) {
+      Forum.discussionPost(url).done(function () {
+        elem.toggleClass("selected");
+      })
+    },
+    discussionsToggleCheckbox: function (elem) {
+      const key = elem.attr('name');
+      const params = new URLSearchParams(location.search);
+      elem.is(':checked') ? params.set(key, elem.val()) : params.delete(key);
+      location.search = params.toString();
     }
   };
 

data/app/assets/javascripts/mumuki_laboratory/application/editors.js

@@ -0,0 +1,104 @@
+/**
+ * This module allows to read and write the current editor's contents
+ * regardless if it is an standard editor or a custom editor
+ */
+mumuki.editors = {
+  /**
+   * @type {() => void}
+   */
+  _contentSyncer: null,
+
+  /**
+   * Updates the current editor's content
+   *
+   * @param {string} content
+   */
+  setContent(content) {
+    const $customEditor = $('#mu-custom-editor-value');
+    if ($customEditor.length) {
+      $customEditor.val(content);
+    } else {
+      mumuki.editor.setContent(content);
+    }
+  },
+
+
+  /**
+   * @returns {EditorProperty[]}
+   */
+  getContents() {
+    return mumuki.CustomEditor.hasSources ?
+      mumuki.CustomEditor.getContents() :
+      this.getStandardEditorContents();
+  },
+
+  /**
+   * Syncs and returns the content objects of the standard editor form
+   *
+   * This content object may include keys like {@code content},
+   * {@code content_extra} and {@code content_test}
+   *
+   * @returns {EditorProperty[]}
+   */
+  getStandardEditorContents() {
+    this._syncContent();
+    return $('.new_solution').serializeArray();
+  },
+
+  /**
+   * Answers a submission object with a key for each of the current
+   * editor sources.
+   *
+   * This method will use CustomEditor's sources if availble, or
+   * standard editor's content sources otherwise
+   *
+   * @returns {Submission}
+   */
+  getSubmission() {
+    let content = {};
+    let contents = this.getContents();
+    contents.forEach((it) => {
+      content[it.name] = it.value;
+    });
+    return content;
+  },
+
+  /**
+   * Copies current solution from it native rendering components
+   * to the appropriate submission form elements.
+   *
+   * Both editors and runners with a custom editor that don't register a source should
+   * register its own syncer function in order to {@link syncContent} work properly.
+   *
+   * @see registerContentSyncer
+   * @see CustomEditor#addSource
+   */
+  _syncContent() {
+    if (this._contentSyncer) {
+      this._contentSyncer();
+    }
+  },
+
+  /**
+   * Sets a content syncer, that will be used by {@link _syncContent}
+   * in ordet to dump solution into the submission form fields.
+   *
+   * Each editor should have its own syncer registered - otherwise previous or none may be used
+   * causing unpredicatble behaviours - or cleared by passing {@code null}.
+   *
+   * As a particular case, runners with custom editors that don't add sources using {@link CustomEditor#addSource}
+   * should set the {@code #mu-custom-editor-value} value within its syncer.
+   *
+   * @param {() => void} [syncer] the syncer, or null, if no sync'ing is needed
+   */
+  registerContentSyncer(syncer = null) {
+    this._contentSyncer = syncer;
+  },
+
+  /**
+   * @param {CustomEditorSource} source
+   */
+  addCustomSource(source) {
+    mumuki.CustomEditor.addSource(source)
+  }
+};

data/app/assets/javascripts/mumuki_laboratory/application/elipsis.js

@@ -7,7 +7,7 @@
 //
 //
 // This module assumes the strings are already markdown-like escaped code strings, not plain code
-(function (mumuki) {
+mumuki.elipsis = (() => {
 
   function elipsis(code) {
     return code
@@ -16,8 +16,7 @@
       .replace(/<description-for-student\[([^\]]*)\]@[\s\S]*?@description-for-student>/g, ' ... $1 ... ');
   }
 
-  mumuki.elipsis = elipsis;
-  mumuki.elipsis.replaceHtml = () => {
+  elipsis.replaceHtml = () => {
     let $elipsis = $('.mu-elipsis');
     $elipsis.each((it, e) =>  {
       let $e = $(e);
@@ -28,4 +27,6 @@
   mumuki.load(() => {
     mumuki.elipsis.replaceHtml();
   });
-})(mumuki);
+
+  return elipsis;
+})();

data/app/assets/javascripts/mumuki_laboratory/application/exercise.js

@@ -0,0 +1,32 @@
+mumuki.exercise = {
+  /**
+   * The current exercise's id
+   *
+   * @type {number}
+   * */
+  id: null,
+
+  /**
+   * The current exercise's layout
+   *
+   * @type {"input_right" | "input_bottom" | "input_primary" | "input_kindergarten"}
+   * */
+  layout: null,
+
+  /**
+   * Set global current exercise information
+   */
+  load() {
+    const $muExerciseId = $('#mu-exercise-id');
+    if ($muExerciseId.length) {
+      this.id = Number($muExerciseId.val());
+      // @ts-ignore
+      this.layout = $('#mu-exercise-layout').val();
+    } else {
+      this.id = null;
+      this.layout = null;
+    }
+  }
+}
+
+mumuki.load(() => mumuki.exercise.load())

data/app/assets/javascripts/mumuki_laboratory/application/inputs.js

@@ -1,12 +1,14 @@
-(() => {
+mumuki.onInputsReady = (() => {
   // Declares a `document.ready` handler that will be
   // activated only when there is at least one element that match
   // the given selector
-	mumuki.onInputsReady = (inputsSelector, callback) => {
+	function onInputsReady(inputsSelector, callback) {
 		$(document).ready((event) => {
 			if ($(inputsSelector).length === 0) return;
 
 			callback(event);
 		})
 	}
+
+	return onInputsReady;
 })();

data/app/assets/javascripts/mumuki_laboratory/application/interval.js

@@ -1,6 +1,4 @@
-var mumuki = mumuki || {};
-
-(function (mumuki) {
+(function () {
   // When using Turbolinks, intervals loaded inside <body> aren't destroyed on page changes
   // Use this function instead if you want the behaviour of a regular setInterval
   mumuki.setInterval = function (intervalFunction, milliseconds) {
@@ -14,4 +12,4 @@ var mumuki = mumuki || {};
     return interval;
   }.bind(this);
 
-}(mumuki));
+}());

data/app/assets/javascripts/mumuki_laboratory/application/kids.js

@@ -1,20 +1,36 @@
-mumuki.load(function () {
-  var $bubble = $('.mu-kids-character-speech-bubble').children('.mu-kids-character-speech-bubble-normal');
-
-  var availableTabs = ['.description', '.hint'];
-  var $speechParagraphs, paragraphHeight, scrollHeight, nextSpeechBlinking;
-  var currentParagraphIndex = 0;
-  var paragraphCount = 1;
-  var paragraphsLines = 2;
-  var $prevSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-prev-speech').hide();
-  var $nextSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-next-speech');
-  var $speechTabs = $('.mu-kids-character-speech-bubble-tabs > li:not(.separator)');
-  var $defaultSpeechTabName = 'description';
-  var $texts = $bubble.children(availableTabs.join(", "));
-  var $hint = $('.mu-kids-hint');
-  var $description = $('.mu-kids-description');
-  var discussionsLinkHtml = $('#mu-kids-discussion-link-html').html();
-  var contextModalButton = new mumuki.Button($('.mu-kids-context .modal-footer button'));
+mumuki.load(() => {
+  let $bubble = $('.mu-kids-character-speech-bubble').children('.mu-kids-character-speech-bubble-normal');
+
+  let availableTabs = ['.description', '.hint'];
+  let $speechParagraphs, paragraphHeight, scrollHeight, nextSpeechBlinking;
+  let currentParagraphIndex = 0;
+  let paragraphCount = 1;
+  let paragraphsLines = 2;
+  let $prevSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-prev-speech').hide();
+  let $nextSpeech = $('.mu-kids-character-speech-bubble-normal > .mu-kids-next-speech');
+  let $speechTabs = $('.mu-kids-character-speech-bubble-tabs > li:not(.separator)');
+  let $defaultSpeechTabName = 'description';
+  let $texts = $bubble.children(availableTabs.join(", "));
+  let $hint = $('.mu-kids-hint');
+  let $description = $('.mu-kids-description');
+  let discussionsLinkHtml = $('#mu-kids-discussion-link-html').html();
+  let $kidsContext = $('#mu-kids-context');
+  let contextModalButton = new mumuki.Button($('.mu-kids-context .modal-footer button'));
+
+  // It is important that context is shown as early as possible
+  // in order to display the loading animation
+  function showContext() {
+    $kidsContext.modal({
+      backdrop: 'static',
+      keyboard: false
+    });
+  }
+
+  $kidsContext.on('hidden.bs.modal', function () {
+    animateSpeech();
+  });
+
+  showContext();
 
   function floatFromPx(value) {
     return parseFloat(value.substring(0, value.length - 2));
@@ -57,6 +73,25 @@ mumuki.load(function () {
     isVisible ? element.show() : element.hide();
   }
 
+  /**
+   * Assigns propert widths to the states and blocks areas
+   * depending on the presence and type of available states
+   *
+   * @param {*} $muKidsStateImage
+   * @param {*} $muKidsStatesContainer
+   * @param {*} $muKidsBlocks
+   * @param {number} fullMargin
+   */
+  function distributeAreas($muKidsStateImage, $muKidsStatesContainer, $muKidsBlocks, fullMargin) {
+    if ($muKidsStateImage.children().length) {
+      var ratio = $muKidsStatesContainer.hasClass('mu-kids-single-state') ? 1 : 2;
+      $muKidsStatesContainer.width($muKidsStatesContainer.height() / ratio * 1.25 - fullMargin);
+    } else {
+      $muKidsStatesContainer.width(0);
+      $muKidsBlocks.width('100%');
+    }
+  }
+
   mumuki.kids = {
 
     // ==========
@@ -134,6 +169,8 @@ mumuki.load(function () {
       contextModalButton.enable();
     },
 
+    showContext,
+
     // ===========
     // Private API
     // ===========
@@ -274,9 +311,6 @@ mumuki.load(function () {
   mumuki.kids.resultAction.errored = mumuki.kids._showOnCharacterBubble;
   mumuki.kids.resultAction.pending = mumuki.kids._showOnCharacterBubble;
 
-  $('.mu-kids-context').on('hidden.bs.modal', function () {
-    animateSpeech();
-  });
 
   $(document).ready(() => {
     // Speech initialization
@@ -292,13 +326,15 @@ mumuki.load(function () {
 
     $speechTabs.each(function (i) {
       var $tab = $($speechTabs[i]);
-      $tab.click(function () {
-        $speechTabs.removeClass('active');
-        $tab.addClass('active');
-        $texts.hide();
-        $bubble.children('.' + $tab.data('target')).show();
-        updateSpeechParagraphs();
-      })
+      if ($tab.data('target')) {
+        $tab.click(function () {
+          $speechTabs.removeClass('active');
+          $tab.addClass('active');
+          $texts.hide();
+          $bubble.children('.' + $tab.data('target')).show();
+          updateSpeechParagraphs();
+        })
+      }
     });
 
     if (paragraphCount > 1) {
@@ -315,24 +351,25 @@ mumuki.load(function () {
     });
 
     // States initial resizing
-
     mumuki.resize(function () {
       var margin = 15;
       var fullMargin = margin * 2;
 
-      var $muKidsStatesContainer = $('.mu-kids-states');
-      var $muKidsStates = $('.mu-kids-state');
-
-      var dimension = $muKidsStatesContainer.height() / 2 * 1.25 - fullMargin;
-      $muKidsStatesContainer.width(dimension);
+      let $muKidsStatesContainer = $('.mu-kids-states');
+      let $muKidsStates = $('.mu-kids-state');
+      let $muKidsBlocks = $('.mu-kids-blocks');
+      let $muKidsExercise = $('.mu-kids-exercise');
+      let $muKidsExerciseDescription = $('.mu-kids-exercise-description');
+      let $muKidsStateImage = $('.mu-kids-state-image');
 
-      var $muKidsExercise = $('.mu-kids-exercise');
-      var $muKidsExerciseDescription = $('.mu-kids-exercise-description');
+      distributeAreas($muKidsStateImage, $muKidsStatesContainer, $muKidsBlocks, fullMargin);
 
-      $muKidsExerciseDescription.width($muKidsExercise.width() - $muKidsStatesContainer.width() - margin);
+      if (!$muKidsExerciseDescription.hasClass('mu-kids-exercise-description-fixed')) {
+        $muKidsExerciseDescription.width($muKidsExercise.width() - $muKidsStatesContainer.width() - margin);
+      }
 
       $muKidsStates.each((index, state) => mumuki.kids.scaleState($(state), fullMargin));
-      mumuki.kids.scaleBlocksArea($('.mu-kids-blocks'));
+      mumuki.kids.scaleBlocksArea($muKidsBlocks);
 
       if (paragraphCount <= 1) clearInterval(nextSpeechBlinking);