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);
+
+    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,7 +473,11 @@ class ParityBar extends Component {
     return position;
   }
 
-  onMouseDown = (event) => {
+  onMouseDown = () => {
+    // Dispatch an open event in case in an iframe (get full w and h)
+    this.dispatchOpenEvent(true);
+
+    window.setTimeout(() => {
       const containerElt = ReactDOM.findDOMNode(this.refs.container);
       const dragButtonElt = ReactDOM.findDOMNode(this.refs.dragButton);
 
@@ -501,7 +521,8 @@ class ParityBar extends Component {
         page
       };
 
-    this.setState({ moving: true });
+      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);
 
+    if (typeof config === 'string') {
       try {
-      config = JSON.parse(store.get(LS_STORE_KEY));
-    } catch (error) {
-      config = {};
+        return JSON.parse(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]) {
-      return this.setState({ position: config[app.id] });
+    const { app, config } = this;
+    const configKey = this.getConfigKey();
+
+    if (config[configKey]) {
+      return this.setState({ position: config[configKey] });
     }
 
+    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;
-
-    store.set(LS_STORE_KEY, JSON.stringify(config));
+    config[configKey] = position;
+    store.set(LS_STORE_KEY, 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) {