diff --git a/app/components/avo/index/table_row_component.html.erb b/app/components/avo/index/table_row_component.html.erb index a8d1951831..fe770fcf30 100644 --- a/app/components/avo/index/table_row_component.html.erb +++ b/app/components/avo/index/table_row_component.html.erb @@ -1,4 +1,4 @@ -<%# hover:z-[21] removed from tr class to solve flickering actions component on row controls and z-20 changed to z-21%> +<%# hover:z-[21] removed from tr class to solve flickering actions component on row controls and z-20 changed to z-21 %> <%= content_tag :tr, id: "#{self.class.to_s.underscore}_#{@resource.record_param}", @@ -10,7 +10,7 @@ record_id: @resource.record_param, **(click_row_to_view_record ? { visit_path: helpers.resource_show_path(resource: @resource, parent_resource: @parent_resource, parent_record: @parent_record, parent_or_child_resource:), - action: "click->table-row#visitRecord keydown.enter->table-row#visitRecord keydown.space->table-row#visitRecord" + action: "click->table-row#visitRecord keydown.enter->table-row#visitRecord keydown.space->table-row#visitRecord mouseenter->table-row#mouseEntered mouseleave->table-row#mouseLeft" } : {}), **item_selector_data_attributes(@resource, controller: class_names("table-row": click_row_to_view_record)), **(try(:drag_reorder_item_data_attributes) || {}), diff --git a/app/javascript/js/controllers/table_row_controller.js b/app/javascript/js/controllers/table_row_controller.js index 509f472dc7..ab3eecb3b1 100644 --- a/app/javascript/js/controllers/table_row_controller.js +++ b/app/javascript/js/controllers/table_row_controller.js @@ -6,6 +6,55 @@ export default class extends Controller { this.#bindSelectionEvents() } + // add another timer which starts on this method and stops on mouseleft method + mouseLeftTimer = null + + anchor = null + + debug = false + + startMouseLeftTimer() { + this.mouseLeftTimer = performance.now() + } + + stopMouseLeftTimer() { + this.mouseLeftTimer = performance.now() - this.mouseLeftTimer + console.log('time taken', this.mouseLeftTimer, 'milliseconds') + } + + mouseEntered(event) { + if (this.debug) { + console.log('mouseEntered') + this.startMouseLeftTimer() + } + const row = event.target.closest('tr') + const url = row.dataset.visitPath + + if (url) { + this.anchor = this.createAnchor(url) + this.anchor.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true })) + } + } + + mouseLeft() { + if (this.anchor) { + this.anchor.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true })) + } + if (this.debug) { + console.log('mouseLeft') + this.stopMouseLeftTimer() + } + } + + createAnchor(url) { + const anchor = document.createElement('a') + anchor.href = url + anchor.rel = 'noopener noreferrer' + document.body.appendChild(anchor) + + return anchor + } + visitRecord(event) { if (event.type !== 'click') { return