mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-29 17:50:09 +02:00
index.html: prettier fix
This commit is contained in:
Kushagra Gour
@@ -1,11 +1,15 @@
|
||||
import { h, Component } from 'preact';
|
||||
import Portal from 'preact-portal';
|
||||
import Portal from './Portal';
|
||||
|
||||
export default class Modal extends Component {
|
||||
componentDidMount() {
|
||||
this.container = document.createElement('div');
|
||||
this.container.id = `container-${~~(Math.random() * 1000)}`;
|
||||
document.body.append(this.container);
|
||||
window.addEventListener('keydown', this.onKeyDownHandler.bind(this));
|
||||
}
|
||||
componentWillUnmount() {
|
||||
this.container.remove();
|
||||
window.removeEventListener('keydown', this.onKeyDownHandler.bind(this));
|
||||
if (this.focusGrabber) {
|
||||
this.focusGrabber.remove();
|
||||
@@ -61,7 +65,7 @@ export default class Modal extends Component {
|
||||
if (!this.props.show) return null;
|
||||
|
||||
return (
|
||||
<Portal into="body">
|
||||
<Portal into={`#${this.container.id}`}>
|
||||
<div
|
||||
role="dialog"
|
||||
class={`${this.props.extraClasses || ''} modal is-modal-visible ${
|
||||
|
||||
71
src/components/Portal.jsx
Normal file
71
src/components/Portal.jsx
Normal file
@@ -0,0 +1,71 @@
|
||||
import { h, Component, render, toChildArray } from 'preact';
|
||||
|
||||
/** Redirect rendering of descendants into the given CSS selector.
|
||||
* @example
|
||||
* <Portal into="body">
|
||||
* <div>I am rendered into document.body</div>
|
||||
* </Portal>
|
||||
*/
|
||||
export default class Portal extends Component {
|
||||
componentDidUpdate(props) {
|
||||
for (let i in props) {
|
||||
if (props[i] !== this.props[i]) {
|
||||
return setTimeout(this.renderLayer);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.isMounted = true;
|
||||
this.renderLayer = this.renderLayer.bind(this);
|
||||
this.renderLayer();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.renderLayer(false);
|
||||
this.isMounted = false;
|
||||
if (this.remote && this.remote.parentNode)
|
||||
this.remote.parentNode.removeChild(this.remote);
|
||||
}
|
||||
|
||||
findNode(node) {
|
||||
return typeof node === 'string' ? document.querySelector(node) : node;
|
||||
}
|
||||
|
||||
renderLayer(show = true) {
|
||||
if (!this.isMounted) return;
|
||||
|
||||
// clean up old node if moving bases:
|
||||
if (this.props.into !== this.intoPointer) {
|
||||
this.intoPointer = this.props.into;
|
||||
if (this.into && this.remote) {
|
||||
this.remote = render(<PortalProxy />, this.into, this.remote);
|
||||
}
|
||||
this.into = this.findNode(this.props.into);
|
||||
}
|
||||
|
||||
this.remote = render(
|
||||
<PortalProxy context={this.context}>
|
||||
{(show && this.props.children) || null}
|
||||
</PortalProxy>,
|
||||
this.into,
|
||||
this.remote
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// high-order component that renders its first child if it exists.
|
||||
// used as a conditional rendering proxy.
|
||||
class PortalProxy extends Component {
|
||||
getChildContext() {
|
||||
return this.props.context;
|
||||
}
|
||||
render({ children }) {
|
||||
const arr = toChildArray(children);
|
||||
return (arr && arr[0]) || null;
|
||||
}
|
||||
}
|
||||
@@ -49,7 +49,7 @@ import { KeyboardShortcutsModal } from './KeyboardShortcutsModal';
|
||||
import { takeScreenshot } from '../takeScreenshot';
|
||||
import { AskToImportModal } from './AskToImportModal';
|
||||
import { Alerts } from './Alerts';
|
||||
import Portal from 'preact-portal';
|
||||
import Portal from './Portal';
|
||||
import { HelpModal } from './HelpModal';
|
||||
import { OnboardingModal } from './OnboardingModal';
|
||||
import { Js13KModal } from './Js13KModal';
|
||||
@@ -1791,7 +1791,7 @@ export default class App extends Component {
|
||||
closeHandler={() => this.setState({ isCommandPaletteOpen: false })}
|
||||
/>
|
||||
|
||||
<Portal into="body">
|
||||
<Portal into="#portal">
|
||||
<div
|
||||
class="modal-overlay"
|
||||
onClick={this.modalOverlayClickHandler.bind(this)}
|
||||
|
||||
152
src/index.html
152
src/index.html
@@ -1,83 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta charset="utf-8" />
|
||||
<title>Web Maker</title>
|
||||
<link rel="shortcut icon" href="icon-128.png">
|
||||
<meta name=viewport content="width=device-width, initial-scale=1">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<link rel="manifest" href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json">
|
||||
<link rel="shortcut icon" href="icon-128.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<link
|
||||
rel="manifest"
|
||||
href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json"
|
||||
/>
|
||||
<% if (htmlWebpackPlugin.options.manifest.theme_color) { %>
|
||||
<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
|
||||
<% } %>
|
||||
<meta
|
||||
name="theme-color"
|
||||
content="<%= htmlWebpackPlugin.options.manifest.theme_color %>"
|
||||
/>
|
||||
<% } %>
|
||||
|
||||
<style>
|
||||
/* Critically acclaimed CSS */
|
||||
<style>
|
||||
/* Critically acclaimed CSS */
|
||||
|
||||
.saved-items-pane {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 450px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.saved-items-pane {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 450px;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.modal {
|
||||
visibility: hidden;
|
||||
}
|
||||
.modal {
|
||||
visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
</style>
|
||||
<!-- build:css vendor.css -->
|
||||
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css" />
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css" />
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css" />
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css" />
|
||||
<link rel="stylesheet" href="lib/hint.min.css" />
|
||||
<link rel="stylesheet" href="lib/inlet.css" />
|
||||
<!-- endbuild -->
|
||||
|
||||
<!-- build:css vendor.css -->
|
||||
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css">
|
||||
<link rel="stylesheet" href="lib/codemirror/addon/dialog/dialog.css">
|
||||
<link rel="stylesheet" href="lib/hint.min.css">
|
||||
<link rel="stylesheet" href="lib/inlet.css">
|
||||
<!-- endbuild -->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
id="editorThemeLinkTag"
|
||||
href="lib/codemirror/theme/monokai.css"
|
||||
/>
|
||||
|
||||
<link rel="stylesheet" id="editorThemeLinkTag" href="lib/codemirror/theme/monokai.css"></link>
|
||||
<!-- build:css style.css -->
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<!-- endbuild -->
|
||||
|
||||
<!-- build:css style.css -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- endbuild -->
|
||||
<style id="fontStyleTemplate" type="template">
|
||||
@font-face {
|
||||
font-family: 'fontname';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(fontname.ttf) format('truetype');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
|
||||
U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
.CodeMirror pre {
|
||||
font-family: 'fontname', monospace;
|
||||
}
|
||||
</style>
|
||||
<style type="text/css" id="fontStyleTag">
|
||||
@font-face {
|
||||
font-family: 'FiraCode';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(FiraCode.ttf) format('truetype');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
|
||||
U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
|
||||
<style id="fontStyleTemplate" type="template">
|
||||
@font-face { font-family: 'fontname'; font-style: normal; font-weight: 400; src: url(fontname.ttf) format('truetype'); unicode-range:
|
||||
U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD,
|
||||
U+F000; } .CodeMirror pre { font-family: 'fontname', monospace; }
|
||||
</style>
|
||||
<style type="text/css" id="fontStyleTag">
|
||||
@font-face {
|
||||
font-family: 'FiraCode';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(FiraCode.ttf) format('truetype');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
|
||||
}
|
||||
|
||||
.CodeMirror pre {
|
||||
font-family: 'FiraCode', monospace;
|
||||
}
|
||||
|
||||
</style>
|
||||
.CodeMirror pre {
|
||||
font-family: 'FiraCode', monospace;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- SCRIPT-TAGS -->
|
||||
<%= htmlWebpackPlugin.options.ssr({
|
||||
url: '/'
|
||||
}) %>
|
||||
<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
|
||||
<script>
|
||||
window.fetch || document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')
|
||||
|
||||
</script>
|
||||
<!-- END-SCRIPT-TAGS -->
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<div id="portal"></div>
|
||||
<!-- SCRIPT-TAGS -->
|
||||
<%= htmlWebpackPlugin.options.ssr({ url: '/' }) %>
|
||||
<script
|
||||
defer
|
||||
src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"
|
||||
></script>
|
||||
<script>
|
||||
window.fetch ||
|
||||
document.write(
|
||||
'<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>'
|
||||
);
|
||||
</script>
|
||||
<!-- END-SCRIPT-TAGS -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user