Fixed issue #12021: Have a real rtl slider

Dev: update to boostrap-slider v9.6.0 Dev: Add default bs-slider.css and fix it in question package Dev: for color : only template.css
LimeSurvey · Jan 4, 2017 · a572175 · a572175
1 parent 8c7de7c
commit a572175
Show file tree

Hide file tree

Showing 11 changed files with 490 additions and 340 deletions.
diff --git a/application/config/third_party.php b/application/config/third_party.php
@@ -46,10 +46,15 @@
     // bootstrap-slider : for multinumeric with slider
     'bootstrap-slider' => array(
         'basePath' => 'third_party.bootstrap-slider',
+        'css'=> array(
+            'css/bootstrap-slider'.$minVersion.'.css'
+        ),
         'js' => array(
-            'bootstrap-slider.min.js'
+            'bootstrap-slider'.$minVersion.'.js'
         ),
-        /* according to readme : JQuery is optional and the plugin can operate with or without it. boostrap must be loaded for css only */
+        'depends' => array(
+            'jquery',
+        )
     ),
 
     'fontawesome' => array(

diff --git a/application/core/packages/questions/numeric-slider/numeric-slider.css b/application/core/packages/questions/numeric-slider/numeric-slider.css
@@ -1,180 +1,11 @@
 /* This file is part of LimeSurvey - http://www.limesurvey.org */
-/**
- * Based on bootstrap-slider.css
- * @licence apache
- * @author Stefan Petre
- * @author Kyle Kemp (seiyria)
- * @author Rohit Kalkur 'rovolution)
 
-/**
-* Slider custom handle
-*/
-
-.slider {
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
-}
+/* reset the width of slider horizontal */
 .slider.slider-horizontal {
   width: 100%;
-  height: 20px;
-}
-.slider.slider-horizontal .slider-track {
-  height: 10px;
-  width: 100%;
-  margin-top: -5px;
-  top: 50%;
-  left: 0;
-}
-.slider.slider-horizontal .slider-selection,
-.slider.slider-horizontal .slider-track-low,
-.slider.slider-horizontal .slider-track-high {
-  height: 100%;
-  top: 0;
-  bottom: 0;
-}
-.slider.slider-horizontal .slider-tick,
-.slider.slider-horizontal .slider-handle {
-  margin-left: -10px;
-}
-.slider.slider-horizontal .slider-tick.triangle,
-.slider.slider-horizontal .slider-handle.triangle {
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-  border-width: 0 10px 10px 10px;
-  width: 0;
-  height: 0;
-  border-bottom-color: #0480be;
-  margin-top: 0;
-}
-.slider.slider-horizontal .slider-tick-container {
-  white-space: nowrap;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-.slider.slider-horizontal .slider-tick-label-container {
-  white-space: nowrap;
-  margin-top: 20px;
-}
-.slider.slider-horizontal .slider-tick-label-container .slider-tick-label {
-  padding-top: 4px;
-  display: inline-block;
-  text-align: center;
-}
-.slider.slider-vertical {
-  height: 210px;
-  width: 20px;
-}
-.slider.slider-vertical .slider-track {
-  width: 10px;
-  height: 100%;
-  left: 25%;
-  top: 0;
-}
-.slider.slider-vertical .slider-selection {
-  width: 100%;
-  left: 0;
-  top: 0;
-  bottom: 0;
-}
-.slider.slider-vertical .slider-track-low,
-.slider.slider-vertical .slider-track-high {
-  width: 100%;
-  left: 0;
-  right: 0;
-}
-.slider.slider-vertical .slider-tick,
-.slider.slider-vertical .slider-handle {
-  margin-top: -10px;
-}
-.slider.slider-vertical .slider-tick.triangle,
-.slider.slider-vertical .slider-handle.triangle {
-  border-width: 10px 0 10px 10px;
-  width: 1px;
-  height: 1px;
-  border-left-color: #0480be;
-  margin-left: 0;
-}
-.slider.slider-vertical .slider-tick-label-container {
-  white-space: nowrap;
-}
-.slider.slider-vertical .slider-tick-label-container .slider-tick-label {
-  padding-left: 4px;
-}
-.slider.slider-disabled .slider-handle {
-  background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
-  background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
-  background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
-  background-repeat: repeat-x;
 }
-.slider.slider-disabled .slider-track {
-  background-image: -webkit-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
-  background-image: -o-linear-gradient(top, #e5e5e5 0%, #e9e9e9 100%);
-  background-image: linear-gradient(to bottom, #e5e5e5 0%, #e9e9e9 100%);
-  background-repeat: repeat-x;
-  cursor: not-allowed;
-}
-.slider input {
-  display: none;
-}
-.slider .tooltip.top {
-  margin-top: -36px;
-}
-.slider .tooltip-inner {
-  white-space: nowrap;
-  max-width: none;
-}
-.slider .hide {
-  display: none;
-}
-.slider-track {
-  position: absolute;
-  cursor: pointer;
-  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
-  background-image: -o-linear-gradient(top, #f5f5f5 0%, #f9f9f9 100%);
-  background-image: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
-  background-repeat: repeat-x;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
-}
-.slider-selection {
-  position: absolute;
-  background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
-  background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
-  background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
-  background-repeat: repeat-x;
-  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  border-radius: 4px;
-}
-.slider-selection.tick-slider-selection {
-  background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%);
-  background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%);
-  background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%);
-  background-repeat: repeat-x;
-}
-.slider-track-low,
-.slider-track-high {
-  position: absolute;
-  background: transparent;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  border-radius: 4px;
-}
-/* Adding a backgrond image, don't touch on default bd-info color */
+/* Use a transparent background-image (more easy for user to update background-color only */
 .slider-handle {
-  position: absolute;
-  top: 0;
-  width: 20px;
-  height: 20px;
   background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
   background-image: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0.3)), color-stop(100%, rgba(255,255,255,0)));
   background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
