mirror of
https://github.com/chinchang/web-maker.git
synced 2025-06-10 03:35:16 +02:00
misc fixes
This commit is contained in:
parent
0c128f0671
commit
15d65f30ea
12
src/auth.js
12
src/auth.js
@ -1,8 +1,6 @@
|
||||
import {
|
||||
trackEvent
|
||||
} from './analytics';
|
||||
|
||||
import firebase from 'firebase/app'
|
||||
import { trackEvent } from './analytics';
|
||||
import firebase from 'firebase/app';
|
||||
import { log } from './utils';
|
||||
|
||||
export const auth = {
|
||||
logout() {
|
||||
@ -32,7 +30,7 @@ export const auth = {
|
||||
});
|
||||
})
|
||||
.catch(function(error) {
|
||||
utils.log(error);
|
||||
log(error);
|
||||
if (error.code === 'auth/account-exists-with-different-credential') {
|
||||
alert(
|
||||
'You have already signed up with the same email using different social login'
|
||||
@ -40,4 +38,4 @@ export const auth = {
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
@ -81,7 +81,7 @@ export default class AddLibrary extends Component {
|
||||
<small>Powered by cdnjs</small>
|
||||
</div>
|
||||
<div style="margin:20px 0;">
|
||||
Choose from popular libraries:
|
||||
Choose from popular libraries:{' '}
|
||||
<select
|
||||
name=""
|
||||
id="js-add-library-select"
|
||||
|
@ -34,7 +34,7 @@ export function MainHeader(props) {
|
||||
class="flex-v-center hint--rounded hint--bottom-left"
|
||||
aria-label="Add a JS/CSS library"
|
||||
>
|
||||
Add library
|
||||
Add library{' '}
|
||||
<span
|
||||
id="js-external-lib-count"
|
||||
style={`display:${props.externalLibCount ? 'inline' : 'none'}`}
|
||||
|
@ -3,6 +3,7 @@ import { log, getHumanDate } from '../utils';
|
||||
import { trackEvent } from '../analytics';
|
||||
import { itemService } from '../itemService';
|
||||
import { alertsService } from '../notifications';
|
||||
import { deferred } from '../deferred';
|
||||
|
||||
export default class SavedItemPane extends Component {
|
||||
constructor(props) {
|
||||
@ -23,6 +24,11 @@ export default class SavedItemPane extends Component {
|
||||
});
|
||||
}
|
||||
}
|
||||
componentDidUpdate(prevProps) {
|
||||
if (this.props.isOpen && !prevProps.isOpen) {
|
||||
window.searchInput.value = '';
|
||||
}
|
||||
}
|
||||
onCloseIntent() {
|
||||
this.props.closeHandler();
|
||||
}
|
||||
@ -124,8 +130,7 @@ export default class SavedItemPane extends Component {
|
||||
} else {
|
||||
d.resolve();
|
||||
}
|
||||
// FIXME: Move from here
|
||||
// toggleSavedItemsPane(false);
|
||||
this.props.closeHandler();
|
||||
|
||||
return d.promise;
|
||||
}
|
||||
@ -216,7 +221,6 @@ export default class SavedItemPane extends Component {
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type=""
|
||||
id="searchInput"
|
||||
class="search-input"
|
||||
onInput={this.searchInputHandler.bind(this)}
|
||||
|
@ -19,7 +19,7 @@ function CheckboxSetting({
|
||||
checked={pref}
|
||||
onChange={onChange}
|
||||
data-setting={name}
|
||||
/>
|
||||
/>{' '}
|
||||
{label}
|
||||
</label>
|
||||
);
|
||||
|
@ -234,6 +234,7 @@ export default class App extends Component {
|
||||
this.toggleLayout(
|
||||
this.state.currentItem.layoutMode || this.state.prefs.layoutMode
|
||||
);
|
||||
this.updateExternalLibCount();
|
||||
this.contentWrap.refreshEditor();
|
||||
}
|
||||
// Creates a new item with passed item's contents
|
||||
@ -822,7 +823,9 @@ export default class App extends Component {
|
||||
}
|
||||
codepenBtnClickHandler(e) {
|
||||
if (this.state.currentItem.cssMode === CssModes.ACSS) {
|
||||
alert("Oops! CodePen doesn't supports Atomic CSS currently.");
|
||||
alert(
|
||||
"Oops! CodePen doesn't supports Atomic CSS currently. \nHere is something you can still do -> https://medium.com/web-maker/sharing-your-atomic-css-work-on-codepen-a402001b26ab"
|
||||
);
|
||||
e.preventDefault();
|
||||
return;
|
||||
}
|
||||
@ -934,6 +937,9 @@ export default class App extends Component {
|
||||
editorFocusHandler(editor) {
|
||||
this.editorWithFocus = editor;
|
||||
}
|
||||
modalOverlayClickHandler() {
|
||||
this.closeAllOverlays();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
@ -1103,7 +1109,10 @@ export default class App extends Component {
|
||||
/>
|
||||
|
||||
<Portal into="body">
|
||||
<div class="modal-overlay" />
|
||||
<div
|
||||
class="modal-overlay"
|
||||
onClick={this.modalOverlayClickHandler.bind(this)}
|
||||
/>
|
||||
</Portal>
|
||||
|
||||
<Icons />
|
||||
|
31
src/db.js
31
src/db.js
@ -1,13 +1,9 @@
|
||||
import './firebaseInit';
|
||||
import firebase from 'firebase/app';
|
||||
import 'firebase/firestore';
|
||||
import {
|
||||
deferred
|
||||
} from './deferred';
|
||||
import {
|
||||
trackEvent
|
||||
} from './analytics';
|
||||
|
||||
import { deferred } from './deferred';
|
||||
import { trackEvent } from './analytics';
|
||||
import { log } from './utils';
|
||||
|
||||
(() => {
|
||||
const FAUX_DELAY = 1;
|
||||
@ -54,7 +50,7 @@ import {
|
||||
if (dbPromise) {
|
||||
return dbPromise;
|
||||
}
|
||||
utils.log('Initializing firestore');
|
||||
log('Initializing firestore');
|
||||
dbPromise = new Promise((resolve, reject) => {
|
||||
if (db) {
|
||||
return resolve(db);
|
||||
@ -69,7 +65,7 @@ import {
|
||||
// timestampsInSnapshots: true
|
||||
// };
|
||||
// db.settings(settings);
|
||||
utils.log('firebase db ready', db);
|
||||
log('firebase db ready', db);
|
||||
resolve(db);
|
||||
})
|
||||
.catch(function(err) {
|
||||
@ -95,7 +91,8 @@ import {
|
||||
const d = deferred();
|
||||
// Will be chrome.storage.sync in extension environment,
|
||||
// otherwise will fallback to localstorage
|
||||
dbSyncAlias.get({
|
||||
dbSyncAlias.get(
|
||||
{
|
||||
lastSeenVersion: ''
|
||||
},
|
||||
result => {
|
||||
@ -111,16 +108,15 @@ import {
|
||||
// Setting the `lastSeenVersion` in localStorage(sync for extension) always
|
||||
// because next time we need to fetch it irrespective of the user being
|
||||
// logged in or out quickly from local storage.
|
||||
dbSyncAlias.set({
|
||||
dbSyncAlias.set(
|
||||
{
|
||||
lastSeenVersion: version
|
||||
},
|
||||
function() {}
|
||||
);
|
||||
if (window.user) {
|
||||
const remoteDb = await getDb();
|
||||
remoteDb
|
||||
.doc(`users/${window.user.uid}`)
|
||||
.update({
|
||||
remoteDb.doc(`users/${window.user.uid}`).update({
|
||||
lastSeenVersion: version
|
||||
});
|
||||
}
|
||||
@ -133,9 +129,12 @@ import {
|
||||
.get()
|
||||
.then(doc => {
|
||||
if (!doc.exists)
|
||||
return remoteDb.doc(`users/${userId}`).set({}, {
|
||||
return remoteDb.doc(`users/${userId}`).set(
|
||||
{},
|
||||
{
|
||||
merge: true
|
||||
});
|
||||
}
|
||||
);
|
||||
const user = doc.data();
|
||||
Object.assign(window.user, user);
|
||||
return user;
|
||||
|
@ -1,9 +1,7 @@
|
||||
import {
|
||||
deferred
|
||||
} from './deferred';
|
||||
import { deferred } from './deferred';
|
||||
import { log } from 'util';
|
||||
|
||||
export const itemService = {
|
||||
|
||||
async getItem(id) {
|
||||
var remoteDb = await window.db.getDb();
|
||||
return remoteDb
|
||||
@ -32,11 +30,11 @@ export const itemService = {
|
||||
},
|
||||
|
||||
async getAllItems() {
|
||||
var t = Date.now()
|
||||
var t = Date.now();
|
||||
var d = deferred();
|
||||
let itemIds = await this.getUserItemIds();
|
||||
itemIds = Object.getOwnPropertyNames(itemIds || {});
|
||||
utils.log('itemids', itemIds);
|
||||
log('itemids', itemIds);
|
||||
|
||||
if (!itemIds.length) {
|
||||
d.resolve([]);
|
||||
@ -46,16 +44,19 @@ export const itemService = {
|
||||
remoteDb
|
||||
.collection('items')
|
||||
.where('createdBy', '==', window.user.uid)
|
||||
.onSnapshot(function (querySnapshot) {
|
||||
.onSnapshot(
|
||||
function(querySnapshot) {
|
||||
querySnapshot.forEach(function(doc) {
|
||||
items.push(doc.data());
|
||||
});
|
||||
utils.log('Items fetched in ', Date.now() - t, 'ms')
|
||||
log('Items fetched in ', Date.now() - t, 'ms');
|
||||
|
||||
d.resolve(items);
|
||||
}, function () {
|
||||
d.resolve([])
|
||||
});
|
||||
},
|
||||
function() {
|
||||
d.resolve([]);
|
||||
}
|
||||
);
|
||||
return d.promise;
|
||||
},
|
||||
|
||||
@ -91,7 +92,7 @@ export const itemService = {
|
||||
}
|
||||
if (window.user) {
|
||||
var remoteDb = await window.db.getDb();
|
||||
utils.log(`Starting to save item ${id}`);
|
||||
log(`Starting to save item ${id}`);
|
||||
item.createdBy = window.user.uid;
|
||||
remotePromise = remoteDb
|
||||
.collection('items')
|
||||
@ -100,7 +101,7 @@ export const itemService = {
|
||||
merge: true
|
||||
})
|
||||
.then(arg => {
|
||||
utils.log('Document written', arg);
|
||||
log('Document written', arg);
|
||||
d.resolve();
|
||||
})
|
||||
.catch(d.reject);
|
||||
@ -120,7 +121,8 @@ export const itemService = {
|
||||
// save new items
|
||||
window.db.local.set(items, d.resolve);
|
||||
// Push in new item IDs
|
||||
window.db.local.get({
|
||||
window.db.local.get(
|
||||
{
|
||||
items: {}
|
||||
},
|
||||
function(result) {
|
||||
@ -163,21 +165,22 @@ export const itemService = {
|
||||
return d.promise;
|
||||
}
|
||||
const remoteDb = await window.db.getDb();
|
||||
utils.log(`Starting to save item ${id}`);
|
||||
log(`Starting to save item ${id}`);
|
||||
return remoteDb
|
||||
.collection('items')
|
||||
.doc(id)
|
||||
.delete()
|
||||
.then(arg => {
|
||||
utils.log('Document removed', arg);
|
||||
log('Document removed', arg);
|
||||
})
|
||||
.catch(error => utils.log(error));
|
||||
.catch(error => log(error));
|
||||
},
|
||||
|
||||
async setItemForUser(itemId) {
|
||||
// When not logged in
|
||||
if (!window.user) {
|
||||
return window.db.local.get({
|
||||
return window.db.local.get(
|
||||
{
|
||||
items: {}
|
||||
},
|
||||
function(result) {
|
||||
@ -196,17 +199,18 @@ export const itemService = {
|
||||
[`items.${itemId}`]: true
|
||||
})
|
||||
.then(arg => {
|
||||
utils.log(`Item ${itemId} set for user`, arg);
|
||||
log(`Item ${itemId} set for user`, arg);
|
||||
window.user.items = window.user.items || {};
|
||||
window.user.items[itemId] = true;
|
||||
})
|
||||
.catch(error => utils.log(error));
|
||||
.catch(error => log(error));
|
||||
},
|
||||
|
||||
async unsetItemForUser(itemId) {
|
||||
// When not logged in
|
||||
if (!window.user) {
|
||||
return window.db.local.get({
|
||||
return window.db.local.get(
|
||||
{
|
||||
items: {}
|
||||
},
|
||||
function(result) {
|
||||
@ -226,8 +230,8 @@ export const itemService = {
|
||||
})
|
||||
.then(arg => {
|
||||
delete window.user.items[itemId];
|
||||
utils.log(`Item ${itemId} unset for user`, arg);
|
||||
log(`Item ${itemId} unset for user`, arg);
|
||||
})
|
||||
.catch(error => utils.log(error));
|
||||
}
|
||||
.catch(error => log(error));
|
||||
}
|
||||
};
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { handleDownloadsPermission } from './utils';
|
||||
import { handleDownloadsPermission, log } from './utils';
|
||||
import { trackEvent } from './analytics';
|
||||
|
||||
function saveScreenshot(dataURI) {
|
||||
@ -59,7 +59,7 @@ function saveScreenshot(dataURI) {
|
||||
}
|
||||
|
||||
function errorHandler(e) {
|
||||
utils.log(e);
|
||||
log(e);
|
||||
}
|
||||
|
||||
// create a blob for writing to a file
|
||||
|
64
src/utils.js
64
src/utils.js
@ -1,18 +1,8 @@
|
||||
import {
|
||||
trackEvent
|
||||
} from './analytics';
|
||||
import { trackEvent } from './analytics';
|
||||
|
||||
import {
|
||||
computeHtml,
|
||||
computeCss,
|
||||
computeJs
|
||||
} from './computes';
|
||||
import {
|
||||
JsModes
|
||||
} from './codeModes';
|
||||
import {
|
||||
deferred
|
||||
} from './deferred';
|
||||
import { computeHtml, computeCss, computeJs } from './computes';
|
||||
import { JsModes } from './codeModes';
|
||||
import { deferred } from './deferred';
|
||||
const esprima = require('esprima');
|
||||
|
||||
window.DEBUG = document.cookie.indexOf('wmdebug') > -1;
|
||||
@ -110,9 +100,7 @@ export function log() {
|
||||
* Contributed by Ariya Hidayat!
|
||||
* @param code {string} Code to be protected from infinite loops.
|
||||
*/
|
||||
export function addInfiniteLoopProtection(code, {
|
||||
timeout
|
||||
}) {
|
||||
export function addInfiniteLoopProtection(code, { timeout }) {
|
||||
var loopId = 1;
|
||||
var patches = [];
|
||||
var varPrefix = '_wmloopvar';
|
||||
@ -120,7 +108,8 @@ export function addInfiniteLoopProtection(code, {
|
||||
var checkStr = `\nif (Date.now() - %d > ${timeout}) { window.top.previewException(new Error("Infinite loop")); break;}\n`;
|
||||
|
||||
esprima.parse(
|
||||
code, {
|
||||
code,
|
||||
{
|
||||
tolerant: true,
|
||||
range: true,
|
||||
jsx: true
|
||||
@ -182,7 +171,8 @@ export function getHumanDate(timestamp) {
|
||||
var d = new Date(timestamp);
|
||||
var retVal =
|
||||
d.getDate() +
|
||||
' ' + [
|
||||
' ' +
|
||||
[
|
||||
'January',
|
||||
'February',
|
||||
'March',
|
||||
@ -223,7 +213,8 @@ export function downloadFile(fileName, blob) {
|
||||
a.remove();
|
||||
}
|
||||
if (window.IS_EXTENSION) {
|
||||
chrome.downloads.download({
|
||||
chrome.downloads.download(
|
||||
{
|
||||
url: window.URL.createObjectURL(blob),
|
||||
filename: fileName,
|
||||
saveAs: true
|
||||
@ -266,7 +257,8 @@ export function writeFile(name, blob, cb) {
|
||||
1024 * 1024 * 5,
|
||||
function(fs) {
|
||||
fs.root.getFile(
|
||||
name, {
|
||||
name,
|
||||
{
|
||||
create: true
|
||||
},
|
||||
function(fileEntry) {
|
||||
@ -344,18 +336,18 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
|
||||
if (!isForExport) {
|
||||
contents +=
|
||||
'<script src="' +
|
||||
(chrome.extension ?
|
||||
chrome.extension.getURL('lib/screenlog.js') :
|
||||
`${location.origin}${BASE_PATH}/lib/screenlog.js`) +
|
||||
(chrome.extension
|
||||
? chrome.extension.getURL('lib/screenlog.js')
|
||||
: `${location.origin}${BASE_PATH}/lib/screenlog.js`) +
|
||||
'"></script>';
|
||||
}
|
||||
|
||||
if (item.jsMode === JsModes.ES6) {
|
||||
contents +=
|
||||
'<script src="' +
|
||||
(chrome.extension ?
|
||||
chrome.extension.getURL('lib/transpilers/babel-polyfill.min.js') :
|
||||
`${
|
||||
(chrome.extension
|
||||
? chrome.extension.getURL('lib/transpilers/babel-polyfill.min.js')
|
||||
: `${
|
||||
location.origin
|
||||
}${BASE_PATH}/lib/transpilers/babel-polyfill.min.js`) +
|
||||
'"></script>';
|
||||
@ -364,9 +356,9 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
|
||||
if (typeof js === 'string') {
|
||||
contents += '<script>\n' + js + '\n//# sourceURL=userscript.js';
|
||||
} else {
|
||||
var origin = chrome.i18n.getMessage() ?
|
||||
`chrome-extension://${chrome.i18n.getMessage('@@extension_id')}` :
|
||||
`${location.origin}`;
|
||||
var origin = chrome.i18n.getMessage()
|
||||
? `chrome-extension://${chrome.i18n.getMessage('@@extension_id')}`
|
||||
: `${location.origin}`;
|
||||
contents +=
|
||||
'<script src="' + `filesystem:${origin}/temporary/script.js` + '">';
|
||||
}
|
||||
@ -380,9 +372,9 @@ export function saveAsHtml(item) {
|
||||
var cssPromise = computeCss(item.css, item.cssMode);
|
||||
var jsPromise = computeJs(item.js, item.jsMode, false);
|
||||
Promise.all([htmlPromise, cssPromise, jsPromise]).then(function(result) {
|
||||
var html = result[0],
|
||||
css = result[1],
|
||||
js = result[2];
|
||||
var html = result[0].code,
|
||||
css = result[1].code,
|
||||
js = result[2].code;
|
||||
|
||||
var fileContent = getCompleteHtml(html, css, js, item, true);
|
||||
|
||||
@ -417,14 +409,16 @@ export function handleDownloadsPermission() {
|
||||
d.resolve();
|
||||
return d.promise;
|
||||
}
|
||||
chrome.permissions.contains({
|
||||
chrome.permissions.contains(
|
||||
{
|
||||
permissions: ['downloads']
|
||||
},
|
||||
function(result) {
|
||||
if (result) {
|
||||
d.resolve();
|
||||
} else {
|
||||
chrome.permissions.request({
|
||||
chrome.permissions.request(
|
||||
{
|
||||
permissions: ['downloads']
|
||||
},
|
||||
function(granted) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user