From c17412477d5dbb454a331ec4f4fb7ba4cce11030 Mon Sep 17 00:00:00 2001 From: Is Isilon Date: Sat, 30 Jan 2016 21:00:33 +0800 Subject: [PATCH] Added nested rendering, collapsing nodes, uses marionette --- bower.json | 8 +- public/index.html | 44 +++++- public/javascripts/app.js | 11 +- public/javascripts/models/task.js | 4 +- public/javascripts/util/constants.js | 9 +- public/javascripts/views/list.js | 121 ++++++++++------ public/javascripts/views/page.js | 2 +- public/javascripts/views/task.js | 207 +++++++++++++-------------- public/stylesheets/app.css | 17 ++- public/templates/task.html | 12 +- 10 files changed, 264 insertions(+), 171 deletions(-) diff --git a/bower.json b/bower.json index 4857b9e..21be4e3 100644 --- a/bower.json +++ b/bower.json @@ -15,13 +15,13 @@ "text": "requirejs-text#~2.0.14", "jquery": "~2.2.0", "backbone": "~1.2.3", - "backbone.localStorage": "1.1.16", "lodash": "~4.0.1", "requirejs": "~2.1.22", - "underscore": "~1.8.3", "modernizr": "~3.3.1", - "zepto": "~1.1.6", "localforage": "~1.3.3", - "localforage-backbone": "~0.6.2" + "localforage-backbone": "~0.6.2", + "normalize-css": "normalize.css#~3.0.3", + "backbone.marionette": "~2.4.4", + "underscore": "~1.8.3" } } diff --git a/public/index.html b/public/index.html index 116828e..91c69bf 100644 --- a/public/index.html +++ b/public/index.html @@ -53,7 +53,7 @@ var elem = document.getElementById("footer-qoute"); var newQoute = qoutes[Math.floor(Math.random() * qoutes.length)] + ' <3 Open Source.'; //if (newQoute.length>100){ - // TODO(wassname) truncate long qoutes with a more link + // TODO(wassname) truncate long qoutes with a more link //} elem.textContent = newQoute @@ -67,4 +67,46 @@ +
+ + + + + + + diff --git a/public/javascripts/app.js b/public/javascripts/app.js index 7ffa76f..2176cec 100644 --- a/public/javascripts/app.js +++ b/public/javascripts/app.js @@ -3,23 +3,18 @@ require.config({ //load lib files required paths: { jquery: '../bower_components/jquery/dist/jquery', - lodash: "../bower_components/lodash/dist/lodash.min", + underscore: "../bower_components/underscore/underscore", backbone: '../bower_components/backbone/backbone', localforage: '../bower_components/localforage/dist/localforage', localforagebackbone: '../bower_components/localforage-backbone/dist/localforage.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" - } + marionette: '../bower_components/backbone.marionette/lib/backbone.marionette' }, shim: { backbone: { - deps: ["lodash", "jquery"], + deps: ["underscore", "jquery"], exports: "Backbone" } }, diff --git a/public/javascripts/models/task.js b/public/javascripts/models/task.js index ac48cff..c01f551 100644 --- a/public/javascripts/models/task.js +++ b/public/javascripts/models/task.js @@ -13,6 +13,7 @@ function ( var TaskModel = Backbone.Model.extend({ offlineSync: Backbone.localforage.sync('TaskModel'), + /** switches sync between server and local databases **/ sync: function () { @@ -26,7 +27,8 @@ function ( parentId: 0, content: '', isCompleted: 0, - priority: 0 + priority: 0, + id: '', }, toggelCompletedStatus: function (isCompleted) { diff --git a/public/javascripts/util/constants.js b/public/javascripts/util/constants.js index f193243..52cc4bb 100644 --- a/public/javascripts/util/constants.js +++ b/public/javascripts/util/constants.js @@ -2,13 +2,16 @@ define( [], function() { - + var constants = { - ENTER_KEY :13 + ENTER_KEY :13, + UP_ARROW: 38, + DOWN_ARROW: 40, + TAB: 9, }; return constants; -}); \ No newline at end of file +}); diff --git a/public/javascripts/views/list.js b/public/javascripts/views/list.js index 12e844c..c295db6 100644 --- a/public/javascripts/views/list.js +++ b/public/javascripts/views/list.js @@ -3,7 +3,9 @@ define( 'backbone', 'collections/list', 'views/task', - 'data/demo' + 'data/demo', + 'text!../../templates/task.html', + 'marionette' ], function ( @@ -11,21 +13,29 @@ define( Backbone, List, TaskView, - demoData + demoData, + listTemplate, + Marionette ) { - var ListView = Backbone.View.extend({ + // The tree's root: a simple collection view that renders + // a recursive tree structure for each item in the collection + var ListView = Backbone.Marionette.CollectionView.extend({ el: $("#main .children"), + childView: TaskView, + template: '#list-view-template', events: { 'click #add': 'addTask' }, initialize: function () { - Tasks = this.collection = new List(); + var self = this; - this.listenTo(this.collection, 'add', this.renderTask); + Tasks = new List(); + + // this.listenTo(this.collection, 'add', this.renderTask); /** Load demo data **/ function loadDemoData() { @@ -35,64 +45,91 @@ define( } } - function success(data) { + function success(children, data, promise) { // load demo data if the server returns nothing - if (data.length === 0) + if (children.length === 0) loadDemoData(); + else { + this.collection = {models:Tasks.filter({'parentId':0})}; + this.render(); + } } - this.collection.fetch({ + Tasks.fetch({ success: success, error: function () { + // switch to localforage database if server isn't present and fetch again window.hackflowyOffline=true; $('#header').append('
Running in offline mode, data may be lost
'); Tasks.fetch({ - success: success + success: success, + context: this }); - } + }, + context: this }); }, - render: function () { - this.collection.each(function (task) { - this.renderTask(task); - }, this); - }, + // Only show direct children + filter: function (child, index, collection) { + return child.get('parentId') === 0; + }, + + // render: function () { + // var models = Tasks.filter({'parentId':0}); + // + // _.each(models, function(model, index) { + // var taskView = new this.childView({ + // model: model, + // collection: model.collection + // }); + // var a = taskView.render(); + // this.$el.append(a.el); + // }, this); + // + // this.triggerMethod('render', this); + // return this; + // }, renderTask: function (task) { var taskView = new TaskView({ model: task }); var a = taskView.render(); - if (a.model.get('parentId') === 0) { - // inset it at the end of the root list - this.$el.append(a.el); - } else { - // insert after the currently edited sibling (same parent) - // or after the last sibling - var parent = $('*[data-id="' + a.model.get('parentId') + '"]'); - var siblings = $('*[data-parent-id="' + a.model.get('parentId') + '"]').parents('li') - if (siblings.length>0){ - var editingSibling = siblings.filter('.editing') - var lastSibling = siblings.filter(':last'); - if (editingSibling) - a.$el.insertAfter(editingSibling); - else - a.$el.insertAfter(lastSibling); - } - else if (parent.length < 0) { - a.$el.insertAfter(parent.parents('li:first')); - } else { - // TODO deal with loading order - console.error("Parent not rendered yet: ", { - selector: parent.selector, - task: task - }); - this.$el.append(a.el); - } - } + this.$el.append(a.el); + // + // if (a.model.get('parentId') === 0) { + // // insert it at the end of the top-level items + // this.$el.append(a.el); + // } else { + // + // // TODO use dom nesting instead of data attributes + // var parent = $('*[data-id="' + a.model.get('parentId') + '"]').parents('li:first'); + // var siblings = parent.find('.children:first li'); + // var editingSibling = siblings.filter('.editing:first'); + // + // if (editingSibling.length > 0){ + // // insert it after open sibling + // a.$el.insertAfter(editingSibling); + // } + // else if (parent.length > 0) { + // // insert under parent + // a.$el.appendTo(parent.find('.children:first')); + // } else { + // // we have an orphan :( + // // insert at root for lack of a better option + // this.$el.append(a.el); + // + // // TODO deal with loading order + // console.error("Parent not rendered yet: ", { + // selector: parent.selector, + // task: task + // }); + // + // } + // } } }); diff --git a/public/javascripts/views/page.js b/public/javascripts/views/page.js index 6868d93..9bdeca2 100644 --- a/public/javascripts/views/page.js +++ b/public/javascripts/views/page.js @@ -22,7 +22,7 @@ Task }, initialize: function() { - this.listView = new ListView(); + listView = this.listView = new ListView(); this.input = $('#newTask'); }, diff --git a/public/javascripts/views/task.js b/public/javascripts/views/task.js index 84b0e20..9b6c2c6 100644 --- a/public/javascripts/views/task.js +++ b/public/javascripts/views/task.js @@ -5,7 +5,8 @@ define( 'backbone', 'socket', 'util/constants', - 'text!../../templates/task.html' + 'text!../../templates/task.html', + 'marionette', ], function ( @@ -13,136 +14,130 @@ define( Backbone, io, constants, - taskTemplate + taskTemplate, + Marionette ) { + // The recursive tree view http://jsfiddle.net/wassname/zf61mLvh/2/ + var TaskView = Backbone.Marionette.CompositeView.extend({ - var TaskView = Backbone.View.extend({ + template: '#task-view-template', + tagName: 'ul', + className: "shift", - tagName: 'li', - template: taskTemplate, + ui: { + input: '.task input', + options: '.task .options:first' + }, 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' + 'click .task:first': 'edit', + 'blur .edit:first': 'close', + 'keydown .edit:first': 'handleKey', + 'keypress .edit:first': 'handleKey', + 'mouseover .link:first': 'showOptions', + 'mouseout .link:first': 'hideOptions', + 'click .complete:first': 'markComplete', + 'click .uncomplete:first': 'unmarkComlete', + 'click .note:first': 'addNote', + 'click .mouse-tip:first': 'foldChildren' }, initialize: function () { + var task = this; + + // backlink + this.model.view = this; + + this.collection = this.model.collection; + + // events 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 - }); - } - }); + + // updates from server + if (!window.hackflowyOffline){ + this.socket = io.connect(); + this.socket.on('task', function (data) { + if (task.model.id == data.id) { + task.model.set({ + 'content': data.content, + 'isCompleted': data.isCompleted + }); + } else { + console.error("task.model.id != data.id",task.model.id , data.id); + } + }); + } }, - 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; + // Only show direct children + filter: function (child, index, collection) { + return child.get('parentId') === this.model.get('id'); }, edit: function () { this.$el.addClass('editing'); - this.$input.focus(); + this.$('.edit:first').focus(); }, - handleKeyup: function (e) { - // down arrow - if (e.keyCode == 40) + handleKey: function (e) { + if (e.keyCode === constants.ENTER_KEY) + this.addNote(e.currentTarget); + if (e.keyCode == constants.DOWN_ARROW) this.$el.next('li').find('input').focus(); - // Up arrow - else if (e.keyCode == 38) + else if (e.keyCode == constants.UP_ARROW) 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') - }); + if (e.shiftKey && e.keyCode == constants.TAB) { + e.preventDefault(); + var newParentId = this.$el.parents('ul:first').find('input:first').data('parent-id'); + if (newParentId === null) newParentId = 0; + this.model.set('parentId', newParentId); + this.model.save(); + Tasks.get(newParentId).view.render() + this.model.view.ui.input.focus(); } - // 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') - }); + else if (e.keyCode == constants.TAB) { + e.preventDefault(); + var newParentId = this.$el.prev('ul').find('input:first').data('id'); + this.model.set('parentId', newParentId); + this.model.save(); + this.model.view.remove(); + Tasks.get(newParentId).view.render(); + this.model.view.ui.input.focus(); } - this.socket.emit('task', { - id: this.model.id, - parentId: this.model.parentId, - content: this.$input.val().trim(), - isCompleted: this.model.toJSON().isCompleted - }); + if (!window.hackflowyOffline){ + this.socket.emit('task', { + id: this.model.id, + parentId: this.model.parentId, + content: this.$('.edit:first').val().trim(), + isCompleted: this.model.toJSON().isCompleted + }); + } else { + + } }, - 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 === '') { + var value = this.$('.edit:first').val().trim(); + if (value === '') + // remove empty items this.model.destroy(); - // collection.at(this.model.get('id')).destroy(); - } else { - this.model.save({ - content: value, - parentId: this.model.attributes.parentId - }); - } + else + this.model.save({content: value}); this.$el.removeClass('editing'); }, showOptions: function () { - this.$el.find('.options').show(); + this.ui.options.show(); }, hideOptions: function () { - this.$el.find('.options').hide(); + this.ui.options.hide(); }, markComplete: function () { @@ -165,23 +160,23 @@ define( }); }, - /** - * 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; + /** Add a new blank note **/ + addNote: function () { + var currentId = this.ui.input.data('id') || 0; + parentId = this.ui.input.data('parent-id'); - Tasks.add({ - content: '', + var task = Tasks.add({ parentId: parentId }); - $inputEle.blur(); - $inputEle.closest('li').next('li').find('input').focus(); - } + this.ui.input.blur(); + task.view.ui.input.focus(); + }, + /** Fold children of the clicked element */ + foldChildren: function(){ + this.$el.find('ul').toggle(); + this.$el.find('li').toggleClass('folded'); + }, }); return TaskView; diff --git a/public/stylesheets/app.css b/public/stylesheets/app.css index fdbdde4..c659a62 100644 --- a/public/stylesheets/app.css +++ b/public/stylesheets/app.css @@ -5603,12 +5603,20 @@ body #hackflowy #main .children li .task .with-children > .link { body #hackflowy #main .children li .task .open > .link { background-color: white; } + +/* Show that this item has folded contents */ +body #hackflowy #main .children li.folded .task .link { + z-index: 7; + background-color: #ddd; +} + /* line 105, ../sass/app.scss */ body #hackflowy #main .children li .task .link:hover { cursor: pointer; z-index: 8; background-color: #aaa; } + /* line 110, ../sass/app.scss */ body #hackflowy #main .children li .task input.edit { box-shadow: none; @@ -5684,6 +5692,12 @@ body #hackflowy #footer { font-size: 12px; } +/* line 138, ../sass/app.scss */ +body #hackflowy #main .children ul.shift { + margin-left: 30px; + margin-bottom: 0px; +} + .options-div{ display: none; } @@ -5713,7 +5727,7 @@ cursor: pointer; background: #ddd; border: 1px solid #bbb; width: 80px; -height: 58px; +min-height: 58px; padding: 10px 0 5px 10px; margin-bottom: 10px; border-radius: 4px; @@ -5773,6 +5787,7 @@ border-left: 15px solid transparent; border-right: 15px solid transparent; } + .task-completed{ text-decoration: line-through; } diff --git a/public/templates/task.html b/public/templates/task.html index ab36747..5ff37c1 100644 --- a/public/templates/task.html +++ b/public/templates/task.html @@ -1,10 +1,12 @@ +<% if(content){%> +
  • •
    - <% if(model.isCompleted){%> + <% if(isCompleted){%> Uncomplete
     <%}else {%> Complete
     @@ -16,10 +18,12 @@
    - <% if(model.isCompleted){%> - + <% if(isCompleted){%> + <%}else {%> - + <%}%>
    +
    • +<%}%>