QuickNote jQuery Plugin


/ Published in: jQuery
Save to your folder(s)

Please visit http://pantuts.com/2014/09/21/quicknote-jquery-plugin/ for other included files and demos. Thanks


Copy this code and paste it in your HTML
  1. /**
  2.  * QuickNote - jQuery plugin that lets you add quick note or todo note.
  3.  * This plugin is useful for admin panel dashboard.
  4.  *
  5.  * Copyright 2014 Pantuts
  6.  * Licensed under GNU GPLv3
  7.  * https://github.com/pantuts
  8.  * http://pantuts.com
  9.  * Version 1.1
  10.  * Changelog:
  11.  * Added support for localStorage
  12.  * Added close button instead of directly clicking on note
  13.  * Changed font to Open Sans
  14.  * Text wrapping
  15.  */
  16.  
  17. ;(function($, window, document, undefined) {
  18.  
  19. 'use strict';
  20.  
  21. var QuickNote = function(el, options) {
  22. this.el = el;
  23. this.$el = $(el);
  24. this.options = options;
  25. };
  26.  
  27. QuickNote.prototype = {
  28. defaults: {
  29. theme: 'dark',
  30. pos: 'right',
  31. storage: true || false
  32. },
  33. init: function() {
  34. this.config = $.extend({}, this.defaults, this.options);
  35. // DETECTING localStorage
  36. if (Storage === void(0)) {
  37. this.config.storage = false;
  38. }
  39. this.appendElem();
  40. this.completeNote();
  41. },
  42. isURL: function(str) {
  43. // CHECKING IF NOTE IS HAS URL FORMAT
  44. if(/(http|https|ftp):\/\/[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/i.test(str)) {
  45. return true;
  46. } else {
  47. return false;
  48. }
  49. },
  50. appendElem: function() {
  51. var isURL = this.isURL;
  52.  
  53. // THEME
  54. if (this.config.theme == 'light') {
  55. this.$el.addClass('qn_container_light').addClass('qn_container');
  56. } else if (this.config.theme == 'dark') {
  57. this.$el.addClass('qn_container');
  58. } else {
  59. console.log('Error: Theme >> ' + this.config.theme + ' not found.');
  60. // SET DEFAULT
  61. this.$el.addClass('qn_container');
  62. }
  63.  
  64. // POSITION
  65. if (this.config.pos == 'left') {
  66. this.$el.css({ 'left':'0', 'bottom':'0', 'margin-left':'5px' });
  67. } else if (this.config.pos == 'right') {
  68. } else {
  69. console.log('Error: Position >> ' + this.config.pos + ' not found.');
  70. }
  71.  
  72. var showHide = '<div id="qn_sh"><span>Show/Hide</span></div>';
  73. var divNotes = '<div id="notes"></div>';
  74. var notesInp = '<p><input type="text" name="qn_input" maxlength="500" placeholder="Your notes..."></p>';
  75. $(showHide).appendTo(this.$el);
  76. $(divNotes).appendTo(this.$el);
  77. $(notesInp).appendTo(this.$el.find('#notes'));
  78.  
  79. // CHECK EXISTING NOTES IN localStorage
  80. if (this.config.storage === true) {
  81. var ls = JSON.parse(localStorage.getItem('quicknote')) || [];
  82. if (ls) {
  83. // LOAD THE NOTES
  84. $.each(ls, function(index, obj) {
  85. $('<span class="quicknote" id="' + ls[index].id + '"></span>').css({ display: 'table' }).stop().fadeIn('fast').appendTo('.qn_container #notes').text(ls[index].note);
  86. $('<span class="close"></span>').prependTo('#' + ls[index].id);
  87. var qnText = ls[index].note;
  88. if (isURL(qnText)) {
  89. $('#' + ls[index].id).addClass('quicknote-bword');
  90. }
  91. });
  92. }
  93. }
  94. },
  95. completeNote: function() {
  96. var storage = this.config.storage;
  97. var isURL = this.isURL;
  98.  
  99. this.$el.on('keypress', '#notes input', function(e) {
  100. // RETURN KEY PRESSED
  101. if (e.which == 13 || e.keyCode == 13) {
  102. var notesInpVal = $('#notes input').val();
  103.  
  104. if (notesInpVal) {
  105. var uniqid = Date.now();
  106.  
  107. // CREATE NOTES
  108. $('<span class="quicknote" id="qn_' + uniqid + '"></span>').css({ display: 'table' }).stop().fadeIn('fast').appendTo('.qn_container #notes').text(notesInpVal);
  109. $('<span class="close"></span>').prependTo('#qn_' + uniqid);
  110. // word-break: break-all IF HAS URL FORMAT
  111. var qnText = $('#qn_' + uniqid).text();
  112. if (isURL(qnText)) {
  113. $('#qn_' + uniqid).addClass('quicknote-bword');
  114. }
  115. $('.qn_container #notes input').val('');
  116.  
  117. var id = 'qn_' + uniqid;
  118. var note = $('#qn_' + uniqid).text();
  119. var newNote = {
  120. 'id': id,
  121. 'note': note
  122. };
  123.  
  124. // SAVE TO localStorage
  125. if (storage === true) {
  126. var prevNotes = JSON.parse(localStorage.getItem('quicknote')) || [];
  127. prevNotes.push(newNote);
  128. localStorage.setItem('quicknote', JSON.stringify(prevNotes));
  129. }
  130. } else {
  131. console.log('Empty note!');
  132. }
  133. }
  134. });
  135.  
  136. // SHOW AND HIDE
  137. this.$el.on('click', '#qn_sh span', function() {
  138. $('.qn_container #notes').slideToggle(100);
  139. });
  140.  
  141. // CLICK TO CLOSE NOTES
  142. this.$el.on('click', '#notes .close', function() {
  143. $(this).each(function() {
  144. $(this).parent('.quicknote').stop().fadeOut(100, function() {
  145. var id = $(this).attr('id');
  146. var note = $(this).text();
  147. var theNote = {
  148. 'id': id,
  149. 'note': note
  150. };
  151.  
  152. // REMOVAL OF ITEM IN localStorage
  153. if (storage === true) {
  154. var ls = JSON.parse(localStorage.getItem('quicknote')) || [];
  155. if (ls) {
  156. $.each(ls, function(index, obj) {
  157. // console.log(ID);
  158. if (obj.id == id) {
  159. ls.splice(index, 1);
  160. localStorage.setItem('quicknote', JSON.stringify(ls));
  161. return false;
  162. }
  163. });
  164. }
  165. }
  166.  
  167. // REMOVE CURRENT ELEMENT FROM DOM
  168. $(this).remove();
  169. });
  170. });
  171. });
  172. }
  173. };
  174.  
  175. $.fn.quicknote = function(options) {
  176. return this.each(function() {
  177. new QuickNote(this, options).init();
  178. });
  179. };
  180.  
  181. })(jQuery, window, document);

URL: http://pantuts.com/2014/09/21/quicknote-jquery-plugin/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.