Next-myft-ui NPM

DEPRECATED - now in n-ui

next-myft-ui

Client-side module to handle display of generic myft ui e.g. add to myft buttons

Consuming

Include JS and SCSS
Templates are provided for the following:

Following

{{>next-myft-ui/templates/follow}}
{{>next-myft-ui/templates/unfollow}}

The templates require a conceptId variable. You can also override the button text by providing a buttonText property.

You can require different versions of the button as below: {{>next-myft-ui/templates/follow version='3'}}

You can require different variants of the button as below: {{>next-myft-ui/templates/follow variant='standout'}} {{>next-myft-ui/templates/follow variant='inverse'}}

You can require different sizes of the button as below: {{>next-myft-ui/templates/follow size="big" variant='standout'}}

Save for later

{{>next-myft-ui/templates/save-for-later contentId=id}}
{{>next-myft-ui/templates/unsave-for-later contentId=id}}

The templates require an contentId variable. You can also override the button text by providing a buttonText property.

Prefer

{{>next-myft-ui/templates/prefer preferenceName="email-digest" buttonText="Subscribe"}}
{{>next-myft-ui/templates/unprefer preferenceName="email-digest" buttonText="Subscribe"}}

The templates require a preferenceName variable and a buttonText property. IN addition you may define a label, either as text, using label, or by specifying the name of a partial to render, using lableTemplate

JS API

init() Sets up listeners to update all myft buttons (follow, save, preference) to match the user's preferences
'updateUi(el)' Update the ui within a given element to match the user's preferences. If el is undefined applies to the whole page

To detect changes to myft buttons states listen for the nButtons.stateChange event

TopicSearch(opts) Constructor for a widget that searches for topics. Available options :=

* `searchEl` - the text input used to search for topics
* `destinationEl` - element in which to output results. Can contain default content to display when searhc in put is empty
* `resultsMessage` - message to show confirming that a search is being conducted (default 'Results:')
* `resultsMessageEl` element in which to output results message. Can contain default content to display when searhc in put is empty
* `resultTpl` - template for rendering a single result. Will carry out the following substitutions
	* '%7BconceptId%7D' -> uriEncoded concept id
	* '{conceptId}' -> concept id
	* '{name}' -> topic name
	* '{url}' -> topic stream url
	* '{taxonomy}' -> topic taxonomy
	* '{searchTerm}' -> current value of the search input
* `noResultsTpl` - template for rendering a message to say no results were found
	* '{searchTerm}' -> current value of the search input
* `minSearchTermLength` - min length of search term before search is triggered (default 2)
* `maxResults` - maximum number of results to return (default 5)
* `excludeSpecial` - exclude ['special' topics](https://github.com/Financial-Times/next-mustang/blob/master/server/models/special-pages.js) from the results (default true)
* `include` - comma separated list of topic taxonomies to include (will exclude all others)
* `exclude` - comma separated list of topic taxonomies to exclude (will include all others. If set `excludeSpecial` is ignored)

When results have been fetched and rendered the 'myft.ui.topicSearch.updated' event is fired on `destinationEl`