moved index.html

javascripts/app.js

@@ -0,0 +1,35 @@
+require.config({
+
+    //load lib files required
+    paths: {
+        jquery: '../bower_components/jquery/dist/jquery',
+        lodash: "../bower_components/lodash/dist/lodash.min",
+        backbone: '../bower_components/backbone/backbone',
+        modernizr: "vendor/custom.modernizr",
+        socket: "../bower_components/socket.io-client/socket.io",
+        text: '../bower_components/text/text',
+    },
+    map: {
+        "*": {
+            // alias underscore to lodash for backbone
+            "underscore": "lodash"
+        }
+    },
+    shim: {
+        backbone: {
+            deps: ["lodash", "jquery"],
+            exports: "Backbone"
+        }
+    },
+
+    waitSeconds: 5
+
+});
+
+//start the app
+require([
+        'views/page'
+    ],
+    function (App) {
+        new App();
+    });

javascripts/collections/list.js

@@ -0,0 +1,21 @@
+define(
+[
+'backbone',
+'models/task'
+],
+
+function(
+Backbone,
+Task
+) {
+
+  var List = Backbone.Collection.extend({
+
+    model: Task,
+    url: '/tasks'
+    
+ });
+
+return List;
+
+});

javascripts/models/task.js

@@ -0,0 +1,35 @@
+define(
+['backbone'
+],
+
+function(
+Backbone
+) {
+
+  var TaskModel = Backbone.Model.extend({
+
+    defaults: {
+	  parentId: 0,
+      content: '',
+      isCompleted: 0,
+      priority: 0
+    },
+
+    toggelCompletedStatus:function(isCompleted){
+    	var prev_isCompleted = isCompleted,
+    		self = this;
+    	this.save({'isCompleted':isCompleted},
+    	{
+    		success:function(){},
+    		error:function(){
+    			//REVERT BACK ON ERROR
+    			self.set({'isCompleted':prev_isCompleted});
+    		}
+    	})
+    }
+
+ });
+
+return TaskModel;
+
+});

javascripts/util/constants.js

@@ -0,0 +1,14 @@
+define(
+[],
+
+function() {
+	
+  var constants = {
+
+      ENTER_KEY :13
+
+ };
+
+return constants;
+
+});

javascripts/views/list.js

@@ -0,0 +1,60 @@
+define(
+    ['jquery',
+        'backbone',
+        'collections/list',
+        'views/task'
+    ],
+
+    function (
+        $,
+        Backbone,
+        List,
+        TaskView
+    ) {
+
+        var ListView = Backbone.View.extend({
+
+            el: $("#main .children"),
+
+            events: {
+                'click #add': 'addTask'
+            },
+
+            initialize: function () {
+                Tasks = this.collection = new List();
+                var fetchPromise = this.collection.fetch();
+
+                fetchPromise.fail(function (e) {
+                    // if the server isn't running load some demo data and a demo warning
+                    $('#header').append('<div class="alert-box warning round">Warning: Running in demo mode, all work will be lost</div>');
+                    var data = JSON.parse(demoData);
+                    for (var i = 0; i < data.length; i++) {
+                        Tasks.add(data[i]);
+                    }
+                }, this);
+
+                this.listenTo(this.collection, 'add', this.renderTask);
+            },
+
+            render: function () {
+                this.collection.each(function (task) {
+                    this.renderTask(task);
+                }, this);
+            },
+
+            renderTask: function (task) {
+                var taskView = new TaskView({
+                    model: task
+                });
+                var a = taskView.render();
+                if (a.model.get('parentId') === 0)
+                    this.$el.append(a.el);
+                else
+                    a.$el.insertAfter($('*[data-id="' + (a.model.get('parentId')||0) + '"]').parents('li:first'));
+            }
+
+        });
+
+        return ListView;
+
+    });

javascripts/views/page.js

