Index: /SPARQLBuilderWWW/web/classselect.js =================================================================== --- /SPARQLBuilderWWW/web/classselect.js (revision 253) +++ /SPARQLBuilderWWW/web/classselect.js (revision 258) @@ -1,58 +1,81 @@ + +// 繝壹�繧ｸ隱ｭ縺ｿ霎ｼ縺ｿ螳御ｺ�ｬ｡隨ｬ $(function(){ + // 繧ｯ繝ｩ繧ｹ驕ｸ謚樒畑div縺ｮ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ險ｭ螳� scrolldiv(); + // 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ縺ｮ隱ｭ縺ｿ霎ｼ縺ｿ loadStartClass(); - - $('#searchstart').keypress(function(e) { + // 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ繝ｻ繧ｨ繝ｳ繝峨け繝ｩ繧ｹ縺ｮ讀懃ｴ｢逕ｨ繝�く繧ｹ繝医�繝�け繧ｹ縺昴ｌ縺槭ｌ縺ｫ縺､縺�※ + // 繧ｭ繝ｼ縺梧款縺輔ｌ縺溘→縺� + $('#searchstarttext, #searchendtext').keypress(function(e) { + // 繧ｨ繝ｳ繧ｿ繝ｼ繧ｭ繝ｼ縺縺｣縺溘ｉfalse繧定ｿ斐☆�医ユ繧ｭ繧ｹ繝医�繝�け繧ｹ縺ｮ繝�ヵ繧ｩ繝ｫ繝域ｩ溯�繧偵く繝｣繝ｳ繧ｻ繝ｫ�� if ( e.which == 13 ) { return false; } }); - $('#searchstart').keyup(function(e) { + // 繧ｭ繝ｼ縺梧款縺輔ｌ縲�屬縺輔ｌ縺滓凾�磯屬縺輔ｌ縺滓凾繧偵う繝吶Φ繝医ワ繝ｳ繝峨Λ縺ｫ縺励↑縺�→縺昴�譎ょ�蜉帙＠縺滓枚蟄励′蜿肴丐縺輔ｌ縺ｪ縺�ｼ� + $('#searchstarttext, #searchendtext').keyup(function(e) { + // 讀懃ｴ｢繧定｡後≧ search(); }); - $('#searchend').keypress(function(e) { - if ( e.which == 13 ) { - return false; - } - }); - $('#searchend').keyup(function(e) { - search(); - }); }); +// 繧ｯ繝ｩ繧ｹ驕ｸ謚樒畑div縺ｮ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ險ｭ螳� function scrolldiv(){ - if(($('div.startclass').height() + $('#searchstart').height()) > $('div.left').height()){ - $('div.left').css('overflow-y', 'scroll'); - }else{ - $('div.left').css('overflow-y', 'hidden'); - } - if(($('div.endclass').height() + $('#searchend').height()) > $('div.right').height()){ - $('div.right').css('overflow-y', 'scroll'); - }else{ - $('div.right').css('overflow-y', 'hidden'); - } -} - + // 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ荳€隕ｧ縺ｮ繝��繝悶Ν縺ｨ繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ縺ｮ讀懃ｴ｢逕ｨ繝�く繧ｹ繝医�繝�け繧ｹ谺��鬮倥＆縺ｮ蜷郁ｨ医′謖�ｮ壽ｸ医∩縺ｮ蟾ｦ繧ｫ繝ｩ繝縺ｮ鬮倥＆繧医ｊ螟ｧ縺阪￠繧後� + if(($('div.startclass table').height() + $('div.searchstart').height()) > $('div.left').height()){ + // 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ荳€隕ｧ逕ｨdiv縺ｮ邵ｦ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ險ｭ螳壹ｒ繧ｪ繝ｳ縺ｫ + $('div.startclass').css('overflow-y', 'scroll'); + // 鬮倥＆繧貞ｷｦ繧ｫ繝ｩ繝縺九ｉ讀懃ｴ｢逕ｨ繝�く繧ｹ繝医�繝�け繧ｹ谺�→20px��addingﾃ��牙ｼ輔＞縺溷€､縺ｫ縺吶ｋ + $('div.startclass').css('height', ($('div.left').height() - $('div.searchstart').height() - 20) + 'px'); + // 蟆上＆縺代ｌ縺ｰ + }else{ + // 邵ｦ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧偵が繝� + $('div.startclass').css('overflow-y', 'hidden'); + } + // 繧ｨ繝ｳ繝峨け繝ｩ繧ｹ縺ｫ縺､縺�※蜷梧ｧ倥�蜃ｦ逅� + if(($('div.endclass table').height() + $('div.searchend').height()) > $('div.right').height()){ + $('div.endclass').css('overflow-y', 'scroll'); + $('div.endclass').css('height', ($('div.right').height() - $('div.searchend').height() - 20) + 'px'); + }else{ + $('div.endclass').css('overflow-y', 'hidden'); + } +} + +// 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ縺ｮ隱ｭ縺ｿ霎ｼ縺ｿ function loadStartClass(){ + // SPARQL Builder縺ｮ繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ荳€隕ｧ蜿門ｾ礼畑API繧｢繝峨Ξ繧ｹ繧剃ｽ懈��域圻螳壹〒迚ｹ螳壹お繝ｳ繝峨�繧､繝ｳ繝医ｒ繧ｻ繝�ヨ�� var url = "http://www.sparqlbuilder.org/api/clist?ep=" + encodeURIComponent("http://www.ebi.ac.uk/rdf/services/reactome/sparql"); + // AJAX髢句ｧ� $.ajax({ + // 繝｡繧ｽ繝�ラ繧ｿ繧､繝暦ｼ壹ご繝�ヨ type : "GET", + // URL�壼�縺ｻ縺ｩ繧ｻ繝�ヨ縺励◆繧ゅ� url : url, + // 蜿門ｾ玲�蜉溘＠縺溘ｉ success : function(data) { + // 蟶ｰ縺｣縺ｦ縺阪◆邨先棡繧谷SON縺ｫ繝代�繧ｹ縺怜叙蠕� var list = eval(data); + // 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ縺ｮ荳€隕ｧ驛ｨ蛻�ｒ遨ｺ縺ｫ $('div.startclass').empty(); + // 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ縺ｮ繝��繝悶Ν繧剃ｽ懈� var startclasstable = $(''); + // 蜿門ｾ励＠縺溘け繝ｩ繧ｹ繝ｪ繧ｹ繝医�謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ for (var i = 0; i < list.length; ++i) { + // 蛻励ｒ霑ｽ蜉 startclasstable.append(''); } + // 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ荳€隕ｧ縺ｫ霑ｽ蜉 $('div.startclass').append(startclasstable); + // 繧ｨ繝ｳ繝峨け繝ｩ繧ｹ縺ｮ繝ｪ繧ｯ繧ｨ繧ｹ繝域ｩ溯�繧呈怏蜉ｹ蛹� requestEndClass(); + // 繧ｯ繝ｩ繧ｹ驕ｸ謚樒畑div縺ｮ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ險ｭ螳� scrolldiv(); } @@ -60,28 +83,60 @@ } +// 繧ｨ繝ｳ繝峨け繝ｩ繧ｹ縺ｮ繝ｪ繧ｯ繧ｨ繧ｹ繝域ｩ溯�繧呈怏蜉ｹ蛹� function requestEndClass(){ - $('.startclasscell').each(function(){ + // 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ逕ｨ縺ｮ蜷ФRI縺ｫ縺､縺�※ + $('.startclassuri').each(function(){ + // 迴ｾ蝨ｨ縺ｮ繧ｯ繝ｪ繝�け繧､繝吶Φ繝医ｒ蜑企勁�亥､夐㍾蛹門ｯｾ遲厄ｼ� $(this).unbind('click'); + // 繧ｯ繝ｪ繝�け繧､繝吶Φ繝医�霑ｽ蜉 $(this).click(function(){ + + // 驕ｸ謚樊ｸ医∩繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ縺ｮ繧ｯ繝ｩ繧ｹ縺後≠繧後�髯､蜴ｻ + $('.selectedstart').each(function(){ + $(this).removeClass('selectedstart'); + }); + // 繧ｯ繝ｪ繝�け縺輔ｌ縺溯ｦ∫ｴ縺ｫ驕ｸ謚樊ｸ医∩繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ繧定ｿｽ蜉 + $(this).addClass('selectedstart'); + + // 繧ｨ繝ｳ繝峨け繝ｩ繧ｹ荳€隕ｧ驛ｨ蛻�ｒ遨ｺ縺ｫ $('.endclass').empty(); + // AJAX繝ｭ繝ｼ繝�ぅ繝ｳ繧ｰ逕ｻ蜒上ｒ霑ｽ蜉 $('.endclass').append(''); - var ep = $(this).children('.endpointuri').attr('title'); - var sc = $(this).children('.startclassuri').attr('title'); + + // 繧ｯ繝ｪ繝�け縺輔ｌ縺溘け繝ｩ繧ｹ縺ｮ繧ｨ繝ｳ繝峨�繧､繝ｳ繝医ｒ蜿門ｾ� + var ep = $(this).parent().children('.endpointuri').attr('title'); + // 繧ｯ繝ｪ繝�け縺輔ｌ縺溘け繝ｩ繧ｹ縺ｮURI繧貞叙蠕� + var sc = $(this).attr('title'); + // SPARQL Builder縺ｮ繧ｨ繝ｳ繝峨け繝ｩ繧ｹ荳€隕ｧ蜿門ｾ礼畑API繧｢繝峨Ξ繧ｹ繧剃ｽ懈� var url = "http://www.sparqlbuilder.org/api/clist?ep=" + encodeURIComponent(ep) + '&class=' + encodeURIComponent(sc); + // AJAX髢句ｧ� $.ajax({ + // 繝｡繧ｽ繝�ラ繧ｿ繧､繝暦ｼ壹ご繝�ヨ type : "GET", + // URL�壼�縺ｻ縺ｩ繧ｻ繝�ヨ縺励◆繧ゅ� url : url, + // 蜿門ｾ玲�蜉溘＠縺溘ｉ success : function(data) { + // 蟶ｰ縺｣縺ｦ縺阪◆邨先棡繧谷SON縺ｫ繝代�繧ｹ縺怜叙蠕� var list = eval(data); + // 繧ｨ繝ｳ繝峨け繝ｩ繧ｹ縺ｮ荳€隕ｧ驛ｨ蛻�ｒ遨ｺ縺ｫ $('.endclass').empty(); + + // 繧ｨ繝ｳ繝峨け繝ｩ繧ｹ縺ｮ繝��繝悶Ν繧剃ｽ懈� var endclasstable = $('
' + list[i]['label'] + ' (' + list[i]['number'] + ')' + '
'); + // 蜿門ｾ励＠縺溘け繝ｩ繧ｹ繝ｪ繧ｹ繝医�謨ｰ縺縺醍ｹｰ繧願ｿ斐＠縺ｪ縺後ｉ for (var i = 0; i < list.length; ++i) { + // 蛻励ｒ霑ｽ蜉 endclasstable.append(''); } + // 繧ｨ繝ｳ繝峨け繝ｩ繧ｹ荳€隕ｧ縺ｫ霑ｽ蜉 $('.endclass').append(endclasstable); + // SPARQL Builder縺ｮ繝ｪ繧ｯ繧ｨ繧ｹ繝域ｩ溯�繧呈怏蜉ｹ蛹� requestSPARQLBuilder(); + // 繧ｯ繝ｩ繧ｹ驕ｸ謚樒畑div縺ｮ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ險ｭ螳� + scrolldiv(); } }); @@ -90,13 +145,30 @@ } +// SPARQL Builder縺ｮ繝ｪ繧ｯ繧ｨ繧ｹ繝域ｩ溯�繧呈怏蜉ｹ蛹� function requestSPARQLBuilder(){ - $('.endclasscell').each(function(){ + + // 繧ｨ繝ｳ繝峨け繝ｩ繧ｹ縺ｮURI縺昴ｌ縺槭ｌ縺ｫ縺､縺�※ + $('.endclassuri').each(function(){ + // 繧ｯ繝ｪ繝�け繧､繝吶Φ繝医�蜑企勁�亥､夐㍾蛹門撫鬘悟ｯｾ遲厄ｼ� $(this).unbind('click'); + // 繧ｯ繝ｪ繝�け繧､繝吶Φ繝医�霑ｽ蜉 $(this).click(function(){ - var ep = $(this).children('.endpointuri').attr('title'); - var sc = $(this).children('.startclassuri').attr('title'); - var ec = $(this).children('.endclassuri').attr('title'); + + // 驕ｸ謚樊ｸ医∩繧ｨ繝ｳ繝峨け繝ｩ繧ｹ繧帝勁蜴ｻ + $('.selectedend').each(function(){ + $(this).removeClass('selectedend'); + }); + // 莉雁屓縺ｮ隕∫ｴ繧帝∈謚樊ｸ医∩繧ｨ繝ｳ繝峨け繝ｩ繧ｹ縺ｫ縺吶ｋ + $(this).addClass('selectedend'); + + // 繧ｨ繝ｳ繝峨�繧､繝ｳ繝�RL繝ｻ繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹURI繝ｻ繧ｨ繝ｳ繝峨け繝ｩ繧ｹURI繧貞叙蠕� + var ep = $(this).parent().children('.endpointuri').attr('title'); + var sc = $(this).parent().children('.startclassuri').attr('title'); + var ec = $(this).attr('title'); + + // SPARQL Builder縺ｮ蜻ｼ縺ｳ蜃ｺ縺礼畑URL繧剃ｽ懈� var url = "http://www.sparqlbuilder.org/?ep=" + encodeURIComponent(ep) + '&st=' + encodeURIComponent(sc) + '&en=' + encodeURIComponent(ec); + // 荳翫〒菴懈�縺励◆URL繧呈眠縺励＞繧ｦ繧｣繝ｳ繝峨え縺ｧ髢九￥ window.open(url); }); @@ -104,22 +176,33 @@ } +// URI縺ｮ讀懃ｴ｢ function search(){ - if($('#searchstart').val() == ''){ + // 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ逕ｨ讀懃ｴ｢谺��蛟､縺檎ｩｺ縺ｪ繧� + if($('#searchstarttext').val() == ''){ + // 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ縺ｮ繝弱�繝偵ャ繝医け繝ｩ繧ｹ繧貞炎髯､ $('.startclasscell').parent().removeClass('nohit'); - }else{ - var keyword = $('#searchstart').val().toLowerCase(); + // 遨ｺ縺ｧ縺ｪ縺代ｌ縺ｰ + }else{ + // 蜈･蜉帙＆繧後◆蛟､繧貞ｰ乗枚蟄励↓縺励※蜿門ｾ� + var keyword = $('#searchstarttext').val().toLowerCase(); + // 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ荳€隕ｧ縺昴ｌ縺槭ｌ縺ｫ縺､縺�※ $('.startclasscell').each(function(){ + // 繧ｹ繧ｿ繝ｼ繝医け繝ｩ繧ｹ縺ｮ陦ｨ遉ｺ蜷埼Κ蛻�ｒ蟆乗枚蟄励↓縺励※蜿門ｾ� var label = $(this).children('.startclassuri').text().toLowerCase(); + // 蜿門ｾ励＠縺滓枚蟄怜�縺ｫ讀懃ｴ｢繝ｯ繝ｼ繝峨′蜷ｫ縺ｾ繧後※縺�ｋ縺九メ繧ｧ繝�け�井ｸ｡譁ｹ蟆乗枚蟄励↓螟画鋤貂医∩縺ｪ縺ｮ縺ｧ螟ｧ譁�ｭ怜ｰ乗枚蟄励ｒ蝠上ｏ縺ｪ縺�ｼ� if(label.indexOf(keyword) != -1){ + // 蜷ｫ縺ｾ繧後※縺�ｌ縺ｰ繝弱�繝偵ャ繝医け繝ｩ繧ｹ繧帝勁蜴ｻ $(this).parent().removeClass('nohit'); }else{ + // 蜷ｫ縺ｾ繧後※縺�↑縺代ｌ縺ｰ繝弱�繝偵ャ繝医け繝ｩ繧ｹ繧定ｿｽ蜉�磯撼陦ｨ遉ｺ縺ｫ縺ｪ繧具ｼ� $(this).parent().addClass('nohit'); } }); } - if($('#searchend').val() == ''){ + // 繧ｨ繝ｳ繝峨け繝ｩ繧ｹ縺ｫ縺､縺�※蜷梧ｧ倥�蜃ｦ逅� + if($('#searchendtext').val() == ''){ $('.endclasscell').parent().removeClass('nohit'); }else{ - var keyword = $('#searchend').val().toLowerCase(); + var keyword = $('#searchendtext').val().toLowerCase(); $('.endclasscell').each(function(){ var label = $(this).children('.endclassuri').text().toLowerCase(); @@ -132,4 +215,5 @@ } + // 30ms蠕�▲縺ｦ縺九ｉ繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ蜀阪そ繝�ヨ�域緒逕ｻ螟画峩縺ｫ縺九°繧区凾髢薙ｒ閠���� setTimeout('scrolldiv()',30); } Index: /SPARQLBuilderWWW/web/classselect.css =================================================================== --- /SPARQLBuilderWWW/web/classselect.css (revision 253) +++ /SPARQLBuilderWWW/web/classselect.css (revision 258) @@ -2,7 +2,23 @@ div.wrap { - width: 100%; - height: 800px; + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + background-color: rgba(0,0,0,0.8); +} + +div.classselect { + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + margin: auto; + width: 90%; + height: 90%; overflow: hidden; + background: #fafafa; } @@ -11,4 +27,5 @@ width: 50%; height: 100%; + padding: 5px 0px; } @@ -17,8 +34,60 @@ width: 50%; height: 100%; + padding: 5px 0px; } div.startclass, div.endclass { - padding: 5px; + padding: 5px 0px; +} + +#searchstarttext, #searchendtext { + width: 100%; +} + +span.startclassuri:hover { + cursor: pointer; + + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + padding: 3px; + + background-color: hsl(40, 50%, 75%); +} + +span.endclassuri:hover { + cursor: pointer; + + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + padding: 3px; + + background-color: hsl(150, 50%, 75%); +} + +span.selectedstart { + cursor: pointer; + + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + padding: 2px; + border: 2px hsl(40, 50%, 50%) solid; + + background-color: hsl(40, 50%, 75%); +} + +span.selectedend { + cursor: pointer; + + -moz-border-radius: 10px; + -webkit-border-radius: 10px; + border-radius: 10px; + padding: 2px; + + border: 2px hsl(150, 50%, 50%) solid; + + background-color: hsl(150, 50%, 75%); } Index: /SPARQLBuilderWWW/web/classselect.html =================================================================== --- /SPARQLBuilderWWW/web/classselect.html (revision 253) +++ /SPARQLBuilderWWW/web/classselect.html (revision 258) @@ -9,17 +9,21 @@
-
-
- +
+
+
+ Search startclass
+ +
+
+ +
-
- -
-
-
-
- -
-
+
+
+ Search endclass
+ +
+
+
' + list[i]['label'] + ' (' + list[i]['number'] + ')' + '