差分発生行の前後
無視リスト:
更新日時:
2014/07/07 11:19:38 (10 年 前)
更新者:
lenz
ログメッセージ:

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

ファイル:
1 変更

凡例:

変更なし
追加
削除

  • BH13SPARQLBuilder/src/hozo/maptool/jsgui.html

    r102 r116  
    55<title>SPARQL Builder GUI</title> 
    66 
    7 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
    8 <link rel="stylesheet" type="text/css" media="screen" href="http://lod.hozo.jp/SparqlFinder/css/main.css" /> 
    9 <link rel="stylesheet" type="text/css" media="screen" href="http://lod.hozo.jp/SparqlFinder/css/table.css" /> 
    10 <link rel="stylesheet" type="text/css" media="screen" href="http://lod.hozo.jp/SparqlFinder/css/popup.css" /> 
    117<style> 
    128 
    … …  
    2521        height: auto; 
    2622        padding: 10px; 
    27         background-color: #aaccee; 
    28         -webkit-border-radius: 10px; 
    29         -moz-border-radius: 10px; 
    30         border-radius: 10px; 
    31         -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
    32         -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
    33         box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); 
     23        -webkit-border-radius: 20px; 
     24        border-radius: 20px; 
     25        -webkit-box-shadow: 0px 0px 10px #000000; 
     26        box-shadow: 0px 0px 10px #000000; 
     27        background-image: -moz-linear-gradient(top, #eeeeff, #ffffff); 
     28        background-image: -ms-linear-gradient(top, #eeeeff, #ffffff); 
     29        background-image: -o-linear-gradient(top, #eeeeff, #ffffff); 
     30        background-image: -webkit-gradient(linear, center top, center bottom, from(#eeeeff), to(#ffffff)); 
     31        background-image: -webkit-linear-gradient(top, #eeeeff, #ffffff); 
     32        background-image: linear-gradient(top, #eeeeff, #ffffff); 
     33        -webkit-background-clip: padding-box; 
     34        background-clip: padding-box; 
    3435} 
    3536 
    … …  
    3738 
    3839<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
    39 <script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/jquery-1.10.2.min.js"></script> 
    40 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> 
    41 <!-- 縺薙�荳€陦後ｒ蜈･繧後ｋ縺ｨ繧ｿ繝�メ縺ｧ縺ｮ繝峨Λ繝�げ縺悟庄閭ｽ縺ｫ縺ｪ繧�  --> 
    42 <script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/jquery.ui.touch-punch.js" charset="UTF-8"></script> 
    4340<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> 
    4441<!--<script type="text/javascript" src="http://lod.hozo.jp/SparqlFinder/js/template.js" charset="UTF-8"></script>--> 
    4542<script> 
    4643<!-- 
    47  
    4844 
    4945// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL 
    … …  
    7369var TREESPACE = 0; 
    7470var DRAWHEIGHT = 0; 
     71var NODEHEIGHT = 50; 
    7572var jsontext = ""; 
    7673 
    … …  
    122119 
    123120        var width = window.innerWidth; 
    124         var height = TREESPACE * PATHNUM; 
     121        var height = ((NODEHEIGHT * 1.5) * PATHNUM) + NODEHEIGHT; 
    125122 
    126123        // 繧ｫ繝ｩ繝ｼ繧貞叙蠕� 
    … …  
    145142            .attr("width", width) 
    146143            .attr("height", height); 
    147  
     144/* 
     145        var bg = d3.select(".background") 
     146                .enter() 
     147                .append("rect") 
     148                .attr("x", 0) 
     149                .attr("y", 0) 
     150                .attr("width", width) 
     151                .attr("height", height) 
     152                .attr("fill", #999999); 
     153*/ 
    148154        var link = svg.selectAll(".link") 
    149155        .data(json.links) 
    … …  
    156162        .enter().append("circle") 
    157163        .attr("class", "node") 
    158         .attr("r", 20) 
     164        .attr("r", (NODEHEIGHT / 2)) 
    159165        .attr("cx", function(d) { return d.x;} ) 
    160166        .attr("cy",  function(d) { return d.y; }) 
    … …  
    192198        node.on("mouseover", function(d){ 
    193199 
     200                if (!d. isDrag){ 
     201                        d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; }); 
     202                        d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); 
     203                        d3.select(this).style("stroke-width", function(d) { return 2; }); 
     204                        d3.select(this).style("stroke", function(d) { return '#0000ff'; }); 
     205                } 
     206 
     207                d.isDrag = false; 
     208 
    194209                var path = []; 
    195210                pathname = []; 
    196                 path.push(d.nodeid); 
    197                 pathname.push(d.name); 
    198                 do{ 
    199                         for(var i = 0; i < link.data().length; i++){ 
    200                                 if(path[(path.length-1)] == link.data()[i].target){ 
    201                                         path.push(link.data()[i].source); 
    202                                         pathname.push(link.data()[i].property); 
    203                                         pathname.push(node.data()[link.data()[i].source].name); 
     211 
     212                if(d.nodeid != 0){ 
     213                        path.push(d.nodeid); 
     214                        pathname.push(d.name); 
     215                        do{ 
     216                                for(var i = 0; i < link.data().length; i++){ 
     217                                        if(path[(path.length-1)] == link.data()[i].target){ 
     218                                                path.push(link.data()[i].source); 
     219                                                pathname.push(link.data()[i].property); 
     220                                                pathname.push(node.data()[link.data()[i].source].name); 
     221                                        } 
    204222                                } 
    205                         } 
    206                 }while(path[(path.length-1)] != 0); 
    207                 var resultText = "<h3>Selected Path</h3>"; 
    208                 for (var i = pathname.length;i > 0; i--){ 
    209                         if(i % 2 == 1){ 
    210                                 resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>"; 
     223                        }while(path[(path.length-1)] != 0); 
     224                        var resultText = "<h3>Selected Path</h3>"; 
     225                        for (var i = pathname.length;i > 0; i--){ 
     226                                if(i % 2 == 1){ 
     227                                        resultText = resultText + "<span style=\"font-weight: bold;\">" + pathname[i - 1] + "</span><br><br>"; 
     228                                }else{ 
     229                                        resultText = resultText + pathname[i - 1] + "<br><br>"; 
     230                                } 
     231                        } 
     232 
     233                        document.getElementById("selectpath").innerHTML=(resultText); 
     234                        document.getElementById("showpath").style.display = "block"; 
     235 
     236                        if(d.group > (MAXDEPTH - 2)){ 
     237                                document.getElementById("getsparqlbutton").style.display = "block"; 
    211238                        }else{ 
    212                                 resultText = resultText + pathname[i - 1] + "<br><br>"; 
    213                         } 
    214                 } 
    215                 document.getElementById("selectpath").innerHTML=(resultText); 
    216                 document.getElementById("showpath").style.display = "block"; 
    217  
    218                 var xPosition = parseFloat(d3.select(this).attr("cx")) + 22; 
    219                 var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + 22; 
    220  
    221                 if(xPosition < 0){ 
    222                         xPosition = 0; 
    223                 } 
    224                 if(yPosition < 0){ 
    225                         yPosition = 0; 
    226                 } 
    227  
    228                 document.getElementById("showpath").style.left = xPosition + "px" 
    229                 document.getElementById("showpath").style.top = yPosition + "px" 
    230                 document.getElementById("showpath").style.display = "block"; 
     239                                document.getElementById("getsparqlbutton").style.display = "none"; 
     240                        } 
     241 
     242                        var xPosition = parseFloat(d3.select(this).attr("cx")) + parseFloat(d3.select(this).style("stroke-width")) + (NODEHEIGHT * 0.5); 
     243                        var yPosition = parseFloat(d3.select(this).attr("cy") - document.getElementById("showpath").offsetHeight + document.getElementById("menu").offsetHeight) + (NODEHEIGHT * 0.5); 
     244 
     245                        if(xPosition < 0){ 
     246                                xPosition = 0; 
     247                        } 
     248                        if(yPosition < 0){ 
     249                                yPosition = 0; 
     250                        } 
     251 
     252                        document.getElementById("showpath").style.left = xPosition + "px" 
     253                        document.getElementById("showpath").style.top = yPosition + "px" 
     254                        document.getElementById("showpath").style.display = "block"; 
     255 
     256                }else{ 
     257                        document.getElementById("showpath").style.display = "none"; 
     258                } 
    231259 
    232260                tlink 
    … …  
    241269                }) 
    242270 
    243             if (!d. isDrag){ 
    244                         d3.selectAll(".node").style("stroke-width", function(d) { return '1.5px'; }); 
    245                         d3.selectAll(".node").style("stroke", function(d) { return '#ffffff'; }); 
    246                         d3.select(this).style("stroke-width", function(d) { return 2; }); 
    247                         d3.select(this).style("stroke", function(d) { return '#0000ff'; }); 
    248             } 
    249  
    250             d.isDrag = false; 
    251271        }); 
    252272 
    … …  
    281301                .attr("x", function(d) {return d.x;}) 
    282302                .attr("y", function(d) { 
    283                         var updown = 18; 
     303                        var updown = (NODEHEIGHT * 0.4); 
    284304                        if(d.group % 2 == 1){ 
    285                                 updown = -8; 
     305                                updown = -(NODEHEIGHT * 0.2); 
    286306                        } 
    287307                        return d.y + updown; 
    … …  
    312332        MAXDEPTH = 0; 
    313333        TREESPACE = 0; 
    314         DRAWHEIGHT = 0; 
     334        DRAWHEIGHT = NODEHEIGHT; 
    315335 
    316336        var obj = JSON.parse(jsontext); 
    … …  
    387407        } 
    388408        TREESPACE = (window.innerWidth - 200) / (MAXDEPTH + 1); 
    389         DRAWHEIGHT = TREESPACE / 2; 
    390409 
    391410        // 縺ｧ縺阪◆邨先棡繧定ｿ斐☆ 
    … …  
    436455 
    437456        if(myNodeIndex != 0){ 
    438                 DRAWHEIGHT += (TREESPACE / 2); 
    439                 var x = (depth * TREESPACE) + (TREESPACE / 2); 
     457                DRAWHEIGHT += (NODEHEIGHT * 1.5); 
     458                var x = (depth * TREESPACE) + (TREESPACE / 3); 
    440459                var y = DRAWHEIGHT; 
    441460                nodes[myNodeIndex].x = x; 
    … …  
    443462        }else{ 
    444463                var x = TREESPACE / 2; 
    445                 var y = (TREESPACE / 2) * (PATHNUM / 2) + (TREESPACE / 4); 
     464                var y = (NODEHEIGHT * 1.5) * ((PATHNUM - 1) / 2) + NODEHEIGHT; 
    446465                nodes[myNodeIndex].x = x; 
    447466                nodes[myNodeIndex].y = y; 
    … …  
    461480        for (var i=0; i<children.length; i++){ 
    462481                if(i == 0){ 
    463                         DRAWHEIGHT -= (TREESPACE / 2); 
     482                        DRAWHEIGHT -= (NODEHEIGHT * 1.5); 
    464483                } 
    465484                var child = children[i]; 
    … …  
    499518                alert(sel); 
    500519        } 
     520 
     521        document.getElementById("showpath").style.display = "none"; 
    501522 
    502523        $.ajax({ 
    … …  
    527548 
    528549        document.getElementById("selectpath").innerHTML = ""; 
     550        document.getElementById("showpath").style.display = "none"; 
    529551 
    530552        var selstart = $("*[name=startclass]").val(); 
    … …  
    618640        <div id="selectpath" style="word-wrap: break-word;"> 
    619641        </div> 
    620         <input type="button" name="getsparql" value="Get SPARQL" onClick="getSPARQL()"> 
     642        <input type="button" id="getsparqlbutton" name="getsparql" value="Get SPARQL" onClick="getSPARQL()"> 
    621643</div> 
    622644</body>