I wrote a web files browser. I want to refactor my JavaScript code, but I'm new to JavaScript.
I have some thoughts:
Split the file into several files:
FoldersManager.js
FilesManager.js
Paginator.js
GlobalVars.js
Do you have any other ideas?
Naming conventions: How should functions\vars names be written?
I wrote my code flat. How can I refactor it to objects easily?
var folders_tree;
var data_per_folder = [];
var current_folder = {};
// folder_id: "",
// folder_name: ""
//};
var current_page = 1;
var file_types_lookup = [];
$(function () {
fillFileTypesLookup();
// set topbar_links onClick to alter div content
$(".nav li a").attr({
"onclick": "topbarItem_OnClick(this.href)"
});
// set pagination onClick to alter div file_content
$(".pagination li a").attr({
"onclick": "paginationItem_OnClick(this)"
});
$("#add_folder").click(function () {
$('#new_folder_modal').modal('show');
});
$("#remove_folder").click(function () {
sendDeleteFolderRequestAndUpdateFilesTree();
});
$("#edit_folder").click(function () {
$('#edit_folder_name').val(current_folder.attr('name'));
$('#edit_folder_color').val(current_folder.attr('color'));
$('#edit_folder_description').val(current_folder.attr('description'));
$('#edit_folder_modal').modal('show');
});
//otherwise will create modal with default values.
$('#extra_details_modal').modal({
backdrop: true,
keyboard: true
});
//otherwise will create modal with default values.
$('#new_folder_modal').modal({
backdrop: true,
keyboard: true
});
//set jsTree
$("#jstree").jstree({
"json_data": {
//initial - demo only, usually takes json from the controller
//static data, or function(node, mappingBeforeRequestToserver)
//"data": data,
//combines with data above
"ajax": {
//data: mappingBeforeRequestToserver-function(node about to be open or -1). `this` will be the tree instance)
//url: function(node about to be open as a paramater or -1) retuns the ajax URL (like /get_children/node_2).
//The error and success functions- modifiying the results from the server before populating the tree
type: "GET",
async: true,
url: function (node) {
if (node == -1) {
return 'Manager/GetLocations';
}
// else {
// return 'Manager/GetAttachments';
// }
},
data: function (node) {
if (node == -1) {
return {
'userId': 'a358ab9d-d481-4bdd-8cb2-18ddc8898c78'
};
}
// else {
// return {
// 'userId': 'a358ab9d-d481-4bdd-8cb2-18ddc8898c78',
// 'count': '5',
// 'locationId': node[0].id,
// 'startIndex': '0'
// };
// }
},
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: true,
success: function (msg) {
// alert("succeeded" + msg);
folders_tree = msg;
return msg;
},
error: function (msg) {
// alert(msg);
}
},
"xsl": "flat",
"override_ui": "true",
"real_checkboxes": "true",
},
"plugins": ["themes", "json_data", "ui", "crrm"]
}).bind("select_node.jstree", onSelectFolder);
});
function topbarItem_OnClick(href) {
$(".pill-content>div").hide();
var indexOfHash = href.indexOf("#");
var selected = href.substring(indexOfHash);
$(selected).show();
};
function paginationItem_OnClick(paginationItem) {
//we are already in a page.
//current_folder.attr('id') and current_folder.attr('name') are not undifined
//paginationItem.attr({class : "active"});
var pageNum = paginationItem.text;
current_page = pageNum;
$(".pagination li.active").removeAttr("class");
$("#pagination_" + pageNum).attr("class", "active");
//console.debug(pageNum);
if (data_per_folder[current_folder.attr('id')].data_per_page[pageNum] == undefined) // no data for pageNum
{
fillAttachmentsPerPage(pageNum);
} else {
populatePage(pageNum);
}
};
function onSelectFolder(event, data) {
topbarItem_OnClick('#files');
current_folder = data.rslt.obj;
//current_folder.attr('id') = data.rslt.obj.attr('id');
//current_folder.attr('name') = data.rslt.obj.attr('name');
if (data_per_folder[current_folder.attr('id')] == undefined) //no data for this folder
{
data_per_folder[current_folder.attr('id')] = {
data_per_page: []
};
}
if (data_per_folder[current_folder.attr('id')].data_per_page[1] == undefined) // no data for first page
{
fillAttachmentsPerPage(1);
} else {
populatePage(1);
}
};
function populatePage(pageNum) {
$("#files_gallery")[0].innerHTML = data_per_folder[current_folder.attr('id')].data_per_page[pageNum].attachments_markup;
$("#files #files_header")[0].innerHTML = '<li><a href="/user/messages"><span class="file_item"> attachments for folder (name: ' + current_folder.attr('name') + ' id : ' + current_folder.attr('id') +
' parentId: ' + current_folder.attr('parentId') + ' description : ' +current_folder.attr('description')+')</span></a></li>';
}
function fillFileTypesLookup() {
if (file_types_lookup.length == 0) // no files types in lookup
{
createAjaxRequest("Manager/GetTopAttachmentTypes", null).done(function (res) {
for (var i = 0; i < res.length; i++) {
file_types_lookup[res[i].TypeId] = res[i];
}
});
}
}
function fillAttachmentsPerPage(pageNum) {
createAjaxRequest("Manager/GetAttachments", {
'userId': 'a358ab9d-d481-4bdd-8cb2-18ddc8898c78',
//'3141a957-05e5-4678-9f5d-4cc9f41d1a00',
'count': '16',
//attachments per page
'locationId': current_folder.attr('id'),
'startIndex': (pageNum - 1) * 16
}).done(function (res) {
//res = IEnumerable<Attachment> Attachments, long TotalCount, long LastIndex
var attachments_divs = "";
for (var i = 0; i < res.Attachments.length; i++) {
//attachment_img = '<a><img src="/Images/Browser/file_types/'+res.Attachments[i].AttachmentTypeId +'.png" title= "name: '+ res.Attachments[i].Name+'"/></a>';
attachment_img = '<img src="' + file_types_lookup[res.Attachments[i].AttachmentTypeId].IconUrl + '" title= "name: ' + res.Attachments[i].Name + '" onclick="Attachment_onClick(\'' + res.Attachments[i].AttachmentId + '\')" />';
attachments_divs = attachments_divs + ' <div> ' + attachment_img + ' </div>';
}
data_per_folder[current_folder.attr('id')].data_per_page[pageNum] = {
first_index: 0,
last_index: res.TotalCount,
count: res.LastIndex,
attachments: res.Attachments,
attachments_markup: attachments_divs,
attachment_extraDetails: []
};
populatePage(pageNum);
});
}
function Attachment_onClick(attachmentId) {
if (data_per_folder[current_folder.attr('id')].data_per_page[current_page].attachment_extraDetails[attachmentId] == undefined) {
createAjaxRequest("Manager/GetAttachmentExtraDetails", {
'attachmentId': attachmentId
}).done(function (res) {
//res = AttachmentExtraDetails: Guid AttachmentId, string MessageLink, string AttachmentLink,
// DateTime SentTime, DateTime ArrivalTime, int Size, Guid SenderFriendId, string SenderEmail
var sentTimeStr = new Date(parseInt(res.SentTime.substring(6,19),10)*1000).toString();
var arrivalTimeStr = new Date(parseInt(res.ArrivalTime.substring(6,19),10)*1000).toString();
var sizeStr;
if (res.Size > 1000)
sizeStr = res.Size / 1000+'.'+ (res.Size % 1000) / 100 +' MB';
else
sizeStr = res.Size +' KB';
var attachments_paragraphs = '<p>Attachment Id: ' + res.AttachmentId + '</p> <p>Message Link: ' + res.MessageLink + '</p>'+
'<p>Attachment Link: ' + res.AttachmentLink +'</p> <p>Sent Time: ' + sentTimeStr + '</p> <p>Arrival Time: ' + arrivalTimeStr + '</p>'+
'<p>Size: '+sizeStr+' </p> <p>Sender Friend Id: '+res.SenderFriendId+'</p> <p>Sender Email: '+res.SenderEmail+' </p>';
data_per_folder[current_folder.attr('id')].data_per_page[current_page].attachment_extraDetails[attachmentId] = {attachments_markup : attachments_paragraphs};
fillExtraDetailsModalAndShow(attachmentId);
});
}
if (data_per_folder[current_folder.attr('id')].data_per_page[current_page].attachment_extraDetails[attachmentId] != undefined) { // not the first time
fillExtraDetailsModalAndShow(attachmentId);
}
};
function fillExtraDetailsModalAndShow(attachmentId){
$(".modal-body").html(data_per_folder[current_folder.attr('id')].data_per_page[current_page].attachment_extraDetails[attachmentId].attachments_markup);
$('#extra_details_modal').modal('show');
};
function sendCreateNewFolderRequestAndUpdateFilesTree()
{
if (validateCreateNewFolderDialog())
{
var new_folder_descriptor = {};
new_folder_descriptor.name = $('#new_folder_name').val();
new_folder_descriptor.color = $('#new_folder_color').val();
new_folder_descriptor.description = $('#new_folder_description').val();
new_folder_descriptor.userId = 'a358ab9d-d481-4bdd-8cb2-18ddc8898c78';
new_folder_descriptor.parentId = current_folder.attr('id');
createAjaxRequest("Manager/CreateNewLocation",
{
'name': new_folder_descriptor.name,
'color' : new_folder_descriptor.color,
'userId' : new_folder_descriptor.userId,
'parentId' : new_folder_descriptor.parentId,
'description' : new_folder_descriptor.description
}).done(function (res) {
if (res.IsSucceeded)
{
new_folder_descriptor.locationId = res.LocationId;
createNewFolderInFilesTree(new_folder_descriptor);
$('#new_folder_modal').modal('hide');
}
//TODO: benda else: error
});
}
};
function validateCreateNewFolderDialog()
{
var isValid = false;
if ($('#new_folder_name').val() != "")
{
$('#new_folder_name_div').attr("class", "clearfix");
isValid = true;
}
else
{
//TODO: benda fix css
//$('#new_folder_name').attr("color", "#b94a48");
// $('#folder_name_div').attr("class", "clearfix error");
}
return isValid;
};
function createNewFolderInFilesTree(new_folder_descriptor)
{
$("#jstree").jstree("create", null, "last", {
"data": new_folder_descriptor.name,
"attr": {
"id": new_folder_descriptor.locationId,
"color": new_folder_descriptor.color,
"description": new_folder_descriptor.description,
"parentId" : new_folder_descriptor.parentId,
"name": new_folder_descriptor.name
},
"state": "opened"
}, null, //null instead of delegate like: function(data) {this.attr('id')= this.data},
true); //"skip_rename"
};
function sendDeleteFolderRequestAndUpdateFilesTree()
{
var new_folder_descriptor = {};
new_folder_descriptor.userId = 'a358ab9d-d481-4bdd-8cb2-18ddc8898c78';
new_folder_descriptor.locationId = current_folder.attr('id');
createAjaxRequest("Manager/DeleteLocation",
{
'locationId' : new_folder_descriptor.locationId
}).done(function (isSucceeded) {
if (isSucceeded)
{
deleteFolderInFilesTree();
//current_folder = {};
}
//TODO: benda else: error
});
};
function deleteFolderInFilesTree()
{
$("#jstree").jstree("remove", null);
};
function sendEditFolderRequestAndUpdateFilesTree()
{
var edit_folder_descriptor = {};
edit_folder_descriptor.userId = 'a358ab9d-d481-4bdd-8cb2-18ddc8898c78';
edit_folder_descriptor.locationId = current_folder.attr('id');
edit_folder_descriptor.name = $('#edit_folder_name').val();
edit_folder_descriptor.color = $('#edit_folder_color').val();
edit_folder_descriptor.description = $('#edit_folder_description').val();;
edit_folder_descriptor.parentId = current_folder.attr('parentId');
createAjaxRequest("Manager/EditLocation",
{
'locationId' : edit_folder_descriptor.locationId,
'name': edit_folder_descriptor.name,
'color' : edit_folder_descriptor.color,
'userId' : edit_folder_descriptor.userId,
'parentId' : edit_folder_descriptor.parentId,
'description' : edit_folder_descriptor.description
}).done(function (isSucceeded) {
if (isSucceeded)
{
current_folder = {};
editFolderInFilesTree(edit_folder_descriptor);
$('#edit_folder_modal').modal('hide');
}
//TODO: benda else: error
});
};
function editFolderInFilesTree(edit_folder_descriptor)
{
var editedNode = $("#"+edit_folder_descriptor.locationId);
editedNode.attr('name',edit_folder_descriptor.name);
editedNode.attr('color',edit_folder_descriptor.color);
editedNode.attr('description',edit_folder_descriptor.description);
editedNode.attr('parentId',edit_folder_descriptor.paretnId);
editedNode.attr('id',edit_folder_descriptor.locationId);
$("#jstree").jstree("refresh", null);
};