import {UIElement} from "./UIElement"; import {UIEventSource} from "./UIEventSource"; import {VariableUiElement} from "./VariableUIElement"; import $ from "jquery" import {Imgur} from "../Logic/Imgur"; import {UserDetails} from "../Logic/OsmConnection"; import {DropDownUI} from "./DropDownUI"; export class ImageUploadFlow extends UIElement { private _licensePicker: UIElement; private _selectedLicence: UIEventSource; private _licenseExplanation: UIElement; private _isUploading: UIEventSource = new UIEventSource(0) private _uploadOptions: (license: string) => { title: string; description: string; handleURL: (url: string) => void; allDone: (() => void) }; private _userdetails: UIEventSource; constructor( userInfo: 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); const licensePicker = new DropDownUI("Jouw foto wordt gepubliceerd ", [ {value: "CC0", shown: "in het publiek domein"}, {value: "CC-BY-SA 4.0", shown: "onder een CC-BY-SA-licentie"}, {value: "CC-BY 4.0", shown: "onder een CC-BY-licentie"} ] ); this._licensePicker = licensePicker; this._selectedLicence = licensePicker.selectedElement; const licenseExplanations = { "CC-BY-SA 4.0": "Creative Commonse met naamsvermelding en gelijk delen
" + "Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden én ze afgeleide werken met deze licentie en attributie delen.", "CC-BY 4.0": "Creative Commonse met naamsvermelding
" + "Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden", "CC0": "Geen copyright
Je foto mag door iedereen voor alles gebruikt worden" } this._licenseExplanation = new VariableUiElement( this._selectedLicence.map((license) => { return licenseExplanations[license] }) ); } protected InnerRender(): string { if (!this._userdetails.data.loggedIn) { return "
Gelieve je aan te melden om een foto toe te voegen
"; } if (this._isUploading.data == 1) { return "Bezig met een foto te uploaden..." } if (this._isUploading.data > 0) { return "Bezig met uploaden, nog " + this._isUploading.data + " foto's te gaan..." } 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(); } ) } } } }