Skip to content

Commit

Permalink
code edit - massive refactor
Browse files Browse the repository at this point in the history
  • Loading branch information
@anselmbradford
anselmbradford committed Feb 9, 2016
1 parent 1c59728 commit dd16fd5
Show file tree
Hide file tree
Showing 4 changed files with 125 additions and 91 deletions.
172 changes: 101 additions & 71 deletions cfgov/unprocessed/css/molecules/global-search.less
View file
Expand Up @@ -96,20 +96,6 @@

.js .m-global-search {

// Absolute position when there is a flyout at mobile/tablet sizes.
.respond-to-max( @bp-sm-max, {
// Make the height large so that the overflowing flyout can be hidden,
// but not get cropped when it's visible.
height: 500px;
width: 100%;
position: absolute;
top: 0;
overflow-x: hidden;
// TODO: This will be ignored in IE8-10,
// leading to the overflow preventing clicks on the links.
pointer-events: none;
} );

&_trigger {
height: unit( 45px / 18px, em );
min-width: unit( 45px / 18px, em );
Expand All @@ -134,21 +120,50 @@
content: @cf-icon-search;
font-size: unit( 20px / 18px, em );
}
}

// Show "Search" text in trigger at tablet sizes.
.respond-to-min( @bp-sm-min {
&-label:before {
.webfont-medium();
content: 'Search';
&_content {
padding-top: unit( @grid_gutter-width / 4 / @base-font-size-px, em );

transform: translateX( 100% );
transition: transform 0.25s ease-out;

&[aria-expanded="true"] {
display: block;

transform: translateX( 0 );
}

&-suggestions {
display: none;

.h5,
.list {
display: inline-block;
}
} );
}
}

// Tablet size and below.
.respond-to-max( @bp-sm-max, {
// Absolute position when there is a flyout at mobile/tablet sizes.
// Make the height large so that the overflowing flyout can be hidden,
// but not get cropped when it's visible.
height: 500px;
width: 100%;
position: absolute;
top: 0;
overflow-x: hidden;
// TODO: This will be ignored in IE8-10,
// leading to the overflow preventing clicks on the links.
pointer-events: none;

// Only show flyout and close trigger at tablet/mobile sizes.
.respond-to-max( @bp-sm-max, {
&_trigger {
height: unit( 60px / 18px, em );
min-width: unit( 60px / 18px, em );
padding-top: unit( @grid_gutter-width / 2 / 18px, em );
padding-bottom: unit( @grid_gutter-width / 2 / 18px, em );
display: block;

&[aria-expanded="true"] {
background: @gray-10;
Expand All @@ -158,42 +173,10 @@
.cf-icon:before {
content: @cf-icon-delete;
}

}
} );

// Show "Close" text in trigger at tablet sizes.
.respond-to-range( @bp-sm-min, @bp-med-min, {
&[aria-expanded="true"] {
.m-global-search_trigger-label:before {
content: 'Close';
}
}
} );

.respond-to-min( @bp-med-min {
&[aria-expanded="true"] {
display: none;
}
} );
}

&_content {

.respond-to-min( @bp-med-min {
display: none;
} );

padding-top: unit( @grid_gutter-width / 4 / @base-font-size-px, em );

&[aria-expanded="true"] {
display: block;

transform: translateX( 0 );
}

// Create flyout at table/mobile size.
.respond-to-max( @bp-sm-max, {
&_content {
box-sizing: border-box;
width: 100%;

Expand All @@ -208,9 +191,6 @@
border-bottom: 1px solid @gray-40;
pointer-events: auto;

transform: translateX( 100% );
transition: transform 0.25s ease-out;

&-form {
padding-top: @margin__em;
padding-left: @margin_half__em;
Expand All @@ -219,26 +199,76 @@
}

.u-drop-shadow-after();
} );
}
} );

&-suggestions {
display: none;
// Tablet size and above.
.respond-to-min( @bp-sm-min {
&_trigger {
// Show "Search" text in trigger at tablet sizes.
&-label:before {
.webfont-medium();
content: 'Search';
}
}
} );

// Only show search suggestions at tablet size.
.respond-to-range( @bp-sm-min, @bp-sm-max, {
& {
display: block;
// Tablet size only.
.respond-to-range( @bp-sm-min, @bp-med-min, {
// Show "Close" text in trigger at tablet sizes.
&_trigger {
&[aria-expanded="true"] {
.m-global-search_trigger-label:before {
content: 'Close';
}
} );

.h5,
.list {
display: inline-block;
}
}
}

// Only show search suggestions at tablet size.
&_content-suggestions {
display: block;
}
} );

// Desktop size.
.respond-to-min( @bp-med-min {
overflow: hidden;

// Match height of Search button at desktop size.
// Used to make overflow cover one line only.
// 1px offset is to expand overflow area by 1px
// so that the focus outline is not cropped.
max-height: 47px;
position: relative;
left: -1px;
top: -1px;

&_trigger,
&_trigger:focus,
{
position: relative;
top: 1px;
}
&_content {
position: relative;
left: 1px;
}


&_trigger {
&[aria-expanded="true"] {
display: none;
}
}

&_content {
padding-right: @margin_half__em;
}

} );

// TODO: Move these styles to cf-enhancements/cf-forms.
// Mobile size.
.respond-to-min( 480px, {
&_content-form {
// Attach button to input.
Expand Down
4 changes: 0 additions & 4 deletions cfgov/unprocessed/css/organisms/header.less
View file
Expand Up @@ -82,10 +82,6 @@

& > .m-global-search {
float: right;

.m-global-search_content {
padding-right: @margin_half__em;
}
}
} );

Expand Down
11 changes: 9 additions & 2 deletions cfgov/unprocessed/js/modules/FlyoutMenu.js
View file
Expand Up @@ -25,6 +25,7 @@ function FlyoutMenu( element, triggerSel, contentSel, altTriggerSel ) {
var _altTriggerDom = element.querySelector( altTriggerSel );

var _transitionEndEvent = _getTransitionEndEvent( _contentDom );
var _isAnimating = false;

// Needed to add and remove events to transitions.
var _expandEndBinded = _expandEnd.bind( this );
Expand Down Expand Up @@ -63,9 +64,11 @@ function FlyoutMenu( element, triggerSel, contentSel, altTriggerSel ) {
* @returns {Object} A FlyoutMenu instance.
*/
function expand() {
if ( !_isExpanded ) {
if ( !_isExpanded && !_isAnimating ) {
this.dispatchEvent( 'toggle', { target: this } );
this.dispatchEvent( 'expandBegin', { target: this } );
_isExpanded = true;
_isAnimating = true;
// If transition is not supported, call handler directly (IE9/OperaMini).
if ( _transitionEndEvent ) {
_contentDom.addEventListener( _transitionEndEvent, _expandEndBinded );
Expand All @@ -84,9 +87,11 @@ function FlyoutMenu( element, triggerSel, contentSel, altTriggerSel ) {
* @returns {Object} A FlyoutMenu instance.
*/
function collapse() {
if ( _isExpanded ) {
if ( _isExpanded && !_isAnimating ) {
this.dispatchEvent( 'toggle', { target: this } );
this.dispatchEvent( 'collapseBegin', { target: this } );
_isExpanded = false;
_isAnimating = true;
// If transition is not supported, call handler directly (IE9/OperaMini).
if ( _transitionEndEvent ) {
_contentDom.addEventListener( _transitionEndEvent, _collapseEndBinded );
Expand All @@ -105,6 +110,7 @@ function FlyoutMenu( element, triggerSel, contentSel, altTriggerSel ) {
* Expand animation has completed.
*/
function _expandEnd() {
_isAnimating = false;
_contentDom.removeEventListener( _transitionEndEvent, _expandEndBinded );
this.dispatchEvent( 'expandEnd', { target: this } );
}
Expand All @@ -113,6 +119,7 @@ function FlyoutMenu( element, triggerSel, contentSel, altTriggerSel ) {
* Collapse animation has completed.
*/
function _collapseEnd() {
_isAnimating = false;
_contentDom.removeEventListener( _transitionEndEvent, _collapseEndBinded );
this.dispatchEvent( 'collapseEnd', { target: this } );
}
Expand Down
29 changes: 15 additions & 14 deletions cfgov/unprocessed/js/molecules/GlobalSearch.js
View file
Expand Up @@ -25,8 +25,10 @@ function GlobalSearch( element ) { // eslint-disable-line max-statements, no-inl

var _dom =
atomicCheckers.validateDomElement( element, BASE_CLASS, 'GlobalSearch' );
var _triggerSel = '.' + BASE_CLASS + '_trigger';
var _triggerDom = _dom.querySelector( _triggerSel );
var _flyoutMenu = new FlyoutMenu( _dom,
'.' + BASE_CLASS + '_trigger',
_triggerSel,
'.' + BASE_CLASS + '_content' ).init();
var _contentDom = _dom.querySelector( '.' + BASE_CLASS + '_content' );
var _searchInputDom;
Expand All @@ -49,8 +51,8 @@ function GlobalSearch( element ) { // eslint-disable-line max-statements, no-inl
_searchBtnDom = _contentDom.querySelector( searchBtnSel );
_clearBtnDom = _contentDom.querySelector( clearBtnSel );

_flyoutMenu.addEventListener( 'triggerClick',
_triggerClicked.bind( this ) );
_flyoutMenu.addEventListener( 'toggle',
_handleToggle.bind( this ) );
_flyoutMenu.addEventListener( 'expandBegin', _handleExpandBegin );
_flyoutMenu.addEventListener( 'collapseBegin', _handleCollapseBegin );
_flyoutMenu.addEventListener( 'collapseEnd', _handleCollapseEnd );
Expand Down Expand Up @@ -138,25 +140,21 @@ function GlobalSearch( element ) { // eslint-disable-line max-statements, no-inl
}

/**
* Event handler for when the search input trigger is clicked,
* Event handler for when the search input flyout is toggled,
* which opens/closes the search input.
*/
function _triggerClicked() {
this.dispatchEvent( 'triggerClick', { target: event.target } );
function _handleToggle() {
this.dispatchEvent( 'toggle', { target: this } );
}

/**
* Event handler for when FlyoutMenu expand transition begins.
* Use this to perform post-expandBegin actions.
*/
function _handleExpandBegin() {
if ( _isInDesktop() ) { _triggerDom.classList.add( 'u-hidden' ); }
_contentDom.classList.remove( 'u-invisible' );

// TODO: Refactor to remove totally infuriating
// bug where select() won't fire without timeout.
setTimeout( function(){
_searchInputDom.select()
}, 0 );
_searchInputDom.select()

document.body.addEventListener( 'mousedown', _handleBodyClick );
}
Expand All @@ -166,6 +164,7 @@ function GlobalSearch( element ) { // eslint-disable-line max-statements, no-inl
* Use this to perform post-collapseBegin actions.
*/
function _handleCollapseBegin() {
_triggerDom.classList.remove( 'u-hidden' );
document.body.removeEventListener( 'mousedown', _handleBodyClick );
}

Expand All @@ -174,6 +173,10 @@ function GlobalSearch( element ) { // eslint-disable-line max-statements, no-inl
* Use this to perform post-collapseEnd actions.
*/
function _handleCollapseEnd() {
// TODO: When tabbing is used to collapse the search flyout
// it will not animate with the below line.
// Investigate why this is the case for tab key
// but not with mouse clicks.
_contentDom.classList.add( 'u-invisible' );
}

Expand All @@ -183,7 +186,6 @@ function GlobalSearch( element ) { // eslint-disable-line max-statements, no-inl
*/
function expand() {
_flyoutMenu.expand();
_handleExpandBegin();

return this;
}
Expand All @@ -194,7 +196,6 @@ function GlobalSearch( element ) { // eslint-disable-line max-statements, no-inl
*/
function collapse() {
_flyoutMenu.collapse();
_handleCollapseBegin();

return this;
}
Expand Down

0 comments on commit dd16fd5

Please sign in to comment.