mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-08-04 20:37:29 +02:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'origin/master' into manifestv3

Browse Source
This commit is contained in:
Kushagra Gour
2024-05-09 17:26:50 +05:30
parent 589b66349e e137802aea
commit 91235e005d
26 changed files with 2356 additions and 1536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gulpfile.js
View File

@@ -224,6 +224,8 @@ gulp.task('buildDistFolder', function (cb) {
child_process.execSync('rm -rf dist'); child_process.execSync('rm -rf dist');
child_process.execSync('mv packages/website/_site dist'); child_process.execSync('mv packages/website/_site dist');
child_process.execSync(`mv ${APP_FOLDER} dist/`); child_process.execSync(`mv ${APP_FOLDER} dist/`);
child_process.execSync(`mkdir dist/signup`);
child_process.execSync(`cp packages/signup/dist/*.* dist/signup/`);
cb(); cb();
}); });

2390
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "web-maker", "name": "web-maker",
"version": "6.1.0", "version": "6.2.0",
"description": "A blazing fast & offline web playground", "description": "A blazing fast & offline web playground",
"scripts": { "scripts": {
"start": "concurrently --kill-others \"gulp start-preview-server\" \"npm run -s dev\"", "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", "code-blast-codemirror": "chinchang/code-blast-codemirror#web-maker",
"codemirror": "^5.65.16", "codemirror": "^5.65.16",
"copy-webpack-plugin": "^4.5.1", "copy-webpack-plugin": "^4.5.1",
"esprima": "^4.0.0",
"firebase": "^10.8.0", "firebase": "^10.8.0",
"esprima-next": "^6.0.3",
"jszip": "^3.1.5", "jszip": "^3.1.5",
"preact": "^10.17.0", "preact": "^10.17.0",
"preact-portal": "^1.1.3", "preact-portal": "^1.1.3",

3
packages/signup/README.md Normal file
View 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
View File

File diff suppressed because one or more lines are too long

1
packages/signup/dist/index.1903c1b7.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

11
packages/signup/dist/index.html vendored Normal file
View 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>

2
packages/signup/index.html
View File

@@ -6,6 +6,6 @@
<body> <body>
<h1>signInWithPopup</h1> <h1>signInWithPopup</h1>
<script type="module" src="signInWithPopup.js"></script> <script type="module" src="./signInWithPopup.js"></script>
</body> </body>
</html> </html>

4
packages/website/_includes/default.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@@ -558,7 +558,7 @@
<div class="hero-img"> <div class="hero-img">
<img <img
class="screenshot" class="screenshot"
src="images/ss1.png?v4" src="images/ss1.webp"
height="" height=""
alt="Web Maker working screen" alt="Web Maker working screen"
/> />

BIN
packages/website/images/ss1.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

20
packages/website/index.html
View File

@@ -121,10 +121,7 @@ layout: default.html
class="say" class="say"
> >
<div class="say__name"> <div class="say__name">
<img <img src="" alt="" />
src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECLSb76_ywaCj7gEiC3ZjYXJkX3Bob3RvKigyMTBmZjI0YjYxM2VkZWZiNmYyNTkwZjEwN2RlNjBlYjRkOTE2YmJlMAHafGv-p112HZJ-KreQxPF8-yn0EQ"
alt=""
/>
<div>Joacim Nilsson</div> <div>Joacim Nilsson</div>
</div> </div>
<p>This is something I will be using alot. Thank you! :D</p> <p>This is something I will be using alot. Thank you! :D</p>
@@ -135,10 +132,7 @@ layout: default.html
class="say" class="say"
> >
<div class="say__name"> <div class="say__name">
<img <img src="" alt="" />
src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCK_Jvffnu_2AXSILdmNhcmRfcGhvdG8qKDk3Njg3NDE2NjI1YThmNDgyMDk4OWM3MTBiMTMxNmUzOWQwZGNhMWEwAbe0xm_6UPdrZFAaScMLUOpKFfHP"
alt=""
/>
<div>Oksana Borukh</div> <div>Oksana Borukh</div>
</div> </div>
<p>It's fantastic! I'm glad I've discovered it! Thanks!</p> <p>It's fantastic! I'm glad I've discovered it! Thanks!</p>
@@ -215,10 +209,7 @@ layout: default.html
class="say" class="say"
> >
<div class="say__name"> <div class="say__name">
<img <img src="" alt="" />
src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABDCNn44MXB2a_DZSILdmNhcmRfcGhvdG8qKDM2YTNiMDhkYzEyMmVkY2IyZjM2YzY0NTAzNTdjMWU5YWVhM2JmM2MwAc4a1i_Vddj6AIdGg9rpk_xdMePf"
alt=""
/>
<div>Steve Lack</div> <div>Steve Lack</div>
</div> </div>
<p>Thanks for creating this. What a great tool for productivity!</p> <p>Thanks for creating this. What a great tool for productivity!</p>
@@ -230,10 +221,7 @@ layout: default.html
class="say" class="say"
> >
<div class="say__name"> <div class="say__name">
<img <img src="" alt="" />
src="https://plus.google.com/_/focus/photos/public/AIbEiAIAAABECOrDgpLHt4jwzwEiC3ZjYXJkX3Bob3RvKig2ZWNkNGM4MmM0MDY2ZmFkMDUzZmE3MGY4MWE3NWM5OTIzZjA4MGRlMAEmU4uVE7yiEAzp6wGGR7B3MMjErg"
alt=""
/>
<div>Margaret H</div> <div>Margaret H</div>
</div> </div>
<p> <p>

2
preview/detached-window.js
View File

@@ -15,6 +15,6 @@ window.addEventListener('message', e => {
// Recieving from preview iframe // Recieving from preview iframe
if (e.data && e.data.logs) { if (e.data && e.data.logs) {
window.opener.postMessage(e.data, '*'); (window.opener || window.top).postMessage(e.data, '*');
} }
}); });

