modal warning when you have unsaved changes

app/components/SimpleEditor/ContainerEditor.js

@@ -8,6 +8,11 @@ import {
 } from 'substance'
 
 class ContainerEditor extends SubstanceContainerEditor {
+  constructor (...args) {
+    super(...args)
+    this.disableBackButton = this.disableBackButton.bind(this)
+  }
+
   render ($$) {
     let el = super.render($$)
     el.addClass('my-custom-class')
@@ -36,6 +41,33 @@ class ContainerEditor extends SubstanceContainerEditor {
 
       this.addTargetToLinks()
     }
+    this.props.history.listenBefore((location, callback) => {
+      const commandStates = this.getCommandStates()
+      if (commandStates['save'].disabled === false) {
+        this._owner.send('ChangesNotSaved')
+        this._owner.emit('send:route', location.pathname)
+        return callback(false)
+      } else {
+        return callback()
+      }
+    })
+
+    window.history.pushState(null, null, document.URL)
+    window.addEventListener('popstate', this.disableBackButton)
+  }
+
+  disableBackButton () {
+    const url = '/books/' + this.props.book.id + '/book-builder'
+    const commandStates = this.getCommandStates()
+    window.removeEventListener('popstate', this.disableBackButton)
+    if (commandStates['save'].disabled === false) {
+      window.history.pushState(null, null, document.URL)
+      this._owner.send('ChangesNotSaved')
+      this._owner.emit('send:route', url)
+    } else {
+      this.props.history.push(url)
+    }
+    return
   }
 
   onTextInput (event) {

app/components/SimpleEditor/Editor.js

@@ -13,6 +13,7 @@ import Notes from './panes/Notes/Notes'
 import NotesProvider from './panes/Notes/NotesProvider'
 import TableOfContents from './panes/TableOfContents/TableOfContents'
 import TrackChangesProvider from './elements/track_change/TrackChangesProvider'
+import ModalWarning from './elements/modal_warning/ModalWarning'
 
 class Editor extends ProseEditor {
   constructor (parent, props) {
@@ -22,10 +23,15 @@ class Editor extends ProseEditor {
       'showComments': function () { this.toggleCommentsArea(true) },
       'hideComments': function () { this.toggleCommentsArea(false) },
       'trackChangesUpdate': function () { this.updateTrackChange() },
-      'trackChangesViewToggle': function () { this.trackChangesViewToggle() }
+      'trackChangesViewToggle': function () { this.trackChangesViewToggle() },
+      'ChangesNotSaved': function () { this.ChangesNotSaved() }
     })
   }
 
+  ChangesNotSaved () {
+    this.extendState({ changesNotSaved: true })
+  }
+
   trackChangesViewToggle () {
     this.extendState({
       trackChangesView: !this.state.trackChangesView
@@ -124,7 +130,16 @@ class Editor extends ProseEditor {
       el.addClass('track-changes-mode')
     }
 
-    return el
+    const modal = $$(ModalWarning, {
+      width: 'medium',
+      textAlign: 'center'
+    })
+
+    if (this.state.changesNotSaved) {
+      return el.append(modal)
+    } else {
+      return el
+    }
   }
 
   // TODO -- use this to insert read-only mode alert
@@ -151,14 +166,17 @@ class Editor extends ProseEditor {
       spellcheck: 'native',
       textTypes: configurator.getTextTypes(),
       trackChanges: this.props.trackChanges,
-      updateTrackChangesStatus: this.props.updateTrackChangesStatus
+      updateTrackChangesStatus: this.props.updateTrackChangesStatus,
+      history: this.props.history,
+      book: this.props.book
     }).ref('body')
   }
 
   getInitialState () {
     return {
       editorReady: false,
-      trackChangesView: true
+      trackChangesView: true,
+      changesNotSaved: false
     }
   }
 

app/components/SimpleEditor/SimpleEditor.jsx

@@ -141,7 +141,7 @@ export default class SimpleEditor extends React.Component {
   componentDidMount () {
     const el = ReactDOM.findDOMNode(this)
 
-    const { book, fileUpload, fragment, history, onSave, update, user } = this.props
+    const { book, fragment, history, onSave, update, user } = this.props
     const { configurator, editorSession } = this.createSession()
 
     if (!fragment) return
@@ -178,6 +178,7 @@ export default class SimpleEditor extends React.Component {
   }
 
   componentWillUnmount () {
+    console.log('will unmount')
     this._releaseLock()
     window.removeEventListener('beforeunload', this._releaseLock)
   }

app/components/SimpleEditor/elements/elements.scss

@@ -10,3 +10,4 @@
 @import './track_change/trackChange';
 
 @import './images/image';
+@import './modal_warning/modalWarning';