Fixed modal background stacking bug + button leading to saved paste bug fixed in search

This commit is contained in:
Mokaddem 2016-11-10 14:56:25 +01:00
parent 317005c2b4
commit 2dd69fbb25
4 changed files with 53 additions and 80 deletions

View file

@ -98,7 +98,6 @@ def event_stream_getImportantPasteByModule(module_name):
data["char_to_display"] = max_preview_modal data["char_to_display"] = max_preview_modal
data["finished"] = True if index == len(all_pastes_list) else False data["finished"] = True if index == len(all_pastes_list) else False
time.sleep(0.002) #So that the front end client is not flooded by data time.sleep(0.002) #So that the front end client is not flooded by data
print data["path"]
yield 'data: %s\n\n' % json.dumps(data) yield 'data: %s\n\n' % json.dumps(data)
@ -352,7 +351,6 @@ def search():
# Search filename # Search filename
for path in r_serv_pasteName.smembers(q[0]): for path in r_serv_pasteName.smembers(q[0]):
print path
r.append(path) r.append(path)
paste = Paste.Paste(path) paste = Paste.Paste(path)
content = paste.get_p_content().decode('utf8', 'ignore') content = paste.get_p_content().decode('utf8', 'ignore')

View file

@ -30,9 +30,6 @@
white-space:pre-wrap; white-space:pre-wrap;
word-wrap:break-word; word-wrap:break-word;
} }
.modal-backdrop.fade {
opacity: 0;
}
</style> </style>
</head> </head>

View file

