Skip to content

C
clinicaltrials
Commit 922747f9 authored by PkSM3's avatar PkSM3
Browse files
Options

new sliders

parent ac16e5ef
Hide whitespace changes
Inline Side-by-side
Showing with 551 additions and 102 deletions
css/freshstyle.css 0 → 100644
View file @ 922747f9
.fsslider {
position: relative;
min-width: 100px;
height: 8px;
display: inline-block;
width: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #000;
}
.fsslider {
text-align: center;
line-height: 8px;
font-size: 8px;
font-family: "Lucida Grande", "Trebuchet MS";
}
.fsslider > * {
position: absolute;
top: 50%;
cursor: pointer;
}
.fsslider > .fsfull-value, .fsslider > .fssel-value {
margin-top: -1px;
height: 2px;
left: 0;
right: 0;
}
.fsslider > .fsfull-value {
width: 100%;
background: #d8d8d8;/*complement of selected area*/
}
.fsslider > .fssel-left, .fsslider > .fssel-right, .fsslider > .fscaret {
background: #fff;/*buttons*/
box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
height: 100%;
min-width: 15px;
top: 0;
padding-left: 5px;
padding-right: 5px;
}
.fsslider > .fssel-value {
/*background: #ff7c19;*/
background: #27c470;/*selected area*/
height: 4px;
margin-top: -2px;
right: 50%;
}
.fsslider.fsdisabled {
color: #c8c8c8;
}
.fsslider.fsdisabled > .fssel-value {
background: #c8c8c8;
}
css/sidebar.css
View file @ 922747f9
...@@ -31,7 +31,7 @@ box-shadow: 0px 0px 3px 0px #888888; ...@@ -31,7 +31,7 @@ box-shadow: 0px 0px 3px 0px #888888;
/*border: 1px #888888 solid;*/ /*border: 1px #888888 solid;*/
background: #fff url(../img/bg.jpg) repeat top left; background: #fff url(../img/bg.jpg) repeat top left;
-webkit-border-radius: 0px 11px 11px 0px;-moz-border-radius: 0px 11px 11px 0px;border-radius: 0px 11px 11px 0px;-webkit-box-shadow: #B3B3B3 4px 4px 4px;-moz-box-shadow: #B3B3B3 4px 4px 4px; box-shadow: #B3B3B3 4px 4px 4px; -webkit-border-radius: 0px 11px 11px 0px;-moz-border-radius: 0px 11px 11px 0px;border-radius: 0px 11px 11px 0px;-webkit-box-shadow: #B3B3B3 4px 4px 4px;-moz-box-shadow: #B3B3B3 4px 4px 4px; box-shadow: #B3B3B3 4px 4px 4px;
transition: all 0.4s ease 0s; transition: all 0.1s ease 0s;
} }
#page-content-wrapper { #page-content-wrapper {
......
explorerjs.html
View file @ 922747f9
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.css" media="screen"> <link rel="stylesheet" href="css/bootstrap.css" media="screen">
<link rel="stylesheet" href="css/freshstyle.css" type="text/css">
<link rel="stylesheet" href="css/custom.css" media="screen"> <link rel="stylesheet" href="css/custom.css" media="screen">
<link href="css/sidebar.css" rel="stylesheet"> <link href="css/sidebar.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700"> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700">
...@@ -109,15 +110,18 @@ ...@@ -109,15 +110,18 @@
<div id="defaultop" class="navbar navbar-default"> <div id="defaultop" class="navbar navbar-default">
<div class="navbar-collapse collapse navbar-responsive-collapse"> <div class="navbar-collapse collapse navbar-responsive-collapse">
<div id="left"> <div id="left" style="margin:0em 2em;">
<ul class="nav navbar-nav"> <ul class="nav navbar-nav">
<li> <li>
<a>
<div id="bipartiteComponent" class="btn-group" data-toggle="buttons"> <div id="bipartiteComponent" class="btn-group" data-toggle="buttons">
<label class="btn btn-primary btn-default active"><input onchange='changeButton(this);' type="radio" name="options" id="social"> Scholars</label> <label class="btn btn-primary btn-sm active"><input onchange='changeButton(this);' type="radio" name="options" id="social"> Scholars</label>
<label class="btn btn-success btn-default"><input onchange="changeButton(this);" type="radio" name="options" id="sociosemantic"> Mixed</label> <label class="btn btn-success btn-sm"><input onchange="changeButton(this);" type="radio" name="options" id="sociosemantic"> Mixed</label>
<label class="btn btn-info btn-default"><input onchange="changeButton(this);" type="radio" name="options" id="semantic"> Keywords</label> <label class="btn btn-info btn-sm"><input onchange="changeButton(this);" type="radio" name="options" id="semantic"> Keywords</label>
</div> </div>
</a>
</li> </li>
<li><a><div style="margin:0em 2em;" id="unranged-value"></div></a></li>
</ul> </ul>
</div> </div>
<ul class="nav navbar-nav navbar-right"> <ul class="nav navbar-nav navbar-right">
...@@ -138,6 +142,27 @@ ...@@ -138,6 +142,27 @@
</ul> </ul>
</li> </li>
</ul> </ul>
<ul id="category-A" class="nav navbar-nav navbar-right">
<li>
<ul style="list-style-type: none; margin:0em 1em;">
<li><div id="sliderANodeWeight"></div></li>
<li><div id="sliderAEdgeWeight"></div></li>
<li><div id="sliderANodeSize"></div></li>
</ul>
</li>
</ul>
<ul id="category-B" class="nav navbar-nav navbar-right">
<li>
<ul style="list-style-type: none; margin:0em 1em;">
<li><div id="sliderBNodeWeight"></div></li>
<li><div id="sliderBEdgeWeight"></div></li>
<li><div id="sliderBNodeSize"></div></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse --> </div><!-- /.nav-collapse -->
</div><!-- /.navbar --> </div><!-- /.navbar -->
...@@ -150,7 +175,7 @@ ...@@ -150,7 +175,7 @@
<ul id="ctlzoom"> <ul id="ctlzoom">
<li> <li>
<div id="unfold"> <div id="unfold">
<a href="#" id="aUnfold" class="leftarrow"></a> <a href="#" id="aUnfold" onclick='leftPanel("fromHtml")' class="leftarrow"></a>
</div><!--unfold--> </div><!--unfold-->
</li> </li>
...@@ -204,6 +229,7 @@ ...@@ -204,6 +229,7 @@
<script src="libs/jquery/jquery-ui.js" type="text/javascript"></script> <script src="libs/jquery/jquery-ui.js" type="text/javascript"></script>
<script src="libs/jquery/jquery.ba-dotimeout.min.js" type="text/javascript"></script> <script src="libs/jquery/jquery.ba-dotimeout.min.js" type="text/javascript"></script>
<script src="libs/jquery/jquery.mousewheel.min.js" type="text/javascript"></script> <script src="libs/jquery/jquery.mousewheel.min.js" type="text/javascript"></script>
<script type="text/javascript" src="libs/freshslider.1.0.js"></script>
<script src="libs/bootstrap/js/bootstrap.min.js"></script> <script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="bootswatch/js/bootswatch.js"></script> <script src="bootswatch/js/bootswatch.js"></script>
......
libs/freshslider.1.0.js 0 → 100644
View file @ 922747f9
/**
* Created by tuanchauict on 3/24/14.
*/
(function($){
/**
* options.range = true or false, [default: false]
* options.onchange = callback function when slider caret changed, onchange(low, high) for ranged, and onchange(value) for unranged
* options.min = minimum of value [default: 0]
* options.max = maximum of value [default: 100]
* options.step [default: 1]
* options.unit = the unit which be shown, [default: none]
* options.enabled = true / false. [default: true]
* options.value = number if count = 1 , or 2 elements array contains low and high value if count = 2
* options.text = true or false, [default: true]
* @param options
* @returns {$.fn}
*/
$.fn.freshslider = function(options){
var me = this;
var range = typeof options.range == 'undefined'? false : options.range,
isSingle = !range,
min = options.min || 0,
max = options.max || 100,
gap = max - min,
step = options.step || 1,
unit = options.unit || '',
enabled = typeof options.enabled == 'undefined'? true: options.enabled,
values = [0, 1],
text = typeof options.text == 'undefined' ? true:options.text,
view = null;
if(gap < 0){
throw new Error();
}
var isFunction = function(object){
return object && Object.prototype.toString.call(object) == '[object Function]';
};
var updateCallback = null;
if(isFunction(options.onchange) == true){
updateCallback = options.onchange;
}
var strStep = '' + step;
var countPoint = 0;
if(strStep.indexOf('.') >= 0){
countPoint = strStep.length - strStep.indexOf('.') - 1;
}
if(options.hasOwnProperty('value')){
if(!isSingle){
if(options.value.length && options.value.length == 2){
values[0] = (options.value[0] - min) / gap;
values[1] = (options.value[1] - min) / gap;
}
}
else{
values[1] = (options.value - min) / gap;
}
}
else{
if(isSingle){
values[1] = 0.5;
}
}
if(range){
view = this.html("<div class='fsslider'><div class='fsfull-value'></div>" +
"<div class='fssel-value'></div><div class='fscaret fss-left'></div>" +
"<div class='fscaret fss-right'></div></div>").find('.fsslider');
}
else{
view = this.html("<div class='fsslider'><div class='fsfull-value'></div>" +
"<div class='fssel-value'></div><div class='fscaret'></div></div>")
.find('.fsslider');
}
var caretLeft = $(this.find('.fscaret')[0]);
var caretRight = isSingle? caretLeft:$(this.find('.fscaret')[1]);
var selVal = this.find('.fssel-value');
var round = function(val){
return step * Math.round(val/step);
};
var num2Text = function(number){
return number.toFixed(countPoint);
};
var updateCarets = function(){
if(text){
caretRight.text((round(values[1] * gap) + min).toFixed(countPoint) + unit);
if(!isSingle){
caretLeft.text((round(values[0] * gap) + min).toFixed(countPoint) + unit);
}
}
var sliderWidth = me.width(),
caretLeftWidth = caretLeft.outerWidth(),
caretRightWidth = caretRight.outerWidth(),
realWidth = sliderWidth - (caretLeftWidth + caretRightWidth) / 2;
selVal.css({
left:values[0] * sliderWidth,
width:(values[1] - values[0]) * sliderWidth
});
caretLeft.css({
left:values[0] * realWidth + caretLeftWidth/2,
"margin-left": -(caretLeftWidth/2),
'z-index':isRight?0:1
});
caretRight.css({
left:values[1] * realWidth + caretRightWidth / 2,
"margin-left": -(caretRightWidth/2),
'z-index':isRight?1:0
});
if(updateCallback){
if(isSingle){
updateCallback(round(values[1] * gap) + min);
}
else{
updateCallback(round(values[0] * gap) + min, round(values[1] * gap ) + min);
}
}
};
var isRight = true;
var isDown = false;
this.mousedown(function(e){
if(!enabled){
return;
}
isDown =true;
var sliderWidth = me.width(),
caretLeftWidth = caretLeft.outerWidth(),
caretRightWidth = caretRight.outerWidth(),
realWidth = sliderWidth - (caretLeftWidth + caretRightWidth) / 2;
var target = e.target;
var cls = target.className;
var x = e.pageX - me.offset().left;
var realX = x - caretLeftWidth/2;
realX = realX < 0? 0:realX > realWidth ? realWidth:realX;
if(isSingle){
values[1] = realX / realWidth;
isRight = true;
}
else{
switch (cls){
case 'fscaret fss-left':
isRight = false;
values[0] = realX/realWidth;
break;
case 'fscaret fss-right':
isRight = true;
values[1] = realX/realWidth;
break;
default:
if(realX < (values[0] + values[1])/2 * realWidth){
isRight = false;
values[0] = realX / realWidth;
}
else{
isRight = true;
values[1] = realX / realWidth;
}
}
}
updateCarets();
if(event.preventDefault){
event.preventDefault();
}
else{
return false;
}
});
var onMouseUp = function(){
if(!enabled){
return;
}
isDown = false;
values[1] = round(values[1] * gap) / gap;
if(!isSingle){
values[0] = round(values[0] * gap) / gap;
}
updateCarets();
};
$(document).mouseup(function(e){
if(isDown)
onMouseUp();
});
this.mousemove(function(e){
if(!enabled){
return;
}
if(isDown){
var sliderWidth = me.width(),
caretLeftWidth = caretLeft.outerWidth(),
caretRightWidth = caretRight.outerWidth(),
realWidth = sliderWidth - (caretLeftWidth + caretRightWidth) / 2;
var target = e.target;
var cls = target.className;
var x = e.pageX - me.offset().left;
var realX = x - caretLeftWidth/2;
realX = realX < 0? 0:realX > realWidth ? realWidth:realX;
if(isSingle){
values[1] = realX / realWidth;
isRight = true;
}
else{
if(isRight){
values[1] = realX / realWidth;
if(values[1] < values[0]){
values[1] = values[0];
}
}
else{
values[0] = realX / realWidth;
if(values[0] > values[1]){
values[0] = values[1];
}
}
}
updateCarets();
}
if(event.preventDefault){
event.preventDefault();
}
else{
return false;
}
});
this.getValue = function(){
if(isSingle){
return [values[1] * gap + min];
}
else{
return [values[0] * gap + min, values[1] * gap + min];
}
};
this.setValue = function(){
if(!isSingle){
if(arguments.length >= 2){
values[0] = (options.value[0] - min) / gap;
values[1] = (options.value[1] - min) / gap;
updateCarets();
}
}
else{
values[1] = (arguments[0] - min) / gap;
updateCarets();
}
};
this.setEnabled = function(_enable){
enabled = typeof _enable == 'undefined' ? true:_enable;
if(enabled){
view.removeClass('fsdisabled');
}
else{
view.addClass('fsdisabled');
}
};
this.setEnabled(enabled);
updateCarets();
return this;
}
}(jQuery));
\ No newline at end of file
tinawebJS/js/main.js
View file @ 922747f9
...@@ -137,6 +137,7 @@ function bringTheNoise(pathfile,type){ ...@@ -137,6 +137,7 @@ function bringTheNoise(pathfile,type){
console.log("Parsing and FA2 complete."); console.log("Parsing and FA2 complete.");
// < === ASYNCHRONOUS FA2.JS DONE!! === > // < === ASYNCHRONOUS FA2.JS DONE!! === >
leftPanel("close");
$("#closemodal").click();//modal.hide doesnt work :c $("#closemodal").click();//modal.hide doesnt work :c
// startForceAtlas2(partialGraph._core.graph);r( // startForceAtlas2(partialGraph._core.graph);r(
...@@ -150,7 +151,6 @@ function bringTheNoise(pathfile,type){ ...@@ -150,7 +151,6 @@ function bringTheNoise(pathfile,type){
initializeMap(); initializeMap();
updateMap(); updateMap();
updateDownNodeEvent(false); updateDownNodeEvent(false);
$("#aUnfold").click();
partialGraph.zoomTo(partialGraph._core.width / 2, partialGraph._core.height / 2, 0.8).draw(2,2,2); partialGraph.zoomTo(partialGraph._core.width / 2, partialGraph._core.height / 2, 0.8).draw(2,2,2);
theListeners(); theListeners();
}); });
...@@ -222,53 +222,74 @@ function listGexfs(){ ...@@ -222,53 +222,74 @@ function listGexfs(){
}); });
} }
function leftPanel(action) {
sidebar = $("#leftcolumn");
fullwidth=$('#fixedtop').width();
if(action=="fromHtml"){
if(sidebar.offset().left<0) leftPanel("open");
else leftPanel("close");
}
if (action=="open") {
sidebar.animate({
"left" : sidebar.width()+"px"
}, function() {
$("#aUnfold").attr("class","leftarrow");
$('#sigma-example').width(fullwidth-sidebar.width());
$("#ctlzoom").css({
left: (sidebar.width()+10)+"px"
});
});
}
if(action=="close"){
sidebar.animate({
"left" : "-" + sidebar.width() + "px"
}, function() {
$("#aUnfold").attr("class","rightarrow");
$('#sigma-example').width(fullwidth);
$("#ctlzoom").css({
left: "0px"
});
});
}
}
function theListeners(){ function theListeners(){
$("#saveAs").click(function() { $("#saveAs").click(function() {
saveGEXF(); saveGEXF();
}); });
$("#aUnfold").click(function() {
_cG = $("#leftcolumn");
anchototal=$('#fixedtop').width();
sidebar=_cG.width();
pr("\t===== event for aUnfold =====")
pr("offset:")
pr(_cG.offset())
pr("width:")
pr(_cG.width())
pr("sigma-example")
pr($("#sigma-example").offset())
pr("-----------------")
if (_cG.offset().left < 0) {
pr("\t\tinside if")
_cG.animate({
"left" : sidebar+"px"
}, function() {
$("#aUnfold").attr("class","leftarrow");
$('#sigma-example').width(anchototal-sidebar);
$("#ctlzoom").css({
left: (sidebar+10)+"px"
});
// $("#sigma-example").css({
// left: _cG.width() + "px"
// });
});
} else {
pr("\t\tinside else")
_cG.animate({
"left" : "-" + _cG.width() + "px"
}, function() {
$("#aUnfold").attr("class","rightarrow");
$('#sigma-example').width(anchototal);
$("#ctlzoom").css({
left: "0px"
});
});
}
return false;
});
// $("#aUnfold").click(function() {
// _cG = $("#leftcolumn");
// anchototal=$('#fixedtop').width();
// sidebar=_cG.width();
//
// if (_cG.offset().left < 0) {
// _cG.animate({
// "left" : sidebar+"px"
// }, function() {
// $("#aUnfold").attr("class","leftarrow");
// $('#sigma-example').width(anchototal-sidebar);
// $("#ctlzoom").css({
// left: (sidebar+10)+"px"
// });
// });
// } else {
// _cG.animate({
// "left" : "-" + _cG.width() + "px"
// }, function() {
// $("#aUnfold").attr("class","rightarrow");
// $('#sigma-example').width(anchototal);
// $("#ctlzoom").css({
// left: "0px"
// });
// });
// }
// return false;
// });
//
/******************* /SEARCH ***********************/ /******************* /SEARCH ***********************/
$.ui.autocomplete.prototype._renderItem = function(ul, item) { $.ui.autocomplete.prototype._renderItem = function(ul, item) {
var searchVal = $("#searchinput").val(); var searchVal = $("#searchinput").val();
...@@ -438,52 +459,104 @@ function theListeners(){ ...@@ -438,52 +459,104 @@ function theListeners(){
edgesTF=false; edgesTF=false;
} }
}); });
$("#sliderANodeSize").slider({ $("#sliderANodeWeight").freshslider({
value: 1, range: true,
min: 1, step:1,
max: 25, value:[10, 60],
animate: true, onchange:function(low, high){
slide: function(event, ui) { console.log(low, high);
$.doTimeout(100,function (){
partialGraph.iterNodes(function (n) {
pr();
if(Nodes[n.id].type==catSoc) {
n.size = parseFloat(Nodes[n.id].size) + parseFloat((ui.value-1))*0.3;
}
});
partialGraph.draw();
});
} }
}); });
$("#sliderBNodeSize").slider({ $("#sliderAEdgeWeight").freshslider({
value: 1, range: true,
min: 1, step:1,
max: 25, value:[10, 100],
animate: true, onchange:function(low, high){
slide: function(event, ui) { console.log(low, high);
$.doTimeout(100,function (){ }
partialGraph.iterNodes(function (n) { });
if(Nodes[n.id].type==catSem) { $("#sliderANodeSize").freshslider({
n.size = parseFloat(Nodes[n.id].size) + parseFloat((ui.value-1))*0.3; step:1,
} value:10,
}); onchange:function(value){
partialGraph.draw(); console.log(value);
});
} }
}); });
$("#sliderSelectionZone").slider({
value: cursor_size, $("#sliderBNodeWeight").freshslider({
min: parseFloat(cursor_size_min), range: true,
max: parseFloat(cursor_size_max), step:1,
animate: true, value:[20, 60],
change: function(event, ui) { onchange:function(low, high){
cursor_size= ui.value; console.log(low, high);
//if(cursor_size==0) updateDownNodeEvent(false); }
//else updateDownNodeEvent(true); });
//return callSlider("#sliderSelectionZone", "selectionRadius"); $("#sliderBEdgeWeight").freshslider({
range: true,
step:1,
value:[20, 100],
onchange:function(low, high){
console.log(low, high);
}
});
$("#sliderBNodeSize").freshslider({
step:1,
value:20,
onchange:function(value){
console.log(value);
} }
}); });
$("#unranged-value").freshslider({
step: 1,
value:10
});
//
// $("#sliderANodeSize").slider({
// value: 1,
// min: 1,
// max: 25,
// animate: true,
// slide: function(event, ui) {
// $.doTimeout(100,function (){
// partialGraph.iterNodes(function (n) {
// pr();
// if(Nodes[n.id].type==catSoc) {
// n.size = parseFloat(Nodes[n.id].size) + parseFloat((ui.value-1))*0.3;
// }
// });
// partialGraph.draw();
// });
// }
// });
// $("#sliderBNodeSize").slider({
// value: 1,
// min: 1,
// max: 25,
// animate: true,
// slide: function(event, ui) {
// $.doTimeout(100,function (){
// partialGraph.iterNodes(function (n) {
// if(Nodes[n.id].type==catSem) {
// n.size = parseFloat(Nodes[n.id].size) + parseFloat((ui.value-1))*0.3;
// }
// });
// partialGraph.draw();
// });
// }
// });
// $("#sliderSelectionZone").slider({
// value: cursor_size,
// min: parseFloat(cursor_size_min),
// max: parseFloat(cursor_size_max),
// animate: true,
// change: function(event, ui) {
// cursor_size= ui.value;
// //if(cursor_size==0) updateDownNodeEvent(false);
// //else updateDownNodeEvent(true);
// //return callSlider("#sliderSelectionZone", "selectionRadius");
// }
// });
} }
function getClientTime(){ function getClientTime(){
......
tinawebJS/js/methods.js
View file @ 922747f9
...@@ -148,6 +148,7 @@ function cancelSelection (fromTagCloud) { ...@@ -148,6 +148,7 @@ function cancelSelection (fromTagCloud) {
partialGraph._core.graph.nodesIndex[i].neighbour=false; partialGraph._core.graph.nodesIndex[i].neighbour=false;
} }
deselections={}; deselections={};
leftPanel("close");
partialGraph.draw(); partialGraph.draw();
} }
...@@ -599,18 +600,8 @@ function updateLeftPanel(){ ...@@ -599,18 +600,8 @@ function updateLeftPanel(){
$("#opossiteNodes").html(opossitesNodes); //Information extracted, just added $("#opossiteNodes").html(opossitesNodes); //Information extracted, just added
$("#information").html(information); //Information extracted, just added $("#information").html(information); //Information extracted, just added
$("#tips").html(""); $("#tips").html("");
$("#topPapers").show(); $("#topPapers").show();
leftPanel("open");
/***** The animation *****/
_cG = $("#leftcolumn");
_cG.animate({
"left" : "0px"
}, function() {
$("#aUnfold").attr("class","leftarrow");
$("#zonecentre").css({
left: _cG.width() + "px"
});
});
} }
function graphNGrams(node_id){ function graphNGrams(node_id){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment