Merge pull request #94 from Hamz1221/master

added playButton positions for slider

Author: Puredbest

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>

package.json

@@ -2,7 +2,7 @@
   "name": "@impvis/components",
 
 
-  "version": "1.4.7",
+  "version": "1.4.8",
 
 
 

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,19 +135,18 @@ export default {
             playButtonState: "Play",
             isPlaying: false,
             timer: null,
+            // playButtonPosition: this.playButtonPosition
         }
     },
     methods:{  
         update_val_button(e){
-            //console.log(e);
             this.value = e;
         },
         calc_ticks(){
             let tick_list = [];
             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();