|
1 | | -/** @odoo-module */ |
2 | | -import Widget from "web.Widget"; |
3 | | - |
4 | | -var active_attachment_index = 0; |
5 | | -var is_first_click = true; |
6 | | - |
7 | | -var AttachmentPreviewWidget = Widget.extend({ |
8 | | - template: "attachment_preview.AttachmentPreviewWidget", |
9 | | - activeIndex: 0, |
10 | | - |
11 | | - events: { |
12 | | - "click .attachment_preview_close": "_onCloseClick", |
13 | | - "click .attachment_preview_previous": "_onPreviousClick", |
14 | | - "click .attachment_preview_next": "_onNextClick", |
15 | | - "click .attachment_preview_popout": "_onPopoutClick", |
16 | | - }, |
17 | | - |
18 | | - start: function () { |
19 | | - // First_click = true; |
20 | | - var res = this._super.apply(this, arguments); |
21 | | - this.$overlay = $(".attachment_preview_overlay"); |
22 | | - this.$iframe = $(".attachment_preview_iframe"); |
23 | | - this.$current = $(".attachment_preview_current"); |
24 | | - return res; |
25 | | - }, |
26 | | - |
27 | | - _onCloseClick: function () { |
| 1 | +import {Component, onWillStart, useRef, useState} from "@odoo/owl"; |
| 2 | +import {ensureJQuery} from "@web/core/ensure_jquery"; |
| 3 | +import {sprintf} from "@web/core/utils/strings"; |
| 4 | + |
| 5 | +export class AttachmentPreviewWidget extends Component { |
| 6 | + static template = "attachment_preview.AttachmentPreviewWidget"; |
| 7 | + static props = {}; |
| 8 | + setup() { |
| 9 | + super.setup(); |
| 10 | + Component.env.bus.addEventListener( |
| 11 | + "open_attachment_preview", |
| 12 | + ({detail: {attachment_id, attachment_info_list}}) => |
| 13 | + this._onAttachmentPreview(attachment_id, attachment_info_list) |
| 14 | + ); |
| 15 | + Component.env.bus.addEventListener("hide_attachment_preview", this.hide); |
| 16 | + this.state = useState({activeIndex: 0}); |
| 17 | + this.currentRef = useRef("current"); |
| 18 | + this.iframeRef = useRef("iframe"); |
| 19 | + onWillStart(async () => { |
| 20 | + await ensureJQuery(); |
| 21 | + }); |
| 22 | + } |
| 23 | + |
| 24 | + _onCloseClick() { |
28 | 25 | this.hide(); |
29 | | - }, |
| 26 | + } |
30 | 27 |
|
31 | | - _onPreviousClick: function () { |
| 28 | + _onPreviousClick() { |
32 | 29 | this.previous(); |
33 | | - }, |
| 30 | + } |
34 | 31 |
|
35 | | - _onNextClick: function () { |
| 32 | + _onNextClick() { |
36 | 33 | this.next(); |
37 | | - }, |
| 34 | + } |
38 | 35 |
|
39 | | - _onPopoutClick: function () { |
40 | | - if (!this.attachments[this.activeIndex]) { |
41 | | - return; |
42 | | - } |
| 36 | + _onPopoutClick() { |
| 37 | + if (!this.attachments[this.state.activeIndex]) return; |
| 38 | + // eslint-disable-next-line no-undef |
| 39 | + window.open(this.attachments[this.state.activeIndex].previewUrl); |
| 40 | + } |
43 | 41 |
|
44 | | - window.open(this.attachments[this.activeIndex].previewUrl); |
45 | | - }, |
46 | | - |
47 | | - next: function () { |
48 | | - if (is_first_click) { |
49 | | - is_first_click = !is_first_click; |
50 | | - } |
51 | | - var index = this.activeIndex + 1; |
| 42 | + next() { |
| 43 | + var index = this.state.activeIndex + 1; |
52 | 44 | if (index >= this.attachments.length) { |
53 | 45 | index = 0; |
54 | 46 | } |
55 | | - this.activeIndex = index; |
| 47 | + this.state.activeIndex = index; |
56 | 48 | this.updatePaginator(); |
57 | 49 | this.loadPreview(); |
58 | | - }, |
| 50 | + } |
59 | 51 |
|
60 | | - previous: function () { |
61 | | - if (is_first_click) { |
62 | | - is_first_click = !is_first_click; |
63 | | - } |
64 | | - var index = this.activeIndex - 1; |
| 52 | + previous() { |
| 53 | + var index = this.state.activeIndex - 1; |
65 | 54 | if (index < 0) { |
66 | 55 | index = this.attachments.length - 1; |
67 | 56 | } |
68 | | - this.activeIndex = index; |
| 57 | + this.state.activeIndex = index; |
69 | 58 | this.updatePaginator(); |
70 | 59 | this.loadPreview(); |
71 | | - }, |
| 60 | + } |
72 | 61 |
|
73 | | - show: function () { |
74 | | - this.$el.removeClass("d-none"); |
75 | | - this.trigger("shown"); |
76 | | - }, |
| 62 | + show() { |
| 63 | + $(".attachment_preview_widget").removeClass("d-none"); |
| 64 | + } |
77 | 65 |
|
78 | | - hide: function () { |
79 | | - is_first_click = true; |
80 | | - this.$el.addClass("d-none"); |
81 | | - this.trigger("hidden"); |
82 | | - }, |
| 66 | + hide() { |
| 67 | + $(".attachment_preview_widget").addClass("d-none"); |
| 68 | + } |
83 | 69 |
|
84 | | - updatePaginator: function () { |
85 | | - var value = _.str.sprintf( |
| 70 | + updatePaginator() { |
| 71 | + var value = sprintf( |
86 | 72 | "%s / %s", |
87 | | - this.activeIndex + 1, |
| 73 | + this.state.activeIndex + 1, |
88 | 74 | this.attachments.length |
89 | 75 | ); |
90 | | - this.$overlay = $(".attachment_preview_overlay"); |
91 | | - this.$iframe = $(".attachment_preview_iframe"); |
92 | | - this.$current = $(".attachment_preview_current"); |
93 | | - this.$current.html(value); |
94 | | - }, |
| 76 | + $(this.currentRef.el).html(value); |
| 77 | + } |
95 | 78 |
|
96 | | - loadPreview: function () { |
| 79 | + loadPreview() { |
97 | 80 | if (this.attachments.length === 0) { |
98 | | - this.$iframe.attr("src", "about:blank"); |
| 81 | + $(this.iframeRef.el).attr("src", "about:blank"); |
99 | 82 | return; |
100 | 83 | } |
101 | | - |
102 | | - if (is_first_click) { |
103 | | - for (let i = 0; i < this.attachments.length; i++) { |
104 | | - if ( |
105 | | - parseInt(this.attachments[i].id, 10) === this.active_attachment_id |
106 | | - ) { |
107 | | - active_attachment_index = i; |
108 | | - is_first_click = false; |
109 | | - } |
| 84 | + var att = this.attachments[this.state.activeIndex]; |
| 85 | + $(this.iframeRef.el).attr("src", att.previewUrl); |
| 86 | + } |
| 87 | + |
| 88 | + setAttachments(attachments, active_attachment_id) { |
| 89 | + this.attachments = attachments; |
| 90 | + if (!attachments) return; |
| 91 | + for (let i = 0; i < attachments.length; ++i) { |
| 92 | + if (parseInt(attachments[i].id, 10) === active_attachment_id) { |
| 93 | + this.state.activeIndex = i; |
110 | 94 | } |
111 | | - } else { |
112 | | - active_attachment_index = this.activeIndex; |
113 | 95 | } |
| 96 | + this.updatePaginator(); |
| 97 | + this.loadPreview(); |
| 98 | + } |
114 | 99 |
|
115 | | - var att = this.attachments[active_attachment_index]; |
116 | | - this.$iframe.attr("src", att.previewUrl); |
117 | | - }, |
118 | | - |
119 | | - setAttachments: function (attachments, active_attachment_id, first_click) { |
120 | | - is_first_click = first_click; |
121 | | - |
122 | | - if (active_attachment_id) { |
123 | | - this.active_attachment_id = active_attachment_id; |
124 | | - } |
125 | | - if (attachments) { |
126 | | - this.attachments = attachments; |
127 | | - this.activeIndex = 0; |
128 | | - this.updatePaginator(); |
129 | | - this.loadPreview(); |
130 | | - } |
131 | | - }, |
132 | | -}); |
133 | | - |
134 | | -export default AttachmentPreviewWidget; |
| 100 | + _onAttachmentPreview(attachment_id, attachment_info_list) { |
| 101 | + this.setAttachments(attachment_info_list, attachment_id); |
| 102 | + this.show(); |
| 103 | + } |
| 104 | +} |
0 commit comments