Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve default appearance of descriptions so they toggle on focus and support HTML.

This commit is contained in:
Mike Jolley 2018-04-05 16:56:00 +01:00
parent 3a6c3e002b
commit 3bf567279b
9 changed files with 122 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/twenty-seventeen-rtl.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/twenty-seventeen.css
View File

File diff suppressed because one or more lines are too long

34
assets/css/twenty-seventeen.scss
View File

@ -943,6 +943,40 @@ button.pswp__button--zoom:hover {
}
.woocommerce-checkout {
.woocommerce-input-wrapper {
.description {
background: royalblue;
color: #fff;
border-radius: 3px;
padding: 1em;
margin: .5em 0 0;
clear: both;
display: none;
position: relative;
a {
color: #fff;
text-decoration: underline;
border: 0;
box-shadow: none;
}
&:before {
left: 50%;
top: 0%;
margin-top: -4px;
transform: translatex(-50%) rotate(180deg);
content: "";
position: absolute;
border-width: 4px 6px 0 6px;
border-style: solid;
border-color: royalblue transparent transparent transparent;
z-index: 100;
display: block;
}
}
}
.select2-choice,
.select2-choice:hover {
box-shadow: none !important;

2
assets/css/woocommerce-rtl.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/woocommerce.css
View File

File diff suppressed because one or more lines are too long

34
assets/css/woocommerce.scss
View File

@ -1276,6 +1276,40 @@ p.demo_store,
display: inline;
}
.woocommerce-input-wrapper {
.description {
background: #1e85be;
color: #fff;
border-radius: 3px;
padding: 1em;
margin: .5em 0 0;
clear: both;
display: none;
position: relative;
a {
color: #fff;
text-decoration: underline;
border: 0;
box-shadow: none;
}
&:before {
left: 50%;
top: 0%;
margin-top: -4px;
transform: translatex(-50%) rotate(180deg);
content: "";
position: absolute;
border-width: 4px 6px 0 6px;
border-style: solid;
border-color: #1e85be transparent transparent transparent;
z-index: 100;
display: block;
}
}
}
select {
cursor: pointer;
margin: 0;

45
assets/js/frontend/woocommerce.js
View File

@ -15,15 +15,52 @@ jQuery( function( $ ) {
});
// Set a cookie and hide the store notice when the dismiss button is clicked
jQuery( '.woocommerce-store-notice__dismiss-link' ).click( function() {
$( '.woocommerce-store-notice__dismiss-link' ).click( function() {
Cookies.set( 'store_notice', 'hidden', { path: '/' } );
jQuery( '.woocommerce-store-notice' ).hide();
$( '.woocommerce-store-notice' ).hide();
});
// Check the value of that cookie and show/hide the notice accordingly
if ( 'hidden' === Cookies.get( 'store_notice' ) ) {
jQuery( '.woocommerce-store-notice' ).hide();
$( '.woocommerce-store-notice' ).hide();
} else {
jQuery( '.woocommerce-store-notice' ).show();
$( '.woocommerce-store-notice' ).show();
}
// Make form field descriptions toggle on focus.
$( document.body ).on( 'click', function() {
$( '.woocommerce-input-wrapper span.description:visible' ).prop( 'aria-hidden', true ).slideUp( 250 );
} );
$( '.woocommerce-input-wrapper' ).on( 'click', function( event ) {
event.stopPropagation();
} );
$( '.woocommerce-input-wrapper :input' )
.on( 'keydown', function( event ) {
var input = $( this ),
parent = input.parent(),
description = parent.find( 'span.description' );
if ( 27 === event.which && description.length && description.is( ':visible' ) ) {
description.prop( 'aria-hidden', true ).slideUp( 250 );
event.preventDefault();
return false;
}
} )
.on( 'focus', function() {
var input = $( this ),
parent = input.parent(),
description = parent.find( 'span.description' );
parent.addClass( 'currentTarget' );
$( '.woocommerce-input-wrapper:not(.currentTarget) span.description:visible' ).prop( 'aria-hidden', true ).slideUp( 250 );
if ( description.length && description.is( ':hidden' ) ) {
description.prop( 'aria-hidden', false ).slideDown( 250 );
}
parent.removeClass( 'currentTarget' );
} );
});

2
assets/js/frontend/woocommerce.min.js vendored
View File

@ -1 +1 @@
jQuery(function(o){o(".woocommerce-ordering").on("change","select.orderby",function(){o(this).closest("form").submit()}),o("input.qty:not(.product-quantity input.qty)").each(function(){var e=parseFloat(o(this).attr("min"));e>=0&&parseFloat(o(this).val())<e&&o(this).val(e)}),jQuery(".woocommerce-store-notice__dismiss-link").click(function(){Cookies.set("store_notice","hidden",{path:"/"}),jQuery(".woocommerce-store-notice").hide()}),"hidden"===Cookies.get("store_notice")?jQuery(".woocommerce-store-notice").hide():jQuery(".woocommerce-store-notice").show()});
jQuery(function(e){e(".woocommerce-ordering").on("change","select.orderby",function(){e(this).closest("form").submit()}),e("input.qty:not(.product-quantity input.qty)").each(function(){var o=parseFloat(e(this).attr("min"));o>=0&&parseFloat(e(this).val())<o&&e(this).val(o)}),e(".woocommerce-store-notice__dismiss-link").click(function(){Cookies.set("store_notice","hidden",{path:"/"}),e(".woocommerce-store-notice").hide()}),"hidden"===Cookies.get("store_notice")?e(".woocommerce-store-notice").hide():e(".woocommerce-store-notice").show(),e(document.body).on("click",function(){e(".woocommerce-input-wrapper span.description:visible").prop("aria-hidden",!0).slideUp(250)}),e(".woocommerce-input-wrapper").on("click",function(e){e.stopPropagation()}),e(".woocommerce-input-wrapper :input").on("keydown",function(o){var i=e(this).parent().find("span.description");if(27===o.which&&i.length&&i.is(":visible"))return i.prop("aria-hidden",!0).slideUp(250),o.preventDefault(),!1}).on("focus",function(){var o=e(this).parent(),i=o.find("span.description");o.addClass("currentTarget"),e(".woocommerce-input-wrapper:not(.currentTarget) span.description:visible").prop("aria-hidden",!0).slideUp(250),i.length&&i.is(":hidden")&&i.prop("aria-hidden",!1).slideDown(250),o.removeClass("currentTarget")})});

10
includes/wc-template-functions.php
View File

@ -2187,6 +2187,10 @@ if ( ! function_exists( 'woocommerce_form_field' ) ) {
$args['custom_attributes']['autofocus'] = 'autofocus';
}
if ( $args['description'] ) {
$args['custom_attributes']['aria-describedby'] = $args['id'] . '-description';
}
if ( ! empty( $args['custom_attributes'] ) && is_array( $args['custom_attributes'] ) ) {
foreach ( $args['custom_attributes'] as $attribute => $attribute_value ) {
$custom_attributes[] = esc_attr( $attribute ) . '="' . esc_attr( $attribute_value ) . '"';
@ -2324,12 +2328,14 @@ if ( ! function_exists( 'woocommerce_form_field' ) ) {
$field_html .= '<label for="' . esc_attr( $label_id ) . '" class="' . esc_attr( implode( ' ', $args['label_class'] ) ) . '">' . $args['label'] . $required . '</label>';
}
$field_html .= $field;
$field_html .= '<span class="woocommerce-input-wrapper">' . $field;
if ( $args['description'] ) {
$field_html .= '<span class="description">' . esc_html( $args['description'] ) . '</span>';
$field_html .= '<span class="description" id="' . esc_attr( $args['id'] ) . '-description" aria-hidden="true">' . wp_kses_post( $args['description'] ) . '</span>';
}
$field_html .= '</span>';
$container_class = esc_attr( implode( ' ', $args['class'] ) );
$container_id = esc_attr( $args['id'] ) . '_field';
$field = sprintf( $field_container, $container_class, $container_id, $field_html );