mumuki-laboratory 7.5.1 → 7.7.0

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

@@ -82,6 +82,7 @@ var mumuki = mumuki || {};
 
   mumuki.load(function () {
     mumuki.page.editors = createCodeMirrors();
+    mumuki.submission.registerContentSyncer(mumuki.editor.syncContent);
     updateCodeMirrorLanguage();
     onSelectUpdateCodeMirror();
 

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

@@ -1,21 +1,63 @@
+/**
+ * @typedef {{name: string, value: string}} EditorProperty
+ */
+
+/**
+ * @typedef {{getContent: () => EditorProperty}} CustomEditorSource
+ */
+
 var mumuki = mumuki || {};
 
 (function (mumuki) {
 
   var 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();
+  });
 
+  /**
+   * 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
+   *
+   * @module mumuki.CustomEditor
+   */
+  mumuki.CustomEditor = CustomEditor;
 }(mumuki));

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

@@ -1,23 +1,13 @@
 var mumuki = mumuki || {};
 
 mumuki.load(function () {
-  var $newDiscussionModal = $('.new-discussion-modal');
-  var $newDiscussion = $('.discussion-create');
-
-  $newDiscussion.click(function () {
-    $newDiscussionModal.modal({
-      backdrop: 'static',
-      keyboard: false
-    });
-  });
-
   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 +29,7 @@ mumuki.load(function () {
 
   createReadOnlyEditors();
   createNewMessageEditor();
-  
+
   var Forum = {
     toggleButton: function (spans) {
       spans.toggleClass('hidden');
@@ -64,10 +54,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/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'));
+  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);
 

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

@@ -2,6 +2,9 @@ var mumuki = mumuki || {};
 
 (function (mumuki) {
 
+  /**
+   * Updates the current exercise progress indicator
+   * */
   mumuki.updateProgressBarAndShowModal = function (data) {
     $('.progress-list-item.active').attr('class', data.class_for_progress_list_item);
     if(data.guide_finished_by_solution) $('#guide-done').modal();

data/app/assets/javascripts/mumuki_laboratory/application/results-renderer.js

@@ -0,0 +1,51 @@
+(() => {
+
+  // ==========================
+  // View function for building
+  // the results UI
+  // ==========================
+
+  /**
+   * @param {string} status
+   * @returns {string}
+   */
+  function iconForStatus(status) {
+    switch (status) {
+      case "errored":              return "fa-minus-circle";
+      case "failed":               return "fa-times-circle";
+      case "passed_with_warnings": return "fa-exclamation-circle";
+      case "passed":               return "fa-check-circle";
+      case "pending":              return "fa-circle";
+    }
+  }
+
+  /**
+   *
+   * @param {string} status
+   * @returns {string}
+   */
+  function classForStatus(status) {
+    switch (status) {
+      case "errored":              return "broken";
+      case "failed":               return "danger";
+      case "passed_with_warnings": return "warning";
+      case "passed":               return "success";
+      case "pending":              return "muted";
+    }
+  };
+
+
+  /**
+   * @param {string} status
+   * @param {boolean} [active]
+   * @returns {string}
+   */
+  function progressListItemClassForStatus(status, active = false) {
+    return `progress-list-item text-center ${classForStatus(status)} ${active ? 'active' : ''}`;
+  };
+
+  mumuki.renderers = mumuki.renderers || {};
+  mumuki.renderers.classForStatus = classForStatus;
+  mumuki.renderers.iconForStatus = iconForStatus;
+  mumuki.renderers.progressListItemClassForStatus = progressListItemClassForStatus;
+})();

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

@@ -1,6 +1,19 @@
 var mumuki = mumuki || {};
 
 (function (mumuki) {
+
+  // =============
+  // UI Components
+  // =============
+
+  function animateTimeoutError(submitButton) {
+    let scene = new muvment.Scene($('.submission-result-error-animation'));
+    scene.addState(mumuki.errorState('timeout_1').onStart(submitButton.setOriginalContent.bind(submitButton)).onEndSwitch(scene, 'timeout_2'))
+      .addState(mumuki.errorState('timeout_2').onEndSwitch(scene, 'timeout_3'))
+      .addState(mumuki.errorState('timeout_3').onStart(submitButton.enable.bind(submitButton)))
+      .play();
+  }
+
   function ResultsBox(submissionsResults) {
     this.submissionsResultsArea = submissionsResults;
     this.processingTemplate = $('#processing-template');
@@ -44,31 +57,133 @@ var mumuki = mumuki || {};
         this.preventClick();
       }
     }
+  }
+
+  // ============
+  // Content Sync
+  // ============
 
+  /**
+   * 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[]}
+   */
+  function getStandardEditorContents() {
+    mumuki.submission._syncContent();
+    return $('.new_solution').serializeArray();
   }
 
-  mumuki.load(function () {
-    var submissionsResults = $('.submission-results');
-    if (!submissionsResults) return;
+  /**
+   * Answers a content 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
+   */
+  function getContent() {
+    let content = {};
+    let contents;
+
+    if (mumuki.CustomEditor.hasSources) {
+      contents = mumuki.CustomEditor.getContents();
+    } else {
+      contents = mumuki.submission.getStandardEditorContents();
+    }
 
-    var resultsBox = new ResultsBox(submissionsResults);
+    contents.forEach((it) => {
+      content[it.name] = it.value;
+    });
+
+    return content;
+  }
 
-    var btnSubmit = $('.btn-submit');
-    var submissionControl = $('.submission_control');
+  /**
+   * 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
+   */
+  function _syncContent() {
+    if (mumuki.submission._contentSyncer) {
+      mumuki.submission._contentSyncer();
+    }
+  }
 
-    var submitButton = new SubmitButton(btnSubmit, submissionControl);
+  /**
+   * 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
+   */
+  function registerContentSyncer(syncer = null) {
+    mumuki.submission._contentSyncer = syncer;
+  }
 
-    var bridge = new mumuki.bridge.Laboratory;
+  // ==========
+  // Processing
+  // ==========
 
-    btnSubmit.on('click', function (e) {
-      e.preventDefault();
+  /**
+   * Process solution, which consist of making buttons wait, sending to server, rendering results,
+   * restoring buttons state.
+   *
+   * The actual implementation of this method depends on contextual {@link _solutionProcessor}, which can
+   * be configured using {@link _registerSolutionProcessor}. Currently there are only two available processors -
+   * {@link _kidsSolutionProcessor} and {@link _classicSolutionProcessor} - which are automatically choosen depending
+   * on the exercise DOM.
+   *
+   * @param {Submission} solution
+  */
+  function processSolution(solution) {
+    mumuki.submission._solutionProcessor(solution);
+  }
+
+  /**
+   * Configures a callback for processing a solution.
+   *
+   * This method is called internally by {@link _selectSolutionProcessor}
+   * and should normally not be called by runners editor, but is exposed
+   * for further non-standard customizations.
+   *
+   * @param {({solution: object}) => void} processor
+   */
+  function _registerSolutionProcessor(processor) {
+    mumuki.submission._solutionProcessor = processor;
+  }
+
+  /** Processor for kids layouts */
+  function _kidsSolutionProcessor(bridge, submitButton) {
+    return (solution) => {
+      submitButton.wait();
+      bridge._submitSolution(solution).always(function (data) {
+        submitButton.ready(() => {
+          mumuki.kids.restart();
+          submitButton.continue();
+        });
+        mumuki.kids.showResult(data);
+      });
+    }
+  }
+
+  /** Processor for non-kids layouts */
+  function _classicSolutionProcessor(bridge, submitButton, resultsBox) {
+    return (solution) => {
       submitButton.disable();
       submitButton.setWaitingText();
       resultsBox.waiting();
-
-      mumuki.editor.syncContent();
-      var solution = getContent();
-
       bridge._submitSolution(solution).done(function (data) {
         resultsBox.success(data, submitButton);
       }).fail(function () {
@@ -77,36 +192,70 @@ var mumuki = mumuki || {};
         $(document).renderMuComponents();
         resultsBox.done(data, submitButton);
       });
-    });
-
-    submitButton.checkAttemptsLeft();
-  });
+    }
+  }
 
-  function getEditorsContent() {
-    return $('.new_solution').serializeArray().concat(mumuki.CustomEditor.getContent())
+  /** Selects the most appropriate solution processor */
+  function _selectSolutionProcessor(submitButton, $submissionsResults) {
+    const bridge = new mumuki.bridge.Laboratory();
+    let processor;
+    if ($('.mu-kids-exercise').length) {
+      processor = _kidsSolutionProcessor(bridge, submitButton);
+    } else {
+      processor = _classicSolutionProcessor(bridge, submitButton, new ResultsBox($submissionsResults));
+    }
+    mumuki.submission._registerSolutionProcessor(processor);
   }
 
-  function getContent(){
-    var content = {};
 
-    getEditorsContent().forEach(function(it) {
-      content[it.name] = it.value;
+  // ===========
+  // Entry Point
+  // ===========
+
+  mumuki.load(function () {
+    var $submissionsResults = $('.submission-results');
+    if (!$submissionsResults) return;
+
+    const $btnSubmit = $('.btn-submit');
+    const submitButton = new SubmitButton($btnSubmit, $('.submission_control'));
+
+    mumuki.submission._selectSolutionProcessor(submitButton, $submissionsResults);
+
+    submitButton.start(() => {
+      var solution = mumuki.submission.getContent();
+      mumuki.submission.processSolution(solution);
     });
 
-    return content;
-  }
+    submitButton.checkAttemptsLeft();
+  });
 
-  function animateTimeoutError(submitButton) {
-    let scene = new muvment.Scene($('.submission-result-error-animation'));
-    scene.addState(mumuki.errorState('timeout_1').onStart(submitButton.setOriginalContent.bind(submitButton)).onEndSwitch(scene, 'timeout_2'))
-      .addState(mumuki.errorState('timeout_2').onEndSwitch(scene, 'timeout_3'))
-      .addState(mumuki.errorState('timeout_3').onStart(submitButton.enable.bind(submitButton)))
-      .play();
-  }
 
+  /**
+   * This module contains methods for submitting solution  in at high level, dealing with network communication,
+   * and layout-sensitive UI updates. It is intended to be both used internally by standard editors and by runners
+   * custom editors.
+   *
+   * Runners can choose to bypass this module under kids layouts, and handling all that low-level details. In order
+   * to do that {@code .mu-kids-submit-button} selector must be overiden. Customizing submission in classic layout
+   * or in a layout-agnostic way can be accomplish by overriding {@code .mu-submit-button}.
+   *
+   * @see mumuki.kids.showResult
+   * @see mumuki.bridge.Laboratory.runTests
+   *
+   * @module mumuki.submission
+   */
   mumuki.submission = {
-    animateTimeoutError: animateTimeoutError,
-    SubmitButton: SubmitButton
+    processSolution,
+    _registerSolutionProcessor,
+    _selectSolutionProcessor,
+
+    _syncContent,
+    registerContentSyncer,
+    getStandardEditorContents,
+    getContent,
+
+    animateTimeoutError,
+    SubmitButton,
   };
 
 })(mumuki);