チェンジセット 116 : BH13SPARQLBuilder/src/hozo/maptool

更新日時:

2014/07/07 11:19:38 (10 年 前)

更新者:

lenz

ログメッセージ:

細かなUIのブラッシュアップ

ファイル:

• BH13SPARQLBuilder/src/hozo/maptool/jsgui.html (変更) (18 diff)

BH13SPARQLBuilder/src/hozo/maptool/jsgui.html

@@ -5 +5 @@
 <title>SPARQL Builder GUI</title>
 
-<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
-<link rel="stylesheet" type="text/css" media="screen" href="http://lod.hozo.jp/SparqlFinder/css/main.css" />
-<link rel="stylesheet" type="text/css" media="screen" href="http://lod.hozo.jp/SparqlFinder/css/table.css" />
-<link rel="stylesheet" type="text/css" media="screen" href="http://lod.hozo.jp/SparqlFinder/css/popup.css" />
 <style>
 
@@ -25 +21 @@
         height: auto;
         padding: 10px;
-        background-color: #aaccee;
-        -webkit-border-radius: 10px;
-        -moz-border-radius: 10px;
-        border-radius: 10px;
-        -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-        -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
+        -webkit-border-radius: 20px;
+        border-radius: 20px;
+        -webkit-box-shadow: 0px 0px 10px #000000;
+        box-shadow: 0px 0px 10px #000000;
+        background-image: -moz-linear-gradient(top, #eeeeff, #ffffff);
+        background-image: -ms-linear-gradient(top, #eeeeff, #ffffff);
+        background-image: -o-linear-gradient(top, #eeeeff, #ffffff);
+        background-image: -webkit-gradient(linear, center top, center bottom, from(#eeeeff), to(#ffffff));
+        background-image: -webkit-linear-gradient(top, #eeeeff, #ffffff);
+        background-image: linear-gradient(top, #eeeeff, #ffffff);
+        -webkit-background-clip: padding-box;
+        background-clip: padding-box;
 }
 
@@ -37 +38 @@
 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
-<script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/jquery-1.10.2.min.js"></script>
-<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
-<!-- 縺薙�荳€陦後ｒ蜈･繧後ｋ縺ｨ繧ｿ繝�メ縺ｧ縺ｮ繝峨Λ繝�げ縺悟庄閭ｽ縺ｫ縺ｪ繧�  -->
-<script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/jquery.ui.touch-punch.js" charset="UTF-8"></script>
 <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
 <!--<script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/template.js" charset="UTF-8"></script>-->
 <script>
 <!--
-
 
 // SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
@@ -73 +69 @@
 var TREESPACE = 0;
 var DRAWHEIGHT = 0;
+var NODEHEIGHT = 50;
 var jsontext = "";
 
@@ -122 +119 @@
 
         var width = window.innerWidth;
-        var height = TREESPACE * PATHNUM;
+        var height = ((NODEHEIGHT * 1.5) * PATHNUM) + NODEHEIGHT;
 
         // 繧ｫ繝ｩ繝ｼ繧貞叙蠕�
@@ -145 +142 @@
             .attr("width", width)
             .attr("height", height);
-
+/*
+        var bg = d3.select(".background")
+                .enter()
+                .append("rect")
+                .attr("x", 0)
+                .attr("y", 0)
+                .attr("width", width)
+                .attr("height", height)
+                .attr("fill", #999999);
+*/
         var link = svg.selectAll(".link")
         .data(json.links)
@@ -156 +162 @@
         .enter().append("circle")
         .attr("class", "node")
-        .attr("r", 20)
+        .attr("r", (NODEHEIGHT / 2))
         .attr("cx", function(d) { return d.x;} )
         .attr("cy",  function(d) { return d.y; })
@@ -192 +198 @@
         node.on("mouseover", function(d){
 
+                if (!d. isDrag){
+                        d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; });
+                        d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
+                        d3.select(this).style("stroke-width", function(d) { return 2; });
+                        d3.select(this).style("stroke", function(d) { return '#0000ff'; });
+                }
+
+                d.isDrag = false;
+
                 var path = [];
                 pathname = [];
-                path.push(d.nodeid);
-                pathname.push(d.name);
-                do{
-                        for(var i = 0; i < link.data().length; i++){
-                                if(path[(path.length-1)] == link.data()[i].target){
-                                        path.push(link.data()[i].source);
-                                        pathname.push(link.data()[i].property);
-                                        pathname.push(node.data()[link.data()[i].source].name);
+
+                if(d.nodeid != 0){
+                        path.push(d.nodeid);
+                        pathname.push(d.name);
+                        do{
+                                for(var i = 0; i < link.data().length; i++){
+                                        if(path[(path.length-1)] == link.data()[i].target){
+                                                path.push(link.data()[i].source);
+                                                pathname.push(link.data()[i].property);
+                                                pathname.push(node.data()[link.data()[i].source].name);
+                                        }
                                 }
-                        }
-                }while(path[(path.length-1)] != 0);
-                var resultText = "<h3>Selected Path</h3>";
-                for (var i = pathname.length;i > 0; i--){
-                        if(i % 2 == 1){
-                                resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>";
+                        }while(path[(path.length-1)] != 0);
+                        var resultText = "<h3>Selected Path</h3>";
+                        for (var i = pathname.length;i > 0; i--){
+                                if(i % 2 == 1){
+                                        resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>";
+                                }else{
+                                        resultText = resultText + pathname[i - 1] + "<br><br>";
+                                }
+                        }
+
+                        document.getElementById("selectpath").innerHTML=(resultText);
+                        document.getElementById("showpath").style.display = "block";
+
+                        if(d.group > (MAXDEPTH - 2)){
+                                document.getElementById("getsparqlbutton").style.display = "block";
                         }else{
-                                resultText = resultText + pathname[i - 1] + "<br><br>";
-                        }
-                }
-                document.getElementById("selectpath").innerHTML=(resultText);
-                document.getElementById("showpath").style.display = "block";
-
-                var xPosition = parseFloat(d3.select(this).attr("cx")) + 22;
-                var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + 22;
-
-                if(xPosition < 0){
-                        xPosition = 0;
-                }
-                if(yPosition < 0){
-                        yPosition = 0;
-                }
-
-                document.getElementById("showpath").style.left = xPosition + "px"
-                document.getElementById("showpath").style.top = yPosition + "px"
-                document.getElementById("showpath").style.display = "block";
+                                document.getElementById("getsparqlbutton").style.display = "none";
+                        }
+
+                        var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + (NODEHEIGHT * 0.5);
+                        var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + (NODEHEIGHT * 0.5);
+
+                        if(xPosition < 0){
+                                xPosition = 0;
+                        }
+                        if(yPosition < 0){
+                                yPosition = 0;
+                        }
+
+                        document.getElementById("showpath").style.left = xPosition + "px"
+                        document.getElementById("showpath").style.top = yPosition + "px"
+                        document.getElementById("showpath").style.display = "block";
+
+                }else{
+                        document.getElementById("showpath").style.display = "none";
+                }
 
                 tlink
@@ -241 +269 @@
                 })
 
-            if (!d. isDrag){
-                        d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; });
-                        d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; });
-                        d3.select(this).style("stroke-width", function(d) { return 2; });
-                        d3.select(this).style("stroke", function(d) { return '#0000ff'; });
-            }
-
-            d.isDrag = false;
         });
 
