modal warning files

app/components/SimpleEditor/elements/modal_warning/ModalWarning.js

+import { Modal } from 'substance'
+import { each } from 'lodash'
+
+class ModalWarning extends Modal {
+  constructor (props) {
+    super(props)
+    this.parent.on('send:route', this._getNextRoute, this)
+    this.route = ''
+  }
+  render ($$) {
+    let el = $$('div')
+        .addClass('sc-modal')
+    const modalHeader = $$('div')
+         .addClass('sc-modal-header')
+         .append('Unsaved Content')
+    const modalMessage = $$('div')
+          .addClass('sc-modal-body')
+          .append('Are you sure you want to exit the chapter without saving ?')
+    const saveExit = $$('button')
+          .addClass('sc-modal-button')
+          .addClass('sc-modal-button-save-exit')
+          .append('save & exit')
+          .on('click', this._saveExitWriter)
+    const exit = $$('button')
+          .addClass('sc-modal-button')
+          .addClass('sc-modal-button-exit')
+          .append('exit')
+          .on('click', this._exitWriter)
+    const modalActionsContainer = $$('div')
+          .addClass('sc-modal-actions')
+          .append(saveExit)
+          .append(exit)
+    if (this.props.width) {
+      el.addClass('sm-width-' + this.props.width)
+    }
+    el.append(
+      $$('div').addClass('se-body')
+      .append(modalHeader)
+      .append(modalMessage)
+      .append(modalActionsContainer)
+    )
+    return el
+  }
+  _getNextRoute (route) {
+    this.route = route
+  }
+
+  _saveExitWriter () {
+    this.rerender()
+    this.context.editor.editorSession.save()
+    setTimeout(() => { this.context.editor.props.history.push(this.route) }, 200)
+  }
+  // TODO: Hack Check why cannot rerender editor so can push to url
+  // if you  save document session everything rerenders
+  _exitWriter () {
+    each(this.context.editor.editorSession._history.doneChanges, key => {
+      this.context.editor.editorSession.undo()
+    })
+    this.context.editor.editorSession.save()
+    setTimeout(() => { this.context.editor.props.history.push(this.route) }, 200)
+  }
+}
+export default ModalWarning

app/components/SimpleEditor/elements/modal_warning/modalWarning.scss

+$background: rgba(0, 0, 0, .5);
+$modal-border: #808080;
+$button-bg: #d3d3d3;
+$header-border-color: #e5e5e5;
+$black: #000;
+$hover-button-bg-color: #808080;
+$red: #a52a2a;
+$white: #fff;
+
+.sc-modal {
+  background: $background;
+
+  .se-body {
+    border: 2px solid $modal-border;
+    border-radius: 0;
+    font-style: italic;
+    font-weight: 500;
+    padding: 1em;
+    width: 35%;
+  }
+
+  .sc-modal-header {
+    border-bottom: 1px solid $header-border-color;
+    font-size: 24px;
+    line-height: 32px;
+   }
+
+  .sc-modal-body {
+    padding: 20px 0;
+   }
+
+  .sc-modal-actions {
+    float: right;
+   }
+
+  .sc-modal-button {
+    background-color: $button-bg;
+    border: 3px solid transparent;
+    border-radius: 3px;
+    color: $black;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 500;
+    margin-bottom: .5em;
+    padding: 7px 30px;
+    text-align: center;
+    text-decoration: none;
+    text-transform: uppercase;
+
+    &:hover {
+      background-color: $hover-button-bg-color;
+    }
+   }
+
+  .sc-modal-button-save-exit {
+    margin-right: 20px;
+
+    &:hover {
+      color: $white;
+    }
+   }
+
+  .sc-modal-button-exit {
+    color: $red;
+   }
+}