From bd341f8f8912f78c869aee40f9eb7c914eec06c5 Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Fri, 14 Dec 2018 14:44:52 +1100 Subject: [PATCH 1/5] fix(menus): Support top & left animations --- .prettierrc | 4 ++ demo/menus/index.html | 81 +++++++++++++++++-------------- demo/menus/index.js | 49 ++++++++++++++++--- packages/menus/src/_keyframes.css | 16 +++--- 4 files changed, 97 insertions(+), 53 deletions(-) create mode 100644 .prettierrc diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..5ac85e27 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "printWidth": 100, + "singleQuote": true +} diff --git a/demo/menus/index.html b/demo/menus/index.html index ae96c533..1aff6584 100644 --- a/demo/menus/index.html +++ b/demo/menus/index.html @@ -18,33 +18,24 @@ @@ -149,11 +140,15 @@

Show/Hide Animations

- +
+
+ +
+
@@ -164,11 +159,15 @@

Show/Hide Animations

- +
+
+ +
+
Show/Hide Animations - +
+
+ +
+
@@ -192,11 +195,15 @@

Show/Hide Animations

- +
+
+ +
+
diff --git a/demo/menus/index.js b/demo/menus/index.js index 03e9474a..a565f7ee 100644 --- a/demo/menus/index.js +++ b/demo/menus/index.js @@ -9,17 +9,45 @@ $(document).ready(function() { $(document).on('click', '.c-menu__item', function(event) { if (event.target === event.currentTarget) { - $(this).find('.c-chk__input').click(); + $(this) + .find('.c-chk__input') + .click(); } }); - $(document).on('click', '.c-menu__item:not(.is-disabled):not(.c-menu__item--header):not(.c-ctl .c-menu__item)', function() { - $(this).toggleClass('is-checked'); - }); + $(document).on( + 'click', + '.c-menu__item:not(.is-disabled):not(.c-menu__item--header):not(.c-ctl .c-menu__item)', + function() { + $(this).toggleClass('is-checked'); + } + ); $(document).on('click', '.js-menu', function() { var $this = $(this); + var $pos = $this.offset(); + var $width = $this.outerWidth(); var $menu = $this.parent().find('.c-menu'); + var $menuWidth = $menu.outerWidth(); + var $popper = $this.parent().find('.menu-container'); + + if ($menu.hasClass('c-menu--right')) { + var x = $width + 2; + $popper.css('transform', 'translate3d(' + x + 'px, -89px, 0)'); + } + if ($menu.hasClass('c-menu--left')) { + var x = $menuWidth + 2; + $popper.css('transform', 'translate3d(' + -x + 'px, -89px, 0)'); + } + if ($menu.hasClass('c-menu--up')) { + var x = $width / 2 - $menuWidth / 2; + var y = $menu.outerHeight() + $this.outerHeight() + 2; + $popper.css('transform', 'translate3d(' + x + 'px, ' + -y + 'px, 0)'); + } + if ($menu.hasClass('c-menu--down')) { + var x = $width / 2 - $menuWidth / 2; + $popper.css('transform', 'translate3d(' + x + 'px, 0, 0)'); + } if ($menu.hasClass('is-open')) { $(document).trigger('click'); @@ -34,10 +62,15 @@ $(document).ready(function() { }); $(document).click(function() { - $('.c-menu').removeClass('is-open').each(function() { - this.offsetHeight; // trigger reflow - }).attr('aria-hidden', true); + $('.c-menu') + .removeClass('is-open') + .each(function() { + this.offsetHeight; // trigger reflow + }) + .attr('aria-hidden', true); $('.js-menu').removeClass('is-active'); - $('.js-menu').children('.c-btn__icon').removeClass('is-rotated'); + $('.js-menu') + .children('.c-btn__icon') + .removeClass('is-rotated'); }); }); diff --git a/packages/menus/src/_keyframes.css b/packages/menus/src/_keyframes.css index 05039109..dc2b1437 100644 --- a/packages/menus/src/_keyframes.css +++ b/packages/menus/src/_keyframes.css @@ -5,11 +5,11 @@ @keyframes zd-menu--up-open { 0% { - margin-bottom: var(--zd-menu-open-margin); + bottom: var(--zd-menu-open-margin); } 100% { - margin-bottom: 0; + bottom: 0; } } @@ -21,11 +21,11 @@ @keyframes zd-menu--right-open { 0% { - margin-left: var(--zd-menu-open-margin); + left: var(--zd-menu-open-margin); } 100% { - margin-left: 0; + left: 0; } } @@ -37,11 +37,11 @@ @keyframes zd-menu--down-open { 0% { - margin-top: var(--zd-menu-open-margin); + top: var(--zd-menu-open-margin); } 100% { - margin-top: 0; + top: 0; } } @@ -53,11 +53,11 @@ @keyframes zd-menu--left-open { 0% { - margin-right: var(--zd-menu-open-margin); + right: var(--zd-menu-open-margin); } 100% { - margin-right: 0; + right: 0; } } From f8f057d0ddb3bd6599440aa36b5d402f3a2a7efc Mon Sep 17 00:00:00 2001 From: Ryan Seddon Date: Tue, 18 Dec 2018 11:31:02 +1100 Subject: [PATCH 2/5] Update all menu usage in demos to work correctly with new changes --- demo/arrows/index.html | 35 +++--- demo/buttons/index.html | 46 ++++--- demo/forms/checkbox/index.html | 71 ++++++----- demo/forms/range/index.html | 79 ++++++------ demo/forms/text/index.html | 87 +++++++------ demo/index.html | 35 ++++-- demo/menus/index.html | 90 +++++++------ demo/pagination/index.html | 36 +++--- demo/tables/index.html | 222 +++++++++++++++++++-------------- demo/tabs/index.html | 36 +++--- demo/tags/index.html | 35 +++--- 11 files changed, 438 insertions(+), 334 deletions(-) diff --git a/demo/arrows/index.html b/demo/arrows/index.html index becbbea8..ddceb7fe 100644 --- a/demo/arrows/index.html +++ b/demo/arrows/index.html @@ -19,6 +19,11 @@ .c-arrow.u-visibility-visible:before, .c-arrow.u-visibility-visible:after { display: inline-block !important; } .u-z-index-0 { z-index: 0 !important; } + + .menu-container { + transform: translateZ(0); + position: absolute; + } @@ -45,20 +50,22 @@ - +
+ +
diff --git a/demo/buttons/index.html b/demo/buttons/index.html index 323d3999..5fa9e057 100644 --- a/demo/buttons/index.html +++ b/demo/buttons/index.html @@ -16,6 +16,16 @@ +
@@ -41,20 +51,22 @@ - +
+ +
@@ -220,13 +232,13 @@

Groups

-
- diff --git a/demo/forms/range/index.html b/demo/forms/range/index.html index ec1f84fa..39149b96 100644 --- a/demo/forms/range/index.html +++ b/demo/forms/range/index.html @@ -17,6 +17,11 @@ @@ -43,47 +48,49 @@ - + + +
diff --git a/demo/forms/text/index.html b/demo/forms/text/index.html index a4736832..925a15d0 100644 --- a/demo/forms/text/index.html +++ b/demo/forms/text/index.html @@ -19,6 +19,11 @@ @@ -45,53 +50,55 @@ - + + +
diff --git a/demo/index.html b/demo/index.html index 046522cd..b5160da0 100644 --- a/demo/index.html +++ b/demo/index.html @@ -19,6 +19,17 @@ +