Created
January 8, 2015 15:08
-
-
Save kellyrmilligan/405fb66a2195c4a20732 to your computer and use it in GitHub Desktop.
sample code for meta manager mixin for reactjs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
// data structure that is in the props | |
// head = { | |
// title: 'title' | |
// description: 'description' | |
// canonical: 'http://www.whatever.com' | |
// link: [ | |
// { | |
// href: "https://www.nextpage.com", | |
// rel: "next" | |
// } | |
// ] | |
// meta: [ | |
// { | |
// content: "@site", | |
// type: "name", | |
// value: "twitter:site" | |
// }, | |
// { | |
// content: "640", | |
// type: "property", | |
// value: "og:video:width" | |
// } | |
// ] | |
// } | |
module.exports = { | |
componentDidMount: function () { | |
this.updateTitle(); | |
this.updateDescription(); | |
this.updateCanonical(); | |
this.updateTags(); | |
this.updateLinks(); | |
//this is only needed here and not props, since component doesn't unmount when its the same | |
//type | |
this.updatePageClass(); | |
}, | |
componentWillUnmount: function () { | |
this.removePageClass(); | |
}, | |
componentWillReceiveProps: function (nextProps) { | |
this.updateTitle(nextProps); | |
this.updateDescription(nextProps); | |
this.updateCanonical(nextProps); | |
this.updateTags(); | |
this.updateLinks(); | |
}, | |
getHead: function (nextProps) { | |
var head; | |
if (nextProps) { | |
head = nextProps.state.data.head; | |
} else { | |
head = this.props.state.data.head; | |
} | |
return head; | |
}, | |
updateTitle: function (nextProps) { | |
var head = this.getHead(nextProps); | |
document.title = head.title ? head.title + ' | Tastemade' : ''; | |
}, | |
updateDescription: function (nextProps) { | |
var head = this.getHead(nextProps); | |
var description = document.querySelector('meta[name="description"]'); | |
description.setAttribute('content', head.description ? head.description : ''); | |
}, | |
updateCanonical: function (nextProps) { | |
var head = this.getHead(nextProps); | |
var canonical = document.querySelector('link[rel="canonical"]'); | |
canonical.setAttribute('href', head.canonical ? head.canonical : ''); | |
}, | |
updatePageClass: function () { | |
var html = document.getElementsByTagName('html')[0]; | |
var data = this.props.state.data; | |
var pageClass = data.pageClass; | |
if (pageClass) { | |
html.classList.add(pageClass); | |
} | |
}, | |
removePageClass: function () { | |
var html = document.getElementsByTagName('html')[0]; | |
var data = this.props.state.data; | |
var pageClass = data.pageClass; | |
html.classList.remove(pageClass); | |
}, | |
removeNodes: function (nodeList) { | |
var head = document.getElementsByTagName('head')[0]; | |
for (var i = 0, l = nodeList.length; i < l; i++) { | |
var node = nodeList[i]; | |
head.removeChild(node); | |
} | |
}, | |
addTags: function (nextProps) { | |
var head = this.getHead(nextProps); | |
var headNode = document.getElementsByTagName('head')[0]; | |
var tag; | |
if (head.meta) { | |
for (var i = 0, l = head.meta.length; i < l; i++) { | |
tag = document.createElement('meta'); | |
tag.setAttribute(head.meta[i].type, head.meta[i].value); | |
tag.setAttribute('content', head.meta[i].content); | |
headNode.appendChild(tag); | |
} | |
} | |
}, | |
addLinks: function (nextProps) { | |
var head = this.getHead(nextProps); | |
var headNode = document.getElementsByTagName('head')[0]; | |
var link; | |
if (head.link) { | |
for (var i = 0, l = head.link.length; i < l; i++) { | |
link = document.createElement('link'); | |
link.setAttribute('rel', head.link[i].rel); | |
link.setAttribute('href', head.link[i].href); | |
headNode.appendChild(link); | |
} | |
} | |
}, | |
updateTags: function (nextProps) { | |
var tags = document.querySelectorAll('meta[name^=twitter], meta[property^=og], meta[property^=al]'); | |
this.removeNodes(tags); | |
this.addTags(nextProps); | |
}, | |
updateLinks: function (nextProps) { | |
var tags = document.querySelectorAll('link[rel^=next], link[rel^=prev]'); | |
this.removeNodes(tags); | |
this.addLinks(nextProps); | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment