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.
  • jQuery Timepicker Addon : Adds a timepicker to jQueryUI Datepicker.
<!-- 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="libs/jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.min.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="libs/jqueryui-timepicker-addon/dist/jquery-ui-timepicker-addon.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 jquery-ui-timepicker-addon

* 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 jqueryui-timepicker-addon

* 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 has 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 : false,         //Animation efect on hover over postit shoing/hiding toolbar options
    removable       : true,         //Set removable feature on or off
    askOnDelete     : true,         //Confirmation before note remove
    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
    hidden          : true,         //The note can be hidden
    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 (info tab)
    showMeta        : true,         //Show info icon (meta tab)
    pasteHtml       : true,         //Allow paste html in contenteditor
    htmlEditor      : true,         //Html editor (trumbowyg)
    autoPosition    : true,         //Automatic reposition of the notes when user resize screen
    addArrow        : 'back',       //Add arrow to notes : none, front, back, all
    askOnHide       : true,         //Show configuration hideUntil back-panel (getBackPanelHideUntil)
    hideUntil       : null,         //Note will be hidden since that datetime
    export          : true          //Note can be exported
};

 

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 relative, fixed or absolute
    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       : 200,                      //Note resizable min-width
    minWidth        : 160,                      //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      : 'Open Sans',            //Default font
        fontsize        : 'medium',              //Default font size
        arrow           : 'none',               //Default arrow : none, top, right, bottom, left
    },
    //css clases
    cssclases : $.extend({}, $.fn.postitall.cssclases, true),
    //Enable / Disable features
    features : $.extend({}, $.fn.postitall.globals, true),
    //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
        hidden          : false,                //Hidden note
    },
    //Attach the note to al html element
    attachedTo : {
        element         : '',                   //Where to attach (string or object / '#idObject' or $('#idObject'))
        position        : 'right',              //Position relative to elemente : top,right,bottom,left or combinations (top left, right bottom, ...)
        fixed           : true,                 //Fix note to element when resize screen
        arrow           : true,                 //Show an arrow in the inverse position
    },
    //Meta data
    meta: {
        'Title': {
            'type': 'input',
            'maxlength': '20',
            'value': '',
            'placeholder': 'Note title'
        },
        'Category': {
            'type': 'combo',
            'value': '0',
            'values': {
                '0': 'Select a category',
                '1': 'Personal',
                '2': 'Work',
                '3': 'Other'
            }
        },
        'Observations': {
            'type': 'textarea',
            'value': '',
            'placeholder': 'Other considerations ...'
        }
    },
    // 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
};
 

Styling note


Note style can be changed by overwriting the default plugin clases or by changing the plugin clases by your own.
All these clases are defined in the plugin css file jquery.postitall.css

Default plugin clases

Note clases
Class Description
note Default note style. Main note class
withBoxShadow Note with text-shadow for dark fonts (default)
withoutBoxShadow Note with text-shadow for light fonts (default)
withoutTextShadow Note without text-shadows
withTextShadowWhite Note with box-shadow
withTextShadowBlack Note without box-shadow
Arrow clases
Class Description
arrow_box Set in any arrow class
arrow_box_top Top arrow class
arrow_box_right Right arrow class
arrow_box_bottom Bottom arrow class
arrow_box_left Left arrow class
Icon clases
Class Description
PIAIconTopToolbar Top icon toolbar common properties
PIAIconBottomToolbar Bottom icon toolbar common properties
PIAicon Common icon style. Set in all icons
PIAiconright Set in all right icons
PIAiconleft Set in all left icons
PIAiconbottom Set in all bottom icons
Note icons 1
Class Description
PIAclose Close icon (back panels)
PIAconfig Config icon (top-right)
PIAhide Hide icon (top-left)
PIAminimize Minimize icon (top-left)
PIAmaximize Restore/Collapse icon (top-left)
PIAexpand Expand icon (top-left)
PIAblocked Non blocked icon (top-right)
Note icons 2
Class Description
PIAblocked2 Blocked icon (top-right)
PIAdelete Delete icon (top-right)
PIAinfoIcon Info icon (bottom-left)
PIAnew Copy icon (bottom-left)
PIAfixed Non fixed icon (top-left)
PIAfixed2 Fixed icon (top-left)
PIAexport Export icon (bottom-left)

You can view an example of overwriten plugin clases in this css file noteconfiguration.css, and a live example


Custom css clases

You can redefine the most important clases used by this plugin by passing as a parameter when you call the new method:

