From 4ba9257b9cdf52801d9de85e33e8af6af830def7 Mon Sep 17 00:00:00 2001
From: zotlabs <mike@macgirvin.com>
Date: Sat, 29 Dec 2018 15:40:07 -0800
Subject: [PATCH 1/2] slider value updates

---
 Zotlabs/Lib/Apps.php     |  2 +-
 view/tpl/main_slider.tpl | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/Zotlabs/Lib/Apps.php b/Zotlabs/Lib/Apps.php
index 684b31092..3de3a119e 100644
--- a/Zotlabs/Lib/Apps.php
+++ b/Zotlabs/Lib/Apps.php
@@ -796,7 +796,7 @@ class Apps {
 		);
 
 		if($r) {
-                        $hookinfo = Array('uid'=>$uid,'deleted'=>$deleted,'cats'=>$cats,'apps'=>$r);
+			$hookinfo = [ 'uid' => $uid, 'deleted' => $deleted, 'cats' => $cats, 'apps' => $r ];
 			call_hooks('app_list',$hookinfo);
 			$r = $hookinfo['apps'];
 			for($x = 0; $x < count($r); $x ++) {
diff --git a/view/tpl/main_slider.tpl b/view/tpl/main_slider.tpl
index cb150f38b..2318a7939 100755
--- a/view/tpl/main_slider.tpl
+++ b/view/tpl/main_slider.tpl
@@ -8,6 +8,7 @@
 	{{/foreach}}
 	</datalist>
 	<i class="fa fa-fw fa-users range-icon"></i>
+	<span class="range-value">{{$cmax}}</span>
 	</div>
 	<div id="profile-jot-text-loading" class="spinner-wrapper">
 		<div class="spinner m"></div>
@@ -18,14 +19,21 @@
 $(document).ready(function() {
 
 	var old_cmin = 0;
-	var old_cmax = 99;
+	var old_cmax = {{$cmax}};
 	var slideTimer = null;
 
-	$("#main-range").change(function() { 
+	$("#main-range").on('input', function() { sliderUpdate(); });
+	$("#main-range").on('change', function() { sliderUpdate(); });
+
+	function sliderUpdate() {
 		bParam_cmax = $("#main-range").val();
+		if(bParam_cmax == old_cmax) 
+			return;
+		old_cmax = bParam_cmax;
 		$("#main-range").attr('title',bParam_cmax);
+		$(".range-value").html(bParam_cmax);
 		networkRefresh();
-	});
+	}
 
 	function networkRefresh() {
 		if(slideTimer !== null)

From 921313f0c8644a15531409dd8b94d442d6443f2d Mon Sep 17 00:00:00 2001
From: zotlabs <mike@macgirvin.com>
Date: Sun, 30 Dec 2018 14:36:23 -0800
Subject: [PATCH 2/2] remaining work on slider conversion

---
 Zotlabs/Module/Connedit.php       | 25 +++++++------------------
 view/theme/redbasic/css/style.css |  4 ++++
 view/tpl/abook_edit.tpl           | 17 +++++++++++++++--
 view/tpl/contact_slider.tpl       | 24 ++++++++----------------
 view/tpl/main_slider.tpl          |  6 ++++++
 5 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/Zotlabs/Module/Connedit.php b/Zotlabs/Module/Connedit.php
index 540bca332..0d3ebdb68 100644
--- a/Zotlabs/Module/Connedit.php
+++ b/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,
 				));
 			}
 
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 8e5080445..2359652f3 100644
--- a/view/theme/redbasic/css/style.css
+++ b/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;
 }
diff --git a/view/tpl/abook_edit.tpl b/view/tpl/abook_edit.tpl
index c1147defb..42239adc3 100755
--- a/view/tpl/abook_edit.tpl
+++ b/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}}
diff --git a/view/tpl/contact_slider.tpl b/view/tpl/contact_slider.tpl
index 0848df673..d1fd87235 100755
--- a/view/tpl/contact_slider.tpl
+++ b/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>
diff --git a/view/tpl/main_slider.tpl b/view/tpl/main_slider.tpl
index 2318a7939..fd2a20d86 100755
--- a/view/tpl/main_slider.tpl
+++ b/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;