Download the plugin from the GitHub page 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>
Postitall can work alone but you can add some plugins and gain extra features and usability.
These are the list of supported plugins:
<!-- 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 override some css elements of the plugins for a correct integration with postitall.
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
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
Fundamentally, 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 abble to create a note from scratch and 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 in a sticky note.
<!-- HTML --> <p class="notes">This paragraph have 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>
This paragraph have the "notes" class.
The notes have some features that can be changed to satisfy your needs. By default all of them are enable, but you can change any of these "flags" in the beggining of your scripts and all the new notes will be affected by these changes.
These 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 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 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 resize screen addArrow : 'back' //Add arrow to notes : none, front, back, all };
These 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 };
As we 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 his 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 the case you don't specify the note id the options changed affects to all the 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 the 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 the 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 the case you have stored notes, this method will return in the callback function the number of stored notes of the current domain. |
You can change the global configuration of the plugin overwriting the default values in your script. The changes in the global configuration affects to the created new notes. Below you can change the global configuration.
* This changes will affect to all the new notes created.
Change global features by calling changeConfig method.
$.PostItAll.restoreConfig('global');
Restore global features by calling restoreConfig method.
Each note can be configured individually, however global configuration will be applied if it's not overwritten in the note creation.
The basic design parameters like colors or fonts can be adjusted to your needs too.
* Note that you should include the used font types in your web page. You can include it by using Google fonts.
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.
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 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".
All new notes without params will be created with the configuration saved.
Change note configuration and features by calling changeConfig method.
Restore note configuration to factory defaults.
$.PostItAll.restoreConfig('note');
Restore note configuration and features by calling restoreConfig method.
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.
You can work with these 5 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"); } });
You can get or set the options of your notes on the fly.
<!-- 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>
You can show, hide or remove all the notes by calling the show(), hide() or remove() global methods without params.
<!-- 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 a specific note.
<!-- 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>
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 the 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); });
Comming soon
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