Large refactor

- Browserify --> webpack
- New color picker using React
- zipjs --> JSZip

.babelrc

@@ -1,3 +1,3 @@
 {
-  presets: ['es2015']
+  "presets": ["env"]
 }

app/html/_base.html

@@ -7,12 +7,10 @@
 
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,500|Roboto+Mono:400,500">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-  <link rel="stylesheet" href="lib/spectrum/spectrum.css">
-  <link rel="stylesheet" href="styles/app.css">
+  <link rel="stylesheet" href="app.css">
   <link href="favicon.ico" rel="icon">
-  <script src="lib/jquery/dist/jquery.min.js"></script>
-  <script src="lib/spectrum/spectrum.js"></script>
-  <script src="scripts/app.js"></script>
+  <script src="vendor.js"></script>
+  <script src="app.js"></script>
 
   {% block head %}
   {% endblock %}

app/scripts/app.js → app/scripts/app.entry.js

@@ -14,11 +14,12 @@
  * limitations under the License.
  */
 
-import {pages} from './pages';
+require('babel-polyfill');
 
+import * as pages from './pages';
 window.pages = pages;
 
-window.addEventListener('load', function() {
+window.addEventListener('load', () => {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('sw.js');
   }

app/scripts/imagelib/Effects.js

@@ -15,6 +15,7 @@
  */
 
 import {Drawing} from './Drawing';
+import {default as tinycolor} from 'tinycolor2';
 
 const OUTER_EFFECTS = new Set(['outer-shadow', 'cast-shadow']);
 const INNER_EFFECTS = new Set(['inner-shadow', 'score']);

app/scripts/pages/ActionBarIconGenerator.js

@@ -14,9 +14,11 @@
  * limitations under the License.
  */
 
+import {default as $} from 'jquery';
 import {studio} from '../studio';
 import {imagelib} from '../imagelib';
 import {BaseGenerator} from './BaseGenerator';
+import {default as tinycolor} from 'tinycolor2';
 
 const ICON_SIZE = { w: 24, h: 24 };
 const TARGET_RECT = { x: 0, y: 0, w: 24, h: 24 };

app/scripts/pages/BaseGenerator.js

@@ -14,15 +14,12 @@
  * limitations under the License.
  */
 
+import {default as $} from 'jquery';
 import {studio} from '../studio';
-import {imagelib} from '../imagelib';
 
 const DENSITIES = new Set(['xxxhdpi', 'xxhdpi', 'xhdpi', 'hdpi', 'mdpi']);
 const REGENERATE_DEBOUNCE_TIME = 200;
 
-const ICON_SIZE = { w: 24, h: 24 };
-const TARGET_RECT = { x: 0, y: 0, w: 24, h: 24 };
-
 
 export class BaseGenerator {
   constructor() {

app/scripts/pages/NotificationIconGenerator.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import {default as $} from 'jquery';
 import {studio} from '../studio';
 import {imagelib} from '../imagelib';
 import {BaseGenerator} from './BaseGenerator';

app/scripts/pages/index.js

@@ -14,18 +14,9 @@
  * limitations under the License.
  */
 
-import {LauncherIconGenerator} from './LauncherIconGenerator';
-import {AppShortcutIconGenerator} from './AppShortcutIconGenerator';
-import {ActionBarIconGenerator} from './ActionBarIconGenerator';
-import {NotificationIconGenerator} from './NotificationIconGenerator';
-import {GenericIconGenerator} from './GenericIconGenerator';
-import {NinePatchGenerator} from './ninepatch/NinePatchGenerator';
-
-export const pages = {
-  LauncherIconGenerator,
-  AppShortcutIconGenerator,
-  ActionBarIconGenerator,
-  NotificationIconGenerator,
-  GenericIconGenerator,
-  NinePatchGenerator,
-};
+export {LauncherIconGenerator} from './LauncherIconGenerator';
+export {AppShortcutIconGenerator} from './AppShortcutIconGenerator';
+export {ActionBarIconGenerator} from './ActionBarIconGenerator';
+export {NotificationIconGenerator} from './NotificationIconGenerator';
+export {GenericIconGenerator} from './GenericIconGenerator';
+export {NinePatchGenerator} from './ninepatch/NinePatchGenerator';

app/scripts/pages/ninepatch/NinePatchGenerator.js

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import {default as $} from 'jquery';
+
 import {studio} from '../../studio';
 import {imagelib} from '../../imagelib';
 import {BaseGenerator} from '../BaseGenerator';

app/scripts/pages/ninepatch/NinePatchPreview.js

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import {default as $} from 'jquery';
+
 export class NinePatchPreview {
   constructor(stage) {
     this.stage = stage;

app/scripts/pages/ninepatch/NinePatchStage.js

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import {imagelib} from '../../imagelib';
+import {default as $} from 'jquery';
 import {NinePatchTrimming} from './NinePatchTrimming';
 
 const EMPTY_RECT = {x: 0, y: 0, w: 0, h: 0};

app/scripts/studio/Hash.js

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import {default as $} from 'jquery';
 import {Util} from './Util';
 
 export const Hash = {

app/scripts/studio/Util.js

@@ -14,6 +14,8 @@
  * limitations under the License.
  */
 
+import {default as $} from 'jquery';
+
 export const Util = {
   getMultBaseMdpi(density) {
     switch (density) {

app/scripts/studio/Zip.js

@@ -14,12 +14,10 @@
  * limitations under the License.
  */
 
-import {default as zipjs} from 'zipjs-browserify';
+import JSZip from 'jszip/lib';
 
 import {Util} from './Util';
 
-const URL = window.URL || window.webkitURL || window.mozURL;
-
 
 export const Zip = {
   createDownloadifyZipButton(element, options) {
@@ -51,7 +49,7 @@ class DownloadZipButton {
   }
 
   updateUI_() {
-    if (this.fileSpecs_.length && !this.generating_) {
+    if (this.fileSpecs_.length && !this.isGenerating_) {
       this.el_.removeAttr('disabled');
     } else {
       this.el_.attr('disabled', 'disabled');
@@ -67,29 +65,21 @@ class DownloadZipButton {
     this.isGenerating_ = true;
     this.updateUI_();
 
-    zipjs.createWriter(new zipjs.BlobWriter(), writer => {
-      let i = -1;
-      let nextFile_ = () => {
-        ++i;
-        if (i >= this.fileSpecs_.length) {
-          // close
-          writer.close(blob => Util.downloadFile(blob, filename));
-          this.isGenerating_ = false;
-          this.updateUI_();
+    let zip = new JSZip();
+
+    this.fileSpecs_.forEach(fileSpec => {
+      if (fileSpec.canvas) {
+        zip.file(fileSpec.name, fileSpec.canvas.toDataURL().replace(/.*?;base64,/, ''), {base64: true});
+      } else {
+        zip.file(fileSpec.name, fileSpec.textData);
+      }
+    });
 
-        } else {
-          // add next file
-          let fileSpec = this.fileSpecs_[i];
-          writer.add(
-              fileSpec.name,
-              fileSpec.canvas
-                  ? new zipjs.Data64URIReader(fileSpec.canvas.toDataURL())
-                  : new zipjs.TextReader(fileSpec.textData),
-              nextFile_);
-        }
-      };
-      nextFile_();
-    }, error => {
+    zip.generateAsync({type: 'blob'}).then(blob => {
+      Util.downloadFile(blob, filename);
+      this.isGenerating_ = false;
+      this.updateUI_();
+    }).catch(error => {
       console.error(error);
       this.isGenerating_ = false;
       this.updateUI_();