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(_start, _length)
    • "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(_start, _length)

Recalculates some measurements

Kind: instance method of ArticleManager
Access: public

| Param | Type | | --- | --- | | _start | Number | | _length | Number |

"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
  • .thumbnails : HTMLElement
  • .section : HTMLElement
  • .resize()
  • .hideListView()
  • .showListView()
  • .toggleListView()
  • "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.thumbnails : HTMLElement

The gallery thumbnail images

Kind: instance property of Gallery
Access: public

gallery.section : HTMLElement

The gallery section images

Kind: instance property of Gallery
Access: public

gallery.resize()

Resize calculates new bounds

Kind: instance method of Gallery
Access: public

gallery.hideListView()

Hides list view and shows thumbnail view

Kind: instance method of Gallery
Access: public

gallery.showListView()

Shows list view and hides thumbnail view

Kind: instance method of Gallery
Access: public

gallery.toggleListView()

Toggles list and thumbnail views

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