From f796b41dbb946ac3d7ba369b431ad3e11b2ff8d4 Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Thu, 14 Mar 2019 13:28:23 -0400 Subject: [PATCH 01/25] secondary links footer --- app/components/footer/schema.yaml | 82 +++++++++++++++++-- app/components/footer/template.hbs | 54 +++++++++++- .../_default/components/footer.css | 29 ++++++- 3 files changed, 155 insertions(+), 10 deletions(-) diff --git a/app/components/footer/schema.yaml b/app/components/footer/schema.yaml index 550151b..4f194dc 100644 --- a/app/components/footer/schema.yaml +++ b/app/components/footer/schema.yaml @@ -1,8 +1,54 @@ _description: | - footer + The footer at the bottom of all pages. Has toggle-able links to various New York Magazine properties. +_confirmRemoval: true -footerLinks: - _label: Footer Links +services: + _label: Social Buttons + _placeholder: + text: Social Buttons + height: 30px + _componentList: + include: + - follow + +# socialMediaLinks: +# _label: Primary Links +# _placeholder: +# text: Primary Links +# height: 50px +# _has: +# input: complex-list +# props: +# - +# prop: url +# _label: Url +# _has: +# input: text +# type: url +# validate: +# required: true +# - +# prop: text +# _label: Link Text +# _has: +# input: text +# enforceMaxlength: true +# validate: +# required: true +# max: 40 +# maxMessage: This field must be 40 or fewer characters long +# - +# prop: linkImage +# _label: Link Image +# _has: +# input: text +# type: text + +secondaryLinks: + _label: Secondary Links + _placeholder: + text: Secondary Links + height: 50px _has: input: complex-list props: @@ -25,7 +71,29 @@ footerLinks: max: 40 maxMessage: This field must be 40 or fewer characters long -_groups: - settings: - fields: - - footerLinks +# sponsoredLinks: +# _label: Sponsored Links +# _placeholder: +# text: Sponsored Links +# height: 50px +# _has: +# input: complex-list +# props: +# - +# prop: url +# _label: Url +# _has: +# input: text +# type: url +# validate: +# required: true +# - +# prop: text +# _label: Link Text +# _has: +# input: text +# enforceMaxlength: true +# validate: +# required: true +# max: 40 +# maxMessage: This field must be 40 or fewer characters long diff --git a/app/components/footer/template.hbs b/app/components/footer/template.hbs index 7d2c486..c66fae0 100644 --- a/app/components/footer/template.hbs +++ b/app/components/footer/template.hbs @@ -1,4 +1,4 @@ -
+{{!--
    {{> component-list footerLinks }} @@ -7,4 +7,56 @@
    Built in {{ moment 'now' 'YYYY' }} with Clay
    +
--}} + +
+ {{!--
+
+ +
+ {{#ifAny @root.locals.edit primaryLinks.length}} + + {{/ifAny}} +
+ + --}} +
    + {{#each secondaryLinks}} +
  • + {{ text }} +
    • + {{/each}} +
+ {{!--
+ Built in {{ moment 'now' 'YYYY' }} with Clay +
--}}
diff --git a/app/styleguides/_default/components/footer.css b/app/styleguides/_default/components/footer.css index 2d8e137..9405fe0 100644 --- a/app/styleguides/_default/components/footer.css +++ b/app/styleguides/_default/components/footer.css @@ -1,4 +1,4 @@ -.footer { +/* .footer { .logo-wrapper { margin: 0 auto 15px auto; width: 112px; @@ -50,4 +50,29 @@ font: 19px GroteskNarrow, sans-serif; } } -} \ No newline at end of file +} */ + +.footer { + margin: 20px; + text-align: center; + + .links { + display: inline; + width: 33px; + height: 14px; + font-family: Helvetica; + font-size: 12px; + letter-spacing: 2px; + } + + .link-item { + display: inline; + margin: 6px 13px; + text-transform: uppercase + } + + a { + color: #000; + text-decoration: none; + } +} From 42f95c5ea145750b14845d2659f52b9cfc824ebb Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Thu, 14 Mar 2019 15:15:45 -0400 Subject: [PATCH 02/25] footer compoent - navegation link - logo footer --- app/components/footer/bootstrap.yaml | 6 +- app/components/footer/media/log.svg | 3 + app/components/footer/schema.yaml | 128 ++++++++---------- app/components/footer/template.hbs | 72 ++-------- .../_default/components/footer.css | 5 + 5 files changed, 86 insertions(+), 128 deletions(-) create mode 100644 app/components/footer/media/log.svg diff --git a/app/components/footer/bootstrap.yaml b/app/components/footer/bootstrap.yaml index 808d3e8..6145126 100644 --- a/app/components/footer/bootstrap.yaml +++ b/app/components/footer/bootstrap.yaml @@ -1,3 +1,7 @@ _components: footer: - footerLinks: [] + services: [] + sponsoredLinks: [] + siteLogo: '' + logoUrl: '' + navegationLinks: [] diff --git a/app/components/footer/media/log.svg b/app/components/footer/media/log.svg new file mode 100644 index 0000000..55804ef --- /dev/null +++ b/app/components/footer/media/log.svg @@ -0,0 +1,3 @@ + + + diff --git a/app/components/footer/schema.yaml b/app/components/footer/schema.yaml index 4f194dc..da47cf6 100644 --- a/app/components/footer/schema.yaml +++ b/app/components/footer/schema.yaml @@ -2,52 +2,43 @@ _description: | The footer at the bottom of all pages. Has toggle-able links to various New York Magazine properties. _confirmRemoval: true -services: - _label: Social Buttons +socialMediaLinks: + _label: Primary Links _placeholder: - text: Social Buttons - height: 30px - _componentList: - include: - - follow - -# socialMediaLinks: -# _label: Primary Links -# _placeholder: -# text: Primary Links -# height: 50px -# _has: -# input: complex-list -# props: -# - -# prop: url -# _label: Url -# _has: -# input: text -# type: url -# validate: -# required: true -# - -# prop: text -# _label: Link Text -# _has: -# input: text -# enforceMaxlength: true -# validate: -# required: true -# max: 40 -# maxMessage: This field must be 40 or fewer characters long -# - -# prop: linkImage -# _label: Link Image -# _has: -# input: text -# type: text + text: Primary Links + height: 50px + _has: + input: complex-list + props: + - + prop: url + _label: Url + _has: + input: text + type: url + validate: + required: true + - + prop: text + _label: Link Text + _has: + input: text + enforceMaxlength: true + validate: + required: true + max: 40 + maxMessage: This field must be 40 or fewer characters long + - + prop: linkImage + _label: Link Image + _has: + input: text + type: text -secondaryLinks: - _label: Secondary Links +navegationLinks: + _label: Navegation Links _placeholder: - text: Secondary Links + text: Navegation Links height: 50px _has: input: complex-list @@ -71,29 +62,28 @@ secondaryLinks: max: 40 maxMessage: This field must be 40 or fewer characters long -# sponsoredLinks: -# _label: Sponsored Links -# _placeholder: -# text: Sponsored Links -# height: 50px -# _has: -# input: complex-list -# props: -# - -# prop: url -# _label: Url -# _has: -# input: text -# type: url -# validate: -# required: true -# - -# prop: text -# _label: Link Text -# _has: -# input: text -# enforceMaxlength: true -# validate: -# required: true -# max: 40 -# maxMessage: This field must be 40 or fewer characters long +siteLogo: + _label: Site Logo + _placeholder: + height: 50px + _has: + input: text + help: support svg + +logoUrl: + _label: Logo URL + _placeholder: + height: 50px + _has: + input: text + +_groups: + settings: + fields: + - siteLogo (General) + - logoUrl (General) + - navegationLinks (Navegation Links) + _placeholder: + text: Footer + height: 30px + ifEmpty: logoUrl diff --git a/app/components/footer/template.hbs b/app/components/footer/template.hbs index c66fae0..ad10ebe 100644 --- a/app/components/footer/template.hbs +++ b/app/components/footer/template.hbs @@ -1,62 +1,18 @@ -{{!--
- -
    - {{> component-list footerLinks }} -
- -
- Built in {{ moment 'now' 'YYYY' }} with Clay -
-
--}} -
- {{!--
-
- -
- {{#ifAny @root.locals.edit primaryLinks.length}} - +
- --}} -
    - {{#each secondaryLinks}} -
  • - {{ text }} -
    • - {{/each}} -
- {{!--
- Built in {{ moment 'now' 'YYYY' }} with Clay -
--}}
diff --git a/app/styleguides/_default/components/footer.css b/app/styleguides/_default/components/footer.css index 9405fe0..a364f9d 100644 --- a/app/styleguides/_default/components/footer.css +++ b/app/styleguides/_default/components/footer.css @@ -75,4 +75,9 @@ color: #000; text-decoration: none; } + + & .logo svg { + height: 74px; + width: 340px; + } } From d90e8ea051138030cb3b2ba5abc32da151e4c706 Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Thu, 14 Mar 2019 16:07:25 -0400 Subject: [PATCH 03/25] added facebook svg files --- app/components/footer/bootstrap.yaml | 2 - app/components/footer/schema.yaml | 37 ++++++------- app/components/footer/template.hbs | 5 ++ app/sites/claydemo/media/facebook.svg | 1 + app/sites/claydemo/media/twitter.svg | 1 + .../_default/components/footer.css | 54 ------------------- 6 files changed, 22 insertions(+), 78 deletions(-) create mode 100644 app/sites/claydemo/media/facebook.svg create mode 100644 app/sites/claydemo/media/twitter.svg diff --git a/app/components/footer/bootstrap.yaml b/app/components/footer/bootstrap.yaml index 6145126..3fbb1fd 100644 --- a/app/components/footer/bootstrap.yaml +++ b/app/components/footer/bootstrap.yaml @@ -1,7 +1,5 @@ _components: footer: - services: [] - sponsoredLinks: [] siteLogo: '' logoUrl: '' navegationLinks: [] diff --git a/app/components/footer/schema.yaml b/app/components/footer/schema.yaml index da47cf6..ebf6a71 100644 --- a/app/components/footer/schema.yaml +++ b/app/components/footer/schema.yaml @@ -3,37 +3,30 @@ _description: | _confirmRemoval: true socialMediaLinks: - _label: Primary Links + _label: Social Media Links _placeholder: - text: Primary Links + text: Social Media Links height: 50px _has: input: complex-list props: - - prop: url - _label: Url + prop: socialMediaNetwork + _label: socialMediaNetwork _has: - input: text - type: url - validate: - required: true + input: radio + options: + - Facebook + - Twitter + - Instagram - - prop: text - _label: Link Text - _has: - input: text - enforceMaxlength: true - validate: - required: true - max: 40 - maxMessage: This field must be 40 or fewer characters long - - - prop: linkImage - _label: Link Image + prop: url + _label: Url _has: - input: text - type: text + input: text + type: url + validate: + required: true navegationLinks: _label: Navegation Links diff --git a/app/components/footer/template.hbs b/app/components/footer/template.hbs index ad10ebe..15d2fd5 100644 --- a/app/components/footer/template.hbs +++ b/app/components/footer/template.hbs @@ -15,4 +15,9 @@ +
+ {{#each socialMediaLinks}} + + {{/each}} +
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/twitter.svg b/app/sites/claydemo/media/twitter.svg new file mode 100644 index 0000000..fec654c --- /dev/null +++ b/app/sites/claydemo/media/twitter.svg @@ -0,0 +1 @@ + diff --git a/app/styleguides/_default/components/footer.css b/app/styleguides/_default/components/footer.css index a364f9d..edac45b 100644 --- a/app/styleguides/_default/components/footer.css +++ b/app/styleguides/_default/components/footer.css @@ -1,57 +1,3 @@ -/* .footer { - .logo-wrapper { - margin: 0 auto 15px auto; - width: 112px; - } - - .follow-icons { - margin: 0 0 7px; - text-align: center; - } - - .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; - } -} - -@media screen and (min-width: 1180px) { - .footer { - .logo-wrapper { - margin: 0 auto 22px auto; - } - - .follow-icons { - margin: 0 0 40px; - } - - .links { - font: 19px GroteskNarrow, sans-serif; - } - } -} */ - .footer { margin: 20px; text-align: center; From c9f6658a8131c1c374a551bb575c00afffb2b347 Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Fri, 15 Mar 2019 11:25:47 -0400 Subject: [PATCH 04/25] svg hover css, added a tag to template.hbs --- app/components/footer/schema.yaml | 7 ++++--- app/components/footer/template.hbs | 7 +++++-- app/styleguides/_default/components/footer.css | 7 +++++++ 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/app/components/footer/schema.yaml b/app/components/footer/schema.yaml index ebf6a71..4dc0830 100644 --- a/app/components/footer/schema.yaml +++ b/app/components/footer/schema.yaml @@ -1,11 +1,11 @@ _description: | - The footer at the bottom of all pages. Has toggle-able links to various New York Magazine properties. + The footer at the bottom of all pages. _confirmRemoval: true socialMediaLinks: _label: Social Media Links _placeholder: - text: Social Media Links + text: New Follow height: 50px _has: input: complex-list @@ -15,13 +15,14 @@ socialMediaLinks: _label: socialMediaNetwork _has: input: radio + help: Select the network for this follow button options: - Facebook - Twitter - Instagram - prop: url - _label: Url + _label: Social Media Handle _has: input: text type: url diff --git a/app/components/footer/template.hbs b/app/components/footer/template.hbs index 15d2fd5..66cb485 100644 --- a/app/components/footer/template.hbs +++ b/app/components/footer/template.hbs @@ -5,7 +5,7 @@ {{{ siteLogo }}} {{/if}} -
+
    {{#each navegationLinks}}
  • @@ -15,9 +15,12 @@
+
{{#each socialMediaLinks}} - + {{/each}}
diff --git a/app/styleguides/_default/components/footer.css b/app/styleguides/_default/components/footer.css index edac45b..7bd8c38 100644 --- a/app/styleguides/_default/components/footer.css +++ b/app/styleguides/_default/components/footer.css @@ -26,4 +26,11 @@ height: 74px; width: 340px; } + + .links-wrapper { + margin: 20px + } + .socialmedia-link:hover svg circle { + fill: #acca59; + } } From a195aab4b418f00ce5f3c74cb6f1af617af89ebc Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Fri, 15 Mar 2019 11:50:42 -0400 Subject: [PATCH 05/25] added moodel. js for test --- app/components/footer/model.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 app/components/footer/model.js diff --git a/app/components/footer/model.js b/app/components/footer/model.js new file mode 100644 index 0000000..c5db8e2 --- /dev/null +++ b/app/components/footer/model.js @@ -0,0 +1,9 @@ +'use strict'; + +module.exports.save = function (uri, data) { + return data; +}; + +module.exports.render = function (uri, data) { + return data; +}; From 5283540476c691c5e17779ccbc88f662fd844b00 Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Fri, 15 Mar 2019 13:08:30 -0400 Subject: [PATCH 06/25] Update schema.yaml --- app/components/footer/schema.yaml | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/app/components/footer/schema.yaml b/app/components/footer/schema.yaml index 4dc0830..01d3cab 100644 --- a/app/components/footer/schema.yaml +++ b/app/components/footer/schema.yaml @@ -25,7 +25,7 @@ socialMediaLinks: _label: Social Media Handle _has: input: text - type: url + help: Example https://domain.com validate: required: true @@ -42,7 +42,7 @@ navegationLinks: _label: Url _has: input: text - type: url + help: Example https://domain.com validate: required: true - @@ -62,7 +62,7 @@ siteLogo: height: 50px _has: input: text - help: support svg + help: Support SVG logoUrl: _label: Logo URL @@ -70,6 +70,7 @@ logoUrl: height: 50px _has: input: text + help: Example https://domain.com _groups: settings: @@ -80,4 +81,4 @@ _groups: _placeholder: text: Footer height: 30px - ifEmpty: logoUrl + ifEmpty: logoUrl AND siteLogo From 5392607c0c26e45645e4448de6ec9a99fe8fe1c9 Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Fri, 15 Mar 2019 14:57:35 -0400 Subject: [PATCH 07/25] Delete model.js --- app/components/footer/model.js | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 app/components/footer/model.js diff --git a/app/components/footer/model.js b/app/components/footer/model.js deleted file mode 100644 index c5db8e2..0000000 --- a/app/components/footer/model.js +++ /dev/null @@ -1,9 +0,0 @@ -'use strict'; - -module.exports.save = function (uri, data) { - return data; -}; - -module.exports.render = function (uri, data) { - return data; -}; From bf4d05b02527c93f8ffe680d55d829cc6f6db8a9 Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Fri, 15 Mar 2019 15:04:31 -0400 Subject: [PATCH 08/25] Update template.hbs --- app/components/footer/template.hbs | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/app/components/footer/template.hbs b/app/components/footer/template.hbs index 66cb485..23c3a31 100644 --- a/app/components/footer/template.hbs +++ b/app/components/footer/template.hbs @@ -5,22 +5,24 @@ {{{ siteLogo }}} {{/if}} + {{#if navegationLinks.length}}
+ {{/if}} From 37d66ae8f4a1685e2608d29a52d5cb7388780874 Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Fri, 15 Mar 2019 15:11:49 -0400 Subject: [PATCH 09/25] Update footer.css --- app/styleguides/_default/components/footer.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/app/styleguides/_default/components/footer.css b/app/styleguides/_default/components/footer.css index 7bd8c38..b56f143 100644 --- a/app/styleguides/_default/components/footer.css +++ b/app/styleguides/_default/components/footer.css @@ -30,7 +30,12 @@ .links-wrapper { margin: 20px } + .socialmedia-link:hover svg circle { fill: #acca59; } + + .socialmedia-link{ + margin: 10px + } } From 948e5ebd3f82f7ffc5d4e93c1964ef8ddd69a344 Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Fri, 15 Mar 2019 15:34:30 -0400 Subject: [PATCH 10/25] style fix --- app/components/footer/schema.yaml | 8 ++++---- app/components/footer/template.hbs | 4 ++-- app/styleguides/_default/components/footer.css | 4 ++++ app/styleguides/_default/layouts/layout.css | 3 +-- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/app/components/footer/schema.yaml b/app/components/footer/schema.yaml index 01d3cab..bd9dbe2 100644 --- a/app/components/footer/schema.yaml +++ b/app/components/footer/schema.yaml @@ -6,7 +6,7 @@ socialMediaLinks: _label: Social Media Links _placeholder: text: New Follow - height: 50px + height: 56px _has: input: complex-list props: @@ -33,7 +33,7 @@ navegationLinks: _label: Navegation Links _placeholder: text: Navegation Links - height: 50px + height: 56px _has: input: complex-list props: @@ -59,7 +59,7 @@ navegationLinks: siteLogo: _label: Site Logo _placeholder: - height: 50px + height: 56px _has: input: text help: Support SVG @@ -67,7 +67,7 @@ siteLogo: logoUrl: _label: Logo URL _placeholder: - height: 50px + height: 56px _has: input: text help: Example https://domain.com diff --git a/app/components/footer/template.hbs b/app/components/footer/template.hbs index 23c3a31..1c7305a 100644 --- a/app/components/footer/template.hbs +++ b/app/components/footer/template.hbs @@ -1,5 +1,5 @@
-
+
{{#if siteLogo}}
From 0c13aace0ca6100c1b97a6d2c9ead49de101c0f3 Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Mon, 18 Mar 2019 10:04:21 -0400 Subject: [PATCH 12/25] added instagram logo, use default logo, dynamic icon --- app/components/footer/schema.yaml | 6 ++++ app/components/footer/template.hbs | 42 +++++++++++++------------- app/sites/claydemo/media/instagram.svg | 1 + app/sites/claydemo/media/logo.svg | 14 +-------- 4 files changed, 29 insertions(+), 34 deletions(-) create mode 100644 app/sites/claydemo/media/instagram.svg diff --git a/app/components/footer/schema.yaml b/app/components/footer/schema.yaml index bd9dbe2..3851e4d 100644 --- a/app/components/footer/schema.yaml +++ b/app/components/footer/schema.yaml @@ -28,6 +28,12 @@ socialMediaLinks: help: Example https://domain.com validate: required: true + - + prop: icon + _label: Social Media Icon + _has: + input: text + help: Support SVG navegationLinks: _label: Navegation Links diff --git a/app/components/footer/template.hbs b/app/components/footer/template.hbs index aebc519..78b2dc5 100644 --- a/app/components/footer/template.hbs +++ b/app/components/footer/template.hbs @@ -2,35 +2,35 @@
{{#if siteLogo}} {{/if}} {{#if navegationLinks.length}} -
-
    - {{#each navegationLinks}} -
  • - {{ text }} -
    • - {{/each}} -
-
+
+
    + {{#each navegationLinks}} +
  • + {{ text }} +
    • + {{/each}} +
+
{{/if}}
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/sites/claydemo/media/logo.svg b/app/sites/claydemo/media/logo.svg index 459b1d8..e1d17b2 100644 --- a/app/sites/claydemo/media/logo.svg +++ b/app/sites/claydemo/media/logo.svg @@ -1,13 +1 @@ - - - - - - - - - - - - - + From 285401930a803bcfc55fcd09bfb8cf7e2f771f70 Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Mon, 18 Mar 2019 12:28:44 -0400 Subject: [PATCH 13/25] added popup.js services and footer/client.js --- app/components/footer/client.js | 61 +++++++ app/components/footer/schema.yaml | 9 +- app/components/footer/template.hbs | 12 +- app/services/client/popup.js | 164 ++++++++++++++++++ .../_default/components/footer.css | 9 + 5 files changed, 246 insertions(+), 9 deletions(-) create mode 100644 app/components/footer/client.js create mode 100644 app/services/client/popup.js diff --git a/app/components/footer/client.js b/app/components/footer/client.js new file mode 100644 index 0000000..7bac6d2 --- /dev/null +++ b/app/components/footer/client.js @@ -0,0 +1,61 @@ +'use strict'; + +const _find = require('lodash/find'), + $popup = require('../../services/client/popup'); + +module.exports = (el) => { + const followBotton = el.querySelectorAll('.socialmedia-link'); + + if (followBotton) { + followBotton.forEach((element)=>{ + element.addEventListener('click', (e) => { + debugger; + let Position = $popup.position, + Params = $popup.params, + opts = {}, + dims = { w: 780, h: 500 }, + features = new Position(dims.w, dims.h), + classList = e.currentTarget.classList, + args, + socialHandler, + socialNetworks = [ + { + className: 'facebook', + url: 'https://facebook.com/{handle}', + network: 'Facebook' + }, + { + className: 'instagram', + url: 'https://www.instagram.com/{handle}', + network: 'Instagram' + }, + { + className: 'twitter', + url: 'https://twitter.com/intent/follow?screen_name={handle}&tw_p=followbutton&variant=2.0', + network: 'Twitter' + } + ]; + + opts.handle = e.currentTarget.getAttribute('data-handle'); + + dims.left = features.left; + dims.top = features.top; + + socialHandler = _find(socialNetworks, function (socialNetwork) { + return classList.contains(socialNetwork.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, dims); + window.open(args.address, args.name, args.features); + e.preventDefault(); + }); + }); + + } +}; + + diff --git a/app/components/footer/schema.yaml b/app/components/footer/schema.yaml index 3851e4d..de427f6 100644 --- a/app/components/footer/schema.yaml +++ b/app/components/footer/schema.yaml @@ -17,9 +17,12 @@ socialMediaLinks: input: radio help: Select the network for this follow button options: - - Facebook - - Twitter - - Instagram + - name: 'Facebook' + value: 'facebook' + - name: 'Twitter' + value: 'twitter' + - name: 'Instagram' + value: 'instagram' - prop: url _label: Social Media Handle diff --git a/app/components/footer/template.hbs b/app/components/footer/template.hbs index 78b2dc5..dc056b0 100644 --- a/app/components/footer/template.hbs +++ b/app/components/footer/template.hbs @@ -24,13 +24,13 @@
diff --git a/app/services/client/popup.js b/app/services/client/popup.js new file mode 100644 index 0000000..2f15ba1 --- /dev/null +++ b/app/services/client/popup.js @@ -0,0 +1,164 @@ +'use strict'; + +const _find = require('lodash/find'), + _includes = require('lodash/includes'), + _get = require('lodash/get'); +var $window = typeof window !== 'undefined' ? window : undefined; + +class service { + constructor() { + + var popupService = this; + + this.popupClasses = [ + // classes we should open the popup for + // don't open popups for email and print + // careful of changes b/c these values go into analytics, e.g. $gtm + 'facebook', + 'twitter', + 'linkedin', + 'gplus', + 'pinterest', + 'tumblr' + ]; + + // dimensions of our various social media popups + this.popupDimensions = { + default: { + w: 520, + h: 304 + }, + facebook: { + w: 520, + h: 304 + }, + gplus: { + w: 520, + h: 485 + }, + linkedin: { + w: 520, + h: 450 + }, + pinterest: { + w: 1015, + h: 630 + }, + tumblr: { + w: 520, + h: 312 + }, + twitter: { + w: 550, + h: 572 + } + }; + + /** + * get supported popup class + * @param {array} classList + * @returns {string|undefined} + */ + this.getPopupClass = function (classList) { + return _find(popupService.popupClasses, function (supportedClass) { + return _includes(classList, supportedClass); + }); + }; + + /** + * 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 = function (opts, dimensions) { + if (opts.url) { + this.address = opts.url; + } + + if (opts.name) { + this.name = opts.name; + } + + this.features = 'width=' + (dimensions.w || 0) + ',height=' + (dimensions.h || 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 = function () { + var usesScreenForDimensions = $window.hasOwnProperty('screen') && $window.screen.hasOwnProperty('screenTop'), + 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 = function (newWidth, newHeight) { + var dimensions = popupService.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; + }; + + /** + * create a social media popup! + * @param {string} popupClass + * @param {string} handle + * @param {string} url + */ + this.popWindow = function (popupClass, handle, url) { + var Position = popupService.position, + Params = popupService.params, + opts = {}, + dims = {}, + networkLabelMap = { + facebook: 'Facebook', + twitter: 'Twitter', + pinterest: 'Pinterest', + gplus: 'Google+' + }, + args, features; + + opts.url = url; + opts.name = 'Follow ' + handle + ' on ' + networkLabelMap[popupClass]; + dims.w = _get(popupService.popupDimensions, popupClass + '.w'); + dims.h = _get(popupService.popupDimensions, popupClass + '.h'); + features = new Position(dims.w, dims.h); + dims.left = features.left; + dims.top = features.top; + args = new Params(opts, dims); + window.open(args.address, args.name, args.features); + }; + } + + stubFakeWindow(fakeWindow) { + $window = typeof window !== 'undefined' ? window : fakeWindow; + } +} + +module.exports = new service; diff --git a/app/styleguides/_default/components/footer.css b/app/styleguides/_default/components/footer.css index 6c4a26f..c9c75ae 100644 --- a/app/styleguides/_default/components/footer.css +++ b/app/styleguides/_default/components/footer.css @@ -42,4 +42,13 @@ .footer-settings-wrapper { margin: 10px 0; } + + .follow_circle { + background: transparent; + border: none; + cursor: pointer; + height: 39px; + padding: 0; + width: 39px; +} } From 1563f8fdb283bc2bafdc2836e38ee66e9d9a74f3 Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Mon, 18 Mar 2019 14:56:57 -0400 Subject: [PATCH 14/25] Revert "added popup.js services and footer/client.js" This reverts commit 285401930a803bcfc55fcd09bfb8cf7e2f771f70. --- app/components/footer/client.js | 61 ------- app/components/footer/schema.yaml | 9 +- app/components/footer/template.hbs | 12 +- app/services/client/popup.js | 164 ------------------ .../_default/components/footer.css | 9 - 5 files changed, 9 insertions(+), 246 deletions(-) delete mode 100644 app/components/footer/client.js delete mode 100644 app/services/client/popup.js diff --git a/app/components/footer/client.js b/app/components/footer/client.js deleted file mode 100644 index 7bac6d2..0000000 --- a/app/components/footer/client.js +++ /dev/null @@ -1,61 +0,0 @@ -'use strict'; - -const _find = require('lodash/find'), - $popup = require('../../services/client/popup'); - -module.exports = (el) => { - const followBotton = el.querySelectorAll('.socialmedia-link'); - - if (followBotton) { - followBotton.forEach((element)=>{ - element.addEventListener('click', (e) => { - debugger; - let Position = $popup.position, - Params = $popup.params, - opts = {}, - dims = { w: 780, h: 500 }, - features = new Position(dims.w, dims.h), - classList = e.currentTarget.classList, - args, - socialHandler, - socialNetworks = [ - { - className: 'facebook', - url: 'https://facebook.com/{handle}', - network: 'Facebook' - }, - { - className: 'instagram', - url: 'https://www.instagram.com/{handle}', - network: 'Instagram' - }, - { - className: 'twitter', - url: 'https://twitter.com/intent/follow?screen_name={handle}&tw_p=followbutton&variant=2.0', - network: 'Twitter' - } - ]; - - opts.handle = e.currentTarget.getAttribute('data-handle'); - - dims.left = features.left; - dims.top = features.top; - - socialHandler = _find(socialNetworks, function (socialNetwork) { - return classList.contains(socialNetwork.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, dims); - window.open(args.address, args.name, args.features); - e.preventDefault(); - }); - }); - - } -}; - - diff --git a/app/components/footer/schema.yaml b/app/components/footer/schema.yaml index de427f6..3851e4d 100644 --- a/app/components/footer/schema.yaml +++ b/app/components/footer/schema.yaml @@ -17,12 +17,9 @@ socialMediaLinks: input: radio help: Select the network for this follow button options: - - name: 'Facebook' - value: 'facebook' - - name: 'Twitter' - value: 'twitter' - - name: 'Instagram' - value: 'instagram' + - Facebook + - Twitter + - Instagram - prop: url _label: Social Media Handle diff --git a/app/components/footer/template.hbs b/app/components/footer/template.hbs index dc056b0..78b2dc5 100644 --- a/app/components/footer/template.hbs +++ b/app/components/footer/template.hbs @@ -24,13 +24,13 @@
diff --git a/app/services/client/popup.js b/app/services/client/popup.js deleted file mode 100644 index 2f15ba1..0000000 --- a/app/services/client/popup.js +++ /dev/null @@ -1,164 +0,0 @@ -'use strict'; - -const _find = require('lodash/find'), - _includes = require('lodash/includes'), - _get = require('lodash/get'); -var $window = typeof window !== 'undefined' ? window : undefined; - -class service { - constructor() { - - var popupService = this; - - this.popupClasses = [ - // classes we should open the popup for - // don't open popups for email and print - // careful of changes b/c these values go into analytics, e.g. $gtm - 'facebook', - 'twitter', - 'linkedin', - 'gplus', - 'pinterest', - 'tumblr' - ]; - - // dimensions of our various social media popups - this.popupDimensions = { - default: { - w: 520, - h: 304 - }, - facebook: { - w: 520, - h: 304 - }, - gplus: { - w: 520, - h: 485 - }, - linkedin: { - w: 520, - h: 450 - }, - pinterest: { - w: 1015, - h: 630 - }, - tumblr: { - w: 520, - h: 312 - }, - twitter: { - w: 550, - h: 572 - } - }; - - /** - * get supported popup class - * @param {array} classList - * @returns {string|undefined} - */ - this.getPopupClass = function (classList) { - return _find(popupService.popupClasses, function (supportedClass) { - return _includes(classList, supportedClass); - }); - }; - - /** - * 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 = function (opts, dimensions) { - if (opts.url) { - this.address = opts.url; - } - - if (opts.name) { - this.name = opts.name; - } - - this.features = 'width=' + (dimensions.w || 0) + ',height=' + (dimensions.h || 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 = function () { - var usesScreenForDimensions = $window.hasOwnProperty('screen') && $window.screen.hasOwnProperty('screenTop'), - 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 = function (newWidth, newHeight) { - var dimensions = popupService.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; - }; - - /** - * create a social media popup! - * @param {string} popupClass - * @param {string} handle - * @param {string} url - */ - this.popWindow = function (popupClass, handle, url) { - var Position = popupService.position, - Params = popupService.params, - opts = {}, - dims = {}, - networkLabelMap = { - facebook: 'Facebook', - twitter: 'Twitter', - pinterest: 'Pinterest', - gplus: 'Google+' - }, - args, features; - - opts.url = url; - opts.name = 'Follow ' + handle + ' on ' + networkLabelMap[popupClass]; - dims.w = _get(popupService.popupDimensions, popupClass + '.w'); - dims.h = _get(popupService.popupDimensions, popupClass + '.h'); - features = new Position(dims.w, dims.h); - dims.left = features.left; - dims.top = features.top; - args = new Params(opts, dims); - window.open(args.address, args.name, args.features); - }; - } - - stubFakeWindow(fakeWindow) { - $window = typeof window !== 'undefined' ? window : fakeWindow; - } -} - -module.exports = new service; diff --git a/app/styleguides/_default/components/footer.css b/app/styleguides/_default/components/footer.css index c9c75ae..6c4a26f 100644 --- a/app/styleguides/_default/components/footer.css +++ b/app/styleguides/_default/components/footer.css @@ -42,13 +42,4 @@ .footer-settings-wrapper { margin: 10px 0; } - - .follow_circle { - background: transparent; - border: none; - cursor: pointer; - height: 39px; - padding: 0; - width: 39px; -} } From 64a2712d107b223982aaf8b8930ef1a795ca7b50 Mon Sep 17 00:00:00 2001 From: jean rodriguez Date: Mon, 18 Mar 2019 15:31:45 -0400 Subject: [PATCH 15/25] footer component --- app/components/footer/client.js | 62 +++++++ .../footer/media/{log.svg => logo.svg} | 0 app/components/footer/schema.yaml | 14 +- app/components/footer/template.hbs | 14 +- app/services/client/popup.js | 165 ++++++++++++++++++ .../_default/components/footer.css | 15 +- 6 files changed, 254 insertions(+), 16 deletions(-) create mode 100644 app/components/footer/client.js rename app/components/footer/media/{log.svg => logo.svg} (100%) create mode 100644 app/services/client/popup.js diff --git a/app/components/footer/client.js b/app/components/footer/client.js new file mode 100644 index 0000000..d06da7a --- /dev/null +++ b/app/components/footer/client.js @@ -0,0 +1,62 @@ +'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', + url: 'https://twitter.com/intent/follow?screen_name={handle}&tw_p=followbutton&variant=2.0', + network: 'Twitter' + } + ]; + + if (socialMediaButtons) { + socialMediaButtons.forEach((element)=>{ + element.addEventListener('click', (e) => { + let Position = $popup.position, + Params = $popup.params, + opts = {}, + dimensions = { w: 780, h: 500 }, + features = new Position(dimensions.w, dimensions.h), + 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, function (socialNetwork) { + return classList.contains(socialNetwork.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); + e.preventDefault(); + }); + }); + + } +}; + + diff --git a/app/components/footer/media/log.svg b/app/components/footer/media/logo.svg similarity index 100% rename from app/components/footer/media/log.svg rename to app/components/footer/media/logo.svg diff --git a/app/components/footer/schema.yaml b/app/components/footer/schema.yaml index 3851e4d..d78c720 100644 --- a/app/components/footer/schema.yaml +++ b/app/components/footer/schema.yaml @@ -2,7 +2,7 @@ _description: | The footer at the bottom of all pages. _confirmRemoval: true -socialMediaLinks: +socialMediaNetworks: _label: Social Media Links _placeholder: text: New Follow @@ -16,16 +16,18 @@ socialMediaLinks: _has: input: radio help: Select the network for this follow button - options: - - Facebook - - Twitter - - Instagram + options: # new social media network should also be added to 'supportedSocialNetworks' in client.js + - name: 'Facebook' + value: 'facebook' + - name: 'Twitter' + value: 'twitter' + - name: 'Instagram' + value: 'instagram' - prop: url _label: Social Media Handle _has: input: text - help: Example https://domain.com validate: required: true - diff --git a/app/components/footer/template.hbs b/app/components/footer/template.hbs index 78b2dc5..f0a85ee 100644 --- a/app/components/footer/template.hbs +++ b/app/components/footer/template.hbs @@ -1,7 +1,7 @@
{{#if siteLogo}} -