remaining work on slider conversion

Zotlabs/Module/Connedit.php

@@ -655,25 +655,14 @@ class Connedit extends \Zotlabs\Web\Controller {
 				];
 	
 				$labels = [
-					t('Me'),
-					t('Family'),
-					t('Friends'),
-					t('Acquaintances'),
-					t('All')
+					0  => t('Me'),
+					20 => t('Family'),
+					40 => t('Friends'),
+					60 => t('Peers'),
+					80 => t('Connections'),
+					99 => t('All')
 				];
 				call_hooks('affinity_labels',$labels);
-				$label_str = '';
-	
-				if($labels) {
-					foreach($labels as $l) {
-						if($label_str) {
-							$label_str .= ", '|'";
-							$label_str .= ", '" . $l . "'";
-						}
-						else
-							$label_str .= "'" . $l . "'";
-					}
-				}
 	
 				$slider_tpl = get_markup_template('contact_slider.tpl');
 				
@@ -682,7 +671,7 @@ class Connedit extends \Zotlabs\Web\Controller {
 				$slide = replace_macros($slider_tpl,array(
 					'$min' => 1,
 					'$val' => $slideval,
-					'$labels' => $label_str,
+					'$labels' => $labels,
 				));
 			}
 

view/theme/redbasic/css/style.css

@@ -111,6 +111,10 @@ h6, .h6 {
 	font-family: sans-serif, arial, freesans;
 }
 
+#contact-range {
+	width: 80%;
+}
+
 abbr {
 	border-bottom: none;
 }

view/tpl/abook_edit.tpl

@@ -111,8 +111,21 @@
 					<div class="section-content-tools-wrapper">
 						{{if $slide}}
 						<div class="form-group"><strong>{{$lbl_slider}}</strong></div>
-						{{$slide}}
-						<input id="contact-closeness-mirror" type="hidden" name="closeness" value="{{$close}}" />
+							<div id="contact-slider" class="slider form-group">
+							{{$slide}}
+								<div id="slider-container">
+								<i class="fa fa-fw fa-user range-icon"></i>
+								<input id="contact-range" title="{{$close}}" type="range" min="0" max="99" name="closeness" value="{{$close}}" list="affinity_labels" >
+								<datalist id="affinity_labels">
+								{{foreach $labels as $k => $v}}
+								<option value={{$k}} label="{{$v}}">
+								{{/foreach}}
+								</datalist>
+								<i class="fa fa-fw fa-users range-icon"></i>
+								<span class="range-value">{{$close}}</span>
+								</div>
+							</div>
+						</div>
 						{{/if}}
 
 						{{if $multiprofs}}

view/tpl/contact_slider.tpl

@@ -1,20 +1,12 @@
-<div id="contact-slider" class="slider form-group"><input id="contact-range" type="text" name="fake-closeness" value="{{$val}}" /></div>
 <script>
 $(document).ready(function() {
-	// The slider does not render correct if width is given in % and
-	// the slider container is hidden (display: none) during rendering.
-	// So let's unhide it to render and hide again afterwards.
-	if(!$("#affinity-tool-collapse").hasClass("show")) {
-		$("#affinity-tool-collapse").addClass("show");
-		makeContactSlider();
-		$("#affinity-tool-collapse").removeClass("show");
-	}
-	else {
-		makeContactSlider();
-	}
-});
 
-function makeContactSlider() {
-	$("#contact-range").jRange({ from: {{$min|default:'0'}}, to: 99, step: 1, scale: [{{$labels}}], width:'98%', showLabels: false, onstatechange: function(v) { $("#contact-closeness-mirror").val(v); }  });
-}
+	$("#contact-range").on('input', function() { csliderUpdate(); });
+	$("#contact-range").on('change', function() { csliderUpdate(); });
+
+	function csliderUpdate() {
+		$(".range-value").html($("#contact-range").val());
+	}
+
+});
 </script>

view/tpl/main_slider.tpl

@@ -35,6 +35,12 @@ $(document).ready(function() {
 		networkRefresh();
 	}
 
+	// "de-bounce" circuit
+	// when a change occurs, indicate "busy", but wait (2 seconds) 
+	// before loading fresh content. This allows the slider value to
+	// change further during that time and avoids a network fetch for 
+	// every individual integer value change. 
+
 	function networkRefresh() {
 		if(slideTimer !== null)
 			return;