open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement Dropbox export (#82)

Browse Source
This commit is contained in:
Matheus Faustino 2018-06-02 11:50:27 -03:00
parent 711a3afeee
commit 720791232d
7 changed files with 5444 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
_locales/en/messages.json
View File

@ -1182,10 +1182,25 @@
"description": "Text for link in toolbar pop-up to write a new style for the current URL"
},
"bckpInstStyles": {
"message": "Export styles"
"message": "Export styles"
},
"retrieveBckp": {
"message": "Import styles"
"message": "Import styles"
},
"bckpDropboxStyles": {
"message": "Dropbox Export"
},
"retrieveDropboxBckp": {
"message": "Dropbox Import"
},
"overwriteFileExport": {
"message": "Do you want to overwrite an existing file?"
},
"exportSavedSuccess": {
"message": "File saved with success"
},
"noFileToImport": {
"message": "You don't have a file to import."
},
"optionsBadgeNormal": {
"message": "Background color"

13
dropbox-oauth.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OAuth Receiver</title>
<script src="/vendor/dropbox/dropbox.min.js"></script>
<script src="/js/dropbox-auth-receiver.js"></script>
</head>
<body>
</body>
</html>

61
js/dropbox-auth-receiver.js Normal file
View File

@ -0,0 +1,61 @@
'use strict';
/**
got from the old api
@see: https://github.com/dropbox/dropbox-sdk-js/blob/a88a138c0c3260c3537f30f94b003c1cf64f2fbd/examples/javascript/utils.js
*/
function parseQueryString(str) {
let ret = Object.create(null);
if (typeof str !== 'string') {
return ret;
}
str = str.trim().replace(/^(\?|#|&)/, '');
if (!str) {
return ret;
}
str.split('&').forEach(function (param) {
let parts = param.replace(/\+/g, ' ').split('=');
// Firefox (pre 40) decodes `%3D` to `=`
// https://github.com/sindresorhus/query-string/pull/37
let key = parts.shift();
let val = parts.length > 0 ? parts.join('=') : undefined;
key = decodeURIComponent(key);
// missing `=` should be `null`:
// http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
val = val === undefined ? null : decodeURIComponent(val);
if (ret[key] === undefined) {
ret[key] = val;
} else if (Array.isArray(ret[key])) {
ret[key].push(val);
} else {
ret[key] = [ret[key], val];
}
});
return ret;
}
window.onload = () => {
let data = {'dropbox_access_token': parseQueryString(location.hash).access_token};
/* this was the only way that worked in keeping a value from page to page with location.href */
/* tried localStorage, but didn't work :/ */
if (typeof browser !== 'undefined') {
browser.storage.local.set(data)
.then(() => {
window.location.href = '/manage.html';
});
} else if (chrome.storage) {
chrome.storage.local.set(data, () => {
window.location.href = '/manage.html';
});
}
}

8
manage.html
View File

@ -161,10 +161,14 @@
<script src="manage/updater-ui.js" async></script>
<script src="manage/object-diff.js" async></script>
<script src="manage/import-export.js" async></script>
<script src="manage/incremental-search.js" async></script>
<script src="msgbox/msgbox.js" async></script>
<script src="js/sections-equal.js" async></script>
<script src="js/storage-util.js" async></script>
<script src="vendor/dropbox/dropbox-sdk.js" async></script>
<script src="manage/import-export-dropbox.js" async></script>
</head>
<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
@ -355,6 +359,10 @@
<button id="file-all-styles" i18n-text="bckpInstStyles"></button>
<button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
</p>
<p>
<button id="sync-dropbox-export" i18n-text="bckpDropboxStyles"></button>
<button id="sync-dropbox-import" i18n-text="retrieveDropboxBckp"></button>
</p>
</details>
<p id="manage-text">

152
manage/import-export-dropbox.js Normal file
View File

@ -0,0 +1,152 @@
'use strict';
const DROPBOX_RECEIVER_HTML = '/dropbox-oauth.html';
const DROPBOX_API_KEY = 'uyfixgzre8v1bkg';
const FILENAME = 'stylus.json';
const API_ERROR_STATUS_FILE_NOT_FOUND = 409;
const HTTP_STATUS_CANCEL = 499;
/**
* this was the only way that worked in keeping a value from page to page with location.href (oauth return)
* tried localStorage, but didn't work :/
*/
function hasDropboxAccessToken() {
if (typeof browser !== 'undefined') { /* firefox */
return browser.storage.local.get('dropbox_access_token')
.then(item => {
return item.dropbox_access_token;
});
} else { /* chrome */
return new Promise((resolve, reject) => {
chrome.storage.local.get(['dropbox_access_token'], result => {
resolve(result.dropbox_access_token);
});
});
}
}
function openDropboxOauthPage() {
let client = new Dropbox.Dropbox({clientId: DROPBOX_API_KEY});
let authUrl = client.getAuthenticationUrl(window.location.origin + DROPBOX_RECEIVER_HTML);
window.location.href = authUrl;
}
function uploadFileDropbox(client, stylesText) {
return client.filesUpload({path: '/' + FILENAME, contents: stylesText});
}
$('#sync-dropbox-export').onclick = async () => {
let accessToken = await hasDropboxAccessToken();
if (!accessToken) {
openDropboxOauthPage();
return;
}
let client = new Dropbox.Dropbox({
clientId: DROPBOX_API_KEY,
accessToken: accessToken
});
/**
* check if the file exists, if exists, delete it before upload another
*/
client.filesDownload({path: '/' + FILENAME})
.then(responseGet => {
/** deletes file if user want to */
if (!confirm(t('overwriteFileExport'))) {
return Promise.reject({status: HTTP_STATUS_CANCEL});
}
return client.filesDelete({path: '/' + FILENAME});
})
.then(responseDelete => {
/** file deleted with success, get styles and create a file */
return API.getStyles().then(styles => JSON.stringify(styles, null, '\t'))
})
.then(stylesText => {
/** create file dropbox */
return uploadFileDropbox(client, stylesText);
})
.then(responseSave => {
alert(t('exportSavedSuccess'));
})
.catch(async error => {
/* saving file first time */
if (error.status === API_ERROR_STATUS_FILE_NOT_FOUND) {
let stylesText = await API.getStyles().then(styles => JSON.stringify(styles, null, '\t'));
uploadFileDropbox(client, stylesText)
.then(response => {
alert(t('exportSavedSuccess'));
})
.catch(err => {
console.error(error);
});
return;
}
/* user cancelled the flow */
if (error.status === HTTP_STATUS_CANCEL) {
return;
}
console.error(error);
return;
});
};
$('#sync-dropbox-import').onclick = async () => {
let accessToken = await hasDropboxAccessToken();
if (!accessToken) {
openDropboxOauthPage();
return;
}
let client = new Dropbox.Dropbox({
clientId: DROPBOX_API_KEY,
accessToken: accessToken
});
client.filesDownload({path: '/' + FILENAME})
.then(response => {
let fileBlob = response.fileBlob;
/* it's based on the import-export.js */
const fReader = new FileReader();
fReader.onloadend = event => {
const text = event.target.result;
const maybeUsercss = !/^[\s\r\n]*\[/.test(text) &&
(text.includes('==UserStyle==') || /==UserStyle==/i.test(text));
(!maybeUsercss ?
importFromString(text) :
getOwnTab().then(tab => {
tab.url = URL.createObjectURL(new Blob([text], {type: 'text/css'}));
return API.installUsercss({direct: true, tab})
.then(() => URL.revokeObjectURL(tab.url));
})
);
};
fReader.readAsText(fileBlob, 'utf-8');
})
.catch(error => {
/* no file */
if (error.status === API_ERROR_STATUS_FILE_NOT_FOUND) {
alert(t('noFileToImport'));
return;
}
console.error(err);
});
return;
};

3
manifest.json
View File

@ -77,6 +77,9 @@
"js": ["content/install-hook-usercss.js"]
}
],
"web_accessible_resources": [
"/dropbox-oauth.html"
],
"browser_action": {
"default_icon": {
"16": "/images/icon/16w.png",

5190
vendor/dropbox/dropbox-sdk.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff