Integrating field music icons (#549)

* Use the music icons provided by lego in the music field editor
This commit is contained in:
Sam El-Husseini
2018-05-01 14:12:42 -04:00
committed by GitHub
parent 9257e08f0d
commit e1095b3d4a
22 changed files with 1836 additions and 3 deletions

View File

@ -10,6 +10,7 @@ export interface FieldMusicOptions extends pxtblockly.FieldImagesOptions {
declare const pxtTargetBundle: any;
let soundCache: any;
let soundIconCache: any;
export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldCustom {
public isFieldCustom_ = true;
@ -18,8 +19,6 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
private categoriesCache_: string[];
private static MUSIC_DATA_URI = `data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnNDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIzIDIzIj48cGF0aCBpZD0ibWVudV9pY25fbXVzaWMiIGQ9Ik0xMy45IDEyLjhjMS43LjMgMy4zIDEuMiA0LjMgMi42aDFzMS41LTQuNC0xLjgtNy41LTkuNy0zLjEtMTIuMSAwYy0xLjcgMi4xLTIuMyA1LTEuNCA3LjVoLjhzMS43LTIuNSA0LjQtMi42QzkgMTcuMiA5IDIxIDkgMjFjLTEuOS0uNC0zLjUtMS42LTQuNC0zLjQtMi0uNC0zLjYtMi4yLTMuNi00LjRDMSA2LjcgNS45IDMgMTEuNSAzczEwLjggNC4zIDEwLjQgMTAuMmMtLjIgNC4xLTMuNiA0LjQtMy42IDQuNC0uOCAxLjgtMi40IDMuMS00LjMgMy40LS4xLTQuNS0uMS04LjItLjEtOC4yeiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==`;
constructor(text: string, options: FieldMusicOptions, validator?: Function) {
super(text, { sort: true, data: options.data }, validator);
@ -33,6 +32,9 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
if (!pxt.BrowserUtils.isIE() && !soundCache) {
soundCache = JSON.parse(pxtTargetBundle.bundledpkgs['music']['sounds.jres']);
}
if (!soundIconCache) {
soundIconCache = JSON.parse(pxtTargetBundle.bundledpkgs['music']['icons.jres']);
}
}
/**
@ -214,7 +216,7 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
contentDiv.removeAttribute('aria-activedescendant');
});
let buttonImg = document.createElement('img');
buttonImg.src = FieldMusic.MUSIC_DATA_URI;
buttonImg.src = this.getSoundIcon(category);
//buttonImg.alt = icon.alt;
// Upon click/touch, we will be able to get the clicked element as e.target
// Store a data attribute on all possible click targets so we can match it to the icon.
@ -308,4 +310,11 @@ export class FieldMusic extends pxtblockly.FieldImages implements Blockly.FieldC
private stopSounds() {
pxsim.AudioContextManager.stop();
}
private getSoundIcon(category: string) {
if (soundIconCache && soundIconCache[category]) {
return soundIconCache[category].icon;
}
return undefined;
}
}