MCUtils Namespace: charte

The charte instance implements a set of feature to handle the charte. You can get the app element and header, menu and footer elements. You can set the app name, menu and tabs. Listen to events to get informed of the interaction with the app elements.

Source:: charte/charte.js

Example

import chart from 'mcutils/charte.charte'
charte.setUnivers('carto');
// Add a fullscreen tool to the app fullscreen
charte.addTool('fullscreen', 'fi-visible', 'Plein écran', () => charte.fullscreen())
// Add a new tab
charte.addMenuTab('locate', 'fi-location  ', 'Localisation', 'Onglet Carte');
charte.on('tab:show', (e) => {
  console.log(e.id+ ' tab is open...');
})

Namespaces

macarte

Members

<static> setCarousel

Set a carrousel for an element

Source:: charte/charte.js

<static> setPiwik

Set piwik tracker

Source:: charte/charte.js

Methods

<static> accordionCheck(elt, b)

Check an accordion element

Parameters:

Name	Type	Description
`elt`	Element	list or label element
`b`	boolean

Source:: charte/charte.js

<static> addExtraFooter(className, title, text, url [, external])

Add extra footer div

Parameters:

Name	Type	Argument	Default
`className`	string
`title`	string
`text`	string
`url`	string
`external`	boolean	<optional>	false

Source:: charte/charte.js

<static> addHelpLink(title, url [, external])

Add Help links

Parameters:

Name	Type	Argument	Default
`title`	string
`url`	string
`external`	boolean	<optional>	false

Source:: charte/charte.js

<static> addShortLink(title, url [, external])

Add Short links

Parameters:

Name	Type	Argument	Default
`title`	string
`url`	string
`external`	boolean	<optional>	false

Source:: charte/charte.js

<static> addUserMenuItem(content)

Add user menu item

Parameters:

Name	Type	Description
`content`	string \| Element

Source:: charte/charte.js

Returns:

Type: Element

<static> canLogout()

Check if the app can logout

Source:: charte/charte.js

Returns:

Type: boolean

<static> initAccordion(ul)

Initialize accordion

Parameters:

Name	Type	Description
`ul`	Element

Source:: charte/charte.js

<static> initTabList(ul [, onchange])

Initialize tabs list

Parameters:

Name	Type	Argument	Description
`ul`	Element		tab element
`onchange`	function	<optional>	a function that takes the tab ID

Source:: charte/charte.js

<static> setTabList(ul, name)

Set tab list at name

Parameters:

Name	Type	Description
`ul`	Element
`name`	string

Source:: charte/charte.js

addFooterLink(options)

Add a menu button

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`id`	string
`title`	string
`small`	string	text to display on small screen
`href`	string
`onclick`	function

Source:: charte/charte.js

addMenuButton(id, icon, title)

Add a menu button

Parameters:

Name	Type	Description
`id`	string
`icon`	string	an icon to display (set as classname)
`title`	string	button title

Source:: charte/charte.js

Returns:

the button element

Type: Element

addMenuList(options)

Add a menu list

Parameters:

Name Type Description

options

Object

Properties

Name	Type	Description
`id`	string
`title`	string
`list`	Array.<string>	a list of submenu
`onclick`	function

Source:: charte/charte.js

Fires:

addMenuTab(id, icon, title, content)

Add a menu tab

Parameters:

Name	Type	Description
`id`	string
`icon`	string	an icon to display (set as classname)
`title`	string	button title
`content`	Element \| string	an element or html to add in the tab

Source:: charte/charte.js

Returns:

the tab element

Type: Element

addTool(id, icon, title)

Add a new tool

Parameters:

Name	Type	Description
`id`	string
`icon`	string	an icon to display (set as classname)
`title`	string	button title

Source:: charte/charte.js

Returns:

[onclick] callback function on click

Type: function

connect()

Dispatch a connect event

Source:: charte/charte.js

createAccordionElement(ul, options)

Create an accordion element

Parameters:

Name Type Description

ul

Element

parent element with an accordion className

options

object

Properties

Name	Type	Argument	Default	Description
`title`	string			label title
`expended`	boolean	<optional>	false
`isTitle`	boolean	<optional>	false
`name`	string	<optional>		if defined use it to check/unchek all accordion with the same nameId
`className`	string	<optional>
`content`	string \| Element	<optional>
`click`	function	<optional>

Source:: charte/charte.js

fullscreen()

Set the app fullscreen

Source:: charte/charte.js

Fires:

charte.event:fullscreen

getAppElement()

Get app element (the map target or the page content element)

Source:: charte/charte.js

Returns:

Type: Element

getCurrentMenuTab()

Get the current menu tab (opened)

Source:: charte/charte.js

Returns:

Type: string

getFooterElement()

