add download button to workspace

images/icon/download.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path fill="#000" d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /></svg>

scripts/glitcher.js

@@ -25,6 +25,7 @@ require( [
 	'views/workspaceview',
 	'views/welcomeview',
 	'views/settingsview',
+	'views/downloadview',
 	'models/controlsmodel',
 	'models/imagemodel',
 	'models/glitchmodel',
@@ -54,6 +55,7 @@ require( [
 	WorkspaceView,
 	WelcomeView,
 	SettingsView,
+	DownloadView,
 	ControlsModel,
 	ImageModel,
 	GlitchModel,
@@ -90,6 +92,7 @@ require( [
 	var aboutView = AboutView( navView.el );
 	var settingsView = SettingsView( navView.el );
 	var fullscreenView = FullscreenView( workspaceView.el );
+	var downloadView = DownloadView( workspaceView.el );
 	var dragAndDropView = DragAndDropView( canvasView.el );
 	var welcomeView = WelcomeView();
 	
@@ -318,13 +321,12 @@ require( [
 	var downloadLinkTimeoutId = NaN;
 
 	function updateDownloadLink () {
-		if ( saveView.getActive() ) {
-			clearTimeout( downloadLinkTimeoutId );
+		clearTimeout( downloadLinkTimeoutId );
 
-			downloadLinkTimeoutId = setTimeout( function () {
-				glitchModel.getImageGenerationFn( saveView.updateDownloadLink, 'original' )( imageModel.getLastFileName() )
-			}, 200 );				
-		}
+		downloadLinkTimeoutId = setTimeout( function () {
+			glitchModel.getImageGenerationFn( saveView.updateDownloadLink, 'original' )( imageModel.getLastFileName() );
+			glitchModel.getImageGenerationFn( downloadView.updateDownloadLink, 'original' )( imageModel.getLastFileName() );
+		}, 200 );				
 	}
 
 	function hideAppLoader () {

scripts/views/downloadview.js

@@ -0,0 +1,49 @@
+/*global define*/
+define(
+	[ 'util/browser', 'util/el', 'util/time' ],
+	function ( browser, elHelper, timeHelper ) {
+		// the fullscreen button
+		// includes a lot of code to account for the different browser implementations
+		function DownloadView ( parentEl ) {
+			if ( ! ( this instanceof DownloadView ) ) {
+				return new DownloadView( parentEl );
+			}
+
+			var self = this;
+			var isInFullScreen = false;
+			var downloadLinkEl = elHelper.createLink(
+					'file.download',
+					'file.downloadtitle',
+					null, null,
+					'download-button',
+					parentEl
+				);
+
+				downloadLinkEl.target = '_blank';;
+
+			// the href attribute of the download link is updated every time
+			// we change a parameter
+			function updateDownloadLink ( newUrl, fileName ) {
+				fileName = fileName || 'glitched';
+				
+				var newNameParts = fileName.split( '/' );
+				var newName = newNameParts.length > 1 ? newNameParts.pop() : newNameParts[0];
+				newName = newName.split( '.' ).shift();
+
+				date = new Date();
+				fileId = timeHelper.dateTimeToLocalStr( date );
+				var newFileName = ( newName + '-glitched-' + fileId + '.png' )
+				newFileName = newFileName.replace( /(\s|\/|:)/gmi, '-' );
+				
+				// setting the download attribute makes the browser
+				// download the link target instead of opening it
+				downloadLinkEl.setAttribute( 'download', newFileName );
+				downloadLinkEl.href = newUrl;
+			}
+			
+			self.updateDownloadLink = updateDownloadLink;
+		}
+
+		return DownloadView;
+	}
+);

serviceworker.js

@@ -25,6 +25,7 @@ function updateStaticCache () {
 					'images/icon/open-in-app.svg',
 					'images/icon/share-variant.svg',
 					'images/icon/settings.svg',
+					'images/icon/download.svg',
 					'lang/en-us.json'
 				] );
 			// These items must be cached for the Service Worker to complete installation

styles/modules/workspace-nav.css

@@ -82,7 +82,8 @@ input.scale-slider {
 	float: left;
 }
 
-.fullscreen-button {
+.fullscreen-button,
+.download-button {
 	display: block;
 	position: absolute;
 	top: 10px;
@@ -102,6 +103,11 @@ input.scale-slider {
 	opacity: 1;
 }
 
+.download-button {
+	top: 60px;
+	background-image: url(../../images/icon/download.svg);
+}
+
 html:not(.has-touch) .fullscreen-button {
 	opacity: 0.7;
 }