Topcoat methods

on (event, [selector], [page], function)

Subscribe to event.

The [events](Topcoat Events) can be subscribed to globally (if you omit the page) or per page. There can be multiple subscriptions to the same event, so if you don't want to fire multiple events remember to remove the subscription with off. Note the page can be the page name ('home'), the page identifier ('#home'). As well as the [events](Topcoat Events), you can also use on to delegate standard Javascript events (as a replacement for jQuery's on except that it limits the events to the current page) and also [Hammerjs events] (https://github.com/EightMedia/hammer.js/wiki/Getting-Started#gesture-events) if you have included the Hammer library (it implements the one Hammer to rule them all pattern.

example:

tt.on(tt.EVENTS.PAGE_START, 'home', function() {
  console.log("I'm on the home page!");
});

tt.on('click', 'button', 'home', function() {
  console.log('All buttons on the home screen will log this, but not on any other screen');
}

tt.on('swipe', 'li', 'home', function() {
  console.log('If hammer.js is included in the html this will react to swipes, no other initialization is required');
}

off (event, [selector], [page], [function])

Unsubscribe to an event.

If the page is omitted, all subscriptions to the event are removed, not just global subscriptions. If the function is omitted, all subscriptions for the page are removed. If the function is included just that functions subscription to the page is removed.

tt.off(tt.EVENTS.PAGE_START, 'home');

currentPage

Returns the current page name.

console.log('The current page is: ' + tt.currentPage()); 

currentPageFind

**Shortcut to access the current page's selector find. **

var $helloButton = tt.currentPageFind('#helloButton');

// Basically the same as 
var $helloButton = $('#' + tt.currentPage()).find('#helloButton');
// but a little less ugh...

previousPage

Returns the previous page name.

console.log('The previous page is: ' + tt.previousPage()); 

hasBack

Whether or not their are pages in the backstack.

Example:

if (!tt.hasBack()) {
   $('backButton').hide();
}

goBack

Goes back

Goes back one page back in the history.

Example:

if (!loggedIn) {
    tt.goBack();
}

goTo(page, [isGoingBack], [transition], [isDialog])

Goes to a page

If isGoingBack is set the animation is from left-to-right rather than the standard right-to-left as well as not adding the page to the backstack. Note the page can be the page name ('home'), the page identifier ('#home'), or the page in a jQuery object $('#home'). Transition and isDialog are not yet implimented.

Example:

tt.goTo('home');

removePageFromHistory

**Removes the current page from the history **

The current page is removed from the backstack history. Useful for dialogs or logins so the user can't get back to the page hitting the back button.

tt.removePageFromHistory();

refreshScroll

Refreshes the scroll.

If a 'scroller' has been captured, it refreshes the boundaries of that 'scroller'.

tt.refreshScroll()

scrollTo(x, y, [duration], [easing])

Scrolls to a position

If a 'scroller' has been captured, scrolls to that position in viewwindow. Duration and easing are optional. Easing is one of: quadratic, circular, back, bounce, elastic.

tt.scrollTo(0,0);

scrollToElement(el, [duration], [offsetX], [offsetY], [easing])

Scrolls to an element

If a 'scroller' has been captured, scrolls to that element Duration, offset and easing are optional. Easing is one of: quadratic, circular, back, bounce, elastic.

$('li').click(function() {
    tt.scrollToElement($(this));
});

showLoading(msg)

Shows a loading message

Msg can text or html.

tt.showLoading('Please Wait');

loadMessage(msg)

Changes the loading message..

tt.loadMessage('Wait longer...');

hideLoading()

Hides the loading message

tt.hideLoading();

showDialog(msg, [buttons])

Shows a dialog with optional buttons.

If no buttons are present an Ok button is shown. Buttons are passed as an object where the button caption is the key and value is a function that is executed when the button is pressed. The dialog is always closed by clicking on any of the buttons.

tt.showDialog('<h3>Example Dialog</h3><div>This is a dialog</div>', {
  OK: function() { console.log('OK Pressed') }, 
  Cancel: function() { console.log('Cancel Pressed')}
});

###dialogShowing()

Returns whether or not a dialog is showing.

console.log('Dialog is' + (tt.dialogShowing() ? '' : ' not') + ' showing');

hideDialog

Hides the dialog

tt.hideDialog();

createController(pageName, [fns], [data])

**Creates a controller for a page. **

See the mvc example to see how it used. See Controller for controller functions and properties.

var homeController = tt.createController('home', { 
  pagestart: function() { console.log('Page started'); },
  pageend: function() { console.log('Page ended'); }},
  {title: 'Home Page'}});