Skip to content

Instantly share code, notes, and snippets.

@shyampurk

shyampurk/famous-basic-addtask

Last active August 29, 2015 14:21
Show Gist options
  • Save shyampurk/c6f3363074613ff983f5 to your computer and use it in GitHub Desktop.
Save shyampurk/c6f3363074613ff983f5 to your computer and use it in GitHub Desktop.
Download ZIP
Famo.us basic ToDo app
Raw
famous-basic-addtask
TaskPanel.prototype.addTask = function addTask(taskObj) {
var that = this;
var pos = this.taskSurfaces.length;
var tempTrans = new TransitionableTransform();
var sizeTrans = new Transitionable([5, 5]);
var opacTrans = new Transitionable(0);
var tempMod = new Modifier(
{
size : sizeTrans,
transform : tempTrans,
opacity : opacTrans
}
)
tempTrans.setTranslate([140, 20, 0]);
var tempSurf = new Surface({
//size: [width - 20, 40],
content : _frameTaskContent(taskObj),
properties: {
backgroundColor: "lightgray",
lineHeight: "20px",
textAlign: "center",
overflow : "hidden",
border : "1px solid lightgray",
borderRadius : '5px'
}
});
this.taskSurfaces.unshift([tempMod,tempSurf,tempTrans]);
for(var i = 1 ; i < this.taskSurfaces.length ; i++){
this.taskSurfaces[i][2].setTranslate([10, (50 * i) + 10], { duration: 500 });
}
this.taskContainerSurface.add(tempMod).add(tempSurf);
sizeTrans.set([this.width - 40 , 40],{duration : 500});
tempTrans.setTranslate([10,10,0],{duration : 500});
opacTrans.set(1,{duration : 1000 , curve : Easing.outQuart},function(){
that.taskSurfaces[0][1].setProperties({border : "1px solid #FA5C4F"})
});
tempSurf.taskData = taskObj;
tempSurf.setAttributes({"id" : taskObj.taskid});
var that = this;
tempSurf.on('click', function() {
StatCounter.setCurrTaskModifyId(this.taskData.taskid);
StatCounter.setCurrTaskModifyStatus(this.taskData.status);
that.modifyEventSignal.emit("modify",this.taskData);
});
}
Raw
famous-basic-html
<!doctype html>
<html>
<head>
<title>ToDo App</title>
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no" />
<!-- shims for backwards compatibility -->
<script type="text/javascript" src="http://code.famo.us/lib/functionPrototypeBind.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/classList.js"></script>
<script type="text/javascript" src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<!-- module loader -->
<script type="text/javascript" src="http://code.famo.us/lib/require.js"></script>
<!-- famous -->
<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.0/famous.css" />
<script type="text/javascript" src="js/famous.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pulse.min.js"></script>
<script src="http://cdn.pubnub.com/pubnub-3.7.1.min.js"></script>
<!-- app code -->
<link rel="stylesheet" type="text/css" href="css/app.css" />
<script type="text/javascript">
require.config({
baseUrl: './app/'
});
require(['todo'],function(ToDo){
var TodoApp = new ToDo();
TodoApp.init();
});
</script>
</head>
<body>
<div id="AppFrame">
</div>
</body>
</html>
Raw
famous-basic-init
Todo.prototype.init = function init(){
//Call setupPanel() for all Famo.us containers
this.header.setupPanel(headerHeight);
this.page.setupPanel();
this.float.setupPanel();
//Add all panel to the container view
this.header.addTo(this.context);
this.page.addTo(this.contentView);
this.float.addTo(this.contentView);
//Add container view to the Famo.us context
this.context.add(this.contentModifier).add(this.contentView);
//Initialize all DOM events
_initEvents(this);
}
Raw
famous-basic-modifytask
TaskPanel.prototype.modifyTask = function modifyTask(taskObj) {
var that = this;
var modifiedContent = null;
var contPos = 0;
for(var cnt = 0 ; cnt < this.taskSurfaces.length ; cnt++){
if(this.taskSurfaces[cnt][1].taskData.taskid == taskObj.taskid){
this.taskSurfaces[cnt][1].taskData = taskObj;
contPos = cnt;
modifiedContent = this.taskSurfaces[cnt];
break;
}
}
var modifier = modifiedContent[0];
var taskSurface = modifiedContent[1];
var transformer = modifiedContent[2];
var opacTrans = new Transitionable(1);
opacTrans.set(0, { duration: 1000 }, function(){
for(cnt = contPos - 1 ; cnt >= 0 ; cnt--){
that.taskSurfaces[cnt + 1] = that.taskSurfaces[cnt];
}
that.taskSurfaces[0] = modifiedContent;
transformer.setTranslate([10,10,0]);
for(cnt = 1 ; cnt <= contPos ; cnt++){
that.taskSurfaces[cnt][2].setTranslate([10, (50 * cnt) + 10], { duration: 500 });
}
opacTrans.set(1, { duration: 1000 });
modifiedContent[1].setContent(_frameTaskContent(taskObj));
});
modifier.opacityFrom(function(){
return opacTrans.get();
});
}
Raw
famous-basic-panels
//View container for housing the panels except the header panel
this.contentView = new View();
//Create panel instances
this.header = new HeaderPanel(width,headerHeight);
this.page = new PagePanel(width,height);
this.float = new FloatingPanel(width,height,headerHeight);
....
....
....
....
//Initialize and setup the panel UI
this.header.setupPanel(headerHeight);
this.page.setupPanel();
this.float.setupPanel();
//Add all panel to the container view
this.header.addTo(this.context);
this.page.addTo(this.contentView);
this.float.addTo(this.contentView);
Raw
famous-basic-pubnub-callback
appObj.pubnub.subscribe({
channel : "famo.us-app",
message : function(message){
if(message['req'] == 'add') {
taskContainer.push(message['body']);
appObj.page.addTask(message['body']);
if(message['body']['status']) {
StatCounter.setCompletedTasks(StatCounter.getCompletedTasks() + 1);
}
StatCounter.setTotalTasks(taskContainer.length);
StatCounter.setLastUpdate(message['body']['date']);
appObj.page.updateTaskHeader();
appObj.page.updateIntroContent();
} else if(message['req'] == 'modify') {
if(message['body']['status'] == 1) {
StatCounter.setCompletedTasks(StatCounter.getCompletedTasks() + 1);
message['body']['status'] = true;
}
if(message['body']['status'] == 2) {
StatCounter.setCompletedTasks(StatCounter.getCompletedTasks() - 1);
message['body']['status'] = false;
}
StatCounter.setLastUpdate(message['body']['date']);
appObj.page.updateTaskHeader();
appObj.page.updateIntroContent();
appObj.page.modifyTask(message['body']);
}
}
});
Raw
famous-basic-pubnub-init
this.pubnub = PUBNUB.init({
publish_key : 'demo',
subscribe_key : 'demo'
})
Raw
famous-basic-todo
this.context = Engine.createContext(document.getElementById('AppFrame'));
this.context.setPerspective(1000);
Raw
famous-basic-user-events
$('body').on("click",'#loginButton',function(){
console.log("Login Button Clicked");
if('Select Name' == $('select').val()){
$('label').pulse({opacity: 0.5}, {duration : 200, pulses : 3});
} else {
loginUser = $('select').val();
StatCounter.setUsername(loginUser);
appObj.page.switchoffLoginPanel();
appObj.page.updateTaskHeader();
}
});
$('body').on("click",'#taskButton',function(){
appObj.page.displayTaskPanel();
});
$('body').on("click",'#taskAddButton',function(){
appObj.float.displayAddTaskPanel()
});
$('body').on("click",'#backButton',function(){
appObj.page.displayFrontPanel();
});
$('body').on("click",'#taskBackButton',function(){
appObj.float.hidePanel()
});
$('body').on("click",'#taskAdd',function(){
var taskDescr = $('#taskDescription').val();
var taskOwner = $('#taskAddOwner').val()
if((0 != taskDescr.length) && ("Select Name" != taskOwner)){
var taskDate = new Date().toUTCString();
taskDate = taskDate.substr(0 , taskDate.length - 4);
var taskStatus = $('#taskAddCheck').prop( "checked" );
var taskObj = {
"taskid" : loginUser + '-' + taskLocalSeq,
"descr" : taskDescr,
"owner" : taskOwner,
"date" : taskDate,
"status" : taskStatus
}
$('#taskDescription').val('');
$('#taskAddCheck').prop( "checked" , false );
$('#taskAddOwner').val("Select Name");
taskLocalSeq++;
appObj.pubnub.publish({
channel : "famo.us-app",
message : {"req" : "add" , "body" : taskObj },
});
appObj.float.hidePanel();
} else {
if($('#taskAddOwner').val() == "Select Name"){
$('#taskAddOwner').pulse({opacity: 0.5}, {duration : 200, pulses : 3});
}
}
});
$('body').on("click",'#taskMod',function(){
var taskDescr = $('#taskModDescription').val();
var taskOwner = $('#taskModOwner').val()
if((0 != taskDescr.length) && ("Select Name" != taskOwner)){
var taskDate = new Date().toUTCString();
taskDate = taskDate.substr(0 , taskDate.length - 4);
var taskStatus = $('#taskModCheck').prop( "checked" );
var taskObj = null;
for(var cnt = 0;cnt < taskContainer.length;cnt++){
if(taskContainer[cnt].taskid == StatCounter.getCurrTaskModifyId()){
taskObj = taskContainer[cnt];
break;
}
}
taskObj.descr = $('#taskModDescription').val();
taskObj.owner = $('#taskModOwner').val();
taskObj.date = taskDate;
taskObj.status = $('#taskModCheck').prop("checked");
var modPublishStatus = 0; //No Change
if((StatCounter.getCurrTaskModifyStatus() != taskObj.status) && (true == taskObj.status) ) {
modPublishStatus = 1; //Increment Completed tasks
}
if((StatCounter.getCurrTaskModifyStatus() != taskObj.status) && (false == taskObj.status) ) {
modPublishStatus = 2; //Decrement Completed tasks
}
//Update status with the special meaning for publishing modify data
taskObj.status = modPublishStatus;
appObj.pubnub.publish({
channel : "famo.us-app",
message : {"req" : "modify" , "body" : taskObj },
});
appObj.float.clearModifyPanel();
appObj.float.hidePanel();
StatCounter.clearCurrTaskModifyId();
} else {
if($('#taskModOwner').val() == "Select Name"){
$('#taskModOwner').pulse({opacity: 0.5}, {duration : 200, pulses : 3});
}
}
});
$('body').on("click",'#taskModBackButton',function(){
appObj.float.clearModifyPanel();
appObj.float.hidePanel();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment