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"
},

33
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() {
export function AskToImportModal({
show,
closeHandler,
oldSavedCreationsCount,
dontAskBtnClickHandler,
importBtnClickHandler
}) {
return (
<Modal
extraClasses="ask-to-import-modal"
show={this.props.show}
closeHandler={this.props.closeHandler}
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?
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.
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">
<button onClick={dontAskBtnClickHandler} class="btn">
Don't ask me again
</button>
<button
onClick={this.props.importBtnClickHandler}
class="btn btn--primary ml-1"
>
<button onClick={importBtnClickHandler} class="btn btn--primary ml-1">
Yes, please import
</button>
</div>
</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';

42
src/components/MainHeader.jsx
View File

@ -1,11 +1,10 @@
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() {
export function MainHeader(props) {
return (
<div class="main-header">
<input
@ -13,15 +12,15 @@ export default class Header extends Component {
id="titleInput"
title="Click to edit"
class="item-title-input"
value={this.props.title}
onBlur={this.props.titleInputBlurHandler}
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={this.props.runBtnClickHandler}
onClick={props.runBtnClickHandler}
>
<svg style="width: 14px; height: 14px;">
<use xlinkHref="#play-icon" />
@ -29,7 +28,7 @@ export default class Header extends Component {
</a>
<A
onClick={this.props.addLibraryBtnHandler}
onClick={props.addLibraryBtnHandler}
data-event-category="ui"
data-event-action="addLibraryButtonClick"
class="flex-v-center hint--rounded hint--bottom-left"
@ -38,19 +37,17 @@ export default class Header extends Component {
Add library
<span
id="js-external-lib-count"
style={`display:${
this.props.externalLibCount ? 'inline' : 'none'
}`}
style={`display:${props.externalLibCount ? 'inline' : 'none'}`}
class="count-label"
>
{this.props.externalLibCount}
{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}
onClick={props.newBtnHandler}
>
<svg
style="vertical-align:middle;width:14px;height:14px"
@ -62,10 +59,10 @@ export default class Header extends Component {
<a
id="saveBtn"
class={`flex flex-v-center hint--rounded hint--bottom-left ${
this.props.isSaving ? 'is-loading' : ''
} ${this.props.unsavedEditCount ? 'is-marked' : 0}`}
props.isSaving ? 'is-loading' : ''
} ${props.unsavedEditCount ? 'is-marked' : 0}`}
aria-label="Save current creation (Ctrl/⌘ + S)"
onClick={this.props.saveBtnHandler}
onClick={props.saveBtnHandler}
>
<svg
style="vertical-align:middle;width:14px;height:14px"
@ -81,10 +78,10 @@ export default class Header extends Component {
<a
id="openItemsBtn"
class={`flex flex-v-center hint--rounded hint--bottom-left ${
this.props.isFetchingItems ? 'is-loading' : ''
props.isFetchingItems ? 'is-loading' : ''
}`}
aria-label="Open a saved creation (Ctrl/⌘ + O)"
onClick={this.props.openBtnHandler}
onClick={props.openBtnHandler}
>
<svg
style="width:14px;height:14px;vertical-align:middle;"
@ -98,7 +95,7 @@ export default class Header extends Component {
Open
</a>
<A
onClick={this.props.loginBtnHandler}
onClick={props.loginBtnHandler}
data-event-category="ui"
data-event-action="loginButtonClick"
class="hide-on-login flex flex-v-center hint--rounded hint--bottom-left"
@ -107,7 +104,7 @@ export default class Header extends Component {
Login/Signup
</A>
<A
onClick={this.props.profileBtnHandler}
onClick={props.profileBtnHandler}
data-event-category="ui"
data-event-action="headerAvatarClick"
aria-label="See profile or Logout"
@ -116,16 +113,11 @@ export default class Header extends Component {
<img
id="headerAvatarImg"
width="20"
src={
this.props.user
? this.props.user.photoURL || DEFAULT_PROFILE_IMG
: ''
}
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

20
src/components/SupportDeveloperModal.jsx
View File

@ -1,14 +1,9 @@
import { h, Component } from 'preact';
import { h } from 'preact';
import Modal from './Modal';
export default class SupportDeveloperModal extends Component {
render() {
export function SupportDeveloperModal({ show, closeHandler }) {
return (
<Modal
extraClasses="pledge-modal"
show={this.props.show}
closeHandler={this.props.closeHandler}
>
<Modal extraClasses="pledge-modal" show={show} closeHandler={closeHandler}>
<div class="tac">
<h1>Support the Developer</h1>
<p>
@ -28,10 +23,10 @@ export default class SupportDeveloperModal extends Component {
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).
</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
@ -64,5 +59,4 @@ export default class SupportDeveloperModal extends Component {
</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');