merge upstream/master, resolve conflicts and sync lockfile for cssnano v7

Author: vanshika2720

.eslintrc.json

@@ -1,4 +1,5 @@
 {
+  "root": true,
   "env": {
     "es6": true,
     "browser": true,
@@ -13,8 +14,12 @@
       "globalReturn": false
     }
   },
-  "extends": ["eslint:recommended"],
-  "ignorePatterns": ["lib/**"],
+  "extends": [
+    "eslint:recommended"
+  ],
+  "ignorePatterns": [
+    "lib/**"
+  ],
   "rules": {
     "no-console": "off",
     "no-unused-vars": "off",
@@ -25,12 +30,12 @@
     "semi": "error",
     "no-duplicate-case": "error",
     "no-irregular-whitespace": "warn",
-    "no-prototype-builtins" : "off",
-    "no-useless-escape" : "off",
-    "no-inner-declarations" : "off",
-    "no-constant-assign" : "off",
-    "no-const-assign" : "off",
-    "no-dupe-keys" : "off",
-    "no-useless-catch" : "off"
+    "no-prototype-builtins": "off",
+    "no-useless-escape": "off",
+    "no-inner-declarations": "off",
+    "no-constant-assign": "off",
+    "no-const-assign": "off",
+    "no-dupe-keys": "off",
+    "no-useless-catch": "off"
   }
 }

.github/workflows/node.js.yml

@@ -4,34 +4,38 @@
 name: Smoke Test
 
 on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
+    push:
+        branches: [master]
+    pull_request:
+        branches: [master]
 
 jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [18.x, 20.x]
-
-    steps:
-    - name: Checkout code
-      uses: actions/checkout@v4
-      with:
-        fetch-depth: 0
-
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-
-    - run: npm ci
-    - run: npm run build --if-present
-
-    # Post-run cleanup to remove the build directory after the job finishes
-    - name: Post-run cleanup
-      if: always()
-      run: rm -rf ./build
+    build:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [18.x, 20.x]
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+              with:
+                  fetch-depth: 0
+
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v4
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: "npm"
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Build project
+              run: npm run build --if-present
+
+            # Post-run cleanup to remove the build directory after the job finishes
+            - name: Post-run cleanup
+              if: always()
+              run: rm -rf ./build

Docs/guide-es/README.md

@@ -718,8 +718,8 @@ can be used inside the _Pitch-time Matrix_ block.
 
 The _Set Drum_ block is used to map the enclosed pitches into drum
 sounds. Drum sounds are played in a monopitch using the specified drum
-sample. In the example above, a `kick drum` will be substitued for
-each occurance of a `Re` `4`.
+sample. In the example above, a `kick drum` will be substituted for
+each occurrence of a `Re` `4`.
 
 ![alt tag](./drum8.svg " ")
 

Docs/guide-ja/README.md

@@ -818,8 +818,8 @@ can be used inside the *ピッチ・タイム行列* block.
 
 The *Set ドラム* block is used to map the enclosed pitches into ドラム
 sounds. ドラム sounds are played in a monopitch using the specified ドラム
-sample. In the example above, a `kick ドラム` will be substitued for
-each occurance of a `レ` `4`.
+sample. In the example above, a `kick ドラム` will be substituted for
+each occurrence of a `レ` `4`.
 
 ![alt tag](./drum8.svg "ピッチ・ドラム・グラフ 1")
 

Docs/guide-zhCN/README.md

@@ -755,8 +755,8 @@ notes.
 
 The *Set Drum* block is used to map the enclosed pitches into drum
 sounds. Drum sounds are played in a monopitch using the specified drum
-sample. In the example above, a `kick drum` will be substitued for
-each occurance of a `Re` `4`.
+sample. In the example above, a `kick drum` will be substituted for
+each occurrence of a `Re` `4`.
 
 *Set Drum* 块用于将封闭的音高映射到鼓中声音。
 鼓声使用指定的鼓在单声道中播放。

css/activities.css

@@ -1051,12 +1051,12 @@ table {
 }
 
 #right-arrow {
-  left: 385px;
+  right: 25px;
   background: url("../header-icons/right-arrow.png");
 }
 
 #left-arrow {
-  left: 5px;
+  left: 10px;
   background: url("../header-icons/left-arrow.png");
 }
 
