root/SPARQLBuilderWWW/web/classselect.js @ 258

リビジョン 258, 8.7 KB (コミッタ: lenz, 9 年 前)

クラス選択用新GUIのテスト実装

機能としては完了、組み込みや化粧のし直しが必要

  • 属性 svn:mime-type の設定値 text/plain
Rev行番号 
[258]1
2// 繝壹�繧ク隱ュ縺ソ霎シ縺ソ螳御コ�ャ。隨ャ
[253]3$(function(){
4
[258]5        // 繧ッ繝ゥ繧ケ驕ク謚樒畑div縺ョ繧ケ繧ッ繝ュ繝シ繝ォ險ュ螳�
[253]6        scrolldiv();
7
[258]8        // 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ縺ョ隱ュ縺ソ霎シ縺ソ
[253]9        loadStartClass();
10
[258]11        // 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ繝サ繧ィ繝ウ繝峨け繝ゥ繧ケ縺ョ讀懃エ「逕ィ繝�く繧ケ繝医�繝�け繧ケ縺昴l縺槭l縺ォ縺、縺�※
12        // 繧ュ繝シ縺梧款縺輔l縺溘→縺�
13        $('#searchstarttext, #searchendtext').keypress(function(e) {
14                // 繧ィ繝ウ繧ソ繝シ繧ュ繝シ縺縺」縺溘ifalse繧定ソ斐☆�医ユ繧ュ繧ケ繝医�繝�け繧ケ縺ョ繝�ヵ繧ゥ繝ォ繝域ゥ溯�繧偵く繝」繝ウ繧サ繝ォ��
[253]15                if ( e.which == 13 ) {
16                        return false;
17                }
18        });
[258]19        // 繧ュ繝シ縺梧款縺輔l縲�屬縺輔l縺滓凾�磯屬縺輔l縺滓凾繧偵う繝吶Φ繝医ワ繝ウ繝峨Λ縺ォ縺励↑縺�→縺昴�譎ょ�蜉帙@縺滓枚蟄励′蜿肴丐縺輔l縺ェ縺�シ�
20        $('#searchstarttext, #searchendtext').keyup(function(e) {
21                // 讀懃エ「繧定。後≧
[253]22                search();
23        });
24});
25
[258]26// 繧ッ繝ゥ繧ケ驕ク謚樒畑div縺ョ繧ケ繧ッ繝ュ繝シ繝ォ險ュ螳�
[253]27function scrolldiv(){
[258]28        // 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ荳€隕ァ縺ョ繝��繝悶Ν縺ィ繧ケ繧ソ繝シ繝医け繝ゥ繧ケ縺ョ讀懃エ「逕ィ繝�く繧ケ繝医�繝�け繧ケ谺��鬮倥&縺ョ蜷郁ィ医′謖�ョ壽ク医∩縺ョ蟾ヲ繧ォ繝ゥ繝縺ョ鬮倥&繧医j螟ァ縺阪¢繧後�
29        if(($('div.startclass table').height() + $('div.searchstart').height()) > $('div.left').height()){
30                // 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ荳€隕ァ逕ィdiv縺ョ邵ヲ繧ケ繧ッ繝ュ繝シ繝ォ險ュ螳壹r繧ェ繝ウ縺ォ
31                $('div.startclass').css('overflow-y', 'scroll');
32                // 鬮倥&繧貞キヲ繧ォ繝ゥ繝縺九i讀懃エ「逕ィ繝�く繧ケ繝医�繝�け繧ケ谺�→20px��addingテ��牙シ輔>縺溷€、縺ォ縺吶k
33                $('div.startclass').css('height', ($('div.left').height() - $('div.searchstart').height() - 20) + 'px');
34        // 蟆上&縺代l縺ー
[253]35        }else{
[258]36                // 邵ヲ繧ケ繧ッ繝ュ繝シ繝ォ繧偵が繝�
37                $('div.startclass').css('overflow-y', 'hidden');
[253]38        }
[258]39        // 繧ィ繝ウ繝峨け繝ゥ繧ケ縺ォ縺、縺�※蜷梧ァ倥�蜃ヲ逅�
40        if(($('div.endclass table').height() + $('div.searchend').height()) > $('div.right').height()){
41                $('div.endclass').css('overflow-y', 'scroll');
42                $('div.endclass').css('height', ($('div.right').height() - $('div.searchend').height() - 20) + 'px');
[253]43        }else{
[258]44                $('div.endclass').css('overflow-y', 'hidden');
[253]45        }
46}
47
[258]48// 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ縺ョ隱ュ縺ソ霎シ縺ソ
[253]49function loadStartClass(){
[258]50        // SPARQL Builder縺ョ繧ケ繧ソ繝シ繝医け繝ゥ繧ケ荳€隕ァ蜿門セ礼畑API繧「繝峨Ξ繧ケ繧剃ス懈��域圻螳壹〒迚ケ螳壹お繝ウ繝峨�繧、繝ウ繝医r繧サ繝�ヨ��
[253]51        var url = "http://www.sparqlbuilder.org/api/clist?ep=" + encodeURIComponent("http://www.ebi.ac.uk/rdf/services/reactome/sparql");
[258]52        // AJAX髢句ァ�
[253]53        $.ajax({
[258]54                // 繝。繧ス繝�ラ繧ソ繧、繝暦シ壹ご繝�ヨ
[253]55                type : "GET",
[258]56                // URL�壼�縺サ縺ゥ繧サ繝�ヨ縺励◆繧ゅ�
[253]57                url : url,
[258]58                // 蜿門セ玲�蜉溘@縺溘i
[253]59                success : function(data) {
[258]60                        // 蟶ー縺」縺ヲ縺阪◆邨先棡繧谷SON縺ォ繝代�繧ケ縺怜叙蠕�
[253]61                        var list = eval(data);
[258]62                        // 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ縺ョ荳€隕ァ驛ィ蛻�r遨コ縺ォ
[253]63                        $('div.startclass').empty();
64
[258]65                        // 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ縺ョ繝��繝悶Ν繧剃ス懈�
[253]66                        var startclasstable = $('<table>');
67
[258]68                        // 蜿門セ励@縺溘け繝ゥ繧ケ繝ェ繧ケ繝医�謨ー縺縺醍ケー繧願ソ斐@縺ェ縺後i
[253]69                        for (var i = 0; i < list.length; ++i) {
[258]70                                // 蛻励r霑ス蜉
[253]71                                startclasstable.append('<tr><td class="startclasscell"><span class="endpointuri" title="http://www.ebi.ac.uk/rdf/services/reactome/sparql"></span><span class="startclassuri" title="' + list[i]['uri'] + '">' + list[i]['label'] + ' (' + list[i]['number'] + ')' + '</span></td></tr>');
72                        }
73
[258]74                        // 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ荳€隕ァ縺ォ霑ス蜉
[253]75                        $('div.startclass').append(startclasstable);
76
[258]77                        // 繧ィ繝ウ繝峨け繝ゥ繧ケ縺ョ繝ェ繧ッ繧ィ繧ケ繝域ゥ溯�繧呈怏蜉ケ蛹�
[253]78                        requestEndClass();
[258]79                        // 繧ッ繝ゥ繧ケ驕ク謚樒畑div縺ョ繧ケ繧ッ繝ュ繝シ繝ォ險ュ螳�
[253]80                        scrolldiv();
81                }
82        });
83}
84
[258]85// 繧ィ繝ウ繝峨け繝ゥ繧ケ縺ョ繝ェ繧ッ繧ィ繧ケ繝域ゥ溯�繧呈怏蜉ケ蛹�
[253]86function requestEndClass(){
[258]87        // 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ逕ィ縺ョ蜷ФRI縺ォ縺、縺�※
88        $('.startclassuri').each(function(){
89                // 迴セ蝨ィ縺ョ繧ッ繝ェ繝�け繧、繝吶Φ繝医r蜑企勁�亥、夐㍾蛹門ッセ遲厄シ�
[253]90                $(this).unbind('click');
[258]91                // 繧ッ繝ェ繝�け繧、繝吶Φ繝医�霑ス蜉
[253]92                $(this).click(function(){
[258]93
94                        // 驕ク謚樊ク医∩繧ケ繧ソ繝シ繝医け繝ゥ繧ケ縺ョ繧ッ繝ゥ繧ケ縺後≠繧後�髯、蜴サ
95                        $('.selectedstart').each(function(){
96                                $(this).removeClass('selectedstart');
97                        });
98                        // 繧ッ繝ェ繝�け縺輔l縺溯ヲ∫エ縺ォ驕ク謚樊ク医∩繧ケ繧ソ繝シ繝医け繝ゥ繧ケ繧定ソス蜉
99                        $(this).addClass('selectedstart');
100
101                        // 繧ィ繝ウ繝峨け繝ゥ繧ケ荳€隕ァ驛ィ蛻�r遨コ縺ォ
[253]102                        $('.endclass').empty();
[258]103                        // AJAX繝ュ繝シ繝�ぅ繝ウ繧ー逕サ蜒上r霑ス蜉
[253]104                        $('.endclass').append('<img src="images/ajax-loader.gif">');
[258]105
106                        // 繧ッ繝ェ繝�け縺輔l縺溘け繝ゥ繧ケ縺ョ繧ィ繝ウ繝峨�繧、繝ウ繝医r蜿門セ�
107                        var ep = $(this).parent().children('.endpointuri').attr('title');
108                        // 繧ッ繝ェ繝�け縺輔l縺溘け繝ゥ繧ケ縺ョURI繧貞叙蠕�
109                        var sc = $(this).attr('title');
110                        // SPARQL Builder縺ョ繧ィ繝ウ繝峨け繝ゥ繧ケ荳€隕ァ蜿門セ礼畑API繧「繝峨Ξ繧ケ繧剃ス懈�
[253]111                        var url = "http://www.sparqlbuilder.org/api/clist?ep=" + encodeURIComponent(ep) + '&class=' + encodeURIComponent(sc);
[258]112                        // AJAX髢句ァ�
[253]113                        $.ajax({
[258]114                                // 繝。繧ス繝�ラ繧ソ繧、繝暦シ壹ご繝�ヨ
[253]115                                type : "GET",
[258]116                                // URL�壼�縺サ縺ゥ繧サ繝�ヨ縺励◆繧ゅ�
[253]117                                url : url,
[258]118                                // 蜿門セ玲�蜉溘@縺溘i
[253]119                                success : function(data) {
[258]120                                        // 蟶ー縺」縺ヲ縺阪◆邨先棡繧谷SON縺ォ繝代�繧ケ縺怜叙蠕�
[253]121                                        var list = eval(data);
[258]122                                        // 繧ィ繝ウ繝峨け繝ゥ繧ケ縺ョ荳€隕ァ驛ィ蛻�r遨コ縺ォ
[253]123                                        $('.endclass').empty();
[258]124
125                                        // 繧ィ繝ウ繝峨け繝ゥ繧ケ縺ョ繝��繝悶Ν繧剃ス懈�
[253]126                                        var endclasstable = $('<table>');
127
[258]128                                        // 蜿門セ励@縺溘け繝ゥ繧ケ繝ェ繧ケ繝医�謨ー縺縺醍ケー繧願ソ斐@縺ェ縺後i
[253]129                                        for (var i = 0; i < list.length; ++i) {
[258]130                                                // 蛻励r霑ス蜉
[253]131                                                endclasstable.append('<tr><td class="endclasscell"><span class="endpointuri" title="' + ep + '"></span><span class="startclassuri" title="' + sc + '"></span><span class="endclassuri" title="' + list[i]['uri'] + '">' + list[i]['label'] + ' (' + list[i]['number'] + ')' + '</span></td></tr>');
132                                        }
133
[258]134                                        // 繧ィ繝ウ繝峨け繝ゥ繧ケ荳€隕ァ縺ォ霑ス蜉
[253]135                                        $('.endclass').append(endclasstable);
136
[258]137                                        // SPARQL Builder縺ョ繝ェ繧ッ繧ィ繧ケ繝域ゥ溯�繧呈怏蜉ケ蛹�
[253]138                                        requestSPARQLBuilder();
[258]139                                        // 繧ッ繝ゥ繧ケ驕ク謚樒畑div縺ョ繧ケ繧ッ繝ュ繝シ繝ォ險ュ螳�
140                                        scrolldiv();
[253]141                                }
142                        });
143                });
144        });
145}
146
[258]147// SPARQL Builder縺ョ繝ェ繧ッ繧ィ繧ケ繝域ゥ溯�繧呈怏蜉ケ蛹�
[253]148function requestSPARQLBuilder(){
[258]149
150        // 繧ィ繝ウ繝峨け繝ゥ繧ケ縺ョURI縺昴l縺槭l縺ォ縺、縺�※
151        $('.endclassuri').each(function(){
152                // 繧ッ繝ェ繝�け繧、繝吶Φ繝医�蜑企勁�亥、夐㍾蛹門撫鬘悟ッセ遲厄シ�
[253]153                $(this).unbind('click');
[258]154                // 繧ッ繝ェ繝�け繧、繝吶Φ繝医�霑ス蜉
[253]155                $(this).click(function(){
[258]156
157                        // 驕ク謚樊ク医∩繧ィ繝ウ繝峨け繝ゥ繧ケ繧帝勁蜴サ
158                        $('.selectedend').each(function(){
159                                $(this).removeClass('selectedend');
160                        });
161                        // 莉雁屓縺ョ隕∫エ繧帝∈謚樊ク医∩繧ィ繝ウ繝峨け繝ゥ繧ケ縺ォ縺吶k
162                        $(this).addClass('selectedend');
163
164                        // 繧ィ繝ウ繝峨�繧、繝ウ繝�RL繝サ繧ケ繧ソ繝シ繝医け繝ゥ繧ケURI繝サ繧ィ繝ウ繝峨け繝ゥ繧ケURI繧貞叙蠕�
165                        var ep = $(this).parent().children('.endpointuri').attr('title');
166                        var sc = $(this).parent().children('.startclassuri').attr('title');
167                        var ec = $(this).attr('title');
168
169                        // SPARQL Builder縺ョ蜻シ縺ウ蜃コ縺礼畑URL繧剃ス懈�
[253]170                        var url = "http://www.sparqlbuilder.org/?ep=" + encodeURIComponent(ep) + '&st=' + encodeURIComponent(sc) + '&en=' + encodeURIComponent(ec);
171
[258]172                        // 荳翫〒菴懈�縺励◆URL繧呈眠縺励>繧ヲ繧」繝ウ繝峨え縺ァ髢九¥
[253]173                        window.open(url);
174                });
175        })
176}
177
[258]178// URI縺ョ讀懃エ「
[253]179function search(){
[258]180        // 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ逕ィ讀懃エ「谺��蛟、縺檎ゥコ縺ェ繧�
181        if($('#searchstarttext').val() == ''){
182                // 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ縺ョ繝弱�繝偵ャ繝医け繝ゥ繧ケ繧貞炎髯、
[253]183                $('.startclasscell').parent().removeClass('nohit');
[258]184        // 遨コ縺ァ縺ェ縺代l縺ー
[253]185        }else{
[258]186                // 蜈・蜉帙&繧後◆蛟、繧貞ー乗枚蟄励↓縺励※蜿門セ�
187                var keyword = $('#searchstarttext').val().toLowerCase();
188                // 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ荳€隕ァ縺昴l縺槭l縺ォ縺、縺�※
[253]189                $('.startclasscell').each(function(){
[258]190                        // 繧ケ繧ソ繝シ繝医け繝ゥ繧ケ縺ョ陦ィ遉コ蜷埼Κ蛻�r蟆乗枚蟄励↓縺励※蜿門セ�
[253]191                        var label = $(this).children('.startclassuri').text().toLowerCase();
[258]192                        // 蜿門セ励@縺滓枚蟄怜�縺ォ讀懃エ「繝ッ繝シ繝峨′蜷ォ縺セ繧後※縺�k縺九メ繧ァ繝�け�井ク。譁ケ蟆乗枚蟄励↓螟画鋤貂医∩縺ェ縺ョ縺ァ螟ァ譁�ュ怜ー乗枚蟄励r蝠上o縺ェ縺�シ�
[253]193                        if(label.indexOf(keyword) != -1){
[258]194                                // 蜷ォ縺セ繧後※縺�l縺ー繝弱�繝偵ャ繝医け繝ゥ繧ケ繧帝勁蜴サ
[253]195                                $(this).parent().removeClass('nohit');
196                        }else{
[258]197                                // 蜷ォ縺セ繧後※縺�↑縺代l縺ー繝弱�繝偵ャ繝医け繝ゥ繧ケ繧定ソス蜉�磯撼陦ィ遉コ縺ォ縺ェ繧具シ�
[253]198                                $(this).parent().addClass('nohit');
199                        }
200                });
201        }
[258]202        // 繧ィ繝ウ繝峨け繝ゥ繧ケ縺ォ縺、縺�※蜷梧ァ倥�蜃ヲ逅�
203        if($('#searchendtext').val() == ''){
[253]204                $('.endclasscell').parent().removeClass('nohit');
205        }else{
[258]206                var keyword = $('#searchendtext').val().toLowerCase();
[253]207                $('.endclasscell').each(function(){
208                        var label = $(this).children('.endclassuri').text().toLowerCase();
209                        if(label.indexOf(keyword) != -1){
210                                $(this).parent().removeClass('nohit');
211                        }else{
212                                $(this).parent().addClass('nohit');
213                        }
214                });
215        }
216
[258]217        // 30ms蠕�▲縺ヲ縺九i繧ケ繧ッ繝ュ繝シ繝ォ蜀阪そ繝�ヨ�域緒逕サ螟画峩縺ォ縺九°繧区凾髢薙r閠����
[253]218        setTimeout('scrolldiv()',30);
219}
Note: リポジトリブラウザについてのヘルプは TracBrowser を参照してください。