Major tinyscrollbar update

This commit is contained in:
Harry Bomrah 2013-03-06 19:04:33 +08:00 committed by Matt K. Fu
parent dabceec3ea
commit 6db9e70132
6 changed files with 180 additions and 271 deletions

View File

@ -12,8 +12,7 @@
//confirm-message ="Some message", this will prompt user with a confirm box and show the message before ajax call is made.
//"toggle-onclick" = "classes to get toggle" this will toggle classes on toggle when a tags are clicked.
//"delete-item" = "true" this will remove its respective item from the list.
//"pagination-link" = "url" this url will be used for pagination.. this will override last link url.
//"pagination-var" = "variable to send paramater with url for pagination" this will enable pagination with this attribute for that view.
//for layout tinyscrollbar
//content-layout="datalist|column|simple" datalist is for data list from database.. column is usually for forms and some other pages.. simple is without any columns, the page will be displayed as it is.. base width will be considered the default width for tinyscrollbar
@ -51,8 +50,6 @@ 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;
@ -284,163 +281,63 @@ var orbitDesktop = function(dom){
})
};
this.layout_data = function(h){
var $e;
var column_container,layout, base_width , no_of_entries = 0, 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;
if(entries.length != 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);
}
})
if(x != 0){
temp_div.append(column);
}
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++;
}
break;
case "column":
var entries = column_container.find("div[column=true]"),x = 0,column;
if(entries.length!=0){
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);
})
$(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;
}
var w = (!isNaN(base_width) ? base_width * total_columns : null);
return {"markup":temp_div.html(),"width":w,"total":entries.length};
})
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;
}
$("div[container=true]").html(h).find("div.overview").wrap('<div class="tinycanvas"><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>');
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);
var previous_column = column_container.find(".column").eq(i);
if(previous_column.length == 0)return false;
switch(layout){
case "datalist":
column = $("<div class='column type_column' style='width:"+base_width+"px'></div");
break;
case "column":
column = $("<div class='column type_column' style='width:"+base_width+"px'></div");
break;
default:
return false;
break;
}
if(index == 0){
column.insertBefore(previous_column)
$("div[container=true] div.overview").html(temp_div.html());
if(isNaN(base_width)){
o.tinyscrollbar_ext({
main : ".tinycanvas",
})
}else{
column.insertAfter(previous_column);
o.tinyscrollbar_ext({
main : ".tinycanvas",
fill : base_width * total_columns
})
}
var total_columns = column_container.find(".column").length;
o.tinyscrollbar_ext({
main : ".tinycanvas",
fill : base_width * total_columns
})
return column;
}
this.remove_column = function(index){
var column_container = $("div[container=true] div.overview"),layout = column_container.attr("content-layout"),column = column_container.find(".column").eq(index),base_width = parseInt(column_container.attr("base-width"));
if(column.length == 0)return false;
switch(layout){
case "datalist":
case "column":
break;
default:
return false;
break;
}
column.remove();
var total_columns = column_container.find(".column").length;
o.tinyscrollbar_ext({
main : ".tinycanvas",
fill : base_width * total_columns
})
return column;
}
this.menu_item = function(dom,customload,submenuitem){
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")
@ -496,7 +393,6 @@ 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",
@ -609,12 +505,12 @@ var orbitDesktop = function(dom){
// }
// }
// });
o.simple_drop_down();
o.tinyscrollbar_ext({
main: '.tinycanvas'
})
o.simple_drop_down();
// $("div#group_wrapper ul li[data-category=app]").click(function(){
// o.appWindow({
// title : $(this).find("a").attr("href"),
@ -859,23 +755,10 @@ var orbitDesktop = function(dom){
searchArray = $("div#app_manager .element:containsi("+$(this).val()+")");
if(searchArray.length>0){
$("div#app_manager #seperator").show();
var i = 0;
var $column;
searchArray.each(function(){
i++;
if(i == 1){
$column = $("<div style='width:120px; float:left;'></div>");
}
var $newelement = $('<div class="search element w1 h1 hp vp thmc2" data-category="desktop">'+$(this).html()+'</div>');
$column.append($newelement);
if(i == 4){
$("div#app_manager .search_result").append($column);
i = 0;
}
$("div#app_manager .search_result").prepend($newelement);
})
if(i != 0){
$("div#app_manager .search_result").append($column);
}
}
}else{$("div#app_manager #seperator").hide();$("div#app_manager .search_result").empty();}
}).blur(function(){$(this).val("Search");});
@ -907,6 +790,9 @@ var orbitDesktop = function(dom){
})
return false;
})
o.tinyscrollbar_ext({
main: '.tinycanvas'
})
}
var loadApps = function(){ //this load apps for sorting and searching
$.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){
@ -938,94 +824,59 @@ var orbitDesktop = function(dom){
this.initializeSectionsManager = function(target,url,cache){ // this is init function for section manager
var elementParent,element,slabel;
var bindHandlers = function(){ // this is bind handler for section manager page
var groupWrapperWidth = 0;
$("div#sections .group").each(function(){groupWrapperWidth+=$(this).width();})
var groupWrapperWidth = 0;
$("div#sections .group").width(400);
$("div#sections .group").each(function(){groupWrapperWidth+=$(this).width();})
groupWrapperWidth+=200;
groupWrapperHeight = $(".group").height() + 20;
$("#group_wrapper").width(groupWrapperWidth);
var sortingoptions = {
start:function(){
slabel = $(this).parent().siblings('.section_label');
slabel.find('li:hidden').stop(1,1).fadeIn(500);
},
stop:function(){
slabel.find('li:not(:nth-child(1))').stop(1,1).fadeOut(500);
}
groupWrapperHeight = $(".group").height() + 20;
$("#group_wrapper").width(groupWrapperWidth);
$("div#sections #group_wrapper .grp").sortable({
start:function(){
slabel = $(this).siblings('.section_label');
slabel.find('li:hidden').stop(1,1).fadeIn(500);
},
stop:function(){
slabel.find('li:not(:nth-child(1))').stop(1,1).fadeOut(500);
}
$("div#sections #group_wrapper .appgroup").sortable(sortingoptions);
});
$("div#sections .section_label li:not(:nth-child(1))").droppable({
drop:function(event, ui){
elementParent = ui.draggable.parents('.group');
var $item = $( this ),
$list = $( '#'+$item.data("category") );
$("div#sections .section_label li:not(:nth-child(1))").droppable({
drop:function(event, ui){
elementParent = ui.draggable.parents('.group');
elementParentUl = ui.draggable.parents(".appgroup");
var $item = $( this ),
$list = $( '#'+$item.data("category") );
if($list.children('.element').length>=24){
o.notify("Section is full.","alert");
}else{
ui.draggable.hide('fast',function(){
var newul = false;
if($list.find("ul").length == 0){
$list.append(('<ul class="appgroup w1" ></ul>'));
newul = true;
}else if($list.find("ul:eq(0) li").length == 7){
$list.append(('<ul class="appgroup w1" ></ul>'));
newul = true;
}
$(this).appendTo($list.find("ul:last")).fadeIn();
var next_group = elementParent.find(".grp ul").eq(elementParentUl.index() + 1);
if(elementParentUl.index() == 0){
if(elementParentUl.find("li").length < 7){
var element_to_shift = next_group.find("li").eq(0);
if(element_to_shift.length != 0){
elementParentUl.append(element_to_shift);
}
}
}
if(next_group.find("li").length == 0){
next_group.remove();
}
if(elementParentUl.find("li").length == 0){
elementParentUl.remove();
}
if(elementParent.find(".grp ul").length == 0){
elementParent.find(".grp").addClass("no_app");
}else{
elementParent.find(".grp").removeClass("no_app");
}
if(newul){
$("div#sections #group_wrapper .appgroup").sortable(sortingoptions);
$list.removeClass("no_app");
}
});
$.post("/desktop/save_desktop_settings",{"save":"appnewsection","appid":ui.draggable.attr("id"),"newsectionid":$(this).data("content"),"desktopid":o.desktopId});
if(o.sectionId == $(this).data("content") || o.sectionId == elementParent.attr("id")){
o.desktopData["home"]="";
}
}
$(this).find('span.tile').addClass('op06',400);
},
over:function(){
$(this).find('span.tile').removeClass('op06');
},
out:function(){
$(this).find('span.tile').addClass('op06');
},
accept: '.to_drop'
if($list.children('.element').length>=24){
o.notify("Section is full.","alert");
}
else{
ui.draggable.hide('fast',function(){
$(this).appendTo($list).fadeIn();
});
$.post("/desktop/save_desktop_settings",{"save":"appnewsection","appid":ui.draggable.attr("id"),"newsectionid":$(this).data("content"),"desktopid":o.desktopId});
if(o.sectionId == $(this).data("content") || o.sectionId == elementParent.attr("id")){
o.desktopData["home"]="";
}
}
$(this).find('span.tile').addClass('op06',400);
},
over:function(){
$(this).find('span.tile').removeClass('op06');
},
out:function(){
$(this).find('span.tile').addClass('op06');
},
accept: '.to_drop'
});
};
var loadApps = function(){ // this loads apps from db to in each sections
$.getJSON("/desktop/getapplist",{desktopid:o.desktopId},function(appss){
var $group,$lii,$li;
var z=0;
for(section in o.sectionList){
$group = $('<div class="group" id="'+o.sectionList[section]._id+'"><div class="section_label"><ul class="section_grp"></ul></div><div id="section'+(z+1)+'" class="grp no_app" style="min-width:120px;"></div></div>');
$group = $('<div class="group" id="'+o.sectionList[section]._id+'"><div class="section_label"><ul class="section_grp"></ul></div><ul class="grp" id="section'+(z+1)+'"></ul></div>');
for(x=0;x<4;x++){
if(x==0){
$li = $('<li class="element w1 h1 hp vp thmtxt" data-content="'+o.sectionList[z]._id+'"><span class="tile thmc1"></span><span class="thmtxt">'+o.sectionList[z].name+'</span></li>');
@ -1040,27 +891,19 @@ var orbitDesktop = function(dom){
$("div#group_wrapper").append($group);
}
var x = 0;
var yy=1,y=0;
$.each(appss,function(i,apps){
x = 0;
$.each(apps,function(y,app){
x++;
if(x == 1){
$ul = $('<ul class="appgroup w1" ></ul>');
}
$li = $('<li class="element to_drop w1 hh2 hp vp" data-category="'+app.data_category+'" data-content="'+app.data_content+'" id="'+app._id+'"><div class="appicon"><img src="'+o.iconPath+app.data_content+'.png" class="" width="30" /></div><h1 class="appname thmtxth">'+app.title+'</h1></li>');
$ul.append($li);
if(x == 7){
$("div#group_wrapper div#section"+(i+1)).append($ul);
$("div#group_wrapper div#section"+(i+1)).removeClass("no_app")
x = 0;
}
$.each(apps,function(i,app){
$li = $('<li class="element to_drop w1 hh2 hp vp" data-category="'+app.data_category+'" data-content="'+app.data_content+'" id="'+app._id+'"><div class="appicon"><img src="'+o.iconPath+app.data_content+'.png" class="" width="30" /></div><h1 class="appname thmtxth">'+app.title+'</h1></li>');
$("ul#section"+yy).append($li);
})
if(x != 0){
$("div#group_wrapper div#section"+(i+1)).append($ul);
$("div#group_wrapper div#section"+(i+1)).removeClass("no_app")
if(y==1){
y=-1;
yy++;
}
y++;
})
bindHandlers();
})
@ -1084,7 +927,17 @@ var orbitDesktop = function(dom){
this.initializeSettings.sections = function(){ // this load section page in setting page
var bindHandlers = function(){ // binding handlers in section page
$('.tinycanvas').each(function(){
var h = $(this).parent().height(),
sh = $(this).siblings('.s_tab').height();
o.tinyscrollbar_ext({
main : $(this),
height : h-sh-24,
},{
axis : "y"
})
});
$("a#name_save_btn").click(function(){
var desktopnm = new Array;
$("#desktop_names input").each(function(){
@ -1127,6 +980,19 @@ var orbitDesktop = function(dom){
}
});
});
$('.tinycanvas').each(function(){
var h = $(this).parent().height(),
sh = $(this).siblings('.s_tab').height();
o.tinyscrollbar_ext({
main: $(this),
height: h-sh-24
},{
axis: 'y'
})
});
o.single_select();
o.simple_tab();
@ -1271,6 +1137,9 @@ var orbitDesktop = function(dom){
$('#connection_setting').width(conlist_w);
o.tinyscrollbar_ext({
main: '.tinycanvas'
})
}
var saveaccount = function(usernm,pwd,type,what){
@ -1495,15 +1364,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 settings = {"axis":"x"};
if(typeof tinysettings != "undefined")
$.map(tinysettings,function(val,i){ settings[i] = val })
//var target.fill = $
var tinysettings = ( typeof tinysettings == 'undefined' ) ? {"axis":"x"} : tinysettings ;
var count,baseWidth,fillArray,pxs;
if( typeof target.fill == 'string' ){
@ -1512,17 +1380,20 @@ 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);
}
o.tinyscrollbar = target.main.tinyscrollbar( settings );
target.main
.tinyscrollbar( tinysettings )
.find('.scrollbar');
};
this.simple_drop_down = function(){
// simple dropdown menu

View File

@ -15,7 +15,9 @@
<!-- <div id="co_author_relation_table" class="tinycanvas vp">
<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport"> -->
<%= render :partial => 'show_form'%>
<!-- </div>
</div>
-->

View File

@ -205,6 +205,25 @@
</div>
<!-- </div>
</div> -->
<%= stylesheet_link_tag "token-input-facebook" %>
<%= javascript_include_tag :defaults, "jquery.tokeninput" %>
<script>
$(document).ready(function(){
$(function() {
$("#writing_conference_author_tokens").tokenInput("/panel/personal_conference/desktop/conference_pages/new.json", {
crossDomain: false,
prePopulate: $("#writing_conference_author_tokens").data("pre"),
theme: "facebook",
hintText: "<%=t("hintText")%>",
noResultsText: "<%=t("noResultsText")%>",
searchingText: "<%=t("searchingText")%>"
});
});
});
</script>
<script type="text/javascript">
orbitDesktop.prototype.initializeJournalPapers.conference_title_autocomplete_list = <%= @conference_candidate.to_json.html_safe %>;

View File

@ -15,7 +15,9 @@
<!-- <div id="co_author_relation_table" class="tinycanvas vp">
<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport"> -->
<div class="overview" content-layout="datalist" per-column="5" base-width="300">
<%= render :partial => 'show_form'%>
</div>
<!-- </div>
</div>
-->

View File

@ -6,7 +6,7 @@
</div>
<!-- <div id="co_author" class="tinycanvas vp">
<div class="scrollbar sb_h vp"><div class="track"><div class="thumb thmc2"><div class="end"></div></div></div></div>
<div class="viewport"> -->
<div class="overview" content-layout="datalist" per-column="4" base-width="300" pagination-var="page">
<ul>
<% @journal_co_authors.each_with_index do |co_author,i| %>

View File

@ -229,6 +229,21 @@
<!-- </div>
</div>
-->
<script>
$(document).ready(function(){
$("#writing_conference_author_tokens").tokenInput("/panel/personal_conference/desktop/conference_pages/new.json", {
crossDomain: false,
prePopulate: $("#writing_conference_author_tokens").data("pre"),
theme: "facebook",
hintText: "<%=t("hintText")%>",
noResultsText: "<%=t("noResultsText")%>",
searchingText: "<%=t("searchingText")%>"
});
});
</script>
<script type="text/javascript">
orbitDesktop.prototype.initializeJournalPapers.journal_title_autocomplete_list = <%= @journal_candidate.to_json.html_safe %>;
// orbitDesktop.prototype.initializeJournalPapers.coauthor_autocomplete_list = <%= @co_author_candidate.to_json.html_safe %>;