From 537de9cffc532d0b55e389edd845850bf439ad58 Mon Sep 17 00:00:00 2001
From: ShaoChinYu <shaoqin.yu@kyligence.io>
Date: Fri, 6 Jan 2017 12:22:59 +0800
Subject: [PATCH] KYLIN-2287 fix the button display issue with js

---
 webapp/app/js/controllers/models.js         | 36 +++++++++++++++++++++++++++++
 webapp/app/partials/models/models_tree.html |  6 ++---
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/webapp/app/js/controllers/models.js b/webapp/app/js/controllers/models.js
index e3ee038..fd21845 100644
--- a/webapp/app/js/controllers/models.js
+++ b/webapp/app/js/controllers/models.js
@@ -183,7 +183,41 @@ KylinApp.controller('ModelsCtrl', function ($scope, $q, $routeParams, $location,
     });
   };
 
+  function changePositionOfScrollBar(){
+    //get which button be clicked
+    var btn = window.event.srcElement || window.event.target;
+    //get current position of scroll bar
+    var scrollTop =$("#cube_model_trees").scrollTop();
+    //get total length of scroll bar
+    var scrollHeight  = document.getElementById('cube_model_trees').scrollHeight;
+    //get the position of clicked button relative to the top of window
+    var offsetTop  =$(btn).offset().top;
+    //get the position of the container relative to the top of window
+    var treeOffsetTop = $("#cube_model_trees").offset().top;
+
+    //distance from button to the top of tree model container
+    var minor = offsetTop - treeOffsetTop;
+    //height of tree model container
+    var  viewH =$("#cube_model_trees").height();
+
+    //change scroll bar to show the dropdown menu
+    if(minor + 100 > viewH){//100 is the height of dropdowm menu
+      if((scrollHeight - scrollTop - viewH)>=minor+100-viewH){
+        document.getElementById('cube_model_trees').scrollTop+=(minor+120-viewH);
+      }else{
+        var node=document.createElement("LI");
+        node.style.height = (minor+120-viewH)+"px";
+        document.getElementById("models-tree").appendChild(node);
+        var  viewH =$("#cube_model_trees").height();//可见高度
+        document.getElementById('cube_model_trees').scrollTop+=(minor+120-viewH);
+
+      }
+    }
+  }
+
   $scope.listModelAccess = function (model) {
+    changePositionOfScrollBar();
+
     if(model.uuid){
       AccessService.list({type: "DataModelDesc", uuid: model.uuid}, function (accessEntities) {
         model.accessEntities = accessEntities;
@@ -196,6 +230,8 @@ KylinApp.controller('ModelsCtrl', function ($scope, $q, $routeParams, $location,
         }
       })
     }
+
+
   };
 
   var ModelDetailModalCtrl = function ($scope, $location, $modalInstance, scope) {
diff --git a/webapp/app/partials/models/models_tree.html b/webapp/app/partials/models/models_tree.html
index 944d2dc..eba7d29 100644
--- a/webapp/app/partials/models/models_tree.html
+++ b/webapp/app/partials/models/models_tree.html
@@ -41,10 +41,10 @@
   <div>
     <h3 class="text-info">Models</h3>
   </div>
+<!--{{window}}px -->
+    <div id="cube_model_trees" style="width:100%; height:250px; overflow:auto;margin-top: 20px;" class="cube_model_trees">
 
-    <div style="width:100%; height:{{window}}px; overflow:auto;margin-top: 20px;" class="cube_model_trees">
-
-        <ul class="list-group models-tree">
+        <ul class="list-group models-tree" id="models-tree">
           <li class="list-group-item" ng-repeat="model in modelsManager.models">
 
             <div class="pull-right" showonhoverparent style="display:none;" >
-- 
2.7.2.windows.1