new sliders

css/freshstyle.css

+.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

@@ -31,7 +31,7 @@ box-shadow: 0px 0px 3px 0px #888888;
   /*border: 1px #888888 solid;*/
   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;
-  transition: all 0.4s ease 0s;
+  transition: all 0.1s ease 0s;
 }
 
 #page-content-wrapper {

explorerjs.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta charset="utf-8">
     <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 href="css/sidebar.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700">
@@ -109,15 +110,18 @@
     <div id="defaultop" class="navbar navbar-default">
 
         <div class="navbar-collapse collapse navbar-responsive-collapse">
-        	<div id="left">
+        	<div id="left" style="margin:0em 2em;">
                   <ul class="nav navbar-nav">
-		        <li>
+                      <li>
+                          <a>
 		         <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-success btn-default"><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-primary btn-sm active"><input onchange='changeButton(this);' type="radio" name="options" id="social"> Scholars</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-sm"><input onchange="changeButton(this);" type="radio" name="options" id="semantic"> Keywords</label>
 			 </div>
+                          </a>
 			</li>
+                        <li><a><div style="margin:0em 2em;" id="unranged-value"></div></a></li>
                   </ul>
                 </div>
 		  <ul class="nav navbar-nav navbar-right">
@@ -138,6 +142,27 @@
                       </ul>
                     </li>
                   </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><!-- /.navbar -->
 
@@ -150,7 +175,7 @@
         <ul id="ctlzoom">
                 <li>
                     <div id="unfold">
-                        <a href="#" id="aUnfold" class="leftarrow"></a>
+                        <a href="#" id="aUnfold" onclick='leftPanel("fromHtml")' class="leftarrow"></a>
                     </div><!--unfold-->                    
                 </li>
                 
@@ -204,6 +229,7 @@
     <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.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="bootswatch/js/bootswatch.js"></script>

libs/freshslider.1.0.js

+/**
+ * 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

@@ -137,6 +137,7 @@ function bringTheNoise(pathfile,type){
                             console.log("Parsing and FA2 complete.");
     // < === ASYNCHRONOUS FA2.JS DONE!! === >
 
+                            leftPanel("close");
                             $("#closemodal").click();//modal.hide doesnt work :c
                             //    startForceAtlas2(partialGraph._core.graph);r(
 
@@ -150,7 +151,6 @@ function bringTheNoise(pathfile,type){
                             initializeMap();
                             updateMap();
                             updateDownNodeEvent(false);
-                            $("#aUnfold").click();
                             partialGraph.zoomTo(partialGraph._core.width / 2, partialGraph._core.height / 2, 0.8).draw(2,2,2);
                             theListeners(); 
                         }); 
@@ -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(){
     $("#saveAs").click(function() {
         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 ***********************/
     $.ui.autocomplete.prototype._renderItem = function(ul, item) {
         var searchVal = $("#searchinput").val();
@@ -438,52 +459,104 @@ function theListeners(){
             edgesTF=false;
         }
     });
-   
-    $("#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();
-            });
+    
+    $("#sliderANodeWeight").freshslider({
+        range: true,
+        step:1,
+        value:[10, 60],
+        onchange:function(low, high){
+            console.log(low, high);
         }
     });
-    $("#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();
-            });
+    $("#sliderAEdgeWeight").freshslider({
+        range: true,
+        step:1,
+        value:[10, 100],
+        onchange:function(low, high){
+            console.log(low, high);
+        }
+    });
+    $("#sliderANodeSize").freshslider({
+        step:1,
+        value:10,
+        onchange:function(value){
+            console.log(value);
         }
     });
-    $("#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");
+    
+    $("#sliderBNodeWeight").freshslider({
+        range: true,
+        step:1,
+        value:[20, 60],
+        onchange:function(low, high){
+            console.log(low, high);
+        }
+    });
+    $("#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(){

tinawebJS/js/methods.js

@@ -148,6 +148,7 @@ function cancelSelection (fromTagCloud) {
         partialGraph._core.graph.nodesIndex[i].neighbour=false;
     }
     deselections={};
+    leftPanel("close");
     partialGraph.draw();
 }
 
@@ -599,18 +600,8 @@ function updateLeftPanel(){
     $("#opossiteNodes").html(opossitesNodes); //Information extracted, just added
     $("#information").html(information); //Information extracted, just added
     $("#tips").html("");
-     $("#topPapers").show();
-        
-    /***** The animation *****/
-    _cG = $("#leftcolumn");
-    _cG.animate({
-        "left" : "0px"
-    }, function() {
-        $("#aUnfold").attr("class","leftarrow");
-        $("#zonecentre").css({
-            left: _cG.width() + "px"
-        });
-    });
+    $("#topPapers").show();
+    leftPanel("open");
 }
 
 function graphNGrams(node_id){