mumuki-laboratory 7.8.0 → 7.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cf3186d3e4ad3367ccf34396dfde31138bb255456b8cf5e5593a76e908545434
-  data.tar.gz: 7e3aa354499be05940fe21355f7e4a45ae933dab0a989cd8db99b48e564c8f12
+  metadata.gz: 949f8977b6b6dbf69493e33b7cfc107ca0a17fb02126d0691ade60448ed6ba84
+  data.tar.gz: 3745b78726fd18397df226c439376f0ba8fa5dabf3a7800ef016c60558c7267d
 SHA512:
-  metadata.gz: e91791ad61d5843960950276383f74330b0eec046f475400c21fdb89af80f044fa3902a7a86e82d1dc3e130f30716c62e23d79f5ea87c8416c9140e550414819
-  data.tar.gz: 528f209da31776d4c01be41b92c2218bcbb6dc98175809a05062c3b077e1dc0ca8951b034e44a9a0f3cca93bbba371fd0f14da18bb56e15fac9ddb3b2e211455
+  metadata.gz: 5b0769fbe726708b181d7e710e34925e931adc7da7783a3a31d0764c1ba041ccbb0917e2ec7194f7a07f8ab50f38c9880ca786a2c9258a44a8e10b794435723b
+  data.tar.gz: f253812012281ebd1ccfd877f1aaa3ce46b5098ea1d49a313267d4b1747c1cbcc3d47e9c3c28832e27ede19041e44eb660b079dffdf8a523b3b05c4e7cbf1dbc

data/README.md

@@ -150,6 +150,44 @@ MOZ_HEADLESS=1 bundle exec rake teaspoon
 yarn run lint
 ```
 
+## Using a local runner
+
+Sometimes you will need to check `laboratory` against a local runner. Run the following code in you `rails console`:
+
+```ruby
+require 'mumuki/domain/seed'
+
+# import a new language
+Mumuki::Domain::Seed.languages_syncer.locate_and_import!  Language, 'http://localhost:9292'
+
+# update an existing language object
+Mumuki::Domain::Seed.languages_syncer.import!  Mumukit::Sync.key(Language, 'http://localhost:9292'), language
+```
+
+## Using a remote content
+
+Likewise, you will sometimes require a guide that is not locally available. Run the following code in `rails console`:
+
+```ruby
+require 'mumuki/domain/seed'
+
+# import a new guide
+Mumuki::Domain::Seed.contents_syncer.locate_and_import!  Guide, slug)
+
+# update an existing guide object
+Mumuki::Domain::Seed.contents_syncer.import!  Mumukit::Sync.key(Guide, slug), guide
+```
+
+After that you will probably to add it somewhere. The easiest way is to create a complement of `central`:
+
+```ruby
+o = Organization.central
+o.book.complements << Guide.locate!(slug).as_complement_of(o.book)
+o.reindex_usages!
+```
+
+Now you will be able to visit that guide at `http://localhost:3000/central/guides/#{slug}`
+
 ## JavaScript API Docs
 
 In order to be customized by runners, Laboratory exposes the following selectors and methods
@@ -268,6 +306,38 @@ which are granted to be safe and stable.
 2. Laboratory Kids Layout Initialization
 3. Runner Editor HTML
 
+## Generic event system
+
+Laboartory provides the `mumuki.events` object, which acts as minimal, generic event system, which is mostly designed for third party components built on top of laboratory and runners. It does nothing by default.
+
+This API has two parts: consumers API and producers API.
+
+```javascript
+// ======
+// producer
+// ======
+
+// you need to call this method in order to enable registration of event handlers
+// otherwise, it will  be ignored
+mumuki.events.enable('myEvent');
+
+// fire the event, with an optional event object as payload
+mumuki.events.fire('myEvent', aPlainOldObject);
+
+// clear all the registered event handlers
+mumuki.events.clear('myEvent');
+
+// ========
+// consumer
+// ========
+
+// register an event handler
+mumuki.events.on('myEvent', (anEventObject) => {
+  // do stuff
+});
+```
+
+
 ## Custom editors
 
 Mumuki provides several editor types: code editors, multiple choice, file upload, and so on.

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

