mumuki-laboratory 9.0.0 → 9.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 96b344d472912c433732e101f0754c229aa8c406e47a2ff54503a9625bb78f5a
-  data.tar.gz: b73fba56c2c87069b1e402ce010eaa17d296220c92df9cc241d92e9aa92eb909
+  metadata.gz: d72de447465b6716ee6b249aae76c6158aaa6ca02c87d58ea4e19fcf783ad85e
+  data.tar.gz: 387fef678b907e118266847df85eada3fb2aaea616162bb00e136776f2010629
 SHA512:
-  metadata.gz: b2557a3374e33d3a273b4df24cdd5eb3e46d0e997af5a862c6b6a6cd792a63c4a78e6c248927efeaf964d275139923cea0292a204b92448a965614c2b1f0f82f
-  data.tar.gz: 2667001640a346bd3517445621adb899599b52a44d7c40625a6ae67e7a46e7c5c2d935501358b5a28e5ebeb6aa7a0da58cc4af0cf74fb2a7706d738577d47837
+  metadata.gz: ae0f9022a999d502065a58c4fca2224c4ea3f21562c56d55489889793d70c7d561554bbd2eeb0f940295a7fc071adac35cf439219b228aa150799c62ed9f6a25
+  data.tar.gz: 5e40cd1dc2accffef46a0a6981d0ad588f031070c611d67d8c0811cdd6919a6d4733b8363b1bf6d02018c41f9d72945c4b6b497bc465ebe6621c00e17087d6c5

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

@@ -0,0 +1,17 @@
+mumuki.load(() => {
+  scaleCertificate();
+  mumuki.resize(scaleCertificate);
+
+  function scaleCertificate() {
+    const $certPreview = $('.certificate-preview');
+    const $muCertificate = $('.mu-certificate-box');
+    $muCertificate.css('transform', 'scale(1)');
+
+    const scaleWidth = $muCertificate.width() / $certPreview.width();
+    $muCertificate.css({
+      'transform': `scale(${1 / scaleWidth})`,
+      'transform-origin': `0 0`,
+    });
+    $certPreview.height($muCertificate.height());
+  }
+});

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

