Skip to content

Commit

Permalink
Fixes #3681 Note Value Icons now display for Apple Devices (#4127)
Browse files Browse the repository at this point in the history 
* Function to check if browser is on Mac/iPad

* Generates custom block for embedding SVG

* Fixes the font icons for Apple devices
  • Loading branch information
@jivansh77
jivansh77 authored Dec 14, 2024
1 parent 86872af commit 6bc1644
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 9 deletions.
60 changes: 51 additions & 9 deletions js/blocks/RhythmBlockPaletteBlocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,15 @@ function setupRhythmBlockPaletteBlocks(activity) {
* Constructs a SixtyFourthNoteBlock.
*/
constructor() {
super("sixtyfourthNote", _("1/64 note") + " 𝅘𝅥𝅱");
if (isAppleBrowser()) {
super("sixtyfourthNote", _("1/64 note"));
// Custom generator only needed for Apple devices
this.appleNoteBlock();
} else {
// TRANS: Do not modify the following line
super("sixtyfourthNote", _("1/64 note") + " 𝅘𝅥𝅱");
}

this.setPalette(rhythmBlockPalette, activity);
this.setHelpString();
this.makeMacro((x, y) => [
Expand All @@ -300,8 +308,14 @@ function setupRhythmBlockPaletteBlocks(activity) {
* Constructs a ThirtySecondNoteBlock instance.
*/
constructor() {
// TRANS: Do not modify the following line
super("thirtysecondNote", _("1/32 note") + " 𝅘𝅥𝅰");
if (isAppleBrowser()) {
super("thirtysecondNote", _("1/32 note"));
// Custom generator only needed for Apple devices
this.appleNoteBlock();
} else {
// TRANS: Do not modify the following line
super("thirtysecondNote", _("1/32 note") + " 𝅘𝅥𝅰");
}

// Set the palette and activity for the block
this.setPalette(rhythmBlockPalette, activity);
Expand All @@ -328,8 +342,14 @@ function setupRhythmBlockPaletteBlocks(activity) {
* Constructs a SixteenthNoteBlock instance.
*/
constructor() {
// TRANS: Do not modify the following line
super("sixteenthNote", _("1/16 note") + " 𝅘𝅥𝅯");
if (isAppleBrowser()) {
super("sixteenthNote", _("1/16 note"));
// Custom generator only needed for Apple devices
this.appleNoteBlock();
} else {
// TRANS: Do not modify the following line
super("sixteenthNote", _("1/16 note") + " 𝅘𝅥𝅯");
}

// Set the palette and activity for the block
this.setPalette(rhythmBlockPalette, activity);
Expand Down Expand Up @@ -412,8 +432,14 @@ function setupRhythmBlockPaletteBlocks(activity) {
* Constructs a HalfNoteBlock instance.
*/
constructor() {
// TRANS: Do not modify the following line
super("halfNote", _("half note") + " 𝅗𝅥");
if (isAppleBrowser()) {
super("halfNote", _("half note"));
// Custom generator only needed for Apple devices
this.appleNoteBlock();
} else {
// TRANS: Do not modify the following line
super("halfNote", _("half note") + " 𝅗𝅥");
}

// Set the palette and activity for the block
this.setPalette(rhythmBlockPalette, activity);
Expand All @@ -440,8 +466,14 @@ function setupRhythmBlockPaletteBlocks(activity) {
* Constructs a WholeNoteBlock instance.
*/
constructor() {
// TRANS: Do not modify the following line
super("wholeNote", _("whole note") + " 𝅝");
if (isAppleBrowser()) {
super("wholeNote", _("whole note"));
// Custom generator only needed for Apple devices
this.appleNoteBlock();
} else {
// TRANS: Do not modify the following line
super("wholeNote", _("whole note") + " 𝅝");
}

// Set the palette and activity for the block
this.setPalette(rhythmBlockPalette, activity);
Expand Down Expand Up @@ -996,3 +1028,13 @@ function setupRhythmBlockPaletteBlocks(activity) {
new TripletBlock().setup(activity);
new STupletBlock().setup(activity);
}

// Function to check if the browser is Safari or Chrome on a Mac or iPad
function isAppleBrowser() {
const userAgent = navigator.userAgent;
const isMac = userAgent.includes('Macintosh');
const isIPad = userAgent.includes('iPad') || (userAgent.includes('Macintosh') && 'ontouchend' in document); // Detects iPad in desktop mode
const isSafari = userAgent.includes('Safari') && !userAgent.includes('Chrome');
const isChrome = userAgent.includes('Chrome');
return (isMac || isIPad) && (isSafari || isChrome);
}
82 changes: 82 additions & 0 deletions js/protoblocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2050,6 +2050,88 @@ class BaseBlock extends ProtoBlock {
this.beginnerModeBlock = value;
}

/**
* Used for blocks that need custom SVG note symbols (Apple Devices only).
*/
appleNoteBlock() {
this.style = "basic";
this.size = 1;
this.args = 0;
this.dockTypes.push("out");
this.dockTypes.push("in");
this.generator = this.appleNoteBlockGenerator;
}

/**
* Generates SVG for a note block with custom musical notation.
* @returns {array} - Array containing SVG elements and dimensions.
*/
appleNoteBlockGenerator() {
const svg = new SVG();
svg.setScale(this.scale);
svg.setTab(true);
svg.setSlot(true);
svg.setExpand(30 + this.extraWidth, 0, 0, 0);

if (this.fontsize) {
svg.setFontSize(this.fontsize);
}

// Get the basic block shape
const block = svg.basicBlock();

// Add the note symbol as SVG based on the block name
let noteSymbol;
switch(this.name) {
case "wholeNote":
noteSymbol = `<g transform="translate(-312.0000,-493.37592) scale(1.1)">
<g transform="translate(7.9606,5.6125499)" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
<path d="m 369.80263,457.99537 q 1.104,0 1.872,0.432 0.768,0.416 0.768,1.2 0,0.752 -0.752,1.168 -0.752,0.4 -1.808,0.4 -1.104,0 -1.856,-0.416 -0.752,-0.416 -0.752,-1.232 0,-0.576 0.464,-0.944 0.48,-0.368 1.008,-0.48 0.528,-0.128 1.056,-0.128 z m -0.864,1.136 q 0,0.672 0.304,1.184 0.304,0.512 0.784,0.512 0.736,0 0.736,-0.8 0,-0.64 -0.304,-1.136 -0.288,-0.512 -0.8,-0.512 -0.72,0 -0.72,0.752 z" />
</g>
</g>`;
break;
case "halfNote":
noteSymbol = `<g transform="translate(-290.23523,-445.37592)">
<g style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
<path d="m 375.23523,465.70392 q 0,-0.832 0.816,-1.472 0.816,-0.656 1.728,-0.656 0.528,0 0.944,0.272 l 0,-9.472 0.352,0 0,10.352 q 0,0.896 -0.784,1.488 -0.784,0.592 -1.728,0.592 -0.528,0 -0.928,-0.304 -0.4,-0.32 -0.4,-0.8 z m 0.736,0.48 q 0.848,0 1.712,-0.72 0.88,-0.72 0.88,-1.072 0,-0.224 -0.192,-0.224 -0.592,0 -1.632,0.688 -1.024,0.672 -1.024,1.12 0,0.208 0.256,0.208 z" />
</g>
</g>`;
break;
case "sixteenthNote":
noteSymbol = `<g transform="translate(-92.21292,-422.51877)">
<g style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
<path d="m 182.21292,442.84677 q 0,-0.832 0.816,-1.472 0.816,-0.656 1.728,-0.656 0.528,0 0.944,0.272 l 0,-9.472 0.336,0 q 0.064,0.56 0.4,1.088 0.352,0.512 0.8,0.944 0.448,0.416 0.88,0.864 0.448,0.432 0.752,1.024 0.304,0.576 0.304,1.232 0,0.544 -0.256,1.104 0.304,0.448 0.304,1.184 0,1.232 -0.608,2.24 l -0.384,0 q 0.56,-1.12 0.56,-2.032 0,-0.512 -0.256,-0.96 -0.24,-0.448 -0.752,-0.816 -0.496,-0.368 -0.832,-0.56 -0.32,-0.192 -0.896,-0.48 l 0,5.52 q 0,0.896 -0.784,1.488 -0.784,0.592 -1.728,0.592 -0.528,0 -0.928,-0.304 -0.4,-0.32 -0.4,-0.8 z m 6.464,-5.904 q 0,-1.648 -2.624,-3.072 0,0.464 0.192,0.88 0.192,0.416 0.512,0.752 0.32,0.32 0.656,0.592 0.336,0.272 0.688,0.608 0.352,0.32 0.544,0.608 0.032,-0.256 0.032,-0.368 z" />
</g>
</g>`;
break;
case "thirtysecondNote":
noteSymbol = `<g transform="translate(-540.78433,-233.88335)">
<g style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
<path d="m 630.78433,254.27535 q 0,-0.832 0.816,-1.472 0.816,-0.656 1.728,-0.656 0.528,0 0.944,0.272 l 0,-11.536 0.352,0 q 0.048,0.56 0.384,1.072 0.336,0.496 0.768,0.912 0.432,0.4 0.864,0.848 0.432,0.448 0.72,1.104 0.304,0.656 0.304,1.456 0,0.48 -0.16,1.056 0.224,0.416 0.224,0.912 0,0.512 -0.24,0.976 0.304,0.448 0.304,1.168 0,1.232 -0.608,2.24 l -0.384,0 q 0.56,-1.12 0.56,-2.032 0,-0.512 -0.256,-0.96 -0.24,-0.448 -0.752,-0.816 -0.496,-0.368 -0.832,-0.56 -0.32,-0.192 -0.896,-0.48 l 0,5.52 q 0,0.896 -0.784,1.488 -0.784,0.592 -1.728,0.592 -0.528,0 -0.928,-0.304 -0.4,-0.32 -0.4,-0.8 z m 6.448,-7.872 q 0,-0.496 -0.208,-0.928 -0.192,-0.432 -0.64,-0.832 -0.432,-0.416 -0.784,-0.672 -0.352,-0.256 -0.976,-0.656 0.032,0.448 0.352,0.896 0.32,0.432 0.704,0.752 0.4,0.32 0.848,0.8 0.464,0.464 0.704,0.912 l 0,-0.272 z m 0,2.096 q 0,-0.4 -0.16,-0.768 -0.144,-0.368 -0.32,-0.608 -0.16,-0.256 -0.592,-0.608 -0.416,-0.352 -0.672,-0.528 -0.256,-0.176 -0.848,-0.576 0.064,0.48 0.4,0.976 0.336,0.48 0.72,0.816 0.4,0.336 0.832,0.784 0.448,0.432 0.64,0.784 l 0,-0.272 z" />
</g>
</g>`;
break;
case "sixtyfourthNote":
noteSymbol = `<g transform="translate(-255.3223,-318.39492)">
<g transform="translate(3.1093785,1.6864426)" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">
<path d="m 342.21292,337.13248 q 0,-0.832 0.816,-1.472 0.816,-0.656 1.728,-0.656 0.528,0 0.944,0.272 l 0,-11.568 0.336,0 q 0.064,0.64 0.384,1.104 0.336,0.464 0.752,0.768 0.416,0.304 0.832,0.656 0.416,0.336 0.688,0.928 0.288,0.592 0.288,1.44 0,0.24 -0.144,0.768 0.256,0.608 0.256,1.376 0,0.32 -0.16,0.896 0.224,0.416 0.224,0.912 0,0.496 -0.24,0.96 0.304,0.448 0.304,1.024 0,0.384 -0.08,0.688 -0.08,0.304 -0.16,0.448 -0.08,0.144 -0.368,0.608 l -0.384,0 q 0.08,-0.16 0.192,-0.368 0.112,-0.224 0.16,-0.32 0.064,-0.096 0.112,-0.24 0.064,-0.144 0.08,-0.288 0.016,-0.144 0.016,-0.32 0,-0.272 -0.096,-0.512 -0.08,-0.256 -0.176,-0.432 -0.096,-0.192 -0.32,-0.4 -0.224,-0.208 -0.368,-0.32 -0.144,-0.128 -0.464,-0.304 -0.304,-0.192 -0.432,-0.256 -0.128,-0.064 -0.48,-0.224 -0.336,-0.176 -0.4,-0.208 l 0,4.064 q 0,0.896 -0.784,1.488 -0.784,0.592 -1.728,0.592 -0.528,0 -0.928,-0.304 -0.4,-0.32 -0.4,-0.8 z m 6.352,-8.384 q 0,-0.352 -0.144,-0.688 -0.128,-0.352 -0.288,-0.576 -0.16,-0.224 -0.48,-0.496 -0.32,-0.272 -0.512,-0.4 -0.192,-0.144 -0.592,-0.384 -0.384,-0.24 -0.496,-0.32 0.032,0.432 0.352,0.832 0.32,0.384 0.704,0.656 0.4,0.272 0.816,0.72 0.432,0.432 0.624,0.912 0.016,-0.176 0.016,-0.256 z m 0.016,2.128 q 0,-0.208 -0.048,-0.4 -0.032,-0.192 -0.08,-0.336 -0.048,-0.16 -0.176,-0.336 -0.128,-0.176 -0.208,-0.288 -0.08,-0.112 -0.272,-0.272 -0.192,-0.176 -0.288,-0.256 -0.096,-0.08 -0.352,-0.256 -0.24,-0.176 -0.336,-0.224 -0.096,-0.064 -0.384,-0.24 -0.288,-0.192 -0.384,-0.256 0.032,0.464 0.368,0.88 0.336,0.416 0.736,0.704 0.4,0.272 0.816,0.688 0.416,0.416 0.576,0.864 0.032,-0.192 0.032,-0.272 z m -0.016,1.936 q 0,-0.848 -0.624,-1.504 -0.608,-0.672 -1.872,-1.392 0.064,0.464 0.384,0.896 0.336,0.416 0.72,0.688 0.4,0.272 0.8,0.704 0.4,0.416 0.576,0.88 0.016,-0.064 0.016,-0.272 z" />
</g>
</g>`;
break;
}

// Insert the note symbol after the text
const blockWithNote = block.replace('</svg>', `${noteSymbol}</svg>`);

return [
blockWithNote,
svg.docks,
svg.getWidth(),
svg.getHeight(),
svg.getHeight()
];
}

/**
* Performs setup for the block within the provided activity.
* @param {object} activity - The activity context to set up the block in.
Expand Down

0 comments on commit 6bc1644

Please sign in to comment.