Fix code style and folder structure of the feature

This commit is contained in:
Matheus Faustino 2018-08-06 22:50:00 -03:00
parent 9b6475e30f
commit 457e05025d
12 changed files with 82 additions and 38 deletions

View File

@ -1187,10 +1187,10 @@
"retrieveBckp": { "retrieveBckp": {
"message": "Import styles" "message": "Import styles"
}, },
"bckpDropboxStyles": { "syncDropboxStyles": {
"message": "Dropbox Export" "message": "Dropbox Export"
}, },
"retrieveDropboxBckp": { "retrieveDropboxSync": {
"message": "Dropbox Import" "message": "Dropbox Import"
}, },
"overwriteFileExport": { "overwriteFileExport": {
@ -1203,22 +1203,22 @@
"message": "You don't have a file to import." "message": "You don't have a file to import."
}, },
"connectingDropbox": { "connectingDropbox": {
"message": "Connecting Dropbox." "message": "Connecting Dropbox..."
}, },
"gettingStyles": { "gettingStyles": {
"message": "Getting all styles." "message": "Getting all styles..."
}, },
"compactStyles": { "zipStyles": {
"message": "Compacting styles." "message": "Zipping styles..."
}, },
"descompactStyles": { "unzipStyles": {
"message": "Descompating styles." "message": "Unzipping styles..."
}, },
"readingStyles": { "readingStyles": {
"message": "Reading styles." "message": "Reading styles..."
}, },
"uploadingFile": { "uploadingFile": {
"message": "Uploading File." "message": "Uploading File..."
}, },
"optionsBadgeNormal": { "optionsBadgeNormal": {
"message": "Background color" "message": "Background color"

View File

@ -167,10 +167,11 @@
<script src="js/sections-equal.js" async></script> <script src="js/sections-equal.js" async></script>
<script src="js/storage-util.js" async></script> <script src="js/storage-util.js" async></script>
<script src="vendor/dropbox/dropbox-sdk.js" async></script> <script src="sync/vendor/dropbox/dropbox-sdk.js" async></script>
<script src="vendor/zipjs/zip.js" defer></script> <script src="sync/vendor/zipjs/zip.js" defer></script>
<script src="manage/compress-text.js" defer></script> <script src="sync/compress-text.js" defer></script>
<script src="manage/import-export-dropbox.js" async></script> <script src="sync/cross-browser-functions.js" defer></script>
<script src="sync/import-export-dropbox.js" async></script>
</head> </head>
<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage"> <body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
@ -370,8 +371,8 @@
<div id="backup-buttons"> <div id="backup-buttons">
<button id="file-all-styles" i18n-text="bckpInstStyles"></button> <button id="file-all-styles" i18n-text="bckpInstStyles"></button>
<button id="unfile-all-styles" i18n-text="retrieveBckp"></button> <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
<button id="sync-dropbox-export" i18n-text="bckpDropboxStyles"></button> <button id="sync-dropbox-export" i18n-text="syncDropboxStyles"></button>
<button id="sync-dropbox-import" i18n-text="retrieveDropboxBckp"></button> <button id="sync-dropbox-import" i18n-text="retrieveDropboxSync"></button>
</div> </div>
</details> </details>

View File

@ -1,10 +1,16 @@
/* global messageBox */ /* global messageBox */
/* global zip */
'use strict'; 'use strict';
onDOMready().then(() => { onDOMready().then(() => {
zip.workerScriptsPath = '/vendor/zipjs/'; zip.workerScriptsPath = '/sync/vendor/zipjs/';
}); });
/**
* @param {String} filename
* @param {String} text content of the file as text
* @returns {Promise<Blob>} resolves to a blob object representing the zip file
*/
function createZipFileFromText(filename, text) { function createZipFileFromText(filename, text) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
zip.createWriter(new zip.BlobWriter('application/zip'), writer => { zip.createWriter(new zip.BlobWriter('application/zip'), writer => {
@ -17,6 +23,10 @@ function createZipFileFromText(filename, text) {
}); });
} }
/**
* @param {Object} blob object of zip file
* @returns {Promise<String>} resolves to a string the content of the first file of the zip
*/
function readZipFileFromBlob(blob) { function readZipFileFromBlob(blob) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
zip.createReader(new zip.BlobReader(blob), zipReader => { zip.createReader(new zip.BlobReader(blob), zipReader => {

View File

@ -0,0 +1,26 @@
'use strict';
/**
* @returns {String} returns a redirect URL to be used in |launchWebAuthFlow|
*/
function getRedirectUrlAuthFlow() {
const browserApi = typeof browser === 'undefined' ? chrome : browser;
return browserApi.identity.getRedirectURL();
}
/**
* @param {Object} details based on chrome api
* @param {string} details.url url that initiates the auth flow
* @param {boolean} details.interactive if it is true a window will be displayed
* @return {Promise} returns the url containing the token for extraction
*/
function launchWebAuthFlow(details) {
if (typeof browser === 'undefined') {
return new Promise(resolve => {
chrome.identity.launchWebAuthFlow(details, resolve);
});
}
return browser.identity.launchWebAuthFlow(details);
}

View File

@ -1,4 +1,9 @@
/* global messageBox */ /* global messageBox */
/* global Dropbox */
/* global createZipFileFromText */
/* global readZipFileFromBlob */
/* global launchWebAuthFlow */
/* global getRedirectUrlAuthFlow */
'use strict'; 'use strict';
const DROPBOX_API_KEY = ''; const DROPBOX_API_KEY = '';
@ -29,11 +34,10 @@ function hasDropboxAccessToken() {
} }
function requestDropboxAccessToken() { function requestDropboxAccessToken() {
const browserApi = typeof browser === 'undefined' ? chrome : browser;
const client = new Dropbox.Dropbox({clientId: DROPBOX_API_KEY}); const client = new Dropbox.Dropbox({clientId: DROPBOX_API_KEY});
const authUrl = client.getAuthenticationUrl(browserApi.identity.getRedirectURL()); const authUrl = client.getAuthenticationUrl(getRedirectUrlAuthFlow());
return browserApi.identity.launchWebAuthFlow({url: authUrl, interactive: true}) return launchWebAuthFlow({url: authUrl, interactive: true})
.then(urlReturned => { .then(urlReturned => {
const params = new URLSearchParams(new URL(urlReturned).hash.replace('#', '')); const params = new URLSearchParams(new URL(urlReturned).hash.replace('#', ''));
chromeLocal.setValue('dropbox_access_token', params.get('access_token')); chromeLocal.setValue('dropbox_access_token', params.get('access_token'));
@ -46,10 +50,11 @@ function uploadFileDropbox(client, stylesText) {
} }
$('#sync-dropbox-export').onclick = () => { $('#sync-dropbox-export').onclick = () => {
const title = t('syncDropboxStyles');
messageProgressBar({title: title, text: t('connectingDropbox')});
messageProgressBar({title: t('bckpDropboxStyles'), text: t('connectingDropbox')}); hasDropboxAccessToken()
.then(token => token || requestDropboxAccessToken())
hasDropboxAccessToken().then(token => token || requestDropboxAccessToken())
.then(token => { .then(token => {
const client = new Dropbox.Dropbox({ const client = new Dropbox.Dropbox({
clientId: DROPBOX_API_KEY, clientId: DROPBOX_API_KEY,
@ -68,46 +73,47 @@ $('#sync-dropbox-export').onclick = () => {
}) })
// file deleted with success, get styles and create a file // file deleted with success, get styles and create a file
.then(() => { .then(() => {
messageProgressBar({title: t('bckpDropboxStyles'), text: t('gettingStyles')}); messageProgressBar({title: title, text: t('gettingStyles')});
return API.getStyles().then(styles => JSON.stringify(styles, null, '\t')); return API.getStyles().then(styles => JSON.stringify(styles, null, '\t'));
}) })
// create zip file // create zip file
.then(stylesText => { .then(stylesText => {
messageProgressBar({title: t('bckpDropboxStyles'), text: t('compactStyles')}); messageProgressBar({title: title, text: t('zipStyles')});
return createZipFileFromText(FILENAME_ZIP_FILE, stylesText); return createZipFileFromText(FILENAME_ZIP_FILE, stylesText);
}) })
// create file dropbox // create file dropbox
.then(zipedText =>{ .then(zipedText => {
messageProgressBar({title: t('bckpDropboxStyles'), text: t('uploadingFile')}); messageProgressBar({title: title, text: t('uploadingFile')});
return uploadFileDropbox(client, zipedText); return uploadFileDropbox(client, zipedText);
}) })
// gives feedback to user // gives feedback to user
.then(() => messageProgressBar({title: t('bckpDropboxStyles'), text: t('exportSavedSuccess')})) .then(() => messageProgressBar({title: title, text: t('exportSavedSuccess')}))
// handle not found cases and cancel action // handle not found cases and cancel action
.catch(error => { .catch(error => {
console.log(error);
// saving file first time // saving file first time
if (error.status === API_ERROR_STATUS_FILE_NOT_FOUND) { if (error.status === API_ERROR_STATUS_FILE_NOT_FOUND) {
API.getStyles() API.getStyles()
.then(styles => { .then(styles => {
messageProgressBar({title: t('bckpDropboxStyles'), text: t('gettingStyles')}); messageProgressBar({title: title, text: t('gettingStyles')});
return JSON.stringify(styles, null, '\t'); return JSON.stringify(styles, null, '\t');
}) })
.then(stylesText => { .then(stylesText => {
messageProgressBar({title: t('bckpDropboxStyles'), text: t('compactStyles')}); messageProgressBar({title: title, text: t('zipStyles')});
return createZipFileFromText(FILENAME_ZIP_FILE, stylesText); return createZipFileFromText(FILENAME_ZIP_FILE, stylesText);
}) })
.then(zipedText => { .then(zipedText => {
messageProgressBar({title: t('bckpDropboxStyles'), text: t('uploadingFile')}); messageProgressBar({title: title, text: t('uploadingFile')});
return uploadFileDropbox(client, zipedText); return uploadFileDropbox(client, zipedText);
}) })
.then(() => messageProgressBar({title: t('bckpDropboxStyles'), text: t('exportSavedSuccess')})) .then(() => messageProgressBar({title: title, text: t('exportSavedSuccess')}))
.catch(err => messageBox.alert(err)); .catch(err => messageBox.alert(err));
return; return;
@ -124,10 +130,11 @@ $('#sync-dropbox-export').onclick = () => {
}; };
$('#sync-dropbox-import').onclick = () => { $('#sync-dropbox-import').onclick = () => {
const title = t('retrieveDropboxSync');
messageProgressBar({title: title, text: t('connectingDropbox')});
messageProgressBar({title: t('retrieveDropboxBckp'), text: t('connectingDropbox')}); hasDropboxAccessToken()
.then(token => token || requestDropboxAccessToken())
hasDropboxAccessToken().then(token => token || requestDropboxAccessToken())
.then(token => { .then(token => {
const client = new Dropbox.Dropbox({ const client = new Dropbox.Dropbox({
clientId: DROPBOX_API_KEY, clientId: DROPBOX_API_KEY,
@ -136,12 +143,12 @@ $('#sync-dropbox-import').onclick = () => {
return client.filesDownload({path: '/' + DROPBOX_FILE}) return client.filesDownload({path: '/' + DROPBOX_FILE})
.then(response => { .then(response => {
messageProgressBar({title: t('retrieveDropboxBckp'), text: t('descompactStyles')}); messageProgressBar({title: title, text: t('unzipStyles')});
return readZipFileFromBlob(response.fileBlob); return readZipFileFromBlob(response.fileBlob);
}) })
.then(zipedFileBlob => { .then(zipedFileBlob => {
messageProgressBar({title: t('retrieveDropboxBckp'), text: t('readingStyles')}); messageProgressBar({title: title, text: t('readingStyles')});
const fileBlob = zipedFileBlob; const fileBlob = zipedFileBlob;