diff options
Diffstat (limited to 'gui.js')
| -rw-r--r-- | gui.js | 526 |
1 files changed, 516 insertions, 10 deletions
@@ -63,7 +63,7 @@ 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, +SnapCloud, GitHub, Uint8Array, HandleMorph, SVG_Costume, fontHeight, hex_sha512, sb, CommentMorph, CommandBlockMorph, BlockLabelPlaceHolderMorph, Audio, SpeechBubbleMorph*/ @@ -234,6 +234,7 @@ IDE_Morph.prototype.init = function (isAutoFill) { this.corral = null; this.isAutoFill = isAutoFill || true; + this.isMuted = false; this.isAppMode = false; this.isSmallStage = false; this.filePicker = null; @@ -243,6 +244,8 @@ IDE_Morph.prototype.init = function (isAutoFill) { this.stageRatio = 1; // for IDE animations, e.g. when zooming this.loadNewProject = false; // flag when starting up translated + this.parentCommitSha = null; // for GitHub + this.lastCommit = null; // for GitHub this.shield = null; // initialize inherited properties: @@ -250,6 +253,39 @@ IDE_Morph.prototype.init = function (isAutoFill) { // override inherited properites: this.color = this.backgroundColor; + + setInterval(this.save, 1000 * 60 * 60 * 5); // every 5 minutes + window.peers = []; + this.createPeer(); +}; + +IDE_Morph.prototype.createPeer = function() { + var myself = this; + this.peer = new Peer(this.peerId, { + host: 'snapmesh.herokuapp.com', + port: 443, + secure: true, + path: '/' + }); + + this.peer.on('open', function (id) { + myself.peerId = id; + }); + this.peer.on('disconnected', function () { + myself.peer.destroy(); + myself.createPeer(); + }); + this.peer.on('error', function (err) { + console.log(err); // DEBUG + }); + + this.peer.on('connection', function (connection) { + connection.on('open', function () { + connection.on('data', function (data) { + myself.stage.newPeerMessage(data, connection.peer); + }); + }); + }); }; IDE_Morph.prototype.openIn = function (world) { @@ -258,6 +294,7 @@ IDE_Morph.prototype.openIn = function (world) { // get persistent user data, if any if (localStorage) { usr = localStorage['-snap-user']; + ghusr = localStorage['-snap-ghuser']; if (usr) { usr = SnapCloud.parseResponse(usr)[0]; if (usr) { @@ -268,6 +305,13 @@ IDE_Morph.prototype.openIn = function (world) { } } } + if (ghusr) { + ghusr = SnapCloud.parseResponse(ghusr)[0]; + if (ghusr) { + GitHub.login(ghusr.username, ghusr.password, false, + function() {}, myself.githubError()); + } + } } this.buildPanes(); @@ -285,6 +329,16 @@ IDE_Morph.prototype.openIn = function (world) { }, 2000); }; + GitHub.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) { @@ -410,6 +464,41 @@ IDE_Morph.prototype.openIn = function (world) { }, this.cloudError() ); + } else if (location.hash.substr(0, 8) === '#github:') { + this.shield = new Morph(); + this.shield.color = this.color; + this.shield.setExtent(this.parent.extent()); + this.parent.add(this.shield); + myself.showMessage('Fetching project\nfrom GitHub...'); + + dict = SnapCloud.parseDict(location.hash.substr(8)); + + GitHub.getProject( + dict.Username, + dict.projectName, + function (code, pcSha) { + var msg; + myself.nextSteps([ + function () { + msg = myself.showMessage('Opening GitHub project...'); + }, + function () { + myself.parentCommitSha = pcSha; + myself.lastCommit = code; + myself.rawOpenCloudDataString(code); + myself.hasChangedMedia = true; + }, + function () { + myself.shield.destroy(); + myself.shield = null; + msg.destroy(); + myself.toggleAppMode(true); + myself.runScripts(); + } + ]); + }, + this.githubError() + ); } else if (location.hash.substr(0, 7) === '#cloud:') { this.shield = new Morph(); this.shield.alpha = 0; @@ -534,6 +623,7 @@ IDE_Morph.prototype.createControlBar = function () { stopButton, pauseButton, startButton, + muteSoundsButton, projectButton, settingsButton, stageSizeButton, @@ -623,6 +713,38 @@ IDE_Morph.prototype.createControlBar = function () { this.controlBar.add(appModeButton); this.controlBar.appModeButton = appModeButton; // for refreshing + //muteSoundsButton + button = new ToggleButtonMorph( + null, //colors, + myself, // the IDE is the target + 'toggleMuteSounds', + [ + new SymbolMorph('mutedSounds', 14), + new SymbolMorph('unmutedSounds', 14) + ], + function () { // query + return myself.isMuted; + } + ); + + 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 = this.buttonLabelColor; + button.contrast = this.buttonContrast; + button.drawNew(); + // button.hint = 'sounds\nmuted & unmuted'; + button.fixLayout(); + button.refresh(); + muteSoundsButton = button; + this.controlBar.add(muteSoundsButton); + this.controlBar.muteSoundsButton = button; // for refreshing + // stopButton button = new PushButtonMorph( this, @@ -787,7 +909,7 @@ IDE_Morph.prototype.createControlBar = function () { myself.right() - StageMorph.prototype.dimensions.x * (myself.isSmallStage ? myself.stageRatio : 1) ); - [stageSizeButton, appModeButton].forEach( + [stageSizeButton, appModeButton, muteSoundsButton].forEach( function (button) { x += padding; button.setCenter(myself.controlBar.center()); @@ -1647,7 +1769,12 @@ IDE_Morph.prototype.droppedBinary = function (anArrayBuffer, name) { myself = this, suffix = name.substring(name.length - 3); - if (suffix.toLowerCase() !== 'ypr') {return; } + if (suffix.toLowerCase() !== 'ypr') { + var zip = new JSZip(anArrayBuffer); + myself.droppedText(Snapin8r(zip)); + + return; + } function loadYPR(buffer, lbl) { var reader = new sb.Reader(), @@ -2058,6 +2185,18 @@ IDE_Morph.prototype.cloudMenu = function () { 'changeCloudPassword' ); } + + if (!GitHub.username) { + menu.addItem( + 'Login via GitHub...', + 'initializeGitHub' + ); + } else { + menu.addItem( + localize('Logout') + ' ' + GitHub.username + ' ' + localize('from GitHub'), + 'logoutGitHub' + ); + } if (shiftClicked) { menu.addLine(); menu.addItem( @@ -2403,6 +2542,9 @@ IDE_Morph.prototype.projectMenu = function () { menu.addItem('New', 'createNewProject'); menu.addItem('Open...', 'openProjectsBrowser'); menu.addItem('Save', "save"); + if (GitHub.username) { + menu.addItem('Save with commit message', 'commitProjectToGitHub'); + } if (shiftClicked) { menu.addItem( 'Save to disk', @@ -2617,7 +2759,7 @@ IDE_Morph.prototype.aboutSnap = function () { module, btn1, btn2, btn3, btn4, licenseBtn, translatorsBtn, world = this.world(); - aboutTxt = 'Snap! 4.0.1\nBuild Your Own Blocks\n\n' + aboutTxt = 'Snap! 4.1 (OOP)\nBuild Your Own Blocks\n\n--- dev ---\n\n' + 'Copyright \u24B8 2015 Jens M\u00F6nig and ' + 'Brian Harvey\n' + 'jens@moenig.org, bh@cs.berkeley.edu\n\n' @@ -2851,8 +2993,10 @@ IDE_Morph.prototype.save = function () { if (this.projectName) { if (this.source === 'local') { // as well as 'examples' this.saveProject(this.projectName); - } else { // 'cloud' + } else if (this.source === 'cloud') { // 'cloud' this.saveProjectToCloud(this.projectName); + } else { // 'github' + this.saveProjectToGitHub(this.projectName); } } else { this.saveProjectsBrowser(); @@ -3530,6 +3674,27 @@ IDE_Morph.prototype.toggleStageSize = function (isSmall) { } }; +IDE_Morph.prototype.toggleMuteSounds = function (isMuted) { + this.isMuted = isNil(isMuted) ? !this.isMuted : isMuted; + this.controlBar.muteSoundsButton.refresh(); + + /* stage.activeSounds holds all active sounds + * a sprite's .activeSounds holds just its own + * so you have to use the stage to mute + * and the sprite to unmute, because the stage's volume + * overrides the sprite's one. + */ + + if (this.isMuted === false) { + this.stage.unmuteAllSounds(); + this.sprites.asArray().forEach(function (sprt) { + sprt.unmuteAllSounds(); + }); + } else { + this.stage.muteAllSounds(); + } +}; + IDE_Morph.prototype.createNewProject = function () { var myself = this; this.confirm( @@ -3590,6 +3755,12 @@ IDE_Morph.prototype.setLanguage = function (lang, callback) { IDE_Morph.prototype.reflectLanguage = function (lang, callback) { var projectData; SnapTranslator.language = lang; + this.world().children.forEach(function (morph) { + if (morph instanceof BlockEditorMorph) { + morph.updateDefinition(); // save custom blocks + // otherwise, initBlocks() will reset the definition + } + }); if (!this.loadNewProject) { if (Process.prototype.isCatchingErrors) { try { @@ -3822,6 +3993,48 @@ IDE_Morph.prototype.initializeCloud = function () { ); }; +IDE_Morph.prototype.initializeGitHub = function () { + var myself = this, + world = this.world(); + new DialogBoxMorph( + null, + function (user) { + var pw = user.password, + str; + GitHub.login( + user.username, + pw, + true, + function () { + if (user.choice) { + str = SnapCloud.encodeDict( + { + username: user.username, + password: pw + } + ); + localStorage['-snap-ghuser'] = str; + } + myself.source = 'github'; + myself.showMessage('now connected.', 2); + }, + myself.githubError() + ); + } + ).withKey('cloudlogin').promptCredentials( + 'Sign in with your GitHub account', + '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(); @@ -3949,6 +4162,19 @@ IDE_Morph.prototype.logout = function () { ); }; +IDE_Morph.prototype.logoutGitHub = function () { + var myself = this; + delete localStorage['-snap-ghuser']; + GitHub.logout( + function () { + myself.showMessage('disconnected.', 2); + }, + function () { + myself.showMessage('disconnected.', 2); + } + ); +}; + IDE_Morph.prototype.saveProjectToCloud = function (name) { var myself = this; if (name) { @@ -3962,6 +4188,90 @@ IDE_Morph.prototype.saveProjectToCloud = function (name) { } }; +IDE_Morph.prototype.saveProjectToGitHub = function (name, commitMessage) { + var myself = this; + if (name) { + this.showMessage('Comitting project\nto GitHub...'); + this.setProjectName(name); + GitHub.saveProject( + commitMessage, + this.parentCommitSha, + this.lastCommit, + this, + function () { + GitHub.getProject( + GitHub.username, + name, + function (code, pcSha) { + myself.source = 'github'; + myself.parentCommitSha = pcSha; + myself.lastCommit = code; + myself.droppedText(code); + }, + myself.githubError() + ); + }, + this.githubError() + ); + } +}; + +IDE_Morph.prototype.commitProjectToGitHub = function () { + var dialog = new DialogBoxMorph().withKey('commitMessage'), + frame = new ScrollFrameMorph(), + text = new TextMorph(''), + ok = dialog.ok, + myself = this, + size = 120, + 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.saveProjectToGitHub( + myself.projectName, + text.text + ); + + ok.call(this); + }; + + dialog.justDropped = function () { + text.edit(); + }; + + dialog.labelString = 'Commit message'; + dialog.createLabel(); + dialog.addBody(frame); + frame.drawNew(); + dialog.addButton('ok', 'OK'); + dialog.addButton('cancel', 'Cancel'); + dialog.fixLayout(); + dialog.drawNew(); + dialog.popUp(world); + dialog.setCenter(world.center()); + text.edit(); +}; IDE_Morph.prototype.exportProjectMedia = function (name) { var menu, media; this.serializer.isCollectingMedia = true; @@ -4163,6 +4473,42 @@ IDE_Morph.prototype.cloudError = function () { }; }; +IDE_Morph.prototype.githubError = function () { + var myself = this; + + function getURL(url) { + try { + var request = new XMLHttpRequest(); + request.open('GET', url, false); + request.send(); + if (request.status === 200) { + return request.responseText; + } + return null; + } catch (err) { + return null; + } + } + + return function (responseText, url) { + var response = responseText; + if (myself.shield) { + myself.shield.destroy(); + myself.shield = null; + } + if (response.length > 50) { + response = response.substring(0, 50) + '...'; + } + new DialogBoxMorph().inform( + 'GitHub', + (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, isFlat = MorphicPreferences.isFlat, @@ -4292,7 +4638,7 @@ ProjectDialogMorph.prototype.init = function (ide, task) { // 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.source = ide.source || 'local'; // or 'cloud' or 'github' or 'examples' this.projectList = []; // [{name: , thumb: , notes:}] this.handle = null; @@ -4352,6 +4698,7 @@ ProjectDialogMorph.prototype.buildContents = function () { } this.addSourceButton('cloud', localize('Cloud'), 'cloud'); + this.addSourceButton('github', localize('GitHub'), 'github'); this.addSourceButton('local', localize('Browser'), 'storage'); if (this.task === 'open') { this.addSourceButton('examples', localize('Examples'), 'poster'); @@ -4600,6 +4947,20 @@ ProjectDialogMorph.prototype.setSource = function (source) { } ); return; + case 'github': + msg = myself.ide.showMessage('Updating\nproject list...'); + this.projectList = []; + GitHub.getProjectList( + function (projectList) { + myself.installGitHubProjectList(projectList); + msg.destroy(); + }, + function (err, lbl) { + msg.destroy(); + myself.ide.githubError().call(null, err, lbl); + } + ); + return; case 'examples': this.projectList = this.getExamplesProjectList(); break; @@ -4652,7 +5013,7 @@ ProjectDialogMorph.prototype.setSource = function (source) { } myself.edit(); }; - } else { // 'examples', 'cloud' is initialized elsewhere + } else { // 'examples', 'cloud' and 'github' is initialized elsewhere this.listField.action = function (item) { var src, xml; if (item === undefined) {return; } @@ -4818,6 +5179,69 @@ ProjectDialogMorph.prototype.installCloudProjectList = function (pl) { } }; +ProjectDialogMorph.prototype.installGitHubProjectList = 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, + [], + function () {myself.ok(); } + ); + 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 (item === undefined) {return; } + 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(); + (new SpeechBubbleMorph(new TextMorph( + localize('last changed') + '\n' + item.Updated, + null, + null, + null, + null, + 'center' + ))).popUp( + myself.world(), + myself.preview.rightCenter().add(new Point(2, 0)) + ); + } + myself.buttons.fixLayout(); + myself.fixLayout(); + myself.edit(); + }; + this.body.add(this.listField); + this.deleteButton.show(); + this.buttons.fixLayout(); + this.fixLayout(); + if (this.task === 'open') { + this.clearDetails(); + } +}; + ProjectDialogMorph.prototype.clearDetails = function () { this.notesText.text = ''; this.notesText.drawNew(); @@ -4834,6 +5258,8 @@ ProjectDialogMorph.prototype.openProject = function () { this.ide.source = this.source; if (this.source === 'cloud') { this.openCloudProject(proj); + } else if (this.source === 'github') { + this.openGitHubProject(proj); } else if (this.source === 'examples') { src = this.ide.getURL(baseUrl + 'Examples/' + proj.name + '.xml'); this.ide.openProjectString(src); @@ -4856,6 +5282,23 @@ ProjectDialogMorph.prototype.openCloudProject = function (project) { ]); }; +ProjectDialogMorph.prototype.openGitHubProject = function (project, user) { + var myself = this; + + if (user == null) { // jshint ignore:line + user = GitHub.username; + } + + myself.ide.nextSteps([ + function () { + myself.ide.showMessage('Fetching project\nfrom GitHub...'); + }, + function () { + myself.rawOpenGitHubProject(project, user); + } + ]); +}; + ProjectDialogMorph.prototype.rawOpenCloudProject = function (proj) { var myself = this; SnapCloud.reconnect( @@ -4882,6 +5325,21 @@ ProjectDialogMorph.prototype.rawOpenCloudProject = function (proj) { this.destroy(); }; +ProjectDialogMorph.prototype.rawOpenGitHubProject = function (proj, user) { + var myself = this; + GitHub.getProject( + user, + proj.ProjectName, + function (code, pcSha) { + myself.ide.source = 'github'; + myself.ide.parentCommitSha = pcSha; + myself.ide.lastCommit = code; + myself.ide.droppedText(code); + }, + myself.ide.githubError() + ); + this.destroy(); +}; ProjectDialogMorph.prototype.saveProject = function () { var name = this.nameField.contents().text.text, notes = this.notesText.text, @@ -4908,6 +5366,25 @@ ProjectDialogMorph.prototype.saveProject = function () { this.ide.setProjectName(name); myself.saveCloudProject(); } + } else if (this.source === 'github') { + 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.ide.setProjectName(name); + myself.saveGitHubProject(); + } + ); + } else { + this.ide.setProjectName(name); + myself.saveGitHubProject(); + } } else { // 'local' if (detect( this.projectList, @@ -4949,13 +5426,32 @@ ProjectDialogMorph.prototype.saveCloudProject = function () { this.destroy(); }; +ProjectDialogMorph.prototype.saveGitHubProject = function () { + var myself = this; + this.ide.showMessage('Committing project\nto GitHub...'); + GitHub.saveProject( + null, + this.ide.parentCommitSha, + this.ide.lastCommit, + this.ide, + function () { + myself.ide.source = 'github'; + myself.ide.showMessage('saved.', 2); + }, + this.ide.githubError() + ); + this.destroy(); +}; + ProjectDialogMorph.prototype.deleteProject = function () { var myself = this, proj, idx, name; - if (this.source === 'cloud') { + if (this.source === 'github') { + // TODO: not implemented + } else if (this.source === 'cloud') { proj = this.listField.selected; if (proj) { this.ide.confirm( @@ -5214,7 +5710,7 @@ function SpriteIconMorph(aSprite, aTemplate) { } SpriteIconMorph.prototype.init = function (aSprite, aTemplate) { - var colors, action, query, myself = this; + var colors, action, query, hover, myself = this; if (!aTemplate) { colors = [ @@ -5244,6 +5740,11 @@ SpriteIconMorph.prototype.init = function (aSprite, aTemplate) { return false; }; + hover = function () { + if (!aSprite.exemplar) {return null; } + return (localize('parent' + ':\n' + aSprite.exemplar.name)); + }; + // additional properties: this.object = aSprite || new SpriteMorph(); // mandatory, actually this.version = this.object.version; @@ -5259,7 +5760,7 @@ SpriteIconMorph.prototype.init = function (aSprite, aTemplate) { this.object.name, // label string query, // predicate/selector null, // environment - null, // hint + hover, // hint aTemplate // optional, for cached background images ); @@ -5430,6 +5931,7 @@ SpriteIconMorph.prototype.userMenu = function () { menu.addItem("duplicate", 'duplicateSprite'); menu.addItem("delete", 'removeSprite'); menu.addLine(); + menu.addItem("parent...", 'chooseExemplar'); if (this.object.anchor) { menu.addItem( localize('detach from') + ' ' + this.object.anchor.name, @@ -5464,6 +5966,10 @@ SpriteIconMorph.prototype.exportSprite = function () { this.object.exportSprite(); }; +SpriteIconMorph.prototype.chooseExemplar = function () { + this.object.chooseExemplar(); +}; + SpriteIconMorph.prototype.showSpriteOnStage = function () { this.object.showOnStage(); }; |