@@ -1,9 +1,13 @@
 mumuki.load(() => {
   var $subscriptionSpans = $('.discussion-subscription > span');
   var $upvoteSpans = $('.discussion-upvote > span');
+  let $messagePreviewButton = $('.discussion-new-message-preview-button.preview');
+  let $messageEditButton = $('.discussion-new-message-preview-button.edit');
+  let $newMessageContent = $('.discussion-new-message-content');
+  let $newMessagePreview = $('#discussion-new-message-preview');
 
   function createNewMessageEditor() {
-    var $textarea = $("#new-discussion-message");
+    var $textarea = $("#discussion-new-message");
     var textarea = $textarea[0];
     if (!textarea) return;
 
@@ -26,7 +30,7 @@ mumuki.load(() => {
   }
 
   createReadOnlyEditors();
-  createNewMessageEditor();
+  let editor = createNewMessageEditor();
 
   var Forum = {
     toggleButton: function (spans) {
@@ -67,9 +71,46 @@ mumuki.load(() => {
       const params = new URLSearchParams(location.search);
       elem.is(':checked') ? params.set(key, elem.val()) : params.delete(key);
       location.search = params.toString();
+    },
+    discussionMessagePreview: function (url) {
+      return Forum.tokenRequest({
+        url: url,
+        method: 'GET',
+        processData: false,
+        dataType: 'json',
+        data: new URLSearchParams({ content: editor.getValue() } ),
+        success: function (response) {
+          showPreview(response.preview);
+        },
+        error: function (e) {
+          error = $messagePreviewButton.attr('error-text');
+          showPreview(error);
+        },
+        xhrFields: {withCredentials: true}
+      });
+    },
+    hidePreviewAndShowEditor: function(elem) {
+      togglePreviewAndEditButtons();
+      togglePreviewAndContentMessage();
     }
   };
 
+  function showPreview(preview) {
+    $newMessagePreview.html($.parseHTML(preview));
+    togglePreviewAndEditButtons();
+    togglePreviewAndContentMessage();
+  }
+
+  function togglePreviewAndEditButtons() {
+    $messagePreviewButton.toggleClass('hidden');
+    $messageEditButton.toggleClass('hidden');
+  }
+
+  function togglePreviewAndContentMessage() {
+    $newMessagePreview.toggleClass('hidden');
+    $newMessageContent.toggleClass('hidden');
+  }
+
   mumuki.Forum = Forum;
 
 });

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

@@ -0,0 +1,90 @@
+mumuki.faqs = class {
+
+  constructor() {
+    this.faqs = $('.mu-faqs');
+    this.topHierarchyElem = "H2";
+  }
+
+  // ================
+  // == Public API ==
+  // ================
+
+  /**
+   * Actually setup the faqs page
+   */
+  load() {
+    if(!this.faqs) return;
+    this._createFaqsGroups();
+    this._createNavbar();
+  }
+
+  // =================
+  // == Private API ==
+  // =================
+
+  _createNavbar() {
+    const $faqsNavbar = $(".mu-faqs-navbar nav ul");
+    $('.mu-faqs-group').each((_index, faqGroup) => {
+      const $navItem = this._createNavbarItem($faqsNavbar, faqGroup)
+      const $faqGroup = $(faqGroup);
+      this._configureClickFor($navItem, $faqGroup, $faqsNavbar)
+    });
+  }
+
+  _createNavbarItem($faqsNavbar, faqGroup) {
+    const $navItem = $(`<li><a href="#${faqGroup.id}">`)
+      .html(`${faqGroup.querySelector('h2').textContent}`);
+    $faqsNavbar.append($navItem);
+    return $navItem;
+  }
+
+  _configureClickFor($navItem, $faqGroup, $faqsNavbar) {
+    $navItem.click(function(e){
+      e.preventDefault();
+      $faqsNavbar.find('li').removeClass('active');
+      $navItem.addClass('active');
+      $('html, body').animate({scrollTop: $faqGroup.offset().top}, 1000);
+    });
+  }
+
+  _createFaqsGroups() {
+    const elemsGroups = this._buildFaqsGroups();
+    elemsGroups.forEach((group, index) => {
+      $(group).wrapAll(`<div class='mu-faqs-group' id='mu-faqs-group-${index}'>`);
+    });
+    this._createFaqsIcons();
+  }
+
+  _createFaqsIcons() {
+    const $faqIcon = $('<i class="mu-faqs-group-icon fa fa-plus">');
+    $faqIcon.click(function(e){
+      const $elem = $(this);
+      $elem.toggleClass('fa-plus fa-minus');
+      $elem.closest('.mu-faqs-group').toggleClass('active');
+    })
+    $('.mu-faqs-group').prepend($faqIcon);
+  }
+
+  _buildFaqsGroups() {
+    let newGroup = [];
+    let elemsGroups = [];
+    let previousNodeName;
+    $(".mu-faqs-content").children().each((index, elem) => {
+      if(elem.nodeName === this.topHierarchyElem && newGroup.length) {
+        elemsGroups.push(newGroup);
+        newGroup = [];
+      }
+      newGroup.push(elem);
+      previousNodeName = elem.nodeName
+    });
+
+    elemsGroups.push(newGroup);
+
+    return elemsGroups;
+  }
+
+};
+
+mumuki.load(() => {
+  new mumuki.faqs().load();
+});

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

@@ -0,0 +1,32 @@
+ mumuki.organization = {
+
+  /**
+   * The current organization's id
+   *
+   * @type {number?}
+   * */
+  _id: null,
+
+  /**
+   * The current organization's id
+   *
+   * @type {number?}
+   * */
+  get id() {
+    return this._id;
+  },
+
+  /**
+   * Set global current organization information
+   */
+  load() {
+    const $muOrganizationId = $('#mu-organization-id');
+    if ($muOrganizationId.length) {
+      this._id = $muOrganizationId.val();
+    } else {
+      this._id = null;
+    }
+  }
+};
+
+mumuki.load(() => mumuki.organization.load());

data/app/assets/javascripts/mumuki_laboratory/application/submissions-store.js

@@ -94,7 +94,7 @@ mumuki.SubmissionsStore = (() => {
     }
 
     _keyFor(exerciseId) {
-      return `/exercise/${exerciseId}/submission`;
+      return `/organization/${mumuki.organization.id}/user/${mumuki.user.id}/exercise/${exerciseId}/submission`;
     }
   }();
 

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

@@ -1,9 +1,53 @@
+ mumuki.user = {
+
+  /**
+   * The current user's id
+   *
+   * @type {number?}
+   * */
+  _id: null,
+
+  /**
+   * The current user's id
+   *
+   * @type {number?}
+   * */
+  get id() {
+    return this._id;
+  },
+
+  /**
+   * Set global current user information
+   */
+  load() {
+    const $muUserId = $('#mu-user-id');
+    if ($muUserId.length) {
+      this._id = $muUserId.val();
+    } else {
+      this._id = null;
+    }
+  }
+};
+
 mumuki.load(() => {
-  var hash = document.location.hash;
-  if (hash) {
-    $(".nav-tabs a[data-target='" + hash + "']").tab('show');
+  const $userMenuHeader = $('.mu-user-menu-header');
+  let onUserProfile = document.querySelector('.mu-profile-info') !== null;
+
+  $userMenuHeader.click(() => {
+    $('.mu-user-menu-items').toggleClass('mu-hidden-sm-screen');
+    $('#mu-user-menu-header-icon').toggleClass('fa-chevron-up fa-chevron-down');
+  });
+
+  if (onUserProfile) {
+    $userMenuHeader.click();
   }
-  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
-    window.location.hash = $(e.target).attr('data-target');
+
+  $('.mu-user-menu-item .active').click((e) => {
+    if (onUserProfile) {
+      e.preventDefault();
+      $userMenuHeader.click();
+    }
   });
+
+  mumuki.user.load()
 });

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

@@ -1,6 +1,8 @@
+@import "modules/activity";
 @import "modules/avatar";
 @import "modules/book_header";
 @import "modules/breadcrumb";
+@import "modules/certificate";
 @import "modules/checkboxes";
 @import "modules/console";
 @import "modules/content_show";
@@ -10,6 +12,7 @@
 @import "modules/editor";
 @import "modules/exercise_assignment";
 @import "modules/exercise_results";
+@import "modules/faqs";
 @import "modules/flash";
 @import "modules/gs-board";
 @import "modules/guide_corollary";

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_activity.scss

@@ -0,0 +1,12 @@
+.mu-user-activity-indicator {
+  text-align: center;
+  border-radius: 10px;
+
+  &.jumbotron {
+    padding: 0.5em 0;
+  }
+}
+
+.mu-user-activity-selector {
+  padding-top: 15px;
+}

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_certificate.scss

@@ -0,0 +1,33 @@
+.mu-certificate {
+  border: 1px solid $mu-color-dark-separator;
+}
+
+.mu-certificate-name {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+.mu-certificate-data {
+  margin-top: 30px;
+}
+
+.mu-certificate-buttons {
+  margin-bottom: 30px;
+}
+
+.mu-certificate-download-btn {
+  height: 35px;
+  padding: 0;
+  width: 157px;
+  border: none;
+}
+.mu-certificate-download-btn-icon {
+  border-right: 1px solid darken($mu-color-complementary, 10%);
+  padding: 8px 6px 9px 6px;
+  width: 35px;
+}
+.mu-certificate-download-btn-text {
+  display: inline-block;
+  width: 115px;
+  text-align: center;
+}

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_discussion.scss

@@ -287,9 +287,21 @@ summary.discussion-summary {
   }
 }
 
+.discussion-new-message-buttons {
+  display: flex;
+  margin: 0 -10px;
+
+  .btn {
+    margin: 15px 10px;
+  }
+}
+
+.discussion-new-message-preview-button {
+  flex-grow: 0.2;
+}
+
 .discussion-new-message-button {
-  border-radius: 0;
-  margin-top: 15px;
+  flex-grow: 1;
 }
 
 .discussion-message {

data/app/assets/stylesheets/mumuki_laboratory/application/modules/_faqs.scss

@@ -0,0 +1,84 @@
+.mu-faqs-container {
+  position: relative;
+  display: table;
+  width: 100%;
+
+  .mu-faqs-content {
+    padding-top: 50px;
+
+    width: 100%;
+
+    @media (min-width: 768px) {
+      width: 75%;
+      float: right;
+    }
+
+    .mu-faqs-group {
+      padding: 32px;
+      box-shadow: 0 0.375em 2.8125em 0 #d2d5d9;
+      margin-bottom: 32px;
+
+      @media (max-width: 767px) {
+        &:not(.active) {
+          h3, p {
+            display: none
+          }
+          h2 {
+            margin-bottom: 0px;
+          }
+        }
+      }
+
+      h2 {
+        margin-top: 0;
+        margin-bottom: 20px;
+      }
+
+      h3 {
+        color: #1A94A3; // should be $brand-secondary
+        margin-top: 40px;
+      }
+
+      .mu-faqs-group-icon {
+        float: right;
+        margin-top: 10px;
+        cursor: pointer;
+        display: none;
+        @media (max-width: 767px) {
+          display: unset;
+        }
+      }
+    }
+  }
+
+  .mu-faqs-navbar {
+    top: 0;
+    position: sticky;
+    width: 25%;
+    padding-top: 50px;
+
+    ul {
+      border-left: 1px solid $mu-color-disabled;
+      list-style: none;
+      padding-left: 0px;
+      li {
+        padding: 8px 10px 8px 15px;
+        cursor: pointer;
+        &.active {
+          border-left: 3px solid transparent;
+          border-color: darken($brand-primary, 5%);
+          margin-left: -3px;
+        }
+        a {
+          color: $brand-primary;
+          &:hover {
+            text-decoration: none;
+          }
+          @media (min-width: $container-lg) {
+            font-size: 1.1em;
+          }
+        }
+      }
+    }
+  }
+}