From 5037f4797461649994068d97a8433b6cd793c523 Mon Sep 17 00:00:00 2001
From: Jesse Morgan <jesse@jesterpm.net>
Date: Fri, 18 Oct 2013 17:18:51 -0700
Subject: Making slider clickable.

This change enables you to click on the slider bar to move the slider.
---
 src/templates/templates/question-slider.ftl |  2 +-
 web/scripts/growth.js                       | 10 ++++++++++
 web/style.css                               | 14 ++++++++++++++
 3 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/templates/templates/question-slider.ftl b/src/templates/templates/question-slider.ftl
index 818511d..08b6bd0 100644
--- a/src/templates/templates/question-slider.ftl
+++ b/src/templates/templates/question-slider.ftl
@@ -8,7 +8,7 @@
 <p>Slide the slider to answer the question.</p>
 
 <div class="sliderQuestion question">
-    <div class="sliderbar"><img src="${staticRoot}/images/slider.png" class="slider" /></div>
+    <div class="sliderbar"><div class="slider noselect"></div></div>
     <div class="answers">
     <#list question.answers?keys as answerid>
         <div id="${answerid}" class="label">${question.answers[answerid].text}</div>
diff --git a/web/scripts/growth.js b/web/scripts/growth.js
index d4cee5b..5f5b273 100644
--- a/web/scripts/growth.js
+++ b/web/scripts/growth.js
@@ -10,6 +10,16 @@ $(document).ready(function()
             $("#answerField").val(value);
         }
     });
+    $('.sliderbar').mousedown(function(e) {
+        var left = $(this).offset().left;
+        var width = $(this).width();
+        proposed = Math.max(left, Math.min(e.pageX - 23, left + width - 46));
+        $(this).children('.slider').offset({left: proposed});
+
+        var range = width - 46;
+        var value = (proposed - left) / range;
+        $("#answerField").val(value);
+    });
 
     $('.quad .selector').draggable({
         containment:"parent",
diff --git a/web/style.css b/web/style.css
index 548fea9..ecad037 100644
--- a/web/style.css
+++ b/web/style.css
@@ -32,6 +32,15 @@ blockquote {
     font-style: italic;
 }
 
+.noselect {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 #notfooter {
     min-height: 100%;
     height: auto !important;
@@ -449,10 +458,15 @@ footer a:hover {
 
 .sliderbar {
     background: #E1E1E1;
+    height: 24px;
 }
 
 .sliderbar .slider {
     cursor: pointer;
+    background: url('/images/slider.png') no-repeat center center;
+    width: 46px;
+    height: 24px;
+    display: inline-block;
 }
 
 .quadQuestion {
-- 
cgit v1.2.3