root/SPARQLBuilderWWW/web/jsgui.html @ 223

リビジョン 207, 10.6 KB (コミッタ: lenz, 10 年 前)

SPARQLが取得するたびにダブってしまう問題の解決

行番号 
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html>
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5<title>SPARQL Builder GUI</title>
6
7<style>
8
9.link {
10  stroke: #999;
11  stroke-opacity: .6;
12}
13
14#showpath {
15        position: absolute;
16        width: 200px;
17        height: auto;
18        padding: 15px;
19        -webkit-border-radius: 20px;
20        border-radius: 20px;
21        -webkit-box-shadow: 0px 0px 10px #000000;
22        box-shadow: 0px 0px 10px #000000;
23        background-image: -moz-linear-gradient(top, #eeeeff, #ffffff);
24        background-image: -ms-linear-gradient(top, #eeeeff, #ffffff);
25        background-image: -o-linear-gradient(top, #eeeeff, #ffffff);
26        background-image: -webkit-gradient(linear, center top, center bottom, from(#eeeeff), to(#ffffff));
27        background-image: -webkit-linear-gradient(top, #eeeeff, #ffffff);
28        background-image: linear-gradient(top, #eeeeff, #ffffff);
29        -webkit-background-clip: padding-box;
30        background-clip: padding-box;
31}
32
33</style>
34
35<script type="text/javascript" src="jquery.min.js"></script>
36<script type="text/javascript" src="d3.min.js"></script>
37<script type="text/javascript" src="drawgraph.js"></script>
38<script>
39<!--
40
41// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
42// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
43
44// 隱ュ縺ソ霎シ縺ソ譎ゅ↓螳溯。後€ゅお繝ウ繝峨�繧、繝ウ繝医�繝ェ繧ケ繝医r騾壼クク縺ョ驟榊�縺ァ霑斐&繧後k縺薙→縺ァ蛻昴a縺ョ驕ク謚櫁い縺ォ謖ソ蜈・
45var getEndPointsURL = "eplist";
46
47// 繧ィ繝ウ繝峨�繧、繝ウ繝医′驕ク謚槭&繧後◆繧峨◎縺ョURL繧弾p縺ィ縺�≧蜷榊燕縺ァ騾∽ソ。縲√け繝ゥ繧ケ繝ェ繧ケ繝医r騾壼クク縺ョ驟榊�縺ァ霑斐&繧後k縺薙→縺ァ繧ッ繝ゥ繧ケ縺ョ驕ク謚櫁い縺ォ謖ソ蜈・
48var getClassListURL = "clist";
49
50// 繧ッ繝ゥ繧ケ莠後▽縺碁∈謚槭&繧後◆繧峨◎縺ョ繧ッ繝ゥ繧ケ蜷阪rstartclass縲‘ndclass縺ィ縺�≧蜷榊燕縺ァ縺昴l縺槭l騾∽ソ。縲√◎縺ョ莠後▽繧堤オ舌�繝代せ縺ョ繝ェ繧ケ繝医rJSON蠖「蠑上�繝�く繧ケ繝医〒霑斐&繧後k縺薙→縺ァ縺昴l繧偵げ繝ゥ繝輔↓謠冗判
51var getPathListURL = "plist";
52
53// 繝代せ縺碁∈謚槭&繧後◆繧泳sonpath縺ィ縺�≧蜷榊燕縺ァ繝代せ繧帝€壼クク縺ョ驟榊�縺ァ騾∽ソ。縲ヾPARQL繧ッ繧ィ繝ェ繧偵ユ繧ュ繧ケ繝医〒蜿励¢蜿悶j繝�く繧ケ繝医お繝ェ繧「縺ォ謖ソ蜈・
54var getSPARQLURL = "sparql";
55
56// 縺ァ縺阪≠縺後▲縺欖PARQL繧帝€∽ソ。縺吶kURL�域悴螳溯」�シ�
57
58// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
59// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
60
61
62// 騾√i繧後◆繝代せ縺ョ菫晏ュ伜�
63var jsontext = "";
64// 霑斐☆繝代せ縺ョ繧ェ繝悶ず繧ァ繧ッ繝�
65var pathobj = [];
66// 陦ィ遉コ縺吶k繝代せ縺ョ謨ー
67var pathlimit = 10;
68
69// 騾√i繧後◆繝代せ縺ョ謨ー
70var PATHNUM = 0;
71// 騾√i繧後◆繝代せ縺ョ譛€螟ァ豺ア縺�
72var MAXDEPTH = 0;
73// 繝代せ縺ョ繝弱�繝蛾俣菴咏區
74var TREESPACE = 0;
75// 繝代せ髢薙�荳贋ク倶ス咏區
76var DRAWHEIGHT = 0;
77// 繝弱�繝峨�螟ァ縺阪&
78var NODEHEIGHT = 50;
79// 繝��繝ォ繝√ャ繝励r髫縺吶◆繧√�蜍輔″蛻、螳夂畑
80var MOUSEMOVED = 0;
81
82
83// 髢九>縺溘i蜷�ィョ繧、繝ウ繧ソ繝シ繝輔ぉ繝シ繧ケ驛ィ蜩√�繧オ繧、繧コ繧貞、画峩縲√お繝ウ繝峨�繧、繝ウ繝井ク€隕ァ繧貞叙蠕励@繧サ繝�ヨ
84$(window).load(function() {
85
86        // 荳企Κ繝。繝九Η繝シ縺ョ蟷�シ育判髱「繧オ繧、繧コ縺ィ蜷後§��
87        var menuwidth = window.innerWidth + "px";
88        // 荳企Κ繝。繝九Η繝シ蟾ヲ蛛エ驛ィ蛻�シ亥�蜉帶ャ�シ峨�繧オ繧、繧コ
89        var inputswidth = ((window.innerWidth - 100) / 2) + "px";
90        // 縺昴l縺槭l縺ォ繧サ繝�ヨ
91        document.getElementById("menu").style.width = menuwidth;
92        document.getElementById("ajaxload").style.width = menuwidth;
93        document.endpoint.selectendpoint.style.width = inputswidth;
94        document.seclass.startclass.style.width = inputswidth;
95        document.seclass.endclass.style.width = inputswidth;
96        document.path.sparql.style.width = inputswidth;
97        document.path.sendsparql.style.width = inputswidth;
98        // 繧ー繝ゥ繝墓緒逕サ驛ィ蛻�r荳企Κ繝。繝九Η繝シ逶エ蠕後↓謗・縺吶k繧医≧縺ォ險ュ螳�
99        document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px";
100        document.getElementById("ajaxload").style.height = document.getElementById("menu").offsetHeight + "px";
101
102        ajaxload("view");
103        // 繧ィ繝ウ繝峨�繧、繝ウ繝井ク€隕ァ繧貞叙蠕励@繧サ繝�ヨ
104        $.ajax({
105                type: "GET",
106                url : getEndPointsURL,
107                dataType: 'json',
108                success : function(data) {
109                        setEndpoints(data);
110                        ajaxload("hide");
111                },
112                error : function(XMLHttpRequest, textStatus, errorThrown) {
113                        alert("繝ェ繧ッ繧ィ繧ケ繝域凾縺ォ縺ェ繧薙i縺九�繧ィ繝ゥ繝シ縺檎匱逕溘@縺セ縺励◆�� + textStatus +":\n" + errorThrown);
114                        ajaxload("hide");
115                }
116        });
117
118});
119
120function ajaxload(mode){
121        if(mode == "view"){
122                document.getElementById("ajaxload").style.display = "block";
123        }else{
124                document.getElementById("ajaxload").style.display = "none";
125        }
126}
127
128function setEndpoints(ep){
129        document.path.sparql.value = "";
130        $("*[name=selectendpoint]").append('<option value="endpoint">Endpoint');
131        for (var i = 0; i < ep.length; i++){
132                $("*[name=selectendpoint]").append('<option value="' + ep[i] + '">' + ep[i]);
133        }
134}
135
136function setEndpoint(){
137
138        document.path.sparql.value = "";
139        var sel = $("*[name=selectendpoint]").val();
140
141        if(sel != "endpoint"){
142
143                document.getElementById("showpath").style.display = "none";
144
145                ajaxload("view");
146                $.ajax({
147                        type: "GET",
148                        url : getClassListURL,
149                        data: {
150                            ep: sel
151                        },
152                        dataType: 'json',
153                        success : function(epclass) {
154                                $("*[name=startclass] option").remove();
155                                $("*[name=endclass] option").remove();
156
157                                $("*[name=startclass]").append('<option value="startclass">StartClass (Instance num)');
158                                $("*[name=endclass]").append('<option value="endclass">EndClass (Path num)');
159
160                                for (var i = 0; i < epclass.length; i++){
161                                        $("*[name=startclass]").append('<option value="' + epclass[i]["uri"] + '">' + epclass[i]["display"]);
162                                        $("*[name=endclass]").append('<option value="' + epclass[i]["uri"] + '">' + epclass[i]["display"]);
163                                }
164                                ajaxload("hide");
165                        },
166                        error : function(XMLHttpRequest, textStatus, errorThrown) {
167                                alert("繝ェ繧ッ繧ィ繧ケ繝域凾縺ォ縺ェ繧薙i縺九�繧ィ繝ゥ繝シ縺檎匱逕溘@縺セ縺励◆�� + textStatus +":\n" + errorThrown);
168                                ajaxload("hide");
169                        }
170                });
171
172        }
173        document.getElementById("seclass").style.display = "block";
174}
175
176function setSEClass(){
177
178        document.path.sparql.value = "";
179        var sel = $("*[name=selectendpoint]").val();
180
181        MAXDEPTH = 0;
182
183        var selstart = $("*[name=startclass]").val();
184        var selend = $("*[name=endclass]").val();
185
186        if(selstart != "startclass" && selend != "endclass"){
187
188                document.getElementById("selectpath").innerHTML = "";
189                document.getElementById("showpath").style.display = "none";
190
191                ajaxload("view");
192                $.ajax({
193                        type: "GET",
194                        url : getPathListURL,
195                        data: {
196                            ep: sel,
197                            startclass: selstart,
198                            endclass: selend
199                        },
200                        dataType: 'text',
201                        success : function(nodes) {
202                                jsontext = nodes;
203                                pathlimit = 10;
204                                view_map();
205                                ajaxload("hide");
206                                document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px";
207                                document.getElementById("ajaxload").style.height = document.getElementById("menu").offsetHeight + "px";
208                        },
209                        error : function(XMLHttpRequest, textStatus, errorThrown) {
210                                alert("繝ェ繧ッ繧ィ繧ケ繝域凾縺ォ縺ェ繧薙i縺九�繧ィ繝ゥ繝シ縺檎匱逕溘@縺セ縺励◆�� + textStatus +":\n" + errorThrown);
211                                ajaxload("hide");
212                        }
213                });
214        }
215}
216
217function viewAll(){
218
219        document.path.sparql.value = "";
220        pathlimit = 0;
221        document.getElementById("viewall").style.display = "none";
222        view_map();
223
224        document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px";
225        document.getElementById("ajaxload").style.height = document.getElementById("menu").offsetHeight + "px";
226}
227
228function getSPARQL(){
229
230        var selectpath = JSON.stringify(pathobj);
231
232        //document.getElementById("selectpath").innerHTML=(resultText);
233
234        ajaxload("view");
235        $.ajax({
236                type: "GET",
237                url : getSPARQLURL,
238                data: {
239                    jsonpath: selectpath
240                },
241                dataType: 'text',
242                success : function(sparql) {
243                        document.path.sparql.value = sparql;
244                        document.getElementById("showpath").style.display = "none";
245                        window.scrollTo(0, 0);
246                        ajaxload("hide");
247                },
248                error : function(XMLHttpRequest, textStatus, errorThrown) {
249                        alert("繝ェ繧ッ繧ィ繧ケ繝域凾縺ォ縺ェ繧薙i縺九�繧ィ繝ゥ繝シ縺檎匱逕溘@縺セ縺励◆�� + textStatus +":\n" + errorThrown);
250                        ajaxload("hide");
251                }
252        });
253
254}
255
256function sendSPARQL(){
257        var ep = $("*[name=selectendpoint]").val();
258
259        if(ep == "input"){
260                ep = $("*[name=inputendpoint]").val();
261        }
262
263        var query = $("*[name=sparql]").val();
264
265        query = encodeURIComponent(query);
266
267        openpage = ep + "?format=text%2Fhtml&query=" + query;
268
269        window.open(openpage);
270}
271
272// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
273// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
274
275-->
276
277</script>
278</head>
279<body>
280
281<div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #eeeeee;">
282
283        <div id="setting" style="margin: 15px; float: left;">
284                <div id="endpoint">
285                        <form name="endpoint">
286                                <select size=1 name="selectendpoint" style="width: 200px;" onChange="setEndpoint()">
287                                </select><br>
288                        </form>
289                </div>
290                <div id="seclass" style="margin-top: 15px; display: none;">
291                        <form name="seclass">
292                                StartClass<br>
293                                <select size=1 name="startclass" style="width: 200px;" onChange="setSEClass()">
294                                </select><br>
295                                EndClass<br>
296                                <select size=1 name="endclass" style="width: 200px;" onChange="setSEClass()">
297                                </select><br>
298                                <input type="button" name="setclass" value="SetClass" onClick="setSEClass()">
299                        </form>
300                </div>
301                <div id="resultmessage" style="margin-top: 15px; display: none;">
302                        <span id="pathnum"></span> Path<span id="plural"></span> found.<input id="viewall" type="button" name="viewall" value="View all path" onClick="viewAll()" style="display: none;">
303                </div>
304        </div>
305
306        <div id="editing" style="margin: 15px 25px; float: right;">
307                <form name="path">
308                        <textarea name="sparql" style="width: 300px; height: 180px;"></textarea><br>
309                        <input type="button" name="sendsparql" value="Send SPARQL" onClick="sendSPARQL()"><br>
310                </form>
311        </div>
312</div>
313<div id="graph" style="position: absolute; top: 0px; left: 0px;">
314</div>
315<div id="showpath" style="display: none;">
316        <div id="selectpath" style="word-wrap: break-word;">
317        </div>
318        <input type="button" id="getsparqlbutton" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
319</div>
320<div id="ajaxload" style="position: absolute; top: 0; left:0; background: white; opacity: 0.7;">
321        <div style="position: absolute; top: 0; left:0; right: 0; bottom: 0; margin: auto; width: 100px; height: 100px;">
322                <img src="ajax-loader.gif">
323        </div>
324</div>
325</body>
326</html>
Note: リポジトリブラウザについてのヘルプは TracBrowser を参照してください。