root/SPARQLBuilderWWW/web/jsgui.html @ 197

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

typoの修正
行番号 
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// 隱ｭ縺ｿ霎ｼ縺ｿ譎ゅ↓螳溯｡後€ゅお繝ｳ繝峨�繧､繝ｳ繝医�繝ｪ繧ｹ繝医ｒ騾壼ｸｸ縺ｮ驟榊�縺ｧ霑斐＆繧後ｋ縺薙→縺ｧ蛻昴ａ縺ｮ驕ｸ謚櫁い縺ｫ謖ｿ蜈･
45var getEndPointsURL = "eplist";
46
47// 繧ｨ繝ｳ繝峨�繧､繝ｳ繝医′驕ｸ謚槭＆繧後◆繧峨◎縺ｮURL繧弾p縺ｨ縺�≧蜷榊燕縺ｧ騾∽ｿ｡縲√け繝ｩ繧ｹ繝ｪ繧ｹ繝医ｒ騾壼ｸｸ縺ｮ驟榊�縺ｧ霑斐＆繧後ｋ縺薙→縺ｧ繧ｯ繝ｩ繧ｹ縺ｮ驕ｸ謚櫁い縺ｫ謖ｿ蜈･
48var getClassListURL = "clist";
49
50// 繧ｯ繝ｩ繧ｹ莠後▽縺碁∈謚槭＆繧後◆繧峨◎縺ｮ繧ｯ繝ｩ繧ｹ蜷阪ｒstartclass縲‘ndclass縺ｨ縺�≧蜷榊燕縺ｧ縺昴ｌ縺槭ｌ騾∽ｿ｡縲√◎縺ｮ莠後▽繧堤ｵ舌�繝代せ縺ｮ繝ｪ繧ｹ繝医ｒJSON蠖｢蠑上�繝�く繧ｹ繝医〒霑斐＆繧後ｋ縺薙→縺ｧ縺昴ｌ繧偵げ繝ｩ繝輔↓謠冗判
51var getPathListURL = "plist";
52
53// 繝代せ縺碁∈謚槭＆繧後◆繧泳sonpath縺ｨ縺�≧蜷榊燕縺ｧ繝代せ繧帝€壼ｸｸ縺ｮ驟榊�縺ｧ騾∽ｿ｡縲ヾPARQL繧ｯ繧ｨ繝ｪ繧偵ユ繧ｭ繧ｹ繝医〒蜿励￠蜿悶ｊ繝�く繧ｹ繝医お繝ｪ繧｢縺ｫ謖ｿ蜈･
54var getSPARQLURL = "sparql";
55
56// 縺ｧ縺阪≠縺後▲縺欖PARQL繧帝€∽ｿ｡縺吶ｋURL�域悴螳溯｣�ｼ�
57
58// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
59// SETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURLSETURL
60
61
62// 騾√ｉ繧後◆繝代せ縺ｮ菫晏ｭ伜�
63var jsontext = "";
64// 霑斐☆繝代せ縺ｮ繧ｪ繝悶ず繧ｧ繧ｯ繝�
65var pathobj = [];
66// 陦ｨ遉ｺ縺吶ｋ繝代せ縺ｮ謨ｰ
67var pathlimit = 10;
68
69// 騾√ｉ繧後◆繝代せ縺ｮ謨ｰ
70var PATHNUM = 0;
71// 騾√ｉ繧後◆繝代せ縺ｮ譛€螟ｧ豺ｱ縺�
72var MAXDEPTH = 0;
73// 繝代せ縺ｮ繝弱�繝蛾俣菴咏區
74var TREESPACE = 0;
75// 繝代せ髢薙�荳贋ｸ倶ｽ咏區
76var DRAWHEIGHT = 0;
77// 繝弱�繝峨�螟ｧ縺阪＆
78var NODEHEIGHT = 50;
79// 繝��繝ｫ繝√ャ繝励ｒ髫縺吶◆繧√�蜍輔″蛻､螳夂畑
80var MOUSEMOVED = 0;
81
82
83// 髢九＞縺溘ｉ蜷�ｨｮ繧､繝ｳ繧ｿ繝ｼ繝輔ぉ繝ｼ繧ｹ驛ｨ蜩√�繧ｵ繧､繧ｺ繧貞､画峩縲√お繝ｳ繝峨�繧､繝ｳ繝井ｸ€隕ｧ繧貞叙蠕励＠繧ｻ繝�ヨ
84$(window).load(function() {
85
86        // 荳企Κ繝｡繝九Η繝ｼ縺ｮ蟷�ｼ育判髱｢繧ｵ繧､繧ｺ縺ｨ蜷後§��
87        var menuwidth = window.innerWidth + "px";
88        // 荳企Κ繝｡繝九Η繝ｼ蟾ｦ蛛ｴ驛ｨ蛻�ｼ亥�蜉帶ｬ�ｼ峨�繧ｵ繧､繧ｺ
89        var inputswidth = ((window.innerWidth - 100) / 2) + "px";
90        // 縺昴ｌ縺槭ｌ縺ｫ繧ｻ繝�ヨ
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        // 繧ｰ繝ｩ繝墓緒逕ｻ驛ｨ蛻�ｒ荳企Κ繝｡繝九Η繝ｼ逶ｴ蠕後↓謗･縺吶ｋ繧医≧縺ｫ險ｭ螳�
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("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + 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        for (var i = 0; i < ep.length; i++){
130                $("*[name=selectendpoint]").append('<option value="' + ep[i] + '">' + ep[i]);
131        }
132}
133
134function setEndpoint(){
135
136        var sel = $("*[name=selectendpoint]").val();
137
138        if(sel == "input"){
139                sel = $("*[name=inputendpoint]").val();
140        }
141
142        document.getElementById("showpath").style.display = "none";
143
144        ajaxload("view");
145        $.ajax({
146                type: "GET",
147                url : getClassListURL,
148                data: {
149                    ep: sel
150                },
151                dataType: 'json',
152                success : function(epclass) {
153                        $("*[name=startclass] option").remove();
154                        $("*[name=endclass] option").remove();
155                        for (var i = 0; i < epclass.length; i++){
156                                $("*[name=startclass]").append('<option value="' + epclass[i]["uri"] + '">' + epclass[i]["display"]);
157                                $("*[name=endclass]").append('<option value="' + epclass[i]["uri"] + '">' + epclass[i]["display"]);
158                        }
159                        ajaxload("hide");
160                },
161                error : function(XMLHttpRequest, textStatus, errorThrown) {
162                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
163                        ajaxload("hide");
164                }
165        });
166        document.getElementById("seclass").style.display = "block";
167}
168
169function setSEClass(){
170
171        var sel = $("*[name=selectendpoint]").val();
172
173        MAXDEPTH = 0;
174
175        document.getElementById("selectpath").innerHTML = "";
176        document.getElementById("showpath").style.display = "none";
177
178        var selstart = $("*[name=startclass]").val();
179        var selend = $("*[name=endclass]").val();
180
181        ajaxload("view");
182        $.ajax({
183                type: "GET",
184                url : getPathListURL,
185                data: {
186                    ep: sel,
187                    startclass: selstart,
188                    endclass: selend
189                },
190                dataType: 'text',
191                success : function(nodes) {
192                        jsontext = nodes;
193                        pathlimit = 10;
194                        view_map();
195                        ajaxload("hide");
196                        document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px";
197                        document.getElementById("ajaxload").style.height = document.getElementById("menu").offsetHeight + "px";
198                },
199                error : function(XMLHttpRequest, textStatus, errorThrown) {
200                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
201                        ajaxload("hide");
202                }
203        });
204}
205
206function viewAll(){
207        pathlimit = 0;
208        document.getElementById("viewall").style.display = "none";
209        view_map();
210
211        document.getElementById("graph").style.top = document.getElementById("menu").offsetHeight + "px";
212        document.getElementById("ajaxload").style.height = document.getElementById("menu").offsetHeight + "px";
213}
214
215function getSPARQL(){
216
217        var selectpath = JSON.stringify(pathobj);
218
219        //document.getElementById("selectpath").innerHTML=(resultText);
220
221        ajaxload("view");
222        $.ajax({
223                type: "GET",
224                url : getSPARQLURL,
225                data: {
226                    jsonpath: selectpath
227                },
228                dataType: 'text',
229                success : function(sparql) {
230                        document.path.sparql.value = sparql;
231                        document.getElementById("showpath").style.display = "none";
232                        window.scrollTo(0, 0);
233                        ajaxload("hide");
234                },
235                error : function(XMLHttpRequest, textStatus, errorThrown) {
236                        alert("繝ｪ繧ｯ繧ｨ繧ｹ繝域凾縺ｫ縺ｪ繧薙ｉ縺九�繧ｨ繝ｩ繝ｼ縺檎匱逕溘＠縺ｾ縺励◆�� + textStatus +":\n" + errorThrown);
237                        ajaxload("hide");
238                }
239        });
240
241}
242
243function sendSPARQL(){
244        var ep = $("*[name=selectendpoint]").val();
245
246        if(ep == "input"){
247                ep = $("*[name=inputendpoint]").val();
248        }
249
250        var query = $("*[name=sparql]").val();
251
252        query = encodeURIComponent(query);
253
254        openpage = ep + "?format=text%2Fhtml&query=" + query;
255
256        window.open(openpage);
257}
258
259// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
260// ZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZNZN
261
262-->
263
264</script>
265</head>
266<body>
267
268<div id="menu" style="position: absolute; overflow:hidden; top:0px; left:0px; width: 1000px; background-color: #eeeeee;">
269
270        <div id="setting" style="margin: 15px; float: left;">
271                <div id="endpoint">
272                        <form name="endpoint">
273                                <select size=1 name="selectendpoint" style="width: 200px;">
274                                </select><br>
275                                <input type="button" name="setendpoint" value="SetEndPoint" onClick="setEndpoint()">
276                        </form>
277                </div>
278                <div id="seclass" style="margin-top: 15px; display: none;">
279                        <form name="seclass">
280                                StartClass<br>
281                                <select size=1 name="startclass" style="width: 200px;">
282                                </select><br>
283                                EndClass<br>
284                                <select size=1 name="endclass" style="width: 200px;">
285                                </select><br>
286                                <input type="button" name="setclass" value="SetClass" onClick="setSEClass()">
287                        </form>
288                </div>
289                <div id="resultmessage" style="margin-top: 15px; display: none;">
290                        <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;">
291                </div>
292        </div>
293
294        <div id="editing" style="margin: 15px 25px; float: right;">
295                <form name="path">
296                        <textarea name="sparql" style="width: 300px; height: 180px;"></textarea><br>
297                        <input type="button" name="sendsparql" value="Send SPARQL" onClick="sendSPARQL()"><br>
298                </form>
299        </div>
300</div>
301<div id="graph" style="position: absolute; top: 0px; left: 0px;">
302</div>
303<div id="showpath" style="display: none;">
304        <div id="selectpath" style="word-wrap: break-word;">
305        </div>
306        <input type="button" id="getsparqlbutton" name="getsparql" value="Get SPARQL" onClick="getSPARQL()">
307</div>
308<div id="ajaxload" style="position: absolute; top: 0; left:0; background: white; opacity: 0.7;">
309        <div style="position: absolute; top: 0; left:0; right: 0; bottom: 0; margin: auto; width: 100px; height: 100px;">
310                <img src="ajax-loader.gif">
311        </div>
312</div>
313</body>
314</html>
Note: リポジトリブラウザについてのヘルプは TracBrowser を参照してください。