Skip to content

Instantly share code, notes, and snippets.

@Githerdone
Created August 14, 2013 21:49
best practice example
var PostIt = function(x, y, boardId) {
//Create post-it
var $div = $("<div class='post-it'><div class='header'><a href='#' id='close'>CLOSE</a></div><div class='content' contenteditable='true'></div></div>")
this.$element = $div;
var self = this;
function initialize() {
$div.draggable({
handle: '.header',
containment: '#'+boardId
});
$div.css("top", y);
$div.css("left", x);
$div.find('#close').on('click', function(e) {
e.stopPropagation();
self.remove(e);
});
$div.find('.content').on('click', function(e) { e.stopPropagation(); });
$div.find('.header').on('click', function(e) { e.stopPropagation(); });
}
initialize();
};
PostIt.prototype = {
remove: function(e) {
$(e.target).parent().parent().remove();
},
setContent: function(text) {
this.$element.find('.content').text(text);
}
};
var Board = function(id) {
this.id = id;
this.$element = $('<div class="post-board" id="'+id+'"></div>')
var self = this;
function initialize() {
self.$element.on('click', function(e) { self.newPostIt(e); });
};
initialize();
};
Board.prototype = {
newPostIt: function(e) {
var postIt = new PostIt(e.pageX, e.pageY, this.id);
this.placePostIt(postIt);
},
placePostIt: function(postIt) {
this.$element.append(postIt.$element)
},
fromArray: function(postItDataObjects) {
for (var i in postItDataObjects) {
var postItData = postItDataObjects[i];
var postIt = new PostIt(
postItData.position.left,
postItData.position.top,
this.id
);
postIt.setContent(postItData.content);
this.placePostIt(postIt);
}
}
};
var BoardManager = function() {
this.boardNum = 0;
var self = this;
function initialize() {
$(document).on('click', '#new_board', function(e) { self.newBoard(e) });
$(document).on('click', '#board_list button', function(e) { self.retrieveBoard(e) });
$(document).on('click', '#load_samples', function(e) { self.loadSamples(e) });
}
initialize();
}
BoardManager.prototype = {
newBoard: function(e) {
e.stopPropagation();
this.addBoard(this.boardNum);
},
addBoard: function(id) {
var board = new Board('post-board-'+id);
$('.post-board').hide();
$('body').append(board.$element);
$('#board_list button').removeClass('current_board');
$('#board_list').append("<button class='current_board'>"+ id + "</button><br>");
this.boardNum++;
return board;
},
retrieveBoard: function(e) {
var boardId = $(e.target).text();
$('.post-board').hide();
$('#board_list button').removeClass('current_board');
$(e.target).addClass('current_board');
$('#post-board-'+boardId).show();
},
loadSamples: function(e) {
$('#load_samples').remove();
var self = this;
$.each(SampleBoards, function(key, value) {
var board = self.addBoard(key);
board.fromArray(value);
});
}
}
$(function() {
var boardManager = new BoardManager();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment