overview
1 year ago
campaign_builder_controller.js
1 year ago
chart_controller.js
2 months ago
chart_interval_controller.js
2 years ago
clipboard_controller.js
1 year ago
copy_report_controller.js
2 years ago
create_report_controller.js
1 year ago
delete_data_controller.js
1 year ago
delete_report_controller.js
2 years ago
easepick_controller.js
2 years ago
examiner_controller.js
2 months ago
examiner_header_controller.js
11 months ago
export_overview_controller.js
9 months ago
export_reports_controller.js
2 years ago
filters_controller.js
6 months ago
group_controller.js
2 years ago
import_reports_controller.js
2 years ago
journey_controller.js
6 months ago
map_controller.js
9 months ago
migration_redirect_controller.js
2 years ago
modal_controller.js
2 years ago
pause_emails_controller.js
6 months ago
pie_chart_controller.js
6 months ago
plugin_group_options_controller.js
1 year ago
pruner_controller.js
5 months ago
quick_stats_controller.js
1 year ago
real_time_controller.js
6 months ago
refresh_overview_controller.js
1 year ago
rename_report_controller.js
2 years ago
report_controller.js
2 months ago
reset_analytics_controller.js
1 year ago
reset_overview_controller.js
1 year ago
save_report_controller.js
2 years ago
select_input_controller.js
2 years ago
set_favorite_report_controller.js
2 years ago
sort_controller.js
2 years ago
sortable_reports_controller.js
2 years ago
table_columns_controller.js
2 years ago
tooltip_controller.js
6 months ago
woocommerce_settings_controller.js
1 year ago
journey_controller.js
100 lines
| 1 | import { Controller } from "@hotwired/stimulus"; |
| 2 | |
| 3 | export default class extends Controller { |
| 4 | static targets = ["journey"]; |
| 5 | static values = { |
| 6 | sessionId: Number, |
| 7 | }; |
| 8 | |
| 9 | hasTimelineHtml = false; |
| 10 | isFetching = false; |
| 11 | scrollOnLoad = false; |
| 12 | |
| 13 | connect() { |
| 14 | this.initializeHighlighting(); |
| 15 | } |
| 16 | |
| 17 | toggleTimeline() { |
| 18 | const isVisible = this.journeyTarget.classList.contains("visible"); |
| 19 | |
| 20 | if (isVisible) { |
| 21 | this.hideTimeline(); |
| 22 | } else { |
| 23 | this.showTimeline(); |
| 24 | } |
| 25 | } |
| 26 | |
| 27 | showTimeline() { |
| 28 | this.fetchTimelineHtml(); |
| 29 | this.element.classList.add("timeline-visible"); |
| 30 | this.journeyTarget.classList.add("visible"); |
| 31 | // requestAnimationFrame(() => { |
| 32 | // this.element.scrollIntoView(false) |
| 33 | // }) |
| 34 | } |
| 35 | |
| 36 | hideTimeline() { |
| 37 | this.element.classList.remove("timeline-visible"); |
| 38 | this.journeyTarget.classList.remove("visible"); |
| 39 | } |
| 40 | |
| 41 | fetchTimelineHtml() { |
| 42 | if (this.hasTimelineHtml || this.isFetching) { |
| 43 | return; |
| 44 | } |
| 45 | |
| 46 | const data = { |
| 47 | ...iawpActions.get_journey_timeline, |
| 48 | session_id: this.sessionIdValue, |
| 49 | }; |
| 50 | |
| 51 | this.isFetching = true; |
| 52 | this.element.classList.add("loading-timeline"); |
| 53 | |
| 54 | jQuery |
| 55 | .post(ajaxurl, data, (response) => { |
| 56 | this.isFetching = false; |
| 57 | this.element.classList.remove("loading-timeline"); |
| 58 | this.handleFetchSuccess(response); |
| 59 | if (this.scrollOnLoad) { |
| 60 | this.scrollOnLoad = false; |
| 61 | requestAnimationFrame(() => { |
| 62 | this.element.scrollIntoView(false); |
| 63 | }); |
| 64 | } |
| 65 | }) |
| 66 | .fail(() => { |
| 67 | this.isFetching = false; |
| 68 | this.element.classList.remove("loading-timeline"); |
| 69 | this.handleFetchFailure(); |
| 70 | }); |
| 71 | } |
| 72 | |
| 73 | handleFetchSuccess(response) { |
| 74 | const timelineDocument = new DOMParser().parseFromString(response.data.html, "text/html"); |
| 75 | const timelineElement = timelineDocument.body.firstElementChild; |
| 76 | |
| 77 | this.hasTimelineHtml = true; |
| 78 | this.journeyTarget.replaceChildren(timelineElement); |
| 79 | } |
| 80 | |
| 81 | handleFetchFailure() { |
| 82 | // ... |
| 83 | } |
| 84 | |
| 85 | initializeHighlighting() { |
| 86 | const match = this.element.closest(`[data-session-to-highlight="${this.sessionIdValue}"]`); |
| 87 | |
| 88 | if (!match) { |
| 89 | return; |
| 90 | } |
| 91 | |
| 92 | this.scrollOnLoad = true; |
| 93 | this.showTimeline(); |
| 94 | |
| 95 | requestAnimationFrame(() => { |
| 96 | this.element.scrollIntoView(false); |
| 97 | }); |
| 98 | } |
| 99 | } |
| 100 |