fix scroll bar jump and enquiry modal class

Author: samuelcolvin

src/components/contractors/ConModal.js

@@ -9,7 +9,6 @@ const TRANSITION_TIME = 500
 class ConModal extends Component {
   constructor (props) {
     super(props)
-    this.con_id = parseInt(this.props.id, 10)
     this.state = {
       show_enquiry: false,
       transition_class: ''
@@ -20,7 +19,7 @@ class ConModal extends Component {
 
   get_contractor () {
     for (let contractor of this.props.contractors) {
-      if (contractor.id === this.con_id) {
+      if (contractor.link === this.props.con_link) {
         return {contractor, contractor_extra: this.props.get_contractor_details(contractor)}
       }
     }

src/components/contractors/Contractors.js

@@ -84,8 +84,8 @@ class Contractors extends Component {
               subject_change={this.subject_change}
               root={this.props.root}/>
 
-        <Route path={this.props.root.url(':id([0-9]+):_extra')} render={props => (
-          <ConModal id={props.match.params.id}
+        <Route path={this.props.root.url(':con([0-9]+-.+)')} render={props => (
+          <ConModal con_link={props.match.params.con}
                     contractors={this.state.contractors}
                     got_contractors={this.state.got_contractors}
                     get_contractor_details={this.get_contractor_details}

src/components/enquiry/EnquiryButton.js

@@ -4,13 +4,15 @@ import EnquiryModal from './EnquiryModal'
 
 const EnquiryButton = ({root, config}) => (
   <div className="tcs-app">
-    <Link to={root.url('enquiry')} className="tcs-enquiry-button">
-      {root.get_text('enquiry_button')}
-    </Link>
+    <div class="tcs-enquiry-modal">
+      <Link to={root.url('enquiry')} className="tcs-enquiry-button">
+        {root.get_text('enquiry_button')}
+      </Link>
 
-    <Route path={root.url('enquiry')} render={props => (
-      <EnquiryModal root={root} config={config} history={props.history}/>
-    )}/>
+      <Route path={root.url('enquiry')} render={props => (
+        <EnquiryModal root={root} config={config} history={props.history}/>
+      )}/>
+    </div>
   </div>
 )
 

src/components/shared/Modal.js

@@ -6,18 +6,33 @@ class Modal extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      show: true
+      show: true,
     }
+    this.scroll_disabled = false
     this.close = this.close.bind(this)
+    this.prevent_scroll = this.prevent_scroll.bind(this)
+  }
+
+  prevent_scroll (e) {
+    if (!this.scroll_disabled) {
+      this.scroll_disabled = true
+      document.body.style.overflow = 'hidden'
+      e.preventDefault()
+    }
   }
 
   componentWillMount () {
     this.body_overflow_before = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
+    window.onwheel = this.prevent_scroll
+    window.onmousewheel = document.onmousewheel = this.prevent_scroll
+    window.ontouchmove  = this.prevent_scroll
   }
 
   componentWillUnmount () {
     document.body.style.overflow = this.body_overflow_before
+    window.onwheel = null
+    window.onmousewheel = document.onmousewheel = null
+    window.ontouchmove  = null
   }
 
   close () {