From 7c23cffc752482a179e9d2ffcc92b34ff22c8dce Mon Sep 17 00:00:00 2001
From: Devin Starks <DevStarks@gmail.com>
Date: Tue, 2 May 2017 01:02:31 -0400
Subject: [PATCH] slider toggle working

---
 npm-shrinkwrap.json                           | 10 ++++
 package.json                                  |  3 ++
 .../Panel/KeyOverlay/SlideSelector/index.jsx  | 47 +++++++++++++------
 .../KeyOverlay/SlideSelector/styles.scss      |  7 ++-
 .../Keyboard/Panel/KeyOverlay/index.jsx       |  4 +-
 5 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index a0d7a7a..e9e1a39 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -3098,6 +3098,16 @@
       "from": "jodid25519@>=1.0.0 <2.0.0",
       "resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz"
     },
+    "jquery": {
+      "version": "3.2.1",
+      "from": "jquery@latest",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.2.1.tgz"
+    },
+    "jquery-ui": {
+      "version": "1.12.1",
+      "from": "jquery-ui@latest",
+      "resolved": "https://registry.npmjs.org/jquery-ui/-/jquery-ui-1.12.1.tgz"
+    },
     "js-base64": {
       "version": "2.1.9",
       "from": "js-base64@>=2.1.9 <3.0.0",
diff --git a/package.json b/package.json
index 502c1c1..2deaebd 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,9 @@
     "file-loader": "^0.10.1",
     "html-webpack-plugin": "^2.28.0",
     "http-server": "^0.9.0",
+    "jquery": "^3.2.1",
+    "jquery-ui": "^1.12.1",
+    "jquery-ui-bundle": "^1.12.1",
     "karma": "^0.13.22",
     "karma-babel-preprocessor": "^6.0.1",
     "karma-chai": "^0.1.0",
diff --git a/src/Main/Toolbox/Keyboard/Panel/KeyOverlay/SlideSelector/index.jsx b/src/Main/Toolbox/Keyboard/Panel/KeyOverlay/SlideSelector/index.jsx
index 5b90c66..be5d9f2 100644
--- a/src/Main/Toolbox/Keyboard/Panel/KeyOverlay/SlideSelector/index.jsx
+++ b/src/Main/Toolbox/Keyboard/Panel/KeyOverlay/SlideSelector/index.jsx
@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import CSSModules from 'react-css-modules';
 import styles from './styles.scss';
-import Draggable from 'draggable';
+import $ from 'jquery';
+import 'jquery-ui-bundle';
+
 import _ from 'lodash';
 
 class SlideSelector extends Component {
@@ -13,6 +15,7 @@ class SlideSelector extends Component {
 		this.optionClass = this.optionClass.bind(this);
 		this.optionClass = this.optionClass.bind(this);
 		this.onDrag = this.onDrag.bind(this);
+		this.onDragStop = this.onDragStop.bind(this);
 
 		this.state = {
 			selected: this.props.default || 1
@@ -24,23 +27,36 @@ class SlideSelector extends Component {
 	}
 
 	initDraggable() {
-		var element = this.sliderBall;
-		var options = {
-			limit: this.slider,
-			grid: this.props.options.count,
-			onDrag: this.onDrag
-		};
-
-		new Draggable(element, options);
+		var $element = $(this.sliderBall);
+
+		$element.draggable({
+			axis: "y",
+			containment: "parent",
+			stop: this.onDragStop
+		})
+	}
+
+	onDragStop(event, { position: { left, top } }) {
+		//
+		// use this.slider.offsetTop to get difference in offset between
+		// slider options and sliderBall
+		//
+		const $sliderBall = $(event.target);
+		const $closest = $(this.getClosestOption(left, top + this.slider.offsetTop))
+		const closestY = $closest.position().top - this.slider.offsetTop;
+
+  	$sliderBall.stop().animate({
+      top: closestY
+  	}, 500,'easeOutCirc');
 	}
 
 	getClosestOption(x, y) {
-		const locations =  this.getOptionLocations();
+		const locations = this.getOptionLocations();
 		let closestIdx = 0;
 
 		locations.forEach((location, idx) => {
-			let diff = Math.abs(location - y);
-			let closestOptionDiff = locations[closestIdx] - y;
+			const diff = Math.abs(location - y);
+			const closestOptionDiff = Math.abs(locations[closestIdx] - y);
 
 			if(diff < closestOptionDiff){
 				closestIdx = idx;
@@ -51,7 +67,8 @@ class SlideSelector extends Component {
 	}
 
 	getOptionLocations() {
-		const optionsCount = this.props.options.count;
+		const optionsCount = Object.keys(this.props.options).length;
+
 		// returns the y offsets of all options
 		return _.times(optionsCount, i => this['option' + i].offsetTop);
 	}
@@ -72,7 +89,9 @@ class SlideSelector extends Component {
 
 	renderOption(optionId, idx) {
 		return (
-			<li className={this.optionClass(optionId)} key={idx} ref={ option => { this['option' + idx] = option }}>
+			<li className={'slide-option ' + this.optionClass(optionId)}
+					key={idx}
+					ref={ option => { this['option' + idx] = option }}>
 				{this.props.options[optionId]}
 			</li>
 		);
diff --git a/src/Main/Toolbox/Keyboard/Panel/KeyOverlay/SlideSelector/styles.scss b/src/Main/Toolbox/Keyboard/Panel/KeyOverlay/SlideSelector/styles.scss
index 7d35e45..3e4c04b 100644
--- a/src/Main/Toolbox/Keyboard/Panel/KeyOverlay/SlideSelector/styles.scss
+++ b/src/Main/Toolbox/Keyboard/Panel/KeyOverlay/SlideSelector/styles.scss
@@ -2,6 +2,7 @@
 
 :local(.SlideSelector) {
 	display: flex;
+	position: relative;
 
 	.slider {
 		position: relative;
@@ -9,7 +10,7 @@
 		background: white;
 		border-radius: 10px;
 		margin-right: .5rem;
-		padding: 3px;
+		padding: 6px 3px;
 	}
 
 	.sliderBall {
@@ -19,6 +20,10 @@
 		background-color: $color-dark;
 	}
 
+	ul {
+		padding: 5px 0;
+	}
+
 	li {
 		margin-bottom: .5rem;
 
diff --git a/src/Main/Toolbox/Keyboard/Panel/KeyOverlay/index.jsx b/src/Main/Toolbox/Keyboard/Panel/KeyOverlay/index.jsx
index 31850aa..f078f09 100644
--- a/src/Main/Toolbox/Keyboard/Panel/KeyOverlay/index.jsx
+++ b/src/Main/Toolbox/Keyboard/Panel/KeyOverlay/index.jsx
@@ -7,8 +7,8 @@ import SlideSelector from './SlideSelector';
 class KeyOverlay extends Component {
 	sliderOptions() {
 		return {
-			1: 'boethian',
-			2: 'qwerty',
+			1: 'qwerty',
+			2: 'boethian',
 			3: 'none'
 		}
 	}