Merge pull request #2 from meikoudras/master

Enhancements for various devices

Author: vkbansal

modules/contextmenu-layer.js

@@ -33,14 +33,18 @@ exports["default"] = function (identifier, configure) {
         (0, _invariant2["default"])(typeof configure === "function", "Expected configure to be a function. See %s", displayName);
 
         return _react2["default"].createClass({
-            displayName: displayName + "ContextMenuLayer",
-            componentDidMount: function componentDidMount() {
-                _react2["default"].findDOMNode(this).addEventListener("contextmenu", this.handleContextClick);
-            },
-            componentWillUnmount: function componentWillUnmount() {
-                _react2["default"].findDOMNode(this).removeEventListener("contextmenu", this.handleContextClick);
-            },
-            handleContextClick: function handleContextClick(event) {
+          displayName: displayName + "ContextMenuLayer",
+          componentDidMount: function componentDidMount() {
+              document.addEventListener("contextmenu", this.handleContextClick);
+          },
+          componentWillUnmount: function componentWillUnmount() {
+              document.removeEventListener("contextmenu", this.handleContextClick);
+          },
+          handleContextClick: function handleContextClick(event) {
+              var target = event.target;
+              var domNode = _react2["default"].findDOMNode(this);
+
+              if(target == domNode || domNode.contains(target)) {
                 var currentItem = configure(this.props);
 
                 (0, _invariant2["default"])((0, _lodashIsobject2["default"])(currentItem), "Expected configure to return an object. See %s", displayName);
@@ -53,12 +57,14 @@ exports["default"] = function (identifier, configure) {
                     currentItem: currentItem,
                     isVisible: typeof identifier === "function" ? identifier(this.props) : identifier
                 });
-            },
-            render: function render() {
-                return _react2["default"].createElement(Component, _extends({}, this.props, { identifier: identifier }));
-            }
-        });
+              }
+
+          },
+          render: function render() {
+              return _react2["default"].createElement(Component, _extends({}, this.props, { identifier: identifier }));
+          }
+      });
     };
 };
 
-module.exports = exports["default"];
+module.exports = exports["default"];

modules/menu-container.js

@@ -47,8 +47,8 @@ var MenuContainer = _react2["default"].createClass({
     getMenuPosition: function getMenuPosition(x, y) {
         var menu = _react2["default"].findDOMNode(this.refs.menu);
         var screen = window.screen;
-        var scrollX = window.scrollX;
-        var scrollY = window.scrollY;
+        var scrollX = document.documentElement.scrollTop;
+        var scrollY = document.documentElement.scrollLeft;
         var AvailWidth = screen.AvailWidth;
         var AvailHeight = screen.AvailHeight;
         var offsetWidth = menu.offsetWidth;
@@ -70,21 +70,26 @@ var MenuContainer = _react2["default"].createClass({
         return menuStyles;
     },
     _outsideClickHandler: function _outsideClickHandler(event) {
-        var localNode = this.localNode,
-            source = event.target,
-            found = false;
+        var _props = this.props;
+        var isVisible = _props.isVisible;
+        var identifier = _props.identifier;
+        if(isVisible === identifier) {
+          var localNode = this.localNode,
+              source = event.target,
+              found = false;
 
-        while (source.parentNode) {
-            found = source === localNode;
+          while (source.parentNode) {
+              found = source === localNode;
 
-            if (found) {
-                return;
-            }
+              if (found) {
+                  return;
+              }
 
-            source = source.parentNode;
-        }
+              source = source.parentNode;
+          }
 
-        this._hideMenu();
+          this._hideMenu();
+        }
     },
     _hideMenu: function _hideMenu() {
         this.props.flux.getActions("menu").setParams({
@@ -132,4 +137,4 @@ var MenuContainer = _react2["default"].createClass({
 });
 
 exports["default"] = MenuContainer;
-module.exports = exports["default"];
+module.exports = exports["default"];

src/contextmenu-layer.js

@@ -28,30 +28,34 @@ export default function (identifier, configure) {
         return React.createClass({
             displayName: `${displayName}ContextMenuLayer`,
             componentDidMount() {
-                React.findDOMNode(this)
+                document
                     .addEventListener("contextmenu", this.handleContextClick);
             },
             componentWillUnmount() {
-                React.findDOMNode(this)
+                document
                     .removeEventListener("contextmenu", this.handleContextClick);
             },
             handleContextClick(event) {
-                let currentItem = configure(this.props);
+                let target = event.target;
+                let domNode = React.findDOMNode(this);
+                if(target == domNode || domNode.contains(target)) {
+                    let currentItem = configure(this.props);
+    
+                    invariant(
+                        _isObject(currentItem),
+                        "Expected configure to return an object. See %s",
+                        displayName
+                    );
 
-                invariant(
-                    _isObject(currentItem),
-                    "Expected configure to return an object. See %s",
-                    displayName
-                );
-
-                event.preventDefault();
-                const actions = flux.getActions("menu");
-                actions.setParams({
-                    x: event.clientX,
-                    y: event.clientY,
-                    currentItem,
-                    isVisible: typeof identifier === "function" ? identifier(this.props) : identifier
-                });
+                    event.preventDefault();
+                    const actions = flux.getActions("menu");
+                    actions.setParams({
+                        x: event.clientX,
+                        y: event.clientY,
+                        currentItem,
+                        isVisible: typeof identifier === "function" ? identifier(this.props) : identifier
+                    });
+                }
             },
             render() {
                 return (

src/menu-container.js

@@ -35,7 +35,9 @@ const MenuContainer = React.createClass({
     },
     getMenuPosition(x, y) {
         let menu = React.findDOMNode(this.refs.menu);
-        let { screen, scrollX, scrollY } = window,
+        let scrollX = document.documentElement.scrollTop;
+        let scrollY = document.documentElement.scrollLeft;
+        let { screen } = window,
             { AvailWidth, AvailHeight } = screen,
             { offsetWidth, offsetHeight } = menu,
             menuStyles = {};
@@ -55,19 +57,22 @@ const MenuContainer = React.createClass({
         return menuStyles;
     },
     _outsideClickHandler(event) {
-        let localNode = this.localNode,
-            source = event.target,
-            found = false;
+        let { isVisible, identifier } = this.props;
+        if(isVisible === identifier) {
+          let localNode = this.localNode,
+              source = event.target,
+              found = false;
 
-        while (source.parentNode) {
-            found = (source === localNode);
+          while (source.parentNode) {
+              found = (source === localNode);
 
-            if (found) { return; }
+              if (found) { return; }
 
-            source = source.parentNode;
-        }
+              source = source.parentNode;
+          }
 
-        this._hideMenu();
+          this._hideMenu();
+        }
     },
     _hideMenu() {
         this.props.flux.getActions("menu").setParams({