//Changable css clases for new notes
$.PostItAll.new({
  cssclases : {
    note                : 'note', //Default note style
    withTextShadowWhite : 'withTextShadowWhite', //Note with text-shadow for dark fonts (default)
    withTextShadowBlack : 'withTextShadowBlack', //Note with text-shadow for light fonts (default)
    withoutTextShadow   : 'withoutTextShadow', //Note without text-shadows
    withBoxShadow       : 'withBoxShadow', //Note with box-shadow
    withoutBoxShadow    : 'withoutBoxShadow', //Note without box-shadow
    icons : { //Icon generic clases and set
      icon            : 'PIAicon', //Set for all icons
      iconRight       : 'PIAiconright', //Set for the last top-right icon
      iconLeft        : 'PIAiconleft', //Set for all left icons (top or bottom)
      iconBottom      : 'PIAiconbottom', //Set for all bottom icons (left or right)
      topToolbar      : 'PIAIconTopToolbar', //Set for bottom toolbar (contains all botton icons)
      bottomToolbar   : 'PIAIconBottomToolbar', //Set for bottom toolbar (contains all botton icons)
      close           : 'PIAclose', //Close icon (back panels)
      config          : 'PIAconfig', //Config icon (top-right)
      hide            : 'PIAhide', //Hide icon (top-left)
      minimize        : 'PIAminimize', //Minimize icon (top-left)
      maximize        : 'PIAmaximize', //Restore/Collapse icon (top-left)
      expand          : 'PIAexpand', //Expand icon (top-left)
      blocked         : 'PIAblocked', //Non blocked icon (top-right)
      blockedOn       : 'PIAblocked2', //Blocked icon (top-right)
      delete          : 'PIAdelete', //Delete icon (top-right)
      info            : 'PIAinfoIcon', //Info icon (bottom-left)
      copy            : 'PIAnew', //Copy icon (bottom-left)
      fixed           : 'PIAfixed', //Non fixed icon (top-left)
      fixedOn         : 'PIAfixed2', //Fixed icon (top-left)
      export          : 'PIAexport', //Export icon (bottom-left)
    },
    arrows  : { //Default arrow : none
      arrow   : 'arrow_box', //Set in all arrows
      none    : '', //Without arrow
      top     : 'arrow_box_top', //Top arrow
      right   : 'arrow_box_right', //Right arrow
      bottom  : 'arrow_box_bottom', //Bottom arrow
      left    : 'arrow_box_left' //Left arrow
    }
  }
});

//Redefine global clases
$.PostItAll.changeConfig('note', {
  cssclases : {
    note : "customNote"
  }
});
$.PostItAll.new('Now all new notes will have the .customNote class aplied.');
//New note with ".note1" css class applied
$.PostItAll.new({
  content : 'Changed css class by passing the property to the new method.<br>Class applied : .customNote',
  cssclases : {
    note : "customNote"
  }
});

//CSS
.customNote {
  border: 10px solid #ff6400;
  background-color: #ffb77e;
  color: white;
  top: 40px;
  left: 60px;
  width: 320px;
  height: 200px;
  min-width: 160px;
  min-height: 200px;
  opacity: 0.8;
  filter:Alpha(Opacity=0.8);
  font-size: 32px;
  position: relative;
}

 

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.


                                


Restore note configuration / features

Restore note configuration to factory defaults.

$.PostItAll.restoreConfig('note');



 

Import & Export notes

The notes have a featured called "export" by default enabled. When this feature is enabled, an icon in the bottom-left of the notes will appear .

Export icon
Clicking this icon will export the current note into an auto-generated text file in JSON format. The filename generated by this options will have this format : date#note_id.txt

Also you can export or import notes massively with the global methods : $.PostItAll.import(); and $.PostItAll.export();

//Export notes
//opt : all or loaded (only visible notes)
var opt = "loaded";
$.PostItAll.export(opt);

//Import notes
$.PostItAll.import();
                        

 

Custom meta-data information

Add additional information to the notes by enabling hte metaInfo feature and defining the meta-data property.
When the feature "metaInfo" is enabled, the info icon in the bottom left corner of the note will be visible.

Information icon

If you click on it, under the "Meta data" tab you will be abble to add this additional information in order to classify it or add more relevant information.

Default meta-data information
Note with the default meta-data information
Custom meta-data information
Note with custom meta-data information

//Custom meta-data note
$.PostItAll.new({
    meta: {
        'Field of type input': {
            'type': 'input',
            'maxlength': '20',
            'value': '',
            'placeholder': 'Placeholder for the input field'
        },
        'Field of type combo': {
            'type': 'combo',
            'value': '0',
            'values': {
                '0': 'Value 0',
                '1': 'Value 1',
                '2': 'Value 2'
            }
        },
        'Field of type textarea': {
            'type': 'textarea',
            'value': '',
            'placeholder': 'Placeholder for the textarea field'
        }
    },
});
                        


 

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 (or combinations) 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 element property can be a selector or a jQuery object : "#divToAttach" or $('#divToAttach')

* 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

View an example




 

Comments



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 me via email: postitall@txusko.com