@@ -0,0 +1,51 @@
+/**
+ * A general-purpuose event system
+ */
+mumuki.events = {
+  _handlers: {},
+
+  /**
+   * Enables registration of event handlers for the given event name
+   *
+   * @param {string} eventName
+   */
+  enable(eventName) {
+    this._handlers[eventName] = this._handlers[eventName] || [];
+  },
+
+  /**
+   * Registers a listener that will be called whenever the given event is produced.
+   * If the event is not enabled, the given handler is simply ignored.
+   *
+   * @param {string} eventName the event to listen to
+   * @param {(event: any) => void} handler
+   */
+  on(eventName, handler) {
+    if (this._handlers[eventName]) {
+      this._handlers[eventName].push(handler);
+    }
+  },
+
+  /**
+   * Fires a given event
+   *
+   * @param {string} eventName
+   * @param {any} [value]
+   */
+  fire(eventName, value = null) {
+    if (this._handlers[eventName]) {
+      this._handlers[eventName].forEach(it => it(value))
+    }
+  },
+
+  /**
+   * Clears handlers of the given event
+   *
+   * @param {string} eventName
+   */
+  clear(eventName) {
+    if (this._handlers[eventName]) {
+      this._handlers[eventName] = [];
+    }
+  }
+}

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

@@ -1,17 +1,50 @@
+/**
+ * @typedef {"input_right" | "input_bottom" | "input_primary" | "input_kindergarten"} Layout
+ * @typedef {{id: number, layout: Layout, settings: any}} Exercise
+ */
+
 mumuki.exercise = {
+
+  /**
+   * The current exercise's id
+   *
+   * @type {Exercise?}
+   * */
+  _current: null,
+
   /**
    * The current exercise's id
    *
-   * @type {number}
+   * @type {number?}
    * */
-  id: null,
+  get id() {
+    return this._current ? this._current.id : null;
+  },
 
   /**
    * The current exercise's layout
    *
-   * @type {"input_right" | "input_bottom" | "input_primary" | "input_kindergarten"}
+   * @type {Layout?}
    * */
-  layout: null,
+  get layout() {
+    return this._current ? this._current.layout : null;
+  },
+
+  /**
+   * The current exercise's settings
+   *
+   * @type {any?}
+   * */
+  get settings() {
+    return this._current ? this._current.settings : null;
+  },
+
+  /**
+   * @type {Exercise?}
+   */
+  get current() {
+    return this._current;
+  },
 
   /**
    * Set global current exercise information
@@ -19,12 +52,15 @@ mumuki.exercise = {
   load() {
     const $muExerciseId = $('#mu-exercise-id');
     if ($muExerciseId.length) {
-      this.id = Number($muExerciseId.val());
-      // @ts-ignore
-      this.layout = $('#mu-exercise-layout').val();
+      this._current = {
+        id: Number($muExerciseId.val()),
+        // @ts-ignore
+        layout: $('#mu-exercise-layout').val(),
+        // @ts-ignore
+        settings: JSON.parse($('#mu-exercise-settings').val())
+      };
     } else {
-      this.id = null;
-      this.layout = null;
+      this._current = null;
     }
   }
 }

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

@@ -0,0 +1,71 @@
+mumuki.load(function() {
+  let $userForm = $("#mu-user-form");
+  let $userAvatar = $('#mu-user-avatar');
+  let $editButton = $('#mu-edit-profile-btn');
+  let $avatarPicker = $('#mu-avatar-picker');
+  let $avatarItem = $('.mu-avatar-item');
+
+  let userImage = "";
+  let avatarId = "";
+
+  let originalData = $userForm.serialize();
+  let originalProfilePicture = $userAvatar.attr('src');
+
+  $userForm.on('change keyup', function() {
+    toggleEditButtonIfThereAreChanges();
+  });
+
+  $avatarItem.on('click', function() {
+    $userAvatar.attr('src', $(this).attr('src'));
+    $avatarPicker.modal('hide');
+
+    const clickedAvatarId = $(this).attr('mu-avatar-id');
+    avatarId = clickedAvatarId || "";
+
+    toggleEditButtonIfThereAreChanges();
+  });
+
+  function toggleEditButtonIfThereAreChanges() {
+    let shouldEnable = requiredFieldsAreFilled() && (dataChanged() || avatarChanged());
+
+    $editButton.prop('disabled', !shouldEnable);
+  }
+
+  const requiredFieldsAreFilled = () =>
+    $userForm.find('select, textarea, input').toArray().every(elem => {
+      const $elem = $(elem);
+      return !($elem.prop('required')) || !!$elem.val();
+    });
+
+  const dataChanged = () => $userForm.serialize() !== originalData;
+
+  const avatarChanged = () => $userAvatar.attr('src') !== originalProfilePicture;
+
+  $('#mu-user-image').on('click', function(){
+    userImage = $userAvatar.attr('src');
+  });
+
+  $userForm.on('submit', function(){
+    if (userImage) {
+      setImageUrl($(this), userImage);
+      setAvatarId($(this), "");
+    }
+
+    if (avatarId) {
+      setAvatarId($(this), avatarId);
+    }
+  });
+
+  function setImageUrl(form, url) {
+    form.append(`<input type="hidden" name="user[image_url]" value="${url}"/>`);
+  }
+
+  function setAvatarId(form, id) {
+    form.append(`<input type="hidden" name="user[avatar_id]" value=${id}/>`);
+  }
+
+  $("#mu-edit-avatar-icon").on('click', function(){
+    $avatarPicker.modal();
+  });
+
+});

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

@@ -1,4 +1,4 @@
-$icon-font-path: asset-path('assets/bootstrap');
+$icon-font-path: asset-path('assets/bootstrap/');
 $fa-font-path: asset-path('assets');
 $da-font-path: asset-path('assets');
 

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

@@ -1,26 +1,28 @@
-@import "modules/chapter_show";
-@import "modules/exercise_assignment";
-@import "modules/exercise_results";
-@import "modules/modal";
-@import "modules/upload";
-@import "modules/console";
-@import "modules/progress_listing";
+@import "modules/avatar";
 @import "modules/book_header";
-@import "modules/progress_bar";
-@import "modules/timer";
-@import "modules/overlap";
-@import "modules/editor";
-@import "modules/organization_chooser";
-@import "modules/guide-corollary";
+@import "modules/breadcrumb";
+@import "modules/chapter_show";
 @import "modules/checkboxes";
+@import "modules/console";
+@import "modules/datepicker";
+@import "modules/discussion";
 @import "modules/dropdown";
+@import "modules/editor";
+@import "modules/exercise_assignment";
+@import "modules/exercise_results";
 @import "modules/flash";
-@import "modules/highlight";
-@import "modules/breadcrumb";
 @import "modules/gs-board";
+@import "modules/guide_corollary";
+@import "modules/highlight";
 @import "modules/kids";
 @import "modules/kindergarten";
 @import "modules/kids_results";
-@import "modules/discussion";
+@import "modules/modal";
+@import "modules/organization_chooser";
+@import "modules/overlap";
 @import "modules/popover";
-@import "modules/datepicker";
+@import "modules/progress_bar";
+@import "modules/progress_listing";
+@import "modules/timer";
+@import "modules/upload";
+@import "modules/user_profile";

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

@@ -0,0 +1,41 @@
+.mu-user-avatar {
+  width: 250px;
+  height: 250px;
+
+  border: 2px solid $mu-color-dark-separator;
+  border-radius: 50%;
+
+  padding: 2px;
+}
+
+.mu-edit-avatar {
+  position: relative;
+  top: 100px;
+  right: 15px;
+}
+
+.mu-avatar-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+
+  padding: 15px;
+}
+
+.mu-avatar-item {
+  width: 150px;
+  height: 150px;
+
+  border: 2px solid $mu-color-dark-separator;
+
+  padding: 2px;
+  margin: 10px;
+
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: -3px 3px 10px -3px $mu-color-primary;
+    transform: scale(1.025);
+  }
+}

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

@@ -96,7 +96,7 @@ $kids-speech-tabs-width: 40px;
   }
 
   .mu-kids-character-animation {
-    width: 120px;
+    width: $kids-characters-height;
   }
 
   .mu-kids-character {

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

@@ -8,7 +8,7 @@
   .mu-kids-exercise-workspace {
     display: flex;
     flex-flow: row;
-    height: 100%;
+    height: calc(100% - #{$kids-characters-height});
     width: 100%;
   }
 
@@ -41,6 +41,7 @@
 
   .mu-kids-state.mu-state-initial {
     height: 100%;
+    width: 100%;
   }
 
   .mu-kids-state.mu-state-final {

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

@@ -0,0 +1,36 @@
+.mu-user-header {
+  padding: 10px 0px;
+
+  display: flex;
+  align-items: center;
+}
+
+.mu-profile-actions {
+  vertical-align: middle;
+  margin-left: auto;
+
+  .btn {
+    width: 150px;
+    height: 55px;
+    margin-left: 15px;
+    transition: background-color 0.3s, border-color 0.3s;
+
+    &[disabled], &[disabled]:hover {
+      background-color: lighten($mu-color-complementary, 15%);
+      border-color: lighten($mu-color-complementary, 15%);
+    }
+  }
+}
+
+.mu-profile-info {
+  font-size: 20px;
+  margin-top: 5px;
+  div {
+    margin-bottom: 15px;
+    .italic {
+      font-style: italic;
+    }
+  }
+
+
+}