anycode-mbs-footer
Version:
mbs-footer anycode-mbs-footer
77 lines (64 loc) • 14 kB
JavaScript
/*
mbs-footer
*/
(function(def){
def(['riot'], function(riot) {
function Library() {
this.name = "mbs-footer"
}
var library = new Library()
//
//
// Am i a mixin?
// riot.mixin('mbs-footer', { mbs-footer: library })
//
//
//BEGIN RIOT TAGS
riot.tag2('mbs-footer', '<section class="footer"> <column> <section> <column class="badge"><a href="https://anycode.io"></a></column> <column class="copyright"> <a href="https://anycode.io" title="{productName}">Create, inspire, be anything</a><br> © 2015-{year} <b>{productName}</b> is a product of Anycode. <ul if="{privacyLinks}"> <li><a href="https://anycode.io/#privacy-statement">Privacy</a></li> <li><a href="https://anycode.io/#terms-of-use">Terms of Use</a></li> </ul> <a if="{browserStack}" class="browser-stack" href="https://www.browserstack.com/" target="_blank"><span class="tested-with">Tested with</span> <img src="https://d3but80xmlhqzj.cloudfront.net/production/images/static/header/header-logo.svg?1451465607"></a> </column> </section> </column> <column> <a href="https://twitter.com/_anycode" class="twitter-follow-button" data-show-count="false" data-size="small" data-show-screen-name="false">Follow @_anycode</a> <a href="https://twitter.com/share" class="twitter-share-button" 5 data-via="_anycode" data-hashtags="anycode">Tweet</a> </column> </section>', 'mbs-footer,[riot-tag="mbs-footer"] { background: #312f38; box-sizing: inherit; color: #FFF; display: block; font-family: sans-serif; font-size: 1rem; height: auto; position: relative; text-align: center; vertical-align: middle; width: 100vw; } mbs-footer a,[riot-tag="mbs-footer"] a { color: #1EAEDB; text-decoration: none; } mbs-footer a:active,[riot-tag="mbs-footer"] a:active,mbs-footer a:hover,[riot-tag="mbs-footer"] a:hover { color: #42DBBE; } mbs-footer section,[riot-tag="mbs-footer"] section { display: block; } mbs-footer column,[riot-tag="mbs-footer"] column { display: block; vertical-align: middle; } mbs-footer column:last-child,[riot-tag="mbs-footer"] column:last-child { padding: 2rem; } mbs-footer column.badge,[riot-tag="mbs-footer"] column.badge { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNDFweCIgaGVpZ2h0PSI0M3B4IiB2aWV3Qm94PSIwIDAgNDEgNDMiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPmFueWNvZGUuYmFkZ2U8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJEZXNrdG9wLUhEIiBza2V0Y2g6dHlwZT0iTVNBcnRib2FyZEdyb3VwIj4gICAgICAgICAgICA8ZyBpZD0iYW55Y29kZS5iYWRnZSIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjEuMzg4NjgxLCAyMS40MjQ1MTcpIHJvdGF0ZSgtMS4wMDAwMDApIHRyYW5zbGF0ZSgtMjEuMzg4NjgxLCAtMjEuNDI0NTE3KSB0cmFuc2xhdGUoNy44ODg2ODEsIDUuOTI0NTE3KSI+ICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJCbGFja25lc3MiIGZpbGw9IiNGOEU4MUMiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHBvaW50cz0iMTIuOTkyMzAxOCAyOS4zNzMxNDUxIDAuNDQ4NTI4MzM3IDIyLjE1NzY2NzUgMC40NDg1MjgzMzcgNy43MjY3MTIyNyAxMi45OTIzMDE4IDAuNTExMjM0NjY1IDI1LjUzNjA3NTMgNy43MjY3MTIyNyAyNS41MzYwNzUzIDIyLjE1NzY2NzUgIj48L3BvbHlnb24+ICAgICAgICAgICAgICAgIDxnIGlkPSJIZXhhZ29uIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAyNzg1NywgMC4wNDY2MjkpIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj4gICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSIwMERGNTEuNTEiIGZpbGw9IiMwMEZGN0YiIHBvaW50cz0iMTIuOTcyMzE2MyAyOS4zMTUyODU3IDAuNDI4NTQyODM2IDIyLjA5OTgwODEgMC40Mjg1NDI4MzYgNy42Njg4NTI4OSAxMi45NzIzMTYzIDAuNDUzMzc1Mjc2IDI1LjUxNjA4OTggNy42Njg4NTI4OSAyNS41MTYwODk4IDIyLjA5OTgwODEgIj48L3BvbHlnb24+ICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iRkZGRkZGLjM0IiBmaWxsLW9wYWNpdHk9IjAuNzI1NDMwMjU0IiBmaWxsPSIjMDBGREZGIiBwb2ludHM9IjEyLjkxMDI1NTggMjkuMzU5MzI1IDAuMzY2NDgyMzcyIDIyLjE0Mzg0NzQgMC4zNjY0ODIzNzIgNy43MTI4OTIyIDI1LjQ1NDAyOTMgMjIuMTQzODQ3NCAiPjwvcG9seWdvbj4gICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMi42Nzg5NzY4LDI5LjMxNTM5MjggTDI1LjM0Njc2NzIsMjIuMzE5OTMzMiBMMjUuNTk4NjIyMSw3Ljg5MTE3NTg4IEwxMi42Nzg5NzY4LDI5LjMxNTM5MjggTDEyLjY3ODk3NjgsMjkuMzE1MzkyOCBaIiBpZD0iMDAwMDAwLjIzIiBmaWxsLW9wYWNpdHk9IjAuOCIgZmlsbD0iIzAwRjJGRiI+PC9wYXRoPiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLjY5Mjk3ODcsMjkuMzA4Njg0OCBMMjUuMzYwNzY5MSwyMi4zMTMyMjUxIEwyNS42MTI2MjQsNy44ODQ0Njc4MiBMMTMuMTk2Njg4NCwwLjQ1MTE3MDEzMyBMMC4yNzcwNDMxMjEsMjEuODc1Mzg3MSBMMTIuNjkyOTc4NywyOS4zMDg2ODQ4IEwxMi42OTI5Nzg3LDI5LjMwODY4NDggWiIgaWQ9IkZGRkZGRi4zNiIgZmlsbC1vcGFjaXR5PSIwLjM1IiBmaWxsPSIjMDhGNUY4Ij48L3BhdGg+ICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iMDAwMDAwLjMzIiBmaWxsLW9wYWNpdHk9IjAuMyIgZmlsbD0iIzAwMDAwMCIgcG9pbnRzPSIxMi45NzIyNTg4IDI5LjMxMzEyMTUgMC40Mjg0ODUzNzYgMjIuMDk3NjQzOSAwLjQyODQ4NTM3NiA3LjY2NjY4ODcgMTIuOTcyMjU4OCAwLjQ1MTIxMTA5NCAyNS41MTYwMzIzIDIyLjA5NzY0MzkgIj48L3BvbHlnb24+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTMuMjAwNjE1NSwwLjQ1Nzg1OTAxMSBMMC41MzI4MjUxMTQsNy40NTMzMTg2NCBMMC4yODA5NzAyMTgsMjEuODgyMDc1OSBMMjUuNjE2NTUxMSw3Ljg5MTE1NjcgTDEzLjIwMDYxNTUsMC40NTc4NTkwMTEgTDEzLjIwMDYxNTUsMC40NTc4NTkwMTEgWiIgaWQ9IkZGRkZGRi40NCIgZmlsbC1vcGFjaXR5PSIwLjMiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4gICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSIwMDAwMDAuMTEiIGZpbGwtb3BhY2l0eT0iMC4yIiBmaWxsPSIjMDAwMDAwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxOS4zNzc3MTgsIDExLjM4NjE5OCkgc2NhbGUoLTEsIC0xKSB0cmFuc2xhdGUoLTE5LjM3NzcxOCwgLTExLjM4NjE5OCkgIiBwb2ludHM9IjI1Ljc3MzA1MjQgMjIuMjA4MzU3MiAxMy4yMjkyNzkgMTQuOTkyODc5NiAxMy4yMjkyNzkgMC41NjE5MjQzODYgIj48L3BvbHlnb24+ICAgICAgICAgICAgICAgIDwvZz4gICAgICAgICAgICAgICAgPGcgaWQ9IlN0cmlrZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNy41NDQ3ODYsIDIuNzYyMzYzKSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNi41OTU2NDc1OSwxLjMyMzAwMTM4IEwxMC42NzM3Njc2LDQuMzk2ODIwMzIgTDkuNDI4ODA3NCwxNi43Mjc3NDI4IEw2LjcwMDMxMDA1LDEzLjcxMjAxOTIgTDUuMTkzNDQ4MzEsMjMuODAwMzAxNiBMMC4yNzQ3Njc4NzYsNS4wODA0MTUyMSBMNS40MDk0OTA1Nyw5LjQzNjMyODA0IEw1LjMxMjk2MjM1LDAuMzEyNTU1ODExIEw2LjU5NTY0NzU5LDEuMzIzMDAxMzggWiIgaWQ9IkZpbGwtNDQtQ29weS0zIiBvcGFjaXR5PSIwLjM3ODYxNDczOSIgZmlsbD0iIzAwMDAwMCI+PC9wYXRoPiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTUuMjE2NzQ4NjksMC4wOTUxODE2MzA0IEwxMC43NzAyOTU3LDQuMzcxNTk3NDEgTDkuNDg4NzA4OTEsMTYuODY2NjQyMyBMNi43NDI0NDYzOSwxMy45NDM0ODk4IEw1LjI3Nzc3NTc4LDI0LjI4NjIwMDggTDAuMDgxNzExNjU1NSw0LjcxNTQ5NzgzIEw1LjMzODgwMjg3LDkuMjQzNTE4MTYgTDUuMjE2NzQ4NjksMC4wOTUxODE2MzA0IEw1LjIxNjc0ODY5LDAuMDk1MTgxNjMwNCBaIiBpZD0iRmlsbC0xNyIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4gICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMC43NzAyOTU3LDQuMzcxNTk3NDEgTDkuNDg4NzA4OTEsMTYuODY2NjQyMyBMNi43NDI0NDYzOSwxMy45NDM0ODk4IEw1LjIxNjc0ODY5LDI0LjE2NTM2MzcgTDUuMjE2NzQ4NjksOS4yNDExNjQ2MiBMNS4yMTY3NDg2OSwwLjA5NTE4MTYzMDQgTDEwLjc3MDI5NTcsNC4zNzE1OTc0MSBaIiBpZD0iRmlsbC0xOSIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4gICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik03LjkyMTIyMDIzLDEwLjgwMTI3ODcgTDYuNzk5NTQ1NCwxMy45Mzg4ODgzIEw1LjI3Nzc3NTc4LDI0LjI4NjIwMDggTDAuMDgxNzExNjU1NSw0LjcxNTQ5NzgzIEw1LjMzODgwMjg3LDkuMjQzNTE4MTYgTDcuOTIxMjIwMjMsMTAuODAxMjc4NyBaIiBpZD0iRmlsbC0yMSIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4gICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04LjEzMTkxMzU2LDEwLjY3ODAyNjYgTDUuOTEwMDI5NDMsMTIuMTQxODY2NSBMMC4wODE3MTE2NTU1LDQuNjc2MjY4MTkgTDUuMzM4ODAyODcsOS4yMDQyODg1MiBMNS4yMTY3NDg2OSwwLjA1NTk0OTY5ODUgTDguMTMxOTEzNTYsMTAuNjc4MDI2NiBaIiBpZD0iRmlsbC0yNSIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4gICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01LjIxNjc0ODY5LDEyLjE0MTg2NjUgTDUuMjc3Nzc1NzgsMjQuNDc2MTI5OSBMMS41NDU4MTc0OCwxMC4xNTU4MjU2IEw1LjIxNjc0ODY5LDEyLjE0MTg2NjUgWiIgaWQ9IkZpbGwtMjciIGZpbGwtb3BhY2l0eT0iMC41IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuNzcwMjk1Nyw0LjM3MTU5NzQxIEw5LjQ4ODcwODkxLDE2Ljg2NjY0MjMgTDYuNzQyNDQ2MzksMTMuOTQzNDg5OCBMNS42NjI3NDc5MywxMi4xMzAyNzI3IEw1LjIxNjc0ODY5LDkuMjQxMTY0NjIgTDUuMjE2NzQ4NjksMC4wOTUxODE2MzA0IEwxMC43NzAyOTU3LDQuMzcxNTk3NDEgWiIgaWQ9IkZpbGwtMTkiIGZpbGwtb3BhY2l0eT0iMC41IiBmaWxsPSIjRkZGRkZGIj48L3BhdGg+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTAuMTQ4OTA0Niw5LjY1Nzk3NzQxIEw1LjczODg4NTU4LDEyLjE0MTg2NjUgTDUuMjc3Nzc1NzgsMjQuMjg2MjAwOCBMMC4wODE3MTE2NTU1LDQuNzE1NDk3ODMgTDUuMzM4ODAyODcsOS4yNDM1MTgxNiBMMTAuMTQ4OTA0Niw5LjY1Nzk3NzQxIFoiIGlkPSJGaWxsLTIxIiBmaWxsLW9wYWNpdHk9IjAuNSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEwLjIzNzQ0MDQsOS40NzU2MTc5NSBMNS45MTAwMjk0MywxMi4xNDE4NjY1IEwwLjA4MTcxMTY1NTUsNC42NzYyNjgxOSBMNS4zMzg4MDI4Nyw5LjIwNDI4ODUyIEw1LjIxNjc0ODY5LDAuMDU1OTQ5Njk4NSBMMTAuMjM3NDQwNCw5LjQ3NTYxNzk1IFoiIGlkPSJGaWxsLTI1IiBmaWxsLW9wYWNpdHk9IjAuNSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTUuMjE2NzQ4NjksMTIuMTQxODY2NSBMNS4yNzc3NzU3OCwyNC40NzYxMjk5IEwxLjU0NTgxNzQ4LDEwLjE1NTgyNTYgTDUuMjE2NzQ4NjksMTIuMTQxODY2NSBaIiBpZD0iRmlsbC0yNyIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGw9IiNGRkZGRkYiPjwvcGF0aD4gICAgICAgICAgICAgICAgPC9nPiAgICAgICAgICAgIDwvZz4gICAgICAgICAgICA8cGF0aCBkPSJNLTAuNzE4NzUsNDMuNSBMMjM5LjI4MTI1LDQzLjUiIGlkPSJQYXRoLTEzOCIgc3Ryb2tlPSIjRjZGNkY2IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=); background-size: 10rem 10rem; background-position: center 0.3rem; background-repeat: no-repeat; border-radius: 4rem; height: 10rem; margin: 0 auto; transition: 600ms all ease-in-out; transform: Rotate(0deg); width: 10rem; } mbs-footer column.badge a,[riot-tag="mbs-footer"] column.badge a { cursor: pointer; display: block; height: 10rem; position: relative; width: 10rem; } mbs-footer column.badge:hover,[riot-tag="mbs-footer"] column.badge:hover { -webkit-filter: hue-rotate(50deg) saturate(200%) brightness(1.3) drop-shadow(0px 0px 30px rgba(180,180,180,0.9)); -moz-filter: hue-rotate(50deg) saturate(200%) brightness(1.3) drop-shadow(0px 0px 30px rgba(180,180,180,0.9)); filter: hue-rotate(50deg) saturate(200%) brightness(1.3) drop-shadow(0px 0px 30px rgba(180,180,180,0.9)); } mbs-footer column.copyright,[riot-tag="mbs-footer"] column.copyright { line-height: 1.7rem; padding: 0; } mbs-footer column.copyright ul,[riot-tag="mbs-footer"] column.copyright ul { list-style: none; margin: 0; padding: 0; } mbs-footer column.copyright ul li,[riot-tag="mbs-footer"] column.copyright ul li { border-left: 1px solid #555; display: inline; padding: 0 0.5rem 0 0.6rem; } mbs-footer column.copyright ul li:first-child,[riot-tag="mbs-footer"] column.copyright ul li:first-child { border-left: none; display: inline; padding-left: 0; } mbs-footer a.browser-stack,[riot-tag="mbs-footer"] a.browser-stack { color: #CCC; display: block; font-size: 0.9rem; outline: none; padding-top: 0.7rem; } mbs-footer a.browser-stack span.tested-with,[riot-tag="mbs-footer"] a.browser-stack span.tested-with { display: inline-block; padding-top: 0.1rem; } mbs-footer column.copyright a.browser-stack img,[riot-tag="mbs-footer"] column.copyright a.browser-stack img { border: none; height: 1.6rem; margin-top: -0.1rem; outline: none; vertical-align: middle; } @media (min-width: 650px) { mbs-footer,[riot-tag="mbs-footer"] { display: table; } mbs-footer section,[riot-tag="mbs-footer"] section { display: table-row; } mbs-footer column,[riot-tag="mbs-footer"] column { display: table-cell; vertical-align: middle; } mbs-footer column:last-child,[riot-tag="mbs-footer"] column:last-child { padding: 0 2rem 0 0; text-align: right; } mbs-footer column.copyright,[riot-tag="mbs-footer"] column.copyright { line-height: 1.4rem; text-align: left; } }', '', function(opts) {
this.on('mount', function() {
this.trigger('initialize');
this.trigger('twitter');
this.trigger('google');
})
this.on('initialize', function() {
this.root.className = ''
this.year = new Date().getFullYear()
this.productName = opts.productName || this.productName
this.browserStack = opts.browserStack !== undefined || false
this.privacyLinks = opts.privacyLinks !== undefined || false
this.gaTrackingCode = opts.gaTrackingCode || 'UA-69299537-1'
this.gaId = opts.gaId || window.location.host + window.location.pathname + window.location.hash
this.update()
})
this.on('twitter', function() {
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t;
js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); };
return t;
}(document, "script", "twitter-wjs"))
})
this.on('google', function() {
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga')
ga('create', this.gaTrackingCode, 'auto')
ga('send', 'pageview', this.gaId);
})
}, '{ }');
//END RIOT TAGS
//
//
return library;
});
}( (function(darr, name){
if (typeof require === 'undefined') {
return function (deps, factory) { this[name] = factory.apply(this, darr.map(function(arg) { return window[arg] })); }
} else if (typeof exports === 'undefined') {
return function (deps, factory) { define(name, deps, factory); }
} else {
require('riot'); // must find a solution to why require needs to be called with primitive
return function (deps, factory) { module.exports = factory.apply(this, deps.map(require)); }
}
})(['riot'], 'mbs-footer') ));