/*
* Breadcrumbs
*/
;(function () {
let { TransitionMotion, spring } = ReactMotion
class Breadcrumbs extends React.Component {
constructor(props) {
super(props)
this.state = {
visible: !window.pageYOffset
}
this.scrollHandler = this.scrollHandler.bind(this)
this.goBack = this.goBack.bind(this)
}
goBack () {
if (this.props.selected._parent) {
this.props.onSelect(this.props.selected._parent)
}
}
componentDidMount() {
window.addEventListener('scroll', this.scrollHandler)
}
componentWillUnmount() {
window.removeEventListener('scroll', this.scrollHandler)
}
scrollHandler() {
if (this.state.visible) {
if (!!window.pageYOffset) {
this.setState({ visible: false })
}
}
else {
if (!window.pageYOffset) {
this.setState({ visible: true })
}
}
}
getTransitionStyles(breadcrumbs) {
return breadcrumbs.map((item) => {
return {
data: { item },
key: item.name,
style: {
opacity: spring(1),
left: spring(0)
}
}
})
}
willEnter() {
return {
opacity: 0,
left: 5
}
}
render() {
const { props } = this
const breadcrumbs = buildBreadcrumbs(props.tree, props.selected)
const classList = classNames(
'breadcrumbs',
{
breadcrumbs_visible: props.show
}
)
const documentationBranch = window.purifyURI(window.location.pathname).search(/^.*\/documentation/) > -1
const userProfileBranch = window.purifyURI(window.location.pathname).search(/^.*\/userProfile/) > -1
const ssoUserProfileBranch = window.purifyURI(window.location.pathname).search(/^.*\/ssoUserProfile/) > -1
var abmsites = false;
if ($('body').hasClass('abmhome')) {
abmsites = true;
}
const style = {
display: ((!props.show && (( !shortCutURL && (window.location.pathname.split("/").length - 1) == 3 ) || (breadcrumbs.length == 1 || !this.state.visible))) || documentationBranch || userProfileBranch || ssoUserProfileBranch || abmsites ) && 'none'
}
return
{
(styles) => {
return
{styles.map(({ key, data: {item}, style}) => {
let o = {}
if (item.children && item.children.length) {
o.onClick = (e) => {
e.preventDefault()
props.onSelect(item)
}
o.className = 'active'
o.href = item.href || null
}
return -
{item.name}
})}
}
}
}
}
window.Breadcrumbs = Breadcrumbs
function buildBreadcrumbs(tree, selected) {
let result = [selected]
while (selected._parent) {
selected = findNodeById(tree, selected._parent)
result.unshift(selected)
}
if (result.length == 1 && tree != selected) {
result.unshift(tree);
}
return result
}
function findNodeById(node, id) {
if (node._id == id) {
return node
}
else if (node.children) {
return node.children
.map(child => findNodeById(child, id))
.reduce((acc, val) => !acc && val ? val : acc, null)
}
else {
return null
}
}
}())
/*
* ToggledMenu
*/
;(function () {
let { TransitionMotion, spring } = ReactMotion
class ToggledMenu extends React.Component {
constructor(props) {
super(props)
this.state = {
hovered: null
}
this.willEnter = this.willEnter.bind(this)
this.getTransitionStyles = this.getTransitionStyles.bind(this)
this.onMouseOver = this.onMouseOver.bind(this)
this.onMouseOut = this.onMouseOut.bind(this)
this.goBack = this.goBack.bind(this)
}
handleClickOutside() {
this.props.onClose()
}
goBack() {
if (this.props.node._parent) {
this.props.onSelect(this.props.node._parent)
}
}
willEnter() {
return {
opacity: 0,
top: -5
}
}
getTransitionStyles() {
return [
{
key: this.props.node.name,
style: {
opacity: spring(1),
top: spring(0)
}
}
]
}
initHandler() {
const headerHeight = 96
let timeout = null
return (c) => {
const padding = c && parseInt(window.getComputedStyle(c, null).getPropertyValue('padding-top'), 10)
if (c) {
helper()
}
else if (timeout) {
clearTimeout(timeout)
}
function helper() {
const content = c.firstChild.scrollHeight
c.style.bottom = window.innerHeight - (content + padding + headerHeight) < 0
? '20px'
: ''
timeout = setTimeout(helper, 50)
}
}
}
onMouseOver(item) {
// if(!this.state.hovered) {
// this.setState({ hovered: item })
// }
}
onMouseOut() {
// this.setState({ hovered: null })
}
getStyles() {
var hasChildren = this.props.node && this.props.node.children && this.props.node.children.length > 0;
return {
display: this.props.open && hasChildren ? 'block' : 'none'
}
}
render() {
let {
onClose,
onSelect,
findNodeByHref,
node,
node: { children }
} = this.props
return
{this.props.children}
{
(styles) => styles.map(({key, style}) => {
return
{(children || []).map((item) => {
return
})}
})[0]
}
}
}
class MenuInfo extends React.Component {
constructor(props) {
super(props)
this.initHandler = this.initHandler.bind(this)
this.handleClick = this.handleClick.bind(this)
}
componentDidUpdate() {
$(this.componentRoot).find('.toggled-menu__info-item_carousel').owlCarousel({
autoPlay: false,
items : 3,
scrollPerPage:true,
// Navigation
navigation : true,
navigationText : [
'',
''
],
//Pagination
pagination : false,
paginationNumbers: false,
responsive: true,
responsiveBaseWidth: '.toggled-menu__info-item_carousel'
})
}
initHandler(c) {
if (c) {
this.componentRoot = c
c.addEventListener('click', this.handleClick, false)
}
}
handleClick(e) {
if (e.target.attributes.href) {
let node = this.props.findNodeByHref(e.target.attributes.href.value)
if (node && node.children && node.children.length) {
this.props.onSelect(node)
e.preventDefault()
}
}
}
render() {
const { node } = this.props
let info = (node.info || '').replace(/href=["'](.*?)["']/g, function (match, p1) {
const href = window.purifyURI(p1)
return `href='${href}'`
})
return
}
}
function Item(props) {
let { item, onSelect, onMouseOut, onMouseOver } = props
let o = {
onMouseOver,
onMouseOut
}
if (item.children && item.children.length) {
o.onClick = (e) => {
e.preventDefault()
onSelect(item)
}
}
else if (item.href) {
o.href = window.purifyURI(item.href);
}
if (item.newTab) {
o.target = '_blank'
}
return
{item.name}
}
window.ToggledMenu = onClickOutside(ToggledMenu)
}())
/*
* Menu
*/
class Menu extends React.Component {
constructor(props) {
super(props)
let initialSelection = this.initSelection(props.path)
this.state = {
isMenuOpen: false,
initialSelection,
timeouts: {
itemCloseDelay: null,
menuCloseDelay: null
},
currentSelection: initialSelection
}
this.findNodeByHref = this.findNodeByHref.bind(this)
this.toggleMenu = this.toggleMenu.bind(this)
this.openMenu = this.openMenu.bind(this)
this.closeMenu = this.closeMenu.bind(this)
this.setSelected = this.setSelected.bind(this)
this.selectAndOpen = this.selectAndOpen.bind(this)
this.onMouseEnterItemHandler = this.onMouseEnterItemHandler.bind(this)
this.onMouseLeaveItemHandler = this.onMouseLeaveItemHandler.bind(this)
}
shouldComponentUpdate(nextProps, nextState) {
if (this.state.isMenuOpen !== nextState.isMenuOpen) return true
if (this.state.currentSelection !== nextState.currentSelection) return true
return false
}
initSelection(path) {
return this.findNodeByHref(path)
|| findParentByHref(path, this.props.tree)
|| { _id: null, _parent: null, children: [], href: path, info: "", name: $('#menu-page-title').attr('title')}
/////////////
function findParentByHref(href, tree) {
// find all nodes that href is a substing of current path
const parent = findNodesSubHref(href, tree)
// sort them by href length and get longest
.sort((a, b) => a.href.length < b.href.length ? 1 : -1)[0]
// return a fake node
return parent ? {
_parent: parent._id,
name: $('#menu-page-title').attr('title')
} : null
}
function findNodesSubHref(href, tree) {
const treeHref = tree.href ? window.purifyURI(tree.href)+'/' : null
let result = []
if (href.indexOf(treeHref) === 0) {
result.push(tree)
}
if (tree.children) {
result = result.concat(
tree.children
.map(child => findNodesSubHref(href, child))
.reduce((acc, val) => acc.concat(val), [])
)
}
return result
}
}
openMenu() {
if (this.state.isMenuOpen) return
this.setState({
isMenuOpen: true
})
}
closeMenu() {
if (!this.state.isMenuOpen) return
this.setState({
isMenuOpen: false,
currentSelection: this.state.initialSelection
})
}
toggleMenu() {
if (this.state.isMenuOpen) {
this.closeMenu()
}
else {
this.setSelected(this.props.tree)
this.openMenu()
}
}
findNodeByHref(node, value) {
if (typeof node != 'object') {
value = node
node = this.props.tree
}
if (node.href && window.purifyURI(node.href) == value) {
return node
}
else if (node.children) {
return node.children
.map(child => this.findNodeByHref(child, value))
.reduce((acc, val) => !acc && val ? val : acc, null)
}
else {
return null
}
}
findNodeBy(node, property, value) {
if (typeof node != 'object') {
value = property
property = node
node = this.props.tree
}
return helper(node, property, value)
/////////////
function helper(node, property, value) {
if (node[property] == value) {
return node
}
else if (node.children) {
return node.children
.map(child => helper(child, property, value))
.reduce((acc, val) => !acc && val ? val : acc, null)
}
else {
return null
}
}
}
setSelected(selected) {
if (typeof selected == 'string' || typeof selected == 'number') {
selected = this.findNodeBy('_id', selected) || this.findNodeBy('name', selected) || this.props.tree
}
if (!selected || selected == this.state.currentSelection) return
this.setState({
currentSelection: selected
})
}
selectAndOpen(item) {
this.openMenu()
this.setSelected(item)
}
onMouseEnterItemHandler(item) {
if (this.state.isMenuOpen) {
this.addTimeout('itemCloseDelay', this.selectAndOpen.bind(this, item), 300)
}
else {
this.addTimeout('itemCloseDelay', this.selectAndOpen.bind(this, item), 500)
}
}
onMouseLeaveItemHandler(item) {
this.removeTimeout('itemCloseDelay')
}
addTimeout(name, callback, delay) {
if (this.state.timeouts[name]) {
clearTimeout(this.state.timeouts[name])
}
this.setState({
timeouts: Object.assign({}, this.state.timeouts, {
[name]: setTimeout(() => {
callback()
this.setState({
timeouts: Object.assign(
{},
this.state.timeouts,
{ [name]: null })
})
}, delay)
})
})
}
removeTimeout(name) {
if (this.state.timeouts[name]) {
clearTimeout(this.state.timeouts[name])
this.setState({
timeouts: Object.assign(
{},
this.state.timeouts,
{ [name]: null })
})
}
}
render() {
const { currentSelection } = this.state
return
{this.props.tree.children.map((item) => {
const isParentOfSelected = this.findNodeBy(
item,
'name',
currentSelection.name
) == currentSelection
const classList = classNames(
{
active: isParentOfSelected && this.state.isMenuOpen
}
)
return -
{item.name}
{' '}
})}
}
}
var jsonData = void 0;
function jsonCallback(data){
jsonData = data;
//window.topNavigation = ReactDOM.render(React.createElement(Menu, { tree: calculateParents(data), path: pathname, origin: location.origin }), document.getElementById('top-menu'));
}
/*
* Index
*/
;(function () {
//let data = JSON.parse(document.getElementById('menu-data').textContent)
let pathname = purifyURI(location.pathname)
if(!languageFromPath){
languageFromPath = "en_US";
}
let jurl = '/libs/data/menu.'+languageFromPath+'.json';
window.purifyURI = purifyURI
// Async way to load data from custom location
$.ajax({
method: 'GET',
dataType: 'jsonp',
url: jurl,
jsonpCallback: "jsonCallback",
cache: true
})
.done(function (data) {
window.topNavigation = ReactDOM.render(
,
document.getElementById('top-menu')
)
})
/////////////
function calculateParents(tree) {
let counter = 1
assignParent(tree)
return tree
/////////////
function assignParent(node, parent) {
let id = counter++
if (node.children) {
node.children.map((child) => assignParent(child, id))
}
node._id = id
node._parent = parent || null
return id
}
}
function purifyURI(uri) {
try {
if(shortCutURL){
return (uri || '')
.replace(/.html$/, '')
.replace(/\/$/, '')
.replace(/^\/content\/pan\/.._../, '') || '/'
}else{
return uri ;
}
} catch(err) {
return (uri || '')
.replace(/.html$/, '')
.replace(/\/$/, '')
.replace(/^\/content\/pan\/.._../, '') || '/'
}
}
}())