AIL/ail-framework
7
0
Fork 0
mirror of https://github.com/ail-project/ail-framework.git synced 2024-11-23 06:37:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Search preview modal more dynamic and responsive

Browse source
This commit is contained in:
Mokaddem 2016-07-07 15:34:08 +02:00
parent 74b337f1a1
commit f1979f6dcb
3 changed files with 64 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
var/www/Flask_server.py
View file

@ -92,7 +92,7 @@ def search():
content = Paste.Paste(x.items()[0][1]).get_p_content().decode('utf8', 'ignore')
content_range = max_preview_char if len(content)>max_preview_char else len(content)-1
c.append(content[0:content_range])
return render_template("search.html", r=r, c=c)
return render_template("search.html", r=r, c=c, char_to_display=max_preview_modal)
@app.route("/")
def index():
@ -145,21 +145,26 @@ def showpreviewpaste():
p_size = paste.p_size
p_mime = paste.p_mime
p_lineinfo = paste.get_lines_info()
p_content = paste.get_p_content()[0:max_preview_modal].decode('utf-8', 'ignore')
return render_template("show_saved_paste.html", date=p_date, source=p_source, encoding=p_encoding, language=p_language, size=p_size, mime=p_mime, lineinfo=p_lineinfo, content=p_content)
#p_content = paste.get_p_content()[0:max_preview_modal].decode('utf-8', 'ignore')
p_content = paste.get_p_content().decode('utf-8', 'ignore')
p_content = p_content[0:max_preview_modal]
p_initsize = len(p_content)
return render_template("show_saved_paste.html", date=p_date, source=p_source, encoding=p_encoding, language=p_language, size=p_size, mime=p_mime, lineinfo=p_lineinfo, content=p_content, initsize=p_initsize)
@app.route("/getmoredata/")
def getmoredata():
requested_path = request.args.get('paste', '')
index_prev = int(request.args.get('index', ''))
paste = Paste.Paste(requested_path)
p_content = paste.get_p_content().decode('utf-8', 'ignore')
final_index = (index_prev+1)*max_preview_modal
'''final_index = (index_prev+1)*max_preview_modal
if final_index > len(p_content)-1: # prevent out of bound
final_index = len(p_content)-1
'''
#to_return = p_content[index_prev*max_preview_modal:final_index]
to_return = p_content[index_prev*max_preview_modal:final_index]
#correct_index = len(p_content) if max_preview_modal > len(p_content) else max_preview_modal
#to_return = str(p_content[correct_index:])
to_return = p_content[max_preview_modal:]
return to_return
if __name__ == "__main__":

65
var/www/templates/search.html
View file

@ -124,17 +124,19 @@
<!-- enable tooltip -->
<script>
$(document).ready(function(){
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
$("#button_show_path").hide();
});
});
</script>
<!-- Dynamically update the modal -->
<script type="text/javascript">
// static data
var alert_message = '<div class="alert alert-info alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><strong>No more data.</strong>The full paste is displayed.</div>';
var alert_message = '<div class="alert alert-info alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><strong>No more data.</strong> Full paste displayed.</div>';
var complete_paste = null;
var char_to_display = {{ char_to_display }};
var current_index = 0;
// On click, get html content from url and update the corresponding modal
$("[data-toggle='modal']").on("click", function (event) {
@ -143,29 +145,25 @@ $(document).ready(function(){
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>';
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');
var index_preview = 1 // used for load more preview
if ($("[data-initsize]").attr('data-initsize') < char_to_display) {
nothing_to_display();
}
// On load more content click, replace paste content
$("#load-more-button").on("click", function (event) {
$.get("{{ url_for('getmoredata') }}"+"?paste="+$(modal).attr('data-path')+"&index="+index_preview, function(data, status){
index_preview++;
if (data != "") {
var new_content = $('<p><xmp>'+data+'</xmp></p>').hide();
$("#mymodalbody").find("#panel-body").append(new_content);
new_content.show('fast');
} else { // no more data
var new_content = $(alert_message).hide();
$("#mymodalbody").find("#panel-body").append(new_content);
new_content.show('fast');
$("#load-more-button").hide();
}
if (complete_paste == null) {
$.get("{{ url_for('getmoredata') }}"+"?paste="+$(modal).attr('data-path'), function(data, status){
complete_paste = data;
update_preview();
});
} else {
update_preview();
}
});
});
});
@ -175,8 +173,33 @@ $(document).ready(function(){
$("#mymodalbody").html("<p>Loading paste information...</p>");
$("#button_show_path").attr('href', '');
$("#button_show_path").hide();
complete_paste = null;
current_index = 0;
});
// Update the paste preview in the modal
function update_preview() {
if (current_index + char_to_display > complete_paste.length-1){
var final_index = complete_paste.length-1;
var flag_stop = true; // if there is no more data.
} else {
var final_index = current_index + char_to_display;
}
if (final_index != current_index){
$("#mymodalbody").find("#paste-holder").append(complete_paste.substring(current_index+1, final_index+1));
current_index = final_index;
if (flag_stop)
nothing_to_display();
} else {
nothing_to_display();
}
}
// Update the modal when there is no more data
function nothing_to_display() {
var new_content = $(alert_message).hide();
$("#mymodalbody").find("#panel-body").append(new_content);
new_content.show('fast');
$("#load-more-button").hide();
}
</script>
</html>

2
var/www/templates/show_saved_paste.html
View file

@ -43,7 +43,7 @@
</div>
<div class="panel-body" id="panel-body">
<h4> Content: </h4>
<p> <xmp> {{ content }} </xmp> </p>
<p data-initsize="{{ initsize }}"> <xmp id="paste-holder"> {{ content }} </xmp> </p>
</div>
</div>