diff --git a/gui.js b/gui.js index c330012d71..b819f5c6ac 100644 --- a/gui.js +++ b/gui.js @@ -2597,69 +2597,6 @@ IDE_Morph.prototype.projectMenu = function () { }; } - function importMediaDialog(mediaType) { - var dialog = new DialogBoxMorph().withKey('import' + mediaType), - frame = new ScrollFrameMorph(), - size = 500, - padding = 4, x = padding, y = padding, - selectedIcon = null, - turtle = new SymbolMorph('turtle', 60), - items = myself.getMediaList(mediaType); - - frame.padding = 6; - frame.setWidth(size); - frame.acceptsDrops = false; - frame.contents.acceptsDrops = false; - frame.setHeight(size); - frame.fixLayout = nop; - - items.forEach(function (item) { - var url = myself.resourceURL(mediaType, item.file), - img = new Image(); - var icon = new CostumeIconMorph(new Costume(turtle.image, item.name)); - icon.setPosition(new Point(x, y)); - icon.userMenu = null; - icon.action = function () { - if (selectedIcon === icon) return; - var prevSelected = selectedIcon; - selectedIcon = icon; - if (prevSelected) prevSelected.refresh(); - }; - icon.query = function () { - return icon === selectedIcon; - }; - frame.addContents(icon); - x = icon.right() + padding; - if (x + icon.width() > frame.width()) { - x = padding; - y = icon.bottom() + padding; - } - img.onload = function () { - var canvas = newCanvas(new Point(img.width, img.height)); - canvas.getContext('2d').drawImage(img, 0, 0); - icon.object = new Costume(canvas, item.name); - icon.rawImage = canvas; - icon.refresh(); - }; - img.src = url; - }); - - dialog.ok = function () { - myself.droppedImage(selectedIcon.rawImage, selectedIcon.labelString); - }; - - dialog.labelString = mediaType; - dialog.createLabel(); - dialog.addBody(frame); - frame.drawNew(); - dialog.addButton('ok', 'Import'); - dialog.addButton('cancel', 'Cancel'); - dialog.fixLayout(); - dialog.drawNew(); - dialog.popUp(world); - dialog.setCenter(world.center()); - } - menu = new MenuMorph(this); menu.addItem('Project notes...', 'editProjectNotes'); menu.addLine(); @@ -2704,7 +2641,9 @@ IDE_Morph.prototype.projectMenu = function () { if (shiftClicked) { menu.addItem( - localize('Export project...') + ' ' + localize('(in a new window)'), + localize( + 'Export project...') + ' ' + localize('(in a new window)' + ), function () { if (myself.projectName) { myself.exportProject(myself.projectName, shiftClicked); @@ -2801,7 +2740,7 @@ IDE_Morph.prototype.projectMenu = function () { menu.addItem( localize(graphicsName) + '...', function () { - importMediaDialog(graphicsName); + myself.importMedia(graphicsName); }, 'Select a costume from the media library' ); @@ -2881,6 +2820,110 @@ IDE_Morph.prototype.parseResourceFile = function (text) { return items; }; +IDE_Morph.prototype.importMedia = function (mediaType) { + // open a dialog box letting the user browse available "built-in" + // costumes or backgrounds + + var dialog = new DialogBoxMorph().withKey('import' + mediaType), + frame = new ScrollFrameMorph(), + selectedIcon = null, + turtle = new SymbolMorph('turtle', 60), + items = this.getMediaList(mediaType), + myself = this, + world = this.world(), + handle; + + frame.acceptsDrops = false; + frame.contents.acceptsDrops = false; + frame.color = myself.groupColor; + frame.fixLayout = nop; + dialog.labelString = mediaType; + dialog.createLabel(); + dialog.addBody(frame); + dialog.addButton('ok', 'Import'); + dialog.addButton('cancel', 'Cancel'); + + dialog.ok = function () { + if (selectedIcon) { + myself.droppedImage( + selectedIcon.object.contents, + selectedIcon.labelString + ); + } + }; + + dialog.fixLayout = function () { + var th = fontHeight(this.titleFontSize) + this.titlePadding * 2, + x = 0, + y = 0, + fp, fw; + this.buttons.fixLayout(); + 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() + )); + fp = this.body.position(); + fw = this.body.width(); + frame.contents.children.forEach(function (icon) { + icon.setPosition(fp.add(new Point(x, y))); + x += icon.width(); + if (x + icon.width() > fw) { + x = 0; + y += icon.height(); + } + }); + frame.contents.adjustBounds(); + this.label.setCenter(this.center()); + this.label.setTop(this.top() + (th - this.label.height()) / 2); + this.buttons.setCenter(this.center()); + this.buttons.setBottom(this.bottom() - this.padding); + }; + + items.forEach(function (item) { + var url = myself.resourceURL(mediaType, item.file), + img = new Image(), + icon = new CostumeIconMorph( + new Costume(turtle.image, item.name) + ); + icon.isDraggable = false; + icon.userMenu = nop; + icon.action = function () { + if (selectedIcon === icon) return; + var prevSelected = selectedIcon; + selectedIcon = icon; + if (prevSelected) prevSelected.refresh(); + }; + icon.doubleClickAction = dialog.ok; + icon.query = function () { + return icon === selectedIcon; + }; + frame.addContents(icon); + img.onload = function () { + var canvas = newCanvas(new Point(img.width, img.height)); + canvas.getContext('2d').drawImage(img, 0, 0); + icon.object = new Costume(canvas, item.name); + icon.refresh(); + }; + img.src = url; + }); + dialog.popUp(world); + dialog.setExtent(new Point(390, 300)); + dialog.setCenter(world.center()); + dialog.drawNew(); + + handle = new HandleMorph( + dialog, + 300, + 280, + dialog.corner, + dialog.corner + ); +}; + // IDE_Morph menu actions IDE_Morph.prototype.aboutSnap = function () {