Dispatch an open event on drag of Parity Bar (#4987)

* Dispatch an open event on drag of Parity Bar

* Bette id for ParityBar position // Replace on dapp unload

* Fix PairtyBar Positionning

js/src/views/ParityBar/parityBar.js

@@ -78,16 +78,33 @@ class ParityBar extends Component {
 
     // Hook to the dapp loaded event to position the
     // Parity Bar accordingly
-    DappsStore.get(api).on('loaded', (app) => {
+    const dappsStore = DappsStore.get(api);
-      this.app = app;
+
+    dappsStore
+      .on('loaded', (app) => {
+        this.app = app;
+        this.loadPosition();
+      });
+
+    if (this.props.dapp) {
       this.loadPosition();
-    });
+    }
   }
 
   componentWillReceiveProps (nextProps) {
     const count = this.props.pending.length;
     const newCount = nextProps.pending.length;
 
+    // Replace to default position when leaving a dapp
+    if (this.props.dapp && !nextProps.dapp) {
+      this.loadPosition(true);
+    }
+
+    // Load position when dapp loads
+    if (!this.props.dapp && nextProps.dapp) {
+      this.loadPosition();
+    }
+
     if (count === newCount) {
       return;
     }
@@ -101,7 +118,10 @@ class ParityBar extends Component {
 
   setOpened (opened, displayType = DISPLAY_SIGNER) {
     this.setState({ displayType, opened });
+    this.dispatchOpenEvent(opened);
+  }
 
+  dispatchOpenEvent (opened) {
     if (!this.bar) {
       return;
     }
@@ -241,10 +261,6 @@ class ParityBar extends Component {
   }
 
   renderDrag () {
-    if (this.props.externalLink) {
-      return;
-    }
-
     const dragButtonClasses = [ styles.dragButton ];
 
     if (this.state.moving) {
@@ -457,51 +473,56 @@ class ParityBar extends Component {
     return position;
   }
 
-  onMouseDown = (event) => {
+  onMouseDown = () => {
-    const containerElt = ReactDOM.findDOMNode(this.refs.container);
+    // Dispatch an open event in case in an iframe (get full w and h)
-    const dragButtonElt = ReactDOM.findDOMNode(this.refs.dragButton);
+    this.dispatchOpenEvent(true);
 
-    if (!containerElt || !dragButtonElt) {
+    window.setTimeout(() => {
-      console.warn(containerElt ? 'drag button' : 'container', 'not found...');
+      const containerElt = ReactDOM.findDOMNode(this.refs.container);
-      return;
+      const dragButtonElt = ReactDOM.findDOMNode(this.refs.dragButton);
-    }
 
-    const bodyRect = document.body.getBoundingClientRect();
+      if (!containerElt || !dragButtonElt) {
-    const containerRect = containerElt.getBoundingClientRect();
+        console.warn(containerElt ? 'drag button' : 'container', 'not found...');
-    const buttonRect = dragButtonElt.getBoundingClientRect();
+        return;
+      }
 
-    const buttonOffset = {
+      const bodyRect = document.body.getBoundingClientRect();
-      top: (buttonRect.top + buttonRect.height / 2) - containerRect.top,
+      const containerRect = containerElt.getBoundingClientRect();
-      left: (buttonRect.left + buttonRect.width / 2) - containerRect.left
+      const buttonRect = dragButtonElt.getBoundingClientRect();
-    };
 
-    buttonOffset.bottom = containerRect.height - buttonOffset.top;
+      const buttonOffset = {
-    buttonOffset.right = containerRect.width - buttonOffset.left;
+        top: (buttonRect.top + buttonRect.height / 2) - containerRect.top,
+        left: (buttonRect.left + buttonRect.width / 2) - containerRect.left
+      };
 
-    const button = {
+      buttonOffset.bottom = containerRect.height - buttonOffset.top;
-      offset: buttonOffset,
+      buttonOffset.right = containerRect.width - buttonOffset.left;
-      height: buttonRect.height,
-      width: buttonRect.width
-    };
 
-    const container = {
+      const button = {
-      height: containerRect.height,
+        offset: buttonOffset,
-      width: containerRect.width
+        height: buttonRect.height,
-    };
+        width: buttonRect.width
+      };
 
-    const page = {
+      const container = {
-      height: bodyRect.height,
+        height: containerRect.height,
-      width: bodyRect.width
+        width: containerRect.width
-    };
+      };
 
-    this.moving = true;
+      const page = {
-    this.measures = {
+        height: bodyRect.height,
-      button,
+        width: bodyRect.width
-      container,
+      };
-      page
-    };
 
-    this.setState({ moving: true });
+      this.moving = true;
+      this.measures = {
+        button,
+        container,
+        page
+      };
+
+      this.setMovingState(true);
+    }, 50);
   }
 
   onMouseEnter = (event) => {
@@ -570,7 +591,7 @@ class ParityBar extends Component {
     }
 
     this.moving = false;
-    this.setState({ moving: false, position });
+    this.setMovingState(false, { position });
     this.savePosition(position);
   }
 
@@ -587,39 +608,61 @@ class ParityBar extends Component {
   }
 
   get config () {
-    let config;
+    const config = store.get(LS_STORE_KEY);
 
-    try {
+    if (typeof config === 'string') {
-      config = JSON.parse(store.get(LS_STORE_KEY));
+      try {
-    } catch (error) {
+        return JSON.parse(config);
-      config = {};
+      } catch (e) {
+        return {};
+      }
     }
 
-    return config;
+    return config || {};
   }
 
-  loadPosition (props = this.props) {
+  /**
-    const { app, config } = this;
+   * Return the config key for the current view.
+   * If inside a dapp, should be the dapp id.
+   * Otherwise, try to get the current hostname.
+   */
+  getConfigKey () {
+    const { app } = this;
 
-    if (!app) {
+    if (app && app.id) {
+      return app.id;
+    }
+
+    return window.location.hostname;
+  }
+
+  loadPosition (loadDefault = false) {
+    if (loadDefault) {
       return this.setState({ position: DEFAULT_POSITION });
     }
 
-    if (config[app.id]) {
+    const { app, config } = this;
-      return this.setState({ position: config[app.id] });
+    const configKey = this.getConfigKey();
+
+    if (config[configKey]) {
+      return this.setState({ position: config[configKey] });
     }
 
-    const position = this.stringToPosition(app.position);
+    if (app && app.position) {
+      const position = this.stringToPosition(app.position);
 
-    this.setState({ position });
+      return this.setState({ position });
+    }
+
+    return this.setState({ position: DEFAULT_POSITION });
   }
 
   savePosition (position) {
-    const { app, config } = this;
+    const { config } = this;
+    const configKey = this.getConfigKey();
 
-    config[app.id] = position;
+    config[configKey] = position;
-
+    store.set(LS_STORE_KEY, config);
-    store.set(LS_STORE_KEY, JSON.stringify(config));
   }
 
   stringToPosition (value) {
@@ -647,6 +690,13 @@ class ParityBar extends Component {
         return DEFAULT_POSITION;
     }
   }
+
+  setMovingState (moving, extras = {}) {
+    this.setState({ moving, ...extras });
+
+    // Trigger an open event if it's moving
+    this.dispatchOpenEvent(moving);
+  }
 }
 
 function mapStateToProps (state) {