Get the app footer element

Source:: charte/charte.js

Returns:

Type: Element

getHeaderElement()

Get the app header element

Source:: charte/charte.js

Returns:

Type: Element

getMenuTabElement(id, icon, content)

Add a menu tab

Parameters:

Name	Type	Description
`id`	string
`icon`	string
`content`	Element

Source:: charte/charte.js

getSubFooterElement()

Get the app sub-footer element

Source:: charte/charte.js

Returns:

Type: Element

getToolbarElement()

Get menu tool bar element

Source:: charte/charte.js

Returns:

Type: Element

on(type, callback)

Add an event listener

Parameters:

Name	Type	Description
`type`	string \| Array.<string>	the event name or an array of event name
`callback`	function

Source:: charte/charte.js

Listens to Events:

setAppMenu(id, name)

Set the current app (check in menu + name)

Parameters:

Name	Type	Description
`id`	string
`name`	string

Source:: charte/charte.js

setContact(options [, parent])

Add contact

Parameters:

Name Type Argument Description

options

Object

Properties

Name	Type	Argument	Description
`id`	string
`title`	string
`small`	string		text to display on small screen
`href`	string
`service`	string
`mapID`	string	<optional>
`user`	string	<optional>
`userID`	string	<optional>
`email`	string	<optional>

parent

Element

Element to add the contact form (default footer)

Source:: charte/charte.js

setCopyright(date [, copy])

Set copyright date

Parameters:

Name	Type	Argument	Default	Description
`date`	number
`copy`	string	<optional>	IGN

Source:: charte/charte.js

setInputPlaceholder( [item])

Set the collapsible inputs placeholders. The placeholder will be extrated from the input and placed in a label to add a collapsible effect.

Parameters:

Name	Type	Argument	Description
`item`	Element	<optional>	if none set all input with a input-placeholder class unset

Source:: charte/setInputPlaceholder.js

Example

<!-- add a collapsible placeholder -->
<input typt="text" class="input-placeholder" placeholder="saisissez quelque chose" />
<!-- idem for a textarea -->
<textarea class="input-placeholder" placeholder="saisissez quelque chose"></textarea>
<!-- Process placeholders -->
<script>
  import charte from 'mcutils/charte/macarte'
  // Gerer les placeholders
  charte.setInputPlaceholder();
</script>

setMegaMenu(html)

Set the MegaMenu content (as returned by the MacarteAPI#getEditorial)

Parameters:

Name	Type	Description
`html`	string	MegaMenu content html string

Source:: charte/charte.js

setName(name)

Set the app name

Parameters:

Name	Type	Description
`name`	string

Source:: charte/charte.js

setNewsletter(src, title)

Add newsletter

Parameters:

Name	Type	Description
`src`	string
`title`	string

Source:: charte/charte.js

setUnivers(name)

Set the app univers

Parameters:

Name	Type	Description
`name`	string

Source:: charte/charte.js

setUser(user)

Set the user name in the bar and add a connected dataset to the body

Parameters:

Name	Type	Description
`user`	object

Source:: charte/charte.js

showTab( [id] [, b])

Show/hide a tab

Parameters:

Name	Type	Argument	Description
`id`	string	<optional>	id of the tab to show / hide
`b`	boolean	<optional>	if none toggle the tab

Source:: charte/charte.js

un(type, callback)

Remove an event listener

Parameters:

Name	Type	Description
`type`	string \| Array.<string>
`callback`	function

Source:: charte/charte.js

Events

fullscreen

Fired when app is set/unset fullscreen

Source:: charte/charte.jsdoc

Listeners of This Event:

charte#on

user

Fired when the user name is clicked / connected

Source:: charte/charte.jsdoc

Name	Type	Description
`name`	boolean	click on the user name
`head`	boolean	click on the user head logo

Listeners of This Event:

charte#on

header:list

Fired when header menu list is toggled

Source:: charte/charte.jsdoc

Name	Type	Description
`id`	string	menu id

Listeners of This Event:

charte#on

header:menu

Fired when header menu is toggled

Source:: charte/charte.jsdoc

Listeners of This Event:

charte#on

header:title

Fired when header title (or logo) is clicked

Source:: charte/charte.jsdoc

menu:list

Fired when an item of the menu list is clicked

Source:: charte/charte.jsdoc

Name	Type	Description
`id`	string	menu id
`title`	string	the menu title

Listeners of This Event:

charte#on

tab:show

Fired when a tab is toggled

Source:: charte/charte.jsdoc

Name	Type	Description
`id`	string	id of the tab shown or null if the tab hides

Listeners of This Event:

charte#on

user:logout

Fired when the user logout (diconnect) is clicked

Source:: charte/charte.jsdoc

Listeners of This Event:

charte#on