EVC - Tasks Mashup

Using :- https://github.com/yyx990803/HTML5-Clear

by AaronLayton

HTML

<div id="wrapper"></div>

CSS

#wrapper { width:320px;}
.drag{-webkit-transition:all 0 cubic-bezier(0, 0, 0.2, 1) !important;}
.dragged{z-index:999 !important;box-shadow:0 1px 8px rgba(0, 0, 0, 0.3);-webkit-transition:all 0 cubic-bezier(0, 0, 0.2, 1) !important;}
.slow{-webkit-transition:all 0.35s ease-in-out !important;}
.medium{-webkit-transition:all 0.25s ease-in-out !important;}
.fast{-webkit-transition:all .15s ease !important;}
.bottom{z-index:999 !important;-webkit-transform-origin:50% 0%;-webkit-transform:rotatex(-100deg);opacity:.3;}
.top{z-index:999 !important;-webkit-transform-origin:50% 100%;-webkit-transform:rotatex(85deg);margin-bottom:-60px;position:relative;top:-60px;opacity:.3;}
body{width:100%;padding:0;margin:0;background-color:#000;color:#fff;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;overflow-x:hidden;}
ul{margin:0;padding:0;list-style-type:none;}
a{color:#fff;text-decoration:none;}
#wrapper{overflow-x:hidden;overflow-y:scroll;}
#check,#cross{display:block;width:55px;height:60px;position:absolute;-webkit-transition:opacity 0 cubic-bezier(0, 0, 0.2, 1),-webkit-transform 0 cubic-bezier(0, 0, 0.2, 1);-webkit-perspective:0;-webkit-backface-visibility:hidden;display:none;}
#check{left:0;}
#cross{right:0;}
#home,#listview{position:absolute;width:100%;height:100%;top:0;left:0;-webkit-transition:-webkit-transform 0.15s ease,opacity 0.15s ease;-webkit-perspective:1000;-webkit-backface-visibility:hidden;}#home li.addmore,#listview li.addmore{line-height:60px;text-align:center;font-weight:bold;font-size:18px;color:#ccc;z-index:0;margin-bottom:-60px;}
#home{z-index:2;}
#listview{z-index:1;}
.list,.todo{height:60px;-webkit-user-select:none;-webkit-transition:all .1s ease;-webkit-perspective:0;-webkit-backface-visibility:hidden;position:relative;}.list .inner,.todo .inner{height:58px;padding:0 10px;font-size:18px;font-weight:bold;line-height:58px;border-top:1px solid rgba(255, 255, 255, 0.07);border-bottom:1px solid rgba(0, 0, 0, 0.1);position:relative;}
.list .name,.todo...

JavaScript

// Mashup test

//Templates
var templates = {
    Home: function () {
        return '<ul id="home"></ul>';
    },
    List: function (list) {
        var count = list.count();
        return '<li class="list ' + (count == 0 ? 'empty' : '') + '">'
        + '<div class="inner">'
        + '<div class="name">' + list.name + '</div>'
        + '<div class="count">' + count + '</div>'
        + '</div></li>';
    },
    ListView: function () {
        return '<ul id="listview"></ul>';
    },
    Todo: function (todo) {
        return '<li class="todo ' + (todo.done ? 'done' : '') + '">'
        + '<div class="inner">'
        + '<div class="name">' + todo.name + '<span></span></div>'
        + '</div></li>';
    },
    newList: function (pos) {
        return '<li class="list '+ pos +'">'
        + '<div class="inner">'
        + '<div class="name"><input type="text" value="' + (pos == 'top' ? 'Pull to create item' : 'Tap me') + '"/></div>'
        + '<div class="count">0</div>'
        + '</div></li>'
    },
    newTodo: function (pos) {
        return '<li class="todo '+ pos +'">'
        + '<div class="inner">'
        + '<div class="name"><input type="text" value="' + (pos == 'top' ? 'Pull to create item' : 'Tap me') + '"/></div>'
        + '</div></li>'
    },
    emptyListView: function() {
        return '<li class="addmore">Tap to add new todo</li>';
    },
    emptyHome: function() {
        return '<li class="addmore">Tap to add a new List</li>';
    }
};
//Todo View
var Todo = function (name) {
    this.name = name;
    this.done = false;
};
Todo.prototype = {
    
    render: function (list, index) {
        
        this.list = list;
        this.index = index;
        
        var todo = this,
            dragging = false,
            dragFrom = 0,
            swiping = false,
            touch = {},
            w = 55,
            dx = dy = 0;
            
        todo.el = $(templates.Todo(todo));
        var line = todo.el.find('span');
        
   ...