casbah
Version:
Contract Administration Site * Be Architecural Heroes *
290 lines (235 loc) • 8.15 kB
HTML
<script type='text/javascript'>
/**
var project={};
project.change=function(pid, field, valu, callback){
// change field:values in project_json located in a particular project dir
$.ajax({
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
data: $.param({
action:"PROJECT-CHANGE",
project_id:pid,
field:field,
valu:valu
}),
error: function(err){ console.log(err.message);},
success: function(result){ if (typeof callback =="function"){callback();}},
type:"POST",
url:"/uploads"
});
};
project.current_menu=function(){
// Called from Menu
var caller=project.menu.menu("option","caller");
var pid=$(caller).closest("[project_id]").attr("project_id");
$("#browser_tab").text("CASBAH-"+pid);
localStorage.setItem("project_id", pid);
};
project.current_page=function(el){
// Called from page
var pid=$(el).text();
$("#browser_tab").text("CASBAH ("+pid+")");
localStorage.setItem("project_id", pid);
};
// text editor
project.ed=new casbah.Editor();
// Open text editor...
project.edit=function(el){
project.ed.text(el, function(){
project.update(project.ed.row(), project.ed.rowid(), true);
project.ed.hide();
var pid=project.ed.target_attr("pid");
var field=project.ed.target_attr("field");
var text=project.ed.val();
console.log("FIELD",field, " UPDATED TEXT:", text);
project.change(pid, field, text, function(){
project.ed.hide();
//refresh (server request and render), alt just render cache...
project.refresh();
})
});
};
project.insert_menu=function(){
//Called from Menu
var caller=project.menu.menu("option","caller");
//var pid=$(caller).closest("[project_id]").attr("project_id");
var pid=$(caller).attr("project_id");
var project_id=prompt("New Project ID", pid);
if (project_id != "" && project_id != null){
$.ajax({
data:$.param({action:"PROJECT-INSERT", project_id:project_id}),
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
error:function(err){console.log("Error from server:", err);},
success:function(result){project.refresh(); },
type:"POST",
url:"/uploads"
});
}
};
// initialize context menu...
project.menu=$("#project-menu").menu().css("position","absolute", "width", "200px").hide();
project.refresh=function(){
$.ajax({
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
data: $.param({action:"PROJECT-SELECT"}),
error: function(err){ console.log("Error", err);},
success: function(result){
//casbah.renderFX("project-content", project.content, result, delta);
$("#project-placeholder").html(project.template(result));
},
type:"POST",
url:"/uploads"
});
};
project.update=function(row, rowid, flag){
console.log("Project update ROW:",row," ROWID:", rowid);
//TO DO...
};
//////////////////////////////////////////////////
//load templates and render...
$.get("client/header.html", function(htm){
//beware - this is asynchronous so risk of project.header being undefined if called outside this function
project.header_template=Handlebars.compile(htm);
$("#project-header-placeholder").html(project.header_template({doc_type:"Project Log"}));
});
project.template=Handlebars.compile($("#project-template").html());
project.refresh();
*/
var folder={};
folder.refresh=function(el){
var folder_path;
if (typeof el=="undefined") {folder_path=localStorage.getItem("folder_path");}
else {folder_path=$(el).attr("folder_path")+"\\"+$(el).text();}
if (typeof folder_path=="undefined") {folder_path="";}
$.ajax({
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
data: $.param({
action:"FOLDER-SELECT",
folder_path:folder_path,
project_id:localStorage.getItem("project_id")
}),
error: function(err){ console.log("Error", err);},
success: function(result){
//result={folder_path:"uploads/prj-001", folders:[], files:[]}
//render list of folders
$("#folder-placeholder").html(folder.template(result));
//then render data related to each folder
for (var i in result.folders){
//folder.refresh_data(result.folder_path, result.folders[i])
}
},
type:"POST",
url:"/uploads"
});
};
folder.refresh_data=function(folder_path, folder_name){
$.ajax({
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
data: $.param({
action:"FOLDER-DATA",
folder_path:folder_path,
folder_name:folder_name
}),
error: function(err){ console.log("Error", err);},
success: function(result){
//result={folder_name:"somename", folder_type:"", desc:""}
//note using multiple selectors without comma means AND...
$("[folder_name='"+result.folder_name+"'][folder_type]").text(result.folder_type);
$("[folder_name='"+result.folder_name+"'][folder_desc]").text(result.folder_desc);
},
type:"POST",
url:"/uploads"
});
};
folder.insert=function(ev){
// Inserts a new sub-folder into current folder
// Called from Menu
var caller=folder.menu.menu("option","caller");
// parent info stored in element {{parent}}
var path=$(caller).attr("path");
// doc_type set in menu
var folder_type=folder.menu.menu("option","folder_type");
//var parent=$(ev.target).attr("parent");
var folder=prompt("New folder");
if (folder != "" && folder != null){
$.ajax({
data:$.param({action:"FOLDER-INSERT", folder:folder, parent:parent, doc_type:doc_type}),
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
error:function(err){console.log("Error from server:", err);},
success:function(result){folder.refresh(); },
type:"POST",
url:"/uploads"
});
}
};
folder.template=Handlebars.compile($("#folder-template").html());
folder.refresh();
</script>
</head>
<body>
<!-- PAGE -->
<div class="container">
<div id="folder-placeholder">placeholder</div>
<br><br><br><br>
</div>
<template id="folder-template" type="text/x-handlebars-template">
<div class="row"
onmouseenter="$(this).addClass('highlight')"
onmouseleave="$(this).removeClass('highlight')"
title="Right-click for menu..."
oncontextmenu="casbah.showMenu(folder.menu, event)">
<h3 class="col-xs-12">{{folder_path}}</h3>
</div>
<div class="row zebra row__" >
<span class="col-xs-6 row-head marz">Sub-folders ({{folders.length}})</span>
<span class="col-xs-1 row-head marz">Type</span>
<span class="col-xs-5 row-head marz">Description</span>
</div>
{{#each folders }}
<div class="row">
<p class="col-xs-6 marz"
onmouseenter="$(this).addClass('highlight')"
onmouseleave="$(this).removeClass('highlight')"
title="Click to view"
folder_path="{{../folder_path}}"
onclick="folder.refresh(this);">{{this}}</p>
<p class="col-xs-1 marz"
folder_type
folder_path="{{../folder_path}}"
folder_name="{{this}}">--</p>
<p class="col-xs-5 marz"
folder_desc
folder_path="{{../folder_path}}"
folder_name="{{this}}">--</p>
</div>
{{/each}}
<div class="row zebra" >
<span class="col-xs-6 row-head">Files ({{files.length}})</span>
<span class="col-xs-1 row-head">Type</span>
<span class="col-xs-5 row-head">Description</span>
</div>
{{#each files }}
<div class="row marz">
<p class="col-xs-6"
onmouseenter="$(this).addClass('highlight')"
onmouseleave="$(this).removeClass('highlight')"
title="Click to view"
folder_path="{{../folder_path}}"
onclick="folder.refresh(this);">{{this}}</p>
<p class="col-xs-1"
file_type
folder_path="{{../folder_path}}"
folder_name="{{this}}">--</p>
<p class="col-xs-5"
file_desc
folder_path="{{../folder_path}}"
folder_name="{{this}}">--</p>
</div>
{{/each}}
</template>
<!-- MENUS -->
<ul id="folder-menu" onmouseleave="folder.menu.hide()" class="hide9999">
<li onclick="folder.insert_menu();">New Folder</li>
<li onclick="folder.refresh();">Refresh Page</li>
<li onclick="folder.menu.hide()">Exit Menu</li>
</ul >