← All changes
|
vendor/ayecode/wp-ayecode-ui/includes/ayecode-ui-settings.php
+127
-54
1.2.73
→
1.2.75
View file →
| @@ -34,9 +34,9 @@ | ||
| 34 | 34 | * Class version version. |
| 35 | 35 | * |
| 36 | 36 | * @var string |
| 37 | 37 | */ |
| 38 | - public $version = '0.2.53'; | |
| 38 | + public $version = '0.2.56'; | |
| 39 | 39 | |
| 40 | 40 | /** |
| 41 | 41 | * Class textdomain. |
| 42 | 42 | * |
| @@ -151,24 +151,25 @@ | ||
| 151 | 151 | /** |
| 152 | 152 | * Setup some constants. |
| 153 | 153 | */ |
| 154 | 154 | public function constants(){ |
| 155 | - define( 'AUI_PRIMARY_COLOR_ORIGINAL', "#1e73be" ); | |
| 156 | - define( 'AUI_SECONDARY_COLOR_ORIGINAL', '#6c757d' ); | |
| 157 | - define( 'AUI_INFO_COLOR_ORIGINAL', '#17a2b8' ); | |
| 158 | - define( 'AUI_WARNING_COLOR_ORIGINAL', '#ffc107' ); | |
| 159 | - define( 'AUI_DANGER_COLOR_ORIGINAL', '#dc3545' ); | |
| 160 | - define( 'AUI_SUCCESS_COLOR_ORIGINAL', '#44c553' ); | |
| 161 | - define( 'AUI_LIGHT_COLOR_ORIGINAL', '#f8f9fa' ); | |
| 162 | - define( 'AUI_DARK_COLOR_ORIGINAL', '#343a40' ); | |
| 163 | - define( 'AUI_WHITE_COLOR_ORIGINAL', '#fff' ); | |
| 164 | - define( 'AUI_PURPLE_COLOR_ORIGINAL', '#ad6edd' ); | |
| 165 | - define( 'AUI_SALMON_COLOR_ORIGINAL', '#ff977a' ); | |
| 166 | - define( 'AUI_CYAN_COLOR_ORIGINAL', '#35bdff' ); | |
| 167 | - define( 'AUI_GRAY_COLOR_ORIGINAL', '#ced4da' ); | |
| 168 | - define( 'AUI_INDIGO_COLOR_ORIGINAL', '#502c6c' ); | |
| 169 | - define( 'AUI_ORANGE_COLOR_ORIGINAL', '#orange' ); | |
| 170 | - define( 'AUI_BLACK_COLOR_ORIGINAL', '#000' ); | |
| 155 | + // Another copy of this package may have defined these already. | |
| 156 | + defined( 'AUI_PRIMARY_COLOR_ORIGINAL' ) || define( 'AUI_PRIMARY_COLOR_ORIGINAL', "#1e73be" ); | |
| 157 | + defined( 'AUI_SECONDARY_COLOR_ORIGINAL' ) || define( 'AUI_SECONDARY_COLOR_ORIGINAL', '#6c757d' ); | |
| 158 | + defined( 'AUI_INFO_COLOR_ORIGINAL' ) || define( 'AUI_INFO_COLOR_ORIGINAL', '#17a2b8' ); | |
| 159 | + defined( 'AUI_WARNING_COLOR_ORIGINAL' ) || define( 'AUI_WARNING_COLOR_ORIGINAL', '#ffc107' ); | |
| 160 | + defined( 'AUI_DANGER_COLOR_ORIGINAL' ) || define( 'AUI_DANGER_COLOR_ORIGINAL', '#dc3545' ); | |
| 161 | + defined( 'AUI_SUCCESS_COLOR_ORIGINAL' ) || define( 'AUI_SUCCESS_COLOR_ORIGINAL', '#44c553' ); | |
| 162 | + defined( 'AUI_LIGHT_COLOR_ORIGINAL' ) || define( 'AUI_LIGHT_COLOR_ORIGINAL', '#f8f9fa' ); | |
| 163 | + defined( 'AUI_DARK_COLOR_ORIGINAL' ) || define( 'AUI_DARK_COLOR_ORIGINAL', '#343a40' ); | |
| 164 | + defined( 'AUI_WHITE_COLOR_ORIGINAL' ) || define( 'AUI_WHITE_COLOR_ORIGINAL', '#fff' ); | |
| 165 | + defined( 'AUI_PURPLE_COLOR_ORIGINAL' ) || define( 'AUI_PURPLE_COLOR_ORIGINAL', '#ad6edd' ); | |
| 166 | + defined( 'AUI_SALMON_COLOR_ORIGINAL' ) || define( 'AUI_SALMON_COLOR_ORIGINAL', '#ff977a' ); | |
| 167 | + defined( 'AUI_CYAN_COLOR_ORIGINAL' ) || define( 'AUI_CYAN_COLOR_ORIGINAL', '#35bdff' ); | |
| 168 | + defined( 'AUI_GRAY_COLOR_ORIGINAL' ) || define( 'AUI_GRAY_COLOR_ORIGINAL', '#ced4da' ); | |
| 169 | + defined( 'AUI_INDIGO_COLOR_ORIGINAL' ) || define( 'AUI_INDIGO_COLOR_ORIGINAL', '#502c6c' ); | |
| 170 | + defined( 'AUI_ORANGE_COLOR_ORIGINAL' ) || define( 'AUI_ORANGE_COLOR_ORIGINAL', '#orange' ); | |
| 171 | + defined( 'AUI_BLACK_COLOR_ORIGINAL' ) || define( 'AUI_BLACK_COLOR_ORIGINAL', '#000' ); | |
| 171 | 172 | |
| 172 | 173 | if ( ! defined( 'AUI_PRIMARY_COLOR' ) ) { |
| 173 | 174 | define( 'AUI_PRIMARY_COLOR', AUI_PRIMARY_COLOR_ORIGINAL ); |
| 174 | 175 | } |
| @@ -744,41 +745,53 @@ | ||
| 744 | 745 | wp_enqueue_style( 'iconpicker' ); |
| 745 | 746 | wp_enqueue_script( 'iconpicker' ); |
| 746 | 747 | } |
| 747 | 748 | |
| 748 | - /** | |
| 749 | - * Get the url path to the current folder. | |
| 750 | - * | |
| 751 | - * This can be called very early, hence the need for the dynamic way of getting the URL. | |
| 752 | - * | |
| 753 | - * @since 0.2.31 changed to support edge cases like bitnami containers. | |
| 754 | - * @return string | |
| 755 | - */ | |
| 756 | - public function get_url() { | |
| 757 | - $content_dir = wp_normalize_path( untrailingslashit( WP_CONTENT_DIR ) ); | |
| 758 | - $content_url = untrailingslashit( WP_CONTENT_URL ); | |
| 749 | + /** | |
| 750 | + * Get the url path to the current folder. | |
| 751 | + * | |
| 752 | + * This can be called very early, hence the need for the dynamic way of getting the URL. | |
| 753 | + * | |
| 754 | + * @since 0.2.31 changed to support edge cases like bitnami containers. | |
| 755 | + * @return string | |
| 756 | + */ | |
| 757 | + public function get_url() { | |
| 758 | + $content_dir = wp_normalize_path( untrailingslashit( WP_CONTENT_DIR ) ); | |
| 759 | + $content_url = untrailingslashit( WP_CONTENT_URL ); | |
| 759 | 760 | |
| 760 | - // maybe Replace http:// to https://. | |
| 761 | - if ( strpos( $content_url, 'http://' ) === 0 && strpos( plugins_url(), 'https://' ) === 0 ) { | |
| 762 | - $content_url = str_replace( 'http://', 'https://', $content_url ); | |
| 763 | - } | |
| 761 | + // maybe Replace http:// to https://. | |
| 762 | + if ( strpos( $content_url, 'http://' ) === 0 && strpos( plugins_url(), 'https://' ) === 0 ) { | |
| 763 | + $content_url = str_replace( 'http://', 'https://', $content_url ); | |
| 764 | + } | |
| 764 | 765 | |
| 765 | - // First find where in the path our content directory starts | |
| 766 | - $content_basename = basename($content_dir); | |
| 767 | - $file_dir = str_replace( "/includes", "", wp_normalize_path( dirname( __FILE__ ) ) ); | |
| 766 | + // First find where in the path our content directory starts | |
| 767 | + $content_basename = basename($content_dir); | |
| 768 | + $file_dir = str_replace( "/includes", "", wp_normalize_path( dirname( __FILE__ ) ) ); | |
| 768 | 769 | |
| 769 | - // Find the relative path by matching from content directory name | |
| 770 | - $after_content = substr($file_dir, strpos($file_dir, '/' . $content_basename . '/') + strlen('/' . $content_basename . '/')); | |
| 770 | + // Find the relative path by matching from content directory name | |
| 771 | + $after_content = substr($file_dir, strpos($file_dir, '/' . $content_basename . '/') + strlen('/' . $content_basename . '/')); | |
| 771 | 772 | |
| 772 | - // Build URL using WP_CONTENT_URL and the relative path | |
| 773 | - $url = trailingslashit($content_url) . $after_content; | |
| 773 | + // Build URL using WP_CONTENT_URL and the relative path | |
| 774 | + $url = trailingslashit($content_url) . $after_content; | |
| 774 | 775 | |
| 775 | - // some hosts end up with /wp-content/wp-content/ | |
| 776 | - $url = str_replace( '/wp-content/wp-content/', '/wp-content/', $url ); | |
| 776 | + // some hosts end up with /wp-content/wp-content/ | |
| 777 | + $url = str_replace( '/wp-content/wp-content/', '/wp-content/', $url ); | |
| 777 | 778 | |
| 778 | - return trailingslashit($url); | |
| 779 | - } | |
| 779 | + /** | |
| 780 | + * Filters the URL to the AyeCode UI folder. | |
| 781 | + * | |
| 782 | + * Useful when the folder URL can't be worked out from its path, e.g. a symlinked plugin. | |
| 783 | + * | |
| 784 | + * @since 0.2.54 | |
| 785 | + * | |
| 786 | + * @param string $url The AyeCode UI folder URL. | |
| 787 | + * @param string $file_dir The AyeCode UI folder path. | |
| 788 | + */ | |
| 789 | + $url = apply_filters( 'ayecode_ui_url', $url, $file_dir ); | |
| 780 | 790 | |
| 791 | + return trailingslashit($url); | |
| 792 | + } | |
| 793 | + | |
| 781 | 794 | /** |
| 782 | 795 | * Get the url path to the current folder. |
| 783 | 796 | * @todo remove |
| 784 | 797 | * @return string |
| @@ -1346,8 +1359,15 @@ | ||
| 1346 | 1359 | return defined('AYECODE_UI_BS3_COMPAT') || defined('SVQ_THEME_VERSION') || defined('FUSION_BUILDER_VERSION'); |
| 1347 | 1360 | } |
| 1348 | 1361 | |
| 1349 | 1362 | public static function hex_to_rgb( $hex ) { |
| 1363 | + $hex = trim( (string) $hex ); | |
| 1364 | + | |
| 1365 | + // CSS variables can't be resolved to RGB server side. | |
| 1366 | + if ( $hex === '' || strpos( $hex, 'var(' ) !== false ) { | |
| 1367 | + return ''; | |
| 1368 | + } | |
| 1369 | + | |
| 1350 | 1370 | // Remove '#' if present |
| 1351 | 1371 | $hex = str_replace( '#', '', $hex ); |
| 1352 | 1372 | |
| 1353 | 1373 | // Check if input is RGB |
| @@ -1360,10 +1380,15 @@ | ||
| 1360 | 1380 | |
| 1361 | 1381 | return $rgb; |
| 1362 | 1382 | } |
| 1363 | 1383 | |
| 1364 | - // Convert 3-digit hex to 6-digit hex | |
| 1365 | - if ( strlen( $hex ) == 3 ) { | |
| 1384 | + // Only 3, 4, 6 or 8 digit hex can be converted, anything else (named colours, hsl() etc.) would give a wrong value. | |
| 1385 | + if ( ! preg_match( '/^([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i', $hex ) ) { | |
| 1386 | + return ''; | |
| 1387 | + } | |
| 1388 | + | |
| 1389 | + // Convert 3 or 4 digit hex to 6-digit hex (alpha is ignored) | |
| 1390 | + if ( strlen( $hex ) <= 4 ) { | |
| 1366 | 1391 | $hex = str_repeat( substr( $hex, 0, 1 ), 2 ) . str_repeat( substr( $hex, 1, 1 ), 2 ) . str_repeat( substr( $hex, 2, 1 ), 2 ); |
| 1367 | 1392 | } |
| 1368 | 1393 | |
| 1369 | 1394 | // Convert hex to RGB |
| @@ -1375,8 +1400,34 @@ | ||
| 1375 | 1400 | return $r . ',' . $g . ',' . $b; |
| 1376 | 1401 | } |
| 1377 | 1402 | |
| 1378 | 1403 | /** |
| 1404 | + * Replace --bs-{type}-rgb usages when the color has no RGB value (eg a CSS variable). | |
| 1405 | + * | |
| 1406 | + * rgba(var(--bs-{type}-rgb), .5) would be invalid without the -rgb variable, so use color-mix() on the color itself. | |
| 1407 | + * | |
| 1408 | + * @param string $css The generated CSS. | |
| 1409 | + * @param string $type The color slug. | |
| 1410 | + * @param string $color_code The color value. | |
| 1411 | + * | |
| 1412 | + * @return string | |
| 1413 | + */ | |
| 1414 | + public static function css_rgb_fallback( $css, $type, $color_code ) { | |
| 1415 | + $type = preg_quote( $type, '/' ); | |
| 1416 | + | |
| 1417 | + // A comma triplet is required here, so leave the value from the stylesheet in place. | |
| 1418 | + $css = preg_replace( '/--bs-btn-focus-shadow-rgb:\s*var\(--bs-' . $type . '-rgb\);/', '', $css ); | |
| 1419 | + | |
| 1420 | + return preg_replace_callback( '/rgba?\(\s*var\(--bs-' . $type . '-rgb\)\s*(?:,\s*([0-9]*\.?[0-9]+)\s*)?\)/', function( $m ) use ( $color_code ) { | |
| 1421 | + if ( ! isset( $m[1] ) || (float) $m[1] >= 1 ) { | |
| 1422 | + return $color_code; | |
| 1423 | + } | |
| 1424 | + | |
| 1425 | + return 'color-mix(in srgb, ' . $color_code . ' ' . round( (float) $m[1] * 100, 2 ) . '%, transparent)'; | |
| 1426 | + }, $css ); | |
| 1427 | + } | |
| 1428 | + | |
| 1429 | + /** | |
| 1379 | 1430 | * Build the CSS to overwrite a bootstrap color variable. |
| 1380 | 1431 | * |
| 1381 | 1432 | * @param $type |
| 1382 | 1433 | * @param $color_code |
| @@ -1493,9 +1544,9 @@ | ||
| 1493 | 1544 | } else if ( $aui_bs5 ) { |
| 1494 | 1545 | $output .= $prefix . ' .text-' . sanitize_key( $type ) . '{color: var(--bs-' . sanitize_key( $type ) . ') !important;}'; |
| 1495 | 1546 | } |
| 1496 | 1547 | |
| 1497 | - $output .= $prefix . ' .link-'.esc_attr($type).' {color: var(--bs-'.esc_attr($type).'-rgb) !important;}'; | |
| 1548 | + $output .= $prefix . ' .link-'.esc_attr($type).' {color: var(--bs-'.esc_attr($type).') !important;}'; | |
| 1498 | 1549 | $output .= $prefix . ' .link-'.esc_attr($type).':hover {color: rgba(var(--bs-'.esc_attr($type).'-rgb), .8) !important;}'; |
| 1499 | 1550 | |
| 1500 | 1551 | // buttons |
| 1501 | 1552 | $output .= $prefix . ' .btn-'.esc_attr($type).'{'; |
| @@ -1503,9 +1554,9 @@ | ||
| 1503 | 1554 | --bs-btn-bg: '.esc_attr($color_code).'; |
| 1504 | 1555 | --bs-btn-border-color: '.esc_attr($color_code).'; |
| 1505 | 1556 | --bs-btn-hover-bg: rgba(var(--bs-'.esc_attr($type).'-rgb), .9); |
| 1506 | 1557 | --bs-btn-hover-border-color: rgba(var(--bs-'.esc_attr($type).'-rgb), .9); |
| 1507 | - --bs-btn-focus-shadow-rgb: --bs-'.esc_attr($type).'-rgb; | |
| 1558 | + --bs-btn-focus-shadow-rgb: var(--bs-'.esc_attr($type).'-rgb); | |
| 1508 | 1559 | --bs-btn-active-bg: rgba(var(--bs-'.esc_attr($type).'-rgb), .9); |
| 1509 | 1560 | --bs-btn-active-border-color: rgba(var(--bs-'.esc_attr($type).'-rgb), .9); |
| 1510 | 1561 | --bs-btn-active-shadow: unset; |
| 1511 | 1562 | --bs-btn-disabled-bg: rgba(var(--bs-'.esc_attr($type).'-rgb), .5); |
| @@ -1525,9 +1576,9 @@ | ||
| 1525 | 1576 | --bs-btn-color: '.esc_attr($color_code).'; |
| 1526 | 1577 | --bs-btn-border-color: '.esc_attr($color_code).'; |
| 1527 | 1578 | --bs-btn-hover-bg: rgba(var(--bs-'.esc_attr($type).'-rgb), .9); |
| 1528 | 1579 | --bs-btn-hover-border-color: rgba(var(--bs-'.esc_attr($type).'-rgb), .9); |
| 1529 | - --bs-btn-focus-shadow-rgb: --bs-'.esc_attr($type).'-rgb; | |
| 1580 | + --bs-btn-focus-shadow-rgb: var(--bs-'.esc_attr($type).'-rgb); | |
| 1530 | 1581 | --bs-btn-active-bg: rgba(var(--bs-'.esc_attr($type).'-rgb), .9); |
| 1531 | 1582 | --bs-btn-active-border-color: rgba(var(--bs-'.esc_attr($type).'-rgb), .9); |
| 1532 | 1583 | --bs-btn-active-shadow: unset; |
| 1533 | 1584 | --bs-btn-disabled-bg: rgba(var(--bs-'.esc_attr($type).'-rgb), .5); |
| @@ -1556,16 +1607,15 @@ | ||
| 1556 | 1607 | } |
| 1557 | 1608 | |
| 1558 | 1609 | // $output .= $is_var ? 'html body {--bs-'.esc_attr($type).'-rgb: '.$color_code.'; }' : 'html body {--bs-'.esc_attr($type).'-rgb: '.self::hex_to_rgb($color_code).'; }'; |
| 1559 | 1610 | $output .= 'html body {--bs-'.esc_attr($type).': '.esc_attr($color_code).'; }'; |
| 1560 | - $output .= 'html body {--bs-'.esc_attr($type).'-rgb: '.$rgb.'; }'; | |
| 1611 | + | |
| 1612 | + if ( $rgb !== '' ) { | |
| 1613 | + $output .= 'html body {--bs-' . esc_attr( $type ) . '-rgb: ' . $rgb . '; }'; | |
| 1614 | + } | |
| 1561 | 1615 | } |
| 1562 | 1616 | |
| 1563 | - | |
| 1564 | 1617 | if ( $is_custom ) { |
| 1565 | - | |
| 1566 | -// echo '###'.$type;exit; | |
| 1567 | - | |
| 1568 | 1618 | // build rules into each type |
| 1569 | 1619 | foreach($selectors as $selector => $types){ |
| 1570 | 1620 | $selector = $compatibility ? $compatibility . " ".$selector : $selector; |
| 1571 | 1621 | $types = array_combine($types,$types); |
| @@ -1666,8 +1716,18 @@ | ||
| 1666 | 1716 | // $output .= $is_var ? '' : $prefix ." .alert-{$type} {background-color: ".$color_code."20; border-color: ".$color_code."30;color:$darker_40} "; |
| 1667 | 1717 | $output .= $prefix ." .alert-{$type} {--bs-alert-bg: rgba(var(--bs-{$type}-rgb), .1 ) !important;--bs-alert-border-color: rgba(var(--bs-{$type}-rgb), .25 ) !important;--bs-alert-color: rgba(var(--bs-{$type}-rgb), 1 ) !important;} "; |
| 1668 | 1718 | } |
| 1669 | 1719 | |
| 1720 | + if ( $rgb === '' ) { | |
| 1721 | + // The stylesheet builds these from --bs-{type}-rgb, which is not set for this color. | |
| 1722 | + if ( $aui_bs5 ) { | |
| 1723 | + $output .= $prefix . " .bg-{$type}{background-color: color-mix(in srgb, $color_code calc(var(--bs-bg-opacity, 1) * 100%), transparent) !important;} "; | |
| 1724 | + $output .= $prefix . " .border-{$type}{border-color: color-mix(in srgb, $color_code calc(var(--bs-border-opacity, 1) * 100%), transparent) !important;} "; | |
| 1725 | + } | |
| 1726 | + | |
| 1727 | + $output = self::css_rgb_fallback( $output, $type, $color_code ); | |
| 1728 | + } | |
| 1729 | + | |
| 1670 | 1730 | return $output; |
| 1671 | 1731 | } |
| 1672 | 1732 | |
| 1673 | 1733 | /** |
| @@ -1784,9 +1844,12 @@ | ||
| 1784 | 1844 | $output = ''; |
| 1785 | 1845 | |
| 1786 | 1846 | if ( $aui_bs5 ) { |
| 1787 | 1847 | // $output .= $is_var ? 'html body {--bs-'.esc_attr($type).'-rgb: '.$color_code.'; }' : 'html body {--bs-'.esc_attr($type).'-rgb: '.self::hex_to_rgb($color_code).'; }'; |
| 1788 | - $output .= 'html body {--bs-'.esc_attr($type).'-rgb: '.$rgb.'; }'; | |
| 1848 | + | |
| 1849 | + if ( $rgb !== '' ) { | |
| 1850 | + $output .= 'html body {--bs-' . esc_attr( $type ) . '-rgb: ' . $rgb . '; }'; | |
| 1851 | + } | |
| 1789 | 1852 | } |
| 1790 | 1853 | |
| 1791 | 1854 | // build rules into each type |
| 1792 | 1855 | foreach($selectors as $selector => $types){ |
| @@ -1880,8 +1943,18 @@ | ||
| 1880 | 1943 | // alerts |
| 1881 | 1944 | if ( $aui_bs5 ) { |
| 1882 | 1945 | // $output .= $is_var ? '' : $prefix ." .alert-{$type} {background-color: ".$color_code."20; border-color: ".$color_code."30;color:$darker_40} "; |
| 1883 | 1946 | $output .= $prefix ." .alert-{$type} {--bs-alert-bg: rgba(var(--bs-{$type}-rgb), .1 ) !important;--bs-alert-border-color: rgba(var(--bs-{$type}-rgb), .25 ) !important;--bs-alert-color: rgba(var(--bs-{$type}-rgb), 1 ) !important;} "; |
| 1947 | + } | |
| 1948 | + | |
| 1949 | + if ( $rgb === '' ) { | |
| 1950 | + // The stylesheet builds these from --bs-{type}-rgb, which is not set for this color. | |
| 1951 | + if ( $aui_bs5 ) { | |
| 1952 | + $output .= $prefix . " .bg-{$type}{background-color: color-mix(in srgb, $color_code calc(var(--bs-bg-opacity, 1) * 100%), transparent) !important;} "; | |
| 1953 | + $output .= $prefix . " .border-{$type}{border-color: color-mix(in srgb, $color_code calc(var(--bs-border-opacity, 1) * 100%), transparent) !important;} "; | |
| 1954 | + } | |
| 1955 | + | |
| 1956 | + $output = self::css_rgb_fallback( $output, $type, $color_code ); | |
| 1884 | 1957 | } |
| 1885 | 1958 | |
| 1886 | 1959 | return $output; |
| 1887 | 1960 | } |