| 1 |
<?php |
| 2 |
namespace Depicter\Document\Models\Common\Styles; |
| 3 |
|
| 4 |
|
| 5 |
use Depicter\Document\CSS\Breakpoints; |
| 6 |
|
| 7 |
class Typography extends States |
| 8 |
{ |
| 9 |
/** |
| 10 |
* style name |
| 11 |
*/ |
| 12 |
const NAME = 'typography'; |
| 13 |
|
| 14 |
|
| 15 |
public function set( $css ) { |
| 16 |
$devices = Breakpoints::names(); |
| 17 |
|
| 18 |
foreach ( $devices as $device ) { |
| 19 |
if ( !empty( $this->{$device} ) ) { |
| 20 |
|
| 21 |
$fontProperties = [ |
| 22 |
'fontSize' => 'font-size', |
| 23 |
'align' => 'text-align', |
| 24 |
'color' => 'color', |
| 25 |
'font' => 'font-family', |
| 26 |
'fontVariant' => 'font-weight', |
| 27 |
'lineHeight' => 'line-height', |
| 28 |
'transform' => 'text-transform', |
| 29 |
'letterSpacing' => 'letter-spacing', |
| 30 |
'wordwrap' => 'word-wrap', |
| 31 |
'direction' => 'direction', |
| 32 |
'decoration' => 'text-decoration' |
| 33 |
]; |
| 34 |
|
| 35 |
foreach ( $fontProperties as $key => $cssProperty ) { |
| 36 |
|
| 37 |
if ( isset( $this->{$device}->{$key} ) ) { |
| 38 |
$cssValue = $this->{$device}->{$key}; |
| 39 |
|
| 40 |
if ( $key == 'fontSize' ) { |
| 41 |
$css[ $device ][ $cssProperty ] = $cssValue . 'px'; |
| 42 |
} elseif ( $key == 'lineHeight') { |
| 43 |
$css[ $device ][ $cssProperty ] = $cssValue . '%'; |
| 44 |
} elseif ( $key == 'font') { |
| 45 |
$cssValue = trim( $cssValue, '\"'); |
| 46 |
$css[ $device ][ $cssProperty ] = $cssValue == 'inherit' ? $cssValue : '"' . $cssValue . '"'; |
| 47 |
} elseif ( $key == 'fontVariant') { |
| 48 |
$fontWeight = $cssValue; |
| 49 |
// extract font style and weight |
| 50 |
if( false !== strpos( $fontWeight, 'italic') ){ |
| 51 |
$css[ $device ][ 'font-style' ] = 'italic'; |
| 52 |
$fontWeight = trim( $fontWeight, 'italic'); |
| 53 |
|
| 54 |
// reset font-style if desktop font style was italic |
| 55 |
} elseif( isset( $this->default->{$key} ) && false !== strpos( $this->default->{$key}, 'italic') ){ |
| 56 |
$css[ $device ][ 'font-style' ] = 'normal'; |
| 57 |
} |
| 58 |
|
| 59 |
// convert "regular" to 400 |
| 60 |
if( 'regular' == strtolower( $fontWeight ) ){ |
| 61 |
$fontWeight = 400; |
| 62 |
} |
| 63 |
|
| 64 |
$css[ $device ][ $cssProperty ] = $fontWeight; |
| 65 |
|
| 66 |
} elseif ( $key == 'wordwrap') { |
| 67 |
if( $cssValue == 'break' ){ |
| 68 |
$css[ $device ][ 'overflow-wrap' ] = 'break-word'; |
| 69 |
} else { |
| 70 |
$css[ $device ][ 'white-space' ] = 'nowrap'; |
| 71 |
} |
| 72 |
} elseif ( $key == 'letterSpacing' ) { |
| 73 |
$css[ $device ][ $cssProperty ] = $cssValue . 'px'; |
| 74 |
} elseif ( $key == 'color' ) { |
| 75 |
if ( false != strpos( $cssValue, 'gradient' ) ) { |
| 76 |
$css[ $device ][ 'background-image' ] = $cssValue; |
| 77 |
$css[ $device ][ '-webkit-background-clip' ] = 'text'; |
| 78 |
$css[ $device ][ '-webkit-text-fill-color' ] = 'transparent'; |
| 79 |
} else { |
| 80 |
$css[ $device ][ $cssProperty ] = $cssValue; |
| 81 |
} |
| 82 |
} elseif ( !empty( $cssValue ) ) { |
| 83 |
$css[ $device ][ $cssProperty ] = $cssValue; |
| 84 |
} |
| 85 |
} |
| 86 |
} |
| 87 |
} |
| 88 |
} |
| 89 |
|
| 90 |
return $css; |
| 91 |
} |
| 92 |
|
| 93 |
public function getFontsList() { |
| 94 |
$devices = Breakpoints::names(); |
| 95 |
$fontList = []; |
| 96 |
|
| 97 |
foreach ( $devices as $device ) { |
| 98 |
if ( !empty( $this->{$device}->font ) ) { |
| 99 |
$fontWeight = ! empty( $this->{$device}->fontVariant ) ? $this->{$device}->fontVariant : 400; |
| 100 |
if( ! empty( $fontList[ $this->{$device}->font ] ) ){ |
| 101 |
if( is_array( $fontList[ $this->{$device}->font ] ) && ! in_array( $fontWeight, $fontList[ $this->{$device}->font ] ) ){ |
| 102 |
$fontList[ $this->{$device}->font ][] = $fontWeight; |
| 103 |
} |
| 104 |
} else { |
| 105 |
$fontList[ $this->{$device}->font ] = [ $fontWeight ]; |
| 106 |
} |
| 107 |
} |
| 108 |
} |
| 109 |
|
| 110 |
return $fontList; |
| 111 |
} |
| 112 |
} |
| 113 |
|
