@cnbritain/merlin-frontend-article-js

merlin-frontend-article-js

ArticleManager, Article

JS Documentation

Article

Kind: global class

• Article
  • new Article(el, options)
  • .bounds : Object
  • .el : HTMLElement
  • .isInfinite : Boolean
  • .manager : ArticleManager
  • .initialiseAds()
  • .resize()
  • "focus"
  • "blur"

new Article(el, options)

Param	Type	Description
el	HTMLElement	The article element
options	Object	Article options
options.analytics	Object	Analytics configuration for the article
options.infinite	Boolean	Whether the article came from infinite scroll
options.manager	ArticleManager	The article manager that added the article
options.type	Number	The article type based on ARTICLE_TYPES enum
options.simplereach	Object	Simplereach configuration for promotions

article.bounds : Object

The bounds of the article element

Kind: instance property of Article
Access: public

article.el : HTMLElement

The article element

Kind: instance property of Article
Access: public

article.isInfinite : Boolean

Is the article from infinite scroll?

Kind: instance property of Article
Access: public

article.manager : ArticleManager

The article manager that added the article

Kind: instance property of Article
Access: public

article.initialiseAds()

Initialiases the ads

Kind: instance method of Article
Access: public

article.resize()

Calculates any new size changes

Kind: instance method of Article
Access: public

"focus"

When an article is the current focus on the screen

Kind: event emitted by Article

"blur"

When an article is the loses current focus on the screen

Kind: event emitted by Article

ArticleManager

Kind: global class

• ArticleManager
  • instance
    • .articles : Array
    • .addArticle(el, options) ⇒ Article
    • .disableInfiniteScroll()
    • .enableInfiniteScroll()
    • .resize()
    • "add"
  • static
    • .ARTICLE_TYPES : Number

articleManager.articles : Array

List of articles that have been loaded

Kind: instance property of ArticleManager
Access: public

articleManager.addArticle(el, options) ⇒ Article

Adds an article to the list

Kind: instance method of ArticleManager
Emits: add
Access: public

Param	Type	Description
el	HTMLElement	The article element
options	Object	Options for the Article
options.infinite	Boolean	Has the article come from infinite scroll?
options.type	Number	The article type. Based on ARTICLE_TYPES
options.analytics	Object	Analytics config for the article
options.simplereach	Object	SimpleReach config for promotions

articleManager.disableInfiniteScroll()

Disables the infinite scroll

Kind: instance method of ArticleManager
Access: public

articleManager.enableInfiniteScroll()

Enables the infinite scroll

Kind: instance method of ArticleManager
Access: public

articleManager.resize()

Recalculates some measurements

Kind: instance method of ArticleManager
Access: public

"add"

Adds an article to the list

Kind: event emitted by ArticleManager
Properties

Name	Description
article	The added article

ArticleManager.ARTICLE_TYPES : Number

Article types enum

Kind: static property of ArticleManager

Gallery

Kind: global class

• Gallery
  • new Gallery(el, options)
  • .galleryBounds : Object
  • .items : Array.<HTMLElement>
  • .images : Array.<HTMLElement>
  • .navigation : GalleryImageNavigation
  • .resize()
  • "imagefocus"
  • "imageblur"

new Gallery(el, options)

Param	Type	Description
el	HTMLElement	Article Element 'a-main'
options	Object	Gallery options

gallery.galleryBounds : Object

The bounds of the gallery container

Kind: instance property of Gallery
Access: public

gallery.items : Array.<HTMLElement>

Items in the gallery - images and ads

Kind: instance property of Gallery
Access: public

gallery.images : Array.<HTMLElement>

Images in the gallery

Kind: instance property of Gallery
Access: public

gallery.navigation : GalleryImageNavigation

The gallery navigation arrows

Kind: instance property of Gallery
Access: public

gallery.resize()

Resize calculates new bounds

Kind: instance method of Gallery
Access: public

"imagefocus"

Gallery image has gained focus

Kind: event emitted by Gallery

"imageblur"

Gallery image has blurred

Kind: event emitted by Gallery

Prerequisites:

• Node.js — brew install node
• Grunt - npm install -g grunt-cli
• Other prereqs? Python? Virtualenv?

Demo:

Install dependencies:

npm install

Build the things:

npm run sass
npm run js
npm run docs

Hint your JS

npm run jshint

Python the pythons:

npm run demo-install

Start the demo server:

python demo.py