diff --git a/app/components/footer/bootstrap.yaml b/app/components/footer/bootstrap.yaml index 808d3e8..133b385 100644 --- a/app/components/footer/bootstrap.yaml +++ b/app/components/footer/bootstrap.yaml @@ -1,3 +1,5 @@ _components: footer: - footerLinks: [] + svgLogo: '' + logoUrl: '' + navigationLinks: [] diff --git a/app/components/footer/client.js b/app/components/footer/client.js new file mode 100644 index 0000000..2d0be92 --- /dev/null +++ b/app/components/footer/client.js @@ -0,0 +1,57 @@ +'use strict'; + +const _find = require('lodash/find'), + $popup = require('../../services/client/popup'); + +module.exports = (el) => { + const socialMediaButtons = el.querySelectorAll('.social-media-btn'), + // new social media network should also be added to 'socialMediaLinks in schema.yaml' + supportedSocialNetworks = [ + { + className: 'facebook', + url: 'https://facebook.com/{handle}', + network: 'Facebook' + }, + { + className: 'instagram', + url: 'https://www.instagram.com/{handle}', + network: 'Instagram' + }, + { + className: 'twitter-black', + url: 'https://twitter.com/intent/follow?screen_name={handle}&tw_p=followbutton&variant=2.0', + network: 'Twitter' + } + ]; + + if (socialMediaButtons.length) { + socialMediaButtons.forEach((element) => { + element.addEventListener('click', (e) => { + e.preventDefault(); + let Position = $popup.position, + Params = $popup.params, + opts = {}, + dimensions = { width: 780, height: 500 }, + features = new Position(dimensions.width, dimensions.height), + classList = e.currentTarget.classList, + args, + socialHandler, + socialNetworks = supportedSocialNetworks; + + opts.handle = e.currentTarget.getAttribute('data-handle'); + + dimensions.left = features.left; + dimensions.top = features.top; + + socialHandler = _find(socialNetworks, ({ className }) => classList.contains(className)); + + opts.url = socialHandler.url.replace('{handle}', opts.handle); + opts.network = socialHandler.network; + + opts.name = `Follow ${opts.handle} on ${opts.network}`; + args = new Params(opts, dimensions); + window.open(args.address, args.name, args.features); + }); + }); + } +}; diff --git a/app/components/footer/schema.yaml b/app/components/footer/schema.yaml index 550151b..a70f9fc 100644 --- a/app/components/footer/schema.yaml +++ b/app/components/footer/schema.yaml @@ -1,8 +1,47 @@ _description: | - footer + The footer at the bottom of all pages. +_confirmRemoval: true -footerLinks: - _label: Footer Links +socialMediaNetworks: + _label: Social Media Links + _placeholder: + text: New Follow + height: 56px + _has: + input: complex-list + props: + - + prop: socialMediaNetwork + _label: socialMediaNetwork + _has: + input: radio + help: Select the network for this follow button + options: # new social media network should also be added to 'supportedSocialNetworks' in client.js + - name: 'Facebook' + value: 'facebook' + - name: 'Twitter' + value: 'twitter-black' + - name: 'Instagram' + value: 'instagram' + - + prop: handle + _label: Social Media Handle + _has: + input: text + validate: + required: true + - + prop: icon + _label: Social Media Icon + _has: + input: text + help: Support SVG + +navigationLinks: + _label: Navegation Links + _placeholder: + text: Navegation Links + height: 56px _has: input: complex-list props: @@ -11,7 +50,7 @@ footerLinks: _label: Url _has: input: text - type: url + help: Example https://domain.com validate: required: true - @@ -25,7 +64,29 @@ footerLinks: max: 40 maxMessage: This field must be 40 or fewer characters long +svgLogo: + _label: Site Logo + _placeholder: + height: 56px + _has: + input: text + help: Support SVG + +logoUrl: + _label: Logo URL + _placeholder: + height: 56px + _has: + input: text + help: Example https://domain.com + _groups: settings: fields: - - footerLinks + - svgLogo (General) + - logoUrl (General) + - navigationLinks (Navegation Links) + _placeholder: + text: Footer + height: 30px + ifEmpty: logoUrl AND svgLogo diff --git a/app/components/footer/template.hbs b/app/components/footer/template.hbs index 7d2c486..b18107c 100644 --- a/app/components/footer/template.hbs +++ b/app/components/footer/template.hbs @@ -1,10 +1,36 @@ -
- - +
+
+ {{#if logoUrl }} + + {{/if}} + {{#if navigationLinks.length}} +
+
    + {{#each navigationLinks}} +
  • + {{ text }} +
    • + {{/each}} +
+
+ {{/if}} +
-
- Built in {{ moment 'now' 'YYYY' }} with Clay +
+ {{#each socialMediaNetworks}} +
diff --git a/app/services/client/popup.js b/app/services/client/popup.js index f0ed35d..47512ca 100644 --- a/app/services/client/popup.js +++ b/app/services/client/popup.js @@ -1,34 +1,100 @@ 'use strict'; -class service { - getWindowSize() { - const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left, - dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top, - width = window.innerWidth || document.documentElement.clientWidth || screen.width, - height = window.innerHeight || document.documentElement.clientHeight || screen.height; - - return { dualScreenLeft, dualScreenTop, height, width }; - } +const $window = typeof window !== 'undefined' ? window : undefined; - getCenterPosition(windowSize, dimensions) { - const left = windowSize.width / 2 - dimensions.w / 2 + windowSize.dualScreenLeft, - top = windowSize.height / 2 - dimensions.h / 2 + windowSize.dualScreenTop; +class Popup { + constructor() { - return { left, top }; - } + /** + * returns an object of new window options + * @param {{ url: String, name: string }} opts - Object containing + * @param {Object} dimensions - An object of new window options, including dimensions & position + * @returns {Object} + */ + this.params = (opts, dimensions) => { + if (opts.url) { + this.address = opts.url; + } + + if (opts.name) { + this.name = opts.name; + } + + this.features = `width= ${ dimensions.width || 0 }, height= ${ dimensions.height || 0 }, top= ${ dimensions.top || 0 }, left= ${ dimensions.left || 0 }`; + + return this; + }; + + /** + * returns an object of screen dimensions + * @returns {{ dualScreenLeft: number, dualScreenTop: number, width: number, height: number }} + */ + this.getScreenDimensions = () => { + const usesScreenForDimensions = $window.hasOwnProperty('screen') && $window.screen.hasOwnProperty('screenTop'); + let dualScreenLeft, + dualScreenTop; + + if (usesScreenForDimensions) { + dualScreenLeft = $window.screen.left; + dualScreenTop = $window.screen.top; + } else { + dualScreenLeft = $window.screenLeft; + dualScreenTop = $window.screenTop; + } + + return { + dualScreenLeft: dualScreenLeft || 0, + dualScreenTop: dualScreenTop || 0, + width: $window.innerWidth || $window.screen.width, + height: $window.innerHeight || $window.screen.height + }; + }; + + /** + * returns an object of numbers used for positioning a new window + * @param {Number} newWidth - the current window's width + * @param {Number} newHeight - the current window's height + * @returns {Object} + */ + this.position = (newWidth, newHeight) => { + const dimensions = this.getScreenDimensions(); + + this.left = Math.floor(Math.max(dimensions.width / 2 - newWidth / 2 + dimensions.dualScreenLeft, 0)); + this.top = Math.floor(Math.max(dimensions.height / 2 - newHeight / 2 + dimensions.dualScreenTop, 0)); + + return this; + }; + + + this.getWindowSize = () => { + const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left, + dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top, + width = window.innerWidth || document.documentElement.clientWidth || screen.width, + height = window.innerHeight || document.documentElement.clientHeight || screen.height; + + return { dualScreenLeft, dualScreenTop, height, width }; + }; + + this.getCenterPosition = (windowSize, dimensions) => { + const left = windowSize.width / 2 - dimensions.w / 2 + windowSize.dualScreenLeft, + top = windowSize.height / 2 - dimensions.h / 2 + windowSize.dualScreenTop; + + return { left, top }; + }; + + /** + * openPopup Window + * @param {string} url - address of the popup page + * @param {object} dimensions { w: width of popup, h: height of popup} + */ + this.openPopUp = (url, dimensions) => { + const popupPosition = this.getCenterPosition(this.getWindowSize(), dimensions), + params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no, + width=${dimensions.w},height=${dimensions.h},left=${popupPosition.left},top=${popupPosition.top}`; - /** - * openPopup Window - * @param {string} url - address of the popup page - * @param {object} dimensions { w: width of popup, h: height of popup} - */ - openPopUp(url, dimensions) { - const popupPosition = this.getCenterPosition(this.getWindowSize(), dimensions), - params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no, -width=${dimensions.w},height=${dimensions.h},left=${popupPosition.left},top=${popupPosition.top}`; - - window.open(url, 'popup', params); + window.open(url, 'popup', params); + }; } } -module.exports = new service; +module.exports = new Popup; diff --git a/app/sites/claydemo/media/facebook.svg b/app/sites/claydemo/media/facebook.svg new file mode 100644 index 0000000..4c89a76 --- /dev/null +++ b/app/sites/claydemo/media/facebook.svg @@ -0,0 +1 @@ + diff --git a/app/sites/claydemo/media/instagram.svg b/app/sites/claydemo/media/instagram.svg new file mode 100644 index 0000000..84407ee --- /dev/null +++ b/app/sites/claydemo/media/instagram.svg @@ -0,0 +1 @@ + diff --git a/app/styleguides/_default/common/_vars.css b/app/styleguides/_default/common/_vars.css index bd0ba18..7176033 100644 --- a/app/styleguides/_default/common/_vars.css +++ b/app/styleguides/_default/common/_vars.css @@ -14,6 +14,7 @@ $light-gray: #b1b1b1; $light-text: #707070; $medium-gray: #404040; $text-black: #111; +$hover-green: #acca59; /* Wrapper */ diff --git a/app/styleguides/_default/components/footer.css b/app/styleguides/_default/components/footer.css index 2d8e137..041c22b 100644 --- a/app/styleguides/_default/components/footer.css +++ b/app/styleguides/_default/components/footer.css @@ -1,53 +1,56 @@ +@import '_default/common/_vars.css'; + +$fallback-stack: Helvetica, serif; +$footer-text-stack: 'Helvetica', $fallback-stack; + .footer { - .logo-wrapper { - margin: 0 auto 15px auto; - width: 112px; + margin: 20px; + text-align: center; + + .links { + display: inline; + font: 12px $footer-text-stack; + letter-spacing: 2px; } - .follow-icons { - margin: 0 0 7px; - text-align: center; + .link-item { + display: inline; + margin: 6px 13px; + text-transform: uppercase } - .links { - display: flex; - flex-wrap: wrap; - font: bold 14px / 39px GroteskNarrow, sans-serif; - justify-content: center; - letter-spacing: 4px; - text-transform: uppercase; - - a { - margin: 0 14px; - text-decoration: none; - } - - a:visited { - color: black; - } - } - - .copyright { - font: 500 9px / 25px Grotesk, sans-serif; - letter-spacing: 3px; - margin: 0 0 21px; - text-align: center; - text-transform: uppercase; + a { + color: $black; + text-decoration: none; } -} -@media screen and (min-width: 1180px) { - .footer { - .logo-wrapper { - margin: 0 auto 22px auto; - } + & .footer-logo svg { + height: 74px; + width: 340px; + } - .follow-icons { - margin: 0 0 40px; - } + .links-wrapper { + margin: 20px + } - .links { - font: 19px GroteskNarrow, sans-serif; - } + .social-media-btn:hover svg circle { + fill: $hover-green; } -} \ No newline at end of file + + .social-media-btn { + margin: 10px + } + + .footer-settings-wrapper { + margin: 10px 0; + } + + .social-media-circle { + background: transparent; + border: none; + cursor: pointer; + height: 39px; + padding: 0; + width: 39px; + } +} diff --git a/app/styleguides/_default/layouts/layout.css b/app/styleguides/_default/layouts/layout.css index f463307..3b44f50 100644 --- a/app/styleguides/_default/layouts/layout.css +++ b/app/styleguides/_default/layouts/layout.css @@ -53,7 +53,6 @@ html { margin: auto; } - & > .page-header, & > .top { margin: 20px auto; }