Merge branch 'release/3.12.3'

Author: JackMorganNZ

.github/workflows/crowdin-actions.yaml

@@ -19,12 +19,12 @@ jobs:
       uses: actions/checkout@v3
 
     - name: Upload or update source files to Crowdin
-      uses: crowdin/github-action@1.4.15
+      uses: crowdin/github-action@1.4.16
       with:
         upload_sources: true
 
     - name: Download German translations
-      uses: crowdin/github-action@1.4.15
+      uses: crowdin/github-action@1.4.16
       with:
         upload_sources: false
         download_translations: true
@@ -42,7 +42,7 @@ jobs:
         config: crowdin.yaml
 
     - name: Download Spanish translations
-      uses: crowdin/github-action@1.4.15
+      uses: crowdin/github-action@1.4.16
       with:
         upload_sources: false
         download_translations: true

csfieldguide/config/__init__.py

@@ -1,3 +1,3 @@
 """Module for Django system configuration."""
 
-__version__ = "3.12.2"
+__version__ = "3.12.3"

csfieldguide/package-lock.json

@@ -6,7 +6,7 @@
     "dependencies": {},
     "devDependencies": {
         "ansi-colors": "4.1.3",
-        "autoprefixer": "10.4.12",
+        "autoprefixer": "10.4.13",
         "bootstrap": "4.6.2",
         "browser-sync": "2.27.10",
         "browserify": "17.0.0",

csfieldguide/package.json

@@ -1,4 +1,4 @@
-@import "node_modules/nouislider/distribute/nouislider.css";
+@import "static/interactives/cmy-mixer/node_modules/nouislider/distribute/nouislider";
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";

csfieldguide/static/img/csfg-icon-with-text-white.png

@@ -1,4 +1,4 @@
-@import "node_modules/nouislider/distribute/nouislider.css";
+@import "static/interactives/colour-matcher/node_modules/nouislider/distribute/nouislider";
 
 /* Distance between bottom of slider and pips */
 #interactive-colour-matcher .noUi-pips {

csfieldguide/static/img/csfg-icon-with-text.png

@@ -1,4 +1,4 @@
-@import "node_modules/nouislider/distribute/nouislider.css";
+@import "static/interactives/data-bias/node_modules/nouislider/distribute/nouislider";
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";

csfieldguide/static/img/guide-favicon-white.png

@@ -1,5 +1,5 @@
 const dragula = require('dragula');
-const mathjs = require('mathjs');
+const mathjs_import = require('mathjs');
 const sprintf = require('sprintf-js').sprintf;
 const vsprintf = require('sprintf-js').vsprintf;
 
@@ -18,7 +18,7 @@ const MATRIX_CHILD_INDEX = 3; // Index for which child of the draggable element/
  * Below is adapted from https://mathjs.org/examples/browser/angle_configuration.html.html
  * This is used to configure mathjs to accept degrees as input for trig functions.
  */
-
+const mathjs = mathjs_import.create(mathjs_import.all);
 let replacements = {};
 
 // the trigonometric functions that we are configuring to handle inputs of degrees instead of radians
@@ -90,7 +90,7 @@ var resultEqtn;
 
 // only show equations once they are rendered
 // URL for mathjax script loaded from CDN
-var mjaxURL  = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS-MML_HTMLorMML,Safe.js';
+var mjaxURL  = 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-AMS-MML_HTMLorMML,Safe.js';
 // load mathjax script
 $.getScript(mjaxURL, function() {
     // mathjax successfully loaded, let it render
@@ -595,11 +595,11 @@ function populateModalForEditing() {
     $('#matrix-row-0-col-0').val(matrix[0][0]);
     $('#matrix-row-0-col-1').val(matrix[0][1]);
     $('#matrix-row-0-col-2').val(matrix[0][2]);
-  
+
     $('#matrix-row-1-col-0').val(matrix[1][0]);
     $('#matrix-row-1-col-1').val(matrix[1][1]);
     $('#matrix-row-1-col-2').val(matrix[1][2]);
-  
+
     $('#matrix-row-2-col-0').val(matrix[2][0]);
     $('#matrix-row-2-col-1').val(matrix[2][1]);
     $('#matrix-row-2-col-2').val(matrix[2][2]);

csfieldguide/static/img/guide-favicon.png

@@ -1,4 +1,4 @@
-@import "node_modules/dragula/dist/dragula.css";
+@import "static/interactives/matrix-simplifier/node_modules/dragula/dist/dragula";
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
@@ -81,19 +81,13 @@
   }
 }
 
-#output-container {
-  > div {
-    > span {
-      display: inline !important;
-    }
-  }
-}
-
+#output-container > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-#matrix-output,
-#vector-output {
-  > span {
-    display: inline !important;
+  .MathJax_Display {
+    width: min-content;
   }
 }
 

csfieldguide/static/img/logos/guide-logo-light.png

@@ -1,6 +1,6 @@
 # Pixel Viewer Interactive
 
-**Author:** Jack Morgan  
+**Author:** Jack Morgan
 **Modified by:** Andy Bell, Courtney Bracefield, Alasdair Smith, Jack Morgan
 
 This interactive is created to allow users to see the values of each pixel of an image.
@@ -29,6 +29,7 @@ The interactive has the following optional parameters to configure the interacti
 - `image` - Filename of image to use (for example `arnold.jpg`).
 - `picturepicker` - Displays a set of pictures available for using.
 - `hide-menu` - Hides the menu.
+- `hide-colour-codes` - Hides the colour codes within pixels.
 - `hide-colour-code-picker` - Hides the option to change between colour code formats.
 - `hide-config-selector` - Hides the option to change between modes.
 - `no-pixel-fill` - Displays pixels without background fill from start (also doesn't show initial image with transition).

csfieldguide/static/interactives/cmy-mixer/scss/cmy-mixer.scss

@@ -1,9 +1,10 @@
 // Settings and intialize layout
 this.MAX_HEIGHT = 133;
 this.CELL_SIZE = 50;
-
 this.MAX_NOISE = 15;
 
+var searchParameters = new URL(window.location.href).searchParams;
+
 this.container = document.getElementById("pixel-viewer-interactive-container");
 this.content = document.getElementById("pixel-viewer-interactive-content");
 this.context = content.getContext('2d');
@@ -15,8 +16,8 @@ this.contentHeight = 6650;
 this.cell_line_height = 15;
 this.cell_text = 'R \nG \nB ';
 this.text_opacity = 0;
-
 this.mode = 'datarep';
+var showColourCode = true;
 this.picturePicker = false;
 
 this.filter = null;
@@ -73,15 +74,15 @@ var colour_code_rep = 'rgb';
 $( document ).ready(function() {
   init_cache(300, MAX_HEIGHT);
 
-  if (getUrlParameter('image')){
-    image_filename = getUrlParameter('image');
+  if (searchParameters.has('image')){
+    image_filename = searchParameters.get('image');
   }
 
   var image_filepath = image_base_path + image_filename;
   $('#pixel-viewer-interactive-original-image').attr('crossorigin', 'anonymous').attr('src', image_filepath);
   load_resize_image(image_filepath, false);
 
-  switch(getUrlParameter('mode')) {
+  switch (searchParameters.get('mode')) {
     case 'threshold':
       mode = 'threshold'; break;
     case 'thresholdgreyscale':
@@ -94,24 +95,28 @@ $( document ).ready(function() {
       mode = 'brightness'; break;
   }
 
-  if (getUrlParameter('picturepicker')){
+  if (searchParameters.has('picturepicker')){
     // Whether or not to allow student to pick from set pictures
     picturePicker = true;
   }
 
-  if (getUrlParameter('hide-menu')) {
+  if (searchParameters.has('hide-menu')) {
     $('#pixel-viewer-interactive-menu-toggle').remove();
   }
 
-  if (getUrlParameter('pixelmania')){
+  if (searchParameters.has('hide-colour-codes')) {
+    showColourCode = false;
+  }
+
+  if (searchParameters.has('pixelmania')){
     $('#pixelmania-logo').removeClass('d-none');
   }
 
-  if (getUrlParameter('hide-colour-code-picker')) {
+  if (searchParameters.has('hide-colour-code-picker')) {
     $("#colour-code-radio").addClass('d-none').removeClass('d-flex');
   }
 
-  if (getUrlParameter('hide-config-selector')) {
+  if (searchParameters.has('hide-config-selector')) {
     $("#configSelector").addClass('d-none');
   }
 
@@ -120,7 +125,7 @@ $( document ).ready(function() {
    createPicturePicker();
   }
 
-  colour_code_rep = getUrlParameter('colour-code');
+  colour_code_rep = searchParameters.get('colour-code');
   if (colour_code_rep == 'rgb-hex') {
     $("input[id='rgb-hex-colour-code']").prop('checked', true);
   } else if (colour_code_rep == 'hex') {
@@ -149,7 +154,7 @@ $( document ).ready(function() {
     scroller_position_left = image_position_left;
     reflow();
 
-  if (getUrlParameter('no-pixel-fill')){
+  if (searchParameters.has('no-pixel-fill')){
     $('#pixel-viewer-interactive-show-pixel-fill').prop('checked', false);
     $("#pixel-viewer-interactive-loader").hide();
     $("#pixel-viewer-interactive-buttons").css({opacity: 1});
@@ -1066,7 +1071,7 @@ var paint = function(row, col, left, top, width, height, zoom) {
   }
 
   // If text opacity is greater than 0, then display RGB values
-if (text_opacity > 0) {
+  if (showColourCode && text_opacity > 0) {
     if (!show_pixel_fill) {
       context.fillStyle = "rgba(0, 0, 0, " + text_opacity + ")";
     } else if ((((pixelData[0] / 255) + (pixelData[1] / 255) + (pixelData[2] / 255)) / 3) < 0.85) {
@@ -1126,7 +1131,7 @@ var reflow = function() {
 };
 
 // Set zoom to see numbers if no colour fill
-if (getUrlParameter('no-pixel-fill')) {
+if (searchParameters.has('no-pixel-fill')) {
   this.scroller.zoomTo(1.5);
 }
 
@@ -1239,19 +1244,3 @@ function sum(array){
     return prev + curr;
   });
 }
-
-// From jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html
-function getUrlParameter(sParam) {
-  var sPageURL = decodeURIComponent(window.location.search.substring(1)),
-      sURLVariables = sPageURL.split('&'),
-      sParameterName,
-      i;
-
-  for (i = 0; i < sURLVariables.length; i++) {
-    sParameterName = sURLVariables[i].split('=');
-
-    if (sParameterName[0] === sParam) {
-      return sParameterName[1] === undefined ? true : sParameterName[1];
-    }
-  }
-};

csfieldguide/static/interactives/colour-matcher/scss/colour-matcher.scss

@@ -6,6 +6,8 @@
   user-select: none !important;
   background-color: #3f51b5;
   flex-grow: 1;
+  height: 100vh;
+  overflow: hidden;
 
   #pixel-viewer-interactive-source-canvas {
     height: 133px;

csfieldguide/static/interactives/data-bias/css/data-bias.scss

@@ -4,7 +4,7 @@
     "private": true,
     "dependencies": {
         "mathjs": "6.0.3",
-        "three": "0.145.0",
+        "three": "0.146.0",
         "three-orbit-controls": "82.1.0",
         "sprintf-js": "1.1.2"
     }

csfieldguide/static/interactives/matrix-simplifier/js/matrix-simplifier.js

@@ -1,5 +1,5 @@
 @use "sass:math";
-@import "node_modules/dragula/dist/dragula.css";
+@import "static/interactives/sorting-algorithms/node_modules/dragula/dist/dragula";
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
 @import "node_modules/bootstrap/scss/mixins";
@@ -61,7 +61,7 @@
   z-index: 1;
 }
 
-// Partial copy of its namesake from Dragula.css
+// Partial copy of its namesake from Dragula
 // but !important to override changes made in JS for a different purpose
 .gu-transit {
   opacity: 0.2 !important;

csfieldguide/static/interactives/matrix-simplifier/scss/matrix-simplifier.scss

@@ -1,4 +1,4 @@
-@import "node_modules/nouislider/distribute/nouislider.css";
+@import "static/interactives/training-ground/node_modules/nouislider/distribute/nouislider";
 
 #interactive-training-ground {
   max-width: 1000px;