mirror of
https://github.com/chinchang/web-maker.git
synced 2025-06-11 12:11:06 +02:00
Merge remote-tracking branch 'origin/master' into manifestv3
This commit is contained in:
Kushagra Gour
@ -224,6 +224,8 @@ gulp.task('buildDistFolder', function (cb) {
|
||||
child_process.execSync('rm -rf dist');
|
||||
child_process.execSync('mv packages/website/_site dist');
|
||||
child_process.execSync(`mv ${APP_FOLDER} dist/`);
|
||||
child_process.execSync(`mkdir dist/signup`);
|
||||
child_process.execSync(`cp packages/signup/dist/*.* dist/signup/`);
|
||||
cb();
|
||||
});
|
||||
|
||||
|
||||
2390
package-lock.json
generated
2390
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "web-maker",
|
||||
"version": "6.1.0",
|
||||
"version": "6.2.0",
|
||||
"description": "A blazing fast & offline web playground",
|
||||
"scripts": {
|
||||
"start": "concurrently --kill-others \"gulp start-preview-server\" \"npm run -s dev\"",
|
||||
@ -75,8 +75,8 @@
|
||||
"code-blast-codemirror": "chinchang/code-blast-codemirror#web-maker",
|
||||
"codemirror": "^5.65.16",
|
||||
"copy-webpack-plugin": "^4.5.1",
|
||||
"esprima": "^4.0.0",
|
||||
"firebase": "^10.8.0",
|
||||
"esprima-next": "^6.0.3",
|
||||
"jszip": "^3.1.5",
|
||||
"preact": "^10.17.0",
|
||||
"preact-portal": "^1.1.3",
|
||||
|
||||
3
packages/signup/README.md
Normal file
3
packages/signup/README.md
Normal file
@ -0,0 +1,3 @@
|
||||
command to build
|
||||
|
||||
npx parcel build index.html --public-url /signup
|
||||
1187
packages/signup/dist/index.1903c1b7.js
vendored
Normal file
1187
packages/signup/dist/index.1903c1b7.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
packages/signup/dist/index.1903c1b7.js.map
vendored
Normal file
1
packages/signup/dist/index.1903c1b7.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
11
packages/signup/dist/index.html
vendored
Normal file
11
packages/signup/dist/index.html
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>signInWithPopup</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>signInWithPopup</h1>
|
||||
|
||||
<script src="/index.a3cfa626.js" defer=""></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -6,6 +6,6 @@
|
||||
<body>
|
||||
<h1>signInWithPopup</h1>
|
||||
|
||||
<script type="module" src="signInWithPopup.js"></script>
|
||||
<script type="module" src="./signInWithPopup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
@ -558,7 +558,7 @@
|
||||
<div class="hero-img">
|
||||
<img
|
||||
class="screenshot"
|
||||
src="images/ss1.png?v4"
|
||||
src="images/ss1.webp"
|
||||
height=""
|
||||
alt="Web Maker working screen"
|
||||
/>
|
||||
|
||||
BIN
packages/website/images/ss1.webp
Normal file
BIN
packages/website/images/ss1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
@ -121,10 +121,7 @@ layout: default.html
|
||||
class="say"
|
||||
>
|
||||
<div class="say__name">
|
||||
<img
|
||||
src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECLSb76_ywaCj7gEiC3ZjYXJkX3Bob3RvKigyMTBmZjI0YjYxM2VkZWZiNmYyNTkwZjEwN2RlNjBlYjRkOTE2YmJlMAHafGv-p112HZJ-KreQxPF8-yn0EQ"
|
||||
alt=""
|
||||
/>
|
||||
<img src="" alt="" />
|
||||
<div>Joacim Nilsson</div>
|
||||
</div>
|
||||
<p>This is something I will be using alot. Thank you! :D</p>
|
||||
@ -135,10 +132,7 @@ layout: default.html
|
||||
class="say"
|
||||
>
|
||||
<div class="say__name">
|
||||
<img
|
||||
src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCK_Jvffnu_2AXSILdmNhcmRfcGhvdG8qKDk3Njg3NDE2NjI1YThmNDgyMDk4OWM3MTBiMTMxNmUzOWQwZGNhMWEwAbe0xm_6UPdrZFAaScMLUOpKFfHP"
|
||||
alt=""
|
||||
/>
|
||||
<img src="" alt="" />
|
||||
<div>Oksana Borukh</div>
|
||||
</div>
|
||||
<p>It's fantastic! I'm glad I've discovered it! Thanks!</p>
|
||||
@ -215,10 +209,7 @@ layout: default.html
|
||||
class="say"
|
||||
>
|
||||
<div class="say__name">
|
||||
<img
|
||||
src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCNn44MXB2a_DZSILdmNhcmRfcGhvdG8qKDM2YTNiMDhkYzEyMmVkY2IyZjM2YzY0NTAzNTdjMWU5YWVhM2JmM2MwAc4a1i_Vddj6AIdGg9rpk_xdMePf"
|
||||
alt=""
|
||||
/>
|
||||
<img src="" alt="" />
|
||||
<div>Steve Lack</div>
|
||||
</div>
|
||||
<p>Thanks for creating this. What a great tool for productivity!</p>
|
||||
@ -230,10 +221,7 @@ layout: default.html
|
||||
class="say"
|
||||
>
|
||||
<div class="say__name">
|
||||
<img
|
||||
src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECOrDgpLHt4jwzwEiC3ZjYXJkX3Bob3RvKig2ZWNkNGM4MmM0MDY2ZmFkMDUzZmE3MGY4MWE3NWM5OTIzZjA4MGRlMAEmU4uVE7yiEAzp6wGGR7B3MMjErg"
|
||||
alt=""
|
||||
/>
|
||||
<img src="" alt="" />
|
||||
<div>Margaret H</div>
|
||||
</div>
|
||||
<p>
|
||||
|
||||
@ -15,6 +15,6 @@ window.addEventListener('message', e => {
|
||||
|
||||
// Recieving from preview iframe
|
||||
if (e.data && e.data.logs) {
|
||||
window.opener.postMessage(e.data, '*');
|
||||
(window.opener || window.top).postMessage(e.data, '*');
|
||||
}
|
||||
});
|
||||
|
||||
22
preview/preview.htm
Normal file
22
preview/preview.htm
Normal file
@ -0,0 +1,22 @@
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#demo-frame {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
background: white;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<iframe
|
||||
src="about://blank"
|
||||
frameborder="0"
|
||||
id="demo-frame"
|
||||
allowfullscreen
|
||||
></iframe>
|
||||
|
||||
<script src="detached-window.js"></script>
|
||||
</body>
|
||||
@ -106,7 +106,25 @@ export function Changelog(props) {
|
||||
return (
|
||||
<div>
|
||||
<h1>Whats new?</h1>
|
||||
<Notification version="6.1.0" {...props} isLatest={true}>
|
||||
<Notification version="6.2.0" {...props} isLatest={true}>
|
||||
<li>Preact template updated to latest version with hooks.</li>
|
||||
<li>Mail option added in help modal.</li>
|
||||
<li>
|
||||
JS error checks updated to latest version. No more red errors on
|
||||
latest syntax.
|
||||
</li>
|
||||
<NotificationItem type="bug">
|
||||
Localstorage/Cookies not being available to creations is now fixed.
|
||||
</NotificationItem>
|
||||
<NotificationItem type="bug">
|
||||
Bugs related to light-weight mode and creation not opening on page
|
||||
refresh in logged out state are fixed.
|
||||
</NotificationItem>
|
||||
<NotificationItem type="bug">
|
||||
Code auto-format for JS is fixed.
|
||||
</NotificationItem>
|
||||
</Notification>
|
||||
<Notification version="6.1.0" {...props}>
|
||||
<li>
|
||||
<strong>🕹️ Kaboom game engine</strong>: Kaboom.js is now available in
|
||||
quick-add library list. Also, a new template to quick-start in Kaboom
|
||||
|
||||
@ -21,12 +21,15 @@ const minCodeWrapSize = 33;
|
||||
/* global htmlCodeEl
|
||||
*/
|
||||
|
||||
const PREVIEW_FRAME_HOST = window.DEBUG
|
||||
const PREVIEW_FRAME_HOST = window.location.href.includes('localhost')
|
||||
? 'http://localhost:7888'
|
||||
: `https://wbmakr.com`;
|
||||
|
||||
let cachedSandboxAttribute = '';
|
||||
|
||||
// prevents refreshes when iframe is currently being refreshed
|
||||
let frameRefreshPromise = null;
|
||||
|
||||
export default class ContentWrap extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@ -167,15 +170,24 @@ export default class ContentWrap extends Component {
|
||||
// 2. we cache and remove the sandbox attribute and refresh again so that it gets served by SW
|
||||
// 3. we add back cached sandbox attr & write the contents to the iframe
|
||||
const refreshAndDo = fn => {
|
||||
Promise.race([
|
||||
// Just in case onload promise doesn't resolves
|
||||
new Promise(resolve => {
|
||||
setTimeout(resolve, 400);
|
||||
}),
|
||||
new Promise(resolve => {
|
||||
this.frame.onload = resolve;
|
||||
})
|
||||
]).then(fn);
|
||||
frameRefreshPromise =
|
||||
frameRefreshPromise ||
|
||||
// Race earlier had a settimeout too as a fallback. It was removed because onload
|
||||
// was firing 100% times.
|
||||
// TODO: remove race
|
||||
Promise.race([
|
||||
new Promise(resolve => {
|
||||
this.frame.onload = () => {
|
||||
resolve('onload');
|
||||
};
|
||||
})
|
||||
]);
|
||||
|
||||
frameRefreshPromise.then(resolutionReason => {
|
||||
frameRefreshPromise = null;
|
||||
log('resolved with ', resolutionReason);
|
||||
fn();
|
||||
});
|
||||
// Setting to blank string cause frame to reload
|
||||
// if (window.IS_EXTENSION) {
|
||||
// this.frame.src = '';
|
||||
@ -187,9 +199,7 @@ export default class ContentWrap extends Component {
|
||||
if (!cachedSandboxAttribute && window.DEBUG) {
|
||||
// alert('sandbox empty');
|
||||
}
|
||||
// console.log('setting back sandbox attr', sandbox);
|
||||
// this.frame.setAttribute('sandbox', cachedSandboxAttribute);
|
||||
// this.frame.removeAttribute('sweet');
|
||||
log('sending PM');
|
||||
|
||||
// if (window.IS_EXTENSION) {
|
||||
// this.frame.contentDocument.open();
|
||||
@ -931,11 +941,11 @@ export default class ContentWrap extends Component {
|
||||
/>
|
||||
) : (
|
||||
<iframe
|
||||
src={`./indexpm.html`}
|
||||
src={`${PREVIEW_FRAME_HOST}/preview.htm`}
|
||||
ref={el => (this.frame = el)}
|
||||
frameborder="0"
|
||||
id="demo-frame"
|
||||
sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts allow-top-navigation-by-user-activation"
|
||||
sandbox="allow-same-origin allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts allow-top-navigation-by-user-activation"
|
||||
allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"
|
||||
allowpaymentrequest="true"
|
||||
allowfullscreen="true"
|
||||
|
||||
@ -202,10 +202,12 @@ export class CreateNewModal extends Component {
|
||||
}
|
||||
})}
|
||||
</div>
|
||||
<p>
|
||||
2 files mode creations available in Free plan. To create unlimited
|
||||
files mode creations, upgrade to <ProBadge />.
|
||||
</p>
|
||||
{!window.user?.isPro && (
|
||||
<p>
|
||||
2 files mode creations available in Free plan. To create
|
||||
unlimited files mode creations, upgrade to <ProBadge />.
|
||||
</p>
|
||||
)}
|
||||
<div class="show-when-extension">
|
||||
Files modes is currently only available in Web app.{' '}
|
||||
<a href="https://webmaker.app/create/">Try the Web app now</a>.
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { Icon } from './Icons';
|
||||
import Modal from './Modal';
|
||||
import { Stack, VStack } from './Stack';
|
||||
import { Button } from './common';
|
||||
@ -68,6 +69,7 @@ export function HelpModal(props) {
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-icon"
|
||||
>
|
||||
<Icon name="twitter-icon" />
|
||||
<Trans>Share Web Maker</Trans>
|
||||
</a>{' '}
|
||||
<a
|
||||
@ -103,6 +105,15 @@ export function HelpModal(props) {
|
||||
</svg>
|
||||
<Trans>Report a bug</Trans>
|
||||
</a>
|
||||
<a
|
||||
href="mailto:chinchang457@gmail.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="btn btn-icon"
|
||||
>
|
||||
<Icon name="email" />
|
||||
<Trans>Mail me</Trans>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
||||
@ -128,6 +128,9 @@ export function Icons() {
|
||||
<symbol id="check-circle" viewBox="0 0 24 24">
|
||||
<path d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z" />
|
||||
</symbol>
|
||||
<symbol id="email" viewBox="0 0 24 24">
|
||||
<path d="M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z" />
|
||||
</symbol>
|
||||
<symbol id="fork" viewBox="0 0 24 24">
|
||||
<path d="M13 14c-3.36 0-4.46 1.35-4.82 2.24C9.25 16.7 10 17.76 10 19a3 3 0 0 1-3 3 3 3 0 0 1-3-3c0-1.31.83-2.42 2-2.83V7.83A2.99 2.99 0 0 1 4 5a3 3 0 0 1 3-3 3 3 0 0 1 3 3c0 1.31-.83 2.42-2 2.83v5.29c.88-.65 2.16-1.12 4-1.12 2.67 0 3.56-1.34 3.85-2.23A3.006 3.006 0 0 1 14 7a3 3 0 0 1 3-3 3 3 0 0 1 3 3c0 1.34-.88 2.5-2.09 2.86C17.65 11.29 16.68 14 13 14m-6 4a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1M7 4a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1m10 2a1 1 0 0 0-1 1 1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1Z" />
|
||||
</symbol>
|
||||
|
||||
@ -130,12 +130,12 @@ const Card = ({ bg, name, price, subTitle, action, features }) => {
|
||||
<Text transform="uppercase" weight="600">
|
||||
{name}
|
||||
</Text>
|
||||
<Text size="5" weight="800" appearance="primary">
|
||||
{/* <Text size="5" weight="800" appearance="primary">
|
||||
{price}
|
||||
</Text>
|
||||
<Text size="1" weight="400">
|
||||
{subTitle}
|
||||
</Text>
|
||||
</Text> */}
|
||||
</VStack>
|
||||
{action}
|
||||
{!action && (
|
||||
|
||||
@ -41,7 +41,7 @@ export default class Settings extends Component {
|
||||
<HelpText>Loads the last open creation when app starts</HelpText>
|
||||
<Divider />
|
||||
<CheckboxSetting
|
||||
label="Fast/light version"
|
||||
label="Fast/light-weight version"
|
||||
pref={prefs.lightVersion}
|
||||
onChange={e => this.updateSetting(e, 'lightVersion')}
|
||||
/>
|
||||
|
||||
@ -84,7 +84,7 @@ if (module.hot) {
|
||||
}
|
||||
|
||||
const UNSAVED_WARNING_COUNT = 15;
|
||||
const version = '6.1.0';
|
||||
const version = '6.2.0';
|
||||
|
||||
// Read forced settings as query parameters
|
||||
window.forcedSettings = {};
|
||||
@ -108,8 +108,16 @@ if (location.search) {
|
||||
}
|
||||
|
||||
function customRoute(path) {
|
||||
// we don't /create redirections on extension since SPA paths don't work there
|
||||
// we don't /create redirections on extension since SPA paths don't work there.
|
||||
if (window.IS_EXTENSION) return;
|
||||
|
||||
// And also for logged out users, since it will send them to /create/ID and refreshing
|
||||
// that will try to find that creation in their database, which doesn't exist. LOgged out
|
||||
// users anyways can't do anything with the urls.
|
||||
// Exception is /create. this is needed because a logged out user can visit a /create/ID
|
||||
// of some other user and then create a new item...at which point they shud come back
|
||||
// to /create
|
||||
if (!window.user && path !== '/create') return;
|
||||
else {
|
||||
route(path);
|
||||
}
|
||||
@ -1544,10 +1552,17 @@ export default class App extends Component {
|
||||
this.setState({ isCreateNewModalOpen: false });
|
||||
}
|
||||
blankFileTemplateSelectHandler() {
|
||||
const create = () => {
|
||||
this.createNewItem(true);
|
||||
this.setState({ isCreateNewModalOpen: false });
|
||||
};
|
||||
if (this.state.user?.isPro) {
|
||||
create();
|
||||
return;
|
||||
}
|
||||
itemService.getCountOfFileModeItems().then(count => {
|
||||
if (count < 2) {
|
||||
this.createNewItem(true);
|
||||
this.setState({ isCreateNewModalOpen: false });
|
||||
create();
|
||||
} else {
|
||||
trackEvent('ui', 'FileModeCreationLimitMessageSeen');
|
||||
// this.closeAllOverlays();
|
||||
@ -1560,24 +1575,29 @@ export default class App extends Component {
|
||||
}
|
||||
|
||||
templateSelectHandler(template, isFileMode) {
|
||||
const create = () => {
|
||||
fetch(
|
||||
`templates/template-${isFileMode ? 'files-' : ''}${template.id}.json`
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(json => {
|
||||
this.forkItem(json);
|
||||
});
|
||||
this.setState({ isCreateNewModalOpen: false });
|
||||
};
|
||||
|
||||
if (isFileMode) {
|
||||
if (this.state.user?.isPro) {
|
||||
create();
|
||||
return;
|
||||
}
|
||||
|
||||
itemService.getCountOfFileModeItems().then(count => {
|
||||
if (count < 2) {
|
||||
fetch(
|
||||
`templates/template-${isFileMode ? 'files-' : ''}${
|
||||
template.id
|
||||
}.json`
|
||||
)
|
||||
.then(res => res.json())
|
||||
.then(json => {
|
||||
this.forkItem(json);
|
||||
});
|
||||
this.setState({ isCreateNewModalOpen: false });
|
||||
create();
|
||||
} else {
|
||||
trackEvent('ui', 'FileModeCreationLimitMessageSeen');
|
||||
return alert(
|
||||
'"Files mode" is currently in beta and is limited to only 2 creations per user. You have already made 2 creations in Files mode.\n\nNote: You can choose to delete old ones to create new.'
|
||||
);
|
||||
this.setState({ isFilesLimitModalOpen: true });
|
||||
}
|
||||
});
|
||||
} else {
|
||||
|
||||
@ -2,7 +2,7 @@ import { deferred } from './deferred';
|
||||
import { addInfiniteLoopProtection } from './utils';
|
||||
import { HtmlModes, CssModes, JsModes } from './codeModes';
|
||||
|
||||
const esprima = require('esprima');
|
||||
const esprima = require('esprima-next');
|
||||
|
||||
// computeHtml, computeCss & computeJs evaluate the final code according
|
||||
// to whatever mode is selected and resolve the returned promise with the code.
|
||||
@ -18,20 +18,20 @@ export function computeHtml(userCode, mode) {
|
||||
window.marked
|
||||
? {
|
||||
code: marked(code)
|
||||
}
|
||||
}
|
||||
: {
|
||||
code
|
||||
}
|
||||
}
|
||||
);
|
||||
} else if (mode === HtmlModes.JADE) {
|
||||
d.resolve(
|
||||
window.jade
|
||||
? {
|
||||
code: jade.render(code)
|
||||
}
|
||||
}
|
||||
: {
|
||||
code
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
@ -198,7 +198,7 @@ export function computeJs(
|
||||
? code
|
||||
: addInfiniteLoopProtection(code, {
|
||||
timeout: infiniteLoopTimeout
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
d.resolve({
|
||||
@ -231,7 +231,7 @@ export function computeJs(
|
||||
? code
|
||||
: addInfiniteLoopProtection(code, {
|
||||
timeout: infiniteLoopTimeout
|
||||
});
|
||||
});
|
||||
}
|
||||
d.resolve({
|
||||
code,
|
||||
@ -267,7 +267,7 @@ export function computeJs(
|
||||
? code
|
||||
: addInfiniteLoopProtection(code, {
|
||||
timeout: infiniteLoopTimeout
|
||||
});
|
||||
});
|
||||
}
|
||||
d.resolve({
|
||||
code,
|
||||
|
||||
@ -13,6 +13,6 @@ window.addEventListener('message', e => {
|
||||
|
||||
// Recieving from preview iframe
|
||||
if (e.data && e.data.logs) {
|
||||
window.opener.postMessage(e.data, '*');
|
||||
(window.opener || window.top).postMessage(e.data, '*');
|
||||
}
|
||||
});
|
||||
|
||||
@ -48,13 +48,7 @@ export const itemService = {
|
||||
async getAllItems(shouldFetchLocally) {
|
||||
var t = Date.now();
|
||||
var d = deferred();
|
||||
let itemIds = await this.getUserItemIds(shouldFetchLocally);
|
||||
itemIds = Object.getOwnPropertyNames(itemIds || {});
|
||||
// log('itemids', itemIds);
|
||||
|
||||
if (!itemIds.length) {
|
||||
d.resolve([]);
|
||||
}
|
||||
const items = [];
|
||||
|
||||
if (window.user && !shouldFetchLocally) {
|
||||
@ -76,6 +70,13 @@ export const itemService = {
|
||||
d.resolve([]);
|
||||
});
|
||||
} else {
|
||||
let itemIds = await this.getUserItemIds(shouldFetchLocally);
|
||||
itemIds = Object.getOwnPropertyNames(itemIds || {});
|
||||
|
||||
if (!itemIds.length) {
|
||||
d.resolve([]);
|
||||
}
|
||||
|
||||
for (let i = 0; i < itemIds.length; i++) {
|
||||
/* eslint-disable no-loop-func */
|
||||
window.db.local.get(itemIds[i], itemResult => {
|
||||
|
||||
@ -458,7 +458,8 @@ a > svg {
|
||||
.btn:hover {
|
||||
--black-mix: 90%;
|
||||
text-decoration: none;
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
|
||||
box-shadow:
|
||||
rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
|
||||
rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
|
||||
}
|
||||
|
||||
@ -646,7 +647,9 @@ body:not(.light-version).overlay-visible .main-container {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background: var(--color-bg);
|
||||
transition: height 0.3s ease, width 0.3s ease;
|
||||
transition:
|
||||
height 0.3s ease,
|
||||
width 0.3s ease;
|
||||
will-change: height;
|
||||
}
|
||||
|
||||
@ -1063,11 +1066,14 @@ body > #demo-frame {
|
||||
/* opacity: 0; */
|
||||
will-change: opacity;
|
||||
background: var(--color-overlay);
|
||||
backdrop-filter: blur(5px) grayscale(1);
|
||||
transition: opacity var(--duration-modal-overlay-show);
|
||||
|
||||
will-change: transform;
|
||||
}
|
||||
body:not(.light-version) .modal {
|
||||
backdrop-filter: blur(5px) grayscale(1);
|
||||
}
|
||||
|
||||
.modal--no-overlay {
|
||||
background: none;
|
||||
backdrop-filter: none;
|
||||
@ -1094,11 +1100,14 @@ body > #demo-frame {
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
.modal__content {
|
||||
--opaque: 68%;
|
||||
background: var(--color-popup);
|
||||
|
||||
/* fix me */
|
||||
background: linear-gradient(45deg, #2d063cad, #3a2b63);
|
||||
box-shadow: inset 1px -1px 0 0 #ffffff17, 0 20px 31px 0 #0000008a;
|
||||
background: linear-gradient(45deg, rgb(45 6 60 / var(--opaque)), #3a2b63);
|
||||
box-shadow:
|
||||
inset 1px -1px 0 0 #ffffff17,
|
||||
0 20px 31px 0 #0000008a;
|
||||
|
||||
color: var(--color-text);
|
||||
position: relative;
|
||||
@ -1117,6 +1126,9 @@ body > #demo-frame {
|
||||
forwards;
|
||||
/* animation-delay: 150ms; */
|
||||
}
|
||||
body.light-version .modal__content {
|
||||
--opaque: 100%;
|
||||
}
|
||||
|
||||
@keyframes anim-modal {
|
||||
to {
|
||||
@ -1135,10 +1147,7 @@ body > #demo-frame {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.is-modal-visible .modal__content {
|
||||
/* transition-duration: 0.3s; */
|
||||
/* transform: translateY(0px) scale(1); */
|
||||
/* opacity: 1; */
|
||||
body:not(.light-version).is-modal-visible .modal__content {
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
|
||||
@ -1153,9 +1162,11 @@ body > #demo-frame {
|
||||
opacity: 0;
|
||||
will-change: opacity;
|
||||
/* background: var(--color-overlay); */
|
||||
backdrop-filter: blur(5px) grayscale(1);
|
||||
transition: opacity var(--duration-modal-overlay-show);
|
||||
}
|
||||
body:not(.light-version) .modal-overlay {
|
||||
backdrop-filter: blur(5px) grayscale(1);
|
||||
}
|
||||
|
||||
/* Make settings modal smaller */
|
||||
|
||||
@ -2359,8 +2370,10 @@ while the theme CSS file is loading */
|
||||
rgba(var(--rgb-gray-0), 0) 100%
|
||||
);
|
||||
|
||||
box-shadow: 0 0 30px rgba(var(--rgb-brand), 0),
|
||||
0px 20px 50px rgba(0, 0, 0, 0.1), inset 0px 1px 3px rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 0 30px rgba(var(--rgb-brand), 0),
|
||||
0px 20px 50px rgba(0, 0, 0, 0.1),
|
||||
inset 0px 1px 3px rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
|
||||
32
src/utils.js
32
src/utils.js
@ -4,7 +4,7 @@ import { modes, HtmlModes, CssModes, JsModes } from './codeModes';
|
||||
import { deferred } from './deferred';
|
||||
import { getExtensionFromFileName } from './fileUtils';
|
||||
import confetti from 'canvas-confetti';
|
||||
const esprima = require('esprima');
|
||||
const esprima = require('esprima-next');
|
||||
|
||||
window.DEBUG = document.cookie.indexOf('wmdebug') > -1;
|
||||
window.$ = document.querySelector.bind(document);
|
||||
@ -378,19 +378,21 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
|
||||
var externalJs = '',
|
||||
externalCss = '';
|
||||
if (item.externalLibs) {
|
||||
externalJs = item.externalLibs.js
|
||||
.split('\n')
|
||||
.reduce(function (scripts, url) {
|
||||
return scripts + (url ? '\n<script src="' + url + '"></script>' : '');
|
||||
}, '');
|
||||
externalCss = item.externalLibs.css
|
||||
.split('\n')
|
||||
.reduce(function (links, url) {
|
||||
return (
|
||||
links +
|
||||
(url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '')
|
||||
);
|
||||
}, '');
|
||||
externalJs = item.externalLibs.js.split('\n').reduce(function (
|
||||
scripts,
|
||||
url
|
||||
) {
|
||||
return scripts + (url ? '\n<script src="' + url + '"></script>' : '');
|
||||
}, '');
|
||||
externalCss = item.externalLibs.css.split('\n').reduce(function (
|
||||
links,
|
||||
url
|
||||
) {
|
||||
return (
|
||||
links +
|
||||
(url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '')
|
||||
);
|
||||
}, '');
|
||||
}
|
||||
var contents =
|
||||
'<!DOCTYPE html>\n' +
|
||||
@ -415,7 +417,7 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
|
||||
? chrome.runtime.getURL('lib/screenlog.js')
|
||||
: `${location.origin}${
|
||||
window.DEBUG ? '' : BASE_PATH
|
||||
}/lib/screenlog.js`) +
|
||||
}/lib/screenlog.js`) +
|
||||
'"></script>';
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user