Post It All!


The jquery plugin for adding sticky notes in your webpage.


Download

Star  Fork 

 

Getting started


Download

Download the plugin from the GitHub repository and include the css and the js files as usual.

<!-- CSS -->
<link rel="stylesheet" href="dist/jquery.postitall.css">

<!-- JS -->
<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="dist/jquery.postitall.js"></script>

Plugins

Postitall can work alone but you can add some plugins to gain extra features and usability.

This is the list of supported plugins:

  • Jquery UI : The jQuery User Inteface. With this plugin you will improve notes drag and resize usage.
  • Trumbowyg : A lightweight WYSIWYG editor. With this plugin you will be able to edit notes content with an integrated html5 editor.
  • Minicolors : A Tiny Color Picker. With this plugin you will be able to change background and text note color with a color picker.
<!-- CSS -->
<link rel="stylesheet" href="libs/jquery-ui/themes/base/jquery-ui.css">
<link rel="stylesheet" href="libs/trumbowyg/dist/ui/trumbowyg.css">
<link rel="stylesheet" href="libs/minicolors/jquery.minicolors.css">
<link rel="stylesheet" href="dist/jquery.postitall.css">

<!-- JS -->
<script src="libs/jquery/dist/jquery.min.js"></script>
<script src="libs/jquery-ui/jquery-ui.min.js"></script>
<script src="libs/trumbowyg/dist/trumbowyg.min.js"></script>
<script src="libs/minicolors/jquery.minicolors.min.js"></script>
<script src="dist/jquery.postitall.js"></script>

* Note that the css file jquery.postitall.css overrides some css elements of those plugins for a correct integration with postitall.

Install with npm

You can install PostItAll by using npm

npm install postitall

Plugins:

npm install jquery-ui trumbowyg jquery-minicolors

* Remember to change references to your npm destination directory

Install with bower

Also, you can install PostItAll using Bower

$ bower install PostItAll

Plugins:

$ bower install jquery-ui trumbowyg minicolors

* Remember to change references to your bower destination directory

 

Usage


Basically you have two possibilities to use this plugin:

In this first example we will create a note from scratch with a global call to the new method.
With global functions you will be able to create a note from scratch that can be filled with any content, either text or html.

//It will create a sticky note in the top left corner of the page
$.PostItAll.new("<p style='text-align:center'>Hello <b>world</b></p>");

In the second example, we will convert a DOM element into a sticky note with a plugin call.
Use jquery selectors and call the postitall function to convert any element into a sticky note.

<!-- HTML -->
<p class="notes">This paragraph has the "notes" class.</p>
<a href="#" id="idRunTheCode"><i class="fa fa-play fa-fw"></i> Run the code</a>

<!-- JS : All elements with the class "notes" will be converted into a sticky note -->
<script>
$(document).ready(function() {
    $('#idRunTheCode').click(function(e) {
        $('.notes').postitall();
        e.preventDefault();
    });
});
</script>
Run the code

This paragraph have the "notes" class.


 

Global configuration


The notes have some features that can be changed to satisfy your needs. By default all of them are enabled, but you can change any of these "flags" in the beginning of your scripts and all new notes will be affected by these changes.

This are the variables with default values:

//Global vars : enable and disable features and change the notes behaviour
$.fn.postitall.globals = {
    prefix          : '#PIApostit_',//Id note prefixe
    filter          : 'domain',     //Options: domain, page, all
    savable         : false,        //Save postit in storage
    randomColor     : true,         //Random color in new postits
    toolbar         : true,         //Show or hide toolbar
    autoHideToolBar : true,         //Animation effect on hover over postit showing/hiding toolbar options
    removable       : true,         //Set removable feature on or off
    askOnDelete     : true,         //Confirmation before note removal
    draggable       : true,         //Set draggable feature on or off
    resizable       : true,         //Set resizable feature on or off
    editable        : true,         //Set contenteditable and enable changing note content
    changeoptions   : true,         //Set options feature on or off
    blocked         : true,         //Postit can not be modified
    minimized       : true,         //true = minimized, false = maximixed
    expand          : true,         //Expand note
    fixed           : true,         //Allow to fix the note in page
    addNew          : true,         //Create a new postit
    showInfo        : true,         //Show info icon
    pasteHtml       : true,         //Allow paste html in contenteditor
    htmlEditor      : true,         //Html editor (trumbowyg)
    autoPosition    : true,         //Automatic reposition of the notes when user resizes the screen
    addArrow        : 'back'        //Add an arrow to notes : none, front, back, all
};
 