@@ -281 +301 @@
                 .attr("x", function(d) {return d.x;})
                 .attr("y", function(d) {
-                        var updown = 18;
+                        var updown = (NODEHEIGHT * 0.4);
                         if(d.group % 2 == 1){
-                                updown = -8;
+                                updown = -(NODEHEIGHT * 0.2);
                         }
                         return d.y + updown;
@@ -312 +332 @@
         MAXDEPTH = 0;
         TREESPACE = 0;
-        DRAWHEIGHT = 0;
+        DRAWHEIGHT = NODEHEIGHT;
 
         var obj = JSON.parse(jsontext);
@@ -387 +407 @@
         }
         TREESPACE = (window.innerWidth - 200) / (MAXDEPTH + 1);
-        DRAWHEIGHT = TREESPACE / 2;
 
         // 縺ｧ縺阪◆邨先棡繧定ｿ斐☆
@@ -436 +455 @@
 
         if(myNodeIndex != 0){
-                DRAWHEIGHT += (TREESPACE / 2);
-                var x = (depth * TREESPACE) + (TREESPACE / 2);
+                DRAWHEIGHT += (NODEHEIGHT * 1.5);
+                var x = (depth * TREESPACE) + (TREESPACE / 3);
                 var y = DRAWHEIGHT;
                 nodes[myNodeIndex].x = x;
@@ -443 +462 @@
         }else{
                 var x = TREESPACE / 2;
-                var y = (TREESPACE / 2) * (PATHNUM / 2) + (TREESPACE / 4);
+                var y = (NODEHEIGHT * 1.5) * ((PATHNUM - 1) / 2) + NODEHEIGHT;
                 nodes[myNodeIndex].x = x;
                 nodes[myNodeIndex].y = y;
@@ -461 +480 @@
         for (var i=0; i<children.length; i++){
                 if(i == 0){
-                        DRAWHEIGHT -= (TREESPACE / 2);
+                        DRAWHEIGHT -= (NODEHEIGHT * 1.5);
                 }
                 var child = children[i];
@@ -499 +518 @@
                 alert(sel);
         }
+
+        document.getElementById("showpath").style.display = "none";
 
         $.ajax({
@@ -527 +548 @@
 
         document.getElementById("selectpath").innerHTML = "";
+        document.getElementById("showpath").style.display = "none";
 
         var selstart = $("*[name=startclass]").val();
@@ -618 +640 @@
         <div id="selectpath" style="word-wrap: break-word;">
         </div>
-        <input type="button" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
+        <input type="button" id="getsparqlbutton" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
 </div>
 </body>