summaryrefslogtreecommitdiff
path: root/gui.js
diff options
context:
space:
mode:
authorjmoenig <jens@moenig.org>2013-03-16 09:02:16 +0100
committerjmoenig <jens@moenig.org>2013-03-16 09:02:16 +0100
commit0b510366d230399a38f18a8db92dd396a0dad42e (patch)
treeffb841d64bca04799ebc470701b71e59e726017e /gui.js
downloadsnap-0b510366d230399a38f18a8db92dd396a0dad42e.tar.gz
snap-0b510366d230399a38f18a8db92dd396a0dad42e.zip
Creation
Diffstat (limited to 'gui.js')
-rw-r--r--gui.js4991
1 files changed, 4991 insertions, 0 deletions
diff --git a/gui.js b/gui.js
new file mode 100644
index 0000000..6056277
--- /dev/null
+++ b/gui.js
@@ -0,0 +1,4991 @@
+/*
+
+ gui.js
+
+ a programming environment
+ based on morphic.js, blocks.js, threads.js and objects.js
+ inspired by Scratch
+
+ written by Jens Mšnig
+ jens@moenig.org
+
+ Copyright (C) 2013 by Jens Mšnig
+
+ This file is part of Snap!.
+
+ Snap! is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as
+ published by the Free Software Foundation, either version 3 of
+ the License, or (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program. If not, see <http://www.gnu.org/licenses/>.
+
+
+ prerequisites:
+ --------------
+ needs blocks.js, threads.js, objects.js and morphic.js
+
+
+ toc
+ ---
+ the following list shows the order in which all constructors are
+ defined. Use this list to locate code in this document:
+
+ IDE_Morph
+ ProjectDialogMorph
+ SpriteIconMorph
+ TurtleIconMorph
+ CostumeIconMorph
+ WardrobeMorph
+
+
+ credits
+ -------
+ Nathan Dinsmore contributed saving and loading of projects,
+ ypr-Snap! project conversion and countless bugfixes
+ Ian Reynolds contributed handling and visualization of sounds
+
+*/
+
+/*global modules, Morph, SpriteMorph, BoxMorph, SyntaxElementMorph, Color,
+ListWatcherMorph, isString, TextMorph, newCanvas, useBlurredShadows,
+radians, VariableFrame, StringMorph, Point, SliderMorph, MenuMorph,
+morphicVersion, DialogBoxMorph, ToggleButtonMorph, contains,
+ScrollFrameMorph, StageMorph, PushButtonMorph, InputFieldMorph, FrameMorph,
+Process, nop, SnapSerializer, ListMorph, detect, AlignmentMorph, TabMorph,
+Costume, CostumeEditorMorph, MorphicPreferences, touchScreenSettings,
+standardSettings, Sound, BlockMorph, ToggleMorph, InputSlotDialogMorph,
+ScriptsMorph, isNil, SymbolMorph, BlockExportDialogMorph,
+BlockImportDialogMorph, SnapTranslator, localize, List, InputSlotMorph,
+SnapCloud, Uint8Array, HandleMorph, SVG_Costume, fontHeight, hex_sha512,
+sb*/
+
+// Global stuff ////////////////////////////////////////////////////////
+
+modules.gui = '2013-March-15';
+
+// Declarations
+
+var IDE_Morph;
+var ProjectDialogMorph;
+var SpriteIconMorph;
+var CostumeIconMorph;
+var TurtleIconMorph;
+var WardrobeMorph;
+var SoundIconMorph;
+var JukeboxMorph;
+
+// IDE_Morph ///////////////////////////////////////////////////////////
+
+// I am SNAP's top-level frame, the Editor window
+
+// IDE_Morph inherits from Morph:
+
+IDE_Morph.prototype = new Morph();
+IDE_Morph.prototype.constructor = IDE_Morph;
+IDE_Morph.uber = Morph.prototype;
+
+// IDE_Morph preferences settings
+
+IDE_Morph.prototype.buttonContrast = 30;
+IDE_Morph.prototype.backgroundColor = new Color(40, 40, 40);
+IDE_Morph.prototype.frameColor = SpriteMorph.prototype.paletteColor;
+IDE_Morph.prototype.groupColor
+ = SpriteMorph.prototype.paletteColor.lighter(8);
+IDE_Morph.prototype.sliderColor = SpriteMorph.prototype.sliderColor;
+
+// IDE_Morph instance creation:
+
+function IDE_Morph(isAutoFill) {
+ this.init(isAutoFill);
+}
+
+IDE_Morph.prototype.init = function (isAutoFill) {
+ // global font setting
+ MorphicPreferences.globalFontFamily = 'Helvetica, Arial';
+
+ // additional properties:
+ this.source = 'local';
+ this.serializer = new SnapSerializer();
+
+ this.globalVariables = new VariableFrame();
+ this.currentSprite = new SpriteMorph(this.globalVariables);
+ this.sprites = new List([this.currentSprite]);
+ this.currentCategory = 'motion';
+ this.currentTab = 'scripts';
+ this.projectName = '';
+ this.projectNotes = '';
+
+ this.logo = null;
+ this.controlBar = null;
+ this.categories = null;
+ this.palette = null;
+ this.spriteBar = null;
+ this.spriteEditor = null;
+ this.stage = null;
+ this.corralBar = null;
+ this.corral = null;
+
+ this.isAutoFill = isAutoFill || true;
+ this.isAppMode = false;
+ this.isSmallStage = false;
+ this.filePicker = null;
+ this.hasChangedMedia = false;
+
+ this.isAnimating = true;
+ this.stageRatio = 1; // for IDE animations, e.g. when zooming
+
+ // initialize inherited properties:
+ IDE_Morph.uber.init.call(this);
+
+ // override inherited properites:
+ this.color = this.backgroundColor;
+};
+
+IDE_Morph.prototype.openIn = function (world) {
+ var hash, usr;
+
+ this.buildPanes();
+ world.add(this);
+ world.userMenu = this.userMenu;
+
+ // get persistent user data, if any
+ usr = localStorage['-snap-user'];
+ if (usr) {
+ usr = SnapCloud.parseResponse(usr)[0];
+ if (usr) {
+ SnapCloud.username = usr.username || null;
+ SnapCloud.password = usr.password || null;
+ }
+ }
+
+ // override SnapCloud's user message with Morphic
+ SnapCloud.message = function (string) {
+ var m = new MenuMorph(null, string),
+ intervalHandle;
+ m.popUpCenteredInWorld(world);
+ intervalHandle = setInterval(function () {
+ m.destroy();
+ clearInterval(intervalHandle);
+ }, 2000);
+ };
+
+ // prevent non-DialogBoxMorphs from being dropped
+ // onto the World in user-mode
+ world.reactToDropOf = function (morph) {
+ if (!(morph instanceof DialogBoxMorph)) {
+ if (world.hand.grabOrigin) {
+ morph.slideBackTo(world.hand.grabOrigin);
+ } else {
+ world.hand.grab(morph);
+ }
+ }
+ };
+
+ this.reactToWorldResize(world.bounds);
+
+ function getURL(url) {
+ var request = new XMLHttpRequest();
+ request.open('GET', url, false);
+ request.send();
+ if (request.status === 200) {
+ return request.responseText;
+ }
+ throw new Error('unable to retrieve ' + url);
+ }
+
+ if (location.hash.substr(0, 6) === '#open:') {
+ hash = location.hash.substr(6);
+ if (hash.charAt(0) === '%'
+ || hash.search(/\%(?:[0-9a-f]{2})/i) > -1) {
+ hash = decodeURIComponent(hash);
+ }
+ if (contains(
+ ['project', 'blocks', 'sprites', 'snapdata'].map(
+ function (each) {return hash.substr(0, 8).indexOf(each); }
+ ),
+ 1
+ )) {
+ this.droppedText(hash);
+ } else {
+ this.droppedText(getURL(hash));
+ }
+ } else if (location.hash.substr(0, 5) === '#run:') {
+ hash = location.hash.substr(5);
+ if (hash.charAt(0) === '%'
+ || hash.search(/\%(?:[0-9a-f]{2})/i) > -1) {
+ hash = decodeURIComponent(hash);
+ }
+ if (hash.substr(0, 8) === '<project>') {
+ this.openProjectString(hash);
+ } else {
+// this.openProjectString(getURL(hash));
+ this.droppedText(getURL(hash));
+ }
+ this.toggleAppMode(true);
+ this.runScripts();
+ } else if (location.hash.substr(0, 6) === '#lang:') {
+ this.setLanguage(location.hash.substr(6));
+ this.newProject();
+ }
+};
+
+// IDE_Morph construction
+
+IDE_Morph.prototype.buildPanes = function () {
+ this.createLogo();
+ this.createControlBar();
+ this.createCategories();
+ this.createPalette();
+ this.createStage();
+ this.createSpriteBar();
+ this.createSpriteEditor();
+ this.createCorralBar();
+ this.createCorral();
+};
+
+IDE_Morph.prototype.createLogo = function () {
+ var myself = this;
+
+ if (this.logo) {
+ this.logo.destroy();
+ }
+
+ this.logo = new Morph();
+ this.logo.texture = 'snap_logo_sm.gif';
+
+ this.logo.drawNew = function () {
+ this.image = newCanvas(this.extent());
+ var context = this.image.getContext('2d'),
+ gradient = context.createLinearGradient(
+ 0,
+ 0,
+ this.width(),
+ 0
+ );
+ gradient.addColorStop(0, 'black');
+ gradient.addColorStop(0.5, myself.frameColor.toString());
+ context.fillStyle = gradient;
+ context.fillRect(0, 0, this.width(), this.height());
+ if (this.texture) {
+ this.drawTexture(this.texture);
+ }
+ };
+
+ this.logo.drawCachedTexture = function () {
+ var context = this.image.getContext('2d');
+ context.drawImage(
+ this.cachedTexture,
+ 5,
+ Math.round((this.height() - this.cachedTexture.height) / 2)
+ );
+ this.changed();
+ };
+
+ this.logo.mouseClickLeft = function () {
+ myself.snapMenu();
+ };
+
+ this.logo.color = new Color();
+ this.logo.setExtent(new Point(200, 28)); // dimensions are fixed
+ this.add(this.logo);
+};
+
+IDE_Morph.prototype.createControlBar = function () {
+ // assumes the logo has already been created
+ var padding = 5,
+ button,
+ stopButton,
+ pauseButton,
+ startButton,
+ projectButton,
+ settingsButton,
+ stageSizeButton,
+ appModeButton,
+ cloudButton,
+ x,
+ colors = [
+ this.groupColor,
+ this.frameColor.darker(50),
+ this.frameColor.darker(50)
+ ],
+ myself = this;
+
+ if (this.controlBar) {
+ this.controlBar.destroy();
+ }
+
+ this.controlBar = new Morph();
+ this.controlBar.color = this.frameColor;
+ this.controlBar.setHeight(this.logo.height()); // height is fixed
+ this.controlBar.mouseClickLeft = function () {
+ this.world().fillPage();
+ };
+ this.add(this.controlBar);
+
+ //smallStageButton
+ button = new ToggleButtonMorph(
+ null, //colors,
+ myself, // the IDE is the target
+ 'toggleStageSize',
+ [
+ new SymbolMorph('smallStage', 14),
+ new SymbolMorph('normalStage', 14)
+ ],
+ function () { // query
+ return myself.isSmallStage;
+ }
+ );
+
+ button.corner = 12;
+ button.color = colors[0];
+ button.highlightColor = colors[1];
+ button.pressColor = colors[2];
+ button.labelMinExtent = new Point(36, 18);
+ button.padding = 0;
+ button.labelShadowOffset = new Point(-1, -1);
+ button.labelShadowColor = colors[1];
+ button.labelColor = new Color(255, 255, 255);
+ button.contrast = this.buttonContrast;
+ button.drawNew();
+ // button.hint = 'stage size\nsmall & normal';
+ button.fixLayout();
+ button.refresh();
+ this.controlBar.add(stageSizeButton = button);
+ this.controlBar.stageSizeButton = button; // for refreshing
+
+ //appModeButton
+ button = new ToggleButtonMorph(
+ null, //colors,
+ myself, // the IDE is the target
+ 'toggleAppMode',
+ [
+ new SymbolMorph('fullScreen', 14),
+ new SymbolMorph('normalScreen', 14)
+ ],
+ function () { // query
+ return myself.isAppMode;
+ }
+ );
+
+ button.corner = 12;
+ button.color = colors[0];
+ button.highlightColor = colors[1];
+ button.pressColor = colors[2];
+ button.labelMinExtent = new Point(36, 18);
+ button.padding = 0;
+ button.labelShadowOffset = new Point(-1, -1);
+ button.labelShadowColor = colors[1];
+ button.labelColor = new Color(255, 255, 255);
+ button.contrast = this.buttonContrast;
+ button.drawNew();
+ // button.hint = 'app & edit\nmodes';
+ button.fixLayout();
+ button.refresh();
+ this.controlBar.add(appModeButton = button);
+ this.controlBar.appModeButton = button; // for refreshing
+
+ // stopButton
+ button = new PushButtonMorph(
+ this,
+ 'stopAllScripts',
+ new SymbolMorph('octagon', 14)
+ );
+ button.corner = 12;
+ button.color = colors[0];
+ button.highlightColor = colors[1];
+ button.pressColor = colors[2];
+ button.labelMinExtent = new Point(36, 18);
+ button.padding = 0;
+ button.labelShadowOffset = new Point(-1, -1);
+ button.labelShadowColor = colors[1];
+ button.labelColor = new Color(200, 0, 0);
+ button.contrast = this.buttonContrast;
+ button.drawNew();
+ // button.hint = 'stop\nevery-\nthing';
+ button.fixLayout();
+ this.controlBar.add(stopButton = button);
+
+ //pauseButton
+ button = new ToggleButtonMorph(
+ null, //colors,
+ myself, // the IDE is the target
+ 'togglePauseResume',
+ [
+ new SymbolMorph('pause', 12),
+ new SymbolMorph('pointRight', 14)
+ ],
+ function () { // query
+ return myself.isPaused();
+ }
+ );
+
+ button.corner = 12;
+ button.color = colors[0];
+ button.highlightColor = colors[1];
+ button.pressColor = colors[2];
+ button.labelMinExtent = new Point(36, 18);
+ button.padding = 0;
+ button.labelShadowOffset = new Point(-1, -1);
+ button.labelShadowColor = colors[1];
+ button.labelColor = new Color(255, 220, 0);
+ button.contrast = this.buttonContrast;
+ button.drawNew();
+ // button.hint = 'pause/resume\nall scripts';
+ button.fixLayout();
+ button.refresh();
+ this.controlBar.add(pauseButton = button);
+ this.controlBar.pauseButton = button; // for refreshing
+
+ // startButton
+ button = new PushButtonMorph(
+ this,
+ 'pressStart',
+ new SymbolMorph('flag', 14)
+ );
+ button.corner = 12;
+ button.color = colors[0];
+ button.highlightColor = colors[1];
+ button.pressColor = colors[2];
+ button.labelMinExtent = new Point(36, 18);
+ button.padding = 0;
+ button.labelShadowOffset = new Point(-1, -1);
+ button.labelShadowColor = colors[1];
+ button.labelColor = new Color(0, 200, 0);
+ button.contrast = this.buttonContrast;
+ button.drawNew();
+ // button.hint = 'start green\nflag scripts';
+ button.fixLayout();
+ this.controlBar.add(startButton = button);
+ this.controlBar.startButton = startButton;
+
+ // projectButton
+ button = new PushButtonMorph(
+ this,
+ 'projectMenu',
+ new SymbolMorph('file', 14)
+ //'\u270E'
+ );
+ button.corner = 12;
+ button.color = colors[0];
+ button.highlightColor = colors[1];
+ button.pressColor = colors[2];
+ button.labelMinExtent = new Point(36, 18);
+ button.padding = 0;
+ button.labelShadowOffset = new Point(-1, -1);
+ button.labelShadowColor = colors[1];
+ button.labelColor = new Color(255, 255, 255);
+ button.contrast = this.buttonContrast;
+ button.drawNew();
+ // button.hint = 'open, save, & annotate project';
+ button.fixLayout();
+ this.controlBar.add(projectButton = button);
+ this.controlBar.projectButton = projectButton; // for menu positioning
+
+ // settingsButton
+ button = new PushButtonMorph(
+ this,
+ 'settingsMenu',
+ new SymbolMorph('gears', 14)
+ //'\u2699'
+ );
+ button.corner = 12;
+ button.color = colors[0];
+ button.highlightColor = colors[1];
+ button.pressColor = colors[2];
+ button.labelMinExtent = new Point(36, 18);
+ button.padding = 0;
+ button.labelShadowOffset = new Point(-1, -1);
+ button.labelShadowColor = colors[1];
+ button.labelColor = new Color(255, 255, 255);
+ button.contrast = this.buttonContrast;
+ button.drawNew();
+ // button.hint = 'edit settings';
+ button.fixLayout();
+ this.controlBar.add(settingsButton = button);
+ this.controlBar.settingsButton = settingsButton; // for menu positioning
+
+ // cloudButton
+ button = new PushButtonMorph(
+ this,
+ 'cloudMenu',
+ new SymbolMorph('cloud', 11)
+ );
+ button.corner = 12;
+ button.color = colors[0];
+ button.highlightColor = colors[1];
+ button.pressColor = colors[2];
+ button.labelMinExtent = new Point(36, 18);
+ button.padding = 0;
+ button.labelShadowOffset = new Point(-1, -1);
+ button.labelShadowColor = colors[1];
+ button.labelColor = new Color(255, 255, 255);
+ button.contrast = this.buttonContrast;
+ button.drawNew();
+ // button.hint = 'cloud operations';
+ button.fixLayout();
+ this.controlBar.add(cloudButton = button);
+ this.controlBar.cloudButton = cloudButton; // for menu positioning
+
+ this.controlBar.fixLayout = function () {
+ x = this.right() - padding;
+ [stopButton, pauseButton, startButton].forEach(
+ function (button) {
+ button.setCenter(myself.controlBar.center());
+ button.setRight(x);
+ x -= button.width();
+ x -= padding;
+ }
+ );
+
+ x = myself.right() - (StageMorph.prototype.dimensions.x
+ * (myself.isSmallStage ? myself.stageRatio : 1));
+
+ [stageSizeButton, appModeButton].forEach(
+ function (button) {
+ x += padding;
+ button.setCenter(myself.controlBar.center());
+ button.setLeft(x);
+ x += button.width();
+ }
+ );
+
+ settingsButton.setCenter(myself.controlBar.center());
+ settingsButton.setLeft(this.left());
+
+ cloudButton.setCenter(myself.controlBar.center());
+ cloudButton.setRight(settingsButton.left() - padding);
+
+ projectButton.setCenter(myself.controlBar.center());
+ projectButton.setRight(cloudButton.left() - padding);
+
+ this.updateLabel();
+ };
+
+ this.controlBar.updateLabel = function () {
+ var suffix = myself.world().isDevMode ?
+ ' - ' + localize('development mode') : '';
+
+ if (this.label) {
+ this.label.destroy();
+ }
+ if (myself.isAppMode) {
+ return;
+ }
+
+ this.label = new StringMorph(
+ (myself.projectName || localize('untitled')) + suffix,
+ 14,
+ 'sans-serif',
+ true,
+ false,
+ false,
+ new Point(2, 1),
+ myself.frameColor.darker(myself.buttonContrast)
+ );
+ this.label.color = new Color(255, 255, 255);
+ this.label.drawNew();
+ this.add(this.label);
+ this.label.setCenter(this.center());
+ this.label.setLeft(this.settingsButton.right() + padding);
+ };
+};
+
+IDE_Morph.prototype.createCategories = function () {
+ // assumes the logo has already been created
+ var myself = this;
+
+ if (this.categories) {
+ this.categories.destroy();
+ }
+
+ this.categories = new Morph();
+ this.categories.color = this.groupColor;
+ this.categories.silentSetWidth(this.logo.width()); // width is fixed
+
+ function addCategoryButton(category) {
+ var labelWidth = 75,
+ colors = [
+ myself.frameColor,
+ myself.frameColor.darker(50),
+ SpriteMorph.prototype.blockColor[category]
+ ],
+ button;
+
+ button = new ToggleButtonMorph(
+ colors,
+ myself, // the IDE is the target
+ function () {
+ myself.currentCategory = category;
+ myself.categories.children.forEach(function (each) {
+ each.refresh();
+ });
+ myself.refreshPalette(true);
+ },
+ category[0].toUpperCase().concat(category.slice(1)), // label
+ function () { // query
+ return myself.currentCategory === category;
+ },
+ null, // env
+ null, // hint
+ null, // template cache
+ labelWidth, // minWidth
+ true // has preview
+ );
+
+ button.corner = 8;
+ button.padding = 0;
+ button.labelShadowOffset = new Point(-1, -1);
+ button.labelShadowColor = colors[1];
+ button.labelColor = new Color(255, 255, 255);
+ button.fixLayout();
+ button.refresh();
+ myself.categories.add(button);
+ return button;
+ }
+
+ function fixCategoriesLayout() {
+ var buttonWidth = myself.categories.children[0].width(),
+ buttonHeight = myself.categories.children[0].height(),
+ border = 3,
+ rows = Math.ceil((myself.categories.children.length) / 2),
+ xPadding = (myself.categories.width()
+ - border
+ - buttonWidth * 2) / 3,
+ yPadding = 2,
+ l = myself.categories.left(),
+ t = myself.categories.top(),
+ i = 0,
+ row,
+ col;
+
+ myself.categories.children.forEach(function (button) {
+ i += 1;
+ row = Math.ceil(i / 2);
+ col = 2 - (i % 2);
+ button.setPosition(new Point(
+ l + (col * xPadding + ((col - 1) * buttonWidth)),
+ t + (row * yPadding + ((row - 1) * buttonHeight) + border)
+ ));
+ });
+
+ myself.categories.setHeight(
+ (rows + 1) * yPadding
+ + rows * buttonHeight
+ + 2 * border
+ );
+ }
+
+ SpriteMorph.prototype.categories.forEach(function (cat) {
+ if (!contains(['lists', 'other'], cat)) {
+ addCategoryButton(cat);
+ }
+ });
+ fixCategoriesLayout();
+ this.add(this.categories);
+};
+
+IDE_Morph.prototype.createPalette = function () {
+ // assumes that the logo pane has already been created
+ // needs the categories pane for layout
+ var myself = this;
+
+ if (this.palette) {
+ this.palette.destroy();
+ }
+
+ this.palette = this.currentSprite.palette(this.currentCategory);
+ this.palette.isDraggable = false;
+ this.palette.acceptsDrops = true;
+ this.palette.contents.acceptsDrops = false;
+
+ this.palette.reactToDropOf = function (droppedMorph) {
+ if (droppedMorph instanceof DialogBoxMorph) {
+ myself.world().add(droppedMorph);
+ } else if (droppedMorph instanceof SpriteMorph) {
+ myself.removeSprite(droppedMorph);
+ } else if (droppedMorph instanceof SpriteIconMorph) {
+ droppedMorph.destroy();
+ myself.removeSprite(droppedMorph.object);
+ } else if (droppedMorph instanceof CostumeIconMorph) {
+ myself.currentSprite.wearCostume(null);
+ droppedMorph.destroy();
+ } else {
+ droppedMorph.destroy();
+ }
+ };
+
+ this.palette.setWidth(this.logo.width());
+ this.add(this.palette);
+ this.palette.scrollX(this.palette.padding);
+ this.palette.scrollY(this.palette.padding);
+};
+
+IDE_Morph.prototype.createStage = function () {
+ // assumes that the logo pane has already been created
+ if (this.stage) {
+ this.stage.destroy();
+ }
+ StageMorph.prototype.frameRate = 0;
+ this.stage = new StageMorph(this.globalVariables);
+ this.stage.setExtent(this.stage.dimensions); // dimensions are fixed
+ if (this.currentSprite instanceof SpriteMorph) {
+ this.currentSprite.setPosition(
+ this.stage.center().subtract(
+ this.currentSprite.extent().divideBy(2)
+ )
+ );
+ this.stage.add(this.currentSprite);
+ }
+ this.add(this.stage);
+};
+
+IDE_Morph.prototype.createSpriteBar = function () {
+ // assumes that the categories pane has already been created
+ var rotationStyleButtons = [],
+ thumbSize = new Point(45, 45),
+ nameField,
+ padlock,
+ thumbnail,
+ tabCorner = 15,
+ tabColors = [
+ this.groupColor.darker(40),
+ this.groupColor.darker(60),
+ this.groupColor
+ ],
+ tabBar = new AlignmentMorph('row', -tabCorner * 2),
+ tab,
+ myself = this;
+
+ if (this.spriteBar) {
+ this.spriteBar.destroy();
+ }
+
+ this.spriteBar = new Morph();
+ this.spriteBar.color = this.frameColor;
+ this.add(this.spriteBar);
+
+ function addRotationStyleButton(rotationStyle) {
+ var colors = tabColors,
+ button;
+
+ button = new ToggleButtonMorph(
+ colors,
+ myself, // the IDE is the target
+ function () {
+ if (myself.currentSprite instanceof SpriteMorph) {
+ myself.currentSprite.rotationStyle = rotationStyle;
+ myself.currentSprite.changed();
+ myself.currentSprite.drawNew();
+ myself.currentSprite.changed();
+ }
+ rotationStyleButtons.forEach(function (each) {
+ each.refresh();
+ });
+ },
+ ['\u2192', '\u21BB', '\u2194'][rotationStyle], // label
+ function () { // query
+ return myself.currentSprite instanceof SpriteMorph
+ && myself.currentSprite.rotationStyle === rotationStyle;
+ },
+ null, // environment
+ localize(
+ [
+ 'don\'t rotate', 'can rotate', 'only face left/right'
+ ][rotationStyle]
+ )
+ );
+
+ button.corner = 8;
+ button.labelMinExtent = new Point(11, 11);
+ button.padding = 0;
+ button.labelShadowOffset = new Point(-1, -1);
+ button.labelShadowColor = colors[1];
+ button.labelColor = new Color(255, 255, 255);
+ button.fixLayout();
+ button.refresh();
+ rotationStyleButtons.push(button);
+ button.setPosition(myself.spriteBar.position().add(2));
+ button.setTop(button.top()
+ + ((rotationStyleButtons.length - 1) * (button.height() + 2))
+ );
+ myself.spriteBar.add(button);
+ if (myself.currentSprite instanceof StageMorph) {
+ button.hide();
+ }
+ return button;
+ }
+
+ addRotationStyleButton(1);
+ addRotationStyleButton(2);
+ addRotationStyleButton(0);
+ this.rotationStyleButtons = rotationStyleButtons;
+
+ thumbnail = new Morph();
+ thumbnail.setExtent(thumbSize);
+ thumbnail.image = this.currentSprite.thumbnail(thumbSize);
+ thumbnail.setPosition(
+ rotationStyleButtons[0].topRight().add(new Point(5, 3))
+ );
+ this.spriteBar.add(thumbnail);
+
+ thumbnail.fps = 3;
+
+ thumbnail.step = function () {
+ if (thumbnail.version !== myself.currentSprite.version) {
+ thumbnail.image = myself.currentSprite.thumbnail(thumbSize);
+ thumbnail.changed();
+ thumbnail.version = myself.currentSprite.version;
+ }
+ };
+
+ nameField = new InputFieldMorph(this.currentSprite.name);
+ nameField.setWidth(100); // fixed dimensions
+ nameField.contrast = 90;
+ nameField.setPosition(thumbnail.topRight().add(new Point(10, 3)));
+ this.spriteBar.add(nameField);
+ nameField.drawNew();
+ nameField.accept = function () {
+ myself.currentSprite.setName(nameField.getValue());
+ };
+ this.spriteBar.reactToEdit = function () {
+ myself.currentSprite.setName(nameField.getValue());
+ };
+
+ // padlock
+ padlock = new ToggleMorph(
+ 'checkbox',
+ null,
+ function () {
+ myself.currentSprite.isDraggable =
+ !myself.currentSprite.isDraggable;
+ },
+ localize('draggable'),
+ function () {
+ return myself.currentSprite.isDraggable;
+ }
+ );
+ padlock.label.isBold = false;
+ padlock.label.setColor(new Color(255, 255, 255));
+ padlock.color = tabColors[2];
+ padlock.highlightColor = tabColors[0];
+ padlock.pressColor = tabColors[1];
+
+ padlock.tick.shadowOffset = new Point(-1, -1);
+ padlock.tick.shadowColor = new Color(); // black
+ padlock.tick.color = new Color(255, 255, 255);
+ padlock.tick.isBold = false;
+ padlock.tick.drawNew();
+
+ padlock.setPosition(nameField.bottomLeft().add(2));
+ padlock.drawNew();
+ this.spriteBar.add(padlock);
+ if (this.currentSprite instanceof StageMorph) {
+ padlock.hide();
+ }
+
+ // tab bar
+ tabBar.tabTo = function (tabString) {
+ var active;
+ myself.currentTab = tabString;
+ this.children.forEach(function (each) {
+ each.refresh();
+ if (each.state) {active = each; }
+ });
+ active.refresh(); // needed when programmatically tabbing
+ myself.createSpriteEditor();
+ myself.fixLayout('tabEditor');
+ };
+
+ tab = new TabMorph(
+ tabColors,
+ null, // target
+ function () {tabBar.tabTo('scripts'); },
+ localize('Scripts'), // label
+ function () { // query
+ return myself.currentTab === 'scripts';
+ }
+ );
+ tab.padding = 3;
+ tab.corner = tabCorner;
+ tab.edge = 1;
+ tab.labelShadowOffset = new Point(-1, -1);
+ tab.labelShadowColor = tabColors[1];
+ tab.labelColor = new Color(255, 255, 255);
+ tab.drawNew();
+ tab.fixLayout();
+ tabBar.add(tab);
+
+ tab = new TabMorph(
+ tabColors,
+ null, // target
+ function () {tabBar.tabTo('costumes'); },
+ localize('Costumes'), // label
+ function () { // query
+ return myself.currentTab === 'costumes';
+ }
+ );
+ tab.padding = 3;
+ tab.corner = tabCorner;
+ tab.edge = 1;
+ tab.labelShadowOffset = new Point(-1, -1);
+ tab.labelShadowColor = tabColors[1];
+ tab.labelColor = new Color(255, 255, 255);
+ tab.drawNew();
+ tab.fixLayout();
+ tabBar.add(tab);
+
+ tab = new TabMorph(
+ tabColors,
+ null, // target
+ function () {tabBar.tabTo('sounds'); },
+ localize('Sounds'), // label
+ function () { // query
+ return myself.currentTab === 'sounds';
+ }
+ );
+ tab.padding = 3;
+ tab.corner = tabCorner;
+ tab.edge = 1;
+ tab.labelShadowOffset = new Point(-1, -1);
+ tab.labelShadowColor = tabColors[1];
+ tab.labelColor = new Color(255, 255, 255);
+ tab.drawNew();
+ tab.fixLayout();
+ tabBar.add(tab);
+
+ tabBar.fixLayout();
+ tabBar.children.forEach(function (each) {
+ each.refresh();
+ });
+
+ this.spriteBar.add(this.spriteBar.tabBar = tabBar);
+
+ this.spriteBar.fixLayout = function () {
+ this.tabBar.setLeft(this.left());
+ this.tabBar.setBottom(this.bottom());
+ };
+};
+
+IDE_Morph.prototype.createSpriteEditor = function () {
+ // assumes that the logo pane and the stage have already been created
+ var scripts = this.currentSprite.scripts,
+ myself = this;
+
+ if (this.spriteEditor) {
+ this.spriteEditor.destroy();
+ }
+
+ if (this.currentTab === 'scripts') {
+ scripts.isDraggable = false;
+ scripts.color = this.groupColor;
+ scripts.texture = 'scriptsPaneTexture.gif';
+
+ this.spriteEditor = new ScrollFrameMorph(
+ scripts,
+ null,
+ this.sliderColor
+ );
+ this.spriteEditor.padding = 10;
+ this.spriteEditor.growth = 50;
+ this.spriteEditor.isDraggable = false;
+ this.spriteEditor.acceptsDrops = false;
+ this.spriteEditor.contents.acceptsDrops = true;
+
+ scripts.scrollFrame = this.spriteEditor;
+ this.add(this.spriteEditor);
+ this.spriteEditor.scrollX(this.spriteEditor.padding);
+ this.spriteEditor.scrollY(this.spriteEditor.padding);
+ } else if (this.currentTab === 'costumes') {
+ this.spriteEditor = new WardrobeMorph(
+ this.currentSprite,
+ this.sliderColor
+ );
+ this.spriteEditor.color = this.groupColor;
+ this.add(this.spriteEditor);
+ this.spriteEditor.updateSelection();
+
+ this.spriteEditor.acceptsDrops = false;
+ this.spriteEditor.contents.acceptsDrops = false;
+ } else if (this.currentTab === 'sounds') {
+ this.spriteEditor = new JukeboxMorph(
+ this.currentSprite,
+ this.sliderColor
+ );
+ this.spriteEditor.color = this.groupColor;
+ this.add(this.spriteEditor);
+ this.spriteEditor.updateSelection();
+ this.spriteEditor.acceptDrops = false;
+ this.spriteEditor.contents.acceptsDrops = false;
+ } else {
+ this.spriteEditor = new Morph();
+ this.spriteEditor.color = this.groupColor;
+ this.spriteEditor.acceptsDrops = true;
+ this.spriteEditor.reactToDropOf = function (droppedMorph) {
+ if (droppedMorph instanceof DialogBoxMorph) {
+ myself.world().add(droppedMorph);
+ } else if (droppedMorph instanceof SpriteMorph) {
+ myself.removeSprite(droppedMorph);
+ } else {
+ droppedMorph.destroy();
+ }
+ };
+ this.add(this.spriteEditor);
+ }
+};
+
+IDE_Morph.prototype.createCorralBar = function () {
+ // assumes the stage has already been created
+ var padding = 5,
+ button,
+ colors = [
+ this.groupColor,
+ this.frameColor.darker(50),
+ this.frameColor.darker(50)
+ ];
+
+ if (this.corralBar) {
+ this.corralBar.destroy();
+ }
+
+ this.corralBar = new Morph();
+ this.corralBar.color = this.frameColor;
+ this.corralBar.setHeight(this.logo.height()); // height is fixed
+ this.add(this.corralBar);
+
+ // new sprite button
+ button = new PushButtonMorph(
+ this,
+ 'addNewSprite',
+ new SymbolMorph('turtle', 14)
+ );
+ button.corner = 12;
+ button.color = colors[0];
+ button.highlightColor = colors[1];
+ button.pressColor = colors[2];
+ button.labelMinExtent = new Point(36, 18);
+ button.padding = 0;
+ button.labelShadowOffset = new Point(-1, -1);
+ button.labelShadowColor = colors[1];
+ button.labelColor = new Color(255, 255, 255);
+ button.contrast = this.buttonContrast;
+ button.drawNew();
+ button.hint = 'add a new Sprite';
+ button.fixLayout();
+ button.setCenter(this.corralBar.center());
+ button.setLeft(this.corralBar.left() + padding);
+ this.corralBar.add(button);
+
+};
+
+IDE_Morph.prototype.createCorral = function () {
+ // assumes the corral bar has already been created
+ var frame, template, padding = 5, myself = this;
+
+ if (this.corral) {
+ this.corral.destroy();
+ }
+
+ this.corral = new Morph();
+ this.corral.color = this.groupColor;
+ this.add(this.corral);
+
+ this.corral.stageIcon = new SpriteIconMorph(this.stage);
+ this.corral.stageIcon.isDraggable = false;
+ this.corral.add(this.corral.stageIcon);
+
+ frame = new ScrollFrameMorph(null, null, this.sliderColor);
+ frame.acceptsDrops = false;
+ frame.contents.acceptsDrops = false;
+
+ frame.contents.wantsDropOf = function (morph) {
+ return morph instanceof SpriteIconMorph;
+ };
+
+ frame.contents.reactToDropOf = function (spriteIcon) {
+ myself.corral.reactToDropOf(spriteIcon);
+ };
+
+ frame.alpha = 0;
+
+ this.sprites.asArray().forEach(function (morph) {
+ frame.contents.add(
+ template = new SpriteIconMorph(morph, template)
+ );
+ });
+
+ this.corral.frame = frame;
+ this.corral.add(frame);
+
+ this.corral.fixLayout = function () {
+ this.stageIcon.setCenter(this.center());
+ this.stageIcon.setLeft(this.left() + padding);
+ this.frame.setLeft(this.stageIcon.right() + padding);
+ this.frame.setExtent(new Point(
+ this.right() - this.frame.left(),
+ this.height()
+ ));
+ this.arrangeIcons();
+ this.refresh();
+ };
+
+ this.corral.arrangeIcons = function () {
+ var x = this.frame.left(),
+ y = this.frame.top(),
+ max = this.frame.right(),
+ start = this.frame.left();
+
+ this.frame.contents.children.forEach(function (icon) {
+ var w = icon.width();
+
+ if (x + w > max) {
+ x = start;
+ y += icon.height(); // they're all the same
+ }
+ icon.setPosition(new Point(x, y));
+ x += w;
+ });
+ this.frame.contents.adjustBounds();
+ };
+
+ this.corral.addSprite = function (sprite) {
+ this.frame.contents.add(new SpriteIconMorph(sprite));
+ this.fixLayout();
+ };
+
+ this.corral.refresh = function () {
+ this.stageIcon.refresh();
+ this.frame.contents.children.forEach(function (icon) {
+ icon.refresh();
+ });
+ };
+
+ this.corral.wantsDropOf = function (morph) {
+ return morph instanceof SpriteIconMorph;
+ };
+
+ this.corral.reactToDropOf = function (spriteIcon) {
+ var idx = 1,
+ pos = spriteIcon.position();
+ spriteIcon.destroy();
+ this.frame.contents.children.forEach(function (icon) {
+ if (pos.gt(icon.position()) || pos.y > icon.bottom()) {
+ idx += 1;
+ }
+ });
+ myself.sprites.add(spriteIcon.object, idx);
+ myself.createCorral();
+ myself.fixLayout();
+ };
+};
+
+// IDE_Morph layout
+
+IDE_Morph.prototype.fixLayout = function (situation) {
+ // situation is a string, i.e.
+ // 'selectSprite' or 'refreshPalette' or 'tabEditor'
+ var padding = 5;
+
+ Morph.prototype.trackChanges = false;
+
+ if (situation !== 'refreshPalette') {
+ // controlBar
+ this.controlBar.setPosition(this.logo.topRight());
+ this.controlBar.setWidth(this.right() - this.controlBar.left());
+ this.controlBar.fixLayout();
+
+ // categories
+ this.categories.setLeft(this.logo.left());
+ this.categories.setTop(this.logo.bottom());
+ }
+
+ // palette
+ this.palette.setLeft(this.logo.left());
+ this.palette.setTop(this.categories.bottom());
+ this.palette.setHeight(this.bottom() - this.palette.top());
+
+ if (situation !== 'refreshPalette') {
+ // stage
+ if (this.isAppMode) {
+ this.stage.setScale(Math.floor(Math.min(
+ (this.width() - padding * 2) / this.stage.dimensions.x,
+ (this.height() - this.controlBar.height() * 2 - padding * 2)
+ / this.stage.dimensions.y
+ ) * 10) / 10);
+ this.stage.setCenter(this.center());
+ } else {
+// this.stage.setScale(this.isSmallStage ? 0.5 : 1);
+ this.stage.setScale(this.isSmallStage ? this.stageRatio : 1);
+ this.stage.setTop(this.logo.bottom() + padding);
+ this.stage.setRight(this.right());
+ }
+
+ // spriteBar
+ this.spriteBar.setPosition(this.logo.bottomRight().add(padding));
+ this.spriteBar.setExtent(new Point(
+ Math.max(0, this.stage.left() - padding - this.spriteBar.left()),
+ this.categories.bottom() - this.spriteBar.top() - padding
+ ));
+ this.spriteBar.fixLayout();
+
+ // spriteEditor
+ if (this.spriteEditor.isVisible) {
+ this.spriteEditor.setPosition(this.spriteBar.bottomLeft());
+ this.spriteEditor.setExtent(new Point(
+ this.spriteBar.width(),
+ this.bottom() - this.spriteEditor.top()
+ ));
+ }
+
+ // corralBar
+ this.corralBar.setLeft(this.stage.left());
+ this.corralBar.setTop(this.stage.bottom() + padding);
+ this.corralBar.setWidth(this.stage.width());
+
+ // corral
+ if (!contains(['selectSprite', 'tabEditor'], situation)) {
+ this.corral.setPosition(this.corralBar.bottomLeft());
+ this.corral.setWidth(this.stage.width());
+ this.corral.setHeight(this.bottom() - this.corral.top());
+ this.corral.fixLayout();
+ }
+ }
+
+ Morph.prototype.trackChanges = true;
+ this.changed();
+};
+
+IDE_Morph.prototype.setProjectName = function (string) {
+ this.projectName = string;
+ this.controlBar.updateLabel();
+};
+
+// IDE_Morph resizing
+
+IDE_Morph.prototype.setExtent = function (point) {
+ var minExt,
+ ext;
+
+ // determine the minimum dimensions making sense for the current mode
+ if (this.isAppMode) {
+ minExt = StageMorph.prototype.dimensions.add(
+ this.controlBar.height() + 10
+ );
+ } else {
+ /* // auto-switches to small stage mode, commented out b/c I don't like it
+ if (point.x < 910) {
+ this.isSmallStage = true;
+ this.stageRatio = 0.5;
+ }
+ */
+ minExt = this.isSmallStage ?
+ new Point(700, 350) : new Point(910, 490);
+ }
+ ext = point.max(minExt);
+ IDE_Morph.uber.setExtent.call(this, ext);
+ this.fixLayout();
+};
+
+// IDE_Morph events
+
+IDE_Morph.prototype.reactToWorldResize = function (rect) {
+ if (this.isAutoFill) {
+ this.setPosition(rect.origin);
+ this.setExtent(rect.extent());
+ }
+ if (this.filePicker) {
+ document.body.removeChild(this.filePicker);
+ this.filePicker = null;
+ }
+};
+
+IDE_Morph.prototype.droppedImage = function (aCanvas, name) {
+ var costume = new Costume(aCanvas, name.split('.')[0]); // up to period
+ this.currentSprite.addCostume(costume);
+ this.currentSprite.wearCostume(costume);
+ this.spriteBar.tabBar.tabTo('costumes');
+ this.hasChangedMedia = true;
+};
+
+IDE_Morph.prototype.droppedSVG = function (anImage, name) {
+ var costume = new SVG_Costume(anImage, name.split('.')[0]);
+ this.currentSprite.addCostume(costume);
+ this.currentSprite.wearCostume(costume);
+ this.spriteBar.tabBar.tabTo('costumes');
+ this.hasChangedMedia = true;
+ this.showMessage(
+ 'SVG costumes are\nnot yet fully supported\nin every browser',
+ 2
+ );
+};
+
+IDE_Morph.prototype.droppedAudio = function (anAudio, name) {
+ this.currentSprite.addSound(anAudio, name.split('.')[0]); // up to period
+ this.spriteBar.tabBar.tabTo('sounds');
+ this.hasChangedMedia = true;
+};
+
+IDE_Morph.prototype.droppedText = function (aString, name) {
+ var lbl = name ? name.split('.')[0] : '';
+ if (aString.indexOf('<project') === 0) {
+ return this.openProjectString(aString);
+ }
+ if (aString.indexOf('<snapdata') === 0) {
+ return this.openCloudDataString(aString);
+ }
+ if (aString.indexOf('<blocks') === 0) {
+ return this.openBlocksString(aString, lbl, true);
+ }
+ if (aString.indexOf('<sprites') === 0) {
+ return this.openSpritesString(aString);
+ }
+ if (aString.indexOf('<media') === 0) {
+ return this.openMediaString(aString);
+ }
+};
+
+IDE_Morph.prototype.droppedBinary = function (anArrayBuffer, name) {
+ // dynamically load ypr->Snap!
+ var ypr = document.getElementById('ypr'),
+ myself = this,
+ suffix = name.substring(name.length - 3);
+
+ if (suffix.toLowerCase() !== 'ypr') {return; }
+
+ function loadYPR(buffer, lbl) {
+ var reader = new sb.Reader(),
+ pname = lbl.split('.')[0]; // up to period
+ reader.onload = function (info) {
+ myself.droppedText(new sb.XMLWriter().write(pname, info));
+ };
+ reader.readYPR(new Uint8Array(buffer));
+ }
+
+ if (!ypr) {
+ ypr = document.createElement('script');
+ ypr.id = 'ypr';
+ ypr.onload = function () {loadYPR(anArrayBuffer, name); };
+ document.head.appendChild(ypr);
+ ypr.src = 'ypr.js';
+ } else {
+ loadYPR(anArrayBuffer, name);
+ }
+};
+
+// IDE_Morph button actions
+
+IDE_Morph.prototype.refreshPalette = function (shouldIgnorePosition) {
+ var oldTop = this.palette.contents.top();
+
+ this.createPalette();
+ this.fixLayout('refreshPalette');
+ if (!shouldIgnorePosition) {
+ this.palette.contents.setTop(oldTop);
+ }
+};
+
+IDE_Morph.prototype.pressStart = function () {
+ if (this.world().currentKey === 16) { // shiftClicked
+ this.toggleFastTracking();
+ } else {
+ this.runScripts();
+ }
+};
+
+IDE_Morph.prototype.toggleFastTracking = function () {
+ if (this.stage.isFastTracked) {
+ this.stopFastTracking();
+ } else {
+ this.startFastTracking();
+ }
+};
+
+IDE_Morph.prototype.toggleVariableFrameRate = function () {
+ if (StageMorph.prototype.frameRate) {
+ StageMorph.prototype.frameRate = 0;
+ this.stage.fps = 0;
+ } else {
+ StageMorph.prototype.frameRate = 30;
+ this.stage.fps = 30;
+ }
+};
+
+IDE_Morph.prototype.startFastTracking = function () {
+ this.stage.isFastTracked = true;
+ this.stage.fps = 0;
+ this.controlBar.startButton.labelString = new SymbolMorph('flash', 14);
+ this.controlBar.startButton.drawNew();
+ this.controlBar.startButton.fixLayout();
+};
+
+IDE_Morph.prototype.stopFastTracking = function () {
+ this.stage.isFastTracked = false;
+ this.stage.fps = this.stage.frameRate;
+ this.controlBar.startButton.labelString = new SymbolMorph('flag', 14);
+ this.controlBar.startButton.drawNew();
+ this.controlBar.startButton.fixLayout();
+};
+
+IDE_Morph.prototype.runScripts = function () {
+ this.stage.fireGreenFlagEvent();
+};
+
+IDE_Morph.prototype.togglePauseResume = function () {
+ if (this.stage.threads.isPaused()) {
+ this.stage.threads.resumeAll(this.stage);
+ } else {
+ this.stage.threads.pauseAll(this.stage);
+ }
+ this.controlBar.pauseButton.refresh();
+};
+
+IDE_Morph.prototype.isPaused = function () {
+ if (!this.stage) {return false; }
+ return this.stage.threads.isPaused();
+};
+
+IDE_Morph.prototype.stopAllScripts = function () {
+ this.stage.fireStopAllEvent();
+};
+
+IDE_Morph.prototype.selectSprite = function (sprite) {
+ this.currentSprite = sprite;
+ this.createPalette();
+ this.createSpriteBar();
+ this.createSpriteEditor();
+ this.corral.refresh();
+ this.fixLayout('selectSprite');
+ this.currentSprite.scripts.fixMultiArgs();
+};
+
+// IDE_Morph sprite list access
+
+IDE_Morph.prototype.addNewSprite = function () {
+ var sprite = new SpriteMorph(this.globalVariables),
+ rnd = Process.prototype.reportRandom;
+
+ sprite.name = sprite.name
+ + (this.corral.frame.contents.children.length + 1);
+ sprite.setCenter(this.stage.center());
+ this.stage.add(sprite);
+
+ // randomize sprite properties
+ sprite.setHue(rnd.call(this, 0, 100));
+ sprite.setBrightness(rnd.call(this, 50, 100));
+ sprite.turn(rnd.call(this, 1, 360));
+ sprite.setXPosition(rnd.call(this, -220, 220));
+ sprite.setYPosition(rnd.call(this, -160, 160));
+
+ this.sprites.add(sprite);
+ this.corral.addSprite(sprite);
+ this.selectSprite(sprite);
+};
+
+IDE_Morph.prototype.duplicateSprite = function (sprite) {
+ var duplicate = sprite.fullCopy();
+
+ duplicate.name = sprite.name + '(2)';
+ duplicate.setPosition(this.world().hand.position());
+ this.stage.add(duplicate);
+ duplicate.keepWithin(this.stage);
+ this.sprites.add(duplicate);
+ this.corral.addSprite(duplicate);
+ this.selectSprite(duplicate);
+};
+
+IDE_Morph.prototype.removeSprite = function (sprite) {
+ var idx = this.sprites.asArray().indexOf(sprite) + 1;
+
+ sprite.destroy();
+ this.stage.watchers().forEach(function (watcher) {
+ if (watcher.object() === sprite) {
+ watcher.destroy();
+ }
+ });
+
+ if (idx < 1) {return; }
+
+ this.currentSprite = detect(
+ this.stage.children,
+ function (morph) {return morph instanceof SpriteMorph; }
+ ) || this.stage;
+ this.sprites.remove(this.sprites.asArray().indexOf(sprite) + 1);
+ this.createCorral();
+ this.fixLayout();
+ this.selectSprite(this.currentSprite);
+};
+
+// IDE_Morph menus
+
+IDE_Morph.prototype.userMenu = function () {
+ var menu = new MenuMorph(this);
+ menu.addItem('help', 'nop');
+ return menu;
+};
+
+IDE_Morph.prototype.snapMenu = function () {
+ var menu,
+ world = this.world();
+
+ menu = new MenuMorph(this);
+ menu.addItem('About...', 'aboutSnap');
+ menu.addLine();
+ menu.addItem(
+ 'Reference manual',
+ function () {
+ window.open('help/SnapManual.pdf', 'SnapReferenceManual');
+ }
+ );
+ menu.addItem(
+ 'Snap! website',
+ function () {
+ window.open('http://snap.berkeley.edu/', 'SnapWebsite');
+ }
+ );
+ menu.addItem(
+ 'Download source',
+ function () {
+ window.open(
+ 'http://snap.berkeley.edu/snapsource/snap.zip',
+ 'SnapSource'
+ );
+ }
+ );
+ if (world.isDevMode) {
+ menu.addLine();
+ menu.addItem(
+ 'Switch back to user mode',
+ 'switchToUserMode',
+ 'disable deep-Morphic\ncontext menus'
+ + '\nand show user-friendly ones',
+ new Color(0, 100, 0)
+ );
+ } else if (world.currentKey === 16) { // shift-click
+ menu.addLine();
+ menu.addItem(
+ 'Switch to dev mode',
+ 'switchToDevMode',
+ 'enable Morphic\ncontext menus\nand inspectors,'
+ + '\nnot user-friendly!',
+ new Color(100, 0, 0)
+ );
+ }
+ menu.popup(world, this.logo.bottomLeft());
+};
+
+IDE_Morph.prototype.cloudMenu = function () {
+ var menu,
+ myself = this,
+ world = this.world(),
+ pos = this.controlBar.cloudButton.bottomLeft(),
+ shiftClicked = (world.currentKey === 16);
+
+ menu = new MenuMorph(this);
+ if (shiftClicked) {
+ menu.addItem(
+ 'url...',
+ 'setCloudURL',
+ null,
+ new Color(100, 0, 0)
+ );
+ menu.addLine();
+ }
+ if (!SnapCloud.username) {
+ menu.addItem(
+ 'Login...',
+ 'initializeCloud'
+ );
+ menu.addItem(
+ 'Signup...',
+ 'createCloudAccount'
+ );
+ } else {
+ menu.addItem(
+ 'Logout',
+ 'logout'
+ );
+ menu.addItem(
+ 'Change Password...',
+ 'changeCloudPassword'
+ );
+ }
+ if (shiftClicked) {
+ menu.addLine();
+ menu.addItem(
+ 'export project media only...',
+ function () {
+ if (myself.projectName) {
+ myself.exportProjectMedia(myself.projectName);
+ } else {
+ myself.prompt('Export Project As...', function (name) {
+ myself.exportProjectMedia(name);
+ });
+ }
+ },
+ null,
+ this.hasChangedMedia ? new Color(100, 0, 0) : new Color(0, 100, 0)
+ );
+ menu.addItem(
+ 'export project without media...',
+ function () {
+ if (myself.projectName) {
+ myself.exportProjectNoMedia(myself.projectName);
+ } else {
+ myself.prompt('Export Project As...', function (name) {
+ myself.exportProjectNoMedia(name);
+ });
+ }
+ },
+ null,
+ new Color(100, 0, 0)
+ );
+ menu.addLine();
+ menu.addItem(
+ 'export project as cloud data...',
+ function () {
+ if (myself.projectName) {
+ myself.exportProjectAsCloudData(myself.projectName);
+ } else {
+ myself.prompt('Export Project As...', function (name) {
+ myself.exportProjectAsCloudData(name);
+ });
+ }
+ },
+ null,
+ new Color(100, 0, 0)
+ );
+ }
+ menu.popup(world, pos);
+};
+
+IDE_Morph.prototype.settingsMenu = function () {
+ var menu,
+ stage = this.stage,
+ world = this.world(),
+ myself = this,
+ pos = this.controlBar.settingsButton.bottomLeft(),
+ shiftClicked = (world.currentKey === 16);
+
+ function addPreference(label, toggle, test, onHint, offHint, hide) {
+ var on = '\u2611 ',
+ off = '\u2610 ';
+ if (!hide || shiftClicked) {
+ menu.addItem(
+ (test ? on : off) + localize(label),
+ toggle,
+ test ? onHint : offHint,
+ hide ? new Color(100, 0, 0) : null
+ );
+ }
+ }
+
+ menu = new MenuMorph(this);
+ menu.addItem('Language...', 'languageMenu');
+ menu.addLine();
+ addPreference(
+ 'Blurred shadows',
+ 'toggleBlurredShadows',
+ useBlurredShadows,
+ 'uncheck to use solid drop\nshadows and highlights',
+ 'check to use blurred drop\nshadows and highlights',
+ true
+ );
+ addPreference(
+ 'Zebra coloring',
+ 'toggleZebraColoring',
+ BlockMorph.prototype.zebraContrast,
+ 'uncheck to disable alternating\ncolors for nested block',
+ 'check to enable alternating\ncolors for nested blocks',
+ true
+ );
+ addPreference(
+ 'Dynamic input labels',
+ 'toggleDynamicInputLabels',
+ SyntaxElementMorph.prototype.dynamicInputLabels,
+ 'uncheck to disable dynamic\nlabels for variadic inputs',
+ 'check to enable dynamic\nlabels for variadic inputs',
+ true
+ );
+ addPreference(
+ 'Prefer empty slot drops',
+ 'togglePreferEmptySlotDrops',
+ ScriptsMorph.prototype.isPreferringEmptySlots,
+ 'uncheck to allow dropped\nreporters to kick out others',
+ 'settings menu prefer empty slots hint',
+ true
+ );
+ addPreference(
+ 'Long form input dialog',
+ 'toggleLongFormInputDialog',
+ InputSlotDialogMorph.prototype.isLaunchingExpanded,
+ 'uncheck to use the input\ndialog in short form',
+ 'check to always show slot\ntypes in the input dialog'
+ );
+ addPreference(
+ 'Virtual keyboard',
+ 'toggleVirtualKeyboard',
+ MorphicPreferences.useVirtualKeyboard,
+ 'uncheck to disable\nvirtual keyboard support\nfor mobile devices',
+ 'check to enable\nvirtual keyboard support\nfor mobile devices',
+ true
+ );
+ addPreference(
+ 'Input sliders',
+ 'toggleInputSliders',
+ MorphicPreferences.useSliderForInput,
+ 'uncheck to disable\ninput sliders for\nentry fields',
+ 'check to enable\ninput sliders for\nentry fields'
+ );
+ if (MorphicPreferences.useSliderForInput) {
+ addPreference(
+ 'Execute on slider change',
+ 'toggleSliderExecute',
+ InputSlotMorph.prototype.executeOnSliderEdit,
+ 'uncheck to supress\nrunning scripts\nwhen moving the slider',
+ 'check to run\nthe edited script\nwhen moving the slider'
+ );
+ }
+ addPreference(
+ 'Clicking sound',
+ function () {BlockMorph.prototype.toggleSnapSound(); },
+ BlockMorph.prototype.snapSound,
+ 'uncheck to turn\nblock clicking\nsound off',
+ 'check to turn\nblock clicking\nsound on'
+ );
+ addPreference(
+ 'Animations',
+ function () {myself.isAnimating = !myself.isAnimating; },
+ myself.isAnimating,
+ 'uncheck to disable\nIDE animations',
+ 'check to enable\nIDE animations',
+ true
+ );
+ addPreference(
+ 'Turbo mode',
+ 'toggleFastTracking',
+ this.stage.isFastTracked,
+ 'uncheck to run scripts\nat normal speed',
+ 'check to prioritize\nscript execution'
+ );
+ addPreference(
+ 'Rasterize SVGs',
+ function () {
+ MorphicPreferences.rasterizeSVGs =
+ !MorphicPreferences.rasterizeSVGs;
+ },
+ MorphicPreferences.rasterizeSVGs,
+ 'uncheck for smooth\nscaling of vector costumes',
+ 'check to rasterize\nSVGs on import',
+ true
+ );
+ menu.addLine(); // everything below this line is made persistent
+ addPreference(
+ 'Thread safe scripts',
+ function () {stage.isThreadSafe = !stage.isThreadSafe; },
+ this.stage.isThreadSafe,
+ 'uncheck to allow\nscript reentrance',
+ 'check to disallow\nscript reentrance'
+ );
+ addPreference(
+ 'Prefer smooth animations',
+ 'toggleVariableFrameRate',
+ StageMorph.prototype.frameRate,
+ 'uncheck for greater speed\nat variable frame rates',
+ 'check for smooth, predictable\nanimations across computers'
+ );
+ menu.popup(world, pos);
+};
+
+IDE_Morph.prototype.projectMenu = function () {
+ var menu,
+ myself = this,
+ world = this.world(),
+ pos = this.controlBar.projectButton.bottomLeft(),
+ shiftClicked = (world.currentKey === 16);
+
+ menu = new MenuMorph(this);
+ menu.addItem('Project Notes...', 'editProjectNotes');
+ menu.addLine();
+ menu.addItem(
+ 'New',
+ function () {
+ myself.confirm(
+ 'Replace the current project with a new one?',
+ 'New Project',
+ function () {
+ myself.newProject();
+ }
+ );
+ }
+ );
+ menu.addItem('Open...', 'openProjectsBrowser');
+ menu.addItem(
+ 'Save',
+ function () {
+ if (myself.projectName) {
+ if (myself.source === 'local') { // as well as 'examples'
+ myself.saveProject(myself.projectName);
+ } else { // 'cloud'
+ myself.saveProjectToCloud(myself.projectName);
+ }
+ } else {
+ myself.saveProjectsBrowser();
+ }
+ }
+ );
+ if (shiftClicked) {
+ menu.addItem(
+ 'Save to disk',
+ 'saveProjectToDisk',
+ 'experimental - store this project\nin your downloads folder',
+ new Color(100, 0, 0)
+ );
+ }
+ menu.addItem('Save As...', 'saveProjectsBrowser');
+ menu.addLine();
+ menu.addItem(
+ 'Import...',
+ function () {
+ var inp = document.createElement('input');
+ if (myself.filePicker) {
+ document.body.removeChild(myself.filePicker);
+ myself.filePicker = null;
+ }
+ inp.type = 'file';
+ inp.style.color = "transparent";
+ inp.style.backgroundColor = "transparent";
+ inp.style.border = "none";
+ inp.style.outline = "none";
+ inp.style.position = "absolute";
+ inp.style.top = "0px";
+ inp.style.left = "0px";
+ inp.style.width = "0px";
+ inp.style.height = "0px";
+ inp.addEventListener(
+ "change",
+ function () {
+ document.body.removeChild(inp);
+ myself.filePicker = null;
+ world.hand.processDrop(inp.files);
+ },
+ false
+ );
+ document.body.appendChild(inp);
+ myself.filePicker = inp;
+ inp.click();
+ },
+ 'file menu import hint' // looks up the actual text in the translator
+ );
+
+ menu.addItem(
+ shiftClicked ?
+ 'Export project as plain text ...' : 'Export project...',
+ function () {
+ if (myself.projectName) {
+ myself.exportProject(myself.projectName, shiftClicked);
+ } else {
+ myself.prompt('Export Project As...', function (name) {
+ myself.exportProject(name);
+ });
+ }
+ },
+ 'show project data as XML\nin a new browser window',
+ shiftClicked ? new Color(100, 0, 0) : null
+ );
+
+ menu.addItem(
+ 'Export blocks ...',
+ function () {myself.exportGlobalBlocks(); },
+ 'show global custom block definitions as XML\nin a new browser window'
+ );
+
+ menu.addLine();
+ menu.addItem(
+ 'Import tools...',
+ function () {
+
+ var url = 'http://snap.berkeley.edu/snapsource/tools.xml',
+ request = new XMLHttpRequest();
+ request.open('GET', url, false);
+ request.send();
+ if (request.status === 200) {
+ return myself.droppedText(request.responseText, 'tools');
+ }
+ throw new Error('unable to retrieve ' + url);
+
+ },
+ 'load the official library of\npowerful blocks'
+ );
+
+ menu.popup(world, pos);
+};
+
+// IDE_Morph menu actions
+
+IDE_Morph.prototype.aboutSnap = function () {
+ var dlg, aboutTxt, noticeTxt, creditsTxt, versions = '', translations,
+ module, btn1, btn2, btn3, btn4, licenseBtn, translatorsBtn,
+ world = this.world();
+
+ aboutTxt = 'Snap! 4.0\nBuild Your Own Blocks\n\n--- beta ---\n\n'
+ + 'Copyright \u24B8 2013 Jens M\u00F6nig and '
+ + 'Brian Harvey\n'
+ + 'jens@moenig.org, bh@cs.berkeley.edu\n\n'
+
+ + 'Snap! is developed by the University of California, Berkeley\n'
+ + ' with support from the National Science Foundation '
+ + 'and MioSoft. \n'
+
+ + 'The design of Snap! is influenced and inspired by Scratch,\n'
+ + 'from the Lifelong Kindergarten group at the MIT Media Lab\n\n'
+
+ + 'for more information see http://snap.berkeley.edu\n'
+ + 'and http://scratch.mit.edu';
+
+ noticeTxt = localize('License')
+ + '\n\n'
+ + 'Snap! is free software: you can redistribute it and/or modify\n'
+ + 'it under the terms of the GNU Affero General Public License as\n'
+ + 'published by the Free Software Foundation, either version 3 of\n'
+ + 'the License, or (at your option) any later version.\n\n'
+
+ + 'This program is distributed in the hope that it will be useful,\n'
+ + 'but WITHOUT ANY WARRANTY; without even the implied warranty of\n'
+ + 'MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n'
+ + 'GNU Affero General Public License for more details.\n\n'
+
+ + 'You should have received a copy of the\n'
+ + 'GNU Affero General Public License along with this program.\n'
+ + 'If not, see http://www.gnu.org/licenses/';
+
+ creditsTxt = localize('Contributors')
+ + '\n\nNathan Dinsmore: Saving/Loading, Snap-Logo Design, '
+ + 'countless bugfixes'
+ + '\nIan Reynolds: UI Design, Event Bindings, '
+ + 'Sound primitives'
+ + '\nIvan Motyashov: Initial Squeak Porting'
+ + '\nDavide Della Casa: Morphic Optimizations'
+ + '\nAchal Dave: Web Audio'
+ + '\nJoe Otto: Morphic Testing and Debugging';
+
+ for (module in modules) {
+ if (modules.hasOwnProperty(module)) {
+ versions += ('\n' + module + ' (' +
+ modules[module] + ')');
+ }
+ }
+ if (versions !== '') {
+ versions = localize('current module versions:') + ' \n\n' +
+ 'morphic (' + morphicVersion + ')' +
+ versions;
+ }
+ translations = localize('Translations') + '\n' + SnapTranslator.credits();
+
+ dlg = new DialogBoxMorph();
+ dlg.inform('About Snap', aboutTxt, world);
+ btn1 = dlg.buttons.children[0];
+ translatorsBtn = dlg.addButton(
+ function () {
+ dlg.body.text = translations;
+ dlg.body.drawNew();
+ btn1.show();
+ btn2.show();
+ btn3.hide();
+ btn4.hide();
+ licenseBtn.hide();
+ translatorsBtn.hide();
+ dlg.fixLayout();
+ dlg.drawNew();
+ dlg.setCenter(world.center());
+ },
+ 'Translators...'
+ );
+ btn2 = dlg.addButton(
+ function () {
+ dlg.body.text = aboutTxt;
+ dlg.body.drawNew();
+ btn1.show();
+ btn2.hide();
+ btn3.show();
+ btn4.show();
+ licenseBtn.show();
+ translatorsBtn.hide();
+ dlg.fixLayout();
+ dlg.drawNew();
+ dlg.setCenter(world.center());
+ },
+ 'Back...'
+ );
+ btn2.hide();
+ licenseBtn = dlg.addButton(
+ function () {
+ dlg.body.text = noticeTxt;
+ dlg.body.drawNew();
+ btn1.show();
+ btn2.show();
+ btn3.hide();
+ btn4.hide();
+ licenseBtn.hide();
+ translatorsBtn.hide();
+ dlg.fixLayout();
+ dlg.drawNew();
+ dlg.setCenter(world.center());
+ },
+ 'License...'
+ );
+ btn3 = dlg.addButton(
+ function () {
+ dlg.body.text = versions;
+ dlg.body.drawNew();
+ btn1.show();
+ btn2.show();
+ btn3.hide();
+ btn4.hide();
+ licenseBtn.hide();
+ translatorsBtn.hide();
+ dlg.fixLayout();
+ dlg.drawNew();
+ dlg.setCenter(world.center());
+ },
+ 'Modules...'
+ );
+ btn4 = dlg.addButton(
+ function () {
+ dlg.body.text = creditsTxt;
+ dlg.body.drawNew();
+ btn1.show();
+ btn2.show();
+ translatorsBtn.show();
+ btn3.hide();
+ btn4.hide();
+ licenseBtn.hide();
+ dlg.fixLayout();
+ dlg.drawNew();
+ dlg.setCenter(world.center());
+ },
+ 'Credits...'
+ );
+ translatorsBtn.hide();
+ dlg.fixLayout();
+ dlg.drawNew();
+};
+
+IDE_Morph.prototype.editProjectNotes = function () {
+ var dialog = new DialogBoxMorph(),
+ frame = new ScrollFrameMorph(),
+ text = new TextMorph(this.projectNotes || ''),
+ ok = dialog.ok,
+ myself = this,
+ size = 250,
+ world = this.world();
+
+ frame.padding = 6;
+ frame.setWidth(size);
+ frame.acceptsDrops = false;
+ frame.contents.acceptsDrops = false;
+
+ text.setWidth(size - frame.padding * 2);
+ text.setPosition(frame.topLeft().add(frame.padding));
+ text.enableSelecting();
+ text.isEditable = true;
+
+ frame.setHeight(size);
+ frame.fixLayout = nop;
+ frame.edge = InputFieldMorph.prototype.edge;
+ frame.fontSize = InputFieldMorph.prototype.fontSize;
+ frame.typeInPadding = InputFieldMorph.prototype.typeInPadding;
+ frame.contrast = InputFieldMorph.prototype.contrast;
+ frame.drawNew = InputFieldMorph.prototype.drawNew;
+ frame.drawRectBorder = InputFieldMorph.prototype.drawRectBorder;
+
+ frame.addContents(text);
+ text.drawNew();
+
+ dialog.ok = function () {
+ myself.projectNotes = text.text;
+ ok.call(this);
+ };
+
+ dialog.justDropped = function () {
+ text.edit();
+ };
+
+ dialog.labelString = 'Project Notes';
+ dialog.createLabel();
+ dialog.addBody(frame);
+ frame.drawNew();
+ dialog.addButton('ok', 'OK');
+ dialog.addButton('cancel', 'Cancel');
+ dialog.fixLayout();
+ dialog.drawNew();
+ world.add(dialog);
+ dialog.setCenter(world.center());
+ text.edit();
+};
+
+IDE_Morph.prototype.newProject = function () {
+ this.source = SnapCloud.username ? 'cloud' : 'local';
+ if (this.stage) {
+ this.stage.destroy();
+ }
+ location.hash = '';
+ this.globalVariables = new VariableFrame();
+ this.currentSprite = new SpriteMorph(this.globalVariables);
+ this.sprites = new List([this.currentSprite]);
+ this.setProjectName('');
+ this.projectNotes = '';
+ this.createStage();
+ this.add(this.stage);
+ this.createCorral();
+ this.selectSprite(this.stage.children[0]);
+ this.fixLayout();
+};
+
+IDE_Morph.prototype.saveProject = function (name) {
+ var myself = this;
+ this.nextSteps([
+ function () {
+ myself.showMessage('Saving...');
+ },
+ function () {
+ myself.rawSaveProject(name);
+ }
+ ]);
+};
+
+IDE_Morph.prototype.rawSaveProject = function (name) {
+ var str;
+ if (name) {
+ this.setProjectName(name);
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ localStorage['-snap-project-' + name]
+ = str = this.serializer.serialize(this.stage);
+ location.hash = '#open:' + str;
+ this.showMessage('Saved!', 1);
+ } catch (err) {
+ this.showMessage('Save failed: ' + err);
+ }
+ } else {
+ localStorage['-snap-project-' + name]
+ = str = this.serializer.serialize(this.stage);
+ location.hash = '#open:' + str;
+ this.showMessage('Saved!', 1);
+ }
+ }
+};
+
+IDE_Morph.prototype.saveProjectToDisk = function () {
+ var data,
+ link = document.createElement('a');
+
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ data = this.serializer.serialize(this.stage);
+ link.setAttribute('href', 'data:text/xml,' + data);
+ link.setAttribute('download', this.projectName + '.xml');
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ } catch (err) {
+ this.showMessage('Saving failed: ' + err);
+ }
+ } else {
+ data = this.serializer.serialize(this.stage);
+ link.setAttribute('href', 'data:text/xml,' + data);
+ link.setAttribute('download', this.projectName + '.xml');
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ }
+};
+
+IDE_Morph.prototype.exportProject = function (name, plain) {
+ var menu, str;
+ if (name) {
+ this.setProjectName(name);
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ menu = this.showMessage('Exporting');
+ str = encodeURIComponent(
+ this.serializer.serialize(this.stage)
+ );
+ location.hash = '#open:' + str;
+ window.open('data:text/'
+ + (plain ? 'plain,' + str : 'xml,' + str));
+ menu.destroy();
+ this.showMessage('Exported!', 1);
+ } catch (err) {
+ this.showMessage('Export failed: ' + err);
+ }
+ } else {
+ menu = this.showMessage('Exporting');
+ str = encodeURIComponent(
+ this.serializer.serialize(this.stage)
+ );
+ location.hash = '#open:' + str;
+ window.open('data:text/'
+ + (plain ? 'plain,' + str : 'xml,' + str));
+ menu.destroy();
+ this.showMessage('Exported!', 1);
+ }
+ }
+};
+
+IDE_Morph.prototype.exportGlobalBlocks = function () {
+ if (this.stage.globalBlocks.length > 0) {
+ new BlockExportDialogMorph(
+ this.serializer,
+ this.stage.globalBlocks
+ ).popUp(this.world());
+ } else {
+ this.inform(
+ 'Export blocks',
+ 'this project doesn\'t have any\n'
+ + 'custom global blocks yet'
+ );
+ }
+};
+
+IDE_Morph.prototype.exportSprite = function (sprite) {
+ var str = this.serializer.serialize(sprite);
+ window.open('data:text/xml,<sprites app="'
+ + this.serializer.app
+ + '" version="'
+ + this.serializer.version
+ + '">'
+ + str
+ + '</sprites>');
+};
+
+IDE_Morph.prototype.openProjectString = function (str) {
+ var msg,
+ myself = this;
+ this.nextSteps([
+ function () {
+ msg = myself.showMessage('Opening project...');
+ },
+ function () {
+ myself.rawOpenProjectString(str);
+ },
+ function () {
+ msg.destroy();
+ }
+ ]);
+};
+
+IDE_Morph.prototype.rawOpenProjectString = function (str) {
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ this.serializer.openProject(this.serializer.load(str), this);
+ } catch (err) {
+ this.showMessage('Load failed: ' + err);
+ }
+ } else {
+ this.serializer.openProject(this.serializer.load(str), this);
+ }
+ this.stopFastTracking();
+};
+
+IDE_Morph.prototype.openCloudDataString = function (str) {
+ var msg,
+ myself = this;
+ this.nextSteps([
+ function () {
+ msg = myself.showMessage('Opening project...');
+ },
+ function () {
+ myself.rawOpenCloudDataString(str);
+ },
+ function () {
+ msg.destroy();
+ }
+ ]);
+};
+
+IDE_Morph.prototype.rawOpenCloudDataString = function (str) {
+ var model;
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ model = this.serializer.parse(str);
+ this.serializer.loadMediaModel(model.childNamed('media'));
+ this.serializer.openProject(
+ this.serializer.loadProjectModel(model.childNamed('project')),
+ this
+ );
+ } catch (err) {
+ this.showMessage('Load failed: ' + err);
+ }
+ } else {
+ model = this.serializer.parse(str);
+ this.serializer.loadMediaModel(model.childNamed('media'));
+ this.serializer.openProject(
+ this.serializer.loadProjectModel(model.childNamed('project')),
+ this
+ );
+ }
+ this.stopFastTracking();
+};
+
+IDE_Morph.prototype.openBlocksString = function (str, name, silently) {
+ var msg,
+ myself = this;
+ this.nextSteps([
+ function () {
+ msg = myself.showMessage('Opening blocks...');
+ },
+ function () {
+ myself.rawOpenBlocksString(str, name, silently);
+ },
+ function () {
+ msg.destroy();
+ }
+ ]);
+};
+
+IDE_Morph.prototype.rawOpenBlocksString = function (str, name, silently) {
+ // name is optional (string), so is silently (bool)
+ var blocks,
+ myself = this;
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ blocks = this.serializer.loadBlocks(str, myself.stage);
+ } catch (err) {
+ this.showMessage('Load failed: ' + err);
+ }
+ } else {
+ blocks = this.serializer.loadBlocks(str, myself.stage);
+ }
+ if (silently) {
+ blocks.forEach(function (def) {
+ def.receiver = myself.stage;
+ myself.stage.globalBlocks.push(def);
+ });
+ this.flushPaletteCache();
+ this.refreshPalette();
+ this.showMessage(
+ 'Imported Blocks Module' + (name ? ': ' + name : '') + '.',
+ 2
+ );
+ } else {
+ new BlockImportDialogMorph(blocks, this.stage, name).popUp();
+ }
+};
+
+IDE_Morph.prototype.openSpritesString = function (str) {
+ var msg,
+ myself = this;
+ this.nextSteps([
+ function () {
+ msg = myself.showMessage('Opening sprite...');
+ },
+ function () {
+ myself.rawOpenSpritesString(str);
+ },
+ function () {
+ msg.destroy();
+ }
+ ]);
+};
+
+IDE_Morph.prototype.rawOpenSpritesString = function (str) {
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ this.serializer.loadSprites(str, this);
+ } catch (err) {
+ this.showMessage('Load failed: ' + err);
+ }
+ } else {
+ this.serializer.loadSprites(str, this);
+ }
+};
+
+IDE_Morph.prototype.openMediaString = function (str) {
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ this.serializer.loadMedia(str);
+ } catch (err) {
+ this.showMessage('Load failed: ' + err);
+ }
+ } else {
+ this.serializer.loadMedia(str);
+ }
+ this.showMessage('Imported Media Module.', 2);
+};
+
+IDE_Morph.prototype.openProject = function (name) {
+ var str;
+ if (name) {
+ this.showMessage('opening project\n' + name);
+ this.setProjectName(name);
+ this.openProjectString(
+ str = localStorage['-snap-project-' + name]
+ );
+ location.hash = '#open:' + str;
+ }
+};
+
+
+IDE_Morph.prototype.switchToUserMode = function () {
+ var world = this.world();
+
+ world.isDevMode = false;
+ Process.prototype.isCatchingErrors = true;
+ this.controlBar.updateLabel();
+ this.isAutoFill = true;
+ this.isDraggable = false;
+ this.reactToWorldResize(world.bounds.copy());
+ this.siblings().forEach(function (morph) {
+ if (morph instanceof DialogBoxMorph) {
+ world.add(morph); // bring to front
+ } else {
+ morph.destroy();
+ }
+ });
+ this.flushBlocksCache();
+ this.refreshPalette();
+ // prevent non-DialogBoxMorphs from being dropped
+ // onto the World in user-mode
+ world.reactToDropOf = function (morph) {
+ if (!(morph instanceof DialogBoxMorph)) {
+ world.hand.grab(morph);
+ }
+ };
+ this.showMessage('entering user mode', 1);
+
+};
+
+IDE_Morph.prototype.switchToDevMode = function () {
+ var world = this.world();
+
+ world.isDevMode = true;
+ Process.prototype.isCatchingErrors = false;
+ this.controlBar.updateLabel();
+ this.isAutoFill = false;
+ this.isDraggable = true;
+ this.setExtent(world.extent().subtract(100));
+ this.setPosition(world.position().add(20));
+ this.flushBlocksCache();
+ this.refreshPalette();
+ // enable non-DialogBoxMorphs to be dropped
+ // onto the World in dev-mode
+ delete world.reactToDropOf;
+ this.showMessage(
+ 'entering development mode.\n\n'
+ + 'error catching is turned off,\n'
+ + 'use the browser\'s web console\n'
+ + 'to see error messages.'
+ );
+};
+
+IDE_Morph.prototype.flushBlocksCache = function (category) {
+ // if no category is specified, the whole cache gets flushed
+ if (category) {
+ this.stage.blocksCache[category] = null;
+ this.stage.children.forEach(function (m) {
+ if (m instanceof SpriteMorph) {
+ m.blocksCache[category] = null;
+ }
+ });
+ } else {
+ this.stage.blocksCache = {};
+ this.stage.children.forEach(function (m) {
+ if (m instanceof SpriteMorph) {
+ m.blocksCache = {};
+ }
+ });
+ }
+ this.flushPaletteCache(category);
+};
+
+IDE_Morph.prototype.flushPaletteCache = function (category) {
+ // if no category is specified, the whole cache gets flushed
+ if (category) {
+ this.stage.paletteCache[category] = null;
+ this.stage.children.forEach(function (m) {
+ if (m instanceof SpriteMorph) {
+ m.paletteCache[category] = null;
+ }
+ });
+ } else {
+ this.stage.paletteCache = {};
+ this.stage.children.forEach(function (m) {
+ if (m instanceof SpriteMorph) {
+ m.paletteCache = {};
+ }
+ });
+ }
+};
+
+IDE_Morph.prototype.toggleZebraColoring = function () {
+ var scripts = [];
+
+ if (!BlockMorph.prototype.zebraContrast) {
+ BlockMorph.prototype.zebraContrast = 40;
+ } else {
+ BlockMorph.prototype.zebraContrast = 0;
+ }
+
+ // select all scripts:
+ this.stage.children.concat(this.stage).forEach(function (morph) {
+ if (morph instanceof SpriteMorph || morph instanceof StageMorph) {
+ scripts = scripts.concat(
+ morph.scripts.children.filter(function (morph) {
+ return morph instanceof BlockMorph;
+ })
+ );
+ }
+ });
+
+ // force-update all scripts:
+ scripts.forEach(function (topBlock) {
+ topBlock.fixBlockColor(null, true);
+ });
+};
+
+IDE_Morph.prototype.toggleDynamicInputLabels = function () {
+ var projectData;
+ SyntaxElementMorph.prototype.dynamicInputLabels =
+ !SyntaxElementMorph.prototype.dynamicInputLabels;
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ projectData = this.serializer.serialize(this.stage);
+ } catch (err) {
+ this.showMessage('Serialization failed: ' + err);
+ }
+ } else {
+ projectData = this.serializer.serialize(this.stage);
+ }
+ SpriteMorph.prototype.initBlocks();
+ this.spriteBar.tabBar.tabTo('scripts');
+ this.createCategories();
+ this.createCorralBar();
+ this.openProjectString(projectData);
+};
+
+IDE_Morph.prototype.toggleBlurredShadows = function () {
+ window.useBlurredShadows = !useBlurredShadows;
+};
+
+IDE_Morph.prototype.toggleLongFormInputDialog = function () {
+ InputSlotDialogMorph.prototype.isLaunchingExpanded =
+ !InputSlotDialogMorph.prototype.isLaunchingExpanded;
+};
+
+IDE_Morph.prototype.togglePreferEmptySlotDrops = function () {
+ ScriptsMorph.prototype.isPreferringEmptySlots =
+ !ScriptsMorph.prototype.isPreferringEmptySlots;
+};
+
+IDE_Morph.prototype.toggleVirtualKeyboard = function () {
+ MorphicPreferences.useVirtualKeyboard =
+ !MorphicPreferences.useVirtualKeyboard;
+};
+
+IDE_Morph.prototype.toggleInputSliders = function () {
+ MorphicPreferences.useSliderForInput =
+ !MorphicPreferences.useSliderForInput;
+};
+
+IDE_Morph.prototype.toggleSliderExecute = function () {
+ InputSlotMorph.prototype.executeOnSliderEdit =
+ !InputSlotMorph.prototype.executeOnSliderEdit;
+};
+
+IDE_Morph.prototype.toggleAppMode = function (appMode) {
+ var world = this.world(),
+ elements = [
+ this.logo,
+ this.controlBar.cloudButton,
+ this.controlBar.projectButton,
+ this.controlBar.settingsButton,
+ this.controlBar.stageSizeButton,
+ this.corral,
+ this.corralBar,
+ this.spriteEditor,
+ this.spriteBar,
+ this.palette,
+ this.categories
+ ];
+
+ this.isAppMode = isNil(appMode) ? !this.isAppMode : appMode;
+
+ Morph.prototype.trackChanges = false;
+ if (this.isAppMode) {
+ this.setColor(new Color());
+ this.controlBar.setColor(this.color);
+ this.controlBar.appModeButton.refresh();
+ elements.forEach(function (e) {
+ e.hide();
+ });
+ world.children.forEach(function (morph) {
+ if (morph instanceof DialogBoxMorph) {
+ morph.hide();
+ }
+ });
+ } else {
+ this.setColor(this.backgroundColor);
+ this.controlBar.setColor(this.frameColor);
+ elements.forEach(function (e) {
+ e.show();
+ });
+ this.stage.setScale(1);
+ // show all hidden dialogs
+ world.children.forEach(function (morph) {
+ if (morph instanceof DialogBoxMorph) {
+ morph.show();
+ }
+ });
+ // prevent scrollbars from showing when morph appears
+ world.allChildren().filter(function (c) {
+ return c instanceof ScrollFrameMorph;
+ }).forEach(function (s) {
+ s.adjustScrollBars();
+ });
+ }
+ this.setExtent(this.world().extent()); // resume trackChanges
+};
+
+IDE_Morph.prototype.toggleStageSize = function (isSmall) {
+ var myself = this,
+ world = this.world();
+
+ function zoomIn() {
+ myself.stageRatio = 1;
+ myself.step = function () {
+ myself.stageRatio -= (myself.stageRatio - 0.5) / 2;
+ myself.setExtent(world.extent());
+ if (myself.stageRatio < 0.6) {
+ myself.stageRatio = 0.5;
+ myself.setExtent(world.extent());
+ delete myself.step;
+ }
+ };
+ }
+
+ function zoomOut() {
+ myself.isSmallStage = true;
+ myself.stageRatio = 0.5;
+ myself.step = function () {
+ myself.stageRatio += (1 - myself.stageRatio) / 2;
+ myself.setExtent(world.extent());
+ if (myself.stageRatio > 0.9) {
+ myself.isSmallStage = false;
+ myself.setExtent(world.extent());
+ myself.controlBar.stageSizeButton.refresh();
+ delete myself.step;
+ }
+ };
+ }
+
+ this.isSmallStage = isNil(isSmall) ? !this.isSmallStage : isSmall;
+ if (this.isAnimating) {
+ if (this.isSmallStage) {
+ zoomIn();
+ } else {
+ zoomOut();
+ }
+ } else {
+ if (this.isSmallStage) {this.stageRatio = 0.5; }
+ this.setExtent(world.extent());
+ }
+};
+
+IDE_Morph.prototype.openProjectsBrowser = function () {
+ new ProjectDialogMorph(this, 'open').popUp();
+};
+
+IDE_Morph.prototype.saveProjectsBrowser = function () {
+ new ProjectDialogMorph(this, 'save').popUp();
+};
+
+// IDE_Morph localization
+
+IDE_Morph.prototype.languageMenu = function () {
+ var menu = new MenuMorph(this),
+ world = this.world(),
+ pos = this.controlBar.settingsButton.bottomLeft(),
+ myself = this;
+ SnapTranslator.languages().forEach(function (lang) {
+ menu.addItem(
+ (SnapTranslator.language === lang ? '\u2713 ' : ' ') +
+ SnapTranslator.languageName(lang),
+ function () {myself.setLanguage(lang); }
+ );
+ });
+ menu.popup(world, pos);
+};
+
+IDE_Morph.prototype.setLanguage = function (lang) {
+ var translation = document.getElementById('language'),
+ src = 'lang-' + lang + '.js',
+ myself = this;
+ SnapTranslator.unload();
+ if (translation) {
+ document.head.removeChild(translation);
+ }
+ if (lang === 'en') {
+ return this.reflectLanguage('en');
+ }
+ translation = document.createElement('script');
+ translation.id = 'language';
+ translation.onload = function () {myself.reflectLanguage(lang); };
+ document.head.appendChild(translation);
+ translation.src = src;
+};
+
+IDE_Morph.prototype.reflectLanguage = function (lang) {
+ var projectData;
+ SnapTranslator.language = lang;
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ projectData = this.serializer.serialize(this.stage);
+ } catch (err) {
+ this.showMessage('Serialization failed: ' + err);
+ }
+ } else {
+ projectData = this.serializer.serialize(this.stage);
+ }
+ SpriteMorph.prototype.initBlocks();
+ this.spriteBar.tabBar.tabTo('scripts');
+ this.createCategories();
+ this.createCorralBar();
+ this.fixLayout();
+ this.openProjectString(projectData);
+};
+
+// IDE_Morph cloud interface
+
+IDE_Morph.prototype.initializeCloud = function () {
+ var myself = this,
+ world = this.world();
+ new DialogBoxMorph(
+ null,
+ function (user) {
+ var pwh = hex_sha512(user.password),
+ str;
+ SnapCloud.login(
+ user.username,
+ pwh,
+ function () {
+ if (user.choice) {
+ str = SnapCloud.encodeDict(
+ {
+ username: user.username,
+ password: pwh
+ }
+ );
+ localStorage['-snap-user'] = str;
+ }
+ myself.source = 'cloud';
+ myself.showMessage('now connected.', 2);
+ },
+ myself.cloudError()
+ );
+ }
+ ).promptCredentials(
+ 'Sign in',
+ 'login',
+ null,
+ null,
+ null,
+ null,
+ 'stay signed in on this computer\nuntil logging out',
+ world,
+ myself.cloudIcon(),
+ myself.cloudMsg
+ );
+};
+
+IDE_Morph.prototype.createCloudAccount = function () {
+ var myself = this,
+ world = this.world();
+ new DialogBoxMorph(
+ null,
+ function (user) {
+ SnapCloud.signup(
+ user.username,
+ user.email,
+ function (txt, title) {
+ new DialogBoxMorph().inform(
+ title,
+ txt +
+ '.\n\nAn e-mail with your password\n' +
+ 'has been sent to the address provided',
+ world,
+ myself.cloudIcon(null, new Color(0, 180, 0))
+ );
+ },
+ myself.cloudError()
+ );
+ }
+ ).promptCredentials(
+ 'Sign up',
+ 'signup',
+ 'http://snap.berkeley.edu/tos.html',
+ 'Terms of Service...',
+ 'http://snap.berkeley.edu/privacy.html',
+ 'Privacy...',
+ 'I have read and agree\nto the Terms of Service',
+ world,
+ myself.cloudIcon(),
+ myself.cloudMsg
+ );
+};
+
+IDE_Morph.prototype.changeCloudPassword = function () {
+ var myself = this,
+ world = this.world();
+ new DialogBoxMorph(
+ null,
+ function (user) {
+ SnapCloud.changePassword(
+ user.oldpassword,
+ user.password,
+ function () {
+ myself.logout();
+ myself.showMessage('password has been changed.', 2);
+ },
+ myself.cloudError()
+ );
+ }
+ ).promptCredentials(
+ 'Change Password',
+ 'changePassword',
+ null,
+ null,
+ null,
+ null,
+ null,
+ world,
+ myself.cloudIcon(),
+ myself.cloudMsg
+ );
+};
+
+IDE_Morph.prototype.logout = function () {
+ var myself = this;
+ delete localStorage['-snap-user'];
+ SnapCloud.logout(
+ function () {
+ SnapCloud.clear();
+ myself.showMessage('disconnected.', 2);
+ },
+ function () {
+ SnapCloud.clear();
+ myself.showMessage('disconnected.', 2);
+ }
+ );
+};
+
+IDE_Morph.prototype.saveProjectToCloud = function (name) {
+ var myself = this;
+ if (name) {
+ this.showMessage('Saving project\nto the cloud...');
+ this.setProjectName(name);
+ SnapCloud.saveProject(
+ this,
+ function () {myself.showMessage('saved.', 2); },
+ this.cloudError()
+ );
+ }
+};
+
+IDE_Morph.prototype.exportProjectMedia = function (name) {
+ var menu, str, media;
+ this.serializer.isCollectingMedia = true;
+ if (name) {
+ this.setProjectName(name);
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ menu = this.showMessage('Exporting');
+ str = encodeURIComponent(
+ this.serializer.serialize(this.stage)
+ );
+ media = encodeURIComponent(
+ this.serializer.mediaXML(name)
+ );
+ window.open('data:text/xml,' + media);
+ menu.destroy();
+ this.showMessage('Exported!', 1);
+ } catch (err) {
+ this.serializer.isCollectingMedia = false;
+ this.showMessage('Export failed: ' + err);
+ }
+ } else {
+ menu = this.showMessage('Exporting');
+ str = encodeURIComponent(
+ this.serializer.serialize(this.stage)
+ );
+ media = encodeURIComponent(
+ this.serializer.mediaXML()
+ );
+ window.open('data:text/xml,' + media);
+ menu.destroy();
+ this.showMessage('Exported!', 1);
+ }
+ }
+ this.serializer.isCollectingMedia = false;
+ this.serializer.flushMedia();
+ // this.hasChangedMedia = false;
+};
+
+IDE_Morph.prototype.exportProjectNoMedia = function (name) {
+ var menu, str;
+ this.serializer.isCollectingMedia = true;
+ if (name) {
+ this.setProjectName(name);
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ menu = this.showMessage('Exporting');
+ str = encodeURIComponent(
+ this.serializer.serialize(this.stage)
+ );
+ window.open('data:text/xml,' + str);
+ menu.destroy();
+ this.showMessage('Exported!', 1);
+ } catch (err) {
+ this.serializer.isCollectingMedia = false;
+ this.showMessage('Export failed: ' + err);
+ }
+ } else {
+ menu = this.showMessage('Exporting');
+ str = encodeURIComponent(
+ this.serializer.serialize(this.stage)
+ );
+ window.open('data:text/xml,' + str);
+ menu.destroy();
+ this.showMessage('Exported!', 1);
+ }
+ }
+ this.serializer.isCollectingMedia = false;
+ this.serializer.flushMedia();
+};
+
+IDE_Morph.prototype.exportProjectAsCloudData = function (name) {
+ var menu, str, media, dta;
+ this.serializer.isCollectingMedia = true;
+ if (name) {
+ this.setProjectName(name);
+ if (Process.prototype.isCatchingErrors) {
+ try {
+ menu = this.showMessage('Exporting');
+ str = encodeURIComponent(
+ this.serializer.serialize(this.stage)
+ );
+ media = encodeURIComponent(
+ this.serializer.mediaXML(name)
+ );
+ dta = encodeURIComponent('<snapdata>')
+ + str
+ + media
+ + encodeURIComponent('</snapdata>');
+ window.open('data:text/xml,' + dta);
+ menu.destroy();
+ this.showMessage('Exported!', 1);
+ } catch (err) {
+ this.serializer.isCollectingMedia = false;
+ this.showMessage('Export failed: ' + err);
+ }
+ } else {
+ menu = this.showMessage('Exporting');
+ str = encodeURIComponent(
+ this.serializer.serialize(this.stage)
+ );
+ media = encodeURIComponent(
+ this.serializer.mediaXML()
+ );
+ dta = encodeURIComponent('<snapdata>')
+ + str
+ + media
+ + encodeURIComponent('</snapdata>');
+ window.open('data:text/xml,' + dta);
+ menu.destroy();
+ this.showMessage('Exported!', 1);
+ }
+ }
+ this.serializer.isCollectingMedia = false;
+ this.serializer.flushMedia();
+ // this.hasChangedMedia = false;
+};
+
+IDE_Morph.prototype.cloudAcknowledge = function () {
+ var myself = this;
+ return function (responseText, url) {
+ nop(responseText);
+ new DialogBoxMorph().inform(
+ 'Cloud Connection',
+ 'Successfully connected to:\n'
+ + 'http://'
+ + url,
+ myself.world(),
+ myself.cloudIcon(null, new Color(0, 180, 0))
+ );
+ };
+};
+
+IDE_Morph.prototype.cloudResponse = function () {
+ var myself = this;
+ return function (responseText, url) {
+ var response = responseText;
+ if (response.length > 50) {
+ response = response.substring(0, 50) + '...';
+ }
+ new DialogBoxMorph().inform(
+ 'Snap!Cloud',
+ 'http://'
+ + url + ':\n\n'
+ + 'responds:\n'
+ + response,
+ myself.world(),
+ myself.cloudIcon(null, new Color(0, 180, 0))
+ );
+ };
+};
+
+IDE_Morph.prototype.cloudError = function () {
+ var myself = this;
+ return function (responseText, url) {
+ var response = responseText;
+ if (response.length > 50) {
+ response = response.substring(0, 50) + '...';
+ }
+ new DialogBoxMorph().inform(
+ 'Snap!Cloud',
+ (url ? url + '\n' : '')
+ + response,
+ myself.world(),
+ myself.cloudIcon(null, new Color(180, 0, 0))
+ );
+ };
+};
+
+IDE_Morph.prototype.cloudIcon = function (height, color) {
+ var clr = color || DialogBoxMorph.prototype.titleBarColor,
+ icon = new SymbolMorph(
+ 'cloudGradient',
+ height || 50,
+ clr,
+ new Point(-1, -1),
+ clr.darker(50)
+ );
+ icon.addShadow(new Point(1, 1), 1, clr.lighter(95));
+ return icon;
+};
+
+IDE_Morph.prototype.setCloudURL = function () {
+ new DialogBoxMorph(
+ null,
+ function (url) {
+ SnapCloud.url = url;
+ }
+ ).prompt(
+ 'Cloud URL',
+ SnapCloud.url,
+ this.world(),
+ null,
+ {
+ 'Snap!Cloud' :
+ 'https://snapcloud.miosoft.com/miocon/app/' +
+ 'login?_app=SnapCloud',
+ 'local network dev' :
+ '192.168.2.108:8087/miocon/app/login?_app=SnapCloud',
+ 'localhost dev' :
+ 'localhost/miocon/app/login?_app=SnapCloud'
+ }
+ );
+};
+
+IDE_Morph.prototype.cloudMsg = null;
+/*
+ 'Snap!Cloud is in Beta-test status.\n' +
+ 'Expect hiccups and downtimes and don\'t\n' +
+ 'forget to save important work locally.';
+*/
+
+// IDE_Morph user dialog shortcuts
+
+IDE_Morph.prototype.showMessage = function (message, secs) {
+ var m = new MenuMorph(null, message),
+ intervalHandle;
+ m.popUpCenteredInWorld(this.world());
+ if (secs) {
+ intervalHandle = setInterval(function () {
+ m.destroy();
+ clearInterval(intervalHandle);
+ }, secs * 1000);
+ }
+ return m;
+};
+
+IDE_Morph.prototype.inform = function (title, message) {
+ new DialogBoxMorph().inform(
+ title,
+ localize(message),
+ this.world()
+ );
+};
+
+IDE_Morph.prototype.confirm = function (message, title, action) {
+ new DialogBoxMorph(null, action).askYesNo(
+ title,
+ localize(message),
+ this.world()
+ );
+};
+
+IDE_Morph.prototype.prompt = function (message, callback, choices) {
+ (new DialogBoxMorph(null, callback)).prompt(
+ message,
+ '',
+ this.world(),
+ null,
+ choices
+ );
+};
+
+// ProjectDialogMorph ////////////////////////////////////////////////////
+
+// ProjectDialogMorph inherits from DialogBoxMorph:
+
+ProjectDialogMorph.prototype = new DialogBoxMorph();
+ProjectDialogMorph.prototype.constructor = ProjectDialogMorph;
+ProjectDialogMorph.uber = DialogBoxMorph.prototype;
+
+// ProjectDialogMorph instance creation:
+
+function ProjectDialogMorph(ide, label) {
+ this.init(ide, label);
+}
+
+ProjectDialogMorph.prototype.init = function (ide, task) {
+ var myself = this;
+
+ // additional properties:
+ this.ide = ide;
+ this.task = task || 'open'; // String describing what do do (open, save)
+ this.source = ide.source || 'local'; // or 'cloud' or 'examples'
+ this.projectList = []; // [{name: , thumb: , notes:}]
+
+ this.handle = null;
+ this.srcBar = null;
+ this.nameField = null;
+ this.listField = null;
+ this.preview = null;
+ this.notesText = null;
+ this.notesField = null;
+
+ // initialize inherited properties:
+ ProjectDialogMorph.uber.init.call(
+ this,
+ this, // target
+ null, // function
+ null // environment
+ );
+
+ // override inherited properites:
+ this.labelString = this.task === 'save' ? 'Save Project' : 'Open Project';
+ this.createLabel();
+
+ // build contents
+ this.buildContents();
+ this.onNextStep = function () { // yield to show "updating" message
+ myself.setSource(myself.source);
+ };
+};
+
+ProjectDialogMorph.prototype.buildContents = function () {
+ var thumbnail;
+
+ this.addBody(new Morph());
+ this.body.color = this.color;
+
+ this.srcBar = new AlignmentMorph('column', this.padding / 2);
+ this.addSourceButton('cloud', localize('Cloud'), 'cloud');
+ this.addSourceButton('local', localize('Browser'), 'storage');
+ if (this.task === 'open') {
+ this.addSourceButton('examples', localize('Examples'), 'poster');
+ }
+ this.srcBar.fixLayout();
+ this.body.add(this.srcBar);
+
+ if (this.task === 'save') {
+ this.nameField = new InputFieldMorph(this.ide.projectName);
+ this.body.add(this.nameField);
+ }
+
+ this.listField = new ListMorph([]);
+ this.fixListFieldItemColors();
+ this.listField.fixLayout = nop;
+ this.listField.edge = InputFieldMorph.prototype.edge;
+ this.listField.fontSize = InputFieldMorph.prototype.fontSize;
+ this.listField.typeInPadding = InputFieldMorph.prototype.typeInPadding;
+ this.listField.contrast = InputFieldMorph.prototype.contrast;
+ this.listField.drawNew = InputFieldMorph.prototype.drawNew;
+ this.listField.drawRectBorder = InputFieldMorph.prototype.drawRectBorder;
+
+ this.body.add(this.listField);
+
+ this.preview = new Morph();
+ this.preview.fixLayout = nop;
+ this.preview.edge = InputFieldMorph.prototype.edge;
+ this.preview.fontSize = InputFieldMorph.prototype.fontSize;
+ this.preview.typeInPadding = InputFieldMorph.prototype.typeInPadding;
+ this.preview.contrast = InputFieldMorph.prototype.contrast;
+ this.preview.drawNew = function () {
+ InputFieldMorph.prototype.drawNew.call(this);
+ if (this.texture) {
+ this.drawTexture(this.texture);
+ }
+ };
+ this.preview.drawCachedTexture = function () {
+ var context = this.image.getContext('2d');
+ context.drawImage(this.cachedTexture, this.edge, this.edge);
+ this.changed();
+ };
+ this.preview.drawRectBorder = InputFieldMorph.prototype.drawRectBorder;
+ this.preview.setExtent(
+ this.ide.serializer.thumbnailSize.add(this.preview.edge * 2)
+ );
+
+ this.body.add(this.preview);
+ this.preview.drawNew();
+ if (this.task === 'save') {
+ thumbnail = this.ide.stage.thumbnail(
+ SnapSerializer.prototype.thumbnailSize
+ );
+ this.preview.texture = null;
+ this.preview.cachedTexture = thumbnail;
+ this.preview.drawCachedTexture();
+ }
+
+ this.notesField = new ScrollFrameMorph();
+ this.notesField.fixLayout = nop;
+
+ this.notesField.edge = InputFieldMorph.prototype.edge;
+ this.notesField.fontSize = InputFieldMorph.prototype.fontSize;
+ this.notesField.typeInPadding = InputFieldMorph.prototype.typeInPadding;
+ this.notesField.contrast = InputFieldMorph.prototype.contrast;
+ this.notesField.drawNew = InputFieldMorph.prototype.drawNew;
+ this.notesField.drawRectBorder = InputFieldMorph.prototype.drawRectBorder;
+
+ this.notesField.acceptsDrops = false;
+ this.notesField.contents.acceptsDrops = false;
+
+ if (this.task === 'open') {
+ this.notesText = new TextMorph('');
+ } else { // 'save'
+ this.notesText = new TextMorph(this.ide.projectNotes);
+ this.notesText.isEditable = true;
+ this.notesText.enableSelecting();
+ }
+
+ this.notesField.isTextLineWrapping = true;
+ this.notesField.padding = 3;
+ this.notesField.setContents(this.notesText);
+ this.notesField.setWidth(this.preview.width());
+
+ this.body.add(this.notesField);
+
+ if (this.task === 'open') {
+ this.addButton('openProject', 'Open');
+ this.addButton('deleteProject', 'Delete');
+ this.action = 'openProject';
+ } else { // 'save'
+ this.addButton('saveProject', 'Save');
+ this.action = 'saveProject';
+ }
+ this.addButton('cancel', 'Cancel');
+
+ this.setExtent(new Point(455, 335));
+ this.fixLayout();
+
+};
+
+ProjectDialogMorph.prototype.popUp = function (wrrld) {
+ var world = wrrld || this.ide.world();
+ if (world) {
+ world.add(this);
+ world.keyboardReceiver = this;
+ this.handle = new HandleMorph(
+ this,
+ 350,
+ 300,
+ this.corner,
+ this.corner
+ );
+ this.setCenter(world.center());
+ this.edit();
+ }
+};
+
+// ProjectDialogMorph source buttons
+
+ProjectDialogMorph.prototype.addSourceButton = function (
+ source,
+ label,
+ symbol
+) {
+ var myself = this,
+ lbl1 = new StringMorph(
+ label,
+ 10,
+ null,
+ true,
+ null,
+ null,
+ new Point(1, 1),
+ new Color(255, 255, 255)
+ ),
+ lbl2 = new StringMorph(
+ label,
+ 10,
+ null,
+ true,
+ null,
+ null,
+ new Point(-1, -1),
+ this.titleBarColor.darker(50),
+ new Color(255, 255, 255)
+ ),
+ l1 = new Morph(),
+ l2 = new Morph(),
+ button;
+
+ lbl1.add(new SymbolMorph(
+ symbol,
+ 24,
+ this.titleBarColor.darker(20),
+ new Point(1, 1),
+ this.titleBarColor.darker(50)
+ ));
+ lbl1.children[0].setCenter(lbl1.center());
+ lbl1.children[0].setBottom(lbl1.top() - this.padding / 2);
+
+ l1.image = lbl1.fullImage();
+ l1.bounds = lbl1.fullBounds();
+
+ lbl2.add(new SymbolMorph(
+ symbol,
+ 24,
+ new Color(255, 255, 255),
+ new Point(-1, -1),
+ this.titleBarColor.darker(50)
+ ));
+ lbl2.children[0].setCenter(lbl2.center());
+ lbl2.children[0].setBottom(lbl2.top() - this.padding / 2);
+
+ l2.image = lbl2.fullImage();
+ l2.bounds = lbl2.fullBounds();
+
+ button = new ToggleButtonMorph(
+ null, //colors,
+ myself, // the ProjectDialog is the target
+ function () { // action
+ myself.setSource(source);
+ },
+ [l1, l2],
+ function () { // query
+ return myself.source === source;
+ }
+ );
+
+ button.corner = this.buttonCorner;
+ button.edge = this.buttonEdge;
+ button.outline = this.buttonOutline;
+ button.outlineColor = this.buttonOutlineColor;
+ button.outlineGradient = this.buttonOutlineGradient;
+ button.labelMinExtent = new Point(60, 0);
+ button.padding = this.buttonPadding;
+ button.contrast = this.buttonContrast;
+ button.pressColor = this.titleBarColor.darker(20);
+
+ button.drawNew();
+ button.fixLayout();
+ button.refresh();
+ this.srcBar.add(button);
+};
+
+// ProjectDialogMorph list field control
+
+ProjectDialogMorph.prototype.fixListFieldItemColors = function () {
+ // remember to always fixLayout() afterwards for the changes
+ // to take effect
+ var myself = this;
+ this.listField.contents.children[0].alpha = 0;
+ this.listField.contents.children[0].children.forEach(function (item) {
+ item.pressColor = myself.titleBarColor.darker(20);
+ item.color = new Color(0, 0, 0, 0);
+ item.noticesTransparentClick = true;
+ });
+};
+
+// ProjectDialogMorph ops
+
+ProjectDialogMorph.prototype.setSource = function (source) {
+ var myself = this,
+ msg;
+
+ this.source = source; //this.task === 'save' ? 'local' : source;
+ this.srcBar.children.forEach(function (button) {
+ button.refresh();
+ });
+ switch (this.source) {
+ case 'cloud':
+ msg = myself.ide.showMessage('Updating\nproject list...');
+ this.projectList = [];
+ SnapCloud.getProjectList(
+ function (projectList) {
+ myself.installCloudProjectList(projectList);
+ msg.destroy();
+ },
+ function (err, lbl) {
+ msg.destroy();
+ myself.ide.cloudError().call(null, err, lbl);
+ }
+ );
+ break;
+ case 'local':
+ this.projectList = this.getLocalProjectList();
+ break;
+ case 'examples':
+ this.projectList = [];
+ break;
+ }
+ this.listField.destroy();
+
+ this.listField = new ListMorph(
+ this.projectList,
+ this.projectList.length > 0 ?
+ function (element) {
+ return element.name;
+ } : null
+ );
+
+ this.fixListFieldItemColors();
+ this.listField.fixLayout = nop;
+ this.listField.edge = InputFieldMorph.prototype.edge;
+ this.listField.fontSize = InputFieldMorph.prototype.fontSize;
+ this.listField.typeInPadding = InputFieldMorph.prototype.typeInPadding;
+ this.listField.contrast = InputFieldMorph.prototype.contrast;
+ this.listField.drawNew = InputFieldMorph.prototype.drawNew;
+ this.listField.drawRectBorder = InputFieldMorph.prototype.drawRectBorder;
+
+ if (this.source === 'local') {
+ this.listField.action = function (item) {
+ var src, xml;
+
+ if (myself.nameField) {
+ myself.nameField.setContents(item.name || '');
+ }
+ if (myself.task === 'open') {
+
+ src = localStorage['-snap-project-' + item.name];
+ xml = myself.ide.serializer.parse(src);
+
+ myself.notesText.text = xml.childNamed('notes').contents
+ || '';
+ myself.notesText.drawNew();
+ myself.notesField.contents.adjustBounds();
+ myself.preview.texture = xml.childNamed('thumbnail').contents
+ || null;
+ myself.preview.cachedTexture = null;
+ myself.preview.drawNew();
+ }
+ myself.edit();
+ };
+ } else { // 'examples', 'cloud' is initialized elsewhere
+ this.listField.action = function (item) {
+ if (myself.nameField) {
+ myself.nameField.setContents(item.name || '');
+ }
+ if (myself.task === 'open') {
+ myself.notesText.text = item.notes || '';
+ myself.notesText.drawNew();
+ myself.notesField.contents.adjustBounds();
+ myself.preview.texture = item.thumb || null;
+ myself.preview.cachedTexture = null;
+ myself.preview.drawNew();
+ }
+ myself.edit();
+ };
+ }
+ this.body.add(this.listField);
+ this.fixLayout();
+ if (this.task === 'open') {
+ this.clearDetails();
+ }
+};
+
+ProjectDialogMorph.prototype.getLocalProjectList = function () {
+ var stored, name, dta,
+ projects = [];
+ for (stored in localStorage) {
+ if (localStorage.hasOwnProperty(stored)
+ && stored.substr(0, 14) === '-snap-project-') {
+ name = stored.substr(14);
+ dta = {
+ name: name,
+ thumb: null,
+ notes: null
+ };
+ projects.push(dta);
+ }
+ }
+ projects.sort(function (x, y) {
+ return x.name < y.name ? -1 : 1;
+ });
+ return projects;
+};
+
+ProjectDialogMorph.prototype.installCloudProjectList = function (pl) {
+ var myself = this;
+ this.projectList = pl || [];
+ this.projectList.sort(function (x, y) {
+ return x.ProjectName < y.ProjectName ? -1 : 1;
+ });
+
+ this.listField.destroy();
+ this.listField = new ListMorph(
+ this.projectList,
+ this.projectList.length > 0 ?
+ function (element) {
+ return element.ProjectName;
+ } : null
+ );
+
+ this.fixListFieldItemColors();
+ this.listField.fixLayout = nop;
+ this.listField.edge = InputFieldMorph.prototype.edge;
+ this.listField.fontSize = InputFieldMorph.prototype.fontSize;
+ this.listField.typeInPadding = InputFieldMorph.prototype.typeInPadding;
+ this.listField.contrast = InputFieldMorph.prototype.contrast;
+ this.listField.drawNew = InputFieldMorph.prototype.drawNew;
+ this.listField.drawRectBorder = InputFieldMorph.prototype.drawRectBorder;
+
+ this.listField.action = function (item) {
+ if (myself.nameField) {
+ myself.nameField.setContents(item.ProjectName || '');
+ }
+ if (myself.task === 'open') {
+ myself.notesText.text = item.Notes || '';
+ myself.notesText.drawNew();
+ myself.notesField.contents.adjustBounds();
+ myself.preview.texture = item.Thumbnail || null;
+ myself.preview.cachedTexture = null;
+ myself.preview.drawNew();
+ }
+ myself.edit();
+ };
+ this.body.add(this.listField);
+ this.fixLayout();
+ if (this.task === 'open') {
+ this.clearDetails();
+ }
+};
+
+ProjectDialogMorph.prototype.clearDetails = function () {
+ this.notesText.text = '';
+ this.notesText.drawNew();
+ this.notesField.contents.adjustBounds();
+ this.preview.texture = null;
+ this.preview.cachedTexture = null;
+ this.preview.drawNew();
+};
+
+ProjectDialogMorph.prototype.openProject = function () {
+ var myself = this;
+
+ if (this.source === 'cloud') {
+ if (this.listField.selected) {
+ this.openSelectedCloudProject();
+ }
+ } else { // 'local, examples'
+ if (this.listField.selected) {
+ myself.ide.source = 'local';
+ this.ide.openProject(this.listField.selected.name);
+ this.destroy();
+ }
+ }
+};
+
+ProjectDialogMorph.prototype.openSelectedCloudProject = function () {
+ var myself = this;
+ this.nextSteps([
+ function () {
+ myself.ide.showMessage('Fetching project\nfrom the cloud...');
+ },
+ function () {
+ myself.rawOpenSelectedCloudProject();
+ }
+ ]);
+};
+
+ProjectDialogMorph.prototype.rawOpenSelectedCloudProject = function () {
+ var myself = this;
+ SnapCloud.reconnect(
+ function () {
+ SnapCloud.callService(
+ 'getProject',
+ function (response) {
+ SnapCloud.disconnect();
+ myself.ide.source = 'cloud';
+ myself.ide.droppedText(response[0].SourceCode);
+ },
+ myself.ide.cloudError(),
+ [myself.listField.selected.ProjectName]
+ );
+ },
+ myself.ide.cloudError()
+ );
+ this.destroy();
+};
+
+ProjectDialogMorph.prototype.saveProject = function () {
+ var name = this.nameField.contents().text.text,
+ notes = this.notesText.text,
+ myself = this;
+
+ this.ide.projectNotes = notes || this.ide.projectNotes;
+ if (name) {
+ this.ide.setProjectName(name);
+ if (this.source === 'cloud') {
+ if (detect(
+ this.projectList,
+ function (item) {return item.ProjectName === name; }
+ )) {
+ this.ide.confirm(
+ localize(
+ 'Are you sure you want to replace'
+ ) + '\n"' + name + '"?',
+ 'Replace Project',
+ function () {
+ myself.saveCloudProject();
+ }
+
+ );
+ } else {
+ myself.saveCloudProject();
+ }
+ } else { // 'local'
+ if (detect(
+ this.projectList,
+ function (item) {return item.name === name; }
+ )) {
+ this.ide.confirm(
+ localize(
+ 'Are you sure you want to replace'
+ ) + '\n"' + name + '"?',
+ 'Replace Project',
+ function () {
+ myself.ide.source = 'local';
+ myself.ide.saveProject(name);
+ myself.destroy();
+ }
+ );
+ } else {
+ myself.ide.source = 'local';
+ this.ide.saveProject(name);
+ this.destroy();
+ }
+ }
+ }
+};
+
+ProjectDialogMorph.prototype.saveCloudProject = function () {
+ var myself = this;
+ this.ide.showMessage('Saving project\nto the cloud...');
+ SnapCloud.saveProject(
+ this.ide,
+ function () {
+ myself.ide.source = 'cloud';
+ myself.ide.showMessage('saved.', 2);
+ },
+ this.ide.cloudError()
+ );
+ this.destroy();
+};
+
+ProjectDialogMorph.prototype.deleteProject = function () {
+ var myself = this,
+ proj,
+ idx,
+ name;
+
+ if (this.source === 'cloud') {
+ proj = this.listField.selected;
+ if (proj) {
+ this.ide.confirm(
+ localize(
+ 'Are you sure you want to delete'
+ ) + '\n"' + proj.ProjectName + '"?',
+ 'Delete Project',
+ function () {
+ SnapCloud.reconnect(
+ function () {
+ SnapCloud.callService(
+ 'deleteProject',
+ function () {
+ SnapCloud.disconnect();
+ myself.ide.hasChangedMedia = true;
+ idx = myself.projectList.indexOf(proj);
+ myself.projectList.splice(idx, 1);
+ myself.installCloudProjectList(
+ myself.projectList
+ ); // refresh list
+ },
+ myself.ide.cloudError(),
+ [myself.listField.selected.ProjectName]
+ );
+ },
+ myself.ide.cloudError()
+ );
+ }
+ );
+ }
+ } else { // 'local, examples'
+ if (this.listField.selected) {
+ name = this.listField.selected.name;
+ this.ide.confirm(
+ localize(
+ 'Are you sure you want to delete'
+ ) + '\n"' + name + '"?',
+ 'Delete Project',
+ function () {
+ delete localStorage['-snap-project-' + name];
+ myself.setSource(myself.source); // refresh list
+ }
+ );
+ }
+ }
+};
+
+ProjectDialogMorph.prototype.edit = function () {
+ if (this.nameField) {
+ this.nameField.edit();
+ }
+};
+
+// ProjectDialogMorph layout
+
+ProjectDialogMorph.prototype.fixLayout = function () {
+ var th = fontHeight(this.titleFontSize) + this.titlePadding * 2,
+ thin = this.padding / 2,
+ oldFlag = Morph.prototype.trackChanges;
+
+ Morph.prototype.trackChanges = false;
+
+ if (this.buttons && (this.buttons.children.length > 0)) {
+ this.buttons.fixLayout();
+ }
+
+ if (this.body) {
+ this.body.setPosition(this.position().add(new Point(
+ this.padding,
+ th + this.padding
+ )));
+ this.body.setExtent(new Point(
+ this.width() - this.padding * 2,
+ this.height() - this.padding * 3 - th - this.buttons.height()
+ ));
+ this.srcBar.setPosition(this.body.position());
+ if (this.nameField) {
+ this.nameField.setWidth(
+ this.body.width() - this.srcBar.width() - this.padding * 6
+ );
+ this.nameField.setLeft(this.srcBar.right() + this.padding * 3);
+ this.nameField.setTop(this.srcBar.top());
+ this.nameField.drawNew();
+ }
+
+ this.listField.setLeft(this.srcBar.right() + this.padding);
+ this.listField.setWidth(
+ this.body.width()
+ - this.srcBar.width()
+ - this.preview.width()
+ - this.padding
+ - thin
+ );
+ this.listField.contents.children[0].adjustWidths();
+
+ if (this.nameField) {
+ this.listField.setTop(this.nameField.bottom() + this.padding);
+ this.listField.setHeight(
+ this.body.height() - this.nameField.height() - this.padding
+ );
+ } else {
+ this.listField.setTop(this.body.top());
+ this.listField.setHeight(this.body.height());
+ }
+
+ this.preview.setRight(this.body.right());
+ if (this.nameField) {
+ this.preview.setTop(this.nameField.bottom() + this.padding);
+ } else {
+ this.preview.setTop(this.body.top());
+ }
+
+ this.notesField.setTop(this.preview.bottom() + thin);
+ this.notesField.setLeft(this.preview.left());
+ this.notesField.setHeight(
+ this.body.bottom() - this.preview.bottom() - thin
+ );
+ }
+
+ if (this.label) {
+ this.label.setCenter(this.center());
+ this.label.setTop(this.top() + (th - this.label.height()) / 2);
+ }
+
+ if (this.buttons && (this.buttons.children.length > 0)) {
+ this.buttons.setCenter(this.center());
+ this.buttons.setBottom(this.bottom() - this.padding);
+ }
+
+ Morph.prototype.trackChanges = oldFlag;
+ this.changed();
+};
+
+// SpriteIconMorph ////////////////////////////////////////////////////
+
+/*
+ I am a selectable element in the Sprite corral, keeping a self-updating
+ thumbnail of the sprite I'm respresenting, and a self-updating label
+ of the sprite's name (in case it is changed elsewhere)
+*/
+
+// SpriteIconMorph inherits from ToggleButtonMorph (Widgets)
+
+SpriteIconMorph.prototype = new ToggleButtonMorph();
+SpriteIconMorph.prototype.constructor = SpriteIconMorph;
+SpriteIconMorph.uber = ToggleButtonMorph.prototype;
+
+// SpriteIconMorph settings
+
+SpriteIconMorph.prototype.thumbSize = new Point(40, 40);
+SpriteIconMorph.prototype.labelShadowOffset = null;
+SpriteIconMorph.prototype.labelShadowColor = null;
+SpriteIconMorph.prototype.labelColor = new Color(255, 255, 255);
+SpriteIconMorph.prototype.fontSize = 9;
+
+// SpriteIconMorph instance creation:
+
+function SpriteIconMorph(aSprite, aTemplate) {
+ this.init(aSprite, aTemplate);
+}
+
+SpriteIconMorph.prototype.init = function (aSprite, aTemplate) {
+ var colors, action, query, myself = this;
+
+ if (!aTemplate) {
+ colors = [
+ IDE_Morph.prototype.groupColor,
+ IDE_Morph.prototype.frameColor,
+ IDE_Morph.prototype.frameColor
+ ];
+
+ }
+
+ action = function () {
+ // make my sprite the current one
+ var ide = myself.parentThatIsA(IDE_Morph);
+
+ if (ide) {
+ ide.selectSprite(myself.object);
+ }
+ };
+
+ query = function () {
+ // answer true if my sprite is the current one
+ var ide = myself.parentThatIsA(IDE_Morph);
+
+ if (ide) {
+ return ide.currentSprite === myself.object;
+ }
+ return false;
+ };
+
+ // additional properties:
+ this.object = aSprite || new SpriteMorph(); // mandatory, actually
+ this.version = this.object.version;
+ this.thumbnail = null;
+
+ // initialize inherited properties:
+ SpriteIconMorph.uber.init.call(
+ this,
+ colors, // color overrides, <array>: [normal, highlight, pressed]
+ null, // target - not needed here
+ action, // a toggle function
+ this.object.name, // label string
+ query, // predicate/selector
+ null, // environment
+ null, // hint
+ aTemplate // optional, for cached background images
+ );
+
+ // override defaults and build additional components
+ this.isDraggable = true;
+ this.createThumbnail();
+ this.padding = 2;
+ this.corner = 8;
+ this.fixLayout();
+ this.fps = 1;
+};
+
+SpriteIconMorph.prototype.createThumbnail = function () {
+ if (this.thumbnail) {
+ this.thumbnail.destroy();
+ }
+
+ this.thumbnail = new Morph();
+ this.thumbnail.setExtent(this.thumbSize);
+ this.thumbnail.image = this.object.thumbnail(this.thumbSize);
+ this.add(this.thumbnail);
+};
+
+SpriteIconMorph.prototype.createLabel = function () {
+ var txt;
+
+ if (this.label) {
+ this.label.destroy();
+ }
+ txt = new StringMorph(
+ this.object.name,
+ this.fontSize,
+ this.fontStyle,
+ true,
+ false,
+ false,
+ this.labelShadowOffset,
+ this.labelShadowColor,
+ this.labelColor
+ );
+
+ this.label = new FrameMorph();
+ this.label.acceptsDrops = false;
+ this.label.alpha = 0;
+ this.label.setExtent(txt.extent());
+ txt.setPosition(this.label.position());
+ this.label.add(txt);
+ this.add(this.label);
+};
+
+// SpriteIconMorph stepping
+
+SpriteIconMorph.prototype.step = function () {
+ if (this.version !== this.object.version) {
+ this.createThumbnail();
+ this.createLabel();
+ this.fixLayout();
+ this.version = this.object.version;
+ this.refresh();
+ }
+};
+
+// SpriteIconMorph layout
+
+SpriteIconMorph.prototype.fixLayout = function () {
+ if (!this.thumbnail) {return null; }
+
+ this.setWidth(
+ this.thumbnail.width()
+ + this.outline * 2
+ + this.edge * 2
+ + this.padding * 2
+ );
+
+ this.setHeight(
+ this.thumbnail.height()
+ + this.outline * 2
+ + this.edge * 2
+ + this.padding * 3
+ + this.label.height()
+ );
+
+ this.thumbnail.setCenter(this.center());
+ this.thumbnail.setTop(
+ this.top() + this.outline + this.edge + this.padding
+ );
+
+ this.label.setWidth(
+ Math.min(
+ this.label.children[0].width(), // the actual text
+ this.thumbnail.width()
+ )
+ );
+ this.label.setCenter(this.center());
+ this.label.setTop(
+ this.thumbnail.bottom() + this.padding
+ );
+};
+
+// SpriteIconMorph menu
+
+SpriteIconMorph.prototype.userMenu = function () {
+ var menu = new MenuMorph(this);
+ if (!(this.object instanceof SpriteMorph)) {return null; }
+ menu.addItem("show", 'showSpriteOnStage');
+ menu.addLine();
+ menu.addItem("duplicate", 'duplicateSprite');
+ menu.addItem("delete", 'removeSprite');
+ menu.addLine();
+ menu.addItem("export...", 'exportSprite');
+ return menu;
+};
+
+SpriteIconMorph.prototype.duplicateSprite = function () {
+ var ide = this.parentThatIsA(IDE_Morph);
+ if (ide) {
+ ide.duplicateSprite(this.object);
+ }
+};
+
+SpriteIconMorph.prototype.removeSprite = function () {
+ var ide = this.parentThatIsA(IDE_Morph);
+ if (ide) {
+ ide.removeSprite(this.object);
+ }
+};
+
+SpriteIconMorph.prototype.exportSprite = function () {
+ this.object.exportSprite();
+};
+
+SpriteIconMorph.prototype.showSpriteOnStage = function () {
+ this.object.showOnStage();
+};
+
+// SpriteIconMorph drawing
+
+SpriteIconMorph.prototype.createBackgrounds = function () {
+// only draw the edges if I am selected
+ var context,
+ ext = this.extent();
+
+ if (this.template) { // take the backgrounds images from the template
+ this.image = this.template.image;
+ this.normalImage = this.template.normalImage;
+ this.highlightImage = this.template.highlightImage;
+ this.pressImage = this.template.pressImage;
+ return null;
+ }
+
+ this.normalImage = newCanvas(ext);
+ context = this.normalImage.getContext('2d');
+ this.drawBackground(context, this.color);
+
+ this.highlightImage = newCanvas(ext);
+ context = this.highlightImage.getContext('2d');
+ this.drawBackground(context, this.highlightColor);
+
+ this.pressImage = newCanvas(ext);
+ context = this.pressImage.getContext('2d');
+ this.drawOutline(context);
+ this.drawBackground(context, this.pressColor);
+ this.drawEdges(
+ context,
+ this.pressColor,
+ this.pressColor.lighter(this.contrast),
+ this.pressColor.darker(this.contrast)
+ );
+
+ this.image = this.normalImage;
+};
+
+// SpriteIconMorph drag & drop
+
+SpriteIconMorph.prototype.prepareToBeGrabbed = function () {
+ var ide = this.parentThatIsA(IDE_Morph),
+ idx;
+ this.mouseClickLeft(); // select me
+ if (ide) {
+ idx = ide.sprites.asArray().indexOf(this.object);
+ ide.sprites.remove(idx + 1);
+ ide.createCorral();
+ ide.fixLayout();
+ }
+};
+
+SpriteIconMorph.prototype.wantsDropOf = function (morph) {
+ // allow scripts & media to be copied from one sprite to another
+ // by drag & drop
+ return morph instanceof BlockMorph
+ || (morph instanceof CostumeIconMorph)
+ || (morph instanceof SoundIconMorph);
+};
+
+SpriteIconMorph.prototype.reactToDropOf = function (morph, hand) {
+ if (morph instanceof BlockMorph) {
+ this.copyStack(morph);
+ } else if (morph instanceof CostumeIconMorph) {
+ this.copyCostume(morph.object);
+ } else if (morph instanceof SoundIconMorph) {
+ this.copySound(morph.object);
+ }
+ this.world().add(morph);
+ morph.slideBackTo(hand.grabOrigin);
+};
+
+SpriteIconMorph.prototype.copyStack = function (block) {
+ var dup = block.fullCopy(),
+ y = Math.max(this.object.scripts.children.map(function (stack) {
+ return stack.fullBounds().bottom();
+ }).concat([this.object.scripts.top()]));
+
+ dup.setPosition(new Point(this.object.scripts.left() + 20, y + 20));
+ this.object.scripts.add(dup);
+ this.object.scripts.adjustBounds();
+
+ // delete all custom blocks pointing to local definitions
+ // under construction...
+ dup.allChildren().forEach(function (morph) {
+ if (morph.definition && !morph.definition.isGlobal) {
+ morph.deleteBlock();
+ }
+ });
+};
+
+SpriteIconMorph.prototype.copyCostume = function (costume) {
+ var dup = costume.copy();
+ this.object.addCostume(dup);
+ this.object.wearCostume(dup);
+};
+
+SpriteIconMorph.prototype.copySound = function (sound) {
+ var dup = sound.copy();
+ this.object.addSound(dup.audio, dup.name);
+};
+
+// CostumeIconMorph ////////////////////////////////////////////////////
+
+/*
+ I am a selectable element in the SpriteEditor's "Costumes" tab, keeping
+ a self-updating thumbnail of the costume I'm respresenting, and a
+ self-updating label of the costume's name (in case it is changed
+ elsewhere)
+*/
+
+// CostumeIconMorph inherits from ToggleButtonMorph (Widgets)
+// ... and copies methods from SpriteIconMorph
+
+CostumeIconMorph.prototype = new ToggleButtonMorph();
+CostumeIconMorph.prototype.constructor = CostumeIconMorph;
+CostumeIconMorph.uber = ToggleButtonMorph.prototype;
+
+// CostumeIconMorph settings
+
+CostumeIconMorph.prototype.thumbSize = new Point(80, 60);
+CostumeIconMorph.prototype.labelShadowOffset = null;
+CostumeIconMorph.prototype.labelShadowColor = null;
+CostumeIconMorph.prototype.labelColor = new Color(255, 255, 255);
+CostumeIconMorph.prototype.fontSize = 9;
+
+// CostumeIconMorph instance creation:
+
+function CostumeIconMorph(aCostume, aTemplate) {
+ this.init(aCostume, aTemplate);
+}
+
+CostumeIconMorph.prototype.init = function (aCostume, aTemplate) {
+ var colors, action, query, myself = this;
+
+ if (!aTemplate) {
+ colors = [
+ IDE_Morph.prototype.groupColor,
+ IDE_Morph.prototype.frameColor,
+ IDE_Morph.prototype.frameColor
+ ];
+
+ }
+
+ action = function () {
+ // make my costume the current one
+ var ide = myself.parentThatIsA(IDE_Morph),
+ wardrobe = myself.parentThatIsA(WardrobeMorph);
+
+ if (ide) {
+ ide.currentSprite.wearCostume(myself.object);
+ }
+ if (wardrobe) {
+ wardrobe.updateSelection();
+ }
+ };
+
+ query = function () {
+ // answer true if my costume is the current one
+ var ide = myself.parentThatIsA(IDE_Morph);
+
+ if (ide) {
+ return ide.currentSprite.costume === myself.object;
+ }
+ return false;
+ };
+
+ // additional properties:
+ this.object = aCostume || new Costume(); // mandatory, actually
+ this.version = this.object.version;
+ this.thumbnail = null;
+
+ // initialize inherited properties:
+ CostumeIconMorph.uber.init.call(
+ this,
+ colors, // color overrides, <array>: [normal, highlight, pressed]
+ null, // target - not needed here
+ action, // a toggle function
+ this.object.name, // label string
+ query, // predicate/selector
+ null, // environment
+ null, // hint
+ aTemplate // optional, for cached background images
+ );
+
+ // override defaults and build additional components
+ this.isDraggable = true;
+ this.createThumbnail();
+ this.padding = 2;
+ this.corner = 8;
+ this.fixLayout();
+ this.fps = 1;
+};
+
+CostumeIconMorph.prototype.createThumbnail
+ = SpriteIconMorph.prototype.createThumbnail;
+
+CostumeIconMorph.prototype.createLabel
+ = SpriteIconMorph.prototype.createLabel;
+
+// CostumeIconMorph stepping
+
+CostumeIconMorph.prototype.step
+ = SpriteIconMorph.prototype.step;
+
+// CostumeIconMorph layout
+
+CostumeIconMorph.prototype.fixLayout
+ = SpriteIconMorph.prototype.fixLayout;
+
+// CostumeIconMorph menu
+
+CostumeIconMorph.prototype.userMenu = function () {
+ var menu = new MenuMorph(this);
+ if (!(this.object instanceof Costume)) {return null; }
+ menu.addItem("edit", 'editCostume');
+ menu.addItem("rename", 'renameCostume');
+ menu.addItem("delete", 'removeCostume');
+ menu.addItem("export", 'exportCostume');
+ return menu;
+};
+
+CostumeIconMorph.prototype.editCostume = function () {
+ var ide = this.parentThatIsA(IDE_Morph);
+ this.object.edit(this.world());
+ ide.hasChangedMedia = true;
+};
+
+CostumeIconMorph.prototype.renameCostume = function () {
+ var costume = this.object,
+ ide = this.parentThatIsA(IDE_Morph);
+ (new DialogBoxMorph(
+ null,
+ function (answer) {
+ if (answer && (answer !== costume.name)) {
+ costume.name = answer;
+ costume.version = Date.now();
+ ide.hasChangedMedia = true;
+ }
+ }
+ )).prompt(
+ 'rename costume',
+ costume.name,
+ this.world()
+ );
+};
+
+CostumeIconMorph.prototype.removeCostume = function () {
+ var wardrobe = this.parentThatIsA(WardrobeMorph),
+ idx = this.parent.children.indexOf(this),
+ ide = this.parentThatIsA(IDE_Morph);
+ wardrobe.removeCostumeAt(idx - 1);
+ if (ide.currentSprite.costume === this.object) {
+ ide.currentSprite.wearCostume(null);
+ }
+};
+
+CostumeIconMorph.prototype.exportCostume = function () {
+ if (this.object instanceof SVG_Costume) {
+ window.open(this.object.contents.src);
+ } else { // rastered Costume
+ window.open(this.object.contents.toDataURL());
+ }
+};
+
+// CostumeIconMorph drawing
+
+CostumeIconMorph.prototype.createBackgrounds
+ = SpriteIconMorph.prototype.createBackgrounds;
+
+// CostumeIconMorph drag & drop
+
+CostumeIconMorph.prototype.prepareToBeGrabbed = function () {
+ this.mouseClickLeft(); // select me
+ this.removeCostume();
+};
+
+// TurtleIconMorph ////////////////////////////////////////////////////
+
+/*
+ I am a selectable element in the SpriteEditor's "Costumes" tab, keeping
+ a thumbnail of the sprite's or stage's default "Turtle" costume.
+*/
+
+// TurtleIconMorph inherits from ToggleButtonMorph (Widgets)
+// ... and copies methods from SpriteIconMorph
+
+TurtleIconMorph.prototype = new ToggleButtonMorph();
+TurtleIconMorph.prototype.constructor = TurtleIconMorph;
+TurtleIconMorph.uber = ToggleButtonMorph.prototype;
+
+// TurtleIconMorph settings
+
+TurtleIconMorph.prototype.thumbSize = new Point(80, 60);
+TurtleIconMorph.prototype.labelShadowOffset = null;
+TurtleIconMorph.prototype.labelShadowColor = null;
+TurtleIconMorph.prototype.labelColor = new Color(255, 255, 255);
+TurtleIconMorph.prototype.fontSize = 9;
+
+// TurtleIconMorph instance creation:
+
+function TurtleIconMorph(aSpriteOrStage, aTemplate) {
+ this.init(aSpriteOrStage, aTemplate);
+}
+
+TurtleIconMorph.prototype.init = function (aSpriteOrStage, aTemplate) {
+ var colors, action, query, myself = this;
+
+ if (!aTemplate) {
+ colors = [
+ IDE_Morph.prototype.groupColor,
+ IDE_Morph.prototype.frameColor,
+ IDE_Morph.prototype.frameColor
+ ];
+
+ }
+
+ action = function () {
+ // make my costume the current one
+ var ide = myself.parentThatIsA(IDE_Morph),
+ wardrobe = myself.parentThatIsA(WardrobeMorph);
+
+ if (ide) {
+ ide.currentSprite.wearCostume(null);
+ }
+ if (wardrobe) {
+ wardrobe.updateSelection();
+ }
+ };
+
+ query = function () {
+ // answer true if my costume is the current one
+ var ide = myself.parentThatIsA(IDE_Morph);
+
+ if (ide) {
+ return ide.currentSprite.costume === null;
+ }
+ return false;
+ };
+
+ // additional properties:
+ this.object = aSpriteOrStage; // mandatory, actually
+ this.version = this.object.version;
+ this.thumbnail = null;
+
+ // initialize inherited properties:
+ TurtleIconMorph.uber.init.call(
+ this,
+ colors, // color overrides, <array>: [normal, highlight, pressed]
+ null, // target - not needed here
+ action, // a toggle function
+ 'default', // label string
+ query, // predicate/selector
+ null, // environment
+ null, // hint
+ aTemplate // optional, for cached background images
+ );
+
+ // override defaults and build additional components
+ this.isDraggable = false;
+ this.createThumbnail();
+ this.padding = 2;
+ this.corner = 8;
+ this.fixLayout();
+};
+
+TurtleIconMorph.prototype.createThumbnail = function () {
+ if (this.thumbnail) {
+ this.thumbnail.destroy();
+ }
+ if (this.object instanceof SpriteMorph) {
+ this.thumbnail = new SymbolMorph(
+ 'turtle',
+ this.thumbSize.y,
+ this.labelColor,
+ new Point(-1, -1),
+ new Color(0, 0, 0)
+ );
+ } else {
+ this.thumbnail = new SymbolMorph(
+ 'stage',
+ this.thumbSize.y,
+ this.labelColor,
+ new Point(-1, -1),
+ new Color(0, 0, 0)
+ );
+ }
+ this.add(this.thumbnail);
+};
+
+TurtleIconMorph.prototype.createLabel = function () {
+ var txt;
+
+ if (this.label) {
+ this.label.destroy();
+ }
+ txt = new StringMorph(
+ localize(
+ this.object instanceof SpriteMorph ? 'Turtle' : 'Empty'
+ ),
+ this.fontSize,
+ this.fontStyle,
+ true,
+ false,
+ false,
+ this.labelShadowOffset,
+ this.labelShadowColor,
+ this.labelColor
+ );
+
+ this.label = new FrameMorph();
+ this.label.acceptsDrops = false;
+ this.label.alpha = 0;
+ this.label.setExtent(txt.extent());
+ txt.setPosition(this.label.position());
+ this.label.add(txt);
+ this.add(this.label);
+};
+
+// TurtleIconMorph layout
+
+TurtleIconMorph.prototype.fixLayout
+ = SpriteIconMorph.prototype.fixLayout;
+
+// TurtleIconMorph drawing
+
+TurtleIconMorph.prototype.createBackgrounds
+ = SpriteIconMorph.prototype.createBackgrounds;
+
+// TurtleIconMorph user menu
+
+TurtleIconMorph.prototype.userMenu = function () {
+ var myself = this,
+ menu = new MenuMorph(this, 'pen'),
+ on = '\u25CF',
+ off = '\u25CB';
+ if (this.object instanceof StageMorph) {
+ return null;
+ }
+ menu.addItem(
+ (this.object.penPoint === 'tip' ? on : off) + ' ' + localize('tip'),
+ function () {
+ myself.object.penPoint = 'tip';
+ myself.object.changed();
+ myself.object.drawNew();
+ myself.object.changed();
+ }
+ );
+ menu.addItem(
+ (this.object.penPoint === 'middle' ? on : off) + ' ' + localize(
+ 'middle'
+ ),
+ function () {
+ myself.object.penPoint = 'middle';
+ myself.object.changed();
+ myself.object.drawNew();
+ myself.object.changed();
+ }
+ );
+ return menu;
+};
+
+// WardrobeMorph ///////////////////////////////////////////////////////
+
+// I am a watcher on a sprite's costume list
+
+// WardrobeMorph inherits from ScrollFrameMorph
+
+WardrobeMorph.prototype = new ScrollFrameMorph();
+WardrobeMorph.prototype.constructor = WardrobeMorph;
+WardrobeMorph.uber = ScrollFrameMorph.prototype;
+
+// WardrobeMorph settings
+
+// ... to follow ...
+
+// WardrobeMorph instance creation:
+
+function WardrobeMorph(aSprite, sliderColor) {
+ this.init(aSprite, sliderColor);
+}
+
+WardrobeMorph.prototype.init = function (aSprite, sliderColor) {
+ // additional properties
+ this.sprite = aSprite || new SpriteMorph();
+ this.costumesVersion = null;
+ this.spriteVersion = null;
+
+ // initialize inherited properties
+ WardrobeMorph.uber.init.call(this, null, null, sliderColor);
+
+ // configure inherited properties
+ this.fps = 2;
+ this.updateList();
+};
+
+// Wardrobe updating
+
+WardrobeMorph.prototype.updateList = function () {
+ var myself = this,
+ x = this.left() + 5,
+ y = this.top() + 5,
+ padding = 4,
+ oldFlag = Morph.prototype.trackChanges,
+ oldPos = this.contents.position(),
+ icon,
+ template,
+ txt;
+
+ this.changed();
+ oldFlag = Morph.prototype.trackChanges;
+ Morph.prototype.trackChanges = false;
+
+ this.contents.destroy();
+ this.contents = new FrameMorph(this);
+ this.contents.acceptsDrops = false;
+ this.contents.reactToDropOf = function (icon) {
+ myself.reactToDropOf(icon);
+ };
+ this.addBack(this.contents);
+
+ icon = new TurtleIconMorph(this.sprite);
+ icon.setPosition(new Point(x, y));
+ myself.addContents(icon);
+ y = icon.bottom() + padding;
+
+ txt = new TextMorph(localize(
+ 'costumes tab help' // look up long string in translator
+ ));
+ txt.fontSize = 9;
+ txt.setColor(new Color(230, 230, 230));
+ txt.setPosition(new Point(x, y));
+ this.addContents(txt);
+ y = txt.bottom() + padding;
+
+ this.sprite.costumes.asArray().forEach(function (costume) {
+ template = icon = new CostumeIconMorph(costume, template);
+ icon.setPosition(new Point(x, y));
+ myself.addContents(icon);
+ y = icon.bottom() + padding;
+ });
+ this.costumesVersion = this.sprite.costumes.lastChanged;
+
+ this.contents.setPosition(oldPos);
+ this.adjustScrollBars();
+ Morph.prototype.trackChanges = oldFlag;
+ this.changed();
+
+ this.updateSelection();
+};
+
+WardrobeMorph.prototype.updateSelection = function () {
+ this.contents.children.forEach(function (morph) {
+ if (morph.refresh) {morph.refresh(); }
+ });
+ this.spriteVersion = this.sprite.version;
+};
+
+// Wardrobe stepping
+
+WardrobeMorph.prototype.step = function () {
+ if (this.costumesVersion !== this.sprite.costumes.lastChanged) {
+ this.updateList();
+ }
+ if (this.spriteVersion !== this.sprite.version) {
+ this.updateSelection();
+ }
+};
+
+// Wardrobe ops
+
+WardrobeMorph.prototype.removeCostumeAt = function (idx) {
+ this.sprite.costumes.remove(idx);
+ this.updateList();
+};
+
+// Wardrobe drag & drop
+
+WardrobeMorph.prototype.wantsDropOf = function (morph) {
+ return morph instanceof CostumeIconMorph;
+};
+
+WardrobeMorph.prototype.reactToDropOf = function (icon) {
+ var idx = 0,
+ costume = icon.object,
+ top = icon.top();
+
+ icon.destroy();
+ this.contents.children.forEach(function (item) {
+ if (item instanceof CostumeIconMorph && item.top() < top - 4) {
+ idx += 1;
+ }
+ });
+ this.sprite.costumes.add(costume, idx + 1);
+ this.updateList();
+};
+
+// SoundIconMorph ///////////////////////////////////////////////////////
+
+/*
+ I am an element in the SpriteEditor's "Sounds" tab.
+*/
+
+// SoundIconMorph inherits from ToggleButtonMorph (Widgets)
+// ... and copies methods from SpriteIconMorph
+
+SoundIconMorph.prototype = new ToggleButtonMorph();
+SoundIconMorph.prototype.constructor = SoundIconMorph;
+SoundIconMorph.uber = ToggleButtonMorph.prototype;
+
+// SoundIconMorph settings
+
+SoundIconMorph.prototype.thumbSize = new Point(80, 60);
+SoundIconMorph.prototype.labelShadowOffset = null;
+SoundIconMorph.prototype.labelShadowColor = null;
+SoundIconMorph.prototype.labelColor = new Color(255, 255, 255);
+SoundIconMorph.prototype.fontSize = 9;
+
+// SoundIconMorph instance creation:
+
+function SoundIconMorph(aSound, aTemplate) {
+ this.init(aSound, aTemplate);
+}
+
+SoundIconMorph.prototype.init = function (aSound, aTemplate) {
+ var colors, action, query;
+
+ if (!aTemplate) {
+ colors = [
+ IDE_Morph.prototype.groupColor,
+ IDE_Morph.prototype.frameColor,
+ IDE_Morph.prototype.frameColor
+ ];
+
+ }
+
+ action = function () {
+ nop(); // When I am selected (which is never the case for sounds)
+ };
+
+ query = function () {
+ return false;
+ };
+
+ // additional properties:
+ this.object = aSound; // mandatory, actually
+ this.version = this.object.version;
+ this.thumbnail = null;
+
+ // initialize inherited properties:
+ SoundIconMorph.uber.init.call(
+ this,
+ colors, // color overrides, <array>: [normal, highlight, pressed]
+ null, // target - not needed here
+ action, // a toggle function
+ this.object.name, // label string
+ query, // predicate/selector
+ null, // environment
+ null, // hint
+ aTemplate // optional, for cached background images
+ );
+
+ // override defaults and build additional components
+ this.isDraggable = true;
+ this.createThumbnail();
+ this.padding = 2;
+ this.corner = 8;
+ this.fixLayout();
+ this.fps = 1;
+};
+
+SoundIconMorph.prototype.createThumbnail = function () {
+ var label, btnColor, btnLabelColor;
+ if (this.thumbnail) {
+ this.thumbnail.destroy();
+ }
+ this.thumbnail = new Morph();
+ this.thumbnail.setExtent(this.thumbSize);
+ this.add(this.thumbnail);
+ label = new StringMorph(
+ this.createInfo(),
+ '16',
+ '',
+ true,
+ false,
+ false,
+ this.labelShadowOffset,
+ this.labelShadowColor,
+ new Color(200, 200, 200)
+ );
+ this.thumbnail.add(label);
+ label.setCenter(new Point(40, 15));
+
+ this.button = new PushButtonMorph(
+ this,
+ 'toggleAudioPlaying',
+ (this.object.previewAudio ? 'Stop' : 'Play')
+ );
+ btnLabelColor = new Color(110, 100, 110);
+ btnColor = new Color(220, 220, 220);
+ this.button.drawNew();
+ this.button.hint = 'Play sound';
+ this.button.fixLayout();
+ this.thumbnail.add(this.button);
+ this.button.setCenter(new Point(40, 40));
+};
+
+SoundIconMorph.prototype.createInfo = function () {
+ var dur = Math.round(this.object.audio.duration || 0),
+ mod = dur % 60;
+ return Math.floor(dur / 60).toString()
+ + ":"
+ + (mod < 10 ? "0" : "")
+ + mod.toString();
+};
+
+SoundIconMorph.prototype.toggleAudioPlaying = function () {
+ var myself = this;
+ if (!this.object.previewAudio) {
+ //Audio is not playing
+ this.button.labelString = 'Stop';
+ this.button.hint = 'Stop sound';
+ this.object.previewAudio = this.object.play();
+ this.object.previewAudio.addEventListener('ended', function () {
+ myself.audioHasEnded();
+ }, false);
+ } else {
+ //Audio is currently playing
+ this.button.labelString = 'Play';
+ this.button.hint = 'Play sound';
+ this.object.previewAudio.pause();
+ this.object.previewAudio.terminated = true;
+ this.object.previewAudio = null;
+ }
+ this.button.createLabel();
+};
+
+SoundIconMorph.prototype.audioHasEnded = function () {
+ this.button.trigger();
+ this.button.mouseLeave();
+};
+
+SoundIconMorph.prototype.createLabel
+ = SpriteIconMorph.prototype.createLabel;
+
+// SoundIconMorph stepping
+
+/*
+SoundIconMorph.prototype.step
+ = SpriteIconMorph.prototype.step;
+*/
+
+// SoundIconMorph layout
+
+SoundIconMorph.prototype.fixLayout
+ = SpriteIconMorph.prototype.fixLayout;
+
+// SoundIconMorph menu
+
+SoundIconMorph.prototype.userMenu = function () {
+ var menu = new MenuMorph(this);
+ if (!(this.object instanceof Sound)) { return null; }
+ menu.addItem('rename', 'renameSound');
+ menu.addItem('delete', 'removeSound');
+ return menu;
+};
+
+
+SoundIconMorph.prototype.renameSound = function () {
+ var sound = this.object,
+ ide = this.parentThatIsA(IDE_Morph),
+ myself = this;
+ (new DialogBoxMorph(
+ null,
+ function (answer) {
+ if (answer && (answer !== sound.name)) {
+ sound.name = answer;
+ sound.version = Date.now();
+ myself.createLabel(); // can be omitted once I'm stepping
+ myself.fixLayout(); // can be omitted once I'm stepping
+ ide.hasChangedMedia = true;
+ }
+ }
+ )).prompt(
+ 'rename sound',
+ sound.name,
+ this.world()
+ );
+};
+
+SoundIconMorph.prototype.removeSound = function () {
+ var jukebox = this.parentThatIsA(JukeboxMorph),
+ idx = this.parent.children.indexOf(this);
+ jukebox.removeSound(idx);
+};
+
+SoundIconMorph.prototype.createBackgrounds
+ = SpriteIconMorph.prototype.createBackgrounds;
+
+SoundIconMorph.prototype.createLabel
+ = SpriteIconMorph.prototype.createLabel;
+
+// SoundIconMorph drag & drop
+
+SoundIconMorph.prototype.prepareToBeGrabbed = function () {
+ this.removeSound();
+};
+
+// JukeboxMorph /////////////////////////////////////////////////////
+
+/*
+ I am JukeboxMorph, like WardrobeMorph, but for sounds
+*/
+
+// JukeboxMorph instance creation
+
+JukeboxMorph.prototype = new ScrollFrameMorph();
+JukeboxMorph.prototype.constructor = JukeboxMorph;
+JukeboxMorph.uber = ScrollFrameMorph.prototype;
+
+function JukeboxMorph(aSprite, sliderColor) {
+ this.init(aSprite, sliderColor);
+}
+
+JukeboxMorph.prototype.init = function (aSprite, sliderColor) {
+ // additional properties
+ this.sprite = aSprite || new SpriteMorph();
+ this.costumesVersion = null;
+ this.spriteVersion = null;
+
+ // initialize inherited properties
+ JukeboxMorph.uber.init.call(this, null, null, sliderColor);
+
+ // configure inherited properties
+ this.acceptsDrops = false;
+ this.fps = 2;
+ this.updateList();
+};
+
+// Jukebox updating
+
+JukeboxMorph.prototype.updateList = function () {
+ var myself = this,
+ x = this.left() + 5,
+ y = this.top() + 5,
+ padding = 4,
+ oldFlag = Morph.prototype.trackChanges,
+ icon,
+ template,
+ txt;
+
+ this.changed();
+ oldFlag = Morph.prototype.trackChanges;
+ Morph.prototype.trackChanges = false;
+
+ this.contents.destroy();
+ this.contents = new FrameMorph(this);
+ this.contents.acceptsDrops = false;
+ this.contents.reactToDropOf = function (icon) {
+ myself.reactToDropOf(icon);
+ };
+ this.addBack(this.contents);
+
+ txt = new TextMorph(localize(
+ 'import a sound from your computer\nby dragging it into here'
+ ));
+ txt.fontSize = 9;
+ txt.setColor(new Color(230, 230, 230));
+ txt.setPosition(new Point(x, y));
+ this.addContents(txt);
+ y = txt.bottom() + padding;
+
+ this.sprite.sounds.asArray().forEach(function (sound) {
+ template = icon = new SoundIconMorph(sound, template);
+ icon.setPosition(new Point(x, y));
+ myself.addContents(icon);
+ y = icon.bottom() + padding;
+ });
+
+ Morph.prototype.trackChanges = oldFlag;
+ this.changed();
+
+ this.updateSelection();
+};
+
+JukeboxMorph.prototype.updateSelection = function () {
+ this.contents.children.forEach(function (morph) {
+ if (morph.refresh) {morph.refresh(); }
+ });
+ this.spriteVersion = this.sprite.version;
+};
+
+// Jukebox stepping
+
+/*
+JukeboxMorph.prototype.step = function () {
+ if (this.spriteVersion !== this.sprite.version) {
+ this.updateSelection();
+ }
+};
+*/
+
+// Jukebox ops
+
+JukeboxMorph.prototype.removeSound = function (idx) {
+ this.sprite.sounds.remove(idx);
+ this.updateList();
+};
+
+// Jukebox drag & drop
+
+JukeboxMorph.prototype.wantsDropOf = function (morph) {
+ return morph instanceof SoundIconMorph;
+};
+
+JukeboxMorph.prototype.reactToDropOf = function (icon) {
+ var idx = 0,
+ costume = icon.object,
+ top = icon.top();
+
+ icon.destroy();
+ this.contents.children.forEach(function (item) {
+ if (item.top() < top - 4) {
+ idx += 1;
+ }
+ });
+ this.sprite.sounds.add(costume, idx);
+ this.updateList();
+}; \ No newline at end of file
generated by cgit v1.3.1 (git 2.54.0) at 2026-08-02 17:55:00 +0000