Skip to content

Commit

Permalink
Add CSS variable storage & usage in settings.
Browse files Browse the repository at this point in the history
  • Loading branch information
@joedolson
joedolson committed Dec 23, 2023
1 parent effc385 commit 8ef0fe9
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 18 deletions.
38 changes: 21 additions & 17 deletions src/css/mt-cart.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,20 @@
}

.mt-message {
background: #f0f0fa;
color: #333;
background: var(--mt-message-bg);
color: var(--mt-text-color);
padding: .75em 1em !important;
margin-bottom: .5em;
font-size: 1.1em;
border: 2px solid;
}

.mt-message.success {
border-color: green;
border-color: var(--mt-success-border);
}

.mt-message.error {
border-color: red;
border-color: var(--mt-error-border);
}

.mt-payment-button {
Expand All @@ -46,6 +46,10 @@

.ticket-orders fieldset {
margin: 1em 0;
border-radius: 8px;
background: var(--mt-order-background);
box-shadow: 4px 4px 4px var(--mt-order-shadow);
border-width: 1px;
}

.tickets-remaining.hiding, .hiding .tickets-remaining {
Expand Down Expand Up @@ -189,11 +193,11 @@ button[name="mt_add_to_cart"] img {

.mt-payment-form legend {
font-weight: 700;
padding: .25em 0;
padding: .5rem 0;
}

.gateway-selector {
padding: 1em 0;
padding: 1rem 0;
}

.gateway-selector ul {
Expand All @@ -202,8 +206,8 @@ button[name="mt_add_to_cart"] img {
}

.gateway-selector li {
margin: 0 .25em 0 0 !important;
padding: .25em !important;
margin: 0 .25rem 0 0 !important;
padding: .25rem !important;
display: inline-block !important;
list-style-type: none !important;
background: rgba(0, 0, 0, .075);
Expand Down Expand Up @@ -240,7 +244,7 @@ button[name="mt_add_to_cart"] img {

.mt_cart .wp-post-image {
float: left;
margin-right: .5em;
margin-right: .5rem;
}

.mt-update-column button {
Expand All @@ -249,7 +253,7 @@ button[name="mt_add_to_cart"] img {
}

.mt_purchase_path {
margin-bottom: 1em;
margin-bottom: 1rem;
}

.mt_purchase_path {
Expand All @@ -259,8 +263,8 @@ button[name="mt_add_to_cart"] img {
}

.mt_purchase_path span {
padding: .5em;
background: rgba( 255,255,255,.7 );
padding: .5rem;
background: rgba( 255, 255, 255, .7 );
border-bottom: 4px solid transparent;
}

Expand Down Expand Up @@ -318,7 +322,7 @@ button[name="mt_add_to_cart"] img {

.mt_email_check .ok {
color: #f2f2f2;
background: #217e21;
background: var(--mt-success-border);
}

.mt-shipping-address label {
Expand All @@ -328,7 +332,7 @@ button[name="mt_add_to_cart"] img {
.mt_email_check .notemail,
.mt_email_check .mismatch {
color: #f2f2f2;
background: #712121;
background: var(--mt-error-border);
}

.mt-update-buttons {
Expand Down Expand Up @@ -376,8 +380,8 @@ input[name="mt_submit"]:disabled {
position:absolute;
left: 0;
width: 100%;
background: #fefefe;
color: #333;
background: var(--mt-order-background);
color: var(--mt-text-color);
padding: 2rem;
box-shadow: 3px 3px 3px #ccc;
}
Expand Down Expand Up @@ -419,7 +423,7 @@ only screen and (max-width: 760px),

.mt_cart td, .mt_cart th {
border: none;
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--mt-order-shadow);
position: relative;
padding-left: 30% !important;
}
Expand Down
5 changes: 5 additions & 0 deletions src/css/my-tickets.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@
overflow: visible !important
}

.mt-new-variable {
display: flex;
gap: 12px;
}

.admin-tickets li .controls {
display: grid;
grid-template-columns: auto auto auto;
Expand Down
59 changes: 58 additions & 1 deletion src/mt-settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,32 @@ function mt_update_settings( $post ) {
$mt_post_types = ( isset( $post['mt_post_types'] ) ) ? $post['mt_post_types'] : array();
array_push( $mt_post_types, 'mc-events' );

$styles = mt_get_settings( 'style_vars' );
if ( ! empty( $_POST['style_vars'] ) ) {
if ( isset( $_POST['new_style_var'] ) ) {
$key = sanitize_text_field( $_POST['new_style_var']['key'] );
$val = sanitize_text_field( $_POST['new_style_var']['val'] );
if ( $key && $val ) {
if ( 0 !== strpos( $key, '--' ) ) {
$key = '--' . $key;
}
$styles[ $key ] = $val;
}
}
foreach ( $_POST['style_vars'] as $key => $value ) {
if ( '' !== trim( $value ) ) {
$styles[ $key ] = sanitize_text_field( $value );
}
}
if ( isset( $_POST['delete_var'] ) ) {
$delete = map_deep( $_POST['delete_var'], 'sanitize_text_field' );
foreach ( $delete as $del ) {
unset( $styles[ $del ] );
}
}
mc_update_option( 'style_vars', $styles );
}

$messages = $_POST['mt_messages'];
$settings = apply_filters(
'mt_update_settings',
Expand All @@ -41,6 +67,7 @@ function mt_update_settings( $post ) {
'mt_to' => $mt_to,
'mt_from' => $mt_from,
'mt_html_email' => $mt_html_email,
'style_vars' => $styles,
),
$_POST
);
Expand Down Expand Up @@ -314,7 +341,37 @@ function mt_settings() {
?>
</em></p>
</div>

<fieldset class="mt-css-variables">
<legend><?php esc_html_e( 'CSS Variables', 'my-tickets' ); ?></legend>
<?php
$output = '';
$styles = mt_get_settings( 'style_vars' );
$styles = mt_style_variables( $styles );
foreach ( $styles as $var => $style ) {
$var_id = 'mt' . sanitize_key( $var );
if ( ! in_array( $var, array_keys( mt_style_variables() ), true ) ) {
// Translators: CSS variable name.
$delete = " <input type='checkbox' id='delete_var_$var_id' name='delete_var[]' value='" . esc_attr( $var ) . "' /><label for='delete_var_$var_id'>" . sprintf( esc_html__( 'Delete %s', 'my-tickets' ), '<span class="screen-reader-text">' . $var . '</span>' ) . '</label>';
} else {
$delete = '';
}
$output .= "<li><label for='$var_id'>" . esc_html( $var ) . "</label><br /><input class='mt-color-input' type='text' id='$var_id' data-variable='$var' name='style_vars[$var]' value='" . esc_attr( $style ) . "' />$delete</li>";
}
if ( $output ) {
echo wp_kses( "<ul class='checkboxes'>$output</ul>", mt_kses_elements() );
}
?>
<div class="mt-new-variable">
<p>
<label for='new_style_var_key'><?php esc_html_e( 'New variable', 'my-tickets' ); ?></label><br />
<input type='text' name='new_style_var[key]' id='new_style_var_key' />
</p>
<p>
<label for='new_style_var_val'><?php esc_html_e( 'Value', 'my-tickets' ); ?></label><br />
<input type='text' class="mt-color-input" name='new_style_var[val]' id='new_style_var_val' />
</p>
</div>
</fieldset>
<p><input type="submit" name="mt-submit-settings" class="button-primary" value="<?php _e( 'Save Settings', 'my-tickets' ); ?>"/></p>
</form>
</div>
Expand Down
51 changes: 51 additions & 0 deletions src/my-tickets.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -421,6 +421,8 @@ function mt_public_enqueue_scripts() {
wp_enqueue_script( 'mt.payment', plugins_url( 'js/jquery.payment.js', __FILE__ ), array( 'jquery' ), $version );
wp_enqueue_script( 'mt.public', plugins_url( 'js/jquery.public.js', __FILE__ ), array( 'jquery' ), $version );
wp_enqueue_style( 'mt-styles', $ticket_styles, array( 'dashicons' ), $version );
wp_add_inline_style( 'mt-styles', mt_generate_css() );

wp_localize_script(
'mt.public',
'mt_ajax',
Expand Down Expand Up @@ -689,6 +691,7 @@ function mt_default_settings() {
'mt_expiration' => '',
'mt_display_remaining' => 'proportion',
'mt_show_closed' => 'false',
'style_vars' => mt_style_variables(),
);

return $defaults;
Expand Down Expand Up @@ -1286,3 +1289,51 @@ function mt_kses_elements() {

return $elements;
}

/**
* Ensure that expected style variables are always present.
*
* @param array $styles Array of style variables saved in settings.
*
* @return array
*/
function mt_style_variables( $styles = array() ) {
$core_styles = array(
'--mt-order-background' => '#f6f7f7',
'--mt-order-shadow' => '#dcdcde',
'--mt-error-color' => '#b32d2e',
'--mt-success-color' => '#007017',
'--mt-message-bg' => '#f6f7f7',
'--mt-text-color' => '#2c3338',
);
foreach ( $core_styles as $key => $value ) {
if ( ! isset( $styles[ $key ] ) ) {
$styles[ $key ] = $value;
}
}

return $styles;
}

/**
* Generate ticketing CSS output.
*/
function mt_generate_css() {
$styles = (array) mt_get_settings( 'style_vars' );
$styles = mt_style_variables( $styles );
$style_vars = '';
foreach ( $styles as $key => $var ) {
if ( $var ) {
$style_vars .= sanitize_key( $key ) . ': ' . $var . '; ';
}
}
if ( '' !== $style_vars ) {
$style_vars = '.my-tickets {' . $style_vars . '}';
}

$css = "
/* Styles by My Tickets - Joseph C Dolson https://www.joedolson.com/ */
$style_vars";

return $css;
}

0 comments on commit 8ef0fe9

Please sign in to comment.