Commit | Line | Data |
---|---|---|
ed355f64 MS |
1 | /** |
2 | * Provides the media manager dialog for selecting media for Redactor editors. | |
3 | * | |
4 | * @author Matthias Schmidt | |
5 | * @copyright 2001-2021 WoltLab GmbH | |
6 | * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php> | |
7 | * @module WoltLabSuite/Core/Media/Manager/Editor | |
8 | */ | |
9 | ||
10 | import MediaManager from "./Base"; | |
11 | import * as Core from "../../Core"; | |
2a296d05 | 12 | import { Media, MediaInsertType, MediaManagerEditorOptions, MediaUploadSuccessEventData } from "../Data"; |
ed355f64 MS |
13 | import * as EventHandler from "../../Event/Handler"; |
14 | import * as DomTraverse from "../../Dom/Traverse"; | |
15 | import * as Language from "../../Language"; | |
16 | import * as UiDialog from "../../Ui/Dialog"; | |
17 | import * as Clipboard from "../../Controller/Clipboard"; | |
18 | import { OnDropPayload } from "../../Ui/Redactor/DragAndDrop"; | |
fbb238d9 | 19 | import DomUtil from "../../Dom/Util"; |
ed355f64 | 20 | |
fb628e67 | 21 | interface PasteFromClipboard { |
ed355f64 | 22 | blob: Blob; |
fb628e67 | 23 | } |
ed355f64 MS |
24 | |
25 | class MediaManagerEditor extends MediaManager<MediaManagerEditorOptions> { | |
26 | protected _activeButton; | |
27 | protected readonly _buttons: HTMLCollectionOf<HTMLElement>; | |
28 | protected _mediaToInsert: Map<number, Media>; | |
29 | protected _mediaToInsertByClipboard: boolean; | |
30 | protected _uploadData: OnDropPayload | PasteFromClipboard | null; | |
31 | protected _uploadId: number | null; | |
32 | ||
33 | constructor(options: Partial<MediaManagerEditorOptions>) { | |
34 | options = Core.extend( | |
35 | { | |
36 | callbackInsert: null, | |
37 | }, | |
38 | options, | |
39 | ); | |
40 | ||
41 | super(options); | |
42 | ||
43 | this._forceClipboard = true; | |
44 | this._activeButton = null; | |
45 | const context = this._options.editor ? this._options.editor.core.toolbar()[0] : undefined; | |
46 | this._buttons = (context || window.document).getElementsByClassName( | |
47 | this._options.buttonClass || "jsMediaEditorButton", | |
48 | ) as HTMLCollectionOf<HTMLElement>; | |
49 | Array.from(this._buttons).forEach((button) => { | |
50 | button.addEventListener("click", (ev) => this._click(ev)); | |
51 | }); | |
52 | this._mediaToInsert = new Map<number, Media>(); | |
53 | this._mediaToInsertByClipboard = false; | |
54 | this._uploadData = null; | |
55 | this._uploadId = null; | |
56 | ||
57 | if (this._options.editor && !this._options.editor.opts.woltlab.attachments) { | |
58 | const editorId = this._options.editor.$editor[0].dataset.elementId as string; | |
59 | ||
60 | const uuid1 = EventHandler.add("com.woltlab.wcf.redactor2", `dragAndDrop_${editorId}`, (data: OnDropPayload) => | |
61 | this._editorUpload(data), | |
62 | ); | |
63 | const uuid2 = EventHandler.add( | |
64 | "com.woltlab.wcf.redactor2", | |
65 | `pasteFromClipboard_${editorId}`, | |
66 | (data: OnDropPayload) => this._editorUpload(data), | |
67 | ); | |
68 | ||
69 | EventHandler.add("com.woltlab.wcf.redactor2", `destroy_${editorId}`, () => { | |
70 | EventHandler.remove("com.woltlab.wcf.redactor2", `dragAndDrop_${editorId}`, uuid1); | |
71 | EventHandler.remove("com.woltlab.wcf.redactor2", `dragAndDrop_${editorId}`, uuid2); | |
72 | }); | |
73 | ||
74 | EventHandler.add("com.woltlab.wcf.media.upload", "success", (data) => this._mediaUploaded(data)); | |
75 | } | |
76 | } | |
77 | ||
78 | protected _addButtonEventListeners(): void { | |
79 | super._addButtonEventListeners(); | |
80 | ||
81 | if (!this._mediaManagerMediaList) { | |
82 | return; | |
83 | } | |
84 | ||
85 | DomTraverse.childrenByTag(this._mediaManagerMediaList, "LI").forEach((listItem) => { | |
86 | const insertIcon = listItem.querySelector(".jsMediaInsertButton"); | |
87 | if (insertIcon) { | |
88 | insertIcon.classList.remove("jsMediaInsertButton"); | |
fbb238d9 | 89 | insertIcon.addEventListener("click", (ev) => this._openInsertDialog(ev)); |
ed355f64 MS |
90 | } |
91 | }); | |
92 | } | |
93 | ||
94 | /** | |
95 | * Builds the dialog to setup inserting media files. | |
96 | */ | |
97 | protected _buildInsertDialog(): void { | |
98 | let thumbnailOptions = ""; | |
99 | ||
100 | this._getThumbnailSizes().forEach((thumbnailSize) => { | |
101 | thumbnailOptions += | |
102 | '<option value="' + | |
103 | thumbnailSize + | |
104 | '">' + | |
105 | Language.get("wcf.media.insert.imageSize." + thumbnailSize) + | |
106 | "</option>"; | |
107 | }); | |
108 | thumbnailOptions += '<option value="original">' + Language.get("wcf.media.insert.imageSize.original") + "</option>"; | |
109 | ||
110 | const dialog = ` | |
111 | <div class="section"> | |
112 | <dl class="thumbnailSizeSelection"> | |
113 | <dt>${Language.get("wcf.media.insert.imageSize")}</dt> | |
114 | <dd> | |
115 | <select name="thumbnailSize"> | |
116 | ${thumbnailOptions} | |
117 | </select> | |
118 | </dd> | |
119 | </dl> | |
120 | </div> | |
121 | <div class="formSubmit"> | |
122 | <button class="buttonPrimary">${Language.get("wcf.global.button.insert")}</button> | |
123 | </div>`; | |
124 | ||
125 | UiDialog.open({ | |
126 | _dialogSetup: () => { | |
127 | return { | |
128 | id: this._getInsertDialogId(), | |
129 | options: { | |
fbb238d9 | 130 | onClose: () => this._editorClose(), |
ed355f64 MS |
131 | onSetup: (content) => { |
132 | content.querySelector(".buttonPrimary")!.addEventListener("click", (ev) => this._insertMedia(ev)); | |
133 | ||
fbb238d9 | 134 | DomUtil.show(content.querySelector(".thumbnailSizeSelection") as HTMLElement); |
ed355f64 MS |
135 | }, |
136 | title: Language.get("wcf.media.insert"), | |
137 | }, | |
138 | source: dialog, | |
139 | }; | |
140 | }, | |
141 | }); | |
142 | } | |
143 | ||
fbb238d9 | 144 | protected _click(event: Event): void { |
ed355f64 MS |
145 | this._activeButton = event.currentTarget; |
146 | ||
147 | super._click(event); | |
148 | } | |
149 | ||
150 | protected _dialogShow(): void { | |
151 | super._dialogShow(); | |
152 | ||
153 | // check if data needs to be uploaded | |
154 | if (this._uploadData) { | |
155 | const fileUploadData = this._uploadData as OnDropPayload; | |
156 | if (fileUploadData.file) { | |
157 | this._upload.uploadFile(fileUploadData.file); | |
158 | } else { | |
159 | const blobUploadData = this._uploadData as PasteFromClipboard; | |
160 | this._uploadId = this._upload.uploadBlob(blobUploadData.blob); | |
161 | } | |
162 | ||
163 | this._uploadData = null; | |
164 | } | |
165 | } | |
166 | ||
167 | /** | |
168 | * Handles pasting and dragging and dropping files into the editor. | |
169 | */ | |
170 | protected _editorUpload(data: OnDropPayload): void { | |
171 | this._uploadData = data; | |
172 | ||
173 | UiDialog.open(this); | |
174 | } | |
175 | ||
176 | /** | |
177 | * Returns the id of the insert dialog based on the media files to be inserted. | |
178 | */ | |
179 | protected _getInsertDialogId(): string { | |
fb628e67 | 180 | return ["mediaInsert", ...this._mediaToInsert.keys()].join("-"); |
ed355f64 MS |
181 | } |
182 | ||
183 | /** | |
184 | * Returns the supported thumbnail sizes (excluding `original`) for all media images to be inserted. | |
185 | */ | |
186 | protected _getThumbnailSizes(): string[] { | |
187 | return ["small", "medium", "large"] | |
188 | .map((size) => { | |
fb628e67 | 189 | const sizeSupported = Array.from(this._mediaToInsert.values()).every((media) => { |
fbb238d9 | 190 | return media[size + "ThumbnailType"] !== null; |
ed355f64 MS |
191 | }); |
192 | ||
fb628e67 | 193 | if (sizeSupported) { |
ed355f64 MS |
194 | return size; |
195 | } | |
196 | ||
197 | return null; | |
198 | }) | |
199 | .filter((s) => s !== null) as string[]; | |
200 | } | |
201 | ||
202 | /** | |
203 | * Inserts media files into the editor. | |
204 | */ | |
205 | protected _insertMedia(event?: Event | null, thumbnailSize?: string, closeEditor = false): void { | |
206 | if (closeEditor === undefined) closeEditor = true; | |
207 | ||
ed355f64 MS |
208 | // update insert options with selected values if method is called by clicking on 'insert' button |
209 | // in dialog | |
210 | if (event) { | |
211 | UiDialog.close(this._getInsertDialogId()); | |
212 | ||
213 | const dialogContent = (event.currentTarget as HTMLElement).closest(".dialogContent")!; | |
214 | const thumbnailSizeSelect = dialogContent.querySelector("select[name=thumbnailSize]") as HTMLSelectElement; | |
215 | thumbnailSize = thumbnailSizeSelect.value; | |
216 | } | |
217 | ||
218 | if (this._options.callbackInsert !== null) { | |
d1742bbe | 219 | this._options.callbackInsert(this._mediaToInsert, MediaInsertType.Separate, thumbnailSize); |
ed355f64 | 220 | } else { |
57324f3a | 221 | this._options.editor!.buffer.set(); |
d1742bbe MS |
222 | |
223 | this._mediaToInsert.forEach((media) => this._insertMediaItem(thumbnailSize, media)); | |
ed355f64 MS |
224 | } |
225 | ||
226 | if (this._mediaToInsertByClipboard) { | |
fbb238d9 | 227 | Clipboard.unmark("com.woltlab.wcf.media", Array.from(this._mediaToInsert.keys())); |
ed355f64 MS |
228 | } |
229 | ||
230 | this._mediaToInsert = new Map<number, Media>(); | |
231 | this._mediaToInsertByClipboard = false; | |
232 | ||
233 | // close manager dialog | |
234 | if (closeEditor) { | |
235 | UiDialog.close(this); | |
236 | } | |
237 | } | |
238 | ||
ed355f64 MS |
239 | /** |
240 | * Inserts a single media item into the editor. | |
241 | */ | |
d1742bbe | 242 | protected _insertMediaItem(thumbnailSize: string | undefined, media: Media): void { |
ed355f64 MS |
243 | if (media.isImage) { |
244 | let available = ""; | |
245 | ["small", "medium", "large", "original"].some((size) => { | |
246 | if (media[size + "ThumbnailHeight"] != 0) { | |
247 | available = size; | |
248 | ||
249 | if (thumbnailSize == size) { | |
250 | return true; | |
251 | } | |
252 | } | |
253 | ||
254 | return false; | |
255 | }); | |
256 | ||
257 | thumbnailSize = available; | |
258 | ||
259 | if (!thumbnailSize) { | |
260 | thumbnailSize = "original"; | |
261 | } | |
262 | ||
263 | let link = media.link; | |
264 | if (thumbnailSize !== "original") { | |
265 | link = media[thumbnailSize + "ThumbnailLink"]; | |
266 | } | |
267 | ||
268 | this._options.editor!.insert.html( | |
269 | `<img src="${link}" class="woltlabSuiteMedia" data-media-id="${media.mediaID}" data-media-size="${thumbnailSize}">`, | |
270 | ); | |
271 | } else { | |
272 | this._options.editor!.insert.text(`[wsm='${media.mediaID}'][/wsm]`); | |
273 | } | |
274 | } | |
275 | ||
276 | /** | |
277 | * Is called after media files are successfully uploaded to insert copied media. | |
278 | */ | |
279 | protected _mediaUploaded(data: MediaUploadSuccessEventData): void { | |
280 | if (this._uploadId !== null && this._upload === data.upload) { | |
281 | if ( | |
282 | this._uploadId === data.uploadId || | |
283 | (Array.isArray(this._uploadId) && this._uploadId.indexOf(data.uploadId) !== -1) | |
284 | ) { | |
285 | this._mediaToInsert = new Map<number, Media>(data.media.entries()); | |
286 | this._insertMedia(null, "medium", false); | |
287 | ||
288 | this._uploadId = null; | |
289 | } | |
290 | } | |
291 | } | |
292 | ||
293 | /** | |
294 | * Handles clicking on the insert button. | |
295 | */ | |
fbb238d9 | 296 | protected _openInsertDialog(event: Event): void { |
ed355f64 MS |
297 | const target = event.currentTarget as HTMLElement; |
298 | ||
299 | this.insertMedia([~~target.dataset.objectId!]); | |
300 | } | |
301 | ||
302 | /** | |
303 | * Is called to insert the media files with the given ids into an editor. | |
304 | */ | |
305 | public clipboardInsertMedia(mediaIds: number[]): void { | |
306 | this.insertMedia(mediaIds, true); | |
307 | } | |
308 | ||
309 | /** | |
310 | * Prepares insertion of the media files with the given ids. | |
311 | */ | |
312 | public insertMedia(mediaIds: number[], insertedByClipboard?: boolean): void { | |
313 | this._mediaToInsert = new Map<number, Media>(); | |
314 | this._mediaToInsertByClipboard = insertedByClipboard || false; | |
315 | ||
316 | // open the insert dialog if all media files are images | |
fbb238d9 MS |
317 | let imagesOnly = true; |
318 | mediaIds.forEach((mediaId) => { | |
319 | const media = this._media.get(mediaId)!; | |
ed355f64 MS |
320 | this._mediaToInsert.set(media.mediaID, media); |
321 | ||
322 | if (!media.isImage) { | |
323 | imagesOnly = false; | |
324 | } | |
fbb238d9 | 325 | }); |
ed355f64 MS |
326 | |
327 | if (imagesOnly) { | |
328 | const thumbnailSizes = this._getThumbnailSizes(); | |
329 | if (thumbnailSizes.length) { | |
330 | UiDialog.close(this); | |
331 | const dialogId = this._getInsertDialogId(); | |
332 | if (UiDialog.getDialog(dialogId)) { | |
333 | UiDialog.openStatic(dialogId, null); | |
334 | } else { | |
335 | this._buildInsertDialog(); | |
336 | } | |
337 | } else { | |
338 | this._insertMedia(undefined, "original"); | |
339 | } | |
340 | } else { | |
341 | this._insertMedia(); | |
342 | } | |
343 | } | |
344 | ||
345 | public getMode(): string { | |
346 | return "editor"; | |
347 | } | |
348 | ||
349 | public setupMediaElement(media: Media, mediaElement: HTMLElement): void { | |
350 | super.setupMediaElement(media, mediaElement); | |
351 | ||
352 | // add media insertion icon | |
353 | const buttons = mediaElement.querySelector("nav.buttonGroupNavigation > ul")!; | |
354 | ||
355 | const listItem = document.createElement("li"); | |
356 | listItem.className = "jsMediaInsertButton"; | |
fbb238d9 | 357 | listItem.dataset.objectId = media.mediaID.toString(); |
ed355f64 MS |
358 | buttons.appendChild(listItem); |
359 | ||
360 | listItem.innerHTML = ` | |
361 | <a> | |
362 | <span class="icon icon16 fa-plus jsTooltip" title="${Language.get("wcf.global.button.insert")}"></span> | |
363 | <span class="invisible">${Language.get("wcf.global.button.insert")}</span> | |
364 | </a>`; | |
365 | } | |
366 | } | |
367 | ||
368 | Core.enableLegacyInheritance(MediaManagerEditor); | |
369 | ||
370 | export = MediaManagerEditor; |