import {UIElement} from "./UIElement"; import {UIEventSource} from "./UIEventSource"; import $ from "jquery" import {Imgur} from "../Logic/Imgur"; import {UserDetails} from "../Logic/OsmConnection"; import {DropDown} from "./Input/DropDown"; import {VariableUiElement} from "./Base/VariableUIElement"; import Translations from "./i18n/Translations"; export class ImageUploadFlow extends UIElement { private _licensePicker: UIElement; private _selectedLicence: UIEventSource; private _isUploading: UIEventSource = new UIEventSource(0) private _didFail: UIEventSource = new UIEventSource(false); private _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) }; private _userdetails: UIEventSource; constructor( userInfo: UIEventSource, preferedLicense: UIEventSource, uploadOptions: ((license: string) => { title: string, description: string, handleURL: ((url: string) => void), allDone: (() => void) }) ) { super(undefined); this._userdetails = userInfo; this.ListenTo(userInfo); this._uploadOptions = uploadOptions; this.ListenTo(this._isUploading); this.ListenTo(this._didFail); const licensePicker = new DropDown(Translations.t.image.willBePublished, [ {value: "CC0", shown: Translations.t.image.cco}, {value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs}, {value: "CC-BY 4.0", shown: Translations.t.image.ccb} ], preferedLicense ); this._licensePicker = licensePicker; this._selectedLicence = licensePicker.GetValue(); } InnerRender(): string { if (!this._userdetails.data.loggedIn) { return `
${Translations.t.image.pleaseLogin.Render()}
`; } let uploadingMessage = ""; if (this._isUploading.data == 1) { return `${Translations.t.image.uploadingPicture.Render()}` } if (this._isUploading.data > 0) { uploadingMessage = "Uploading multiple pictures, " + this._isUploading.data + " left..." } if(this._didFail.data){ uploadingMessage += "Some images failed to upload. Imgur migth be down or you might block third-party API's (e.g. by using Brave or UMatrix)
" } return "" + "
" + "" + "" + "
" ; } InnerUpdate(htmlElement: HTMLElement) { super.InnerUpdate(htmlElement); const user = this._userdetails.data; htmlElement.onclick = function () { if (!user.loggedIn) { user.osmConnection.AttemptLogin(); } } this._licensePicker.Update(); const selector = document.getElementById('fileselector-' + this.id); const self = this; if (selector != null) { selector.onchange = function () { const files = $(this).get(0).files; self._isUploading.setData(files.length); const opts = self._uploadOptions(self._selectedLicence.data); Imgur.uploadMultiple(opts.title, opts.description, files, function (url) { console.log("File saved at", url); self._isUploading.setData(self._isUploading.data - 1); opts.handleURL(url); }, function () { console.log("All uploads completed") opts.allDone(); }, function(failReason) { },0 ) } } } }