diff --git a/jquery.orgchart.css b/jquery.orgchart.css index 0d27d9b4..5e81333a 100644 --- 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 index 3ab9848d..1075fabb 100644 --- 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) {