Display YouTube and Twitter data in same popup and toggle content with buttons

[ioanalazar42]

Frontend changes

The popup will contain four html div elements

• a general dataWindow and nested in it:
  • a button container (bttnDiv) - with the two buttons for YouTube and Twitter
  • a container for YouTube data (ytDataDiv) - where YouTube data will be saved once a popup is open
  • a container for Twitter data (twitterDataDiv) - where Twitter data will be saved once a popup is open

When user clicks on a marker

• dataWindow is created and bttnDiv is appended to it
• ytDataDiv and twitterDataDiv are initialized
• method prepareYTPosts(marker) is called to
  • fetch YouTube data for that marker (using country code)
  • save it in the ytDataDiv
  • open a popup where ytDataDiv is appended to dataWindow
• method prepareTwitterPosts(marker) is called to
  • fetch Twitter data for that marker (using woeid)
  • save it in the twitterDataDiv (to be displayed if user clicks on Twitter button)

Change popup content when user clicks on YouTube/Twitter buttons

• add click listeners to the two buttons
• if one of the buttons is pressed
  • clear dataWindow (reinitalize it)
  • append to it ytDataDiv or twitterDataDiv (which contain the saved data)
  • use setContent() to display the data

(This behavior is controlled by the classUniqueWindowHandler)

Other changes

• reorganize methods in file such that YouTube/Twitter related methods are in the same place
  • YouTube methods - prepareYTPosts, createIframeById, getVideosNode
  • Twitter methods - prepareTwitterPosts, getTrends, createTrendElement