tinyscrollbar pagination fixed

This commit is contained in:
Harry Bomrah 2013-03-12 11:18:32 +08:00 committed by Matt K. Fu
parent 69a49a69aa
commit 323fadc210
5 changed files with 116 additions and 60 deletions

View File

@ -31,9 +31,9 @@
$.fn.tinyscrollbar = function( params ) $.fn.tinyscrollbar = function( params )
{ {
var options = $.extend( {}, $.tiny.scrollbar.options, params ); var options = $.extend( {}, $.tiny.scrollbar.options, params );
this.each( function() this.each( function()
{ {
$( this ).data('tsb', new Scrollbar( $( this ), options ) ); $( this ).data('tsb', new Scrollbar( $( this ), options ) );
}); });
@ -42,6 +42,7 @@
$.fn.tinyscrollbar_update = function(sScroll) $.fn.tinyscrollbar_update = function(sScroll)
{ {
return $( this ).data( 'tsb' ).update( sScroll ); return $( this ).data( 'tsb' ).update( sScroll );
}; };
@ -190,7 +191,13 @@
oEvent.preventDefault(); oEvent.preventDefault();
} }
} }
options.onMove.call(this,iScroll);
options.onMove.call(this,get_destance_from_end());
}
function get_destance_from_end(){
var distance_to_end = (oContent.obj.width() - oScrollbar.obj.width()) - iScroll;
return distance_to_end;
} }
function drag( event ) function drag( event )

View File