@@ -183,70 +14,11 @@
   background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
   -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
   box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-  border: 0px solid transparent;
-}
-.slider-handle.round {
-  border-radius: 50%;
-  background-image: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
-  background-image: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,0.3)), color-stop(100%, rgba(255,255,255,0)));
-  background-image: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
-  background-image: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
-  background-image: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
-  background-image: radial-gradient(ellipse at center, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
-}
-.slider-handle.triangle {
-  background: transparent none;
-}
-.slider-handle.custom {
-  background: transparent none;
 }
+/* FA for custom */
 .slider-handle.custom::before {
-  line-height: 20px;
-  font-size: 20px;
-  font-family: FontAwesome;
-  content: '\f1ae';  /*Set by javascript ;*/;
-}
-.slider-tick {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  background-image: -webkit-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
-  background-image: -o-linear-gradient(top, #f9f9f9 0%, #f5f5f5 100%);
-  background-image: linear-gradient(to bottom, #f9f9f9 0%, #f5f5f5 100%);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff9f9f9', endColorstr='#fff5f5f5', GradientType=0);
-  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  opacity: 0.8;
-  border: 0px solid transparent;
-}
-.slider-tick.round {
-  border-radius: 50%;
-}
-.slider-tick.triangle {
-  background: transparent none;
-}
-.slider-tick.custom {
-  background: transparent none;
+font-family: FontAwesome;
 }
-.slider-tick.custom::before {
-  line-height: 20px;
-  font-size: 20px;
-  content: '\2605';
-  color: #726204;
-}
-.slider-tick.in-selection {
-  background-image: -webkit-linear-gradient(top, #89cdef 0%, #81bfde 100%);
-  background-image: -o-linear-gradient(top, #89cdef 0%, #81bfde 100%);
-  background-image: linear-gradient(to bottom, #89cdef 0%, #81bfde 100%);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff89cdef', endColorstr='#ff81bfde', GradientType=0);
-  opacity: 1;
-}
-
 /* Add some margin for the tooltip */
 /* same line */
 .slider-list .slider-container{margin-top:2em}
@@ -257,7 +29,7 @@
 .slider-list .slider-item .control-label{margin-top:2em}
 .slider-list .slider-left,.slider-list .slider-right {margin-top: 2em;}
 }
-}
+
  /* different line */
 .slider-list .slider-item .control-label.col-sm-12{margin-top:0.5em;margin-bottom: 2em;}
 .slider-list .slider-item .col-sm-12 .ls-input-group{margin-top:0.5em;margin-bottom: 2em;}

diff --git a/application/core/packages/questions/numeric-slider/numeric-slider.js b/application/core/packages/questions/numeric-slider/numeric-slider.js
@@ -28,8 +28,6 @@ function doNumericSlider(qID,options) {
               return prefix + displayValue + suffix;
           }
       });
-      /* Put some color taken from default boostrap file : allow user to more easily update it*/
-      $(this).find(".slider-handle").addClass("bg-primary");// bg-info is not dark enough
       /* If dispVal is not set : move to this : but don't set value : event is set to false,false */
       if(dispVal===''){
         $('#javatbd' + myfname).find('div.tooltip').hide();
@@ -47,10 +45,9 @@ function doNumericSlider(qID,options) {
           $(inputEl).val(displayValue); // We parse it to the element
       });
       theSlider.on('change', function(event) {
+        // Don't we need to update too ?
       });
       theSlider.on('slideStop', function(event) {
-          console.log(separator);
-          console.log(event.value.toString().replace('.',separator));
           $(inputEl).val(event.value.toString().replace('.',separator)).trigger('keyup');// We call the EM by the event
       });
 

diff --git a/application/helpers/qanda_helper.php b/application/helpers/qanda_helper.php
@@ -3073,7 +3073,7 @@ function do_multiplenumeric($ia)
         }else{
             $slider_reversed = 'false';
         }
