Merge pull request #13 from KeshShan/master

Implementing an alert before user tries to exit the tab/browser to avoid losing changes made in the editor
Raathigesh · Jun 30, 2018 · 965d8bb · 965d8bb
2 parents 2bea68b + 77187c0
commit 965d8bb
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 68 deletions.
diff --git a/README.md b/README.md
@@ -38,6 +38,38 @@ fit together. That's why Semantic Edit.
 ## Features
 - Beautifier
 
+## Run & Build from sourcecode
+Clone the sourcecode: 
+```
+git clone https://github.com/Raathigesh/semantic-edit.git
+```
+Install the dependencies:
+
+```
+npm install
+```
+
+Install webpack and the development server:
+
+```
+npm i webpack-dev-server webpack -g
+```
+
+You can simply run webpack build using this command: 
+
+```
+npm run build
+```
+
+If you want to run with webpack-dev-server simply run this command: 
+
+```
+npm run dev
+```
+
+Open the web browser to `http://localhost:8080/`
+
+
 ## What's Under the Hood?
 JavaScript! 
 

diff --git a/src/SemanticEditMain.jsx b/src/SemanticEditMain.jsx
@@ -1,14 +1,10 @@
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 
 import Header from './components/Header.jsx'
 import Footer from './components/Footer.jsx'
 import Modal from './components/Modal.jsx';
 
 import Ace from 'react-ace';
-import brace from 'brace';
-import html from 'brace/mode/html'
-import monokai from 'brace/theme/tomorrow'
-
 import pretty from 'pretty';
 
 export default class SemanticEditMain extends Component {
@@ -33,8 +29,10 @@ export default class SemanticEditMain extends Component {
 
 	componentDidMount() {
 		window.addEventListener("resize", this.resize);
+		window.addEventListener("beforeunload", this.alertExistHandler);
 		this.resize();
 
+
 		var initialHtml = decodeURIComponent(window.location.href.split('/#src=')[1] || '');
 
 		this.setState({
@@ -45,6 +43,15 @@ export default class SemanticEditMain extends Component {
 		}, this.resize);
 	}
 
+	componentWillUnmount() {
+		window.removeEventListener("beforeunload", this.alertExistHandler)
+	}
+
+	alertExistHandler(event) {
+		event.preventDefault();
+		return event.returnValue = 'Are you sure you want to close?'; // currently newer version of chrome and other browsers deosn't support customized string so returning a string or empty string won't be of much impact
+	}
+
 	resize() {
 		var viewportHeight = this.getViewPortHeight();
 
@@ -56,17 +63,17 @@ export default class SemanticEditMain extends Component {
 		});
 	}
 
-	createMarkup (){
-		return {__html: this.state.html};
+	createMarkup() {
+		return { __html: this.state.html };
 	}
 
 	getViewPortHeight() {
 		return window.innerHeight - 88;
 	}
 
-	onChange(newValue)  {
-		if(this.state.isJsxMode) {
-				newValue = newValue.replace(/className=/g, 'class=');
+	onChange(newValue) {
+		if (this.state.isJsxMode) {
+			newValue = newValue.replace(/className=/g, 'class=');
 		}
 
 		var jsx = newValue.replace(/class=/g, 'className=');
@@ -88,7 +95,7 @@ export default class SemanticEditMain extends Component {
 		});
 	}
 
-	beautify()  {
+	beautify() {
 		let prettyHtml = pretty(this.state.html);
 		let prettyJsx = pretty(this.state.jsx);
 
@@ -100,7 +107,7 @@ export default class SemanticEditMain extends Component {
 		});
 	}
 
-	share()  {
+	share() {
 		this.refs.modal.show();
 	}
 
@@ -110,10 +117,10 @@ export default class SemanticEditMain extends Component {
 		return trimmedLocation + '#src=' + encodedSource;
 	}
 
-	render () {
+	render() {
 		return (
 			<body>
-				<Header isJsxMode={this.state.isJsxMode} reactOnClick={this.toggleMarkup} onBeautify={this.beautify} onShare={this.share}/>
+				<Header isJsxMode={this.state.isJsxMode} reactOnClick={this.toggleMarkup} onBeautify={this.beautify} onShare={this.share} />
 				<div className="ui two column doubling grid">
 					<div className="column">
 						<Ace
@@ -127,7 +134,7 @@ export default class SemanticEditMain extends Component {
 						/>
 					</div>
 					<div className="column">
-						<div dangerouslySetInnerHTML={this.createMarkup()}/>
+						<div dangerouslySetInnerHTML={this.createMarkup()} />
 					</div>
 				</div>
 				<Footer>

diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -1,13 +1,13 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
 
 export default class Footer extends Component {
-	render () {
+	render() {
 		return (
 			<div className="ui inverted vertical footer segment">
 				<div className="ui center aligned container">
 					<div className="ui horizontal inverted small divided link list">
 						SemanticEdit v1.0 | Made with JavaScript and love by<a className="item" href="https://twitter.com/Raathigeshan">@Raathigesh</a>
-					{this.props.children}
+						{this.props.children}
 					</div>
 				</div>
 			</div>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -1,15 +1,15 @@
-import React,{Component, PropTypes} from 'react'
+import React, { Component } from 'react'
 
 class Header extends Component {
 
-	render () {
+	render() {
 		return (
 			<div className="ui fixed inverted menu">
 				<div className="ui container">
 					<a href="#" className="header item">
 						Semantic Edit
 					</a>
-					<a href="#" onClick={this.props.reactOnClick} className="item">{ this.props.isJsxMode ? 'Show Html' : 'Show JSX'}</a>
+					<a href="#" onClick={this.props.reactOnClick} className="item">{this.props.isJsxMode ? 'Show Html' : 'Show JSX'}</a>
 					<a href="#" onClick={this.props.onBeautify} className="item">Beautify</a>
 				</div>
 			</div>

diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
@@ -1,19 +1,13 @@
 import React, {
-	PropTypes
 } from 'react'
 
-import Ace from 'react-ace';
-import brace from 'brace';
-import html from 'brace/mode/html'
-import monokai from 'brace/theme/tomorrow'
-
 class Modal extends React.Component {
 
 	show() {
 		$('.ui.modal').modal('show');
 	}
 
-	render () {
+	render() {
 
 		return (
 			<div className="ui modal">
@@ -39,8 +33,8 @@ class Modal extends React.Component {
 
 
 
-	Modal.propTypes = {
-		html: React.PropTypes.string
-	}
+Modal.propTypes = {
+	html: React.PropTypes.string
+}
 
 export default Modal;
diff --git a/src/index.jsx b/src/index.jsx
@@ -13,7 +13,7 @@ export default class SemanticEdit extends Component {
 }
 
 SemanticEdit.propTypes = {
-	children: PropTypes.any.isRequired
+  children: PropTypes.any.isRequired
 }
 
-ReactDOM.render(<SemanticEdit/>, document.querySelector("#myApp"));
+ReactDOM.render(<SemanticEdit />, document.querySelector("#myApp"));
diff --git a/src/public/bundle.js b/src/public/bundle.js