Yesterday I built something that allowed one to have a list of items in a list wherein one and only one item could be expanded in said list. Today, I am going to expand and refine upon that idea. Specifically, I am building a list of items, where each item is a bit of editable text. Because each item is a bit of editable text, the vertical height can vary depending on how much text is entered.
Side Note: Sproutcore has the concept of a lazily loaded view container. This is very cool. It allows you to have a list of items that might contain hundreds of thousands of items, but only end up loading the ones you actually see. The catch is that each item needs to be equal in height, because the list calculates which views to display based upon the distance of the currently scrolled view area from the top. Because of this, the list being built today will not really work with lazy loading. This is because each view item in this list does not have a standard height. This really is not a issue if you are dealing with a small list of items, but it is something to keep in mind if you tried to use today's list with a huge list and using lazy loading.
What do we want?
A list, maybe 10 items or so, where each item in the list is a piece of text. Clicking on any item in the list will cause it to become editable. When editable, a item switches to a html textArea, and focus is placed in the textArea. This is a special textArea that resizes depending on how much text you put in it. Clicking outside of the editable item at any time causes it to switch from our textArea back into regular text. The size of the textArea should be roughly comparable to the size of the text when focus is removed. This allows people to gauge what their text will look like when they are done editing.
Work In Progress
No comments:
Post a Comment