mumuki-laboratory 6.4.2 → 6.5.0

data/app/assets/javascripts/application/load-error-svg.js

@@ -2,27 +2,10 @@ mumuki.load(function () {
   var error_svgs = ['403', '404', '500', 'timeout_1', 'timeout_2', 'timeout_3'];
 
   mumuki.errors = mumuki.errors || {};
-  mumuki.characters = mumuki.characters || {};
 
-  error_svgs.forEach(function (svgErrorSuffix) {
-    addImage(mumuki.errors, 'error_' + svgErrorSuffix, '/');
+  error_svgs.forEach(function (svgErrorName) {
+    muvment.animation.addImage(mumuki.errors, svgErrorName, '/error/');
   });
 
-  addImage(mumuki.characters, 'kibi_context', '/character/kids/');
-  addImage(mumuki.characters, 'magnifying_glass_apparition', '/');
-  addImage(mumuki.characters, 'magnifying_glass_loop', '/');
-
-  function addImage(object, imageName, urlPrefix) {
-    var url = urlPrefix + imageName + '.svg';
-    if (!object[imageName]) {
-      $.get(url, function (data) {
-        var duration = parseFloat($(data).find('animate').attr('dur') || 0, 10) * 1000;
-        object[imageName] = {
-          url: url,
-          duration: duration
-        };
-      });
-    }
-  }
-
+  mumuki.errorState = (error_name) => mumuki.errors[error_name].asState(error_name);
 });

data/app/assets/javascripts/application/multiple-scenarios.js

@@ -0,0 +1,152 @@
+var mumuki = mumuki || {};
+
+(function (mumuki) {
+
+  const setControlVisibility = function ($control, visible) {
+    visible ? $control.show() : $control.hide();
+  };
+
+  const addClickListener = function($element, listener) {
+    $element.on('click', listener);
+  };
+
+  const getControlElement = function(controlSelector) {
+    return $(`.mu-scenario-control.${controlSelector} i`);
+  };
+
+  const statusIconMap = new Map([
+    ['pending', 'fa-circle'],
+    ['passed', 'fa-check-circle'],
+    ['failed', 'fa-times-circle']
+  ]);
+
+  const highlightAnimationClass = 'jump';
+
+  const statusesClasses = Array.from(statusIconMap.keys());
+  const iconsClasses = Array.from(statusIconMap.values());
+  const indicatorsClasses = iconsClasses.concat(statusesClasses);
+
+  const getClassesFor = (status) => [status, statusIconMap.get(status)];
+
+  const wrapScenario = ($scenario) => $scenario.wrap("<div class='mu-scenario'></div>").parent();
+
+  const setIndicatorStatus = function (indicator, status) {
+    const indicatorClassList = indicator.classList;
+    const statusClasses = getClassesFor(status);
+    indicatorClassList.remove(...indicatorsClasses);
+    indicatorClassList.add(...statusClasses);
+  };
+
+  const unhighlightIndicator = function ($indicator) {
+    $indicator.classList.remove(highlightAnimationClass);
+  };
+
+  const highlightIndicator = function ($indicator) {
+    $indicator.classList.add(highlightAnimationClass);
+  };
+
+  const triggerResize = function () {
+    let event = document.createEvent('HTMLEvents');
+    event.initEvent('resize', true, false);
+    document.dispatchEvent(event);
+  };
+
+  class MultipleScenarios {
+    constructor(selectors) {
+      this.indicators = $('.mu-multiple-scenarios .indicators');
+      this.initialize(selectors);
+    }
+
+    initialize (selectors) {
+      this.createScenarios(selectors);
+      this.createControls();
+      this.createIndicators();
+      this.setActiveIndex(0);
+      $('.mu-scenario-control').removeClass('hidden');
+    }
+
+    validScenarioIndex (index) {
+      return index >= 0 && index < this.scenariosCount;
+    }
+
+    createControlListener ($control, changeStep) {
+      addClickListener($control, () => {
+        const newScenarioIndex = this.currentScenarioIndex + changeStep;
+        if (this.validScenarioIndex(newScenarioIndex)) {
+          this.setActiveIndex(newScenarioIndex);
+        }
+      })
+    }
+
+    createControls () {
+      this.previousControl = getControlElement('previous');
+      this.nextControl = getControlElement('next');
+      this.createControlListener(this.previousControl, -1);
+      this.createControlListener(this.nextControl, 1);
+    }
+
+    createScenarios (selectors) {
+      let $scenarios = selectors.map(selector => $(`.mu-multiple-scenarios ${selector}`));
+      this.scenarios = $scenarios.map($scenario => wrapScenario($scenario));
+      this.scenariosCount = this.scenarios[0].length;
+    }
+
+    createIndicators () {
+      for (let index = 0; index < this.scenariosCount; index++) {
+        let $indicator = $('<li class="fa"></li>');
+        this.indicators.append($indicator);
+        let indicatorIndex = index;
+        addClickListener($indicator, () => {
+          this.setActiveIndex(indicatorIndex);
+        });
+      }
+      this.indicatorItems = this.indicators.children('li');
+      this.resetIndicators();
+    }
+
+    setActiveIndex (index) {
+      this.currentScenarioIndex = index;
+      this.setActiveScenario(index);
+      unhighlightIndicator(this.indicatorItems[index]);
+      this.updateControls(index);
+      triggerResize();
+    }
+
+    updateControls (index) {
+      setControlVisibility(this.previousControl, index !== 0);
+      setControlVisibility(this.nextControl, index !== this.scenariosCount - 1);
+    }
+
+    setActiveScenario (index) {
+      [...this.scenarios, this.indicatorItems].forEach(($scenario) => {
+        $scenario.removeClass('active');
+        $scenario[index].classList.add('active');
+      });
+    }
+
+    updateIndicators (testResultsStatuses) {
+      testResultsStatuses.forEach((status, index) => {
+        const $indicator = this.indicatorItems[index];
+        setIndicatorStatus($indicator, status);
+      });
+      this.highlightFailedScenario(testResultsStatuses);
+    }
+
+    highlightFailedScenario (testResultsStatuses) {
+      const currentStatus = testResultsStatuses[this.currentScenarioIndex];
+      const isCurrentFailed = currentStatus === 'failed';
+      const $failedIndicator = this.indicatorItems.filter('.failed')[0];
+      if($failedIndicator && !isCurrentFailed) highlightIndicator($failedIndicator);
+    }
+
+    resetIndicators () {
+      this.indicatorItems.each((_, $indicator) => {
+        setIndicatorStatus($indicator, 'pending');
+        unhighlightIndicator($indicator);
+      });
+    }
+  }
+
+  mumuki.MultipleScenarios = MultipleScenarios;
+
+}(mumuki));

data/app/assets/javascripts/application/popover.js

@@ -0,0 +1,18 @@
+mumuki.load(() => {
+  let $popover = $('.mu-popover');
+
+  $('html').click(function(e) {
+    if (!e.target.closest('.popover')) {
+      $popover.popover('hide');
+    }
+  });
+
+  $popover.popover({
+      html: true,
+      trigger: 'manual',
+      container: 'body'
+  }).click(function(e) {
+      $(this).popover('toggle');
+      e.stopPropagation();
+  });
+});

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

@@ -118,16 +118,11 @@ var mumuki = mumuki || {};
   }
 
   function animateTimeoutError(submitButton) {
-    var image = $('#submission-result-error-animation')[0];
-    image.src = mumuki.errors.error_timeout_1.url;
-    submitButton.setSendText();
-    setTimeout(function () {
-      image.src = mumuki.errors.error_timeout_2.url;
-      setTimeout(function () {
-        image.src = mumuki.errors.error_timeout_3.url;
-        submitButton.enable();
-      }, mumuki.errors.error_timeout_2.duration);
-    }, mumuki.errors.error_timeout_1.duration);
+    let scene = new muvment.Scene($('.submission-result-error-animation'));
+    scene.addState(mumuki.errorState('timeout_1').onStart(submitButton.setSendText.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();
   }
 
   mumuki.submission = {

data/app/assets/stylesheets/application/_layout.scss

@@ -99,7 +99,7 @@ h1 {
   }
 }
 
-.corollary-box {
+.mu-last-box {
   margin-bottom: 45px;
 }
 
@@ -140,7 +140,15 @@ hr {
   padding-left: 5px;
 }
 
-.mu-edit-link {
+.mu-content-toolbar-item {
   font-size: 60%;
   vertical-align: middle;
+  .fa {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+h3 {
+  margin-top: 20px;
 }

data/app/assets/stylesheets/application/_modules.scss

@@ -21,3 +21,4 @@
 @import "modules/kids";
 @import "modules/kids_results";
 @import "modules/discussion";
+@import "modules/popover";

data/app/assets/stylesheets/application/modules/_kids.scss

@@ -27,7 +27,8 @@ $kids-speech-tabs-width: 40px;
   }
 
   .mu-kids-states {
-    margin-bottom: 15px;
+    padding-bottom: 15px;
+    height: $kids-height;
   }
   .mu-kids-character {
     padding: 15px;
@@ -39,7 +40,7 @@ $kids-speech-tabs-width: 40px;
     margin-top: 15px;
   }
   .mu-kids-state {
-    height: calc(#{$kids-height} / 2);
+    height: 50%;
   }
   .mu-kids-character {
     height: $kids-characters-height;
@@ -115,6 +116,9 @@ $kids-speech-tabs-width: 40px;
         ul.results-list li {
           font-size: 13px
         }
+        .mu-kids-states strong {
+          font-size: 16px;
+        }
       }
 
       @media screen and (max-width: $screen-xs-max) {
@@ -128,6 +132,9 @@ $kids-speech-tabs-width: 40px;
         ul.results-list li {
           font-size: 12px
         }
+        .mu-kids-states strong {
+          font-size: 14px;
+        }
       }
 
       &.passed_with_warnings {
@@ -417,8 +424,8 @@ $kids-speech-tabs-width: 40px;
     min-height: 100vh;
     max-height: 100vh;
 
-    .mu-kids-state {
-      height: 50vh;
+    .mu-kids-states {
+      height: 100vh;
     }
     .mu-kids-blocks {
       height: calc(100vh - #{$kids-characters-height} - 30px);

data/app/assets/stylesheets/application/modules/popover.scss

@@ -0,0 +1,9 @@
+.popover-title {
+  padding: 15px;
+  background-color: #FFF;
+  font-weight: bold;
+}
+
+.popover {
+  max-width: 30%;
+}

data/app/controllers/application_controller.rb

@@ -39,7 +39,7 @@ class ApplicationController < ActionController::Base
 
   def should_choose_organization?
     current_user? &&
-      current_user.has_accessible_organizations? &&
+      current_user.has_student_granted_organizations? &&
       Mumukit::Platform.implicit_organization?(request)
   end
 
@@ -61,7 +61,7 @@ class ApplicationController < ActionController::Base
   end
 
   def validate_user_profile!
-    return if !current_user.has_accessible_organizations? || current_user.profile_completed?
+    return if !current_user.has_student_granted_organizations? || current_user.profile_completed?
     flash.notice = I18n.t :please_fill_profile_data
     redirect_to user_path
   end

data/app/helpers/application_helper.rb

@@ -1,6 +1,11 @@
 module ApplicationHelper
   include WithStudentPathNavigation
 
+  # html-escapes an string even if it is html-safe
+  def html_rescape(html)
+    html_escape html.to_str
+  end
+
   def profile_picture
     image_tag(current_user.image_url, height: 40, class: 'img-circle', onError: "this.onerror = null; this.src = '#{image_url('user_shape.png')}'")
   end
@@ -9,13 +14,17 @@ module ApplicationHelper
     "<div class=\"text-center\">#{super(object, {theme: 'twitter-bootstrap-3'}.merge(options))}</div>".html_safe
   end
 
-  def corollary_box(with_corollary)
+  def last_box_class(trailing_boxes)
+    trailing_boxes ? '' : 'mu-last-box'
+  end
+
+  def corollary_box(with_corollary, trailing_boxes = false)
     if with_corollary.corollary.present?
       %Q{
-      <div class="corollary-box">
-        <p>#{with_corollary.corollary_html}</p>
-      </div>
-}.html_safe
+        <div class="#{last_box_class trailing_boxes}">
+          <p>#{with_corollary.corollary_html}</p>
+        </div>
+      }.html_safe
     end
   end
 

data/app/helpers/assets_helper.rb

@@ -2,11 +2,23 @@ module AssetsHelper
   def assets_include_tags
     %Q{
       <meta name="turbolinks-cache-control" content="no-cache">
+      #{laboratory_assets_include_tags}
+      #{organization_assets_include_tags}
+    }.html_safe
+  end
+
+  def laboratory_assets_include_tags
+    %Q{
       #{stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'}
       #{javascript_include_tag 'application', 'data-turbolinks-track': 'reload'}
+    }
+  end
+
+  def organization_assets_include_tags
+    %Q{
       <link rel="icon" type="image/x-icon" href="#{Organization.current.favicon_url}" data-turbolinks-track="reload">
       <link rel="stylesheet" type="text/css" href="#{theme_stylesheet_url}" data-turbolinks-track="reload">
       <script type="text/javascript" src="#{extension_javascript_url}" defer data-turbolinks-track="reload"></script>
-    }.html_safe
+    }
   end
 end

data/app/helpers/links_helper.rb

@@ -22,6 +22,20 @@ module LinksHelper
     app.organic_url(Organization.current.name)
   end
 
+  def teacher_info_button(item)
+    if current_user&.teacher_here? && item.teacher_info.present?
+      %Q{
+        <a
+          class="mu-content-toolbar-item mu-popover"
+          data-toggle="popover"
+          data-html="true"
+          title="#{t :teacher_info}"
+          data-placement="bottom"
+          data-content="#{html_rescape item.teacher_info_html}">#{fixed_fa_icon('info-circle')}</a>
+      }.html_safe
+    end
+  end
+
   def link_to_bibliotheca_guide(guide)
     edit_link_to_bibliotheca { url_for_bibliotheca_guide(guide) }
   end
@@ -58,7 +72,7 @@ module LinksHelper
     return unless current_user&.writer?
 
     url = yield
-    link_to fixed_fa_icon(:pencil), url, class: "mu-edit-link", target: "_blank", alt: t(:edit)
+    link_to fixed_fa_icon(:pencil), url, class: "mu-content-toolbar-item", target: "_blank", title: t(:edit)
   end
 
   def url_for_bibliotheca_guide(guide)

data/app/helpers/organization_list_helper.rb

@@ -1,5 +1,5 @@
 module OrganizationListHelper
   def organizations_for(user)
-    (user.accessible_organizations + [Organization.central]).uniq.compact
+    (user.student_granted_organizations + [Organization.central]).uniq.compact
   end
 end

data/app/helpers/reset_button_helper.rb

@@ -4,7 +4,7 @@ module ResetButtonHelper
   end
 
   def restart_guide_link(guide)
-    link_to restart_icon, guide_progress_path(guide), data: {confirm: t(:confirm_restart)}, method: :delete
+    link_to restart_icon, guide_progress_path(guide), class: 'mu-content-toolbar-item', data: {confirm: t(:confirm_restart)}, method: :delete
   end
 
 end