mirror of
https://github.com/wassname/HackFlowy.git
synced 2026-06-30 16:30:07 +08:00
Curtis SerVaas
120 lines
3.6 KiB
JavaScript
120 lines
3.6 KiB
JavaScript
var showView = Backbone.View.extend({
|
|
initialize: function(options){
|
|
//that.UL;
|
|
assignProperties(this, options);
|
|
},
|
|
|
|
tagName: 'li',
|
|
className: "herez node",
|
|
events: {"click .markdown" : "showMarkDownEditor"},
|
|
|
|
//todo = refactor this function.
|
|
render: function(){
|
|
var that = this;
|
|
that.$el.html("");
|
|
|
|
var id = that.model.get("_id");
|
|
var text = that.model.get("text");
|
|
|
|
var html = that.createUIBullet(id, text, that.depth);
|
|
that.$el.children("ul").addClass("collapsed");
|
|
that.$el.attr("data-depth", that.depth);
|
|
that.$el.attr("data-id", id);
|
|
|
|
that.$el.html(html);
|
|
that.UL = that.$el.children("ul");
|
|
if(that.snapView){
|
|
that.$el.children().children("textarea").prop("disabled", true);
|
|
that.$el.addClass("snapLI");
|
|
}
|
|
// console.log("about to render textarea")
|
|
|
|
that.renderChildren();
|
|
|
|
return that;
|
|
},
|
|
|
|
// Moved to app.js to handle bubbling issues.
|
|
collapse: function(){
|
|
var that = this;
|
|
that.$el.children("ul").slideToggle(110);
|
|
that.$el.children(".zoomButton").toggleClass("collapsed");
|
|
},
|
|
|
|
createUIBullet: function( id , text, depth) {
|
|
var that = this;
|
|
var textArea = "<textarea height='10px' class='js-auto-expand content' style='background:none'>" + text + "</textarea>";
|
|
|
|
var expandCollapse = "<a class='expandCollapse'>+</a>"
|
|
// var aButton = "<a href='#/" + id + "'" + "class='nodeLink'>" + "</a>";
|
|
// var handle = "<span class=\"handle\"><img src=\"img/bullet-8.png\" /></span>"
|
|
var zoomButton = "<a href='#/" +that.model.get("_id") + "' class='zoomButton handle'></a>"
|
|
// var buttonHoist = "<a href='#' class='buttonHoist'></a>"
|
|
|
|
var subList = "<ul class ='subList dd-list' data-id="+ id + "></ul>"
|
|
var bullet = expandCollapse + zoomButton + "<span class='hoverWrap content'>" + textArea + "</span>" + subList;
|
|
return bullet;
|
|
},
|
|
|
|
//text-area => MarkDownEditor.
|
|
createMarkDownBullet: function(){
|
|
var that = this;
|
|
var textarea = that.$el.children(".hoverWrap").children("textarea");
|
|
|
|
var newDiv = "<div><p>" + textarea.val() + "</p></div>";
|
|
textarea.remove();
|
|
|
|
that.$el.children(".hoverWrap").html(newDiv);
|
|
|
|
that.showMarkDownEditor();
|
|
return;
|
|
},
|
|
|
|
showMarkDownEditor: function(){
|
|
var that = this;
|
|
var hoverWrap = that.$el.children(".hoverWrap").removeClass("markdown");
|
|
|
|
|
|
hoverWrap.children("div").attr("id", "marked-mathjax-preview");
|
|
|
|
var buffer = '<div class="preview content" id="marked-mathjax-preview-buffer" style="display:none; position:absolute; top:0; left: 0"> </div>';
|
|
var textareaInput = '<textarea id="marked-mathjax-input" onkeyup="Preview.Update()" name="comment" "autofocus"></textarea>';
|
|
hoverWrap.append(buffer+textareaInput);
|
|
debugger;
|
|
setTimeout(function(){
|
|
Preview.Init();
|
|
Preview.Update();
|
|
hoverWrap.children("textarea").val(that.model.get("text")).focus();
|
|
}, 200);
|
|
// setTimeout(function(){ MathJax.Callback(["CreatePreview",Preview]); }, 300);
|
|
},
|
|
|
|
updateId: function(newId){
|
|
this.$el.attr("data-id", newId);
|
|
this.$el.children("ul").attr("data-id", newId);
|
|
},
|
|
updateText: function(newText){
|
|
var that = this;
|
|
this.$el.children().children("textarea").val(that.model.get("text"));
|
|
},
|
|
lock: function(name){ //for concurrent editing...
|
|
this.$el.children().children("textarea").attr("readonly", "readonly");
|
|
this.$el.children().children("textarea").val(name + " is editing.");
|
|
this.$el.addClass("editing");
|
|
},
|
|
unlock: function(){
|
|
this.$el.children().children("textarea").removeAttr("readonly");
|
|
this.$el.children().children("textarea").val(this.model.get("text"));
|
|
this.$el.removeClass("editing");
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
});
|