diff --git a/images/icon/download.svg b/images/icon/download.svg new file mode 100644 index 0000000..c65a448 --- /dev/null +++ b/images/icon/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/scripts/glitcher.js b/scripts/glitcher.js index e9c467d..e3e348e 100644 --- a/scripts/glitcher.js +++ b/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 () { diff --git a/scripts/views/downloadview.js b/scripts/views/downloadview.js new file mode 100644 index 0000000..3b9a985 --- /dev/null +++ b/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; + } +); \ No newline at end of file diff --git a/serviceworker.js b/serviceworker.js index 7af4548..de44ac1 100644 --- a/serviceworker.js +++ b/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 diff --git a/styles/modules/workspace-nav.css b/styles/modules/workspace-nav.css index 185b86f..d5f348b 100644 --- a/styles/modules/workspace-nav.css +++ b/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; }