108 lines
5.1 KiB
JavaScript
108 lines
5.1 KiB
JavaScript
"use strict";
|
|
var __extends = (this && this.__extends) || (function () {
|
|
var extendStatics = function (d, b) {
|
|
extendStatics = Object.setPrototypeOf ||
|
|
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
|
|
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
|
|
return extendStatics(d, b);
|
|
};
|
|
return function (d, b) {
|
|
extendStatics(d, b);
|
|
function __() { this.constructor = d; }
|
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
};
|
|
})();
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.ImageUploadFlow = void 0;
|
|
var UIElement_1 = require("./UIElement");
|
|
var UIEventSource_1 = require("./UIEventSource");
|
|
var jquery_1 = require("jquery");
|
|
var Imgur_1 = require("../Logic/Imgur");
|
|
var DropDown_1 = require("./Input/DropDown");
|
|
var VariableUIElement_1 = require("./Base/VariableUIElement");
|
|
var ImageUploadFlow = /** @class */ (function (_super) {
|
|
__extends(ImageUploadFlow, _super);
|
|
function ImageUploadFlow(userInfo, preferedLicense, uploadOptions) {
|
|
var _this = _super.call(this, undefined) || this;
|
|
_this._isUploading = new UIEventSource_1.UIEventSource(0);
|
|
_this._userdetails = userInfo;
|
|
_this.ListenTo(userInfo);
|
|
_this._uploadOptions = uploadOptions;
|
|
_this.ListenTo(_this._isUploading);
|
|
var licensePicker = new DropDown_1.DropDown("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" }
|
|
], preferedLicense);
|
|
_this._licensePicker = licensePicker;
|
|
_this._selectedLicence = licensePicker.selectedElement;
|
|
var licenseExplanations = {
|
|
"CC-BY-SA 4.0": "<b>Creative Commonse met naamsvermelding en gelijk delen</b><br/>" +
|
|
"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": "<b>Creative Commonse met naamsvermelding</b> <br/>" +
|
|
"Je foto mag door iedereen gratis gebruikt worden, als ze je naam vermelden",
|
|
"CC0": "<b>Geen copyright</b><br/> Je foto mag door iedereen voor alles gebruikt worden"
|
|
};
|
|
_this._licenseExplanation = new VariableUIElement_1.VariableUiElement(_this._selectedLicence.map(function (license) {
|
|
return licenseExplanations[license];
|
|
}));
|
|
return _this;
|
|
}
|
|
ImageUploadFlow.prototype.InnerRender = function () {
|
|
if (!this._userdetails.data.loggedIn) {
|
|
return "<div class='activate-osm-authentication'>Gelieve je aan te melden om een foto toe te voegen of vragen te beantwoorden</div>";
|
|
}
|
|
if (this._isUploading.data == 1) {
|
|
return "<b>Bezig met een foto te uploaden...</b>";
|
|
}
|
|
if (this._isUploading.data > 0) {
|
|
return "<b>Bezig met uploaden, nog " + this._isUploading.data + " foto's te gaan...</b>";
|
|
}
|
|
return "" +
|
|
"<div class='imageflow'>" +
|
|
"<label for='fileselector-" + this.id + "'>" +
|
|
"<div class='imageflow-file-input-wrapper'>" +
|
|
"<img src='./assets/camera-plus.svg' alt='upload image'/> " +
|
|
"<span class='imageflow-add-picture'>Voeg foto toe</span>" +
|
|
"<div class='break'></div>" +
|
|
"</div>" +
|
|
this._licensePicker.Render() +
|
|
"</label>" +
|
|
"<input id='fileselector-" + this.id + "' " +
|
|
"type='file' " +
|
|
"class='imageflow-file-input' " +
|
|
"accept='image/*' name='picField' size='24' multiple='multiple' alt=''" +
|
|
"/>" +
|
|
"</div>";
|
|
};
|
|
ImageUploadFlow.prototype.InnerUpdate = function (htmlElement) {
|
|
_super.prototype.InnerUpdate.call(this, htmlElement);
|
|
var user = this._userdetails.data;
|
|
htmlElement.onclick = function () {
|
|
if (!user.loggedIn) {
|
|
user.osmConnection.AttemptLogin();
|
|
}
|
|
};
|
|
this._licensePicker.Update();
|
|
var selector = document.getElementById('fileselector-' + this.id);
|
|
var self = this;
|
|
if (selector != null) {
|
|
selector.onchange = function () {
|
|
var files = jquery_1.default(this).get(0).files;
|
|
self._isUploading.setData(files.length);
|
|
var opts = self._uploadOptions(self._selectedLicence.data);
|
|
Imgur_1.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();
|
|
});
|
|
};
|
|
}
|
|
};
|
|
return ImageUploadFlow;
|
|
}(UIElement_1.UIElement));
|
|
exports.ImageUploadFlow = ImageUploadFlow;
|