@@ -0,0 +1,40 @@
+define(
+['jquery',
+'backbone',
+'views/list',
+'models/task'
+],
+
+function(
+$,
+Backbone,
+ListView,
+Task
+) {
+
+  var PageView = Backbone.View.extend({
+
+    el: $("#main"),
+
+    events: {
+      'keypress #newTask': 'createNewTask',
+      'blur #newTask': 'createNewTask'
+    },
+
+    initialize: function() {
+      this.listView = new ListView();
+      this.input = $('#newTask');
+    },
+
+    createNewTask: function(e) {
+      if (e.keyCode != 13) return;
+      if (!this.input.val().trim()) return;
+      this.listView.collection.add(new Task({content: this.input.val().trim() }));
+      this.input.val('');
+    }
+
+ });
+
+return PageView;
+
+});

javascripts/views/task.js

@@ -0,0 +1,188 @@
+var demoData = '[{"id":44,"content":"Welcome to HackFlowy!","parent":0,"isCompleted":false,"createdAt":"2016-01-29T00:24:42.661Z","updatedAt":"2016-01-29T01:07:02.189Z"},{"id":45,"content":"An open-source WorkFlowy clone","parent":0,"isCompleted":false,"createdAt":"2016-01-29T00:24:42.661Z","updatedAt":"2016-01-29T01:07:06.453Z"},{"id":46,"content":"Built using Backbone + Socket.IO","parent":0,"isCompleted":false,"createdAt":"2016-01-29T00:24:42.661Z","updatedAt":"2016-01-29T01:09:10.862Z"},{"id":47,"content":"I pulled this together in a few hours to learn Backbone","parent":0,"isCompleted":false,"createdAt":"2016-01-29T00:24:42.661Z","updatedAt":"2016-01-29T01:07:47.734Z"},{"id":48,"content":"Feel free to try it out and hack on it","parent":0,"isCompleted":false,"createdAt":"2016-01-29T00:24:42.661Z","updatedAt":"2016-01-29T01:07:42.292Z"},{"id":49,"content":"Good Luck!","parent":0,"isCompleted":true,"createdAt":"2016-01-29T00:24:42.661Z","updatedAt":"2016-01-29T01:08:00.533Z"},{"id":50,"content":"uyi","parent":0,"isCompleted":false,"createdAt":"2016-01-29T01:14:22.854Z","updatedAt":"2016-01-29T01:14:22.854Z"},{"id":51,"content":"uyk","parent":0,"isCompleted":false,"createdAt":"2016-01-29T01:14:25.406Z","updatedAt":"2016-01-29T01:14:25.406Z"},{"id":72,"content":"uu","parent":null,"isCompleted":false,"createdAt":"2016-01-29T02:09:38.202Z","updatedAt":"2016-01-29T02:09:38.202Z"},{"id":73,"content":"yu","parent":null,"isCompleted":false,"createdAt":"2016-01-29T02:09:39.450Z","updatedAt":"2016-01-29T02:09:39.450Z"}]';
+
+define(
+    ['jquery',
+        'backbone',
+        'socket',
+        'util/constants',
+        'text!../../templates/task.html'
+    ],
+
+    function (
+        $,
+        Backbone,
+        io,
+        constants,
+        taskTemplate
+    ) {
+
+        var TaskView = Backbone.View.extend({
+
+            tagName: 'li',
+            template: taskTemplate,
+
+            events: {
+                'click .task': 'edit',
+                'blur .edit': 'close',
+                'keyup .edit': 'handleKeyup',
+                'keypress .edit': 'update',
+                'mouseover .link': 'showOptions',
+                'mouseout .link': 'hideOptions',
+                'click .complete': 'markComplete',
+                'click .uncomplete': 'unmarkComlete',
+                'click .note': 'addNote'
+            },
+
+            initialize: function () {
+                this.listenTo(this.model, 'change', this.render);
+                this.listenTo(this.model, 'destroy', this.remove);
+                this.socket = io.connect();
+                var task = this;
+                this.socket.on('task', function (data) {
+                    if (task.model.id == data.id) {
+                        task.model.set({
+                            'content': data.content,
+                            'isCompleted': data.isCompleted
+                        });
+                    }
+                });
+
+            },
+
+            render: function () {
+                var tmpl = _.template(this.template);
+                var task = this;
+                this.$el.html(tmpl({
+                    model: this.model.toJSON()
+                }));
+                if (this.model.get('parentId') != 0) {
+                    // add a shift[n] class for n-indents
+                    this.$el.addClass('shift1');
+                    var className = $('*[data-id="' + this.model.get('parentId') + '"]').parents('li:first').attr('class');
+                    if (className != undefined && className != 0 && className.substring(0, 5) == 'shift') {
+                        this.$el.removeClass();
+                        this.$el.addClass('shift' + (parseInt(className.charAt(5)) + 1));
+                    }
+                }
+                this.$input = this.$('.edit:first');
+
+                return this;
+            },
+
+            edit: function () {
+                this.$el.addClass('editing');
+                this.$input.focus();
+            },
+
+            handleKeyup: function (e) {
+                // down arrow
+                if (e.keyCode == 40)
+                    this.$el.next('li').find('input').focus();
+                // Up arrow
+                else if (e.keyCode == 38)
+                    this.$el.prev('li').find('input').focus();
+
+                // shift and tab
+                if (e.shiftKey && e.keyCode == 9) {
+                    var model = this.$el.next('li').find('input').data('id');
+                    model = Tasks.get(model);
+                    var old_parent = model.get('parentId');
+                    old_parent = Tasks.get(old_parent);
+                    var new_parent = old_parent.get('parentId');
+                    if (new_parent == null) new_parent = 0;
+                    model.set('parentId', new_parent);
+                    model.save({
+                        content: model.get('content'),
+                        parentId: model.get('parentId')
+                    });
+                }
+                // tab
+                else if (e.keyCode == 9) {
+                    var parent = this.$el.prev('li').prev('li').find('input').data('id');
+                    var current = this.$el.prev('li').find('input').data('id');
+                    var model = Tasks.get(current);
+                    model.set('parentId', parent);
+                    model.save({
+                        content: model.get('content'),
+                        parentId: model.get('parentId')
+                    });
+                }
+
+                this.socket.emit('task', {
+                    id: this.model.id,
+                    parentId: this.model.parentId,
+                    content: this.$input.val().trim(),
+                    isCompleted: this.model.toJSON().isCompleted
+                });
+            },
+
+            update: function (e) {
+                if (e.which === constants.ENTER_KEY) {
+                    this.addNote(e.currentTarget);
+                }
+
+            },
+            /** Finish editing an item **/
+            close: function () {
+                var value = this.$input.val().trim();
+                if (value === '') {
+                    this.model.destroy();
+                } else {
+                    this.model.save({
+                        content: value,
+                        parentId: this.model.attributes.parentId
+                    });
+                }
+                this.$el.removeClass('editing');
+            },
+
+            showOptions: function () {
+                this.$el.find('.options').show();
+            },
+
+            hideOptions: function () {
+                this.$el.find('.options').hide();
+            },
+
+            markComplete: function () {
+                this.model.toggelCompletedStatus(true);
+                this.socket.emit('task', {
+                    id: this.model.id,
+                    parentId: this.model.parentId,
+                    content: this.model.toJSON().content,
+                    isCompleted: this.model.toJSON().isCompleted
+                });
+            },
+
+            unmarkComlete: function () {
+                this.model.toggelCompletedStatus(false);
+                this.socket.emit('task', {
+                    id: this.model.id,
+                    parentId: this.model.parentId,
+                    content: this.model.toJSON().content,
+                    isCompleted: this.model.toJSON().isCompleted
+                });
+            },
+
+            /**
+             * Add a new blank note
+             * @param {object} inputEle Input elelement from current item
+             */
+            addNote: function (inputEle) {
+                var $inputEle = $(inputEle);
+                var currentId = $inputEle.data('id') || 0;
+                parentId = currentId !== 0 ? Tasks.get(currentId).get('parentId') : 0;
+
+                Tasks.add({
+                    content: '',
+                    parentId: parentId
+                });
+                $inputEle.blur();
+                $inputEle.closest('li').next('li').find('input').focus();
+            }
+
+        });
+
+        return TaskView;
+
+    });