From 79c84981e7374e7e5b2c59a94b6d6f36bd0a65de Mon Sep 17 00:00:00 2001
From: Hamzah <h4mz1221@gmail.com>
Date: Mon, 19 Jul 2021 11:56:26 +0100
Subject: [PATCH] added playButton positions for slider

---
 Template/App.vue                 |  2 +-
 package.json                     |  2 +-
 src/components/Slider/Slider.vue | 20 ++++++++++++++++----
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/Template/App.vue b/Template/App.vue
index 5891b03..a76b077 100644
--- a/Template/App.vue
+++ b/Template/App.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <iv-DraggableDiv idName="Control Panel 1">
-            <iv-slider :min="0" :max="6" :step="1" @sliderChanged="sliderChanged"></iv-slider>
+            <iv-slider :min="0" :max="6" :step="1" @sliderChanged="sliderChanged" playButton></iv-slider>
             <iv-toggle-basic :resetCapability="true"> </iv-toggle-basic>
             <iv-toggle-advance :width=ToggleWidth :modes=ModeNames></iv-toggle-advance>
             <iv-reset-button> Reset </iv-reset-button>
diff --git a/package.json b/package.json
index ea2cb7e..33b9f00 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@impvis/components",
   
-  "version": "1.4.4",
+  "version": "1.4.8",
 
 
   "license": "BSD-3-Clause",
diff --git a/src/components/Slider/Slider.vue b/src/components/Slider/Slider.vue
index 936c090..2367e39 100644
--- a/src/components/Slider/Slider.vue
+++ b/src/components/Slider/Slider.vue
@@ -6,14 +6,16 @@
             <input type="range" :style="cssColor" :class="[(playSlider)? 'iv-range-play' : 'iv-range']"  v-model.number="value" :min="min" :max="max" :step="step" @mousedown="startDrag"  @mousemove="emitSlider" @mouseup="stopDrag" @change="emitSliderAgain">
             <iv-line-ticks v-if="lineTick" :sliderTicksList="tick_list" :thumb_width="thumb_width" :min="min" :max="max" :key="tick_line_key" />
             <iv-num-ticks v-if="numTick" :sliderTicksList="tick_list" :thumb_width="thumb_width" :min="min" :max="max" :key="tick_num_key"/>
-            <iv-button v-if="resetButton" style="height:100%" @click="reset">Reset</iv-button>
-            <iv-button v-if="playButton" style="height:100%" @click="togglePlay">
+            <iv-button id="resetButton" v-if="resetButton" style="height:100%;" @click="reset">Reset</iv-button>
+            <div  style="text-align:center;">
+            <iv-button id="playButton" v-if="playButton" @click="togglePlay">
                 <span v-if="isPlaying">Pause</span>
                 <span v-if="!isPlaying">
                     <span v-if="value>=max">Reset</span>
                     <span v-else>Play</span>
                     </span>
                 </iv-button>
+                </div>
         </div>
         <iv-input-button v-if="sliderButtons" :sliderValue="value" :playSlider="playSlider" :buttonInput="buttonInput" :min="min" :max="max" :button_step_init="button_step_init" @inputButtonClicked="update_val_button"/>
     </div>
@@ -108,6 +110,12 @@ export default {
         time_step: {
             type: Number,
             default: 100,
+        },
+        playButtonPosition:{
+            type: String,
+            required: false,
+            default: "left",
+
         }
     },
     data(){
@@ -127,11 +135,11 @@ export default {
             playButtonState: "Play",
             isPlaying: false,
             timer: null,
+            // playButtonPosition: this.playButtonPosition
         }
     },
     methods:{  
         update_val_button(e){
-            //console.log(e);
             this.value = e;
         },
         calc_ticks(){
@@ -139,7 +147,6 @@ export default {
             for(let i=this.min; i <= this.max; i+=this.tick_step){
                 tick_list.push({id: this.id.toString() + "_" + i.toString(), value: i.toFixed(this.tick_decimals)});
             }
-            console.log(tick_list)
             return tick_list
         },
         startDrag(){
@@ -187,6 +194,11 @@ export default {
     },
 
     mounted () {
+        let play = document.getElementById("playButton");
+        if(["left", "right"].includes(this.playButtonPosition)){
+        play.style["float"] = this.playButtonPosition;
+        }
+        
         this.id = this._uid;
         //this.min_step_size();
         this.tick_list = this.calc_ticks();