_scss
6 years ago
class-vk-component-button.php
6 years ago
class-vk-component-mini-contents.php
6 years ago
class-vk-component-posts.php
6 years ago
class-vk-component-button.php
249 lines
| 1 | <?php |
| 2 | /* |
| 3 | The original of this file is located at: |
| 4 | https://github.com/vektor-inc/vektor-wp-libraries |
| 5 | If you want to change this file, please change the original file. |
| 6 | */ |
| 7 | |
| 8 | if ( ! class_exists( 'VK_Components_Button' ) ) { |
| 9 | |
| 10 | class VK_Component_Button { |
| 11 | |
| 12 | static public function get_options( $options ) { |
| 13 | $default = array( |
| 14 | 'outer_id' => '', |
| 15 | 'outer_class' => '', |
| 16 | 'btn_text' => '', |
| 17 | 'btn_url' => '', |
| 18 | 'btn_class' => 'btn btn-primary', |
| 19 | 'btn_target' => '', |
| 20 | 'btn_ghost' => false, |
| 21 | 'btn_color_text' => '', |
| 22 | 'btn_color_bg' => '', |
| 23 | 'shadow_use' => false, |
| 24 | 'shadow_color' => '', |
| 25 | ); |
| 26 | $options = wp_parse_args( $options, $default ); |
| 27 | return $options; |
| 28 | } |
| 29 | |
| 30 | public static function get_view( $options ) { |
| 31 | |
| 32 | $html = ''; |
| 33 | |
| 34 | $options = self::get_options( $options ); |
| 35 | $btn_class = ''; |
| 36 | if ( $options['btn_class'] ) { |
| 37 | $btn_class = ' class="' . esc_attr( $options['btn_class'] ) . '"'; |
| 38 | } |
| 39 | |
| 40 | $btn_target = ''; |
| 41 | if ( $options['btn_target'] ) { |
| 42 | $btn_target = ' target="' . esc_attr( $options['btn_target'] ) . '"'; |
| 43 | } |
| 44 | |
| 45 | if ( $options['btn_ghost'] || $options['btn_color_text'] || $options['btn_color_bg'] || $options['shadow_use'] || $options['shadow_color'] ) { |
| 46 | $html .= self::get_style_all( $options ); |
| 47 | } |
| 48 | |
| 49 | $html .= '<a' . $btn_class . ' href="' . esc_url( $options['btn_url'] ) . '"' . $btn_target . '>'; |
| 50 | $html .= wp_kses_post( $options['btn_text'] ); |
| 51 | $html .= '</a>'; |
| 52 | |
| 53 | return $html; |
| 54 | |
| 55 | } |
| 56 | |
| 57 | public static function get_style_all( $options ) { |
| 58 | $options = self::get_options( $options ); |
| 59 | |
| 60 | if ( ! $options['btn_class'] ) { |
| 61 | return; |
| 62 | } |
| 63 | |
| 64 | $dynamic_css = ''; |
| 65 | |
| 66 | // Creat btn styles |
| 67 | if ( $options['outer_id'] ) { |
| 68 | $outer_single_selector .= '#' . $options['outer_id'] . ' '; |
| 69 | } elseif ( $options['outer_class'] ) { |
| 70 | $outer_class_args = explode( ' ', $options['outer_class'] ); |
| 71 | $outer_single_selector = '.' . $outer_class_args[0] . ' '; |
| 72 | } |
| 73 | |
| 74 | $link_class_args = explode( ' ', $options['btn_class'] ); |
| 75 | $link_single_selector = '.' . $link_class_args[0]; |
| 76 | |
| 77 | $dynamic_css .= '<style type="text/css">'; |
| 78 | $dynamic_css .= $outer_single_selector . $link_single_selector . '{'; |
| 79 | $dynamic_css .= self::get_style_text( $options ); |
| 80 | $dynamic_css .= self::get_style_bg( $options ); |
| 81 | $dynamic_css .= self::get_style_border( $options ); |
| 82 | $dynamic_css .= self::get_style_box_shadow( $options ); |
| 83 | $dynamic_css .= '}'; |
| 84 | $dynamic_css .= $outer_single_selector . ' ' . $link_single_selector . ':hover{'; |
| 85 | $dynamic_css .= self::get_style_text_hover( $options ); |
| 86 | $dynamic_css .= self::get_style_bg_hover( $options ); |
| 87 | $dynamic_css .= self::get_style_border_hover( $options ); |
| 88 | $dynamic_css .= '}'; |
| 89 | $dynamic_css .= '</style>'; |
| 90 | |
| 91 | // delete before after space |
| 92 | $dynamic_css = trim( $dynamic_css ); |
| 93 | // convert tab and br to space |
| 94 | $dynamic_css = preg_replace( '/[\n\r\t]/', '', $dynamic_css ); |
| 95 | // Change multiple spaces to single space |
| 96 | $dynamic_css = preg_replace( '/\s(?=\s)/', '', $dynamic_css ); |
| 97 | |
| 98 | return $dynamic_css; |
| 99 | |
| 100 | } |
| 101 | |
| 102 | /** |
| 103 | * ボタンの文字色のスタイルを出力する |
| 104 | * @param [type] $options [description] |
| 105 | * @return [type] [description] |
| 106 | */ |
| 107 | public static function get_style_text( $options ) { |
| 108 | $options = self::get_options( $options ); |
| 109 | $style_text = ''; |
| 110 | |
| 111 | if ( ! $options['btn_ghost'] ) { |
| 112 | /* 塗りボタンの時 -------------------------------*/ |
| 113 | // ボタンの初期状� |
| 114 | �の文字色が白なので指定する� |
| 115 | 要がない |
| 116 | $style_text = 'color:#fff;'; |
| 117 | |
| 118 | $color = VK_Helpers::color_mode_check( $options['btn_color_bg'] ); |
| 119 | if ( $color['brightness'] > 0.8 ) { |
| 120 | $style_text = 'color:#000;'; |
| 121 | } |
| 122 | } elseif ( $options['btn_ghost'] ) { |
| 123 | // ゴーストボタンの時 -------------------------------*/ |
| 124 | // 文字色指定があればボタンカラーを適用 |
| 125 | if ( $options['btn_color_text'] ) { |
| 126 | $style_text = 'color:' . $options['btn_color_text'] . ';'; |
| 127 | } |
| 128 | if ( $options['shadow_use'] && $options['shadow_color'] ) { |
| 129 | $style_text .= 'text-shadow:0 0 2px ' . $options['shadow_color'] . ';'; |
| 130 | } |
| 131 | } |
| 132 | |
| 133 | return $style_text; |
| 134 | } |
| 135 | |
| 136 | /** |
| 137 | * ボタンのホバー時の文字色を出力する |
| 138 | * @param [type] $options [description] |
| 139 | * @return [type] [description] |
| 140 | */ |
| 141 | public static function get_style_text_hover( $options ) { |
| 142 | $options = self::get_options( $options ); |
| 143 | $style_text_hover = ''; |
| 144 | |
| 145 | // ゴーストだろうが塗りだろうが、ホバー時は背景塗りにするのでゴーストかどうかの条件分岐は関係ない |
| 146 | |
| 147 | $color = VK_Helpers::color_mode_check( $options['btn_color_bg'] ); |
| 148 | if ( $color['brightness'] > 0.8 ) { |
| 149 | $style_text_hover = 'color:#000;'; |
| 150 | } else { |
| 151 | $style_text_hover = 'color:#fff;'; |
| 152 | } |
| 153 | |
| 154 | return $style_text_hover; |
| 155 | } |
| 156 | |
| 157 | /** |
| 158 | * ボタンの背景のスタイルを出力する |
| 159 | * @param [type] $options [description] |
| 160 | * @return [type] [description] |
| 161 | */ |
| 162 | public static function get_style_bg( $options ) { |
| 163 | $style_bg = ''; |
| 164 | |
| 165 | if ( $options['btn_ghost'] ) { |
| 166 | // 初期状� |
| 167 | �だと背景色が指定されているので透過にする |
| 168 | $style_bg = 'background:transparent;transition: .3s;'; |
| 169 | |
| 170 | } elseif ( ! $options['btn_ghost'] ) { |
| 171 | if ( ! empty( $options['btn_color_bg'] ) ) { |
| 172 | // ボタンカラーが設定されている時 |
| 173 | $style_bg = 'background-color:' . esc_attr( $options['btn_color_bg'] ) . ';'; |
| 174 | } |
| 175 | } |
| 176 | return $style_bg; |
| 177 | } |
| 178 | |
| 179 | /** |
| 180 | * ボタンのホバー時の背景のスタイルを出力する |
| 181 | * @param [type] $options [description] |
| 182 | * @return [type] [description] |
| 183 | */ |
| 184 | public static function get_style_bg_hover( $options ) { |
| 185 | $options = self::get_options( $options ); |
| 186 | $style_bg_hover = ''; |
| 187 | |
| 188 | if ( $options['btn_ghost'] ) { |
| 189 | |
| 190 | $style_bg_hover = 'background-color:' . $options['btn_color_bg'] . ';'; |
| 191 | |
| 192 | } elseif ( ! $options['btn_ghost'] ) { |
| 193 | |
| 194 | $style_bg_hover = 'background-color:' . VK_Helpers::color_auto_modifi( $options['btn_color_bg'], 1.2 ) . ';'; |
| 195 | } |
| 196 | return $style_bg_hover; |
| 197 | } |
| 198 | |
| 199 | /** |
| 200 | * ボタンの枠線のスタイルを出力する |
| 201 | * @param [type] $options [description] |
| 202 | * @return [type] [description] |
| 203 | */ |
| 204 | public static function get_style_border( $options ) { |
| 205 | $options = self::get_options( $options ); |
| 206 | $style_border = ''; |
| 207 | if ( $options['btn_ghost'] ) { |
| 208 | $style_border = 'border-color:' . $options['btn_color_text'] . ';'; |
| 209 | } else { |
| 210 | $style_border = 'border-color:' . $options['btn_color_bg'] . ';'; |
| 211 | } |
| 212 | return $style_border; |
| 213 | } |
| 214 | |
| 215 | /** |
| 216 | * ボタンのホバー時の枠線のスタイルを出力する |
| 217 | * @param [type] $options [description] |
| 218 | * @return [type] [description] |
| 219 | */ |
| 220 | public static function get_style_border_hover( $options ) { |
| 221 | $options = self::get_options( $options ); |
| 222 | $style_border_hover = ''; |
| 223 | |
| 224 | if ( $options['btn_ghost'] ) { |
| 225 | $style_border_hover = 'border-color:' . $options['btn_color_bg'] . ';'; |
| 226 | } else { |
| 227 | $style_border_hover = 'border-color:' . VK_Helpers::color_auto_modifi( $options['btn_color_bg'], 1.2 ) . ';'; |
| 228 | } |
| 229 | return $style_border_hover; |
| 230 | } |
| 231 | |
| 232 | /** |
| 233 | * ボタンのシャドウスタイルを出力する |
| 234 | * @param [type] $options [description] |
| 235 | * @return [type] [description] |
| 236 | */ |
| 237 | public static function get_style_box_shadow( $options ) { |
| 238 | $options = self::get_options( $options ); |
| 239 | $style_box_shadow = ''; |
| 240 | |
| 241 | if ( $options['btn_ghost'] && ( $options['shadow_color'] ) && ( $options['shadow_use'] ) ) { |
| 242 | $style_box_shadow = 'box-shadow:0 0 2px ' . $options['shadow_color'] . ';'; |
| 243 | } |
| 244 | return $style_box_shadow; |
| 245 | } |
| 246 | |
| 247 | } |
| 248 | } |
| 249 |