diff --git a/package.json b/package.json index b8649d8c1e8dd0e430e9eae5c1534f69007606bf..f621d12f2b618cc9c8b247deaffc31e3e2e3adff 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "html-webpack-plugin": "^2.30.0", "immutable": "3.8.2", "jest": "^21.0.0", + "jszip": "^3.1.5", "lodash.bindall": "4.4.0", "lodash.debounce": "4.0.8", "lodash.defaultsdeep": "4.6.0", diff --git a/src/containers/save-button.jsx b/src/containers/save-button.jsx index f2ae497def0837fcf6eb0b888f3b84933d95039c..e64ade4b196f4a8646b2ba9412f5e7a1c1cd46e5 100644 --- a/src/containers/save-button.jsx +++ b/src/containers/save-button.jsx @@ -2,6 +2,7 @@ import bindAll from 'lodash.bindall'; import PropTypes from 'prop-types'; import React from 'react'; import {connect} from 'react-redux'; +import JSZip from 'jszip'; import ButtonComponent from '../components/button/button.jsx'; import {ComingSoonTooltip} from '../components/coming-soon/coming-soon.jsx'; @@ -15,24 +16,44 @@ class SaveButton extends React.Component { ]); } handleClick () { - const json = this.props.saveProjectSb3(); + const zip = new JSZip(); + // Get the serialized project and assets from vm + const projectInfo = this.props.saveProjectSb3(); + + const json = projectInfo.projectJson; + const sounds = projectInfo.sounds; + const costumes = projectInfo.costumes; + + // Put everything in a zip file + zip.file('project.json', json); + for (let i = 0; i < sounds.length; i++) { + const currSound = sounds[i]; + zip.file(currSound.fileName, currSound.fileContent); + } + for (let i = 0; i < costumes.length; i++) { + const currCostume = costumes[i]; + zip.file(currCostume.fileName, currCostume.fileContent); + } // Download project data into a file - create link element, // simulate click on it, and then remove it. const saveLink = document.createElement('a'); document.body.appendChild(saveLink); - const data = new Blob([json], {type: 'text'}); - const url = window.URL.createObjectURL(data); - saveLink.href = url; + zip.generateAsync({type: 'blob'}).then(content => { + const url = window.URL.createObjectURL(content); + + saveLink.href = url; - // File name: project-DATE-TIME - const date = new Date(); - const timestamp = `${date.toLocaleDateString()}-${date.toLocaleTimeString()}`; - saveLink.download = `project-${timestamp}.json`; - saveLink.click(); - window.URL.revokeObjectURL(url); - document.body.removeChild(saveLink); + // TODO Project name/location should be chosen by user + // File name: project-DATE-TIME + const date = new Date(); + const timestamp = `${date.toLocaleDateString()}-${date.toLocaleTimeString()}`; + saveLink.download = `project-${timestamp}.zip`; + saveLink.click(); + window.URL.revokeObjectURL(url); + document.body.removeChild(saveLink); + }); } render () { const {