Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes #3681 Note Value Icons now display for Apple Devices #4127

Merged
merged 3 commits into from
Dec 14, 2024
Merged

Fixes #3681 Note Value Icons now display for Apple Devices #4127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f72f402
Function to check if browser is on Mac/iPad
jivansh77 Dec 10, 2024
ddae8e3
Generates custom block for embedding SVG
jivansh77 Dec 10, 2024
ed63a2c
Fixes the font icons for Apple devices
jivansh77 Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 51 additions & 9 deletions js/blocks/RhythmBlockPaletteBlocks.js
View file
Open in desktop
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
Open in desktop
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
Loading