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

eslint fixes

Browse Source
This commit is contained in:
Kushagra Gour
2018-06-17 22:19:44 +05:30
parent d185518911
commit fd4cfe9ec4
15 changed files with 226 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.json
View File

@ -183,6 +183,8 @@
"yoda": ["error", "never"],
"brace-style": "off",
"lines-around-comment": "off",
"arrow-body-style": "off",
"indent": "off",
"react/sort-comp": "off",
"react/jsx-no-bind": "off"
},

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/components/*.jsx",
"lint": "eslint src/*.js src/components/*.jsx",
"test": "jest ./tests",
"precommit": "lint-staged"
},

69
src/components/AskToImportModal.jsx
View File

@ -1,39 +1,40 @@
import { h, Component } from 'preact';
import { h } from 'preact';
import Modal from './Modal';
export default class AskToImportModal extends Component {
render() {
return (
<Modal
extraClasses="ask-to-import-modal"
show={this.props.show}
closeHandler={this.props.closeHandler}
>
<h2>Import your creations in your account</h2>
export function AskToImportModal({
show,
closeHandler,
oldSavedCreationsCount,
dontAskBtnClickHandler,
importBtnClickHandler
}) {
return (
<Modal
extraClasses="ask-to-import-modal"
show={show}
closeHandler={closeHandler}
>
<h2>Import your creations in your account</h2>
<div>
<p>
You have <span>{this.props.oldSavedCreationsCount}</span> creations
saved in your local machine. Do you want to import those creations
in your account so they are more secure and accessible anywhere?
</p>
<p>
It's okay if you don't want to. You can simply logout and access
them anytime on this browser.
</p>
<div class="flex flex-h-end">
<button onClick={this.props.dontAskBtnClickHandler} class="btn">
Don't ask me again
</button>
<button
onClick={this.props.importBtnClickHandler}
class="btn btn--primary ml-1"
>
Yes, please import
</button>
</div>
<div>
<p>
You have <span>{oldSavedCreationsCount}</span> creations saved in your
local machine. Do you want to import those creations in your account
so they are more secure and accessible anywhere?
</p>
<p>
It's okay if you don't want to. You can simply logout and access them
anytime on this browser.
</p>
<div class="flex flex-h-end">
<button onClick={dontAskBtnClickHandler} class="btn">
Don't ask me again
</button>
<button onClick={importBtnClickHandler} class="btn btn--primary ml-1">
Yes, please import
</button>
</div>
</Modal>
);
}
</div>
</Modal>
);
}

1
src/components/CodeMirrorBox.jsx
View File

@ -12,7 +12,6 @@ export default class CodeMirrorBox extends Component {
}
initEditor() {
const options = this.props.options;
this.cm = CodeMirror.fromTextArea(this.textarea, this.props.options);
if (this.props.onChange) {
this.cm.on('change', this.props.onChange);

15
src/components/ContentWrap.jsx
View File

@ -11,6 +11,9 @@ import { deferred } from '../deferred';
import CssSettingsModal from './CssSettingsModal';
const minCodeWrapSize = 33;
/* global htmlCodeEl, jsCodeEl, cssCodeEl, logCountEl
*/
export default class ContentWrap extends Component {
constructor(props) {
super(props);
@ -141,8 +144,8 @@ export default class ContentWrap extends Component {
} else {
// we need to store user script in external JS file to prevent inline-script
// CSP from affecting it.
writeFile('script.js', blobjs, function() {
writeFile('preview.html', blob, function() {
writeFile('script.js', blobjs, () => {
writeFile('preview.html', blob, () => {
var origin = chrome.i18n.getMessage()
? `chrome-extension://${chrome.i18n.getMessage('@@extension_id')}`
: `${location.origin}`;
@ -150,7 +153,7 @@ export default class ContentWrap extends Component {
if (this.detachedWindow) {
this.detachedWindow.postMessage(src, '*');
} else {
frame.src = src;
this.frame.src = src;
}
});
});
@ -248,9 +251,9 @@ export default class ContentWrap extends Component {
result[1].code || '',
result[2].code || ''
);
result.forEach(result => {
if (result.errors) {
this.showErrors(result.errors.lang, result.errors.data);
result.forEach(resultItem => {
if (resultItem.errors) {
this.showErrors(resultItem.errors.lang, resultItem.errors.data);
}
});
});

2
src/components/LibraryAutoSuggest.jsx
View File

@ -90,7 +90,7 @@ export class LibraryAutoSuggest extends Component {
onKeyDown(event) {
var selectedItemElement;
if (!this.isShowingSuggestions) {
return false;
return;
}
if (event.keyCode === 27) {

1
src/components/Login.jsx
View File

@ -1,5 +1,4 @@
import { h, Component } from 'preact';
import { jsLibs, cssLibs } from '../libraryList';
import { trackEvent } from '../analytics';
import { auth } from '../auth';

228
src/components/MainHeader.jsx
View File

@ -1,131 +1,123 @@
import { h, Component } from 'preact';
import { h } from 'preact';
import { A } from './common';
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 Header extends Component {
render() {
return (
<div class="main-header">
<input
type="text"
id="titleInput"
title="Click to edit"
class="item-title-input"
value={this.props.title}
onBlur={this.props.titleInputBlurHandler}
/>
<div class="main-header__btn-wrap flex flex-v-center">
<a
id="runBtn"
class="hide flex flex-v-center hint--rounded hint--bottom-left"
aria-label="Run preview (Ctrl/⌘ + Shift + 5)"
onClick={this.props.runBtnClickHandler}
>
<svg style="width: 14px; height: 14px;">
<use xlinkHref="#play-icon" />
</svg>Run
</a>
export function MainHeader(props) {
return (
<div class="main-header">
<input
type="text"
id="titleInput"
title="Click to edit"
class="item-title-input"
value={props.title}
onBlur={props.titleInputBlurHandler}
/>
<div class="main-header__btn-wrap flex flex-v-center">
<a
id="runBtn"
class="hide flex flex-v-center hint--rounded hint--bottom-left"
aria-label="Run preview (Ctrl/⌘ + Shift + 5)"
onClick={props.runBtnClickHandler}
>
<svg style="width: 14px; height: 14px;">
<use xlinkHref="#play-icon" />
</svg>Run
</a>
<A
onClick={this.props.addLibraryBtnHandler}
data-event-category="ui"
data-event-action="addLibraryButtonClick"
class="flex-v-center hint--rounded hint--bottom-left"
aria-label="Add a JS/CSS library"
<A
onClick={props.addLibraryBtnHandler}
data-event-category="ui"
data-event-action="addLibraryButtonClick"
class="flex-v-center hint--rounded hint--bottom-left"
aria-label="Add a JS/CSS library"
>
Add library
<span
id="js-external-lib-count"
style={`display:${props.externalLibCount ? 'inline' : 'none'}`}
class="count-label"
>
Add library
<span
id="js-external-lib-count"
style={`display:${
this.props.externalLibCount ? 'inline' : 'none'
}`}
class="count-label"
>
{this.props.externalLibCount}
</span>
</A>
{props.externalLibCount}
</span>
</A>
<a
class="flex flex-v-center hint--rounded hint--bottom-left"
aria-label="Start a new creation"
onClick={this.props.newBtnHandler}
<a
class="flex flex-v-center hint--rounded hint--bottom-left"
aria-label="Start a new creation"
onClick={props.newBtnHandler}
>
<svg
style="vertical-align:middle;width:14px;height:14px"
viewBox="0 0 24 24"
>
<svg
style="vertical-align:middle;width:14px;height:14px"
viewBox="0 0 24 24"
>
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>New
</a>
<a
id="saveBtn"
class={`flex flex-v-center hint--rounded hint--bottom-left ${
this.props.isSaving ? 'is-loading' : ''
} ${this.props.unsavedEditCount ? 'is-marked' : 0}`}
aria-label="Save current creation (Ctrl/⌘ + S)"
onClick={this.props.saveBtnHandler}
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>New
</a>
<a
id="saveBtn"
class={`flex flex-v-center hint--rounded hint--bottom-left ${
props.isSaving ? 'is-loading' : ''
} ${props.unsavedEditCount ? 'is-marked' : 0}`}
aria-label="Save current creation (Ctrl/⌘ + S)"
onClick={props.saveBtnHandler}
>
<svg
style="vertical-align:middle;width:14px;height:14px"
viewBox="0 0 24 24"
>
<svg
style="vertical-align:middle;width:14px;height:14px"
viewBox="0 0 24 24"
>
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
</svg>
<svg class="btn-loader" width="15" height="15" stroke="#fff">
<use xlinkHref="#loader-icon" />
</svg>
Save
</a>
<a
id="openItemsBtn"
class={`flex flex-v-center hint--rounded hint--bottom-left ${
this.props.isFetchingItems ? 'is-loading' : ''
}`}
aria-label="Open a saved creation (Ctrl/⌘ + O)"
onClick={this.props.openBtnHandler}
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" />
</svg>
<svg class="btn-loader" width="15" height="15" stroke="#fff">
<use xlinkHref="#loader-icon" />
</svg>
Save
</a>
<a
id="openItemsBtn"
class={`flex flex-v-center hint--rounded hint--bottom-left ${
props.isFetchingItems ? 'is-loading' : ''
}`}
aria-label="Open a saved creation (Ctrl/⌘ + O)"
onClick={props.openBtnHandler}
>
<svg
style="width:14px;height:14px;vertical-align:middle;"
viewBox="0 0 24 24"
>
<svg
style="width:14px;height:14px;vertical-align:middle;"
viewBox="0 0 24 24"
>
<path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
</svg>
<svg class="btn-loader" width="15" height="15" stroke="#fff">
<use xlinkHref="#loader-icon" />
</svg>
Open
</a>
<A
onClick={this.props.loginBtnHandler}
data-event-category="ui"
data-event-action="loginButtonClick"
class="hide-on-login flex flex-v-center hint--rounded hint--bottom-left"
aria-label="Login/Signup"
>
Login/Signup
</A>
<A
onClick={this.props.profileBtnHandler}
data-event-category="ui"
data-event-action="headerAvatarClick"
aria-label="See profile or Logout"
class="hide-on-logout hint--rounded hint--bottom-left"
>
<img
id="headerAvatarImg"
width="20"
src={
this.props.user
? this.props.user.photoURL || DEFAULT_PROFILE_IMG
: ''
}
class="main-header__avatar-img"
/>
</A>
</div>
<path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z" />
</svg>
<svg class="btn-loader" width="15" height="15" stroke="#fff">
<use xlinkHref="#loader-icon" />
</svg>
Open
</a>
<A
onClick={props.loginBtnHandler}
data-event-category="ui"
data-event-action="loginButtonClick"
class="hide-on-login flex flex-v-center hint--rounded hint--bottom-left"
aria-label="Login/Signup"
>
Login/Signup
</A>
<A
onClick={props.profileBtnHandler}
data-event-category="ui"
data-event-action="headerAvatarClick"
aria-label="See profile or Logout"
class="hide-on-logout hint--rounded hint--bottom-left"
>
<img
id="headerAvatarImg"
width="20"
src={props.user ? props.user.photoURL || DEFAULT_PROFILE_IMG : ''}
class="main-header__avatar-img"
/>
</A>
</div>
);
}
</div>
);
}

2
src/components/Modal.jsx
View File

@ -19,7 +19,7 @@ export default class Modal extends Component {
}
}
componentDidUpdate(prevProps) {
if (this.props.show != prevProps.show) {
if (this.props.show !== prevProps.show) {
document.body.classList[this.props.show ? 'add' : 'remove'](
'overlay-visible'
);

1
src/components/SavedItemPane.jsx
View File

@ -165,7 +165,6 @@ export default class SavedItemPane extends Component {
searchInputHandler(e) {
const text = e.target.value;
let el;
if (!text) {
this.setState({
filteredItems: this.items

2
src/components/SplitPane.jsx
View File

@ -1,6 +1,5 @@
import { h, Component } from 'preact';
import Split from 'split.js';
import { log } from '../utils';
export class SplitPane extends Component {
// shouldComponentUpdate(nextProps, nextState) {
@ -34,7 +33,6 @@ export class SplitPane extends Component {
options.onDragStart = this.props.onDragStart;
}
// log('SIZE UPDATTED', ...options);
this.splitInstance = Split(
this.props.children.map(node => '#' + node.attributes.id),
options

112
src/components/SupportDeveloperModal.jsx
View File

@ -1,68 +1,62 @@
import { h, Component } from 'preact';
import { h } from 'preact';
import Modal from './Modal';
export default class SupportDeveloperModal extends Component {
render() {
return (
<Modal
extraClasses="pledge-modal"
show={this.props.show}
closeHandler={this.props.closeHandler}
>
<div class="tac">
<h1>Support the Developer</h1>
<p>
Hi,{' '}
<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"
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
forward making Web Maker more awesome🔥. So please consider
donating. 🙏🏼 (could be as small as $1/month).
</p>
<div
class="flex flex-h-center"
id="onboardDontShowInTabOptionBtn"
d-click="onDontShowInTabClicked"
>
<a
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" />
<h3 class="onboard-selection-text">
Make a monthly pledge on Patreon
</h3>
</a>
</div>
export function SupportDeveloperModal({ show, closeHandler }) {
return (
<Modal extraClasses="pledge-modal" show={show} closeHandler={closeHandler}>
<div class="tac">
<h1>Support the Developer</h1>
<p>
Hi,{' '}
<a
href="https://www.paypal.me/kushagragour"
href="https://kushagragour.in"
target="_blank"
rel="noopener noreferrer"
aria-label="Make a one time donation on Paypal"
>
Or, make a one time donation
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"
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 forward
making Web Maker more awesome🔥. So please consider donating. 🙏🏼
(could be as small as $1/month).
</p>
<div
class="flex flex-h-center"
id="onboardDontShowInTabOptionBtn"
d-click="onDontShowInTabClicked"
>
<a
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" />
<h3 class="onboard-selection-text">
Make a monthly pledge on Patreon
</h3>
</a>
</div>
</Modal>
);
}
<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
</a>
</div>
</Modal>
);
}

25
src/components/app.jsx
View File

@ -1,6 +1,9 @@
/* global htmlCodeEl, cssCodeEl, jsCodeEl, runBtn
*/
import { h, Component } from 'preact';
import MainHeader from './MainHeader.jsx';
import { MainHeader } from './MainHeader.jsx';
import ContentWrap from './ContentWrap.jsx';
import Footer from './Footer.jsx';
import SavedItemPane from './SavedItemPane.jsx';
@ -27,10 +30,10 @@ import firebase from 'firebase/app';
import 'firebase/auth';
import { Profile } from './Profile';
import { auth } from '../auth';
import SupportDeveloperModal from './SupportDeveloperModal';
import { SupportDeveloperModal } from './SupportDeveloperModal';
import { KeyboardShortcutsModal } from './KeyboardShortcutsModal';
import { takeScreenshot } from '../takeScreenshot';
import AskToImportModal from './AskToImportModal';
import { AskToImportModal } from './AskToImportModal';
import { Alerts } from './Alerts';
import Portal from 'preact-portal';
import { HelpModal } from './HelpModal';
@ -329,7 +332,6 @@ export default class App extends Component {
this.setState({
savedItems: { ...this.state.savedItems }
});
var a = 343478798793397;
this.toggleSavedItemsPane();
// HACK: Set overflow after sometime so that the items can animate without getting cropped.
@ -409,12 +411,11 @@ export default class App extends Component {
this.setState({ isAddLibraryModalOpen: true });
}
closeSavedItemsPane() {
document.body.classList[this.state.isSavedItemPaneOpen ? 'add' : 'remove'](
'overlay-visible'
);
this.setState({
isSavedItemPaneOpen: false
});
document.body.classList.remove('overlay-visible');
if (this.editorWithFocus) {
this.editorWithFocus.focus();
}
@ -611,8 +612,8 @@ export default class App extends Component {
window.localStorage[LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN] = true;
if (!answer) {
trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'login');
closeAllOverlays();
loginModal.classList.add('is-modal-visible');
this.closeAllOverlays();
this.setState({ isLoginModalOpen: true });
return;
}
trackEvent('ui', LocalStorageKeys.LOGIN_AND_SAVE_MESSAGE_SEEN, 'local');
@ -817,7 +818,6 @@ export default class App extends Component {
return false;
}
codepenBtnClickHandler(e) {
debugger;
if (this.state.currentItem.cssMode === CssModes.ACSS) {
alert("Oops! CodePen doesn't supports Atomic CSS currently.");
e.preventDefault();
@ -888,7 +888,7 @@ export default class App extends Component {
e.preventDefault();
trackEvent('ui', 'exportBtnClicked');
}
screenshotBtnClickHandler() {
screenshotBtnClickHandler(e) {
this.contentWrap.getDemoFrame(frame => {
takeScreenshot(frame.getBoundingClientRect());
});
@ -1203,8 +1203,7 @@ export default class App extends Component {
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
</symbol>
<symbol id="loader-icon" viewBox="0 0 44 44">
{'{'}/* By Sam Herbert (@sherb), for everyone. More @
http://goo.gl/7AJzbL */{'}'}
{/* By Sam Herbert (@sherb), for everyone. More http://goo.gl/7AJzbL */}
<g fill="none" fillRule="evenodd" strokeWidth={10}>
<circle cx={22} cy={22} r={1}>
<animate

1
src/components/common.jsx
View File

@ -1,5 +1,4 @@
import { h, Component } from 'preact';
import { log } from '../utils';
import { trackEvent } from '../analytics';
class Clickable extends Component {

2
src/takeScreenshot.js
View File

@ -1,4 +1,5 @@
import { handleDownloadsPermission } from './utils';
import { trackEvent } from './analytics';
function saveScreenshot(dataURI) {
// convert base64 to raw binary data held in a string
@ -91,6 +92,7 @@ export function takeScreenshot(boundRect) {
s.textContent =
'[class*="hint"]:after, [class*="hint"]:before { display: none!important; }';
document.body.appendChild(s);
import { trackEvent } from './analytics';
function onImgLoad(image) {
var c = document.createElement('canvas');