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 { h, Component } from 'preact';
import Portal from 'preact-portal'; import Portal from './Portal';
export default class Modal extends Component { export default class Modal extends Component {
componentDidMount() { 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)); window.addEventListener('keydown', this.onKeyDownHandler.bind(this));
} }
componentWillUnmount() { componentWillUnmount() {
this.container.remove();
window.removeEventListener('keydown', this.onKeyDownHandler.bind(this)); window.removeEventListener('keydown', this.onKeyDownHandler.bind(this));
if (this.focusGrabber) { if (this.focusGrabber) {
this.focusGrabber.remove(); this.focusGrabber.remove();
@@ -61,7 +65,7 @@ export default class Modal extends Component {
if (!this.props.show) return null; if (!this.props.show) return null;
return ( return (
<Portal into="body"> <Portal into={`#${this.container.id}`}>
<div <div
role="dialog" role="dialog"
class={`${this.props.extraClasses || ''} modal is-modal-visible ${ 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 { takeScreenshot } from '../takeScreenshot';
import { AskToImportModal } from './AskToImportModal'; import { AskToImportModal } from './AskToImportModal';
import { Alerts } from './Alerts'; import { Alerts } from './Alerts';
import Portal from 'preact-portal'; import Portal from './Portal';
import { HelpModal } from './HelpModal'; import { HelpModal } from './HelpModal';
import { OnboardingModal } from './OnboardingModal'; import { OnboardingModal } from './OnboardingModal';
import { Js13KModal } from './Js13KModal'; import { Js13KModal } from './Js13KModal';
@@ -1791,7 +1791,7 @@ export default class App extends Component {
closeHandler={() => this.setState({ isCommandPaletteOpen: false })} closeHandler={() => this.setState({ isCommandPaletteOpen: false })}
/> />
<Portal into="body"> <Portal into="#portal">
<div <div
class="modal-overlay" class="modal-overlay"
onClick={this.modalOverlayClickHandler.bind(this)} onClick={this.modalOverlayClickHandler.bind(this)}

152
src/index.html
View File

@@ -1,83 +1,103 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<title>Web Maker</title> <title>Web Maker</title>
<link rel="shortcut icon" href="icon-128.png"> <link rel="shortcut icon" href="icon-128.png" />
<meta name=viewport content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-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="manifest"
href="<%= htmlWebpackPlugin.files.publicPath %>manifest.json"
/>
<% if (htmlWebpackPlugin.options.manifest.theme_color) { %> <% 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> <style>
/* Critically acclaimed CSS */ /* Critically acclaimed CSS */
.saved-items-pane { .saved-items-pane {
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: 450px; width: 450px;
transform: translateX(100%); transform: translateX(100%);
} }
.modal { .modal {
visibility: hidden; 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
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css"> rel="stylesheet"
<link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css"> id="editorThemeLinkTag"
<link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css"> href="lib/codemirror/theme/monokai.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> <!-- build:css style.css -->
<link rel="stylesheet" href="style.css" />
<!-- endbuild -->
<!-- build:css style.css --> <style id="fontStyleTemplate" type="template">
<link rel="stylesheet" href="style.css"> @font-face {
<!-- endbuild --> 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"> .CodeMirror pre {
@font-face { font-family: 'fontname'; font-style: normal; font-weight: 400; src: url(fontname.ttf) format('truetype'); unicode-range: font-family: 'FiraCode', monospace;
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>
<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>
</head> </head>
<body> <body>
<!-- SCRIPT-TAGS --> <div id="root"></div>
<%= htmlWebpackPlugin.options.ssr({ <div id="portal"></div>
url: '/' <!-- SCRIPT-TAGS -->
}) %> <%= htmlWebpackPlugin.options.ssr({ url: '/' }) %>
<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script> <script
<script> defer
window.fetch || document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>') src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"
></script>
</script> <script>
<!-- END-SCRIPT-TAGS --> window.fetch ||
document.write(
'<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>'
);
</script>
<!-- END-SCRIPT-TAGS -->
</body> </body>
</html> </html>