| @@ -1,27 +1,93 @@ | ||
| 1 | 1 | <?php |
| 2 | 2 | namespace MBSocial; |
| 3 | 3 | defined('ABSPATH') or die('No direct access permitted'); |
| 4 | 4 | |
| 5 | +use \MaxButtons\maxBlocks as maxBlocks; | |
| 6 | +use \MaxButtons\maxUtils as maxUtils; | |
| 7 | + | |
| 5 | 8 | class style |
| 6 | 9 | { |
| 10 | + protected $collection; | |
| 11 | + | |
| 7 | 12 | public $class; |
| 8 | 13 | public $name; |
| 9 | 14 | public $description = ' Lorum Ipsum Stylum '; |
| 10 | 15 | |
| 11 | - public $width = '45'; // in pix | |
| 12 | - public $height = '45'; // in pix | |
| 13 | - | |
| 14 | 16 | // Defines if style supports label and share counts |
| 15 | 17 | public $has_share = false; |
| 16 | 18 | public $has_label = false; |
| 17 | 19 | |
| 18 | - public $css = array(); | |
| 20 | + /* | |
| 21 | + Controls what to display for this style and when | |
| 22 | + Usage | |
| 23 | + Pseudo (normal/hover) -> [item] , array('item', 'item'), 'item,item' | |
| 24 | + ^ one item, ^ or ^ and, show both | |
| 25 | + */ | |
| 26 | + public $display = array('normal' => 'icon', | |
| 27 | + 'hover' => array('count', 'label'), | |
| 28 | + ); | |
| 19 | 29 | |
| 20 | - public static function registerStyle($order = 10) | |
| 30 | + protected $display_active = array(); | |
| 31 | + protected $effect_active = false; | |
| 32 | + | |
| 33 | + // possible ITEM css classes | |
| 34 | + protected $items = array('count' => 'mb-share-count', | |
| 35 | + 'icon' => 'mb-icon-wrapper', | |
| 36 | + 'label' => 'mb-label', | |
| 37 | + ); | |
| 38 | + | |
| 39 | + public $css = array( | |
| 40 | + 'maxsocial' => array( // the container | |
| 41 | + 'normal' => | |
| 42 | + array('display' => 'inline-block', | |
| 43 | + 'clear' => 'both', | |
| 44 | + 'z-index' => 9999, | |
| 45 | + 'position' => 'relative', | |
| 46 | + 'width' => '100%', | |
| 47 | + 'max-width' => 'none', | |
| 48 | + 'line-height' => '1.1', | |
| 49 | + 'box-sizing' => 'border-box', | |
| 50 | + ), | |
| 51 | + // 'hover' => '', | |
| 52 | + ), | |
| 53 | + | |
| 54 | + 'mb-item' => array('normal' => | |
| 55 | + array ( 'display' => 'flex', | |
| 56 | + 'justify-content' => 'center', | |
| 57 | + 'align-items' => 'center', | |
| 58 | + 'box-sizing' => 'border-box', | |
| 59 | + 'position' => 'relative', | |
| 60 | + 'line-height' => 'inherit', | |
| 61 | + 'text-align' => 'center', | |
| 62 | + ), | |
| 63 | + ), | |
| 64 | + 'mb-social' => array('normal' => // the button | |
| 65 | + array ( 'display' => 'flex', | |
| 66 | + 'justify-content' => 'center', | |
| 67 | + 'align-items' => 'center', | |
| 68 | + 'text-decoration' => 'none', | |
| 69 | + 'position' => 'relative', | |
| 70 | + 'border' => 0, | |
| 71 | + 'box-shadow' => 'none', | |
| 72 | + 'box-shadow-width' => 0, | |
| 73 | + 'box-shadow-offset-left' => 0, | |
| 74 | + 'box-shadow-offset-top' => 0, | |
| 75 | + | |
| 76 | + ), | |
| 77 | + // 'hover' => array(), | |
| 78 | + ), | |
| 79 | +// 'mb-share-count' => array(); | |
| 80 | + //'hover' => array('normal' => array( 'display' => 'none')), | |
| 81 | + //'normal' => array('hover' => array( 'display' => 'none')), | |
| 82 | + | |
| 83 | + ); | |
| 84 | + | |
| 85 | + | |
| 86 | + public static function registerStyle($name) | |
| 21 | 87 | { |
| 22 | 88 | $class = get_called_class(); |
| 23 | - styles::registerStyle($class, $order); | |
| 89 | + styles::registerStyle($class, $name); | |
| 24 | 90 | |
| 25 | 91 | } |
| 26 | 92 | |
| 27 | 93 | public function __construct() |
| @@ -34,87 +100,410 @@ | ||
| 34 | 100 | return $this->css; |
| 35 | 101 | |
| 36 | 102 | } |
| 37 | 103 | |
| 38 | - protected function mainCSS() | |
| 104 | + /** Add effects to the styling . addCSS uses the last arg to bounce back CSS, since it's called by block | |
| 105 | + * @param $effect Name of the effect | |
| 106 | + * @param $args Arguments, some effects might need specific args. | |
| 107 | + */ | |
| 108 | + public function addEffect($css, $effect, $args = array()) | |
| 39 | 109 | { |
| 40 | - // defaults for collection ( whole block ) | |
| 110 | + $this->effect_active = $effect; | |
| 41 | 111 | |
| 42 | - // button defaults | |
| 112 | + switch($effect) | |
| 113 | + { | |
| 114 | + case 'drop': | |
| 43 | 115 | |
| 44 | - // style for maxbutton-social (button) | |
| 45 | - $this->addCSS( array( | |
| 46 | - 'width' => $this->width . 'px', | |
| 47 | - 'height' => $this->height . 'px', | |
| 48 | - 'color' => 'transparent', | |
| 49 | - ) ); | |
| 116 | + $line_height = intval($args['line_height']) * 2; | |
| 50 | 117 | |
| 51 | - // icon | |
| 52 | - $this->addCSS( array( 'font-size' => '20px', | |
| 53 | - 'line-height' => '20px', | |
| 54 | - // 'margin' => 0, | |
| 55 | - // 'padding' => 0, | |
| 56 | - ), | |
| 57 | - '', | |
| 58 | - 'mb-icon' | |
| 59 | - ); | |
| 118 | + $normcss = array( | |
| 119 | + 'position' => 'absolute', | |
| 120 | + 'left' => 0, | |
| 121 | + 'bottom' => '-3px', | |
| 122 | + 'width' => '100%', | |
| 123 | + 'transition' => 'bottom .2s linear', | |
| 124 | + 'z-index' => '-1', | |
| 125 | + 'line-height' => $line_height .'px', | |
| 126 | + // 'display' => 'inline-block', | |
| 127 | + 'background-color' => '#000', | |
| 60 | 128 | |
| 61 | - // share count | |
| 62 | - $this->addCSS ( array ( | |
| 63 | - 'font-size' => '20px', | |
| 64 | - 'line-height' => '20px', | |
| 65 | - 'display' => 'none', | |
| 66 | - ), | |
| 67 | - '', | |
| 68 | - 'mb-share-count' | |
| 129 | + ); | |
| 130 | + | |
| 131 | + $css = $this->addCSS($normcss, false, 'mb-label', 'normal', $css); | |
| 132 | + $css = $this->addCSS($normcss, false, 'mb-share-count', 'normal', $css); | |
| 133 | + | |
| 134 | + $hovercss = array( | |
| 135 | + 'bottom' => '-' . $line_height . 'px', | |
| 136 | + ); | |
| 137 | + | |
| 138 | + $css = $this->addCSS($hovercss, false, 'mb-label', 'hover', $css); | |
| 139 | + $css = $this->addCSS($hovercss, false, 'mb-share-count','hover', $css); | |
| 140 | + | |
| 141 | + $css = $this->addCSS('overflow', 'visible', 'mb-social', 'normal', $css); | |
| 142 | + | |
| 143 | + $css = $this->addCSS('z-index', '0', 'mb-social', 'normal', $css); | |
| 144 | + $css = $this->addCSS('position', 'static', 'mb-social', 'normal', $css); | |
| 145 | + $css = $this->addCSS('display', 'inline-block', 'mb-item', 'normal', $css); | |
| 146 | + | |
| 147 | + | |
| 148 | + break; | |
| 149 | + case 'flip': | |
| 150 | + $css = $this->addCSS('transform', 'translateY(0)', 'mb-label', 'hover', $css); | |
| 151 | + $css = $this->addCSS('transform', 'translateY(0)', 'mb-share-count','hover', $css); | |
| 152 | + $css = $this->addCSS('transform', 'translateY(-100%)', 'mb-icon-wrapper', 'hover', $css); | |
| 153 | + $css = $this->addCSS('overflow', 'hidden','mb-social', 'normal', $css); | |
| 154 | + $css = $this->addCSS('display','inline-block', 'mb-social', 'normal', $css); | |
| 155 | + | |
| 156 | + $normcss = array( | |
| 157 | + 'transition' => 'all .2s linear', | |
| 158 | + 'height' => '100%', | |
| 159 | + 'width' => '100%', | |
| 160 | + // 'display' => 'flex', | |
| 161 | + 'align-items' => 'center', | |
| 162 | + 'justify-content' => 'center', | |
| 163 | + 'transform' => 'translateY(100%)', | |
| 164 | + ); | |
| 165 | + | |
| 166 | + $css = $this->addCSS($normcss, false, 'mb-label', 'normal', $css); | |
| 167 | + $css = $this->addCSS($normcss, false, 'mb-share-count', 'normal', $css); | |
| 168 | + $css = $this->addCSS($normcss, false, 'mb-icon-wrapper', 'normal', $css); | |
| 169 | + $css = $this->addCSS('transform', 'translateY(0)', 'mb-icon-wrapper', 'normal', $css); | |
| 170 | + $css = $this->addCSS('position', 'absolute', 'mb-icon-wrapper', 'normal', $css); | |
| 171 | + | |
| 172 | + | |
| 173 | + $hoverCSS = array( | |
| 174 | + // 'display' => 'flex', | |
| 175 | + 'align-items' => 'center', | |
| 176 | + 'justify-content' => 'center', | |
| 177 | + //'transform' => 'translateY(0)', | |
| 178 | + ); | |
| 179 | + | |
| 180 | + | |
| 181 | + $css = $this->addCSS($hoverCSS, false, 'mb-label', 'hover', $css); | |
| 182 | + $css = $this->addCSS($hoverCSS, false, 'mb-share-count', 'hover', $css); | |
| 183 | + $css = $this->addCSS($hoverCSS, false, 'mb-icon-wrapper', 'hover', $css); | |
| 184 | + $css = $this->addCSS('transform', 'translateY(-100%)', 'mb-icon-wrapper', 'hover', $css); // move up | |
| 185 | + | |
| 186 | + | |
| 187 | + break; | |
| 188 | + case 'hover'; | |
| 189 | + | |
| 190 | + | |
| 191 | + break; | |
| 192 | + case 'lift': | |
| 193 | + $line_height = intval($args['line_height']) * 1.5; | |
| 194 | + | |
| 195 | + //$this->addCSS('overflow', 'hidden', 'collection-item'); | |
| 196 | + $css = $this->addCSS('transform', 'translateY(-10px)', 'mb-icon-wrapper', 'hover', $css); | |
| 197 | + $css = $this->addCSS('transition', 'all .2s linear', 'mb-icon-wrapper', 'normal', $css); | |
| 198 | + | |
| 199 | + $normcss = array( | |
| 200 | + 'bottom' => '-' . $line_height . 'px', | |
| 201 | + 'z-index' => 'auto', | |
| 202 | + 'background' => 'transparent', | |
| 203 | + 'position' => 'absolute', | |
| 204 | + 'line-height' => $line_height . 'px', | |
| 205 | + 'transition' => 'bottom .2s linear', | |
| 206 | + //'z-index' => '-1', | |
| 207 | + 'width' => '100%', | |
| 208 | + | |
| 209 | + ); | |
| 210 | + | |
| 211 | + $css = $this->addCSS($normcss, '', 'mb-label', 'normal', $css); | |
| 212 | + $css = $this->addCSS($normcss, '', 'mb-share-count', 'normal', $css); | |
| 213 | + | |
| 214 | + $hovercss = array( | |
| 215 | + 'bottom' => '0px', | |
| 216 | + 'background' => 'transparent', | |
| 217 | + | |
| 218 | + ); | |
| 219 | + | |
| 220 | + $css = $this->addCSS($hovercss, '', 'mb-label', 'hover', $css); | |
| 221 | + $css = $this->addCSS($hovercss, '', 'mb-share-count', 'hover', $css); | |
| 222 | + | |
| 223 | + $css = $this->addCSS('overflow', 'hidden', 'mb-social', 'normal', $css); | |
| 224 | + | |
| 225 | + break; | |
| 226 | + case 'none': | |
| 227 | + | |
| 228 | + $this->display['hover'] = 'icon'; | |
| 229 | + //$css = $this->addCSS('display', 'none', 'mb-label', 'hover', $css); | |
| 230 | + //$css = $this->addCSS('display', 'none', 'mb-share-count','hover', $css); | |
| 231 | + break; | |
| 232 | + case 'shift': | |
| 233 | + $this->display = array('normal' => 'icon,count', | |
| 234 | + 'hover' => 'icon,label,count'); | |
| 235 | + $line_height = $args['line_height']; | |
| 236 | + | |
| 237 | + $css = $this->addCSS('overflow', 'hidden','mb-social', 'normal', $css); | |
| 238 | + | |
| 239 | + $css = $this->addCSS( array( | |
| 240 | + 'position' => 'absolute', | |
| 241 | + 'bottom' => '3px', | |
| 242 | + 'height' => $line_height, | |
| 243 | + 'z-index' => '1', | |
| 244 | + 'transition' => 'all .2s ease-in-out', | |
| 245 | + 'background' => 'transparent', | |
| 246 | + 'right' => 0, | |
| 247 | + 'left' => 0, | |
| 248 | + ), | |
| 249 | + '', | |
| 250 | + 'mb-share-count', | |
| 251 | + 'normal', | |
| 252 | + $css); | |
| 253 | + | |
| 254 | + $css = $this->addCSS ( array( | |
| 255 | + 'transform' => 'translateX(60px)', | |
| 256 | + 'bottom' => '0', | |
| 257 | + 'background' => 'transparent', | |
| 258 | + ), | |
| 259 | + '', | |
| 260 | + 'mb-share-count', | |
| 261 | + 'hover', | |
| 262 | + $css | |
| 69 | 263 | ); |
| 70 | 264 | |
| 71 | - // label | |
| 72 | - $this->addCSS( array ( | |
| 73 | - 'display' => 'none', | |
| 74 | - 'font-size' => '15px', | |
| 75 | - ), | |
| 76 | - '', | |
| 77 | - 'mb-label' | |
| 265 | + $css = $this->addCSS ( array ( | |
| 266 | + 'transform' => 'translateX(-60px)', | |
| 267 | + 'position' => 'absolute', | |
| 268 | + 'bottom' => 0, | |
| 269 | + 'transition' => 'all .2s ease-in-out', | |
| 270 | + 'background-color' => 'transparent', | |
| 271 | + 'left' => 0, | |
| 272 | + 'text-align' => 'center', | |
| 273 | + 'width' => '100%', | |
| 274 | + 'height' => $line_height, | |
| 275 | + ), | |
| 276 | + '', | |
| 277 | + 'mb-label', | |
| 278 | + 'normal', | |
| 279 | + $css | |
| 78 | 280 | ); |
| 79 | 281 | |
| 282 | + $css = $this->addCSS ( array ( | |
| 283 | + 'transform' => 'translateX(0px)', | |
| 284 | + 'z-index' => '1', | |
| 285 | + 'bottom' => '3px', | |
| 286 | + 'background-color' => 'transparent', | |
| 287 | + ), | |
| 288 | + '', | |
| 289 | + 'mb-label', | |
| 290 | + 'hover', | |
| 291 | + $css | |
| 292 | + ); | |
| 80 | 293 | |
| 294 | + $css = $this->addCSS ('transform', 'translateY(-8px)', 'mb-icon-wrapper', 'hover', $css); | |
| 295 | + $css = $this->addCSS ('transition', 'all .2s ease-in-out', 'mb-icon-wrapper', 'normal', $css); | |
| 296 | + | |
| 297 | + break; | |
| 298 | + case 'stretch': | |
| 299 | + $this->display = array('normal' => 'icon,count', | |
| 300 | + 'hover' => 'icon,label,count'); | |
| 301 | + $css = $this->addStretch($css,$args); | |
| 302 | + | |
| 303 | + break; | |
| 304 | + case 'transform': | |
| 305 | + $scale = intval($args['scale']); | |
| 306 | + $scale = $scale / 10; | |
| 307 | + //$css['mb-social']['hover']['transform'] = 'scale(' . $scale . ')'; | |
| 308 | + //$css['mb-social']['hover']['transform'] = 'scale(' . $scale . ')'; | |
| 309 | + $css = $this->addCSS('transform', 'scale('. $scale . ')', 'mb-social','hover', $css); | |
| 310 | + break; | |
| 311 | + } | |
| 312 | + | |
| 313 | + return $css; | |
| 81 | 314 | } |
| 82 | 315 | |
| 316 | + protected function addStretch($css, $args) | |
| 317 | + { | |
| 318 | + $css = $this->addCSS('display', 'flex', 'maxsocial', 'normal', $css); | |
| 319 | + | |
| 320 | + $orientation = (isset($args['orientation'])) ? $args['orientation'] : false; | |
| 321 | + $is_static = (isset($args['is_static'])) ? $args['is_static'] : false; | |
| 322 | + | |
| 323 | + | |
| 324 | + if ($orientation == 'vertical') | |
| 325 | + { | |
| 326 | + $css = $this->addCSS('flex-direction', 'column', 'maxsocial', 'normal', $css); | |
| 327 | + } | |
| 328 | + | |
| 329 | + | |
| 330 | + $css = $this->addCSS('flex', '1.2', 'mb-item', 'hover', $css); | |
| 331 | + | |
| 332 | + $itemcss = array( | |
| 333 | + 'flex' => 1, | |
| 334 | + 'float' => 'left', | |
| 335 | + 'height' => '100%', | |
| 336 | + '-webkit-transition' => 'all .2s linear', | |
| 337 | + 'transition' => 'all .2s linear', | |
| 338 | + ); | |
| 339 | + $css = $this->addCSS($itemcss, '','mb-item', 'normal', $css); | |
| 340 | + | |
| 341 | + $linkcss = array ( | |
| 342 | + 'display' => 'block', | |
| 343 | + 'display' => '-webkit-box', | |
| 344 | + 'display' => '-webkit-flex', | |
| 345 | + 'display' => '-moz-box', | |
| 346 | + 'display' => '-ms-flexbox', | |
| 347 | + 'display' => 'flex', | |
| 348 | + 'text-transform' => 'none', | |
| 349 | + '-webkit-flex-flow' => 'row wrap', | |
| 350 | + '-ms-flex-flow' => 'row wrap', | |
| 351 | + 'flex-flow' => 'row wrap', | |
| 352 | + 'width' => '100%', | |
| 353 | + ); | |
| 354 | + | |
| 355 | + // Changing width on horizontal items will mess the size | |
| 356 | + if ( true === $is_static) | |
| 357 | + { | |
| 358 | + unset($linkcss['width']); | |
| 359 | + } | |
| 360 | + | |
| 361 | + | |
| 362 | + $css = $this->addCSS ($linkcss , | |
| 363 | + '', | |
| 364 | + 'mb-social', 'normal', $css); | |
| 365 | + | |
| 366 | + | |
| 367 | + $css = $this->addCSS('flex', '1.2', 'mb-social', 'hover', $css); | |
| 368 | + | |
| 369 | + // the label | |
| 370 | + $css = $this->addCSS ( array ( | |
| 371 | + 'text-align' => 'center', | |
| 372 | + 'flex-grow' => 3, | |
| 373 | + 'margin' => 'auto', | |
| 374 | + 'display' => 'none', | |
| 375 | + 'opacity' => 0, | |
| 376 | + '-webkit-transition' => 'all .4s linear', | |
| 377 | + 'transition' => 'all .4s linear', | |
| 378 | + ), | |
| 379 | + '', | |
| 380 | + 'mb-label', | |
| 381 | + 'normal', | |
| 382 | + $css | |
| 383 | + ); | |
| 384 | + | |
| 385 | + // label hover | |
| 386 | + $css = $this->addCSS( array( | |
| 387 | + 'display' => 'inline-block', | |
| 388 | + 'opacity' => '1', | |
| 389 | + | |
| 390 | + ), | |
| 391 | + '', | |
| 392 | + 'mb-label', | |
| 393 | + 'hover', | |
| 394 | + $css | |
| 395 | + | |
| 396 | + ); | |
| 397 | + | |
| 398 | + $css = $this->addCSS ( array ( | |
| 399 | + 'text-align' => 'center', | |
| 400 | + 'flex-grow' => 2, | |
| 401 | + 'margin' => 'auto', | |
| 402 | + ), | |
| 403 | + '', | |
| 404 | + 'mb-icon-wrapper', | |
| 405 | + 'normal', | |
| 406 | + $css | |
| 407 | + ); | |
| 408 | + | |
| 409 | + $css = $this->addCSS ( array ( | |
| 410 | + // 'font-size' => '16px', | |
| 411 | + 'margin' => 'auto 0', | |
| 412 | + //'flex-grow' => '1', | |
| 413 | + 'display' => 'inline-block', | |
| 414 | + 'transform' => 'translateX(-10px)', | |
| 415 | + ), | |
| 416 | + '', | |
| 417 | + 'mb-share-count', | |
| 418 | + 'normal', | |
| 419 | + $css | |
| 420 | + ); | |
| 421 | + | |
| 422 | + $css = $this->addCSS('flex-grow', '1', 'mb-share-count', 'hover', $css); | |
| 423 | + | |
| 424 | + return $css; | |
| 425 | + } | |
| 426 | + | |
| 83 | 427 | /* Total element is counting all shares and displays some label */ |
| 84 | - protected function totalCSS() | |
| 428 | + protected function addTotal($css) | |
| 85 | 429 | { |
| 86 | - // total main element | |
| 87 | - $this->addFlex('maxbutton-social-total'); | |
| 430 | + // total main element | |
| 431 | + //$this->addFlex('maxbutton-social-total'); | |
| 432 | + $styleBlock = $this->collection->getBlock('styleBlock'); | |
| 433 | + $layoutBlock = $this->collection->getBlock('layoutBlock'); | |
| 88 | 434 | |
| 89 | - $this->addCSS ( array( | |
| 90 | - 'width' => $this->width * 2 . 'px', | |
| 91 | - 'height' => $this->height . 'px', | |
| 92 | - 'font-size' => '16px', | |
| 435 | + $width = $styleBlock->getValue('mbs-width'); | |
| 436 | + $height = $styleBlock->getValue('mbs-height'); | |
| 437 | + | |
| 438 | + // $this->css['maxbutton-social-total']; | |
| 439 | + //$width = $css['mb-social']['normal']['width']; | |
| 440 | + //$height = $css['mb-social']['normal']['height']; | |
| 441 | + | |
| 442 | + /*$width = isset($css['mbsocial']['normal']['width']) ? $css['mbsocial']['normal']['width'] : 'auto'; | |
| 443 | + $height = isset($css['mbsocial']['normal']['height']) ? $css['mbsocial']['normal']['height'] : 'auto'; | |
| 444 | + */ | |
| 445 | + $width = maxUtils::strip_px($width); | |
| 446 | + $height = maxUtils::strip_px($height); | |
| 447 | + | |
| 448 | + // copy mb-item and put it to mb-item-total. Not going to be exactly the same. | |
| 449 | + $itemcss = $css['mb-item']; | |
| 450 | + | |
| 451 | + $css = $this->addCSS($itemcss['normal'], '', 'mb-total-container', 'normal', $css); | |
| 452 | + | |
| 453 | + $margin = maxUtils::strip_px($layoutBlock->getValue('button_spacing')); | |
| 454 | + | |
| 455 | + if ($this->collection->orientation == 'vertical') | |
| 456 | + { | |
| 457 | + $width = $width . 'px'; | |
| 458 | + $height = '100%'; | |
| 459 | + } | |
| 460 | + else { // horizontal | |
| 461 | + $width = ($width + $margin) * 2; | |
| 462 | + $width = $width . 'px'; | |
| 463 | + $height = $height . 'px'; | |
| 464 | + } | |
| 465 | + | |
| 466 | + // attempt to auto-custmz. | |
| 467 | + $count_size = (isset($css['mb-share-count']['normal']['font-size'])) ? $css['mb-share-count']['normal']['font-size'] : '13'; | |
| 468 | + $count_size = maxUtils::strip_px($count_size); | |
| 469 | + | |
| 470 | + $total_count_size = $count_size * 1.5; | |
| 471 | + | |
| 472 | + | |
| 473 | + $css = $this->addCSS ( array( | |
| 474 | + 'width' => $width, | |
| 475 | + 'height' => $height, | |
| 476 | + 'display' => 'flex', | |
| 477 | + 'align-items' => 'center', | |
| 478 | + 'justify-content' => 'center', | |
| 479 | + //'font-size' => '16px', | |
| 93 | 480 | ), |
| 94 | 481 | '', |
| 95 | - 'maxbutton-social-total' | |
| 482 | + 'maxbutton-social-total', | |
| 483 | + 'normal', | |
| 484 | + $css | |
| 96 | 485 | ); |
| 97 | - $this->addCSS ( array ( | |
| 98 | - // 'display' => 'inline-block' | |
| 99 | - ), | |
| 100 | - '', | |
| 101 | - 'mb-totals' | |
| 102 | - ); | |
| 103 | 486 | |
| 104 | 487 | |
| 105 | - | |
| 106 | - $this->addCSS ( array( | |
| 488 | + $css = $this->addCSS ( array( | |
| 107 | 489 | //'float' => 'left', |
| 108 | 490 | 'font-size' => '20px', |
| 109 | 491 | 'width' => '45%', |
| 110 | 492 | 'text-align' => 'left', |
| 493 | + 'height' => 'inherit', | |
| 111 | 494 | //'height' => 'inherit', |
| 495 | + 'display' => 'flex', | |
| 496 | + 'align-items' => 'center', | |
| 497 | + 'justify-content' => 'center', | |
| 112 | 498 | ), |
| 113 | 499 | '', |
| 114 | - 'mb-icon-total'); | |
| 500 | + 'mb-icon-total', | |
| 501 | + 'normal', | |
| 502 | + $css | |
| 503 | + ); | |
| 115 | 504 | |
| 116 | - $this->addCSS ( array ( // *sigh* | |
| 505 | + $css = $this->addCSS ( array ( // *sigh* | |
| 117 | 506 | 'font-size' => '35px', |
| 118 | 507 | //'height' => 'auto', |
| 119 | 508 | 'vertical-align' => 'top', |
| 120 | 509 | ), |
| @@ -119,12 +508,23 @@ | ||
| 119 | 508 | 'vertical-align' => 'top', |
| 120 | 509 | ), |
| 121 | 510 | '', |
| 122 | 511 | 'mb-icon-total-icon', |
| 123 | - 'before' | |
| 512 | + 'before', | |
| 513 | + $css | |
| 124 | 514 | ); |
| 125 | 515 | |
| 126 | - $this->addCSS ( array ( | |
| 516 | + $css = $this->addCSS ( array ( | |
| 517 | + 'width' => '35px', | |
| 518 | + 'height' => '35px' | |
| 519 | + ), | |
| 520 | + '', | |
| 521 | + 'mb-icon-total-icon', | |
| 522 | + 'normal', | |
| 523 | + $css | |
| 524 | + ); | |
| 525 | + | |
| 526 | + $css = $this->addCSS ( array ( | |
| 127 | 527 | //'float' => 'right', |
| 128 | 528 | 'clear' => 'right', |
| 129 | 529 | 'text-align' => 'center', |
| 130 | 530 | // 'width' => '45%', |
| @@ -131,59 +531,75 @@ | ||
| 131 | 531 | 'text-transform' => 'uppercase', |
| 132 | 532 | 'font-size' => '13px', |
| 133 | 533 | ), |
| 134 | 534 | '', |
| 135 | - 'mb-label-total'); | |
| 535 | + 'mb-label-total', | |
| 536 | + 'normal', | |
| 537 | + $css | |
| 538 | + ); | |
| 136 | 539 | |
| 137 | - $this->addCSS ( array ( | |
| 540 | + $css = $this->addCSS ( array ( | |
| 138 | 541 | //'float' => 'right', |
| 139 | 542 | 'text-align' => 'center', |
| 140 | - 'font-size' => '25px', | |
| 543 | + 'font-size' => $total_count_size .'px', | |
| 141 | 544 | |
| 142 | 545 | ), |
| 143 | 546 | '', |
| 144 | - 'mb-count-total'); | |
| 547 | + 'mb-count-total', | |
| 548 | + 'normal', | |
| 549 | + $css | |
| 550 | + ); | |
| 145 | 551 | |
| 146 | - } | |
| 147 | 552 | |
| 148 | - /* Add flexbox definition to element */ | |
| 149 | - public function addFlex($element = 'mb-icon-wrapper') | |
| 150 | - { | |
| 151 | - // add flex to icon wrapper | |
| 152 | - $this->addCSS( array( | |
| 153 | - | |
| 154 | - 'display' => 'flex', | |
| 155 | - 'justify-content' => 'center', | |
| 156 | - 'align-items' => 'center', | |
| 157 | - 'height' => '100%', | |
| 158 | - ), | |
| 159 | - '', | |
| 160 | - $element | |
| 161 | - ); | |
| 553 | + return $css; | |
| 162 | 554 | } |
| 163 | 555 | |
| 164 | 556 | |
| 165 | - public function addCSS($name, $value = '', $element = 'maxbutton-social', $pseudo = 'normal') | |
| 557 | + public function addCSS($name, $value = '', $element = 'mb-social', $pseudo = 'normal', $css = false) | |
| 166 | 558 | { |
| 559 | + if (! $css && !isset($this->css[$element][$pseudo])) | |
| 560 | + { | |
| 561 | + $this->css[$element][$pseudo] = array(); | |
| 562 | + } | |
| 563 | + if ($css && !isset($css[$element][$pseudo])) | |
| 564 | + { | |
| 565 | + $css[$element][$pseudo] = array(); | |
| 566 | + } | |
| 167 | 567 | |
| 168 | - if (! isset($this->css[$element][$pseudo])) | |
| 169 | - $this->css[$element][$pseudo] = array(); | |
| 170 | - | |
| 171 | 568 | if ( is_array($name)) |
| 172 | 569 | { |
| 173 | 570 | foreach ($name as $n => $v) |
| 174 | 571 | { |
| 175 | - $this->css[$element][$pseudo][$n] = $v; | |
| 572 | + if ($css) | |
| 573 | + $css[$element][$pseudo][$n] = $v; | |
| 574 | + else | |
| 575 | + { | |
| 576 | + $this->css[$element][$pseudo][$n] = $v; | |
| 577 | + } | |
| 176 | 578 | } |
| 177 | 579 | |
| 178 | 580 | } |
| 179 | 581 | else |
| 180 | - $this->css[$element][$pseudo][$name] = $value; | |
| 582 | + { | |
| 583 | + if ($css) | |
| 584 | + { | |
| 585 | + $css[$element][$pseudo][$name] = $value; | |
| 586 | + } | |
| 587 | + else | |
| 588 | + $this->css[$element][$pseudo][$name] = $value; | |
| 589 | + } | |
| 590 | + | |
| 591 | + if ($css) | |
| 592 | + return $css; | |
| 181 | 593 | } |
| 182 | 594 | |
| 183 | - /* Function that runs before the CSS output is collected from the styles to be brought to the CSSParser. Load with env. details will allow for relevant changes */ | |
| 595 | + | |
| 596 | + | |
| 597 | + | |
| 598 | + /* Function that runs before the CSS output is collected from the blocks to be brought to the CSSParser. Load with env. details will allow for relevant changes */ | |
| 184 | 599 | public function prepareCSS($args) |
| 185 | 600 | { |
| 601 | + | |
| 186 | 602 | $default_args = array( |
| 187 | 603 | 'orientation' => 'horizontal', |
| 188 | 604 | 'is_static' => false, |
| 189 | 605 | 'is_post' => false, |
| @@ -192,17 +608,14 @@ | ||
| 192 | 608 | ); |
| 193 | 609 | |
| 194 | 610 | $args = wp_parse_args($args, $default_args); |
| 195 | 611 | |
| 196 | - $this->mainCSS(); | |
| 197 | - | |
| 198 | - $this->totalCSS(); | |
| 199 | - | |
| 200 | 612 | if ($args['orientation'] == 'vertical') |
| 201 | 613 | { |
| 202 | 614 | $this->addCSS(array( |
| 203 | - 'width' => $this->width . 'px', | |
| 204 | - 'height' => $this->height . 'px', | |
| 615 | + /* 'width' => $this->width . 'px', | |
| 616 | + 'height' => $this->height . 'px', */ | |
| 617 | + // 'width' => '100%', | |
| 205 | 618 | 'flex-direction' => 'column' |
| 206 | 619 | ), |
| 207 | 620 | '', |
| 208 | 621 | 'maxbutton-social-total' |
| @@ -214,49 +627,156 @@ | ||
| 214 | 627 | |
| 215 | 628 | |
| 216 | 629 | } |
| 217 | 630 | |
| 218 | - /* Function for changes to CSS ( eg styling exceptions ) after blocks generated CSS */ | |
| 219 | - public function preParse($css) | |
| 631 | + public function processDisplay($css = false) | |
| 220 | 632 | { |
| 221 | - return $css; | |
| 633 | + $display = $this->display; | |
| 634 | + $active_displays = $this->display_active; | |
| 222 | 635 | |
| 636 | + foreach($display as $pseudo => $item) | |
| 637 | + { | |
| 638 | + //$normal = $display['normal']; | |
| 639 | + $hides = array(); | |
| 640 | + | |
| 641 | + if (is_array($item)) // if display list is an array | |
| 642 | + { | |
| 643 | + foreach($item as $i) | |
| 644 | + { | |
| 645 | + if (in_array($i, $active_displays)) | |
| 646 | + { | |
| 647 | + $hides = $this->items; | |
| 648 | + | |
| 649 | + $statement = 'inline-block'; | |
| 650 | + | |
| 651 | + $css = $this->addCSS('display',$statement, $this->items[$i], $pseudo, $css); | |
| 652 | + // $css = $this->addCSS('opacity','1', $this->items[$i], $pseudo, $css); | |
| 653 | + unset($hides[$i]); | |
| 654 | + break; | |
| 655 | + } | |
| 656 | + } | |
| 657 | + } | |
| 658 | + elseif (strpos($item, ',') !== false) // if display list is comma-separated | |
| 659 | + { | |
| 660 | + $show_items = explode(',', $item); | |
| 661 | + $hides = $this->items; | |
| 662 | + foreach($show_items as $i) | |
| 663 | + { | |
| 664 | + unset($hides[$i]); | |
| 665 | + $statement = 'inline-block'; | |
| 666 | + | |
| 667 | + $css = $this->addCSS('display', $statement, $this->items[$i], $pseudo, $css); | |
| 668 | + //$css = $this->addCSS('opacity', '1', $this->items[$i], $pseudo, $css); | |
| 669 | + } | |
| 670 | + } | |
| 671 | + else { // if display list is just one item. | |
| 672 | + $hides = $this->items; | |
| 673 | + unset($hides[$item]); | |
| 674 | + | |
| 675 | + $statement = 'inline-block'; | |
| 676 | + | |
| 677 | + | |
| 678 | + $css = $this->addCSS('display',$statement,$this->items[$item], $pseudo, $css); | |
| 679 | + //$css = $this->addCSS('opacity','1',$this->items[$item], $pseudo, $css); | |
| 680 | + } | |
| 681 | + | |
| 682 | + foreach($hides as $name => $cname) | |
| 683 | + { | |
| 684 | + $css = $this->addCSS('display','none', $cname, $pseudo, $css); | |
| 685 | + //$css = $this->addCSS('opacity','0', $cname, $pseudo, $css); | |
| 686 | + } | |
| 687 | + | |
| 688 | + } | |
| 689 | + | |
| 690 | + return $css; | |
| 223 | 691 | } |
| 224 | 692 | |
| 225 | - // for now argument is network only,might add to options here later | |
| 226 | - // This is the basis for style bases icon library swapping | |
| 227 | - public function renderIcon($network) | |
| 693 | + // Let The style know some display item has been added. | |
| 694 | + public function addDisplay($item) | |
| 228 | 695 | { |
| 229 | - $icon = $network->get('icon'); | |
| 230 | - $icon_type = $network->get('icon_type'); | |
| 696 | + $this->display_active[] = $item; | |
| 231 | 697 | |
| 232 | - $network_name = $network->get_nice_name(); | |
| 698 | + } | |
| 233 | 699 | |
| 700 | + /* Function for changes to CSS ( eg styling exceptions ) after blocks generated CSS. Runs BEFORE the final CSS Parse run */ | |
| 701 | + public function preParse($css) | |
| 702 | + { | |
| 703 | + $w = MBSocial()->whistle(); | |
| 234 | 704 | |
| 705 | + $css = $this->processDisplay($css); | |
| 706 | + //$w->tell('display/env/has_totals', true); | |
| 235 | 707 | |
| 708 | + $display = $this->display; | |
| 236 | 709 | |
| 237 | - switch($icon_type) | |
| 238 | - { | |
| 239 | - case 'fa': | |
| 240 | - case 'nucleo': | |
| 241 | - $output = "<i class='mb-icon " . $icon_type . " " . $icon . "' title='" . $network_name . "' > </i>"; | |
| 242 | - break; | |
| 243 | - case 'svg': | |
| 244 | - $output = "<img class='mb-icon " . $icon_type . "' src='" . $icon . "' alt='" . $network_name . "'>"; | |
| 245 | - break; | |
| 246 | - default: | |
| 247 | - $output = ''; | |
| 248 | - break; | |
| 249 | - } | |
| 710 | + $active_displays = $this->display_active; | |
| 711 | + $effect_active = $this->effect_active; | |
| 250 | 712 | |
| 251 | - return apply_filters('mbsocial/rendericon', $output, $this, $network); | |
| 713 | + $has_totals = $w->ask('display/env/has_totals'); | |
| 714 | + if ($has_totals) | |
| 715 | + { | |
| 716 | + $css = $this->addTotal($css); | |
| 717 | + } | |
| 252 | 718 | |
| 719 | + if ($effect_active) | |
| 720 | + { | |
| 721 | + switch($effect_active) | |
| 722 | + { | |
| 723 | + case "flip": | |
| 724 | + | |
| 725 | + $items = array('mb-share-count', 'mb-label'); | |
| 726 | + | |
| 727 | + foreach($items as $item) | |
| 728 | + { | |
| 729 | + if (isset($css[$item]['hover']['display']) && $css[$item]['hover']['display'] != 'none') | |
| 730 | + { | |
| 731 | + $css[$item]['hover']['display'] = 'flex'; | |
| 732 | + $css[$item]['normal']['display'] = 'flex'; | |
| 733 | + } | |
| 734 | + } | |
| 735 | + | |
| 736 | + $css['mb-icon-wrapper']['hover']['display'] = 'flex'; | |
| 737 | + $css['mb-icon-wrapper']['normal']['display'] = 'flex'; | |
| 738 | + break; | |
| 739 | + case 'stretch': | |
| 740 | + if ( isset( $css['mb-total-container'] ) && isset($css['mb-total-container']['normal']['flex']) ) | |
| 741 | + { | |
| 742 | + unset($css['mb-total-container']['normal']['flex']); // remove flex on total container | |
| 743 | + } | |
| 744 | + | |
| 745 | + break; | |
| 746 | + case 'lift': | |
| 747 | + case 'shift': | |
| 748 | + case 'drop': | |
| 749 | + | |
| 750 | + $items = array('mb-share-count', 'mb-label'); | |
| 751 | + | |
| 752 | + foreach($items as $item) | |
| 753 | + { | |
| 754 | + if (isset($css[$item]['hover']['display']) && $css[$item]['hover']['display'] != 'none') | |
| 755 | + { | |
| 756 | + $css[$item]['hover']['display'] = 'inline-block'; | |
| 757 | + $css[$item]['normal']['display'] = 'inline-block'; | |
| 758 | + } | |
| 759 | + } | |
| 760 | + $css['mb-icon-wrapper']['hover']['display'] = 'inline-block'; | |
| 761 | + // $css['mb-icon-wrapper']['normal']['display'] = 'inline-block'; | |
| 762 | + | |
| 763 | + | |
| 764 | + break; | |
| 765 | + } // switch | |
| 766 | + } // if | |
| 767 | + | |
| 768 | + $this->display_active = array(); // just before parse, prepare for next. | |
| 769 | + | |
| 770 | + return $css; | |
| 771 | + | |
| 253 | 772 | } |
| 254 | 773 | |
| 255 | 774 | // function to plug into when the style is set active in a collection. Can be used to hook into style specific layout options. |
| 256 | - public function setActive() | |
| 775 | + | |
| 776 | + public function setActive($collection) | |
| 257 | 777 | { |
| 258 | - | |
| 778 | + $this->collection = $collection; | |
| 259 | 779 | } |
| 260 | 780 | |
| 261 | 781 | |
| 262 | 782 | } // class |