-		
+
     }
     else
     {
@@ -3340,7 +3340,7 @@ function do_multiplenumeric($ia)
         App()->getClientScript()->registerScript("sliderTranslation","var sliderTranslation=".json_encode($sliderTranslation).";\n",CClientScript::POS_HEAD);
         App()->getClientScript()->registerPackage("question-numeric-slider");
         if($slider_handle == 'custom'){/* unsure we still need it : in aJsonOptions : must choose the best */
-            App()->getClientScript()->registerCss("cssNumericSlider{$ia[0]}","#question{$ia[0]} .slider-handle.custom::before{ content: '\\{$slider_custom_handle}}';");
+            App()->getClientScript()->registerCss("cssNumericSlider{$ia[0]}","#question{$ia[0]} .slider-handle.custom::before{ content: '\\{$slider_custom_handle}'};");
         }
         $aJsonOptions=json_encode(array(
             'slider_custom_handle'=>$slider_custom_handle

diff --git a/application/views/survey/questions/answer/multiplenumeric/rows/sliders/answer_row.php b/application/views/survey/questions/answer/multiplenumeric/rows/sliders/answer_row.php
@@ -63,8 +63,8 @@
                 ));
                 ?>
                 <?php if($slider_showminmax): ?>
-                    <div class='pull-<?php echo getLanguageRTL(App()->language) ? 'right' : 'left'; ?> help-block'><?php echo $slider_reversed == 'false' ? $slider_min : $slider_max; ?></div>
-                    <div class='pull-<?php echo getLanguageRTL(App()->language) ? 'left' : 'right'; ?> help-block'><?php echo $slider_reversed == 'false' ? $slider_max : $slider_min; ?></div>
+                    <div class='pull-left help-block'><?php echo $slider_reversed == 'false' ? $slider_min : $slider_max; ?></div>
+                    <div class='pull-right help-block'><?php echo $slider_reversed == 'false' ? $slider_max : $slider_min; ?></div>
                 <?php endif; ?>
                 <?php if ($slider_reset): ?>
                     <div class="ls-input-group-extra ls-no-js-hidden ls-input-group-reset">

diff --git a/templates/default/css/template.css b/templates/default/css/template.css
@@ -209,6 +209,28 @@ padding-top:1em;padding-bottom:1em;margin-bottom:2em;
 .js td.radio-item,.js td.checkbox-item{
     cursor: pointer;
 }
+/* slider : take bg-primary color */
+.bg-primary {
+  background-color: #2c3e50;
+}
+.slider.slider-horizontal .slider-tick.triangle,
+.slider.slider-horizontal .slider-handle.triangle {
+  border-bottom-color: #2c3e50;
+}
+.slider.slider-vertical .slider-tick.triangle,
+.slider.slider-vertical .slider-handle.triangle {
+  border-left-color: #2c3e50;
+  border-right-color: #2c3e50;
+}
+.slider-handle {
+  background-color: #2c3e50;
+}
+.slider-handle.custom::before {
+  color: #2c3e50;
+}
+.slider-tick.custom::before {
+  color: #2c3e50;
+}
 /* Show more the heading in table */
 .ls-answers .ls-heading th{font-weight:700}
 /* Max width for some answer part */