wassname/HackFlowy
1
0
Fork 0
mirror of https://github.com/wassname/HackFlowy.git synced 2026-06-27 16:00:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added nested rendering, collapsing nodes, uses marionette

Browse Source
This commit is contained in:
Is Isilon
2016-01-30 21:00:33 +08:00
parent cf89df815d
commit c17412477d
10 changed files with 264 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bower.json
+4 -4
View File
@@ -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"
}
}
public/index.html
+43 -1
View File
@@ -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
</script>
@@ -67,4 +67,46 @@
<script data-main="javascripts/app" src="bower_components/requirejs/require.js"></script>
</body>
<div id="backbone-templates">
<script id="task-view-template" type="text/html">
<li>
<div class="task-wrappper">
<div class="task">
<div class="link">•
<div class="options">
<div class="options-left">
<div class="mouse-tip"></div>
<% if(isCompleted){ %>
<a class="uncomplete">Uncomplete<hr></a>
<% }else { %>
<a class="complete">Complete<hr></a>
<% } %>
<a class="note">
<span class="note">Add Note</span>
</a>
</div>
</div>
</div>
<% if(isCompleted) { %>
<input value="<%= obj.content %>" data-id="<%= obj.id %>" data-parent-id="<%= parentId %>" data-priority="<%= priority %>" class="edit task-completed">
<% }else { %>
<input value="<%= obj.content %>" data-id="<%= obj.id %>" data-parent-id="<%= parentId %>" data-priority="<%= priority %>" class="edit">
<% } %>
</div>
</div>
</li>
</script>
<script id="list-view-template" type="text/html">
<li>
<%= nodeName %>
</li>
<div>
</script>
</html>
public/javascripts/app.js
+3 -8
View File
@@ -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"
}
},
public/javascripts/models/task.js
+3 -1
View File
@@ -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) {
public/javascripts/util/constants.js
+6 -3
View File
@@ -2,13 +2,16 @@ define(
[],
function() {
var constants = {
ENTER_KEY :13
ENTER_KEY :13,
UP_ARROW: 38,
DOWN_ARROW: 40,
TAB: 9,
};
return constants;
});
});
public/javascripts/views/list.js
+79 -42
View File
@@ -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('<div class="alert-box secondary round">Running in offline mode, data may be lost </div>');
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
// });
//
// }
// }
}
});
public/javascripts/views/page.js
+1 -1
View File
@@ -22,7 +22,7 @@ Task
},
initialize: function() {
this.listView = new ListView();
listView = this.listView = new ListView();
this.input = $('#newTask');
},
public/javascripts/views/task.js
+101 -106
View File
@@ -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;
public/stylesheets/app.css
+16 -1
View File
@@ -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;
}
public/templates/task.html
+8 -4
View File
@@ -1,10 +1,12 @@
<% if(content){%>
<li>
<div class="task-wrappper">
<div class="task">
<div class="link">•
<div class="options">
<div class="options-left">
<div class="mouse-tip"></div>
<% if(model.isCompleted){%>
<% if(isCompleted){%>
<a class="uncomplete">Uncomplete<hr></a>
<%}else {%>
<a class="complete">Complete<hr></a>
@@ -16,10 +18,12 @@
</div>
</div>
<% if(model.isCompleted){%>
<input value="<%= model.content %>" data-id="<%= model.id %>" data-parent-id="<%= model.parentId %>" data-priority="<%= model.priority %>" class="edit task-completed">
<% if(isCompleted){%>
<input value="<%= content %>" data-id="<%= id %>" data-parent-id="<%= parentId %>" data-priority="<%= priority %>" class="edit task-completed">
<%}else {%>
<input value="<%= model.content %>" data-id="<%= model.id %>" data-parent-id="<%= model.parentId %>" data-priority="<%= model.priority %>" class="edit">
<input value="<%= content %>" data-id="<%= id %>" data-parent-id="<%= parentId %>" data-priority="<%= priority %>" class="edit">
<%}%>
</div>
</div>
</li>
<%}%>