mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-02-22 06:03:22 +01:00
Code Issues Releases Wiki Activity

eslint fixes

Browse Source
This commit is contained in:
Kushagra Gour 2018-06-17 18:14:19 +05:30
parent 178a5f5d1b
commit d185518911
13 changed files with 1207 additions and 1072 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
.eslintrc.json
View File

@ -3,7 +3,7 @@
"browser": true
},
"parser": "babel-eslint",
"extends": "eslint:recommended",
"extends": ["eslint:recommended", "eslint-config-synacor"],
"rules": {
"accessor-pairs": "error",
@ -26,7 +26,13 @@
"eol-last": "off",
"eqeqeq": "error",
"func-names": "off",
"func-style": ["error", "declaration", { "allowArrowFunctions": true }],
"func-style": [
"error",
"declaration",
{
"allowArrowFunctions": true
}
],
"generator-star-spacing": "error",
"global-require": "off",
"guard-for-in": "error",
@ -165,7 +171,7 @@
"before": false
}
],
"sort-imports": "error",
"sort-imports": "off",
"sort-vars": "off",
"strict": ["error", "never"],
"template-curly-spacing": "error",
@ -174,7 +180,11 @@
"vars-on-top": "off",
"wrap-regex": "error",
"yield-star-spacing": "error",
"yoda": ["error", "never"]
"yoda": ["error", "never"],
"brace-style": "off",
"lines-around-comment": "off",
"react/sort-comp": "off",
"react/jsx-no-bind": "off"
},
"globals": {
"ArrayBuffer": true,

2
package.json
View File

@ -7,7 +7,7 @@
"build": "preact build --template src/index.html --no-prerender",
"serve": "preact build && preact serve",
"dev": "preact watch --template src/index.html --https --no-prerender",
"lint": "eslint src",
"lint": "eslint src/components/*.jsx",
"test": "jest ./tests",
"precommit": "lint-staged"
},

1
src/components/Alerts.jsx
View File

