@cnbritain/merlin-frontend-article-js v1.18.10
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
- 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:
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
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago