diff --git a/css/settings.css b/css/settings.css index 829a727..32dd7df 100644 --- a/css/settings.css +++ b/css/settings.css @@ -161,7 +161,8 @@ border: gold 1px solid; } -/* Gif Export Setting panel*/ +/* Gif/Png Export Setting panel*/ +/*******************************/ .gif-upload-button, .gif-render-button { /*float : right;*/ @@ -173,12 +174,26 @@ margin:10px 0; } -.gif-export-preview { +.gif-export-preview, +.png-export-preview { margin-top:20px; max-width:240px; position:relative; } +.png-export-preview { + margin:10px 0; + overflow: hidden; +} + +.png-export-preview img { + float: left; +} + +.png-upload-status { + margin : 10px 0; +} + .preview-upload-ongoing:before{ content: "Upload ongoing ..."; position: absolute; diff --git a/css/style.css b/css/style.css index a61879a..fe9405b 100644 --- a/css/style.css +++ b/css/style.css @@ -300,3 +300,7 @@ body { .user-message .close:hover { color: black; } + +.image-link { + color : gold; +} \ No newline at end of file diff --git a/index.html b/index.html index 05d758b..36cb01c 100644 --- a/index.html +++ b/index.html @@ -51,12 +51,13 @@
+ - - + +
diff --git a/js/Constants.js b/js/Constants.js index 71a12bc..67be116 100644 --- a/js/Constants.js +++ b/js/Constants.js @@ -44,8 +44,8 @@ var Constants = { SAVE : 'save' } }, - IMAGE_SERVICE_UPLOAD_URL : 'http://screenletstore.appspot.com/__/upload', - IMAGE_SERVICE_GET_URL : 'http://screenletstore.appspot.com/img/', + IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-a.appspot.com/__/upload', + IMAGE_SERVICE_GET_URL : 'http://piskel-imgstore-a.appspot.com/img/', GRID_STROKE_WIDTH: 1, ZOOMED_OUT_BACKGROUND_COLOR : '#A0A0A0', diff --git a/js/controller/settings/GifExportController.js b/js/controller/settings/GifExportController.js index ac7602e..9a5bd75 100644 --- a/js/controller/settings/GifExportController.js +++ b/js/controller/settings/GifExportController.js @@ -1,6 +1,8 @@ (function () { var ns = $.namespace("pskl.controller.settings"); + var URL_MAX_LENGTH = 60; + ns.GifExportController = function (piskelController) { this.piskelController = piskelController; }; @@ -26,6 +28,8 @@ ns.GifExportController.prototype.init = function () { this.radioTemplate_ = pskl.utils.Template.get("gif-export-radio-template"); + this.uploadStatusContainerEl = document.querySelectorAll(".gif-upload-status")[0]; + this.previewContainerEl = document.querySelectorAll(".gif-export-preview")[0]; this.radioGroupEl = document.querySelectorAll(".gif-export-radio-group")[0]; @@ -52,7 +56,9 @@ ns.GifExportController.prototype.onImageUploadCompleted_ = function (imageUrl) { this.updatePreview_(imageUrl); + this.updateStatus_(imageUrl); this.previewContainerEl.classList.remove("preview-upload-ongoing"); + }; ns.GifExportController.prototype.updatePreview_ = function (src) { @@ -127,4 +133,27 @@ gif.render(); }; + + // FIXME : HORRIBLE COPY/PASTA + + ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) { + if (imageUrl) { + var linkTpl = "{{shortLink}}"; + var linkHtml = pskl.utils.Template.replace(linkTpl, { + link : imageUrl, + shortLink : this.shorten_(imageUrl, URL_MAX_LENGTH, '...') + }); + this.uploadStatusContainerEl.innerHTML = 'Your image is now available at : ' + linkHtml; + } else { + // FIXME : Should display error message instead + } + }; + + ns.GifExportController.prototype.shorten_ = function (url, maxLength, suffix) { + if (url.length > maxLength) { + url = url.substring(0, maxLength); + url += suffix; + } + return url; + }; })(); \ No newline at end of file diff --git a/js/controller/settings/SettingsController.js b/js/controller/settings/SettingsController.js index de4a0bd..dc20b2d 100644 --- a/js/controller/settings/SettingsController.js +++ b/js/controller/settings/SettingsController.js @@ -14,6 +14,10 @@ template : 'templates/settings/export-gif.html', controller : ns.GifExportController }, + 'png' : { + template : 'templates/settings/export-png.html', + controller : ns.PngExportController + }, 'import' : { template : 'templates/settings/import.html', controller : ns.ImportController diff --git a/js/drawingtools/BaseTool.js b/js/drawingtools/BaseTool.js index 1d2dfd4..a78d5cf 100644 --- a/js/drawingtools/BaseTool.js +++ b/js/drawingtools/BaseTool.js @@ -33,7 +33,11 @@ ns.BaseTool.prototype.hideHighlightedPixel = function(overlay) { if (this.highlightedPixelRow !== null && this.highlightedPixelCol !== null) { - overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR); + try { + overlay.setPixel(this.highlightedPixelCol, this.highlightedPixelRow, Constants.TRANSPARENT_COLOR); + } catch (e) { + console.warn('ns.BaseTool.prototype.hideHighlightedPixel failed'); + } this.highlightedPixelRow = null; this.highlightedPixelCol = null; } diff --git a/piskel-script-list.js b/piskel-script-list.js index 65247a7..6048fa7 100644 --- a/piskel-script-list.js +++ b/piskel-script-list.js @@ -72,6 +72,7 @@ exports.scripts = [ "js/controller/settings/ApplicationSettingsController.js", "js/controller/settings/ResizeController.js", "js/controller/settings/GifExportController.js", + "js/controller/settings/PngExportController.js", "js/controller/settings/LocalStorageController.js", "js/controller/settings/SaveController.js", "js/controller/settings/ImportController.js", diff --git a/templates/settings.html b/templates/settings.html index bb12a43..22b9a43 100644 --- a/templates/settings.html +++ b/templates/settings.html @@ -43,9 +43,9 @@
PNG
diff --git a/templates/settings/export-gif.html b/templates/settings/export-gif.html index b2c9576..97feaf3 100644 --- a/templates/settings/export-gif.html +++ b/templates/settings/export-gif.html @@ -13,5 +13,6 @@
+
\ No newline at end of file