From ee157a18d1e9c952af8d32d7c0f741a1f36136f2 Mon Sep 17 00:00:00 2001 From: Torsten Date: Fri, 30 Dec 2022 15:27:27 +0200 Subject: [PATCH] remove image range slider component to handle events in app --- app/controllers/merged/images_controller.rb | 1 - app/views/merged/images/_editor.haml | 86 ++++++++++++--------- app/views/merged/images/_range_slider.haml | 25 ------ app/views/merged/images/show.haml | 2 +- 4 files changed, 49 insertions(+), 65 deletions(-) delete mode 100644 app/views/merged/images/_range_slider.haml diff --git a/app/controllers/merged/images_controller.rb b/app/controllers/merged/images_controller.rb index a23c1e7..2ba5f77 100644 --- a/app/controllers/merged/images_controller.rb +++ b/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 diff --git a/app/views/merged/images/_editor.haml b/app/views/merged/images/_editor.haml index 1566ba1..4b0bf7e 100644 --- a/app/views/merged/images/_editor.haml +++ b/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 , - ":step": "0.1"} Scale {{scaled_x}} x {{scaled_y}} + %div.justify-self-start.mx-20 + %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" , - ":step": "1"} Y Offset {{off_y}} - %range-slider{"v-model":"off_x" , ":min":0, ":max":"#{image.height}" , - ":step": "1"} X Offset {{off_x}} - %range-slider{"v-model":"size_x" , ":min":0, ":max":"#{image.width}" , - ":step": "1"} X Size {{size_x}} - %range-slider.justify-self-end.horizontal{"v-model":"size_y" , ":min":0, ":max":"#{image.height}" , - ":step": "1"} Y Size {{size_y}} + %div.justify-self-start + %b Y Offset {{off_y}} + %br/ + %input.horizontal{":min": 0 , ":max": "#{image.height}", ":step": 1 , :type => "range", + "v-bind:value": "off_y" , "v-on:input" => "handle_off_y($event)"}/ + %div + %b X Offset {{off_x}} + %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 diff --git a/app/views/merged/images/_range_slider.haml b/app/views/merged/images/_range_slider.haml deleted file mode 100644 index 33664dc..0000000 --- a/app/views/merged/images/_range_slider.haml +++ /dev/null @@ -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 diff --git a/app/views/merged/images/show.haml b/app/views/merged/images/show.haml index 5d62b62..63893c2 100644 --- a/app/views/merged/images/show.haml +++ b/app/views/merged/images/show.haml @@ -60,6 +60,6 @@ =submit_button( "Delete" , true) :css - .horizontal input { + input.horizontal { transform:rotate(90deg); };