Fix-bug: two horizontal arrows of node can not response "hover" action

dabeng · Mar 3, 2016 · b0b9814 · b0b9814
1 parent a451bf2
commit b0b9814
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 18 deletions.
diff --git a/jquery.orgchart.css b/jquery.orgchart.css
@@ -1,3 +1,22 @@
+/*
+ * jQuery OrgChart Plugin
+ * https://github.com/dabeng/OrgChart
+ *
+ * Demos of jQuery OrgChart Plugin
+ * http://dabeng.github.io/OrgChart/local-datasource/
+ * http://dabeng.github.io/OrgChart/ajax-datasource/
+ * http://dabeng.github.io/OrgChart/ondemand-loading-data/
+ * http://dabeng.github.io/OrgChart/option-createNode/
+ * http://dabeng.github.io/OrgChart/export-orgchart/
+ * http://dabeng.github.io/OrgChart/integrate-map/
+ *
+ * Copyright 2016, dabeng
+ * http://dabeng.github.io/
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
+
 .hidden {
   display: none;
 }
@@ -97,9 +116,7 @@
   color: rgba(68, 157, 68, 0.5);
   cursor: default;
   transition: .2s;
-  transform: translate(0,0);
   -webkit-transition: .2s;
-  -webkit-transform: translate(0,0);
 }
 .orgchart .edge:hover {
   color: #449d44;
@@ -154,24 +171,23 @@
   transform: translate(4px, 0);
   -webkit-transform: translate(4px, 0);
 }
-.orgchart .node .edge.fa-chevron-right:hover ~ .fa-chevron-left {
+.orgchart .node .edge.fa-chevron-left:hover {
   transform: translate(-4px, 0);
   -webkit-transform: translate(-4px, 0);
 }
-.orgchart .node .edge.fa-chevron-left:hover {
+.orgchart .node .edge.fa-chevron-right:hover ~ .fa-chevron-left {
   transform: translate(-4px, 0);
   -webkit-transform: translate(-4px, 0);
 }
-/* the following code doesn't work */
 .orgchart .node .edge.fa-chevron-left:hover ~ .fa-chevron-right {
   transform: translate(4px, 0);
   -webkit-transform: translate(4px, 0);
 }
-.rightEdgeTransitionToRight {
+.rightEdgeMoveRight {
   transform: translate(4px, 0);
   -webkit-transform: translate(4px, 0);
 }
-.rightEdgeTransitionToLeft {
+.rightEdgeMoveLeft {
   transform: translate(-4px, 0);
   -webkit-transform: translate(-4px, 0);
 }

diff --git a/jquery.orgchart.js b/jquery.orgchart.js
@@ -1,6 +1,24 @@
-'use strict';
+/*
+ * jQuery OrgChart Plugin
+ * https://github.com/dabeng/OrgChart
+ *
+ * Demos of jQuery OrgChart Plugin
+ * http://dabeng.github.io/OrgChart/local-datasource/
+ * http://dabeng.github.io/OrgChart/ajax-datasource/
+ * http://dabeng.github.io/OrgChart/ondemand-loading-data/
+ * http://dabeng.github.io/OrgChart/option-createNode/
+ * http://dabeng.github.io/OrgChart/export-orgchart/
+ * http://dabeng.github.io/OrgChart/integrate-map/
+ *
+ * Copyright 2016, dabeng
+ * http://dabeng.github.io/
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/MIT
+ */
 
 (function($) {
+  'use strict';
 
   $.fn.orgchart = function(options) {
     var defaultOptions = {
@@ -649,21 +667,19 @@
         }
       }
     });
-    // remedy the defect of css transformation - right arrow can not be translated like left one
-    $nodeDiv.children('.leftEdge').hover(
-      function() {
+    // remedy the defect of css selector -- there is not "previous sibling" selector
+    $nodeDiv.children('.leftEdge').on('mouseenter mouseleave', function(event) {
+      if (event.type === 'mouseenter') {
         var $rightEdge = $(this).siblings('.rightEdge');
         if (!getSiblingsState($(this)).visible) {
-          $rightEdge.addClass('rightEdgeTransitionToRight');
+          $rightEdge.addClass('rightEdgeMoveRight');
         } else {
-          $rightEdge.addClass('rightEdgeTransitionToLeft');
+          $rightEdge.addClass('rightEdgeMoveLeft');
         }
-      },
-      function() {
-        $(this).siblings('.rightEdge')
-          .removeClass('rightEdgeTransitionToRight rightEdgeTransitionToLeft');
+      } else {
+        $(this).siblings('.rightEdge').removeClass('rightEdgeMoveRight rightEdgeMoveLeft');
       }
-    );
+    });
 
     // allow user to append dom modification after finishing node create of orgchart 
     if (opts.createNode) {