Note configuration


This are the properties and event callbacks for each new note:

//Note global vars : Properties, style, features and events of the note
$.fn.postitall.defaults = {
    //Note properties
    id              : "",                       //Note id
    created         : Date.now(),               //Creation date
    domain          : window.location.origin,   //Domain in the url
    page            : window.location.pathname, //Page in the url
    osname          : navigator.appVersion,     //Browser informtion & OS name
    content         : '',                       //Content of the note (text or html)
    position        : 'absolute',               //Position absolute or fixed
    posX            : '10px',                   //x coordinate (from left)
    posY            : '10px',                   //y coordinate (from top)
    right           : '',                       //x coordinate (from right). This property invalidate posX
    height          : 200,                      //Note total height
    width           : 160,                      //Note total width
    minHeight       : 210,                      //Note resizable min-width
    minWidth        : 170,                      //Note resizable min-height
    oldPosition     : {},                       //Position when minimized/collapsed (internal use)
    //Config note style
    style : {
        tresd           : true,                 //General style in 3d format
        backgroundcolor : '#FFFA3C',            //Background color in new postits when randomColor = false
        textcolor       : '#333333',            //Text color
        textshadow      : true,                 //Shadow in the text
        fontfamily      : 'verdana',            //Default font
        fontsize        : 'small',              //Default font size
        arrow           : 'none',               //Default arrow : none, top, right, bottom, left
    },
    //Enable / Disable features
    features : $.fn.postitall.globals,          //By default, copy of global defaults
    //Note flags
    flags : {
        blocked         : false,                //If true, the note cannot be edited
        minimized       : false,                //true = Collapsed note / false = maximixed
        expand          : false,                //true = Expanded note / false = normal
        fixed           : false,                //Set position fixed
        highlight       : false,                //Higlight note
    },
    //Attach the note to al html element
    attachedTo : {
        element         : '',                   //Where to attach
        position        : 'right',              //Position relative to elemente : top, right, bottom or left
        fixed           : true,                 //Fix note to element when resize screen
        arrow           : true,                 //Show an arrow in the inverse position
    },
    // Callbacks / Event Handlers
    onCreated: function(id, options, obj) { return undefined; },    //Triggered after note creation
    onChange: function (id) { return undefined; },                  //Triggered on each change
    onSelect: function (id) { return undefined; },                  //Triggered when note is clicked, dragged or resized
    onDblClick: function (id) { return undefined; },                //Triggered on double click
    onRelease: function (id) { return undefined; },                 //Triggered on the end of dragging and resizing of a note
    onDelete: function (id) { return undefined; }                   //Triggered when a note is deleted
};
 

Functions / Methods


As said before, you have two ways to call note actions: by calling global or plugin methods.

This is the relation of all the actions with their calls and a brief description of each one:

Note actions
Action Global call Plugin call Description
New note $.PostItAll.new();
...
$.PostItAll.new(content, options, object, callback);
$(id).postitall();
...
$(id).postitall('new', options, callback);
Create a new note.
Global call content is the note content and object is the element in the DOM.
For the two possibilities: options is an object with the new note options and callback is the user function called when the new note is created.
View an example
Change note options $.PostItAll.options(options);
$.PostItAll.options(id,options);
$(id).postitall('options');
$(id).postitall('options',options);
Get or set the options of the created notes.
Global call In case you don't specify the note id the options changes affect all created notes.
options is an object with the note options to be changed.
View an example
Hide note $.PostItAll.hide();
$.PostItAll.hide(id);
$(id).postitall('hide'); Hide note.
Global call If you don't specify the note id, all the notes of the page will be hidden.
View an example
Show note $.PostItAll.show();
$.PostItAll.show(id);
$(id).postitall('show'); Show note.
Global call If you don't specify the note id, all the notes of the page will be shown.
View an example
Destroy note $.PostItAll.destroy(inline, storage, domain); $(id).postitall('destroy'); Destroy a specific note or all the notes of your page.
Global call If you don't specify the note id, all the notes of the page will be destroyed.
If inline is set to true, only visible notes will be removed (by default true).
If storage is set to true all stored notes will be deleted (by default true).
If domain is set to a valid domain name, only the notes created in this domain will be deleted. By default storage is local, so this options is useless in this conditions because you only see the notes in the current domain.
Plugin call Only the note with the specified id will be removed.
View an example
Configuration actions
Action Global call Description
Change global/note configuration $.PostItAll.changeConfig(type, opt); Change the global or note configuration.
type is a string that can be set to "global" or "note". Use "global" to change $.fn.postitall.globals that affects to global features. Use "note" to change $.fn.postitall.defaults that affects to note properties and features.
opt is an object with the configuration you need to change.
View an example
Restores configuration $.PostItAll.restoreConfig(type); Restore global and/or note configuration to factory defaults.
type is a string that can be set to "global", "note" or "all". If you don't specify "all" is the default value. Use "global" to restore $.fn.postitall.globals and "note" to retore $.fn.postitall.defaults to factory defaults. Use "all" to restore "global" and "note" configuration at once.
View an example
Storage actions
Action Global call Description
Load notes $.PostItAll.load(callback, callbacks, highlight); In case you have stored notes, this method will load and show all notes from the current domain/page.
callback is the user function called when load is done.
callbacks is an object with the possible 'Event Handlers' of the note options
highlight is the id of the note to be highlighted.
Save notes $.PostItAll.save(); In case you have savable feature enabled (in global configuration and note features), this method will save all the notes in the storage.
Number of notes $.PostItAll.length(callback); In case you have stored notes, this method will return in the callback function the number of stored notes of the current domain.
 

Examples


 

Change global configuration

You can change the global configuration of the plugin by overwriting the default values in your script. Changes in the global configuration just affect new notes. Below you can change the global configuration.



* Those changes will affect just new notes!

Change global configuration / features

                                

Change global features by calling changeConfig method.

Restore global configuration / features
$.PostItAll.restoreConfig('global');

Restore global features by calling restoreConfig method.

 

Create and customize notes

Each note can be configured individually, however global configuration will be applied if it's not overwritten in the note creation.

   Style style

The basic design parameters like colors or fonts can be adjusted to your needs too.

backgroundColor
textColor

* Note that you should include the used font types in your web page. You can include it by using Google fonts.

   Flags flags

When you fix, block, minimize, expand or highlight a note, a "flag" property in the note change his state to true. You can force a note to start in an especific environment by enabling these flags.


* While fixed and blocked flags can be enabled in any condition and live toghether, the minimized, expanded and highlighted can not, and you can only choose one between these three.

   Features features

All the features you want to control individually in each note must be enabled in global configuration to take effect. Global configuration prevails.

Create a new note

Create a note with a specific configuration and content.


                                

* This changes will affect only to the notes created with the button "Create a note with this configuration".


Change note configuration / features

All new notes without params will be created with the configuration saved.


                                

Change note configuration and features by calling changeConfig method.


Restore note configuration / features

Restore note configuration to factory defaults.

$.PostItAll.restoreConfig('note');

Restore note configuration and features by calling restoreConfig method.



 

Attach note to an element

You can create or attach notes to an existing element of your page. The note can be positioned in the top, right, buttom or left of the existing element, and also you can add an arrow pointing out to it.
Even if you resize the browser, the note will be moved to the same relative position of the attached element.

* The note will be attached to the above red box

                    

 

Note events

$.PostItAll.new({
    onCreated: function(id, options, obj) {
        console.log("onCreated");
    },
    onChange: function(id) {
        console.log("onChange");
    },
    onSelect: function(id) {
        console.log("onSelect");
    },
    onDblClick: function(id) {
        console.log("onDblClick");
    },
    onRelease: function(id) {
        console.log("onRelease");
    },
    onDelete: function(id) {
        console.log("onDelete");
    }
});
                        
 

Change note options


You can get or set the options of your notes on the fly.

Code
<!-- HTML -->
<a href="#" id="newNote1">Create a new note</a>
<a href="#" id="idSetCreated">Change note options</a>
<a href="#" id="idGetCreated">Get note options</a>
<div id="idDivOptions"></div>

