mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-29 09:40:10 +02:00
Code Issues Releases Wiki Activity

index.html: prettier fix

Browse Source
This commit is contained in:
Kushagra Gour
2019-07-16 20:48:08 +05:30
parent d0f9d19e97
commit 06753b797f
4 changed files with 165 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Modal.jsx
View File

@@ -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
View 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;
}
}

4
src/components/app.jsx
View File

@@ -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)}

80
src/index.html
View File

@@ -1,16 +1,21 @@
<!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>
@@ -28,28 +33,39 @@
.modal {
visibility: hidden;
}
</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">
<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>
<link
rel="stylesheet"
id="editorThemeLinkTag"
href="lib/codemirror/theme/monokai.css"
/>
<!-- build:css style.css -->
<link rel="stylesheet" href="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; }
@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 {
@@ -57,27 +73,31 @@
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;
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>
</head>
<body>
<body>
<div id="root"></div>
<div id="portal"></div>
<!-- SCRIPT-TAGS -->
<%= htmlWebpackPlugin.options.ssr({
url: '/'
}) %>
<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
<%= 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>')
window.fetch ||
document.write(
'<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>'
);
</script>
<!-- END-SCRIPT-TAGS -->
</body>
</html>