jQuery Plugin For Sticky Draggable Notes On The Web - Post It All

jQuery Plugin For Sticky Draggable Notes On The Web - Post It All
File Size: 74.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Post It All is a jQuery plugin which allows the visitor to create customizable, floating, draggable and resizable notes on the webpage.

Features:

  • Drag and drop support based on jQuery UI.
  • Allows to maximize and minimize note windows.
  • WYSIWYG editor based on Trumbowyg.
  • Tiny color picker based on Minicolors.
  • Allows to save notes on client side using HTML5 local storage API.
  • Also comes with a Chrome extension.

See also:

Basic usage:

1. Load jQuery library and other required resources in the webpage.

<!-- jQuery Library -->
<script src="jquery.min.js"></script>

<!-- jQuery UI -->
<link rel="stylesheet" href="jquery-ui.css">
<script src="libs/jquery-ui/jquery-ui.min.js"></script>

<!-- Trumbowyg editor -->
<link rel="stylesheet" href="trumbowyg.css">
<script src="trumbowyg.min.js"></script>

<!-- Minicolors -->
<link rel="stylesheet" href="jquery.minicolors.css">
<script src="jquery.minicolors.min.js"></script>

2. Download and include the jQuery Post It All plugin's JS and CSS files in the webpage.

<link rel="stylesheet" href="jquery.postitall.css">
<script src="jquery.postitall.js"></script>

3. Add a new sticky note in the top left corner of the webpage.

$.PostItAll.new("Hello World");

4. Global configurations to enable and disable features and change the notes behaviour.

$.fn.postitall.globals = {

  // Id note prefixe
  prefix          : '#PIApostit_',

  // Options: domain, page, all
  filter          : 'domain',     

  // Save postit in local storage
  savable         : false,        

  // Random color in new postits
  randomColor     : true,         

  // Show or hide toolbar
  toolbar         : true,         

  // Animation efect on hover over postit shoing/hiding toolbar options
  autoHideToolBar : true,         

  // Set removable feature on or off
  removable       : true,         

  // Confirmation before note remove
  askOnDelete     : true,         

  // Set draggable feature on or off
  draggable       : true,         

  // Set resizable feature on or off
  resizable       : true,         

  // Set contenteditable and enable changing note content
  editable        : true,         

  // Set options feature on or off
  changeoptions   : true,         

  // Postit can not be modified
  blocked         : true,         

  // true = minimized, false = maximixed
  minimized       : true,         

  // Expand note
  expand          : true,         

  // Allow to fix the note in page
  fixed           : true,         

  // Create a new postit
  addNew          : true,      

  // Show info icon   
  showInfo        : true,         

  // Allow paste html in contenteditor
  pasteHtml       : true,         

  // Html editor (trumbowyg)
  htmlEditor      : true,         

  // Automatic reposition of the notes when user resize screen
  autoPosition    : true,        

  // Add arrow to notes : none, front, back, all 
  addArrow        : 'back'       
   
};

5. Note configurations for properties, style, features and events of the note.

$.fn.postitall.defaults = {
  
  // Note id
  id              : "",        

  // Creation date               
  created         : Date.now(),             

  // Domain in the url  
  domain          : window.location.origin,   

  // Page in the url
  page            : window.location.pathname, 

  // Browser informtion & OS name,
  osname          : navigator.appVersion,     

  // Content of the note (text or html)
  content         : '',                  

  // Position absolute or fixed     
  position        : 'absolute',              

  // x coordinate (from left) 
  posX            : '10px',         

  // y coordinate (from top)         
  posY            : '10px',       

  // x coordinate (from right). This property invalidate posX            
  right           : '',                       

  // Note total height
  height          : 200,                 

  // Note total width     
  width           : 160,            

  // Note resizable min-width          
  minHeight       : 210,            

  // Note resizable min-height          
  minWidth        : 170,   

  // Position when minimized/collapsed (internal use)                   
  oldPosition     : {},   

  // Config note style
  style : {

    // General style in 3d format
    tresd           : true,   

    // Background color in new postits when randomColor = false              
    backgroundcolor : '#FFFA3C',        

    // Text color    
    textcolor       : '#333333',         

    // Shadow in the text   
    textshadow      : true,          

    // Default font       
    fontfamily      : 'verdana',        

    // Default font size    
    fontsize        : 'small',     

    // Default arrow : none, top, right, bottom, left         
    arrow           : 'none',               
  },

  // By default, copy of global defaults
  features : $.fn.postitall.globals,          

  // Note flags
  flags : {

    // If true, the note cannot be edited
    blocked         : false,         

    // true = Collapsed note / false = maximixed       
    minimized       : false,                

    // true = Expanded note / false = normal
    expand          : false,        

    // Set position fixed        
    fixed           : false,            

    // Higlight note    
    highlight       : false,                
  },

  //  Attach the note to al html element
  attachedTo : {

    // Where to attach
    element         : '',   

    // Position relative to elemente : top, right, bottom or left                
    position        : 'right',     

    // Fix note to element when resize screen         
    fixed           : true,            

    // Show an arrow in the inverse position     
    arrow           : true,                 
  },

  
  // Triggered after note creation
  onCreated: function(id, options, obj) { return undefined; },  

  // Triggered on each change  
  onChange: function (id) { return undefined; },    

  // Triggered when note is clicked, dragged or resized              
  onSelect: function (id) { return undefined; },         

  // Triggered on double click         
  onDblClick: function (id) { return undefined; },       

  // Triggered on the end of dragging and resizing of a note         
  onRelease: function (id) { return undefined; },           

  // Triggered when a note is deleted      
  onDelete: function (id) { return undefined; }        
             
};

6. API.

// Create a new note. 
// $(id).postitall('new', options, callback);
$.PostItAll.new(content, options, object, callback);

// Get or set the options of the created notes. 
// $(id).postitall('options');
// $(id).postitall('options',options);
$.PostItAll.options(options);
$.PostItAll.options(id,options);

// Hide note. 
// $(id).postitall('hide');
$.PostItAll.hide();
$.PostItAll.hide(id);

// Show note. 
// $(id).postitall('show');
$.PostItAll.show();
$.PostItAll.show(id);

// Destroy a specific note or all the notes of your page. 
// $(id).postitall('destroy');  
$.PostItAll.destroy(inline, storage, domain);

// Change the global or note configuration. 
$.PostItAll.changeConfig(type, opt);

// Restore global and/or note configuration to factory defaults. 
$.PostItAll.restoreConfig(type);

// load and show all notes from the current domain/page. 
$.PostItAll.load(callback, callbacks, highlight);

// save all the notes in the storage
$.PostItAll.save();

// return in the callback function the number of stored notes of the current domain.
$.PostItAll.length(callback);

Changelog:

2018-12-14

  • Bugfix

v1.1.0 (2018-01-22)

  • Arrows hidden with default note configuration

v1.0.9 (2018-01-21)

  • Css improvements & bug fixes

v1.0.9 (2016-08-31)

  • bugfix

v1.0.8 (2016-08-30)

  • Fixed Issue : "attachedTo" should support jQuery elements, not just selectors

v1.0.7 (2016-02-24)

  • Improved hide-note feature

v1.0.6 (2016-02-10)

  • Issues corrections

v1.0.5 (2016-01-03)

  • Hide note feature & Hidden flag

This awesome jQuery plugin is developed by txusko. For more Advanced Usages, please check the demo page or visit the official website.