<!-- JS -->
<script>
$(document).ready(function() {
    var idNewNote = null;
    //Example : Create a new note and refresh note options
    $('#newNote1').click(function(e) {
        if(idNewNote != null) {
            $.PostItAll.destroy(idNewNote);
            idNewNote = null;
        }
        $.PostItAll.new({
            content: 'This is a <b>new</b> note!',
            onCreated: function(id, options, obj) {
                idNewNote = id;
                $('#idGetCreated').click();
            },
            onDelete: function() {
                idNewNote = null;
            }
        });
        e.preventDefault();
    });
    //Example : Get and View options
    $('#idGetCreated').click(function(e) {
        if(idNewNote != null) {
            var options = $(idNewNote).postitall('options');
            $('#idDivOptions').text(JSON.stringify(options));
            //$('#idDivOptions').text($.PostItAll.options(idNewNote));
        }
        e.preventDefault();
    });
    //Example : Change options
    $('#idSetCreated').click(function(e) {
        if(idNewNote != null) {
            var options = {
                content: "Modified content by set options",
                style: {
                    textcolor : "#fcf800",
                    backgroundcolor : "#ff0000",
                },
            };
            $('#idDivOptions').text('');
            $(idNewNote).postitall('options', options);
            //$.PostItAll.options(idNewNote, options);
        }
        e.preventDefault();
    });
});
</script>
Example
Note options
Here you will see the options for the new note created...
 

Show hide and remove notes


You can show, hide or remove all the notes by calling the show(), hide() or remove() global methods without params.

Code
<!-- HTML -->
<a href="#" id="idHideAll">Hide all notes</a>
<a href="#" id="idShowAll">Show all notes</a>
<a href="#" id="idDeleteAll">Delete all notes</a>

<!-- JS -->
<script>
$(document).ready(function() {
    $('#idHideAll').click(function(e) {
        $.PostItAll.hide();
        e.preventDefault();
    });
    $('#idShowAll').click(function(e) {
        $.PostItAll.show();
        e.preventDefault();
    });
    $('#idDeleteAll').click(function(e) {
        $.PostItAll.remove();
        e.preventDefault();
    });
});
</script>
 

Show hide and remove specific note


Show, hide and remove a specific note.

Code
<!-- HTML -->
<a href="#" id="newNote2">Create a new note and get id</a>
<a href="#" id="idHideCreated">Hide created note</a>
<a href="#" id="idShowCreated">Show created note</a>
<a href="#" id="idDeleteCreated">Delete created note</a>

<!-- JS -->
<script>
$(document).ready(function() {
    var idNewNote = null;
    $('#newNote2').click(function(e) {
        if(idNewNote != null) {
            $.PostItAll.destroy(idNewNote);
            idNewNote = null;
        }
        $.PostItAll.new({
            content: 'This is a <b>new</b> note!',
            onCreated: function(id, options, obj) {
                idNewNote = id;
            },
            onDelete: function() {
                idNewNote = null;
            }
        });
        e.preventDefault();
    });
    $('#idShowCreated').click(function(e) {
        $.PostItAll.show(idNewNote);
        e.preventDefault();
    });
    $('#idHideCreated').click(function(e) {
        $.PostItAll.hide(idNewNote);
        e.preventDefault();
    });
    $('#idDeleteCreated').click(function(e) {
        $.PostItAll.remove(idNewNote);
        e.preventDefault();
    });
});
</script>
 

Save notes


Local storage

If you enable the savable global feature, all your new notes since that moment will be stored in browser local storage.

//Enable savable feature for all new notes
$.fn.postitall.globals.savable = true;

Also, you can save notes individually be enabling this feature on new notes.

//Enable savable feature for a specific note
$.PostItAll.new({
    features: {
        savable : true
    }
});

If you want to load saved notes, you can call the global method load

//Load storage notes
$.PostItAll.load();

If you want to know how many saved notes you have, you can call the global method length

//Load storage notes
$.PostItAll.length(function(total) {
    console.log('Number of notes: ' + total);
});
Example

External storage

Comming soon






Source code
& Contact


You can check the Source Code on Github.
Any kind of help or comment will be apreciated.

Bug report and issues: https://github.com/txusko/PostItAll/issues

Contact by email at: postitall@txusko.com