Skip to content

Instantly share code, notes, and snippets.

@adamloo85

adamloo85/post-it.js

Created August 14, 2013 01:24
Show Gist options
  • Save adamloo85/6227269 to your computer and use it in GitHub Desktop.
Save adamloo85/6227269 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. adamloo85 created this gist Aug 14, 2013.
    128 changes: 128 additions & 0 deletions post-it.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,128 @@
    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();
    });