@@ -1177,12 +1177,14 @@ table {
 
 #helpBodyDiv {
   position: relative;
-  left: 45px;
+  margin: 0 auto !important;
+  left: 0 !important;
   border: 0 !important;
   overflow-x: hidden;
   overflow-y: auto;
-  width: 350px;
-  padding: 1rem 1rem 0 0;
+  width: calc(100% - 130px) !important;
+  max-width: 350px;
+  padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2107,7 +2109,7 @@ table {
 
 #right-arrow {
     left: auto !important;  /* Unset the old fixed pixel value */
-    right: 10px !important; /* Stick to the right edge */
+    right: 25px !important; /* Stick to the right edge */
 }
 
 /* --- Desktop View (Screens wider than 900px) --- */
@@ -2138,7 +2140,8 @@ table {
 
     /* Fix the inner text box width so it doesn't overflow */
     #helpBodyDiv {
-        width: 100% !important;
+        width: calc(100% - 110px) !important;
+        margin: 0 auto !important;
         left: 0 !important;
         padding: 0 10px;
         box-sizing: border-box; 

gulpfile.mjs

@@ -0,0 +1,75 @@
+import gulp from "gulp";
+import babel from "gulp-babel";
+import uglify from "gulp-uglify";
+import rename from "gulp-rename";
+import concat from "gulp-concat";
+import cleanCSS from "gulp-clean-css";
+import * as sassCompiler from "sass";
+import gulpSass from "gulp-sass";
+import postcss from "gulp-postcss";
+import autoprefixer from "autoprefixer";
+import cssnano from "cssnano";
+import sourcemaps from "gulp-sourcemaps";
+import prettier from "gulp-prettier";
+
+const sass = gulpSass(sassCompiler);
+
+const paths = {
+    scripts: {
+        src: "js/**/*.js",
+        dest: "dist/js"
+    },
+    styles: {
+        src: "css/**/*.css",
+        dest: "dist/css"
+    },
+    sass: {
+        src: "scss/**/*.scss",
+        dest: "dist/css"
+    }
+};
+
+export function jsTask() {
+    return gulp
+        .src(paths.scripts.src)
+        .pipe(sourcemaps.init())
+        .pipe(
+            babel({
+                presets: ["@babel/preset-env"]
+            })
+        )
+        .pipe(uglify())
+        .pipe(concat("main.min.js"))
+        .pipe(sourcemaps.write("."))
+        .pipe(gulp.dest(paths.scripts.dest));
+}
+
+export function cssTask() {
+    return gulp
+        .src(paths.styles.src)
+        .pipe(sourcemaps.init())
+        .pipe(postcss([autoprefixer(), cssnano()]))
+        .pipe(cleanCSS())
+        .pipe(rename({ suffix: ".min" }))
+        .pipe(sourcemaps.write("."))
+        .pipe(gulp.dest(paths.styles.dest));
+}
+
+export function sassTask() {
+    return gulp
+        .src(paths.sass.src)
+        .pipe(sourcemaps.init())
+        .pipe(sass().on("error", sass.logError))
+        .pipe(postcss([autoprefixer(), cssnano()]))
+        .pipe(cleanCSS())
+        .pipe(rename({ suffix: ".min" }))
+        .pipe(sourcemaps.write("."))
+        .pipe(gulp.dest(paths.sass.dest));
+}
+
+export function prettify() {
+    return gulp.src(paths.scripts.src).pipe(prettier()).pipe(gulp.dest("js"));
+}
+
+export const build = gulp.series(gulp.parallel(jsTask, sassTask));
+export default build;

js/__tests__/abc.test.js

@@ -53,10 +53,10 @@ describe("processABCNotes - Basic Note Processing", () => {
 
     beforeEach(() => {
         logo = {
-            notationNotes: { "0": "" },
+            notationNotes: { 0: "" },
             notation: {
                 notationStaging: {
-                    "0": [
+                    0: [
                         [["G♯4"], 4, 0, null, null, -1, false],
                         [["F4"], 4, 0, null, null, -1, false],
                         [["G♯4"], 2, 0, null, null, -1, false]
@@ -88,7 +88,7 @@ describe("processABCNotes - Advanced Note Handling", () => {
     let logo;
 
     beforeEach(() => {
-        logo = { notationNotes: { "0": "" }, notation: { notationStaging: { "0": [] } } };
+        logo = { notationNotes: { 0: "" }, notation: { notationStaging: { 0: [] } } };
     });
 
     it("should handle frequency (number) inputs", () => {
@@ -125,7 +125,7 @@ describe("processABCNotes - Advanced Note Handling", () => {
 describe("processABCNotes - Control Strings", () => {
     let logo;
     beforeEach(() => {
-        logo = { notationNotes: { "0": "" }, notation: { notationStaging: { "0": [] } } };
+        logo = { notationNotes: { 0: "" }, notation: { notationStaging: { 0: [] } } };
     });
 
     it("should handle all string commands correctly", () => {
@@ -182,7 +182,7 @@ describe("processABCNotes - Control Strings", () => {
 describe("processABCNotes - Chords", () => {
     let logo;
     beforeEach(() => {
-        logo = { notationNotes: { "0": "" }, notation: { notationStaging: { "0": [] } } };
+        logo = { notationNotes: { 0: "" }, notation: { notationStaging: { 0: [] } } };
     });
 
     it("should handle chords correctly (Start, Middle, End)", () => {
@@ -218,7 +218,7 @@ describe("processABCNotes - Chords", () => {
 describe("processABCNotes - Tuplet Handling", () => {
     let logo;
     beforeEach(() => {
-        logo = { notationNotes: { "0": "" }, notation: { notationStaging: { "0": [] } } };
+        logo = { notationNotes: { 0: "" }, notation: { notationStaging: { 0: [] } } };
     });
 
     it("should process standard tuplets correctly", () => {
@@ -270,7 +270,7 @@ describe("processABCNotes - Edge Cases for 100% Coverage", () => {
     let logo;
 
     beforeEach(() => {
-        logo = { notationNotes: { "0": "" }, notation: { notationStaging: { "0": [] } } };
+        logo = { notationNotes: { 0: "" }, notation: { notationStaging: { 0: [] } } };
     });
 
     it("should handle array of notes in NOTATIONNOTE field", () => {
@@ -321,10 +321,10 @@ describe("saveAbcOutput", () => {
         activity = {
             logo: {
                 notationOutput: "",
-                notationNotes: { "0": "" },
+                notationNotes: { 0: "" },
                 notation: {
                     notationStaging: {
-                        "0": [[["G♯4"], 4, 0, null, null, -1, false]]
+                        0: [[["G♯4"], 4, 0, null, null, -1, false]]
                     }
                 }
             },
@@ -353,10 +353,10 @@ describe("saveAbcOutput", () => {
 describe("processABCNotes - Tuplet Handling", () => {
     it("should process tuplets correctly", () => {
         const logo = {
-            notationNotes: { "0": "" },
+            notationNotes: { 0: "" },
             notation: {
                 notationStaging: {
-                    "0": [
+                    0: [
                         [["G♯4"], 4, 0, 3, 2, -1, false],
                         [["F4"], 4, 0, 3, 2, -1, false],
                         [["G♯4"], 4, 0, 3, 2, -1, false]

js/__tests__/artwork.test.js

@@ -67,7 +67,7 @@ describe("artwork.js Test Suite", () => {
         const circles = { highlight: {}, active: {} };
         hideButtonHighlight(circles, mockStage);
         jest.runAllTimers();
-        expect(mockStage.removeChild).toBeCalledWith(circles.active, circles.highlight);
+        expect(mockStage.removeChild).toHaveBeenCalledWith(circles.active, circles.highlight);
         jest.useRealTimers();
     });
 
@@ -76,7 +76,7 @@ describe("artwork.js Test Suite", () => {
         const paletteText = {};
         hidePaletteNameDisplay(paletteText, mockStage);
         jest.runAllTimers();
-        expect(mockStage.removeChild).toBeCalledWith(paletteText);
+        expect(mockStage.removeChild).toHaveBeenCalledWith(paletteText);
         jest.useRealTimers();
     });
 

js/__tests__/languagebox.test.js

@@ -35,11 +35,6 @@ Object.defineProperty(global, "localStorage", {
     writable: true
 });
 
-delete global.window.location;
-global.window.location = {
-    reload: jest.fn()
-};
-
 document.querySelectorAll = jest.fn(() => []);
 
 global._ = jest.fn(str => str);
@@ -53,8 +48,10 @@ describe("LanguageBox Class", () => {
     });
 
     it("should reload the window when OnClick is called", () => {
+        const reloadSpy = jest.spyOn(languageBox, "reload").mockImplementation(() => {});
         languageBox.OnClick();
-        expect(global.window.location.reload).toHaveBeenCalled();
+        expect(reloadSpy).toHaveBeenCalled();
+        reloadSpy.mockRestore();
     });
 
     it("should display 'already set' message when the selected language is the same", () => {