1
0
Fork 0
mirror of https://github.com/YunoHost-Apps/lutim_ynh.git synced 2024-09-03 19:36:24 +02:00
lutim_ynh/sources/lutim-master/templates/index.html.ep

420 lines
20 KiB
Text
Raw Normal View History

2014-10-06 13:19:51 +02:00
% # 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
2015-03-10 12:47:07 +01:00
% my $url = index_url(1).stash('short');
2014-10-06 13:19:51 +02:00
<strong><%= stash('filename') %></strong>
&nbsp;&nbsp;&nbsp;<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>
2015-03-10 12:47:07 +01:00
<li><i class="icon icon-share" title =" <%= l 'share-link' %>"></i> <%= link_to $url.'?t' => begin %> <%= $url.'?t' %> <%= end %></li>
2014-10-06 13:19:51 +02:00
<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">&times;</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">&times;</button>
<strong><%=l 'some-bad' %></strong><br>
<%= flash('filename') %> <%= flash('msg') %>
</div>
% }
</div>
<noscript>
2015-03-10 12:47:07 +01:00
<form class="form" role="form" method="POST" action="<%== index_url %>" enctype="multipart/form-data">
2014-10-06 13:19:51 +02:00
<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>
2015-03-10 12:47:07 +01:00
<form class="form-horizontal" role="form" method="POST" action="<%== index_url %>">
2014-10-06 13:19:51 +02:00
<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) {
2015-03-10 12:47:07 +01:00
return '<%== index_url(1) %>m/'+url+'/'+token;
2014-10-06 13:19:51 +02:00
} else {
url = 'd/'+url+'/'+token;
}
} else if (dl !== '') {
url = url+'?'+dl;
}
2015-03-10 12:47:07 +01:00
return '<a href="<%== index_url(1) %>'+url+'"><%== index_url(1) %>'+url+'</a>';
2014-10-06 13:19:51 +02:00
}
function share(url) {
console.log(url);
new MozActivity({
name: "share",
data: {
type: "url",
number: 1,
url: url
}
});
}
function tw_url(url) {
2015-03-10 12:47:07 +01:00
var btn = '&nbsp;&nbsp;&nbsp;<a target="_blank" class="btn btn-default btn-primary btn-xs" href="https://twitter.com/share?url=<%== index_url(1) %>'+url+'?t"><%=l 'tweet_it' %></a>';
2014-10-06 13:19:51 +02:00
if (navigator.mozSetMessageHandler !== undefined) {
2015-03-10 12:47:07 +01:00
btn = btn+'&nbsp;&nbsp;&nbsp;<a target="_blank" class="btn btn-default btn-primary btn-xs" href="" onclick="share(\'<%== index_url(1) %>'+url+'?t\');return false;"><%=l 'share_it' %></a>';
2014-10-06 13:19:51 +02:00
}
return btn
}
function modify(url, short) {
$.ajax({
url : url,
type : "POST",
data : {
2015-03-10 12:47:07 +01:00
'image_url' : '<%== index_url(1) %>'+short,
2014-10-06 13:19:51 +02:00
'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">&times;</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>&nbsp;'
+link(msg.short, '')
+'</li><li><i class="icon icon-download" title="<%=l 'download-link' %>"></i>&nbsp;'
+link(msg.short, 'dl')
2015-03-10 12:47:07 +01:00
+'</li><li><i class="icon icon-share" title="<%=l 'share-link' %>"></i>&nbsp;'
2014-10-06 13:19:51 +02:00
+link(msg.short, 't')
+'</li><li><i class="icon icon-trash" title="<%=l 'delete-link' %>"></i>&nbsp;'
+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>&nbsp;<div class="checkbox"><label><input id="first-view-'+msg.real_short+'" type="checkbox" name="first-view"> <%=l 'delete-first' %></label>'
+'</div>&nbsp;'
+'<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">&times;</button><strong><%=l 'some-bad' %></strong><br>'
+msg.filename
+"<br>"
+msg.msg
+'</div>';
}
}
function bindddz(firstview, deleteday) {
$('#drag-and-drop-zone').dmUploader({
2015-03-10 12:47:07 +01:00
url: '<%== index_url %>',
2014-10-06 13:19:51 +02:00
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({
2015-03-10 12:47:07 +01:00
url : '<%== index_url %>',
2014-10-06 13:19:51 +02:00
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({
2015-03-10 12:47:07 +01:00
url: '<%== index_url %>',
2014-10-06 13:19:51 +02:00
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