22
preview/preview.htm Normal file
View 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>

20
src/components/Changelog.jsx
View File

@@ -106,7 +106,25 @@ export function Changelog(props) {
return ( return (
<div> <div>
<h1>Whats new?</h1> <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> <li>
<strong>🕹️ Kaboom game engine</strong>: Kaboom.js is now available in <strong>🕹️ Kaboom game engine</strong>: Kaboom.js is now available in
quick-add library list. Also, a new template to quick-start in Kaboom quick-add library list. Also, a new template to quick-start in Kaboom

40
src/components/ContentWrap.jsx
View File

@@ -21,12 +21,15 @@ const minCodeWrapSize = 33;
/* global htmlCodeEl /* global htmlCodeEl
*/ */
const PREVIEW_FRAME_HOST = window.DEBUG const PREVIEW_FRAME_HOST = window.location.href.includes('localhost')
? 'http://localhost:7888' ? 'http://localhost:7888'
: `https://wbmakr.com`; : `https://wbmakr.com`;
let cachedSandboxAttribute = ''; let cachedSandboxAttribute = '';
// prevents refreshes when iframe is currently being refreshed
let frameRefreshPromise = null;
export default class ContentWrap extends Component { export default class ContentWrap extends Component {
constructor(props) { constructor(props) {
super(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 // 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 // 3. we add back cached sandbox attr & write the contents to the iframe
const refreshAndDo = fn => { const refreshAndDo = fn => {
Promise.race([ frameRefreshPromise =
// Just in case onload promise doesn't resolves frameRefreshPromise ||
new Promise(resolve => { // Race earlier had a settimeout too as a fallback. It was removed because onload
setTimeout(resolve, 400); // was firing 100% times.
}), // TODO: remove race
new Promise(resolve => { Promise.race([
this.frame.onload = resolve; new Promise(resolve => {
}) this.frame.onload = () => {
]).then(fn); resolve('onload');
};
})
]);
frameRefreshPromise.then(resolutionReason => {
frameRefreshPromise = null;
log('resolved with ', resolutionReason);
fn();
});
// Setting to blank string cause frame to reload // Setting to blank string cause frame to reload
// if (window.IS_EXTENSION) { // if (window.IS_EXTENSION) {
// this.frame.src = ''; // this.frame.src = '';
@@ -187,9 +199,7 @@ export default class ContentWrap extends Component {
if (!cachedSandboxAttribute && window.DEBUG) { if (!cachedSandboxAttribute && window.DEBUG) {
// alert('sandbox empty'); // alert('sandbox empty');
} }
// console.log('setting back sandbox attr', sandbox); log('sending PM');
// this.frame.setAttribute('sandbox', cachedSandboxAttribute);
// this.frame.removeAttribute('sweet');
// if (window.IS_EXTENSION) { // if (window.IS_EXTENSION) {
// this.frame.contentDocument.open(); // this.frame.contentDocument.open();
@@ -931,11 +941,11 @@ export default class ContentWrap extends Component {
/> />
) : ( ) : (
<iframe <iframe
src={`./indexpm.html`} src={`${PREVIEW_FRAME_HOST}/preview.htm`}
ref={el => (this.frame = el)} ref={el => (this.frame = el)}
frameborder="0" frameborder="0"
id="demo-frame" 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" allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share"
allowpaymentrequest="true" allowpaymentrequest="true"
allowfullscreen="true" allowfullscreen="true"

10
src/components/CreateNewModal.jsx
View File

@@ -202,10 +202,12 @@ export class CreateNewModal extends Component {
} }
})} })}
</div> </div>
<p> {!window.user?.isPro && (
2 files mode creations available in Free plan. To create unlimited <p>
files mode creations, upgrade to <ProBadge />. 2 files mode creations available in Free plan. To create
</p> unlimited files mode creations, upgrade to <ProBadge />.
</p>
)}
<div class="show-when-extension"> <div class="show-when-extension">
Files modes is currently only available in Web app.{' '} Files modes is currently only available in Web app.{' '}
<a href="https://webmaker.app/create/">Try the Web app now</a>. <a href="https://webmaker.app/create/">Try the Web app now</a>.

11
src/components/HelpModal.jsx
View File

@@ -1,3 +1,4 @@
import { Icon } from './Icons';
import Modal from './Modal'; import Modal from './Modal';
import { Stack, VStack } from './Stack'; import { Stack, VStack } from './Stack';
import { Button } from './common'; import { Button } from './common';
@@ -68,6 +69,7 @@ export function HelpModal(props) {
rel="noopener noreferrer" rel="noopener noreferrer"
class="btn btn-icon" class="btn btn-icon"
> >
<Icon name="twitter-icon" />
<Trans>Share Web Maker</Trans> <Trans>Share Web Maker</Trans>
</a>{' '} </a>{' '}
<a <a
@@ -103,6 +105,15 @@ export function HelpModal(props) {
</svg> </svg>
<Trans>Report a bug</Trans> <Trans>Report a bug</Trans>
</a> </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>
<p> <p>

3
src/components/Icons.jsx
View File

@@ -128,6 +128,9 @@ export function Icons() {
<symbol id="check-circle" viewBox="0 0 24 24"> <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" /> <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>
<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"> <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" /> <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> </symbol>

4
src/components/Pro.jsx
View File

@@ -130,12 +130,12 @@ const Card = ({ bg, name, price, subTitle, action, features }) => {
<Text transform="uppercase" weight="600"> <Text transform="uppercase" weight="600">
{name} {name}
</Text> </Text>
<Text size="5" weight="800" appearance="primary"> {/* <Text size="5" weight="800" appearance="primary">
{price} {price}
</Text> </Text>
<Text size="1" weight="400"> <Text size="1" weight="400">
{subTitle} {subTitle}
</Text> </Text> */}
</VStack> </VStack>
{action} {action}
{!action && ( {!action && (

2
src/components/Settings.jsx
View File

@@ -41,7 +41,7 @@ export default class Settings extends Component {
<HelpText>Loads the last open creation when app starts</HelpText> <HelpText>Loads the last open creation when app starts</HelpText>
<Divider /> <Divider />
<CheckboxSetting <CheckboxSetting
label="Fast/light version" label="Fast/light-weight version"
pref={prefs.lightVersion} pref={prefs.lightVersion}
onChange={e => this.updateSetting(e, 'lightVersion')} onChange={e => this.updateSetting(e, 'lightVersion')}
/> />

54
src/components/app.jsx
View File

@@ -84,7 +84,7 @@ if (module.hot) {
} }
const UNSAVED_WARNING_COUNT = 15; const UNSAVED_WARNING_COUNT = 15;
const version = '6.1.0'; const version = '6.2.0';
// Read forced settings as query parameters // Read forced settings as query parameters
window.forcedSettings = {}; window.forcedSettings = {};
@@ -108,8 +108,16 @@ if (location.search) {
} }
function customRoute(path) { 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; 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 { else {
route(path); route(path);
} }
@@ -1544,10 +1552,17 @@ export default class App extends Component {
this.setState({ isCreateNewModalOpen: false }); this.setState({ isCreateNewModalOpen: false });
} }
blankFileTemplateSelectHandler() { blankFileTemplateSelectHandler() {
const create = () => {
this.createNewItem(true);
this.setState({ isCreateNewModalOpen: false });
};
if (this.state.user?.isPro) {
create();
return;
}
itemService.getCountOfFileModeItems().then(count => { itemService.getCountOfFileModeItems().then(count => {
if (count < 2) { if (count < 2) {
this.createNewItem(true); create();
this.setState({ isCreateNewModalOpen: false });
} else { } else {
trackEvent('ui', 'FileModeCreationLimitMessageSeen'); trackEvent('ui', 'FileModeCreationLimitMessageSeen');
// this.closeAllOverlays(); // this.closeAllOverlays();
@@ -1560,24 +1575,29 @@ export default class App extends Component {
} }
templateSelectHandler(template, isFileMode) { 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 (isFileMode) {
if (this.state.user?.isPro) {
create();
return;
}
itemService.getCountOfFileModeItems().then(count => { itemService.getCountOfFileModeItems().then(count => {
if (count < 2) { if (count < 2) {
fetch( create();
`templates/template-${isFileMode ? 'files-' : ''}${
template.id
}.json`
)
.then(res => res.json())
.then(json => {
this.forkItem(json);
});
this.setState({ isCreateNewModalOpen: false });
} else { } else {
trackEvent('ui', 'FileModeCreationLimitMessageSeen'); trackEvent('ui', 'FileModeCreationLimitMessageSeen');
return alert( this.setState({ isFilesLimitModalOpen: true });
'"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.'
);
} }
}); });
} else { } else {

16
src/computes.js
View File

@@ -2,7 +2,7 @@ import { deferred } from './deferred';
import { addInfiniteLoopProtection } from './utils'; import { addInfiniteLoopProtection } from './utils';
import { HtmlModes, CssModes, JsModes } from './codeModes'; import { HtmlModes, CssModes, JsModes } from './codeModes';
const esprima = require('esprima'); const esprima = require('esprima-next');
// computeHtml, computeCss & computeJs evaluate the final code according // computeHtml, computeCss & computeJs evaluate the final code according
// to whatever mode is selected and resolve the returned promise with the code. // to whatever mode is selected and resolve the returned promise with the code.
@@ -18,20 +18,20 @@ export function computeHtml(userCode, mode) {
window.marked window.marked
? { ? {
code: marked(code) code: marked(code)
} }
: { : {
code code
} }
); );
} else if (mode === HtmlModes.JADE) { } else if (mode === HtmlModes.JADE) {
d.resolve( d.resolve(
window.jade window.jade
? { ? {
code: jade.render(code) code: jade.render(code)
} }
: { : {
code code
} }
); );
} }
@@ -198,7 +198,7 @@ export function computeJs(
? code ? code
: addInfiniteLoopProtection(code, { : addInfiniteLoopProtection(code, {
timeout: infiniteLoopTimeout timeout: infiniteLoopTimeout
}); });
} }
d.resolve({ d.resolve({
@@ -231,7 +231,7 @@ export function computeJs(
? code ? code
: addInfiniteLoopProtection(code, { : addInfiniteLoopProtection(code, {
timeout: infiniteLoopTimeout timeout: infiniteLoopTimeout
}); });
} }
d.resolve({ d.resolve({
code, code,
@@ -267,7 +267,7 @@ export function computeJs(
? code ? code
: addInfiniteLoopProtection(code, { : addInfiniteLoopProtection(code, {
timeout: infiniteLoopTimeout timeout: infiniteLoopTimeout
}); });
} }
d.resolve({ d.resolve({
code, code,

2
src/detached-window.js
View File

@@ -13,6 +13,6 @@ window.addEventListener('message', e => {
// Recieving from preview iframe // Recieving from preview iframe
if (e.data && e.data.logs) { if (e.data && e.data.logs) {
window.opener.postMessage(e.data, '*'); (window.opener || window.top).postMessage(e.data, '*');
} }
}); });

13
src/itemService.js
View File

@@ -48,13 +48,7 @@ export const itemService = {
async getAllItems(shouldFetchLocally) { async getAllItems(shouldFetchLocally) {
var t = Date.now(); var t = Date.now();
var d = deferred(); var d = deferred();
let itemIds = await this.getUserItemIds(shouldFetchLocally);
itemIds = Object.getOwnPropertyNames(itemIds || {});
// log('itemids', itemIds);
if (!itemIds.length) {
d.resolve([]);
}
const items = []; const items = [];
if (window.user && !shouldFetchLocally) { if (window.user && !shouldFetchLocally) {
@@ -76,6 +70,13 @@ export const itemService = {
d.resolve([]); d.resolve([]);
}); });
} else { } else {
let itemIds = await this.getUserItemIds(shouldFetchLocally);
itemIds = Object.getOwnPropertyNames(itemIds || {});
if (!itemIds.length) {
d.resolve([]);
}
for (let i = 0; i < itemIds.length; i++) { for (let i = 0; i < itemIds.length; i++) {
/* eslint-disable no-loop-func */ /* eslint-disable no-loop-func */
window.db.local.get(itemIds[i], itemResult => { window.db.local.get(itemIds[i], itemResult => {

37
src/style.css
View File

@@ -458,7 +458,8 @@ a > svg {
.btn:hover { .btn:hover {
--black-mix: 90%; --black-mix: 90%;
text-decoration: none; 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; rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
} }
@@ -646,7 +647,9 @@ body:not(.light-version).overlay-visible .main-container {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background: var(--color-bg); 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; will-change: height;
} }
@@ -1063,11 +1066,14 @@ body > #demo-frame {
/* opacity: 0; */ /* opacity: 0; */
will-change: opacity; will-change: opacity;
background: var(--color-overlay); background: var(--color-overlay);
backdrop-filter: blur(5px) grayscale(1);
transition: opacity var(--duration-modal-overlay-show); transition: opacity var(--duration-modal-overlay-show);
will-change: transform; will-change: transform;
} }
body:not(.light-version) .modal {
backdrop-filter: blur(5px) grayscale(1);
}
.modal--no-overlay { .modal--no-overlay {
background: none; background: none;
backdrop-filter: none; backdrop-filter: none;
@@ -1094,11 +1100,14 @@ body > #demo-frame {
transition: 0.25s ease; transition: 0.25s ease;
} }
.modal__content { .modal__content {
--opaque: 68%;
background: var(--color-popup); background: var(--color-popup);
/* fix me */ /* fix me */
background: linear-gradient(45deg, #2d063cad, #3a2b63); background: linear-gradient(45deg, rgb(45 6 60 / var(--opaque)), #3a2b63);
box-shadow: inset 1px -1px 0 0 #ffffff17, 0 20px 31px 0 #0000008a; box-shadow:
inset 1px -1px 0 0 #ffffff17,
0 20px 31px 0 #0000008a;
color: var(--color-text); color: var(--color-text);
position: relative; position: relative;
@@ -1117,6 +1126,9 @@ body > #demo-frame {
forwards; forwards;
/* animation-delay: 150ms; */ /* animation-delay: 150ms; */
} }
body.light-version .modal__content {
--opaque: 100%;
}
@keyframes anim-modal { @keyframes anim-modal {
to { to {
@@ -1135,10 +1147,7 @@ body > #demo-frame {
visibility: visible; visibility: visible;
} }
.is-modal-visible .modal__content { body:not(.light-version).is-modal-visible .modal__content {
/* transition-duration: 0.3s; */
/* transform: translateY(0px) scale(1); */
/* opacity: 1; */
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
} }
@@ -1153,9 +1162,11 @@ body > #demo-frame {
opacity: 0; opacity: 0;
will-change: opacity; will-change: opacity;
/* background: var(--color-overlay); */ /* background: var(--color-overlay); */
backdrop-filter: blur(5px) grayscale(1);
transition: opacity var(--duration-modal-overlay-show); transition: opacity var(--duration-modal-overlay-show);
} }
body:not(.light-version) .modal-overlay {
backdrop-filter: blur(5px) grayscale(1);
}
/* Make settings modal smaller */ /* Make settings modal smaller */
@@ -2359,8 +2370,10 @@ while the theme CSS file is loading */
rgba(var(--rgb-gray-0), 0) 100% rgba(var(--rgb-gray-0), 0) 100%
); );
box-shadow: 0 0 30px rgba(var(--rgb-brand), 0), box-shadow:
0px 20px 50px rgba(0, 0, 0, 0.1), inset 0px 1px 3px rgba(255, 255, 255, 0.1); 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 { .skeleton {

32
src/utils.js
View File

@@ -4,7 +4,7 @@ import { modes, HtmlModes, CssModes, JsModes } from './codeModes';
import { deferred } from './deferred'; import { deferred } from './deferred';
import { getExtensionFromFileName } from './fileUtils'; import { getExtensionFromFileName } from './fileUtils';
import confetti from 'canvas-confetti'; import confetti from 'canvas-confetti';
const esprima = require('esprima'); const esprima = require('esprima-next');
window.DEBUG = document.cookie.indexOf('wmdebug') > -1; window.DEBUG = document.cookie.indexOf('wmdebug') > -1;
window.$ = document.querySelector.bind(document); window.$ = document.querySelector.bind(document);
@@ -378,19 +378,21 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
var externalJs = '', var externalJs = '',
externalCss = ''; externalCss = '';
if (item.externalLibs) { if (item.externalLibs) {
externalJs = item.externalLibs.js externalJs = item.externalLibs.js.split('\n').reduce(function (
.split('\n') scripts,
.reduce(function (scripts, url) { url
return scripts + (url ? '\n<script src="' + url + '"></script>' : ''); ) {
}, ''); return scripts + (url ? '\n<script src="' + url + '"></script>' : '');
externalCss = item.externalLibs.css }, '');
.split('\n') externalCss = item.externalLibs.css.split('\n').reduce(function (
.reduce(function (links, url) { links,
return ( url
links + ) {
(url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '') return (
); links +
}, ''); (url ? '\n<link rel="stylesheet" href="' + url + '"></link>' : '')
);
}, '');
} }
var contents = var contents =
'<!DOCTYPE html>\n' + '<!DOCTYPE html>\n' +
@@ -415,7 +417,7 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
? chrome.runtime.getURL('lib/screenlog.js') ? chrome.runtime.getURL('lib/screenlog.js')
: `${location.origin}${ : `${location.origin}${
window.DEBUG ? '' : BASE_PATH window.DEBUG ? '' : BASE_PATH
}/lib/screenlog.js`) + }/lib/screenlog.js`) +
'"></script>'; '"></script>';
} }