@ -50,6 +50,8 @@ var orbitDesktop = function(dom){
this.sectionList; this.sectionList;
this.data_method; this.data_method;
this.gridvar = null; this.gridvar = null;
this.lastlink= null;
this.tinyscrollbar = null;
this.initialize = function(){ this.initialize = function(){
var theme = o.theme; var theme = o.theme;
@ -281,59 +283,105 @@ var orbitDesktop = function(dom){
}) })
}; };
this.layout_data = function(h){ this.layout_data = function(h){
var $e = $("<div></div>"); var $e;
$e.html(h); var column_container,layout, base_width , no_of_entries, pagination_link , pagination_variable;
var column_container = $e.find("div.overview"); o.paging = true;
var layout = column_container.attr("content-layout"), base_width = parseInt(column_container.attr("base-width")), no_of_entries,temp_div = $("<div></div>"),total_columns=0; this.layout_data.generate_layout_html = function(l){
switch (layout){ $e = $("<div></div>");
case "simple": $e.html(l);
total_columns++; column_container = $e.find("div.overview");
temp_div.append(column_container.html()); layout = column_container.attr("content-layout"), base_width = parseInt(column_container.attr("base-width")), no_of_entries,total_columns=0, pagination_link = column_container.attr("pagination-link"), pagination_variable = column_container.attr("pagination-var");
break; var temp_div = $("<div></div>");
case "datalist": switch (layout){
no_of_entries = (typeof column_container.attr("per-column") != "undefined"? parseInt(column_container.attr("per-column")) : 4); case "simple":
var height_percentage = 100/no_of_entries; total_columns++;
var entries = column_container.find("li[item=true]"),x = 0; temp_div.append(column_container.html());
entries.each(function(i,li){ var entries = [];
if(x == 0){ break;
column = $("<div class='column type_datalist' style='width:"+base_width+"px'><ul></ul></div"); case "datalist":
total_columns++; no_of_entries = (typeof column_container.attr("per-column") != "undefined"? parseInt(column_container.attr("per-column")) : 4);
} var height_percentage = 100/no_of_entries;
$(li).addClass("datalist_item").height(height_percentage+"%"); var entries = column_container.find("li[item=true]"),x = 0;
column.find("ul").eq(0).append(li); entries.each(function(i,li){
x++; if(x == 0){
if(x == no_of_entries){ column = $("<div class='column type_datalist' style='width:"+base_width+"px'><ul></ul></div");
x = 0; total_columns++;
temp_div.append(column); }
} $(li).addClass("datalist_item").height(height_percentage+"%");
}) column.find("ul").eq(0).append(li);
break;
case "column":
var entries = column_container.find("div[column=true]"),x = 0,column;
entries.each(function(i,ul){
column = $("<div class='column type_column' style='width:"+base_width+"px'></div");
total_columns++;
column.append(ul);
x++; x++;
temp_div.append(column); if(x == no_of_entries){
x = 0;
temp_div.append(column);
}
}) })
break; if(x != 0){
temp_div.append(column);
}
break;
case "column":
var entries = column_container.find("div[column=true]"),x = 0,column;
entries.each(function(i,ul){
column = $("<div class='column type_column' style='width:"+base_width+"px'></div");
total_columns++;
column.append(ul);
x++;
temp_div.append(column);
})
break;
}
var w = (!isNaN(base_width) ? base_width * total_columns : null);
return {"markup":temp_div.html(),"width":w,"total":entries.length};
} }
$("div[container=true]").html(h).find("div.overview").wrap('<div class="tinycanvas vp"><div class="viewport"></div></div>'); $("div[container=true]").html(h).find("div.overview").wrap('<div class="tinycanvas vp"><div class="viewport"></div></div>');
$("div[container=true]").find("div.tinycanvas").prepend('<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>'); $("div[container=true]").find("div.tinycanvas").prepend('<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>');
$("div[container=true] div.overview").html(temp_div.html()); var f = o.layout_data.generate_layout_html(h)
if(isNaN(base_width)){ $("div[container=true] div.overview").html(f.markup);
o.tinyscrollbar_ext({ var settings = {main : ".tinycanvas"};
main : ".tinycanvas", var tsettings = {};
}) if(f.width){
}else{ settings.fill = f.width;
o.tinyscrollbar_ext({
main : ".tinycanvas",
fill : base_width * total_columns
})
} }
if(pagination_variable){
var page_no = 1;
tsettings.onMove = function(x){
if(x < 50){
if(!pagination_link)
pagination_link = o.lastlink;
if(o.paging){
page_no++;
o.paging = false;
o.pagination(pagination_link,pagination_variable,page_no);
}
}
}
}
o.tinyscrollbar_ext(settings,tsettings);
} }
this.paging = true;
this.pagination = function(link,variable,page_no){
var retvalue = null;
$.ajax({
url : link + "?"+variable + "=" + page_no,
type : "get",
success : function(html){
var f = o.layout_data.generate_layout_html(html);
// console.log(f.total)
if(f.total > 0){
$("div[container=true] div.overview").append(f.markup);
if(f.width){
var w = $("div[container=true] div.overview").width();
$("div[container=true] div.overview").width(w+f.width);
}
o.tinyscrollbar.tinyscrollbar_update("relative");
o.paging = true;
}else{o.paging = false;}
}
})
}
this.insert_new_column = function(index){ this.insert_new_column = function(index){
var column_container = $("div[container=true] div.overview"),layout = column_container.attr("content-layout"),base_width = parseInt(column_container.attr("base-width")),column; var column_container = $("div[container=true] div.overview"),layout = column_container.attr("content-layout"),base_width = parseInt(column_container.attr("base-width")),column;
var i = (index == 0? 0 : index-1); var i = (index == 0? 0 : index-1);
@ -387,6 +435,7 @@ var orbitDesktop = function(dom){
if(!customload)customload=false; if(!customload)customload=false;
var target = dom.attr("id"); var target = dom.attr("id");
var url = dom.attr("href"); var url = dom.attr("href");
o.lastlink = url;
o.data_method = dom.attr("callback-method"); o.data_method = dom.attr("callback-method");
if(o.currenthtml!=target){ if(o.currenthtml!=target){
if(o.desktopData[o.currentface] == "undefined") if(o.desktopData[o.currentface] == "undefined")
@ -442,6 +491,7 @@ var orbitDesktop = function(dom){
this.sub_menu_item = function(dom,data){ this.sub_menu_item = function(dom,data){
var sub_data_method = dom.attr('callback-method'); var sub_data_method = dom.attr('callback-method');
if(sub_data_method){ if(sub_data_method){
o.lastlink = dom.attr("href");
$.ajax({ $.ajax({
url : dom.attr("href"), url : dom.attr("href"),
type : "get", type : "get",
@ -1384,14 +1434,14 @@ var orbitDesktop = function(dom){
//tinysettings : tinyscrollbar settings //tinysettings : tinyscrollbar settings
if(typeof target.main == "undefined"){ if(typeof target.main == "undefined"){
o.notify('tinyscrollbar: target undefined','imp',2); o.notify('Tinyscrollbar: target undefined','imp',2);
return; return;
}else{ }else{
target.main = $(target.main); target.main = $(target.main);
} }
//var target.fill = $
var tinysettings = ( typeof tinysettings == 'undefined' ) ? {"axis":"x"} : tinysettings ;
var settings = {"axis":"x"};
$.map(tinysettings,function(val,i){ settings[i] = val })
var count,baseWidth,fillArray,pxs; var count,baseWidth,fillArray,pxs;
if( typeof target.fill == 'string' ){ if( typeof target.fill == 'string' ){
@ -1400,20 +1450,17 @@ var orbitDesktop = function(dom){
// baseWidth = $(target.fill).eq(1).outerWidth(true); // baseWidth = $(target.fill).eq(1).outerWidth(true);
// target.main.find('.overview').width( baseWidth * count); // target.main.find('.overview').width( baseWidth * count);
} else if( typeof target.fill == 'number' ){ } else if( typeof target.fill == 'number' ){
target.main.find('.overview').width( target.fill ); target.main.find('.overview').width( target.fill );
} else if( typeof target.fill == 'undefined' ){ } else if( typeof target.fill == 'undefined' ){
} else { } else {
o.notify('tinyscrollbar: setting width failed','imp',2); o.notify('Tinyscrollbar: setting width failed','imp',2);
} }
if(target.height){ if(target.height){
target.main.height(target.height); target.main.height(target.height);
} }
target.main o.tinyscrollbar = target.main.tinyscrollbar( settings );
.tinyscrollbar( tinysettings )
.find('.scrollbar');
}; };
this.simple_drop_down = function(){ this.simple_drop_down = function(){
// simple dropdown menu // simple dropdown menu

View File

@ -14,7 +14,7 @@ class Panel::PersonalJournal::Desktop::JournalPagesController < ApplicationContr
@level_types = ConferencePaperType.all @level_types = ConferencePaperType.all
@writing_journals = @writing_journals.page(page).per(5) @writing_journals = @writing_journals.page(page).per(50)
respond_to do |format| respond_to do |format|
format.html { render :layout => false} format.html { render :layout => false}

View File

@ -77,7 +77,7 @@
<div class="sdm_t hh1"><span class="icon-question-sign"></span></div> <div class="sdm_t hh1"><span class="icon-question-sign"></span></div>
</div> </div>
</div> </div>
<div class="overview" content-layout="datalist" base-width="300" per-column="1"> <div class="overview" content-layout="datalist" base-width="300" per-column="5" pagination-var="page" >
<% @writing_journals.each do |w| %> <% @writing_journals.each do |w| %>
<%= publication_record w, @view_by%> <%= publication_record w, @view_by%>
<% end %> <% end %>

View File

@ -13,8 +13,10 @@ end
FactoryGirl.create(:journal_co_author_relation) FactoryGirl.create(:journal_co_author_relation)
end end
50.times do 4.times do
FactoryGirl.create(:writing_journal) 50.times do
FactoryGirl.create(:writing_journal)
end
end end
50.times do 50.times do