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 )
{
var options = $.extend( {}, $.tiny.scrollbar.options, params );
this.each( function()
{
$( this ).data('tsb', new Scrollbar( $( this ), options ) );
});
@ -42,6 +42,7 @@
$.fn.tinyscrollbar_update = function(sScroll)
{
return $( this ).data( 'tsb' ).update( sScroll );
};
@ -190,7 +191,13 @@
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 )

View File

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

View File

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

View File

@ -77,7 +77,7 @@
<div class="sdm_t hh1"><span class="icon-question-sign"></span></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| %>
<%= publication_record w, @view_by%>
<% end %>

View File

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