tinyscrollbar pagination fixed

app/assets/javascripts/jquery.tinyscrollbar.js

@@ -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 )

app/assets/javascripts/orbitdesktop.js

@@ -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>");
+    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++;
-            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());
+    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){
     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
+    o.tinyscrollbar = target.main.tinyscrollbar( settings );
-      .tinyscrollbar( tinysettings )
-      .find('.scrollbar');
   };
   this.simple_drop_down = function(){
     // simple dropdown menu

vendor/built_in_modules/personal_journal/app/controllers/panel/personal_journal/desktop/journal_pages_controller.rb

@@ -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}

vendor/built_in_modules/personal_journal/app/views/panel/personal_journal/desktop/journal_pages/index.html.erb

@@ -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 %>

vendor/built_in_modules/personal_journal/db/seeds.rb

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