remove image range slider component to handle events in app

app/controllers/merged/images_controller.rb

@@ -32,7 +32,6 @@ module Merged
         mini.resize( "#{params[:scale]}%")
       else
         size = "#{params[:size_x]}x#{params[:size_y]}+#{params[:off_x]}+#{params[:off_y]}"
-        puts size
         mini.crop( size )
         message = "Image was resized"
       end

app/views/merged/images/_editor.haml

@@ -1,5 +1,3 @@
-= render "range_slider"
-
 
 %section.image
   .flex.justify-center
@@ -7,8 +5,11 @@
       %input{ hidden: true ,  id: :scale_id , name: :scale , "v-bind:value": "scale" }
       %button.mt-3.bg-cyan-200{class: button_classes , name: :type , value: 'scale'} Scale  {{scale}} %
 
-    %range-slider.mx-20.justify-self-start{"v-model":"scale" , ":min":20, ":max":100 ,
+    %div.justify-self-start.mx-20
-                ":step": "0.1"} Scale {{scaled_x}} x {{scaled_y}}
+      %b Scale {{scaled_x}} x {{scaled_y}}
+      %br/
+      %input{":min": 20 , ":max": 100 , ":step": 0.1 , :type => "range",
+              "v-bind:value": "scale" , "v-on:input" => "handle_scale($event)"}/
 
     = form_tag( merged.image_path , {method: :patch  } ) do
       %input{ hidden: true ,  id: :width_id , name: :size_x , "v-bind:value": "size_x" }
@@ -20,14 +21,28 @@
     %label Ratio {{ratio}} : 1
 
   .flex.justify-between
-    %range-slider.justify-self-start.horizontal{"v-model":"off_y" , ":min":0, ":max":"size_y" ,
+    %div.justify-self-start
-                ":step": "1"} Y Offset {{off_y}}
+      %b Y Offset {{off_y}}
-    %range-slider{"v-model":"off_x" , ":min":0, ":max":"#{image.height}" ,
+      %br/
-                ":step": "1"} X Offset {{off_x}}
+      %input.horizontal{":min": 0 , ":max": "#{image.height}", ":step": 1 , :type => "range",
-    %range-slider{"v-model":"size_x" , ":min":0, ":max":"#{image.width}" ,
+              "v-bind:value": "off_y" , "v-on:input" => "handle_off_y($event)"}/
-                ":step": "1"} X Size {{size_x}}
+    %div
-    %range-slider.justify-self-end.horizontal{"v-model":"size_y" , ":min":0, ":max":"#{image.height}" ,
+      %b X Offset {{off_x}}
-                ":step": "1"} Y Size {{size_y}}
+      %br/
+      %input{":min": 0 , ":max": "#{image.width}", ":step": 1 , :type => "range",
+              "v-bind:value": "off_x" , "v-on:input" => "handle_off_x($event)"}/
+
+    %div
+      %b X Size {{size_x}}
+      %br/
+      %input{":min": 0 , ":max": "#{image.width}", ":step": 1 , :type => "range",
+              "v-bind:value": "size_x" , "v-on:input" => "handle_size_x($event)"}/
+    %div.justify-self-end
+      %b Y Size {{size_y}}
+      %br/
+      %input.horizontal{":min": 0 , ":max": "#{image.height}", ":step": 1 , :type => "range",
+              "v-bind:value": "size_y" , "v-on:input" => "handle_size_y($event)"}/
+
   .flex.justify-center
     .image-container.overflow-hidden.relative{ "v-bind:style": "{height: scaled_y + 'px' , width: scaled_x + 'px'} " }
       = image_tag(image.asset_name , class: "")
@@ -46,6 +61,27 @@
       @size_x = @image_data[:width]
       @size_y = @image_data[:height]
     end
+    def handle_size_x(event)
+      value = event.target.value
+      @size_x = value.to_f
+    end
+    def handle_size_y(event)
+      value = event.target.value
+      @size_y = value.to_f
+    end
+    def handle_off_y(event)
+      value = event.target.value
+      @off_y = value.to_f
+    end
+    def handle_off_x(event)
+      value = event.target.value
+      @off_x = value.to_f
+    end
+    def handle_scale(event)
+      value = event.target.value
+      @scale = value.to_f
+    end
+
     def ratio
       ((@size_x / @size_y)*100).to_i / 100
     end
@@ -55,30 +91,4 @@
     def scaled_y
       (@initial_y * @scale / 100).to_i
     end
-    def filter_and_sort
-      dat = @image_data
-      if(@search_name.length > 0)
-        dat = dat.filter do |item|
-          return item["name"].toLowerCase().indexOf(@search_name) > -1
-        end
-      end
-      if(@search_tag.length > 0)
-        dat = dat.filter do |item|
-          return (item.tags.toLowerCase().indexOf(@search_tag) > -1)
-        end
-      end
-      dat = dat.slice().sort do |a, b| #a, b image data hashes
-        aa = a[@sort_by]
-        bb = b[@sort_by]
-        return (aa === bb ? 0 : (aa > bb ? 1 : -1) ) * @sort_dir
-      end
-      dat
-    end
-    def toggle_new()
-      if @show_new == true
-        @show_new = false
-      else
-        @show_new = true
-      end
-    end
   end

app/views/merged/images/_range_slider.haml

@@ -1,25 +0,0 @@
-%script{'type'=>"text/x-template", id: 'range-slider'}
-  .rangeslider
-    %slot
-      %b {{value}}
-    %br/
-    %input{":max" => "max", ":min" => "min_v", ":step" => "step_v", :type => "range", "v-bind:value" => "value", "v-on:input" => "handleValue($event)"}/
-
-:ruby2js
-  class RangeSlider < Vue
-    template "#range-slider"
-    props [:value , :max , :text , :min , :type , :step]
-
-    def initialize
-    end
-    def min_v
-      return (self.min == null) ? 0 : self.min
-    end
-    def step_v
-      return (self.min == null) ? 1 : self.step
-    end
-    def handleValue(event)
-      value = event.target.value
-      Vue.emit('input', parseFloat(value))
-    end
-  end

app/views/merged/images/show.haml

@@ -60,6 +60,6 @@
             =submit_button( "Delete" , true)
 
 :css
-  .horizontal input {
+  input.horizontal {
     transform:rotate(90deg);
   };