Skip to content

Instantly share code, notes, and snippets.

@carterS

carterS/board.html

Created November 6, 2013 01:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save carterS/7329577 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save carterS/7329577 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. carterS created this gist Nov 6, 2013.
    28 changes: 28 additions & 0 deletions board.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    <html>
    <head>
    <title>Post-It Board</title>

    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
    </head>

    <body id="board">

    <script type="text/html-template" data-name="post-it">
    <div class='post-it'>
    <div class='header' contenteditable='true'>
    header<span class='delete'>x</span>
    </div>
    <div class='content' contenteditable='true'>
    body content
    </div>
    </div>
    </script>

    <script src="post-it.js"></script>

    </body>

    </html>
    29 changes: 29 additions & 0 deletions post-it.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    var Board = function( $board ) {
    this.$board = $board;
    this.$board.on("click", this.addPostIt.bind(this));
    };

    Board.prototype.addPostIt = function() {
    var postIt = new PostIt(event.pageX, event.pageY);
    this.$board.append(postIt.$el);
    };

    var PostIt = function(x, y) {
    this.$el = $(PostIt.templateHTML).css({ position: 'absolute', left: x, top: y });
    this.$el.on('click', function($event) {
    $event.stopPropagation();
    });
    this.$el.draggable({ handle: ".header" });
    this.$el.resizable();
    this.$el.find('.delete').on("click", this.deletePostIt.bind(this));
    };

    PostIt.prototype.deletePostIt = function($event) {
    $event.stopPropagation();
    this.$el.remove();
    };

    $(function() {
    new Board($('#board'));
    PostIt.templateHTML = $('[data-name=post-it][type="text/html-template"]').text().trim();
    });
    49 changes: 49 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    #board {
    font-family: monospace;
    background-color: #9e8d68;
    margin: 0;
    padding: 0;
    position: relative;
    }

    .post-it {
    position: absolute !important;
    width: 160px;
    background-color: yellow;
    box-shadow: -2px 2px 5px #555;
    overflow: hidden;
    }

    .post-it .header {
    background-color: #c2c25b;
    text-align: left;
    padding: 2px;
    position: relative;
    }

    .post-it .delete {
    position: absolute;
    top: 0px;
    right: 4px;
    /*text-align: right;*/
    }

    .post-it .header:hover {
    background-color: #a8a860;
    }

    .post-it .header a, .post-it .header a:visited {
    text-decoration: none;
    color: black;
    font-weight: bold;
    }

    .post-it .header a:hover {
    color: #eee;
    }

    .post-it .content {
    padding: 10px;
    min-height: 70px;
    outline: none;
    }