Goal
- Make floating banner show one row by default.
- Create a "floating banner mode" in the
diffFileIndexView
that displays one row by default.
- Create a toggle effect for the dropdown button that collapses / expands the list.
- Look into Jasmine tests
Outcome
Week 7: Mar 12th (Demo Day 2)
- The floating banner shows one row by default. I created a "banner" mode in he
diffFileIndexView
that separates the normal mode from the banner mode.
- This was done by passing a string variable into the view on initialization / creation. The current modes passed in are
banner
and page
.
- The floating banner changes the default diff file shown in the row depending on which diff file the user is currently looking at.
- This was done by calculating which diff file the current user is looking at. I used the
requestAnimationFrame
function to listen to execute a callback function on each scroll effect. The benefits of using this function is that it only executes the callback whenever the browser is ready for it.
- The calculation is based on the
windowTop
value and the diffFilePosition
offset value. If there is an intersection, then I empty the _itemsTable
and add that specific file to the _itemsTable
. This way there's only ever one item inside the banner's diffFileIndexView
.
- These changes introduced a bug: The diff files displayed in the banner stay in loading mode forever. This will be investigated next week.
Tasks Completed
- Completed task 4 from Week 6's notes: Make one diff file show in the banner as default.
- Completed task 6 from Week 6's notes: The diff file currently looked at by the user should always be displayed in the floating banner's diffFileIndexView.
What I learned this week
- I Learned how to use the following UnderscoreJS functions:
_.bind()
, _.bindAll()
, and _.debounce()
.
- I Learned how to use the
requestAnimationFrame(callback)
function, and how it works.
- I Learned about Lambda expressions in Javascript (es6). I have never used them before, but I find them neat. They allow the developer to write
() => expression
rather than function() {return expression;}
.
- I Learned the hard way that the scope of
this
changes as soon as we enter an anonymous function
in Javascript. To solve this, we use Underscore's bind or bindAll functions to bind the this
object to that function.
- I Learned how to use jQuery's
$(window).scrollTop
and .offset().top
to get the numeric values for where the top of the webpage is, and where the user has currently scrolled to.