5/21/15 - UI Encapsulation Object?

I'm still in the process of structuring the various objects in NotesDemo so that they can know the least about each other and still function. Today, I split the ui handling object into two, with one object handling the interface for inputting notes, and the other handling the display of the notes on screen.

I moved the trash button click function into the latter object, because I realized that with my previous code, notes created after document.ready() was evaluated wouldn't have the event.  This forced me to pass in my notes storage manager as an argument, since I need the trash function to get the parsed index from the note element id and delete the note.  Before this, I had managed to keep all the objects completely separate from each other.

I also ended up creating an object which encapsulates all the UI behavior coded so far, a ui manager.  I'm not too comfortable with this style of programming, so I don't know if I'm missing a better way to go about this.  It's essentialy just a hash with two keys mapped to each specific UI object.  Then, a user of the object can do ui.note_input and ui.note_disp to get the two specific objects. It might not even be worth making a full constructor function for this, and instead just setting it up in the document.ready function.

I found it interesting that this line works without me having to encapsulate trash_click_fn in an anonymous function as would be necessary if creating an object.

I'm still not sure why javascript requires encapsulation, for example,

function encapsulating_function () {
  var pre_defined_function = ...
  return {
    bad_func:    pre_defined_function,
    good_func:   function () { pre_defined_function },
    better_func: function () { pre_defined_function.apply(this, arguments) }
  }
}

where bad_func won't work, good_func will work but only if the function expects no arguments, and better_func will work in all cases pre_defined_function would work).

Actually, what I just wrote is wrong. I just tested it, and #bad_func and #better_func give the user access to pre_defined_function, while good_func returns undefined. I'm so confused :S

I also did a minor css change and added the property -moz-user-select: none; to the header class. This nicely applies to all sub-elements within the header, and so it prevents users from highlighting the app title 'Notes' or the '-' on the input toggle button by long-pressing.