Origami Frontend Components & Services

The Origami Registry is being decommissioned by the end of March 2024 and replaced with Storybook. For more information please read our blog post.

Please share any feedback in our #origami-chat Slack channel.

JSDoc: o-share

event:"oShare.open"

Type: object

The `oShare.open` open event fires when a social network share action is triggered, to open a new window.

property type description
share The o-share instance.
action The kind of share i.e. "social".
url The social share url opened.

Links

event:"oShare.ready"

Type: object

The `oShare.ready` fires when a o-share instance has been initialised.

property type description
share The initialised o-share instance.

Links

new Share(...)

parameter type default description
rootEl HTMLElement | string [el=document.body] - Element where to search for an o-share component. You can pass an HTMLElement or a selector string
config Object Optional
config.url string Optional, url to share
config.title string Optional, title to be used in social network sharing
config.titleExtra string Optional, extra bit to add to the title for some social networks
config.summary string Optional, summary of the page that's being shared
config.relatedTwitterAccounts string Optional, extra information for sharing on Twitter
config.links Array.<Object> Optional, array of strings of supported social network names that you want rendered

Methods

  • init - (inner) Initialises the Share class, rendering the o-share element if it's empty with [config](#config) options, or from corresponding data attributes and sets up dom-delegates. Dispatches 'oShare.ready' at the end
  • destroy - (instance) Destroys the Share instance, disables dom-delegates
  • init(rootEl) - (static) Initialises all o-share components inside the element passed as the first parameter

Links

Share~init

Inner Function

Initialises the Share class, rendering the o-share element if it's empty with config options, or from corresponding data attributes and sets up dom-delegates. Dispatches 'oShare.ready' at the end

Returns

  • undefined

Fires Event

Links

Share#destroy

Instance Method

Destroys the Share instance, disables dom-delegates

Returns

  • undefined

Links

Share.init(rootEl)

Static Method

Initialises all o-share components inside the element passed as the first parameter

parameter type default description
rootEl HTMLElement | string [el=document.body] - Element where to search for o-share components. You can pass an HTMLElement or a selector string

Returns

  • Array - - An array of Share instances

Links

new Share(...)

parameter type default description
rootEl HTMLElement | string [el=document.body] - Element where to search for an o-share component. You can pass an HTMLElement or a selector string
config Object Optional
config.url string Optional, url to share
config.title string Optional, title to be used in social network sharing
config.titleExtra string Optional, extra bit to add to the title for some social networks
config.summary string Optional, summary of the page that's being shared
config.relatedTwitterAccounts string Optional, extra information for sharing on Twitter
config.links Array.<Object> Optional, array of strings of supported social network names that you want rendered

Methods

  • init - (inner) Initialises the Share class, rendering the o-share element if it's empty with [config](#config) options, or from corresponding data attributes and sets up dom-delegates. Dispatches 'oShare.ready' at the end
  • destroy - (instance) Destroys the Share instance, disables dom-delegates
  • init(rootEl) - (static) Initialises all o-share components inside the element passed as the first parameter

Links

Status
active
Switch component view

GitHub: o-share@8.1.1

Install o-share

If using the Build Service, add o-share@^8.1.1 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-share@^8.1.1".

Help & Support

o-share is maintained directly by the Origami team. If you have any questions about o-share or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com