mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-10 00:28:22 +00:00
Search preview modal more dynamic and responsive
This commit is contained in:
Mokaddem
parent
74b337f1a1
commit
f1979f6dcb
3 changed files with 64 additions and 36 deletions
|
|
@ -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__":
|
||||
|
|
|
|||
|
|
@ -133,8 +133,10 @@ $(document).ready(function(){
|
|||
<!-- 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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue