mirror of
https://framagit.org/fiat-tux/hat-softwares/lutim.git
synced 2026-07-06 18:00:59 +02:00
Luc Didry
484 lines
23 KiB
JavaScript
484 lines
23 KiB
JavaScript
% # vim:set sw=4 ts=4 sts=4 ft=javascript expandtab:
|
|
function selectInput() {
|
|
$(this).select();
|
|
}
|
|
function cleanName(name, empty) {
|
|
if (typeof(name) === 'undefined') {
|
|
return name;
|
|
}
|
|
if (empty !== undefined && empty !== null && empty) {
|
|
return name.replace(/&(l|g)t;/g, '').replace(/"/g, '\'');
|
|
} else {
|
|
return name.replace(/</g, '<').replace(/>/g, '>');
|
|
}
|
|
}
|
|
function modifyImage(e) {
|
|
e.preventDefault();
|
|
var url = $(this).data('modlink');
|
|
var short = $(this).data('modshort');
|
|
modify(url, short);
|
|
}
|
|
function modify(url, short) {
|
|
var limit = $(`#day-${short}`).val();
|
|
var del_at_view = ($(`#first-view-${short}`).prop('checked')) ? 1 : 0;
|
|
$.ajax({
|
|
url : url,
|
|
type : 'POST',
|
|
data : {
|
|
'image_url' : `<%== url_for('/')->to_abs() %>${short}`,
|
|
'format' : 'json',
|
|
'delete-day' : limit,
|
|
'first-view' : del_at_view
|
|
},
|
|
success: function(data) {
|
|
updateItem(short, limit, del_at_view);
|
|
goodToast(data.msg);
|
|
},
|
|
error: function() {
|
|
badToast('<%= l('Error while trying to modify the image.') %>');
|
|
}
|
|
});
|
|
}
|
|
|
|
function buildMessage(success, msg) {
|
|
if(success) {
|
|
var s_url = link([msg.short, '.', msg.ext].join(''), '');
|
|
var thumb = (msg.thumb !== null) ? `<div class="col-sm-1">
|
|
<a href="${s_url}" target="_blank">
|
|
<img class="thumbnail img-responsive" alt="${cleanName(msg.filename, true)} thumbnail" src="${msg.thumb}">
|
|
</a>
|
|
</div>` : '';
|
|
return `<div class="alert alert-success" id="alert-${msg.real_short}">
|
|
<button id="close-${msg.real_short}" type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
<div class="row">${thumb}
|
|
<div class="col-sm-11">
|
|
<h4>
|
|
<a href="${s_url}" target="_blank">
|
|
${msg.filename}
|
|
</a>
|
|
</h4>
|
|
<form class="form">
|
|
<div class="form-group">
|
|
<label class="sr-only" for="view${msg.real_short}"><%= l('View link') %></label>
|
|
<div class="input-group input-group-sm col-sm-6">
|
|
<div class="input-group-btn adjust-addon">
|
|
<a href="${s_url}" target="_blank" class="btn btn-default">
|
|
<span class="icon icon-eye" title=" <%= l('View link') %>"></span>
|
|
</a>
|
|
</div>
|
|
<input type="text" class="form-control view-link-input" id="view${msg.real_short}" value="${s_url}" readonly>
|
|
<a href="#" class="input-group-addon copy-to-clipboard-link" title="<%= l('Copy to clipboard') %>">
|
|
<span class="icon icon-clipboard"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="sr-only" for="markdown${msg.real_short}"><%= l('Markdown syntax') %></label>
|
|
<div class="input-group input-group-sm col-sm-6">
|
|
<div class="input-group-addon adjust-addon">
|
|
<span class="markdown-mark-solid" title="<%= l('Markdown syntax') %>"></span>
|
|
</div>
|
|
<input type="text" class="form-control" id="markdown${msg.real_short}" value="})" readonly>
|
|
<a href="#" class="input-group-addon copy-to-clipboard-link" title="<%= l('Copy to clipboard') %>">
|
|
<span class="icon icon-clipboard"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="sr-only" for="download${msg.real_short}"><%= l('Download link') %></label>
|
|
<div class="input-group input-group-sm col-sm-6">
|
|
<div class="input-group-btn adjust-addon">
|
|
<a href="${link(msg.short, 'dl')}" class="btn btn-default">
|
|
<span class="icon icon-download" title="<%= l('Download link') %>"></span>
|
|
</a>
|
|
</div>
|
|
<input type="text" class="form-control" id="download${msg.real_short}" value="${link(msg.short, 'dl')}" readonly>
|
|
<a href="#" class="input-group-addon copy-to-clipboard-link" title="<%= l('Copy to clipboard') %>">
|
|
<span class="icon icon-clipboard"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="sr-only" for="share${msg.real_short}"><%= l('Link for share on social networks') %></label>
|
|
<div class="input-group input-group-sm col-sm-6">
|
|
<div class="input-group-btn adjust-addon">
|
|
<a href="${link(msg.short, 't')}" target="_blank" class="btn btn-default">
|
|
<span class="icon icon-share" title="<%= l('Link for share on social networks') %>"></span>
|
|
</a>
|
|
</div>
|
|
<input type="text" class="form-control" id="share${msg.real_short}" value="${link(msg.short, 't')}" readonly>
|
|
<a href="#" class="input-group-addon copy-to-clipboard-link" title="<%= l('Copy to clipboard') %>">
|
|
<span class="icon icon-clipboard"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="input-group col-sm-6 col-xs-12">
|
|
<span class="form-control-static">${link(msg.real_short, '', msg.token, false, false, msg.ext)}</span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<form class="form col-sm-11 col-sm-offset-1" role="form" method="POST" action="${link(msg.real_short, '', msg.token, true)}">
|
|
<div class="form-group form-inline">
|
|
<select id="day-${msg.real_short}" name="delete-day" class="form-control">
|
|
% my @delays = split(',', $self->config('proposed_delays'));
|
|
% for my $delay (@delays) {
|
|
% my $text = (defined($d->{'delay_'.$delay})) ? $d->{'delay_'.$delay} : l('%1 days', $delay);
|
|
% if (config('max_delay')) {
|
|
% if ($delay) {
|
|
% if ($delay < config('max_delay')) {
|
|
<option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
|
|
% } elsif ($delay == config('max_delay')) {
|
|
<option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
|
|
% last;
|
|
% } else {
|
|
% my $text = ($delay == 1) ? l('24 hours') : l('%1 days', $delay);
|
|
<option value="<%= config('max_delay') %>" <%== is_selected(config('max_delay')) %>><%= l('%1 days', config('max_delay')) %></option>
|
|
% last;
|
|
% }
|
|
% }
|
|
% } else {
|
|
<option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
|
|
% }
|
|
% }
|
|
</select>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input id="first-view-${msg.real_short}" type="checkbox" name="first-view"> <%= l('Delete at first view?') %>
|
|
</label>
|
|
</div>
|
|
<a href="#"
|
|
class="btn btn-sm btn-default btn-primary modify-image"
|
|
data-modlink="${link(msg.real_short, '', msg.token, true)}"
|
|
data-modshort="${msg.real_short}">
|
|
<%= l('Let\'s go!') %>
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>`
|
|
} else {
|
|
return `<div class="alert alert-danger">
|
|
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
<strong><%= l('Something bad happened') %></strong><br>
|
|
${cleanName(msg.filename, false)}
|
|
<br>
|
|
${cleanName(msg.msg, false)}
|
|
</div>`;
|
|
}
|
|
}
|
|
function bindddz(firstview, deleteday) {
|
|
$('#drag-and-drop-zone').dmUploader({
|
|
url: '<%== url_for('/') %>',
|
|
dataType: 'json',
|
|
allowedTypes: 'image/*',
|
|
maxFileSize: <%= config('max_file_size') %>,
|
|
onNewFile: function(id, file){
|
|
$('.messages').append(`<div id="${id}-div">
|
|
${cleanName(file.name)}<br>
|
|
<div class="progress">
|
|
<div id="${id}"
|
|
class="progress-bar progress-striped active width-zero"
|
|
role="progressbar"
|
|
aria-valuenow="0"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<span id="${id}-text" class="pull-left pdg-left-10"> 0%</span>
|
|
</div>
|
|
</div>
|
|
</div>`);
|
|
},
|
|
onUploadProgress: function(id, percent){
|
|
var percentStr = ` ${percent}%`;
|
|
$(`#${id}`).prop('aria-valuenow', percent);
|
|
$(`#${id}`).css('width', `${percent}%`);
|
|
$(`#${id}-text`).html(percentStr);
|
|
},
|
|
onUploadSuccess: function(id, data){
|
|
data.msg.filename = cleanName(data.msg.filename);
|
|
$(`#${id}-div`).remove();
|
|
if ($('#copy-all').length === 0 && data.success) {
|
|
$('.messages').prepend(`<div class="col-xs-12 col-sm-11 col-sm-offset-1">
|
|
<a id="copy-all" href="#" class="btn btn-info copy-all-to-clipboard-link">
|
|
<%= l('Copy all view links to clipboard') %>
|
|
</a>
|
|
</div>`);
|
|
}
|
|
$('.messages').append(buildMessage(data.success, data.msg));
|
|
$(`#close-${data.msg.real_short}`).on('click', function(e) {
|
|
e.preventDefault();
|
|
rmFromShortHash(`${data.msg.short}.${data.msg.ext}`);
|
|
rmFromZipHash(data.msg.short);
|
|
rmFromRandomHash(data.msg.short);
|
|
});
|
|
$(`#del-${data.msg.real_short}`).on('click', delImageConfirm);
|
|
if (data.success) {
|
|
addToShortHash(`${data.msg.short}.${data.msg.ext}`);
|
|
addToZipHash(data.msg.short);
|
|
addToRandomHash(data.msg.short);
|
|
$('.close').unbind('click', evaluateCopyAll);
|
|
$('.close').on('click', evaluateCopyAll);
|
|
$('input[type="text"]').unbind("click", selectInput);
|
|
$('input[type="text"]').on("click", selectInput);
|
|
$('.copy-all-to-clipboard-link').unbind('click', copyAllToClipboard);
|
|
$('.copy-all-to-clipboard-link').on('click', copyAllToClipboard);
|
|
$('.modify-image').unbind('click', modifyImage);
|
|
$('.modify-image').on('click', modifyImage);
|
|
$('.copy-to-clipboard-link').unbind('click', clickOnCopyLink);
|
|
$('.copy-to-clipboard-link').on('click', clickOnCopyLink);
|
|
addItem(data.msg);
|
|
}
|
|
},
|
|
onUploadError: function(id, message){
|
|
$('.messages').append(buildMessage(false, ''));
|
|
},
|
|
onFileSizeError: function(file){
|
|
$('.messages').append(buildMessage(false, { filename: file.name, msg: '<%= l('The file exceed the size limit (%1)', config('max_file_size')) %>'}));
|
|
}
|
|
});
|
|
}
|
|
|
|
function upload_url(e) {
|
|
e.preventDefault();
|
|
var val = $('#lutim-file-url').val();
|
|
if (val !== undefined && val !== '') {
|
|
$('#lutim-file-url').prop('disabled', 'disabled');
|
|
$('.hidden-spin').css('display', 'block');
|
|
$.ajax({
|
|
url : '<%== url_for('/') %>',
|
|
type : 'POST',
|
|
data : {
|
|
'lutim-file-url' : val,
|
|
'format' : 'json',
|
|
'first-view' : ($('#first-view').prop('checked')) ? 1 : 0,
|
|
'crypt' : ($('#crypt').prop('checked')) ? 1 : 0,
|
|
'delete-day' : $('#delete-day').val()
|
|
},
|
|
success: function(data) {
|
|
data.msg.filename = cleanName(data.msg.filename);
|
|
$('.messages').append(buildMessage(data.success, data.msg));
|
|
if (data.success) {
|
|
if ($('#copy-all').length === 0) {
|
|
$('.messages').prepend(`<div class="col-xs-12 col-sm-11 col-sm-offset-1">
|
|
<a id="copy-all" href="#" class="btn btn-info copy-all-to-clipboard-link">
|
|
<%= l('Copy all view links to clipboard') %>
|
|
</a>
|
|
</div>`);
|
|
}
|
|
$('#lutim-file-url').val('');
|
|
addToShortHash(`${data.msg.short}.${data.msg.ext}`);
|
|
addToZipHash(data.msg.short);
|
|
addToRandomHash(data.msg.short);
|
|
$(`#del-${data.msg.real_short}`).on('click', delImage);
|
|
$('.close').unbind('click', evaluateCopyAll);
|
|
$('.close').on('click', evaluateCopyAll);
|
|
addItem(data.msg);
|
|
}
|
|
},
|
|
error: function() {
|
|
$('.messages').append(buildMessage(false, ''));
|
|
},
|
|
complete: function() {
|
|
$('#lutim-file-url').prop('disabled', '');
|
|
$('.hidden-spin').css('display', 'none');
|
|
$('.copy-all-to-clipboard-link').unbind('click', copyAllToClipboard);
|
|
$('.copy-all-to-clipboard-link').on('click', copyAllToClipboard);
|
|
$('.modify-image').unbind('click', modifyImage);
|
|
$('.modify-image').on('click', modifyImage);
|
|
$('.copy-to-clipboard-link').unbind('click', clickOnCopyLink);
|
|
$('.copy-to-clipboard-link').on('click', clickOnCopyLink);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function fileUpload(file) {
|
|
var fd = new FormData();
|
|
fd.append('file', file);
|
|
|
|
fd.append('format', 'json');
|
|
fd.append('first-view', ($('#first-view').prop('checked')) ? 1 : 0);
|
|
fd.append('crypt', ($('#crypt').prop('checked')) ? 1 : 0);
|
|
fd.append('delete-day', ($('#delete-day').val()));
|
|
|
|
$('.messages').append(`<div id="1-div">${cleanName(file.name)}<br>
|
|
<div class="progress">
|
|
<div id="1"
|
|
class="progress-bar progress-striped active width-zero"
|
|
role="progressbar"
|
|
aria-valuenow="0"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
<span id="1-text" class="pull-left pdg-left-10"> 0%</span>
|
|
</div>
|
|
</div>
|
|
</div>`);
|
|
// Ajax Submit
|
|
$.ajax({
|
|
url: '<%== url_for('/') %>',
|
|
type: 'POST',
|
|
dataType: 'json',
|
|
data: fd,
|
|
cache: false,
|
|
contentType: false,
|
|
processData: false,
|
|
forceSync: false,
|
|
xhr: function(){
|
|
var xhrobj = $.ajaxSettings.xhr();
|
|
if(xhrobj.upload){
|
|
xhrobj.upload.addEventListener('progress', function(event) {
|
|
var percent = 0;
|
|
var position = event.loaded || event.position;
|
|
var total = event.total || e.totalSize;
|
|
if(event.lengthComputable){
|
|
percent = Math.ceil(position / total * 100);
|
|
}
|
|
|
|
var percentStr = ` ${percent}%`;
|
|
$('#1').prop('aria-valuenow', percent);
|
|
$('#1').css('width', `${percent}%`);
|
|
$('#1-text').html(percentStr);
|
|
}, false);
|
|
}
|
|
|
|
return xhrobj;
|
|
},
|
|
success: function (data, message, xhr){
|
|
$('#1-div').remove();
|
|
if ($('#copy-all').length === 0 && data.success) {
|
|
$('.messages').prepend(`<div class="col-xs-12 col-sm-11 col-sm-offset-1">
|
|
<a id="copy-all" href="#" class="btn btn-info copy-all-to-clipboard-link">
|
|
<%= l('Copy all view links to clipboard') %>
|
|
</a>
|
|
</div>`);
|
|
}
|
|
data.msg.filename = cleanName(data.msg.filename);
|
|
$('.messages').append(buildMessage(data.success, data.msg));
|
|
if (data.success) {
|
|
$('.close').unbind('click', evaluateCopyAll);
|
|
$('.close').on('click', evaluateCopyAll);
|
|
addItem(data.msg);
|
|
}
|
|
},
|
|
error: function (xhr, status, errMsg){
|
|
$('.messages').append(buildMessage(false, ''));
|
|
},
|
|
complete: function () {
|
|
$('.copy-all-to-clipboard-link').unbind('click', copyAllToClipboard);
|
|
$('.copy-all-to-clipboard-link').on('click', copyAllToClipboard);
|
|
$('.modify-image').unbind('click', modifyImage);
|
|
$('.modify-image').on('click', modifyImage);
|
|
$('.copy-to-clipboard-link').unbind('click', clickOnCopyLink);
|
|
$('.copy-to-clipboard-link').on('click', clickOnCopyLink);
|
|
}
|
|
});
|
|
}
|
|
|
|
function initPaste() {
|
|
/*
|
|
actually FF and Chrome doesn't handle paste events the same way...
|
|
for ff we need to create a editable div and register an event to it.
|
|
When user paste, the image is "really" pasted in the div. Then, we need to iterate throught
|
|
the div childs to get images. Previsouly FF didn't have the paste event so it was esay to figure on wich browser we were.
|
|
But firefox now have a paste event so I test it...
|
|
|
|
on Chrome the file object is directlyt in the clipboard.
|
|
*/
|
|
var b = 'FF';
|
|
try {
|
|
//FF
|
|
var cbe = new ClipboardEvent('hop');
|
|
} catch(hop) {
|
|
//under webkkit Clipboard doesn't have arguments...
|
|
b = 'WK'
|
|
}
|
|
if (b === 'FF') {
|
|
var pasteDiv = document.createElement('div');
|
|
pasteDiv.addEventListener('paste', onPasteFF);
|
|
pasteDiv.setAttribute('class', 'pasteZone');
|
|
pasteDiv.setAttribute('contenteditable', true);
|
|
|
|
document.getElementsByTagName('body')[0].appendChild(pasteDiv);
|
|
pasteDiv.focus();
|
|
|
|
document.addEventListener('click', function(event) {
|
|
var t = $(event.target);
|
|
|
|
switch (t[0].nodeName.toUpperCase()) {
|
|
case 'A':
|
|
case 'BUTTON':
|
|
case 'INPUT':
|
|
case 'SELECT':
|
|
case 'SPAN':
|
|
case 'LABEL':
|
|
break;
|
|
default:
|
|
if (t[0].parentNode.nodeName.toUpperCase() !== 'SELECT') {
|
|
pasteDiv.focus();
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
document.addEventListener('paste', onPaste);
|
|
}
|
|
}
|
|
|
|
function waitforpastedata(elem, savedcontent) {
|
|
if (elem.childNodes && elem.childNodes.length > 0) {
|
|
processpaste(elem, savedcontent);
|
|
} else {
|
|
var that = {
|
|
e: elem,
|
|
s: savedcontent
|
|
};
|
|
that.callself = function () {
|
|
waitforpastedata(that.e, that.s);
|
|
}
|
|
setTimeout(that.callself, 20);
|
|
}
|
|
}
|
|
|
|
function processpaste(elem, savedcontent) {
|
|
var pasteZone = document.getElementsByClassName('pasteZone')[0];
|
|
var f = new Image();
|
|
|
|
f.onload = function(){
|
|
var canvas = document.createElement('canvas');
|
|
canvas.width = f.width;
|
|
canvas.height = f.height;
|
|
|
|
var ctx = canvas.getContext('2d');
|
|
ctx.drawImage(f, 0, 0, canvas.width, canvas.height);
|
|
|
|
canvas.toBlob(function(blob) {
|
|
var url = window.URL.createObjectURL(blob);
|
|
fileUpload(blob);
|
|
});
|
|
}
|
|
|
|
f.src = pasteZone.childNodes[0].src;
|
|
|
|
pasteZone.innerHTML = '';
|
|
}
|
|
|
|
function onPasteFF(e) {
|
|
var pasteZone = document.getElementsByClassName('pasteZone')[0];
|
|
waitforpastedata(pasteZone, 'savedcontent');
|
|
}
|
|
|
|
function onPaste(e) {
|
|
var items = e.clipboardData.items;
|
|
for(var i = 0; i < items.length; i++) {
|
|
var item = items[i];
|
|
if (/image/.test(item.type)) {
|
|
var file = item.getAsFile();
|
|
fileUpload(file);
|
|
} else {
|
|
//not image..
|
|
}
|
|
}
|
|
}
|