Changeset 20359

Timestamp:

03/25/16 17:55:49 (9 years ago)

Author:

dlcheng

Message:

CHG (javascript): slider refactoring. Now conforms to options syntax. Accepts height and width arguments. Requires named arguments for value, callback, and name. Preventing variable hoisting.

File:

• issm/trunk-jpl/src/m/plot/slider.js (modified) (2 diffs)

issm/trunk-jpl/src/m/plot/slider.js

@@ -1 @@
-function slider(initialvalue,functionvalue,slidername){
+function slider(){
         
         //Convert arguments to options
         var args = Array.prototype.slice.call(arguments);
-        var  options = new pairoptions(args.slice(3,args.length));
+        var  options = new pairoptions(args.slice());
 
         //Recover option values:
-        min=options.getfieldvalue('min',.6*initialvalue);
-        max=options.getfieldvalue('max',1.4*initialvalue);
-        sliderheight=options.getfieldvalue('sliderheight',32);
-        message=options.getfieldvalue('message','');
-        startmessage=options.getfieldvalue('startmessage',message);
-        middlemessage=options.getfieldvalue('middlemessage',message);
-        endmessage=options.getfieldvalue('endmessage',message);
-        color=options.getfieldvalue('color','#bbbbbb');
-        precision=options.getfieldvalue('precision',3);
-        step=options.getfieldvalue('step',1);
-        slidersdiv=options.getfieldvalue('slidersdiv','slidersdiv');
+        var value = options.getfieldvalue('value',0);
+        var callback = options.getfieldvalue('callback',function(){});
+        var name = options.getfieldvalue('name','');
+        var min = options.getfieldvalue('min',0.6*value);
+        var max = options.getfieldvalue('max',1.4*value);
+        var width = options.getfieldvalue('width','auto');
+        var height = options.getfieldvalue('height',32);
+        var message = options.getfieldvalue('message','');
+        var startmessage = options.getfieldvalue('startmessage',message);
+        var middlemessage = options.getfieldvalue('middlemessage',message);
+        var endmessage = options.getfieldvalue('endmessage',message);
+        var color = options.getfieldvalue('color','#bbbbbb');
+        var precision = options.getfieldvalue('precision',3);
+        var step = options.getfieldvalue('step',1);
+        var slidersdiv = options.getfieldvalue('slidersdiv','slidersdiv');
 
-        $('<div id="slider'+slidername+'"></div>').appendTo('#'+slidersdiv);
-        $('<div id="info'+slidername+'">'+startmessage[0]+initialvalue.toString()+startmessage[1]+'</div>').appendTo('#'+slidersdiv);
-        var info=$('#info'+slidername);
-        $('#slider'+slidername).slider({
+        $('#'+slidersdiv).css({width:width});
+        $('<div class="slider'+name+'"></div>').appendTo('#'+slidersdiv);
+        $('<div class="info'+name+'">'+startmessage[0]+value.toString()+startmessage[1]+'</div>').appendTo('#'+slidersdiv);
+        var info=$('.info'+name);
+        $('.slider'+name).slider({
                 range:'min',
-                value:initialvalue,
+                value:value,
                 min:min,
                 max:max,
                 step:step,
                 slide:function(event,ui){
-                        moveSlide(event,ui,info,middlemessage);
+                        moveSlide(event,ui,info,middlemessage,precision);
                 },
                 stop:function(event,ui){
-                        stopSlide(event,ui,info,functionvalue,middlemessage,endmessage);
+                        stopSlide(event,ui,info,callback,middlemessage,endmessage,precision);
                 },
         });
         $('.ui-slider').css({
-                width:'90%',
-                height:sliderheight,
+                width:'auto',
+                height:height,
                 background:color,
-                margin:'8px 12px'
+                margin:'8px'
         });
         $('.ui-slider-handle').css({
                 background:color,
-                height:sliderheight*1.3
+                height:parseInt(height)+8
         });
         $('.ui-slider-range').css({
@@ -50 +55 @@
 }
 
-function moveSlide(event,ui,info,middlemessage){
+function moveSlide(event,ui,info,middlemessage,precision){
         var val=ui.value;
         info.text(middlemessage[0]+val.toPrecision(precision).toString()+middlemessage[1]);
 }
 
-function stopSlide(event,ui,info,functionvalue,middlemessage,endmessage){
+function stopSlide(event,ui,info,functionvalue,middlemessage,endmessage,precision){
         var val=ui.value;
         info.text(middlemessage[0]+val.toPrecision(precision).toString()+middlemessage[1]);