PageRenderTime 56ms CodeModel.GetById 19ms RepoModel.GetById 0ms app.codeStats 0ms

/backend/Scale/js/apps/notes.js

https://gitlab.com/kaouech/theme
JavaScript | 263 lines | 159 code | 59 blank | 45 comment | 13 complexity | c6327c598510880d4921d0c300192ee3 MD5 | raw file
  1. // Load the application once the DOM is ready, using `jQuery.ready`:
  2. $(function(){
  3. // Note Model
  4. // ----------
  5. var Note = Backbone.Model.extend({
  6. // Default attributes for the item.
  7. defaults: function() {
  8. return {
  9. id : Notes.nextId(),
  10. name : "New note",
  11. description : "",
  12. date : Date.now()
  13. };
  14. }
  15. });
  16. // Note Collection
  17. // ---------------
  18. // The collection of notes is backed by *localStorage* instead of a remote server
  19. var NoteList = Backbone.Collection.extend({
  20. // Reference to this collection's model.
  21. model: Note,
  22. // Save all of the items to local storage under namespace.
  23. localStorage: new Backbone.LocalStorage("notes-app"),
  24. // Save data to database.
  25. //url: 'api/notes',
  26. // We keep in sequential id, despite being saved by unordered
  27. // GUID in the database. This generates the next id number for new items.
  28. nextId: function() {
  29. if (this.url) return null;
  30. if (!this.length) return 1;
  31. return this.last().get('id') + 1;
  32. },
  33. // sorted by their original insertion id.
  34. comparator: function(note) {
  35. return parseInt(note.get("id"));
  36. },
  37. search : function(str){
  38. // if(str == "") return this;
  39. var pattern = new RegExp(str, "gi");
  40. return _(this.filter(function(data) {
  41. data.trigger('show');
  42. if (pattern.test(data.get("description")) == false) {
  43. data.trigger('hide');
  44. };
  45. }));
  46. }
  47. });
  48. // Create our global collection.
  49. var Notes = new NoteList;
  50. // Item View
  51. // --------------
  52. // The DOM element for a item...
  53. var NoteItemView = Backbone.View.extend({
  54. //... is a list tag.
  55. tagName: "li",
  56. className: "list-group-item hover",
  57. // Cache the template function for a single item.
  58. template: _.template($('#item-template').html()),
  59. // The DOM events specific to an item.
  60. events: {
  61. "click .destroy": "clear",
  62. "click" : "select"
  63. },
  64. // The View listens for changes to its model, re-rendering.
  65. initialize: function() {
  66. this.listenTo(this.model, 'change', this.render);
  67. this.listenTo(this.model, 'destroy', this.remove);
  68. this.listenTo(this.model, 'select', this.select);
  69. this.listenTo(this.model, 'active', this.active);
  70. this.listenTo(this.model, 'hide', this.hide);
  71. this.listenTo(this.model, 'show', this.show);
  72. },
  73. // Re-render the titles of the item.
  74. render: function() {
  75. this.$el.html(this.template(this.model.toJSON()));
  76. return this;
  77. },
  78. // Remove the item, destroy the model.
  79. clear: function(e) {
  80. this.model.destroy();
  81. window.history.back();
  82. },
  83. // Click to select
  84. select: function(){
  85. this.active();
  86. app.navigate("notes/"+this.model.get('id'), {trigger: true});
  87. },
  88. // Active
  89. active: function(){
  90. this.$el.parent().find('.active').removeClass('active');
  91. this.$el.addClass('active');
  92. },
  93. hide: function(){
  94. this.$el.addClass('hide');
  95. },
  96. show: function(){
  97. this.$el.removeClass('hide');
  98. }
  99. });
  100. // list view
  101. var NoteListView = Backbone.View.extend({
  102. // Instead of generating a new element, bind to the existing skeleton of
  103. el: $("#note-list"),
  104. // Delegated events for creating new items, and clearing completed ones.
  105. events: {
  106. "click #new-note" : "create",
  107. "keyup #search-note": "search"
  108. },
  109. // At initialization we bind to the relevant events on the
  110. // collection, when items are added or changed. Kick things off by
  111. // loading any preexistings that might be saved in *localStorage*.
  112. initialize: function() {
  113. this.listenTo(Notes, 'add', this.addOne);
  114. this.listenTo(Notes, 'reset', this.addAll);
  115. this.listenTo(Notes, 'all', this.render);
  116. },
  117. // Re-rendering the App just means refreshing the statistics -- the rest
  118. // of the app doesn't change.
  119. render: function() {
  120. },
  121. // Add a single item to the list by creating a view for it, and
  122. // appending its element to the `<ul>`.
  123. addOne: function(note) {
  124. var view = new NoteItemView({model: note});
  125. this.$el.find('#note-items').prepend(view.render().el);
  126. },
  127. // Add all items in the collection at once.
  128. addAll: function() {
  129. Notes.each(this.addOne, this);
  130. },
  131. create: function(e) {
  132. var note = new Note;
  133. Notes.create(note, {
  134. success:function () {
  135. note.trigger('select');
  136. }
  137. });
  138. },
  139. search: function(){
  140. Notes.search($('#search-note').val());
  141. }
  142. });
  143. // note detail
  144. var NoteView = Backbone.View.extend({
  145. el: $("#note-detail"),
  146. // Cache the template function
  147. template: _.template($('#note-template').html()),
  148. // The DOM events specific to the textarea.
  149. events: {
  150. "keyup textarea" : "updateOnKeyup",
  151. },
  152. initialize:function () {
  153. this.$el.html(this.template(this.model.toJSON()));
  154. },
  155. // update the model when update
  156. updateOnKeyup: function(e){
  157. var name = '',
  158. description = $(e.target).val(),
  159. arr = description.split(/\r\n|\r|\n/g);
  160. arr.length && ( name = _.first( _.filter(arr, function(item){ return !!$.trim(item); }) ) );
  161. this.model.save({name: name, description: description});
  162. },
  163. close:function () {
  164. this.$el.unbind();
  165. this.$el.empty();
  166. }
  167. });
  168. var AppRouter = Backbone.Router.extend({
  169. routes: {
  170. "" : "list",
  171. "notes/:id" : "details"
  172. },
  173. initialize: function () {
  174. },
  175. list: function() {
  176. if(this.noteListView) return;
  177. this.noteListView = new NoteListView;
  178. var self = this;
  179. Notes.fetch({
  180. success: function(){
  181. var id = app.requiredId || (Notes.length && Notes.at(Notes.length - 1).get('id'));
  182. Notes.length && self.details(id) && app.navigate('notes/'+id);
  183. !Notes.length && $('#new-note').trigger('click');
  184. }
  185. });
  186. },
  187. details: function(id) {
  188. app.requiredId = id;
  189. this.list();
  190. // close the note detail view
  191. if (this.noteView) this.noteView.close();
  192. // get the note
  193. this.note = Notes.get(id);
  194. if(this.note){
  195. this.note.trigger('active');
  196. this.noteView = new NoteView({model: this.note});
  197. }
  198. return this;
  199. }
  200. });
  201. // Finally, we kick things off by creating the **App**.
  202. var app = new AppRouter();
  203. Backbone.history.start();
  204. });