@ -78,37 +78,6 @@ $(document).ready(function(){
var char_to_display = {{ char_to_display }}; var char_to_display = {{ char_to_display }};
var start_index = 0; var start_index = 0;
// On click, get html content from url and update the corresponding modal
$("[data-toggle='modal']").on("click.openmodal", function (event) {
event.preventDefault();
var modal=$(this);
var url = " {{ url_for('showpreviewpaste') }}?paste=" + $(this).attr('data-path') + "&num=" + $(this).attr('data-num');
$.get(url, function (data) {
$("#mymodalbody").html(data);
var button = $('<button type="button" id="load-more-button" class="btn btn-info btn-xs center-block" data-url="' + $(modal).attr('data-path') +'" data-toggle="tooltip" data-placement="bottom" title="Load more content"><span class="glyphicon glyphicon-download"></span></button>');
button.tooltip();
$("#mymodalbody").children(".panel-default").append(button);
$("#button_show_path").attr('href', $(modal).attr('data-url'));
$("#button_show_path").show('fast');
$("#loading-gif-modal").css("visibility", "hidden"); // Hide the loading GIF
if ($("[data-initsize]").attr('data-initsize') < char_to_display) { // All the content is displayed
nothing_to_display();
}
// On click, donwload all paste's content
$("#load-more-button").on("click", function (event) {
if (complete_paste == null) { //Donwload only once
$.get("{{ url_for('getmoredata') }}"+"?paste="+$(modal).attr('data-path'), function(data, status){
complete_paste = data;
update_preview();
});
} else {
update_preview();
}
});
});
});
// When the modal goes out, refresh it to normal content // When the modal goes out, refresh it to normal content
$("#mymodal").on('hidden.bs.modal', function () { $("#mymodal").on('hidden.bs.modal', function () {
$("#mymodalbody").html("<p>Loading paste information...</p>"); $("#mymodalbody").html("<p>Loading paste information...</p>");
@ -148,19 +117,23 @@ $(document).ready(function(){
} }
// Use to bind the button with the new displayed data // Use to bind the button with the new displayed data
// (The bind do not happens if the dataTable is in tabs and the clicked data is in another page) // (The bind do not happens if the dataTable is in tabs and the clicked data is in another page)
search_table.on( 'draw.dt', function () { search_table.on( 'draw.dt', function () {
// Bind tooltip each time we draw a new page // Bind tooltip each time we draw a new page
$('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').tooltip();
// On click, get html content from url and update the corresponding modal // On click, get html content from url and update the corresponding modal
$("[data-toggle='modal']").unbind('click.openmodal').on("click.openmodal", function (event) { $("[data-toggle='modal']").off('click.openmodal').on("click.openmodal", function (event) {
event.preventDefault(); event.preventDefault();
var modal=$(this); var modal=$(this);
var url = " {{ url_for('showpreviewpaste') }}?paste=" + $(this).attr('data-path') + "&num=" + $(this).attr('data-num'); var url = " {{ url_for('showpreviewpaste') }}?paste=" + $(this).attr('data-path') + "&num=" + $(this).attr('data-num');
$.get(url, function (data) { $.get(url, function (data) {
$("#mymodalbody").html(data);
// clear data by removing html, body, head tags. prevent dark modal background stack bug.
var cleared_data = data.split("<body>")[1].split("</body>")[0];
$("#mymodalbody").html(cleared_data);
var button = $('<button type="button" id="load-more-button" class="btn btn-info btn-xs center-block" data-url="' + $(modal).attr('data-path') +'" data-toggle="tooltip" data-placement="bottom" title="Load more content"><span class="glyphicon glyphicon-download"></span></button>'); var button = $('<button type="button" id="load-more-button" class="btn btn-info btn-xs center-block" data-url="' + $(modal).attr('data-path') +'" data-toggle="tooltip" data-placement="bottom" title="Load more content"><span class="glyphicon glyphicon-download"></span></button>');
button.tooltip(); button.tooltip();
$("#mymodalbody").children(".panel-default").append(button); $("#mymodalbody").children(".panel-default").append(button);

View file

@ -31,9 +31,7 @@
white-space:pre-wrap; white-space:pre-wrap;
word-wrap:break-word; word-wrap:break-word;
} }
.modal-backdrop.fade {
opacity: 0;
}
</style> </style>
</head> </head>
@ -129,6 +127,9 @@
<!-- enable tooltip and dataTable --> <!-- enable tooltip and dataTable -->
<script> <script>
var search_table;
$(document).ready(function(){ $(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').tooltip();
@ -150,7 +151,6 @@
function load_search_data(init_num_of_elements_in_table, search_table, prev_query, offset) { function load_search_data(init_num_of_elements_in_table, search_table, prev_query, offset) {
var options = { query: prev_query, offset: offset }; var options = { query: prev_query, offset: offset };
console.log(options);
$.post( "{{ url_for('get_more_search_result') }}", options).done(function( data ) { $.post( "{{ url_for('get_more_search_result') }}", options).done(function( data ) {
for(i=0; i<data.path_array.length; i++) { for(i=0; i<data.path_array.length; i++) {
@ -160,7 +160,7 @@
"<a target=\"_blank\" href=\"{{ url_for('showsavedpaste') }}?paste="+data.path_array[i]+"&num="+i+"\"> "+ data.path_array[i] +"</a>", "<a target=\"_blank\" href=\"{{ url_for('showsavedpaste') }}?paste="+data.path_array[i]+"&num="+i+"\"> "+ data.path_array[i] +"</a>",
data.date_array[i], data.date_array[i],
data.size_array[i], data.size_array[i],
"<p><span class=\"glyphicon glyphicon-info-sign\" data-toggle=\"tooltip\" data-placement=\"left\" title=\""+curr_preview+"\"></span> <button type=\"button\" class=\"btn-link\" data-num=\""+i+"\" data-toggle=\"modal\" data-target=\"#mymodal\" data-url=\"{{ url_for('showsavedpaste') }}?paste=\""+data.path_array[i]+"\"&num=\""+i+"\" data-path=\""+data.path_array[i]+"\"><span class=\"fa fa-search-plus\"></span></button></p>" "<p><span class=\"glyphicon glyphicon-info-sign\" data-toggle=\"tooltip\" data-placement=\"left\" title=\""+curr_preview+"\"></span> <button type=\"button\" class=\"btn-link\" data-num=\""+i+"\" data-toggle=\"modal\" data-target=\"#mymodal\" data-url=\"{{ url_for('showsavedpaste') }}?paste="+data.path_array[i]+"&num="+i+"\" data-path=\""+data.path_array[i]+"\"><span class=\"fa fa-search-plus\"></span></button></p>"
] ).draw( false ); ] ).draw( false );
} }
$("#numberOfRes").text(parseInt($("#numberOfRes").text()) + data.path_array.length); $("#numberOfRes").text(parseInt($("#numberOfRes").text()) + data.path_array.length);
@ -172,10 +172,6 @@
}); });
} }
$('#myTable').on( 'page.dt', function () {
setTimeout(function(){ $('[data-toggle="tooltip"]').tooltip(); }, 300);
} );
</script> </script>
<!-- Dynamically update the modal --> <!-- Dynamically update the modal -->
@ -186,37 +182,6 @@
var char_to_display = {{ char_to_display }}; var char_to_display = {{ char_to_display }};
var start_index = 0; var start_index = 0;
// On click, get html content from url and update the corresponding modal
$("[data-toggle='modal']").on("click", function (event) {
event.preventDefault();
var modal=$(this);
var url = " {{ url_for('showpreviewpaste') }}?paste=" + $(this).attr('data-path') + "&num=" + $(this).attr('data-num');
$.get(url, function (data) {
$("#mymodalbody").html(data);
var button = $('<button type="button" id="load-more-button" class="btn btn-info btn-xs center-block" data-url="' + $(modal).attr('data-path') +'" data-toggle="tooltip" data-placement="bottom" title="Load more content"><span class="glyphicon glyphicon-download"></span></button>');
button.tooltip();
$("#mymodalbody").children(".panel-default").append(button);
$("#button_show_path").attr('href', $(modal).attr('data-url'));
$("#button_show_path").show('fast');
$("#loading-gif-modal").css("visibility", "hidden"); // Hide the loading GIF
if ($("[data-initsize]").attr('data-initsize') < char_to_display) { // All the content is displayed
nothing_to_display();
}
// On click, donwload all paste's content
$("#load-more-button").on("click", function (event) {
if (complete_paste == null) { //Donwload only once
$.get("{{ url_for('getmoredata') }}"+"?paste="+$(modal).attr('data-path'), function(data, status){
complete_paste = data;
update_preview();
});
} else {
update_preview();
}
});
});
});
// When the modal goes out, refresh it to normal content // When the modal goes out, refresh it to normal content
$("#mymodal").on('hidden.bs.modal', function () { $("#mymodal").on('hidden.bs.modal', function () {
$("#mymodalbody").html("<p>Loading paste information...</p>"); $("#mymodalbody").html("<p>Loading paste information...</p>");
@ -254,5 +219,45 @@
new_content.show('fast'); new_content.show('fast');
$("#load-more-button").hide(); $("#load-more-button").hide();
} }
$('#myTable').on( 'draw.dt', function () {
// Bind tooltip each time we draw a new page
$('[data-toggle="tooltip"]').tooltip();
// On click, get html content from url and update the corresponding modal
$("[data-toggle='modal']").off('click.openmodal').on("click.openmodal", function (event) {
var modal=$(this);
var url = " {{ url_for('showpreviewpaste') }}?paste=" + $(this).attr('data-path') + "&num=" + $(this).attr('data-num');
$.get(url, function (data) {
// clear data by removing html, body, head tags. prevent dark modal background stack bug.
var cleared_data = data.split("<body>")[1].split("</body>")[0];
$("#mymodalbody").html(cleared_data);
var button = $('<button type="button" id="load-more-button" class="btn btn-info btn-xs center-block" data-url="' + $(modal).attr('data-path') +'" data-toggle="tooltip" data-placement="bottom" title="Load more content"><span class="glyphicon glyphicon-download"></span></button>');
button.tooltip();
$("#mymodalbody").children(".panel-default").append(button);
$("#button_show_path").attr('href', $(modal).attr('data-url'));
$("#button_show_path").show('fast');
$("#loading-gif-modal").css("visibility", "hidden"); // Hide the loading GIF
if ($("[data-initsize]").attr('data-initsize') < char_to_display) { // All the content is displayed
nothing_to_display();
}
// On click, donwload all paste's content
$("#load-more-button").off('click.download').on("click.download", function (event) {
if (complete_paste == null) { //Donwload only once
$.get("{{ url_for('getmoredata') }}"+"?paste="+$(modal).attr('data-path'), function(data, status){
complete_paste = data;
update_preview();
});
} else {
update_preview();
}
});
});
});
} );
</script> </script>
</html> </html>