mirror of
https://github.com/YunoHost-Apps/lutim_ynh.git
synced 2024-09-03 19:36:24 +02:00
420 lines
20 KiB
Text
420 lines
20 KiB
Text
|
% # vim:set sw=4 ts=4 sts=4 ft=html.epl expandtab:
|
||
|
<div class="messages">
|
||
|
% if (config('always_encrypt')) {
|
||
|
<p><%=l 'always_encrypt' %></p>
|
||
|
% }
|
||
|
% if (defined(stash('short'))) {
|
||
|
<div class="alert alert-success">
|
||
|
% if (defined(stash('short'))) {
|
||
|
<img class="pull-left thumbnail" alt="<%= stash('filename') %> thumbnail" src="<%= stash('thumb') %>">
|
||
|
% }
|
||
|
<div>
|
||
|
% # Display image informations
|
||
|
% my $url = url_for('/')->to_abs().stash('short');
|
||
|
<strong><%= stash('filename') %></strong>
|
||
|
<a target="_blank" class="btn btn-default btn-primary btn-xs" href="https://twitter.com/share?url=<%= $url %>?t"><%=l 'tweet_it' %></a>
|
||
|
<ul class="list-unstyled">
|
||
|
% my $delete_url = url_for('delete', {short => stash('real_short'), token => stash('token')})->to_abs();
|
||
|
<li><i class="icon icon-eye" title =" <%= l 'view-link' %>"></i> <%= link_to $url => begin %> <%= $url %> <%= end %></li>
|
||
|
<li><i class="icon icon-download" title =" <%= l 'download-link' %>"></i> <%= link_to $url.'?dl' => begin %> <%= $url.'?dl' %> <%= end %></li>
|
||
|
<li><i class="icon icon-twitter" title =" <%= l 'twitter-link' %>"></i> <%= link_to $url.'?t' => begin %> <%= $url.'?t' %> <%= end %></li>
|
||
|
<li><i class="icon icon-trash" title =" <%= l 'delete-link' %>"></i> <%= link_to $delete_url => begin %> <%= $delete_url %> <%= end %></li>
|
||
|
</ul>
|
||
|
</div>
|
||
|
% # Delay modification form
|
||
|
% my $modify_url = url_for('modify', {short => stash('real_short'), token => stash('token')})->to_abs();
|
||
|
<form class="form" role="form" method="POST" action="<%== $modify_url %>">
|
||
|
<div class="form-group form-inline">
|
||
|
<input name="image_url" type="hidden" value="<%= $url %>">
|
||
|
<select name="delete-day" class="form-control">
|
||
|
% for my $delay (qw/0 1 7 30 365/) {
|
||
|
% my $text = ($delay == 7 || $delay == 30) ? l('delay_days', $delay) : l("delay_$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('delay_1') : l('delay_days', $delay);
|
||
|
<option value="<%= config('max_delay') %>" <%== is_selected(config('max_delay')) %>><%=l('delay_days', config('max_delay')) %></option>
|
||
|
% last;
|
||
|
% }
|
||
|
% }
|
||
|
% } else {
|
||
|
<option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
|
||
|
% }
|
||
|
% }
|
||
|
</select>
|
||
|
<div class="checkbox">
|
||
|
<label>
|
||
|
<input type="checkbox" name="first-view"> <%=l 'delete-first' %>
|
||
|
</label>
|
||
|
<label <%== (config('always_encrypt')) ? 'class="always-encrypt"' : '' %>>
|
||
|
<input type="checkbox" name="crypt"> <%=l 'crypt_image' %>
|
||
|
</label>
|
||
|
</div>
|
||
|
<%= submit_button l('go'), class => 'btn btn-sm btn-default btn-primary', id => 'submitbutton' %>
|
||
|
</div>
|
||
|
</form>
|
||
|
</div>
|
||
|
% }
|
||
|
% if (defined(flash('success'))) {
|
||
|
<div class="alert alert-success">
|
||
|
<button type="button" class="close jsonly" data-dismiss="alert" aria-hidden="true">×</button>
|
||
|
<p><%== flash('success') %></p>
|
||
|
</div>
|
||
|
% }
|
||
|
% if (defined(flash('msg'))) {
|
||
|
<div class="alert alert-danger">
|
||
|
<button type="button" class="close jsonly" data-dismiss="alert" aria-hidden="true">×</button>
|
||
|
<strong><%=l 'some-bad' %></strong><br>
|
||
|
<%= flash('filename') %> <%= flash('msg') %>
|
||
|
</div>
|
||
|
% }
|
||
|
</div>
|
||
|
|
||
|
<noscript>
|
||
|
<form class="form" role="form" method="POST" action="<%== url_for('add') %>" enctype="multipart/form-data">
|
||
|
<div class="form-group form-inline">
|
||
|
<select name="delete-day" class="form-control">
|
||
|
% for my $delay (qw/0 1 7 30 365/) {
|
||
|
% my $text = ($delay == 7 || $delay == 30) ? l('delay_days', $delay) : l("delay_$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('delay_1') : l('delay_days', $delay);
|
||
|
<option value="<%= config('max_delay') %>" <%== is_selected(config('max_delay')) %>><%=l('delay_days', config('max_delay')) %></option>
|
||
|
% last;
|
||
|
% }
|
||
|
% }
|
||
|
% } else {
|
||
|
<option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
|
||
|
% }
|
||
|
% }
|
||
|
</select>
|
||
|
<div class="checkbox">
|
||
|
<label>
|
||
|
<input type="checkbox" name="first-view"> <%=l 'delete-first' %>
|
||
|
</label>
|
||
|
<label <%== (config('always_encrypt')) ? 'class="always-encrypt"' : '' %>>
|
||
|
<input type="checkbox" name="crypt"> <%=l 'crypt_image' %>
|
||
|
</label>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div class="form-group">
|
||
|
<label for="lutim-file"><%=l 'upload_image' %></label>
|
||
|
<input type="file" name="file" id="lutim-file" accept="image/*">
|
||
|
</div>
|
||
|
<div class="form-group">
|
||
|
<label for="lutim-file-url"><%=l 'upload_image_url' %></label>
|
||
|
<input type="url" name="lutim-file-url" placeholder="<%=l 'image_url' %>">
|
||
|
</div>
|
||
|
<p class="help-block"><%=l 'image-only' %></p>
|
||
|
<%= submit_button l('go'), class => 'btn btn-default btn-primary', id => 'submitbutton' %>
|
||
|
</form>
|
||
|
</noscript>
|
||
|
|
||
|
<!-- D&D Zone-->
|
||
|
<div class="jsonly">
|
||
|
<div class="form-group form-inline">
|
||
|
<select id="delete-day" class="form-control">
|
||
|
% for my $delay (qw/0 1 7 30 365/) {
|
||
|
% my $text = ($delay == 7 || $delay == 30) ? l('delay_days', $delay) : l("delay_$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('delay_1') : l('delay_days', $delay);
|
||
|
<option value="<%= config('max_delay') %>" <%== is_selected(config('max_delay')) %>><%=l('delay_days', config('max_delay')) %></option>
|
||
|
% last;
|
||
|
% }
|
||
|
% }
|
||
|
% } else {
|
||
|
<option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
|
||
|
% }
|
||
|
% }
|
||
|
</select>
|
||
|
<div class="checkbox">
|
||
|
<label>
|
||
|
<input type="checkbox" id="first-view"> <%=l 'delete-first' %>
|
||
|
</label>
|
||
|
<label <%== (config('always_encrypt')) ? 'class="always-encrypt"' : '' %>>
|
||
|
<input type="checkbox" id="crypt"> <%=l 'crypt_image' %>
|
||
|
</label>
|
||
|
</div>
|
||
|
</div>
|
||
|
<div id="drag-and-drop-zone" class="uploader">
|
||
|
<div><%=l 'drag-n-drop' %></div>
|
||
|
<div class="or"><%=l 'or' %></div>
|
||
|
<div class="browser">
|
||
|
<label>
|
||
|
<span><%=l 'file-browser' %></span>
|
||
|
<input type="file" name="files[]" multiple="multiple" title='<%=l 'file-browser' %>' accept="image/*">
|
||
|
</label>
|
||
|
</div>
|
||
|
</div>
|
||
|
<p class="help-block"><%=l 'image-only' %></p>
|
||
|
<form class="form-horizontal" role="form" method="POST" action="<%== url_for('add') %>">
|
||
|
<div class="form-group">
|
||
|
<span class="col-sm-3 col-xs-12"><span class="hidden-spin" style="font-size:200%; display:none;" > <i class="icon-spinner animate-spin pull-right"></i></span><label for="lutim-file-url" class="control-label pull-right"><%=l 'upload_image_url' %></label></span>
|
||
|
<div class="col-sm-9 col-xs-12">
|
||
|
<input type="url" name="lutim-file-url" class="form-control" id="lutim-file-url" placeholder="<%=l 'image_url' %>">
|
||
|
</div>
|
||
|
</div>
|
||
|
<a href="#" class="btn btn-default btn-primary pull-right" id="file-url-button"><%=l 'go' %></a>
|
||
|
</form>
|
||
|
</div>
|
||
|
<!-- /D&D Zone -->
|
||
|
|
||
|
%= javascript begin
|
||
|
function link(url, dl, token, modify) {
|
||
|
if (token !== undefined) {
|
||
|
if (modify !== undefined && modify === true) {
|
||
|
return '<%== url_for('index')->to_abs() %>m/'+url+'/'+token;
|
||
|
} else {
|
||
|
url = 'd/'+url+'/'+token;
|
||
|
}
|
||
|
} else if (dl !== '') {
|
||
|
url = url+'?'+dl;
|
||
|
}
|
||
|
return '<a href="<%== url_for('index')->to_abs() %>'+url+'"><%== url_for('index')->to_abs() %>'+url+'</a>';
|
||
|
}
|
||
|
function share(url) {
|
||
|
console.log(url);
|
||
|
new MozActivity({
|
||
|
name: "share",
|
||
|
data: {
|
||
|
type: "url",
|
||
|
number: 1,
|
||
|
url: url
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
function tw_url(url) {
|
||
|
var btn = ' <a target="_blank" class="btn btn-default btn-primary btn-xs" href="https://twitter.com/share?url=<%== url_for('index')->to_abs() %>'+url+'?t"><%=l 'tweet_it' %></a>';
|
||
|
if (navigator.mozSetMessageHandler !== undefined) {
|
||
|
btn = btn+' <a target="_blank" class="btn btn-default btn-primary btn-xs" href="" onclick="share(\'<%== url_for('index')->to_abs() %>'+url+'?t\');return false;"><%=l 'share_it' %></a>';
|
||
|
}
|
||
|
return btn
|
||
|
}
|
||
|
function modify(url, short) {
|
||
|
$.ajax({
|
||
|
url : url,
|
||
|
type : "POST",
|
||
|
data : {
|
||
|
'image_url' : '<%== url_for('index')->to_abs() %>'+short,
|
||
|
'format' : 'json',
|
||
|
'first-view' : ($("#first-view-"+short).prop('checked')) ? 1 : 0,
|
||
|
'delete-day' : $("#day-"+short).val()
|
||
|
},
|
||
|
success: function(data) {
|
||
|
alert(data.msg);
|
||
|
},
|
||
|
error: function() {
|
||
|
alert('<%=l 'modify_image_error' %>');
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
function build_message(success, msg) {
|
||
|
if(success) {
|
||
|
var thumb = (msg.thumb !== null) ? '<img class="pull-left thumbnail" alt="'+msg.filename+' thumbnail" src="'+msg.thumb+'">' : ''
|
||
|
return '<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>'
|
||
|
+thumb
|
||
|
+'<div><strong>'
|
||
|
+msg.filename
|
||
|
+'</strong>'
|
||
|
+tw_url(msg.short)
|
||
|
+'<ul class="list-unstyled"><li><i class="icon icon-eye" title="<%=l 'view-link' %>"></i> '
|
||
|
+link(msg.short, '')
|
||
|
+'</li><li><i class="icon icon-download" title="<%=l 'download-link' %>"></i> '
|
||
|
+link(msg.short, 'dl')
|
||
|
+'</li><li><i class="icon icon-twitter" title="<%=l 'twitter-link' %>"></i> '
|
||
|
+link(msg.short, 't')
|
||
|
+'</li><li><i class="icon icon-trash" title="<%=l 'delete-link' %>"></i> '
|
||
|
+link(msg.real_short, '', msg.token)
|
||
|
+'</li></ul><form class="form" 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">'
|
||
|
% for my $delay (qw/0 1 7 30 365/) {
|
||
|
% my $text = ($delay == 7 || $delay == 30) ? l('delay_days', $delay) : l("delay_$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('delay_1') : l('delay_days', $delay);
|
||
|
+'<option value="<%= config('max_delay') %>" <%== is_selected(config('max_delay')) %>><%=l('delay_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-first' %></label>'
|
||
|
+'</div> '
|
||
|
+'<a href="#" onclick="modify(\''+link(msg.real_short, '', msg.token, true)+'\', \''+msg.real_short+'\');return false;" class="btn btn-sm btn-default btn-primary"><%=l 'go' %></a></div></form>'
|
||
|
+'</div>';
|
||
|
} else {
|
||
|
return '<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><strong><%=l 'some-bad' %></strong><br>'
|
||
|
+msg.filename
|
||
|
+"<br>"
|
||
|
+msg.msg
|
||
|
+'</div>';
|
||
|
}
|
||
|
}
|
||
|
function bindddz(firstview, deleteday) {
|
||
|
$('#drag-and-drop-zone').dmUploader({
|
||
|
url: '<%== url_for('add') %>',
|
||
|
dataType: 'json',
|
||
|
allowedTypes: 'image/*',
|
||
|
maxFileSize: <%= $max_file_size %>,
|
||
|
onNewFile: function(id, file){
|
||
|
$(".messages").append('<div id="'+id+'-div">'+file.name+'<br><div class="progress"><div id="'+id+'"class="progress-bar progress-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"><span id="'+id+'-text" class="pull-left" style="padding-left: 10px;"> 0%</span></div></div></div>');
|
||
|
},
|
||
|
onUploadProgress: function(id, percent){
|
||
|
var percentStr = ' '+percent+'%';
|
||
|
$('#'+id).prop('aria-valuenow', percent);
|
||
|
$('#'+id).prop('style', 'width: '+percent+'%;');
|
||
|
$('#'+id+'-text').html(percentStr);
|
||
|
},
|
||
|
onUploadSuccess: function(id, data){
|
||
|
$('#'+id+'-div').remove();
|
||
|
$(".messages").append(build_message(data.success, data.msg));
|
||
|
},
|
||
|
onUploadError: function(id, message){
|
||
|
$(".messages").append(build_message(false, ''));
|
||
|
},
|
||
|
onFileSizeError: function(file){
|
||
|
$(".messages").append(build_message(false, { filename: file.name, msg: '<%= l('file_too_big', $max_file_size) %>'}));
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
function upload_url() {
|
||
|
var val = $("#lutim-file-url").val();
|
||
|
if (val !== undefined && val !== "") {
|
||
|
$("#lutim-file-url").prop('disabled', 'disabled');
|
||
|
$(".hidden-spin").css('display', 'block');
|
||
|
console.log(val);
|
||
|
$.ajax({
|
||
|
url : '<%== url_for('add') %>',
|
||
|
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) {
|
||
|
$(".messages").append(build_message(data.success, data.msg));
|
||
|
if (data.success) {
|
||
|
$("#lutim-file-url").val('');
|
||
|
}
|
||
|
},
|
||
|
error: function() {
|
||
|
$(".messages").append(build_message(false, ''));
|
||
|
},
|
||
|
complete: function() {
|
||
|
$("#lutim-file-url").prop('disabled', '');
|
||
|
$(".hidden-spin").css('display', 'none');
|
||
|
}
|
||
|
});
|
||
|
} else {
|
||
|
console.log("fhdsjnf");
|
||
|
}
|
||
|
}
|
||
|
|
||
|
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">'+file.name+'<br><div class="progress"><div id="1"class="progress-bar progress-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"><span id="1-text" class="pull-left" style="padding-left: 10px;"> 0%</span></div></div></div>');
|
||
|
// Ajax Submit
|
||
|
$.ajax({
|
||
|
url: '<%== url_for('add') %>',
|
||
|
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').prop('style', 'width: '+percent+'%;');
|
||
|
$('#1-text').html(percentStr);
|
||
|
}, false);
|
||
|
}
|
||
|
|
||
|
return xhrobj;
|
||
|
},
|
||
|
success: function (data, message, xhr){
|
||
|
$('#1-div').remove();
|
||
|
$(".messages").append(build_message(data.success, data.msg));
|
||
|
},
|
||
|
error: function (xhr, status, errMsg){
|
||
|
$(".messages").append(build_message(false, ''));
|
||
|
},
|
||
|
});
|
||
|
}
|
||
|
window.onload = function() {
|
||
|
if (navigator.mozSetMessageHandler !== undefined) {
|
||
|
navigator.mozSetMessageHandler('activity', function handler(activityRequest) {
|
||
|
var activityName = activityRequest.source.name;
|
||
|
if (activityName == 'share') {
|
||
|
activity = activityRequest;
|
||
|
blob = activity.source.data.blobs[0];
|
||
|
fileUpload(blob);
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
};
|
||
|
$('document').ready(function() {
|
||
|
var firstview = ($("#first-view").prop('checked')) ? 1 : 0;
|
||
|
var deleteday = ($("#delete-day").prop('checked')) ? 1 : 0;
|
||
|
|
||
|
bindddz(firstview, deleteday);
|
||
|
|
||
|
$("#file-url-button").on("click", upload_url);
|
||
|
$('#lutim-file-url').keydown( function(e) {
|
||
|
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
|
||
|
if(key == 13) {
|
||
|
e.preventDefault();
|
||
|
upload_url();
|
||
|
}
|
||
|
});
|
||
|
});
|
||
|
% end
|