release: bump to version 0.13.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "piskel",
-  "version": "0.12.1",
+  "version": "0.13.0",
   "description": "Pixel art editor",
   "author": "Julian Descottes <julian.descottes@gmail.com>",
   "contributors": [

src/css/dialogs-browse-backups.css

@@ -56,8 +56,7 @@
   height: 90px;
 }
 
-.browse-backups .session-list-empty,
+.browse-backups .centered-message {
-.browse-backups .snapshot-list-empty {
   position: absolute;
   left: 50%;
   width: 200px;
@@ -68,9 +67,18 @@
   font-size: 16px;
   text-align: center;
   border: 1px solid;
+}
+
+.browse-backups .session-list-empty,
+.browse-backups .snapshot-list-empty {
   color: #bbb;
 }
 
+.browse-backups .session-list-error,
+.browse-backups .snapshot-list-error {
+  color: white;
+}
+
 .browse-backups .session-item {
   /* Transition duration should be kept in sync with SelectSession.DELETE_TRANSITION_DURATION */
   transition: all 500ms;

src/css/style.css

@@ -52,7 +52,12 @@ body {
 }
 
 .checkbox-fix {
-  margin-left: 0;
+  margin: 3px 3px 3px 0;
+}
+
+.checkbox-container {
+  display: flex;
+  align-items: center;
 }
 
 .hidden {

src/js/controller/dialogs/backups/steps/SelectSession.js

@@ -39,31 +39,36 @@
 
   ns.SelectSession.prototype.update = function () {
     pskl.app.backupService.list().then(function (sessions) {
-      var html = '';
+      var html = this.getMarkupForSessions_(sessions);
-      if (sessions.length === 0) {
+      this.container.querySelector('.session-list').innerHTML = html;
-        html = pskl.utils.Template.get('session-list-empty');
+    }.bind(this)).catch(function () {
-      } else {
+      var html = pskl.utils.Template.get('session-list-error');
-        var sessionItemTemplate = pskl.utils.Template.get('session-list-item');
-        var html = '';
-        sessions.forEach(function (session) {
-          if (session.id === pskl.app.sessionId) {
-            // Do not show backups for the current session.
-            return;
-          }
-          var view = {
-            id: session.id,
-            name: session.name,
-            description: session.description ? '- ' + session.description : '',
-            date: pskl.utils.DateUtils.format(session.endDate, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'),
-            count: session.count === 1 ? '1 snapshot' : session.count + ' snapshots'
-          };
-          html += pskl.utils.Template.replace(sessionItemTemplate, view);
-        });
-      }
       this.container.querySelector('.session-list').innerHTML = html;
     }.bind(this));
   };
 
+  ns.SelectSession.prototype.getMarkupForSessions_ = function (sessions) {
+    if (sessions.length === 0) {
+      return pskl.utils.Template.get('session-list-empty');
+    }
+
+    var sessionItemTemplate = pskl.utils.Template.get('session-list-item');
+    return sessions.reduce(function (previous, session) {
+      if (session.id === pskl.app.sessionId) {
+        // Do not show backups for the current session.
+        return previous;
+      }
+      var view = {
+        id: session.id,
+        name: session.name,
+        description: session.description ? '- ' + session.description : '',
+        date: pskl.utils.DateUtils.format(session.endDate, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'),
+        count: session.count === 1 ? '1 snapshot' : session.count + ' snapshots'
+      };
+      return previous + pskl.utils.Template.replace(sessionItemTemplate, view);
+    }, '');
+  };
+
   ns.SelectSession.prototype.destroy = function () {
     pskl.utils.Event.removeAllEventListeners(this);
   };

src/js/controller/dialogs/backups/steps/SessionDetails.js

@@ -27,33 +27,42 @@
   ns.SessionDetails.prototype.onShow = function () {
     var sessionId = this.backupsController.backupsData.selectedSession;
     pskl.app.backupService.getSnapshotsBySessionId(sessionId).then(function (snapshots) {
-      var html = '';
+      var html = this.getMarkupForSnapshots_(snapshots);
-      if (snapshots.length === 0) {
+      this.container.querySelector('.snapshot-list').innerHTML = html;
-        // This should normally never happen, all sessions have at least one snapshot and snapshots
+
-        // can not be individually deleted.
+      // Load the image of the first frame for each sprite and update the list.
-        console.warn('Could not retrieve snapshots for a session');
+      snapshots.forEach(function (snapshot) {
-        html = pskl.utils.Template.get('snapshot-list-empty');
+        this.updateSnapshotPreview_(snapshot);
-      } else {
+      }.bind(this));
-        var sessionItemTemplate = pskl.utils.Template.get('snapshot-list-item');
+    }.bind(this)).catch(function () {
-        var html = '';
+      var html = pskl.utils.Template.get('snapshot-list-error');
-        snapshots.forEach(function (snapshot) {
-          var view = {
-            id: snapshot.id,
-            name: snapshot.name,
-            description: snapshot.description ? '- ' + snapshot.description : '',
-            date: pskl.utils.DateUtils.format(snapshot.date, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'),
-            frames: snapshot.frames === 1 ? '1 frame' : snapshot.frames + ' frames',
-            resolution: pskl.utils.StringUtils.formatSize(snapshot.width, snapshot.height),
-            fps: snapshot.fps
-          };
-          html += pskl.utils.Template.replace(sessionItemTemplate, view);
-          this.updateSnapshotPreview_(snapshot);
-        }.bind(this));
-      }
       this.container.querySelector('.snapshot-list').innerHTML = html;
     }.bind(this));
   };
 
+  ns.SessionDetails.prototype.getMarkupForSnapshots_ = function (snapshots) {
+    if (snapshots.length === 0) {
+      // This should normally never happen, all sessions have at least one snapshot and snapshots
+      // can not be individually deleted.
+      console.warn('Could not retrieve snapshots for a session');
+      return pskl.utils.Template.get('snapshot-list-empty');
+    }
+
+    var sessionItemTemplate = pskl.utils.Template.get('snapshot-list-item');
+    return snapshots.reduce(function (previous, snapshot) {
+      var view = {
+        id: snapshot.id,
+        name: snapshot.name,
+        description: snapshot.description ? '- ' + snapshot.description : '',
+        date: pskl.utils.DateUtils.format(snapshot.date, 'the {{Y}}/{{M}}/{{D}} at {{H}}:{{m}}'),
+        frames: snapshot.frames === 1 ? '1 frame' : snapshot.frames + ' frames',
+        resolution: pskl.utils.StringUtils.formatSize(snapshot.width, snapshot.height),
+        fps: snapshot.fps
+      };
+      return previous + pskl.utils.Template.replace(sessionItemTemplate, view);
+    }, '');
+  };
+
   ns.SessionDetails.prototype.updateSnapshotPreview_ = function (snapshot) {
     pskl.utils.serialization.Deserializer.deserialize(
       JSON.parse(snapshot.serialized),

src/js/database/PiskelDatabase.js

@@ -29,9 +29,7 @@
     return _requestPromise(request).then(function (event) {
       this.db = event.target.result;
       return this.db;
-    }.bind(this)).catch(function (e) {
+    }.bind(this));
-      console.log('Failed to initialize IndexedDB, local browser saves will be unavailable.');
-    });
   };
 
   ns.PiskelDatabase.prototype.onUpgradeNeeded_ = function (event) {

src/js/service/storage/IndexedDbStorageService.js

@@ -7,7 +7,9 @@
   };
 
   ns.IndexedDbStorageService.prototype.init = function () {
-    this.piskelDatabase.init();
+    this.piskelDatabase.init().catch(function (e) {
+      console.log('Failed to initialize PiskelDatabase, local browser saves will be unavailable.');
+    });
   };
 
   ns.IndexedDbStorageService.prototype.save = function (piskel) {
@@ -30,7 +32,7 @@
   };
 
   ns.IndexedDbStorageService.prototype.load = function (name) {
-    this.piskelDatabase.get(name).then(function (piskelData) {
+    return this.piskelDatabase.get(name).then(function (piskelData) {
       if (typeof piskelData !== 'undefined') {
         var serialized = piskelData.serialized;
         pskl.utils.serialization.Deserializer.deserialize(
@@ -46,7 +48,7 @@
   };
 
   ns.IndexedDbStorageService.prototype.remove = function (name) {
-    this.piskelDatabase.delete(name);
+    return this.piskelDatabase.delete(name);
   };
 
   ns.IndexedDbStorageService.prototype.getKeys = function () {

src/templates/dialogs/browse-backups.html

@@ -28,7 +28,11 @@
 </script>
 
 <script type="text/template" id="session-list-empty">
-<div class="session-list-empty">No session found ...</div>
+<div class="centered-message session-list-empty">No session found ...</div>
+</script>
+
+<script type="text/template" id="session-list-error">
+<div class="centered-message session-list-error">Could not load backup sessions, something went wrong.</div>
 </script>
 
 <script type="text/template" id="session-list-item">
@@ -57,7 +61,11 @@
 </script>
 
 <script type="text/template" id="snapshot-list-empty">
-<div class="snapshot-list-empty">No snapshot found ...</div>
+<div class="centered-message snapshot-list-empty">No snapshot found ...</div>
+</script>
+
+<script type="text/template" id="snapshot-list-error">
+<div class="centered-message snapshot-list-error">Could not load snapshots, something went wrong.</div>
 </script>
 
 <script type="text/template" id="snapshot-list-item">

src/templates/dialogs/import.html

@@ -25,8 +25,8 @@
     </div>
     <div class="import-section import-subsection">
       <span class="dialog-section-title">Resize to</span>
-      <input type="text" class="textfield import-size-field" name="resize-width"/>x
+      <input type="text" class="textfield import-size-field" autocomplete="off" name="resize-width"/>x
-      <input type="text" class="textfield import-size-field" name="resize-height"/>
+      <input type="text" class="textfield import-size-field" autocomplete="off" name="resize-height"/>
     </div>
     <div class="import-section import-subsection">
       <span class="import-section-title">Smooth resize</span>
@@ -40,13 +40,13 @@
     </div>
     <div class="import-section import-subsection">
       <span class="dialog-section-title">Frame size</span>
-      <input type="text" class="textfield import-size-field" name="frame-size-x"/>x
+      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-size-x"/>x
-      <input type="text" class="textfield import-size-field" name="frame-size-y"/>
+      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-size-y"/>
     </div>
     <div class="import-section import-subsection">
       <span class="dialog-section-title">Offset</span>
-      <input type="text" class="textfield import-size-field" name="frame-offset-x"/>x
+      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-offset-x"/>x
-      <input type="text" class="textfield import-size-field" name="frame-offset-y"/>
+      <input type="text" class="textfield import-size-field" autocomplete="off" name="frame-offset-y"/>
     </div>
   </form>
   <div class="import-step-buttons">

src/templates/settings/export/gif.html

@@ -11,7 +11,10 @@
     </div>
     <div class="export-panel-section export-panel-row">
       <input id="gif-repeat-checkbox" class="gif-repeat-checkbox checkbox-fix" type="checkbox" />
-      <label for="gif-repeat-checkbox">Loop repeatedly</label>
+      <label for="gif-repeat-checkbox"
+             title="Uncheck to play the animation only one time."
+             rel="tooltip"
+             data-placement="top">Loop repeatedly</label>
     </div>
     <div class="export-panel-section export-panel-row">
       <button type="button" class="button button-primary gif-download-button">Download</button>

src/templates/settings/export/zip.html

@@ -7,7 +7,7 @@
         <input type="text" style="flex: 1;" class="zip-prefix-name textfield"
                autocomplete="off" placeholder="PNG file prefix ...">
       </div>
-      <div style="margin: 5px 0;">
+      <div class="checkbox-container" style="margin: 5px 0;">
         <input id="zip-split-layers" class="zip-split-layers-checkbox checkbox-fix" type="checkbox" />
         <label for="zip-split-layers">Split by layers</label>
       </div>

src/templates/settings/resize.html

@@ -17,13 +17,13 @@
           <span>px</span>
         </div>
         <div class="resize-section">
-          <label>
+          <label class="checkbox-container">
             <input type="checkbox" class="resize-ratio-checkbox checkbox-fix" value="true"/>
             <span>Maintain aspect ratio</span>
           </label>
         </div>
         <div class="resize-section">
-          <label>
+          <label class="checkbox-container">
             <input type="checkbox" class="resize-content-checkbox checkbox-fix" value="true"/>
             <span>Resize canvas content</span>
           </label>