@ -1,5 +1,4 @@
import { h, Component } from 'preact';
import { log } from '../utils';
export class Alerts extends Component {
shouldComponentUpdate(nextProps, nextState) {

9
src/components/ContentWrap.jsx
View File

@ -2,7 +2,7 @@ import { h, Component } from 'preact';
import UserCodeMirror from './UserCodeMirror.jsx';
import { computeHtml, computeCss, computeJs } from '../computes';
import { modes, HtmlModes, CssModes, JsModes } from '../codeModes';
import { log, writeFile, loadJS, getCompleteHtml, BASE_PATH } from '../utils';
import { log, writeFile, loadJS, getCompleteHtml } from '../utils';
import { SplitPane } from './SplitPane.jsx';
import { trackEvent } from '../analytics';
import CodeMirror from '../CodeMirror';
@ -40,8 +40,8 @@ export default class ContentWrap extends Component {
return (
this.state.isConsoleOpen !== nextState.isConsoleOpen ||
this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen ||
this.state.codeSplitSizes != nextState.codeSplitSizes ||
this.state.mainSplitSizes != nextState.mainSplitSizes ||
this.state.codeSplitSizes !== nextState.codeSplitSizes ||
this.state.mainSplitSizes !== nextState.mainSplitSizes ||
this.props.currentLayoutMode !== nextProps.currentLayoutMode ||
this.props.currentItem !== nextProps.currentItem
);
@ -420,9 +420,8 @@ export default class ContentWrap extends Component {
getCodeSplitSizes() {
if (this.props.currentItem && this.props.currentItem.sizes) {
return this.props.currentItem.sizes;
} else {
return [33.33, 33.33, 33.33];
}
return [33.33, 33.33, 33.33];
}
mainSplitDragEndHandler() {

6
src/components/CssSettingsModal.jsx
View File

@ -22,7 +22,11 @@ export default class CssSettingsModal extends Component {
<h1>Atomic CSS Settings</h1>
<h3>
Configure Atomizer settings.{' '}
<a href="https://github.com/acss-io/atomizer#api" target="_blank">
<a
href="https://github.com/acss-io/atomizer#api"
target="_blank"
rel="noopener noreferrer"
>
Read more
</a>{' '}
about available settings.

8
src/components/Footer.jsx
View File

@ -148,7 +148,11 @@ export default class Footer extends Component {
</svg>
</A>
</div>
<a href="https://webmakerapp.com/" target="_blank">
<a
href="https://webmakerapp.com/"
target="_blank"
rel="noopener noreferrer"
>
<div class="logo" />
</a>
&copy;
@ -189,6 +193,7 @@ export default class Footer extends Component {
aria-label="Tweet about 'Web Maker'"
href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,frontend,playground,offline"
target="_blank"
rel="noopener noreferrer"
>
<svg
style={{
@ -206,6 +211,7 @@ export default class Footer extends Component {
class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile"
aria-label="Support the developer by pledging some amount"
target="_blank"
rel="noopener noreferrer"
>
Support the developer
</A>

348
src/components/HelpModal.jsx
View File

@ -1,158 +1,202 @@
import { h, Component } from 'preact';
import { h } from 'preact';
import Modal from './Modal.jsx';
export default class Header extends Component {
render() {
return (
<Modal show={this.props.show} closeHandler={this.props.closeHandler}>
<h1>
<div class="web-maker-with-tag">Web Maker</div>
<small style="font-size:14px;"> v3.2.0</small>
</h1>
export function HelpModal(props) {
return (
<Modal show={props.show} closeHandler={props.closeHandler}>
<h1>
<div class="web-maker-with-tag">Web Maker</div>
<small style="font-size:14px;"> v3.2.0</small>
</h1>
<div>
<p>
Made with
<span style="margin-right: 8px;">💖</span> &
<span style="margin-right: 8px;">🙌</span> by
<a href="https://twitter.com/chinchang457" target="_blank">
Kushagra Gour
</a>
</p>
<p>
<a href="/docs" target="_blank">
Read the documentation
</a>.
</p>
<p>
Tweet out your feature requests, comments & suggestions to
<a target="_blank" href="https://twitter.com/webmakerApp">
@webmakerApp
</a>.
</p>
<p>
Like this extension? Please
<a
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
target="_blank"
>
rate it here
</a>.
</p>
<p>
<button
aria-label="Support the developer"
d-click="openSupportDeveloperModal"
data-event-action="supportDeveloperHelpBtnClick"
class="btn btn-icon"
>
<svg>
<use xlinkHref="#gift-icon" />
</svg>Support the developer
</button>
<a
aria-label="Rate Web Maker"
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
target="_blank"
class="btn btn-icon"
>
<svg>
<use xlinkHref="#heart-icon" />
</svg>Share Web Maker
</a>
<a
aria-label="Chat"
href="https://web-maker.slack.com"
target="_blank"
class="btn btn-icon"
>
<svg>
<use xlinkHref="#chat-icon" />
</svg>Chat
</a>
<a
aria-label="Report a Bug"
href="https://github.com/chinchang/web-maker/issues"
target="_blank"
class="btn btn-icon"
>
<svg>
<use xlinkHref="#bug-icon" />
</svg>Report a bug
</a>
</p>
<div>
<p>
Made with
<span style="margin-right: 8px;">💖</span> &
<span style="margin-right: 8px;">🙌</span> by
<a
href="https://twitter.com/chinchang457"
target="_blank"
rel="noopener noreferrer"
>
Kushagra Gour
</a>
</p>
<p>
<a href="/docs" target="_blank" rel="noopener noreferrer">
Read the documentation
</a>.
</p>
<p>
Tweet out your feature requests, comments & suggestions to
<a
target="_blank"
rel="noopener noreferrer"
href="https://twitter.com/webmakerApp"
>
@webmakerApp
</a>.
</p>
<p>
Like this extension? Please
<a
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
target="_blank"
rel="noopener noreferrer"
>
rate it here
</a>.
</p>
<p>
<button
aria-label="Support the developer"
d-click="openSupportDeveloperModal"
data-event-action="supportDeveloperHelpBtnClick"
class="btn btn-icon"
>
<svg>
<use xlinkHref="#gift-icon" />
</svg>Support the developer
</button>
<a
aria-label="Rate Web Maker"
href="https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh/reviews"
target="_blank"
rel="noopener noreferrer"
class="btn btn-icon"
>
<svg>
<use xlinkHref="#heart-icon" />
</svg>Share Web Maker
</a>
<a
aria-label="Chat"
href="https://web-maker.slack.com"
target="_blank"
rel="noopener noreferrer"
class="btn btn-icon"
>
<svg>
<use xlinkHref="#chat-icon" />
</svg>Chat
</a>
<a
aria-label="Report a Bug"
href="https://github.com/chinchang/web-maker/issues"
target="_blank"
rel="noopener noreferrer"
class="btn btn-icon"
>
<svg>
<use xlinkHref="#bug-icon" />
</svg>Report a bug
</a>
</p>
<p>
<h3>Awesome libraries used</h3>
<ul>
<li>
<a target="_blank" href="https://kushagragour.in/lab/hint/">
Hint.css
</a>{' '}
&
<a
target="_blank"
href="https://github.com/chinchang/screenlog.js"
>
Screenlog.js
</a>{' '}
- By me :)
</li>
<li>
<a
target="_blank"
href="https://nathancahill.github.io/Split.js/"
>
Split.js
</a>{' '}
- Nathan Cahill
</li>
<li>
<a target="_blank" href="https://codemirror.net/">
Codemirror
</a>{' '}
- Marijn Haverbeke
</li>
<li>
<a target="_blank" href="https://emmet.io/">
Emmet
</a>{' '}
- Sergey Chikuyonok
</li>
<li>
<a target="_blank" href="http://esprima.org/">
Esprima
</a>{' '}
- Ariya Hidayat
</li>
<li>
<a target="_blank" href="https://github.com/enjalot/Inlet">
Inlet
</a>{' '}
- Ian Johnson
</li>
<li>
<a target="_blank" href="https://webmakerapp.com/">
Web Maker!
</a>{' '}
- whhat!
</li>
</ul>
</p>
<p>
<h3>Awesome libraries used</h3>
<ul>
<li>
<a
target="_blank"
rel="noopener noreferrer"
href="https://kushagragour.in/lab/hint/"
>
Hint.css
</a>{' '}
&
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/chinchang/screenlog.js"
>
Screenlog.js
</a>{' '}
- By me :)
</li>
<li>
<a
target="_blank"
rel="noopener noreferrer"
href="https://nathancahill.github.io/Split.js/"
>
Split.js
</a>{' '}
- Nathan Cahill
</li>
<li>
<a
target="_blank"
rel="noopener noreferrer"
href="https://codemirror.net/"
>
Codemirror
</a>{' '}
- Marijn Haverbeke
</li>
<li>
<a
target="_blank"
rel="noopener noreferrer"
href="https://emmet.io/"
>
Emmet
</a>{' '}
- Sergey Chikuyonok
</li>
<li>
<a
target="_blank"
rel="noopener noreferrer"
href="http://esprima.org/"
>
Esprima
</a>{' '}
- Ariya Hidayat
</li>
<li>
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/enjalot/Inlet"
>
Inlet
</a>{' '}
- Ian Johnson
</li>
<li>
<a
target="_blank"
rel="noopener noreferrer"
href="https://webmakerapp.com/"
>
Web Maker!
</a>{' '}
- whhat!
</li>
</ul>
</p>
<p>
<h3>License</h3>
"Web Maker" is
<a target="_blank" href="https://github.com/chinchang/web-maker">
open-source
</a>{' '}
under the
<a href="https://opensource.org/licenses/MIT" target="_blank">
MIT License
</a>.
</p>
</div>
</Modal>
);
}
<p>
<h3>License</h3>
"Web Maker" is
<a
target="_blank"
rel="noopener noreferrer"
href="https://github.com/chinchang/web-maker"
>
open-source
</a>{' '}
under the
<a
href="https://opensource.org/licenses/MIT"
target="_blank"
rel="noopener noreferrer"
>
MIT License
</a>.
</p>
</div>
</Modal>
);
}

176
src/components/KeyboardShortcutsModal.jsx
View File

@ -1,92 +1,94 @@
import { h, Component } from 'preact';
import { h } from 'preact';
import Modal from './Modal';
export default class KeyboardShortcutsModal extends Component {
render() {
return (
<Modal show={this.props.show} closeHandler={this.props.closeHandler}>
<h1>Keyboard Shortcuts</h1>
export function KeyboardShortcutsModal({ show, closeHandler }) {
return (
<Modal show={show} closeHandler={closeHandler}>
<h1>Keyboard Shortcuts</h1>
<div class="flex">
<div>
<h2>Global</h2>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + ?</span>
<span class="kbd-shortcut__details">See keyboard shortcuts</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + 5</span>
<span class="kbd-shortcut__details">Refresh preview</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + S</span>
<span class="kbd-shortcut__details">Save current creations</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + O</span>
<span class="kbd-shortcut__details">
Open list of saved creations
</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl + L</span>
<span class="kbd-shortcut__details">
Clear console (works when console input is focused)
</span>
</p>
<p>
<span class="kbd-shortcut__keys">Esc</span>
<span class="kbd-shortcut__details">
Close saved creations panel & modals
</span>
</p>
</div>
<div class="ml-2">
<h2>Editor</h2>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + F</span>
<span class="kbd-shortcut__details">Find</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + G</span>
<span class="kbd-shortcut__details">Select next match</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + G</span>
<span class="kbd-shortcut__details">Select previous match</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + Opt/Alt + F</span>
<span class="kbd-shortcut__details">Find & replace</span>
</p>
<p>
<span class="kbd-shortcut__keys">Shift + Tab</span>
<span class="kbd-shortcut__details">Realign code</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + ]</span>
<span class="kbd-shortcut__details">Indent code right</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + [</span>
<span class="kbd-shortcut__details">Indent code left</span>
</p>
<p>
<span class="kbd-shortcut__keys">Tab</span>
<span class="kbd-shortcut__details">
Emmet code completion{' '}
<a href="https://emmet.io/" target="_blank">
Read more
</a>
</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + /</span>
<span class="kbd-shortcut__details">Single line comment</span>
</p>
</div>
<div class="flex">
<div>
<h2>Global</h2>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + ?</span>
<span class="kbd-shortcut__details">See keyboard shortcuts</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + 5</span>
<span class="kbd-shortcut__details">Refresh preview</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + S</span>
<span class="kbd-shortcut__details">Save current creations</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + O</span>
<span class="kbd-shortcut__details">
Open list of saved creations
</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl + L</span>
<span class="kbd-shortcut__details">
Clear console (works when console input is focused)
</span>
</p>
<p>
<span class="kbd-shortcut__keys">Esc</span>
<span class="kbd-shortcut__details">
Close saved creations panel & modals
</span>
</p>
</div>
</Modal>
);
}
<div class="ml-2">
<h2>Editor</h2>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + F</span>
<span class="kbd-shortcut__details">Find</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + G</span>
<span class="kbd-shortcut__details">Select next match</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + Shift + G</span>
<span class="kbd-shortcut__details">Select previous match</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + Opt/Alt + F</span>
<span class="kbd-shortcut__details">Find & replace</span>
</p>
<p>
<span class="kbd-shortcut__keys">Shift + Tab</span>
<span class="kbd-shortcut__details">Realign code</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + ]</span>
<span class="kbd-shortcut__details">Indent code right</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + [</span>
<span class="kbd-shortcut__details">Indent code left</span>
</p>
<p>
<span class="kbd-shortcut__keys">Tab</span>
<span class="kbd-shortcut__details">
Emmet code completion{' '}
<a
href="https://emmet.io/"
target="_blank"
rel="noopener noreferrer"
>
Read more
</a>
</span>
</p>
<p>
<span class="kbd-shortcut__keys">Ctrl/⌘ + /</span>
<span class="kbd-shortcut__details">Single line comment</span>
</p>
</div>
</div>
</Modal>
);
}

1628
src/components/Notifications.jsx
View File

File diff suppressed because it is too large Load Diff

58
src/components/Profile.jsx
View File

@ -1,38 +1,30 @@
import { h, Component } from 'preact';
import { h } from 'preact';
const DEFAULT_PROFILE_IMG =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z' /%3E%3C/svg%3E";
export default class Profile extends Component {
render() {
return (
<div class="tac">
<img
height="80"
class="profile-modal__avatar-img"
src={
this.props.user
? this.props.user.photoURL || DEFAULT_PROFILE_IMG
: ''
}
id="profileAvatarImg"
alt="Profile image"
/>
<h3 id="profileUserName" class="mb-2">
{this.props.user && this.props.user.displayName
? this.props.user.displayName
: 'Anonymous Creator'}
</h3>
<p>
<button
class="btn"
aria-label="Logout from your account"
onClick={this.props.logoutBtnHandler}
>
Logout
</button>
</p>
</div>
);
}
export function Profile({ user, logoutBtnHandler }) {
return (
<div class="tac">
<img
height="80"
class="profile-modal__avatar-img"
src={user ? user.photoURL || DEFAULT_PROFILE_IMG : ''}
id="profileAvatarImg"
alt="Profile image"
/>
<h3 id="profileUserName" class="mb-2">
{user && user.displayName ? user.displayName : 'Anonymous Creator'}
</h3>
<p>
<button
class="btn"
aria-label="Logout from your account"
onClick={logoutBtnHandler}
>
Logout
</button>
</p>
</div>
);
}

2
src/components/SavedItemPane.jsx
View File

@ -1,5 +1,5 @@
import { h, Component } from 'preact';
import { getHumanDate } from '../utils';
import { log, getHumanDate } from '../utils';
import { trackEvent } from '../analytics';
import { itemService } from '../itemService';
import { alertsService } from '../notifications';

14
src/components/SupportDeveloperModal.jsx
View File

@ -13,12 +13,20 @@ export default class SupportDeveloperModal extends Component {
<h1>Support the Developer</h1>
<p>
Hi,{' '}
<a href="https://kushagragour.in" target="_blank">
<a
href="https://kushagragour.in"
target="_blank"
rel="noopener noreferrer"
>
Kushagra
</a>{' '}
here! Web Maker is a free and open-source project. To keep myself
motivated for working on such open-source and free{' '}
<a href="https://kushagragour.in/lab/" target="_blank">
<a
href="https://kushagragour.in/lab/"
target="_blank"
rel="noopener noreferrer"
>
side projects
</a>, I am accepting donations. Your pledge, no matter how small,
will act as an appreciation towards my work and keep me going
@ -35,6 +43,7 @@ export default class SupportDeveloperModal extends Component {
class="onboard-selection"
href="https://patreon.com/kushagra"
target="_blank"
rel="noopener noreferrer"
aria-label="Make a monthly pledge on Patreon"
>
<img src="patreon.png" height="60" alt="Become a patron image" />
@ -47,6 +56,7 @@ export default class SupportDeveloperModal extends Component {
<a
href="https://www.paypal.me/kushagragour"
target="_blank"
rel="noopener noreferrer"
aria-label="Make a one time donation on Paypal"
>
Or, make a one time donation

9
src/components/app.jsx
View File

@ -1,5 +1,4 @@
import { h, Component } from 'preact';
import { Router } from 'preact-router';
import MainHeader from './MainHeader.jsx';
import ContentWrap from './ContentWrap.jsx';
@ -7,7 +6,6 @@ import Footer from './Footer.jsx';
import SavedItemPane from './SavedItemPane.jsx';
import AddLibrary from './AddLibrary.jsx';
import Modal from './Modal.jsx';
import HelpModal from './HelpModal.jsx';
import Login from './Login.jsx';
import {
log,
@ -19,7 +17,7 @@ import {
} from '../utils';
import { itemService } from '../itemService';
import '../db';
import Notifications from './Notifications';
import { Notifications } from './Notifications';
import Settings from './Settings.jsx';
import { modes, HtmlModes, CssModes, JsModes } from '../codeModes';
import { trackEvent } from '../analytics';
@ -27,14 +25,15 @@ import { deferred } from '../deferred';
import { alertsService } from '../notifications';
import firebase from 'firebase/app';
import 'firebase/auth';
import Profile from './Profile';
import { Profile } from './Profile';
import { auth } from '../auth';
import SupportDeveloperModal from './SupportDeveloperModal';
import KeyboardShortcutsModal from './KeyboardShortcutsModal';
import { KeyboardShortcutsModal } from './KeyboardShortcutsModal';
import { takeScreenshot } from '../takeScreenshot';
import AskToImportModal from './AskToImportModal';
import { Alerts } from './Alerts';
import Portal from 'preact-portal';
import { HelpModal } from './HelpModal';
if (module.hot) {
require('preact/debug');