Exemple #1
0
 public static function progress_bar($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('style' => '1', 'percent' => 75, 'show_percent' => 'yes', 'text' => '', 'bar_color' => '', 'fill_color' => '', 'text_color' => '', 'animation' => 'easeInOutExpo', 'duration' => 1.5, 'delay' => 0.3, 'scroll_reveal' => '', 'class' => ''), $atts, 'progress_bar');
     $id = uniqid('suc');
     $css = array();
     $classes = array('su-progress-bar', 'su-progress-bar-style-' . $atts['style'], su_ecssc($atts));
     if ($atts['bar_color']) {
         $css[] = '#' . $id . '.su-progress-bar { background-color:' . $atts['bar_color'] . '; border-color:' . su_color::darken($atts['bar_color'], '10%') . ';' . '}';
     }
     if ($atts['fill_color'] or $atts['text_color']) {
         $fill_color = $atts['fill_color'] ? 'background-color:' . $atts['fill_color'] . ';' : '';
         $text_color = $atts['text_color'] ? 'color:' . $atts['text_color'] . ';' : '';
         $css[] = '#' . $id . '.su-progress-bar > span {' . $fill_color . $text_color . '}';
     }
     $text = $atts['text'] ? '<span class="su-pb-text">' . $atts['text'] . '</span>' : '';
     $show_percent = $atts['show_percent'] !== 'no' ? '<span class="su-pb-percent">' . $atts['percent'] . '%</span>' : '';
     // Add CSS and JS in head
     suAsset::addFile('css', 'progress-bar.css', __FUNCTION__);
     suAsset::addFile('js', 'jquery.easing.js');
     suAsset::addFile('js', 'jquery.appear.js');
     suAsset::addFile('js', 'progress-bar.js', __FUNCTION__);
     suAsset::addString('css', implode("\n", $css));
     $return = '<div id="' . $id . '"' . su_scroll_reveal($atts) . ' class="' . su_acssc($classes) . '"><span class="su-pb-fill" data-percent="' . $atts['percent'] . '" data-animation="' . $atts['animation'] . '" data-duration="' . $atts['duration'] . '" data-delay="' . $atts['delay'] . '">' . $text . $show_percent . '</span></div>';
     return $return;
 }
Exemple #2
0
 public static function fancy_text($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('type' => '1', 'tags' => 'Hello, Text', 'scroll_reveal' => '', 'class' => ''), $atts, 'fancy_tags');
     // Inistial Variables
     $id = uniqid("ft_");
     $tags = array();
     $tag = '';
     // class manage
     $classes = array('su-fancy-text', 'su-fteffect' . $atts['type'], su_ecssc($atts));
     // Fancy Text interchangeable tag spliting
     if ($atts['tags']) {
         $tags = explode(',', $atts['tags']);
         foreach ($tags as $word) {
             $tag .= '<b>' . $word . '</b>';
         }
         $tag = str_replace('<b>' . $tags['0'] . '</b>', '<b class="is-visible">' . $tags['0'] . '</b>', $tag);
     }
     // Manage class for different type of Fancy Text
     if ($atts['type'] == 1 or $atts['type'] == 2 or $atts['type'] == 4 or $atts['type'] == 5) {
         $classes[] = 'su-ft-letters';
     }
     // Add css file in head
     suAsset::addFile('css', 'fancy_text.css', __FUNCTION__);
     // Add javascript file in head
     suAsset::addFile('js', 'fancy_text.js', __FUNCTION__);
     // HTML Ourput
     $return = "\r\n            <span" . su_scroll_reveal($atts) . " id='" . $id . "' class='" . su_acssc($classes) . "'>\r\n                <span class='su-ft-wrap'>\r\n                    " . $tag . "\r\n                </span>\r\n            </span>";
     return $return;
 }
Exemple #3
0
 public static function column_inner($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('size' => '1/1', 'medium' => '', 'small' => '', 'visible' => '', 'hidden' => '', 'center' => 'no', 'scroll_reveal' => '', 'class' => ''), $atts, 'column_inner');
     $id = uniqid('sucol');
     $css = array();
     $classes = array('su-column', su_ecssc($atts));
     if ($atts['small']) {
         $classes[] = 'su-column-size-small-' . str_replace('/', '-', $atts['small']);
     } else {
         $classes[] = 'su-column-size-1-1';
     }
     if ($atts['medium']) {
         $classes[] = 'su-column-size-medium-' . str_replace('/', '-', $atts['medium']);
     }
     if ($atts['size'] and $atts['medium']) {
         $classes[] = 'su-column-size-large-' . str_replace('/', '-', $atts['size']);
     } else {
         $classes[] = 'su-column-size-medium-' . str_replace('/', '-', $atts['size']);
     }
     if ($atts['visible']) {
         $classes[] = 'su-visible-' . $atts['visible'];
     }
     if ($atts['hidden']) {
         $classes[] = 'su-hidden-' . $atts['hidden'];
     }
     if ($atts['center'] === 'yes') {
         $classes[] = 'su-column-centered';
     }
     suAsset::addFile('css', 'row-column.css');
     return '<div id="' . $id . '"' . su_scroll_reveal($atts) . ' class="' . su_acssc($classes) . '"><div class="su-column-inner su-clearfix">' . su_do_shortcode($content) . '</div></div>';
 }
Exemple #4
0
 public static function progress_pie($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('percent' => 75, 'text' => '', 'before' => '', 'after' => '', 'size' => 200, 'line_width' => 10, 'text_size' => 22, 'align' => 'center', 'bar_color' => '#F14B51', 'fill_color' => '#f5f5f5', 'show_scale' => 'yes', 'scale_color' => '#dddddd', 'text_color' => '#bbbbbb', 'line_cap' => 'round', 'animation' => 'easeInOut', 'duration' => 1, 'delay' => 0.3, 'scroll_reveal' => '', 'class' => ''), $atts, 'progress_pie');
     $id = uniqid('sud');
     $css[] = '';
     $classes = array('su-progress-pie', 'su-pp-align-' . $atts['align'], su_ecssc($atts));
     $scale = $atts['show_scale'] === 'yes' ? $atts['scale_color'] : 'false';
     if (!$atts['text']) {
         $atts['text'] = $atts['percent'];
         $classes[] = 'su-pp-percent';
     }
     $css[] = '#' . $id . ' { width:' . intval($atts['size']) . 'px; height:' . intval($atts['size']) . 'px;' . '}';
     $css[] = '#' . $id . ' .su-pp-tc { color:' . $atts['text_color'] . '; line-height:' . $atts['size'] . 'px; font-size:' . $atts['text_size'] . 'px }';
     // Add CSS and JS in head
     suAsset::addString('css', implode("\n", $css));
     suAsset::addFile('css', 'progress-pie.css', __FUNCTION__);
     suAsset::addFile('js', 'jquery.easing.js');
     suAsset::addFile('js', 'jquery.appear.js');
     suAsset::addFile('js', 'easypiechart.js', __FUNCTION__);
     suAsset::addFile('js', 'progress-pie.js', __FUNCTION__);
     $return = '<div' . su_scroll_reveal($atts) . ' id="' . $id . '" class="' . su_acssc($classes) . '" data-percent="' . intval($atts['percent']) . '" data-size="' . intval($atts['size']) . '" data-line_width="' . intval($atts['line_width']) . '" data-line_cap="' . $atts['line_cap'] . '" data-bar_color="' . $atts['bar_color'] . '" data-fill_color="' . $atts['fill_color'] . '" data-scale_color="' . $scale . '" data-animation="' . $atts['animation'] . '" data-delay="' . $atts['delay'] . '" data-duration="' . floatval($atts['duration']) . '">';
     $return .= '<div class="su-pp-tc">';
     $return .= '<span class="su-pp-before">' . $atts['before'] . '</span>';
     $return .= '<span class="su-pp-text">' . $atts['text'] . '</span>';
     $return .= '<span class="su-pp-after">' . $atts['after'] . '</span>';
     $return .= '</div>';
     $return .= '</div>';
     return $return;
 }
Exemple #5
0
 public static function divider($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('style' => 1, 'align' => 'center', 'icon' => '', 'icon_style' => '1', 'icon_color' => '#b5b5b5', 'icon_size' => '16', 'icon_align' => 'center', 'top' => 'no', 'color' => '#EEEEEE', 'width' => 100, 'margin_top' => 10, 'margin_bottom' => 10, 'margin_left' => '', 'margin_right' => '', 'scroll_reveal' => '', 'class' => ''), $atts, 'divider');
     $id = uniqid('sud');
     $classes = array('su-divider', 'su-divider-style-' . $atts['style'], 'su-icon-style-' . $atts['icon_style'], 'su-divider-align-' . $atts['align'], su_ecssc($atts));
     $top_link_margin = '';
     $margin = '';
     $has_icon = '';
     $icon = '';
     $css = array();
     if ($atts['icon']) {
         if (strpos($atts['icon'], 'licon:') !== false) {
             suAsset::addFile('css', 'linea.css');
             $icon = '<i class="li li-' . trim(str_replace('licon:', '', $atts['icon'])) . '"></i>';
             $css[] = '#' . $id . '.su-divider > span {font-size:' . $atts['icon_size'] . 'px;border-color:' . $atts['color'] . ';}';
             $css[] = '#' . $id . '.su-divider i {color:' . $atts['icon_color'] . ';height:' . $atts['icon_size'] . 'px;width:' . $atts['icon_size'] . 'px;padding:' . round($atts['icon_size'] / 2) . 'px;}';
         } elseif (strpos($atts['icon'], 'icon:') !== false) {
             $icon = '<i class="fa fa-' . trim(str_replace('icon:', '', $atts['icon'])) . '"></i>';
             $css[] = '#' . $id . '.su-divider > span {font-size:' . $atts['icon_size'] . 'px;border-color:' . $atts['color'] . ';}';
             $css[] = '#' . $id . '.su-divider i {color:' . $atts['icon_color'] . ';height:' . $atts['icon_size'] . 'px;width:' . $atts['icon_size'] . 'px;padding:' . round($atts['icon_size'] / 2) . 'px;}';
         } elseif (strpos($atts['icon'], '/') !== false) {
             $icon = '<img src="' . image_media($atts['icon']) . '" alt="" />';
             $css[] = '#' . $id . ' img {width:' . $atts['icon_size'] . 'px;}';
         }
         if ($atts['top'] === 'yes') {
             $icon = '<a data-uk-smooth-scroll href="#">' . $icon . '</a>';
             $classes[] = 'has-toplink';
         }
     }
     if ($atts['style'] == 7) {
         $css[] = '#' . $id . '.su-divider-style-7 span.divider-left { background-image: -webkit-linear-gradient(45deg, ' . $atts['color'] . ' 25%, transparent 25%, transparent 50%, ' . $atts['color'] . ' 50%, ' . $atts['color'] . ' 75%, transparent 75%, transparent);
         background-image: linear-gradient(45deg, ' . $atts['color'] . ' 25%, transparent 25%, transparent 50%, ' . $atts['color'] . ' 50%, ' . $atts['color'] . ' 75%, transparent 75%, transparent);}';
         $css[] = '#' . $id . '.su-divider-style-7 span.divider-right {background-image: -webkit-linear-gradient(45deg, ' . $atts['color'] . ' 25%, transparent 25%, transparent 50%, ' . $atts['color'] . ' 50%, ' . $atts['color'] . ' 75%, transparent 75%, transparent);
         background-image: linear-gradient(45deg, ' . $atts['color'] . ' 25%, transparent 25%, transparent 50%, ' . $atts['color'] . ' 50%, ' . $atts['color'] . ' 75%, transparent 75%, transparent);}';
     }
     if ($atts['margin_top'] or $atts['margin_right'] or $atts['margin_bottom'] or $atts['margin_left']) {
         $margin = 'margin: ';
         $margin .= $atts['margin_top'] ? intval($atts['margin_top']) . 'px ' : '0 ';
         $margin .= $atts['margin_right'] ? intval($atts['margin_right']) . 'px ' : 'auto ';
         $margin .= $atts['margin_bottom'] ? intval($atts['margin_bottom']) . 'px ' : '0 ';
         $margin .= $atts['margin_left'] ? intval($atts['margin_left']) . 'px;' : 'auto;';
     }
     // Get Css in $css variable
     $css[] = '#' . $id . '.su-divider { width:' . intval($atts['width']) . '%;' . $margin . ';text-align: ' . $atts['icon_align'] . ';}';
     $css[] = '#' . $id . '.su-divider span:before, #' . $id . ' span:after { border-color: ' . $atts['color'] . ';}';
     $css[] = '#' . $id . '.su-icon-style-2 > span { background: ' . $atts['color'] . ';border-radius: 50%;}';
     // Add CSS in head
     suAsset::addString('css', implode("\n", $css));
     suAsset::addFile('css', 'divider.css', __FUNCTION__);
     // Output HTML
     return '<div id="' . $id . '"' . su_scroll_reveal($atts) . ' class="' . su_acssc($classes) . '">
                 <span>
                     <span class="divider-left"></span>
                        ' . $icon . '
                     <span class="divider-right"></span>
                 </span>
             </div>';
 }
Exemple #6
0
 public static function device_slider($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('source' => '', 'limit' => 5, 'device' => 'imac', 'arrows' => 'no', 'pagination' => 'no', 'autoplay' => 'yes', 'autoheight' => 'no', 'delay' => 4, 'speed' => 0.6, 'hoverpause' => 'yes', 'lazyload' => 'no', 'loop' => 'yes', 'lightbox' => 'no', 'margin' => 0, 'scroll_reveal' => '', 'class' => ''), $atts, 'device_slider');
     $id = uniqid('suds');
     $return = array();
     $classes = array('su-device-slider');
     if ($atts['lightbox'] === 'yes') {
         $classes[] = 'has-lightbox';
     }
     // if ($atts['transitionin'] === 'slide')
     //     $atts['transitionin'] = 'false';
     $slides = (array) Su_Tools::get_slides($atts);
     $device = file_exists(BDT_SU_ROOT . DIRECTORY_SEPARATOR . 'shortcodes' . DIRECTORY_SEPARATOR . 'device_slider' . DIRECTORY_SEPARATOR . 'images' . DIRECTORY_SEPARATOR . $atts['device'] . '.png');
     if (count($slides)) {
         $return[] = '<div' . su_scroll_reveal($atts) . ' class="su-device-slider-wrapper su-device-' . $atts['device'] . '">';
         $return[] = '<img class="su-device-slider-device" src="' . BDT_SU_URI . '/shortcodes/device_slider/images/' . $atts['device'] . '.png" alt="' . $atts['device'] . '">';
         $return[] = '<div id="' . $id . '" class="' . su_acssc($classes) . '" data-autoplay="' . $atts['autoplay'] . '" data-delay="' . $atts['delay'] . '" data-speed="' . $atts['speed'] . '" data-arrows="' . $atts['arrows'] . '" data-pagination="' . $atts['pagination'] . '" data-lazyload="' . $atts['lazyload'] . '" data-loop="' . $atts['loop'] . '" data-hoverpause="' . $atts['hoverpause'] . '">';
         $limit = 0;
         foreach ($slides as $slide) {
             if ($slide['image']) {
                 if ($limit++ == $atts['limit']) {
                     break;
                 }
                 if ($atts['device'] == 'imac' or $atts['device'] == 'macbook') {
                     $image = su_image_resize($slide['image'], 944, 590);
                 } elseif ($atts['device'] == 'ipad') {
                     $image = su_image_resize($slide['image'], 596, 771);
                 } elseif ($atts['device'] == 'iphone' or $atts['device'] == 'galaxys6') {
                     $image = su_image_resize($slide['image'], 447, 762);
                 }
                 $return[] = '<div class="su-device-slide-item">';
                 if ($atts['lightbox'] === 'yes') {
                     $return[] = '
                                     <div class="su-device-links">
                                         <a class="su-lightbox-item" href="' . image_media($slide['image']) . '" title="' . strip_tags($slide['title']) . '"><i class="fa fa-search"></i></a>
                                     </div>';
                 }
                 $return[] = '<img src="' . image_media($image['url']) . '" alt="' . esc_attr($slide['title']) . '" />';
                 $return[] = '</div>';
             }
         }
         $return[] = '</div>';
         $return[] = '</div>';
         suAsset::addFile('css', 'owl.carousel.css');
         suAsset::addFile('css', 'device_slider.css', __FUNCTION__);
         suAsset::addFile('js', 'owl.carousel.min.js');
         suAsset::addFile('js', 'device_slider.js', __FUNCTION__);
         if ($atts['lightbox'] === 'yes') {
             suAsset::addFile('css', 'magnific-popup.css');
             suAsset::addFile('js', 'magnific-popup.js');
         }
         return implode('', $return);
     } else {
         return alert_box(JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_DEVICE_SLIDER_ERROR'), 'warning');
     }
 }
Exemple #7
0
 public static function row($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('gutter' => '', 'divider' => 'no', 'divider_color' => '', 'margin_bottom' => 'yes', 'margin_top' => 'no', 'equal_height' => 'no', 'scroll_reveal' => '', 'class' => ''), $atts);
     $id = uniqid('surow');
     $divider = $atts['divider'] === 'yes' ? 'has-divider' : '';
     $margin_top = $atts['margin_top'] === 'yes' ? 'margin-top-yes' : '';
     $margin_bottom = $atts['margin_bottom'] === 'yes' ? 'margin-bottom-yes' : '';
     $gutter = $atts['gutter'] ? 'su-gutter-' . $atts['gutter'] : '';
     $classes = array('su-row', $margin_top, $margin_bottom, $divider, $gutter, su_ecssc($atts));
     $classes[] = $atts['equal_height'] === 'yes' ? 'su-row-match' : '';
     return '<div id="' . $id . '"' . su_scroll_reveal($atts) . ' class="' . su_acssc($classes) . '">' . su_do_shortcode($content) . '</div>';
 }
Exemple #8
0
 public static function blockquote($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('font' => 'default', 'cite' => false, 'url' => false, 'align' => 'default', 'pull' => 'no', 'italic' => 'no', 'scroll_reveal' => '', 'class' => ''), $atts, 'blockquote');
     $cite_link = $atts['url'] && $atts['cite'] ? '<a href="' . $atts['url'] . '" target="_blank">' . $atts['cite'] . '</a>' : $atts['cite'];
     $cite = $atts['cite'] ? '<span class="su-blockquote-cite">' . $cite_link . '</span>' : '';
     $classes = array('su-blockquote', 'su-blockquote-align-' . $atts['align'], 'su-blockquote-font-' . $atts['font'], su_ecssc($atts));
     $classes[] = $atts['cite'] ? 'su-blockquote-has-cite' : '';
     $classes[] = $atts['pull'] === 'yes' ? 'su-blockquote-pull' : '';
     $classes[] = $atts['italic'] === 'yes' ? 'su-blockquote-italic' : '';
     suAsset::addFile('css', 'blockquote.css', __FUNCTION__);
     return '<div class="' . su_acssc($classes) . '"' . su_scroll_reveal($atts) . '><div class="su-blockquote-inner su-clearfix">' . su_do_shortcode($content) . '</div> ' . su_scattr($cite) . ' </div>';
 }
Exemple #9
0
 public static function video($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('style' => 'dark', 'url' => false, 'poster' => false, 'title' => '', 'width' => 600, 'height' => 300, 'controls' => 'yes', 'autoplay' => 'no', 'volume' => 50, 'loop' => 'no', 'scroll_reveal' => '', 'class' => ''), $atts, 'video');
     $atts['url'] = su_scattr($atts['url']);
     $id = uniqid('su_video_player_');
     if (!$atts['url']) {
         return alert_box(JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_VIDEO_CU'), 'warning');
     }
     $classes = array('su-video', 'jPlayer-' . $atts['style'], 'su-video-controls-' . $atts['controls'], su_ecssc($atts), 'jPlayer');
     $title = $atts['title'] ? '<div class="jplayer-title">' . $atts['title'] . '</div>' : '';
     suAsset::addFile('css', 'jplayer.skin.css');
     suAsset::addFile('js', 'jplayer.js');
     suAsset::addFile('js', 'video.js', __FUNCTION__);
     return '<div id="' . $id . '_container"' . su_scroll_reveal($atts) . ' class="' . su_acssc($classes) . '" data-id="' . $id . '" data-video="' . image_media($atts['url']) . '" data-poster="' . image_media($atts['poster']) . '" data-volume="' . $atts['volume'] . '" data-title="' . $atts['title'] . '" data-swf="' . (BDT_SU_URI . '/other/jplayer.swf') . '" data-autoplay="' . $atts['autoplay'] . '" data-loop="' . $atts['loop'] . '">
                 <div class="playerScreen">
                     <div id="' . $id . '" class="jPlayer-container"></div>' . $title . '
                     <a tabindex="1" href="#" class="video-play"><div class="play-icon"><i class="fa fa-play-circle-o"></i></div></a>
                 </div>
                 <div class="controls">
                     <div class="controlset left">
                         <a tabindex="1" href="#" class="play smooth"><i class="fa fa-play"></i></a>
                         <a tabindex="1" href="#" class="pause smooth"><i class="fa fa-pause"></i></a>
                     </div>
                     <div class="controlset right-volume">
                         <a tabindex="1" href="#" class="mute smooth"><i class="fa fa-volume-up"></i></a>
                         <a tabindex="1" href="#" class="unmute smooth"><i class="fa fa-volume-off"></i></a>
                     </div>
                     <div class="volumeblock">
                         <div class="volume-control"><div class="volume-value"></div></div>
                     </div>
                     <div class="controlset right">
                         <a href="#" tabindex="1" class="fullscreen smooth"><i class="fa fa-expand"></i></a>
                         <a href="#" tabindex="1" class="smallscreen smooth"><i class="fa fa-compress"></i></a>
                     </div>
                     <div class="jpprogress-block">
                         <div class="timer current"></div>
                         <div class="timer duration"></div>
                         <div class="jpprogress">
                             <div class="seekBar">
                                 <div class="playBar"></div>
                             </div>
                         </div>
                     </div>
  
                 </div>
             </div>';
 }
Exemple #10
0
 public static function column($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('size' => '1/1', 'medium' => '', 'small' => '', 'visible' => '', 'hidden' => '', 'center' => 'no', 'last' => '', 'background' => '', 'color' => '', 'padding' => '', 'scroll_reveal' => '', 'class' => ''), $atts, 'column');
     $id = uniqid('sucol');
     $css = array();
     $classes = array('su-column', su_ecssc($atts));
     if ($atts['small']) {
         $classes[] = 'su-column-size-small-' . str_replace('/', '-', $atts['small']);
     } else {
         $classes[] = 'su-column-size-1-1';
     }
     if ($atts['medium']) {
         $classes[] = 'su-column-size-medium-' . str_replace('/', '-', $atts['medium']);
     }
     if ($atts['size'] and $atts['medium']) {
         $classes[] = 'su-column-size-large-' . str_replace('/', '-', $atts['size']);
     } else {
         $classes[] = 'su-column-size-medium-' . str_replace('/', '-', $atts['size']);
     }
     if ($atts['visible']) {
         $classes[] = 'su-visible-' . $atts['visible'];
     }
     if ($atts['hidden']) {
         $classes[] = 'su-hidden-' . $atts['hidden'];
     }
     if ($atts['last'] == 'yes' or $atts['last'] == '1') {
         $classes[] = 'su-column-last';
     }
     if ($atts['center'] === 'yes') {
         $classes[] = 'su-column-centered';
     }
     if ($atts['background']) {
         $atts['background'] = 'background-color: ' . $atts['background'] . ';';
     }
     if ($atts['color']) {
         $atts['color'] = 'color: ' . $atts['color'] . ';';
     }
     if ($atts['padding']) {
         $atts['padding'] = 'padding: ' . $atts['padding'] . 'px;';
     }
     if ($atts['background'] or $atts['color']) {
         $css[] = '#' . $id . '.su-column .su-column-inner {' . $atts['background'] . $atts['color'] . $atts['padding'] . '}';
     }
     suAsset::addFile('css', 'row-column.css');
     suAsset::addString('css', implode("\n", $css));
     return '<div id="' . $id . '"' . su_scroll_reveal($atts) . ' class="' . su_acssc($classes) . '"><div class="su-column-inner su-clearfix">' . su_do_shortcode($content) . '</div></div>';
 }
Exemple #11
0
 public static function instagram($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('user' => 'https://instagram.com/google', 'hash_tag' => '', 'client_id' => '', 'limit' => '10', 'link_type' => 'popup', 'column' => 6, 'medium' => 3, 'small' => 2, 'gap' => 'yes', 'scroll_reveal' => '', 'class' => ''), $atts, 'instagram');
     $id = uniqid('suig');
     $css = array();
     $atts['gap'] = $atts['gap'] == "yes" ? 'su-has-gap' : '';
     $link_type = 'su-link-type-' . $atts['link_type'];
     $classes = array('su-instagram', $atts['gap'], $link_type, su_ecssc($atts));
     $settings = array('user' => rtrim($atts['user'], '/'), 'clientId' => $atts['client_id'], 'hashtag' => $atts['hash_tag'] ? explode(",", $atts['hash_tag']) : '', 'tagScope' => "global", 'selectedTab' => $atts['hash_tag'] ? "h1" : "p", 'displayMode' => $atts['link_type'], 'maxResults' => $atts['limit'], 'minItemWidth' => 300, 'maxItemWidth' => 400);
     $js = '
         jQuery(document).ready(function($) {
             "use strict";
             $(".su-instagram").instamax(
                 ' . json_encode($settings) . '
             );
         });
     ';
     if ($atts['column'] != 6) {
         $css[] = '#' . $id . ' .instamax-gallery-item { width: ' . 100 / intval($atts['column']) . '%;}';
     }
     if ($atts['medium'] != 3) {
         $css[] = '@media only screen and (min-width: 480px) and (max-width: 767px) {
             #' . $id . ' .instamax-gallery-item { width: ' . 100 / intval($atts['medium']) . '%;}
         }';
     }
     if ($atts['small'] != 2) {
         $css[] = '@media only screen and (max-width: 479px) {
             #' . $id . ' .instamax-gallery-item { width: ' . 100 / intval($atts['small']) . '%;}
         }';
     }
     suAsset::addFile('css', 'instagram.css', __FUNCTION__);
     suAsset::addString('css', implode("\n", $css));
     suAsset::addFile('js', 'jquery.imagesloaded.js', __FUNCTION__);
     suAsset::addFile('js', 'jquery.instamax.js', __FUNCTION__);
     suAsset::addFile('css', 'magnific-popup.css');
     suAsset::addFile('js', 'magnific-popup.js');
     suAsset::addString('js', $js);
     return '<div id="' . $id . '"' . su_scroll_reveal($atts) . ' class="' . su_acssc($classes) . '"></div>';
 }
Exemple #12
0
 public static function panel($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('background' => '', 'color' => '', 'shadow' => '', 'padding' => '', 'margin' => '', 'border' => '', 'radius' => '', 'text_align' => 'left', 'url' => '', 'scroll_reveal' => '', 'class' => ''), $atts, 'panel');
     $id = uniqid('supnl');
     $padding = '';
     $margin = '';
     $css = array();
     $classes = array('su-panel', su_ecssc($atts));
     if ($atts['url']) {
         $classes[] = 'su-panel-clickable';
         suAsset::addFile('js', 'panel.js', __FUNCTION__);
     }
     if ($atts['padding'] != '' and !intval($atts['padding'])) {
         $padding = 'padding:' . $atts['padding'] . 'px;';
     } elseif ($atts['padding'] != '') {
         $padding = 'padding:' . $atts['padding'] . ';';
     }
     if ($atts['margin'] != '') {
         $margin = 'margin:' . $atts['margin'] . ';';
     }
     $radius = $atts['radius'] ? '-webkit-border-radius:' . $atts['radius'] . ';border-radius:' . $atts['radius'] . ';' : '';
     $border = $atts['border'] != '' ? 'border:' . $atts['border'] . ';' : '';
     $shadow = $atts['shadow'] != '' ? '-webkit-box-shadow:' . $atts['shadow'] . ';box-shadow:' . $atts['shadow'] . ';' : '';
     $background = $atts['background'] != '' ? 'background-color:' . $atts['background'] . ';' : '';
     $color = $atts['color'] != '' ? 'color:' . $atts['color'] . ';' : '';
     $classes[] = $atts['text_align'] ? 'sup-align-' . $atts['text_align'] : '';
     if ($radius or $border or $shadow or $background or $color) {
         $css[] = '#' . $id . '.su-panel { ' . $background . $color . $border . $shadow . $radius . $margin . '}';
     }
     if ($atts['text_align'] or $atts['padding'] != '') {
         $css[] = '#' . $id . '.su-panel .su-panel-content { ' . $padding . '}';
     }
     suAsset::addFile('css', 'panel.css', __FUNCTION__);
     suAsset::addString('css', implode("\n", $css));
     $return = '<div id="' . $id . '"' . su_scroll_reveal($atts) . ' class="' . su_acssc($classes) . '" data-url="' . $atts['url'] . '"><div class="su-panel-content su-content-wrap">' . su_do_shortcode($content) . '</div></div>';
     return $return;
 }
Exemple #13
0
 public static function section($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('background' => '', 'background_color' => '', 'color' => '', 'background_position' => '', 'background_repeat' => '', 'repeat' => '', 'background_attachment' => '', 'background_size' => '', 'background_overlay' => '', 'overlay_opacity' => '0.4', 'background_image' => '', 'image' => '', 'parallax' => 'no', 'parallax_transition' => 'no', 'speed' => '5', 'max_width' => '', 'force_fullwidth' => 'no', 'margin' => '', 'padding' => '', 'border' => '', 'text_align' => '', 'text_shadow' => '', 'url' => '', 'video_url' => '', 'video_loop' => 'yes', 'video_muted' => 'yes', 'video_ratio' => '1.77', 'video_autoplay' => 'yes', 'video_overlay' => '', 'scroll_reveal' => '', 'class' => ''), $atts, 'section');
     $id = uniqid('sec_');
     $css[] = '';
     $classes = array('su-section', su_ecssc($atts));
     $return = array();
     $video = '';
     $lang = JFactory::getLanguage();
     if ($atts['background']) {
         $atts['background_color'] = $atts['background'];
     }
     if ($atts['repeat']) {
         $atts['background_repeat'] = $atts['repeat'];
     }
     if ($atts['image']) {
         $atts['background_image'] = $atts['image'];
     }
     if ($atts['parallax'] === 'yes') {
         $classes[] = 'su-section-parallax';
     }
     if ($atts['parallax_transition'] === 'yes') {
         $classes[] = 'su-sp-transition';
     }
     $rtl_check = $lang->isRTL() ? 1 : 0;
     $background_size = $atts['background_size'] ? 'background-size:' . $atts['background_size'] . ';' : '';
     $background_position = $atts['background_position'] ? 'background-position:' . $atts['background_position'] . ';' : '';
     $background_repeat = $atts['background_repeat'] ? 'background-repeat:' . $atts['background_repeat'] . ';' : '';
     $background_color = $atts['background_color'] ? 'background-color:' . $atts['background_color'] . ';' : '';
     $background_attachment = $atts['background_attachment'] ? 'background-attachment:' . $atts['background_attachment'] . ';' : '';
     $background_overlay = $atts['background_overlay'] ? 'background-image: url(\'' . image_media($atts['background_overlay']) . '\');' : '';
     $overlay_opacity = $atts['overlay_opacity'] ? 'opacity:' . $atts['overlay_opacity'] . ';' : '';
     $background_image = $atts['background_image'] ? 'background-image: url(\'' . image_media($atts['background_image']) . '\');' : $background_color;
     $text_align = $atts['text_align'] ? 'text-align:' . $atts['text_align'] . ';' : '';
     $text_shadow = $atts['text_shadow'] ? ' -webkit-text-shadow:' . $atts['text_shadow'] . '; text-shadow:' . $atts['text_shadow'] . ';' : '';
     $border = $atts['border'] ? 'border-top:' . $atts['border'] . '; border-bottom:' . $atts['border'] . ';' : '';
     $margin = $atts['margin'] ? 'margin:' . $atts['margin'] . ';' : '';
     $padding = $atts['padding'] ? 'padding:' . $atts['padding'] . ';' : '';
     $color = $atts['color'] ? 'color:' . $atts['color'] . ';' : '';
     $color = $atts['color'] ? 'color:' . $atts['color'] . ';' : '';
     if (is_numeric($atts['max_width'])) {
         $max_width = $atts['max_width'] ? 'max-width:' . $atts['max_width'] . 'px;' : '';
     } else {
         $max_width = $atts['max_width'] ? 'max-width:' . $atts['max_width'] . ';' : '';
     }
     $force_fullwidth = $atts['force_fullwidth'] === 'yes' ? 'su-section-forcefullwidth' : '';
     $loop = $atts['video_loop'] === 'yes' ? 'true' : 'false';
     $muted = $atts['video_muted'] === 'yes' ? 'true' : 'false';
     $autoplay = $atts['video_autoplay'] === 'yes' ? 'true' : 'false';
     if (preg_match('"\\.mp4$"', $atts['video_url'])) {
         $video = ' data-mp4="' . image_media($atts['video_url']) . '"';
     } elseif (preg_match('"\\.webm$"', $atts['video_url'])) {
         $video = ' data-webm="' . image_media($atts['video_url']) . '"';
     } elseif (preg_match('"\\.flv$"', $atts['video_url'])) {
         $video = ' data-flv="' . image_media($atts['video_url']) . '"';
     } elseif (preg_match('"(?:watch\\?v=|be\\.com\\/v\\/)(.{8,})"', $atts['video_url'])) {
         preg_match("#(?<=v=)[a-zA-Z0-9-]+(?=&)|(?<=v\\/)[^&\n]+|(?<=v=)[^&\n]+|(?<=youtu.be/)[^&\n]+#", $atts['video_url'], $yurl);
         $video = ' data-youtube="' . $yurl[0] . '"';
     } elseif (preg_match('"(vimeo\\.com?\\/[^\\s]*)"', $atts['video_url'])) {
         preg_match('~(?:<iframe [^>]*src=")?(?:https?:\\/\\/(?:[\\w]+\\.)*vimeo\\.com(?:[\\/\\w]*\\/videos?)?\\/([0-9]+)[^\\s]*)"?(?:[^>]*></iframe>)?(?:<p>.*</p>)?~ix', $atts['video_url'], $vurl);
         $video = ' data-vimeo="' . $vurl[1] . '"';
     }
     $fallback_image = $atts['image'] ? ' data-fallback_image="' . image_media($atts['image']) . '"' : '';
     if ($atts['image'] && $atts['parallax'] === 'yes') {
         $classes[] = 'su-section-parallax';
     }
     if ($atts['url']) {
         $classes[] = 'su-section-clickable';
     }
     $css[] = '#' . $id . ' .su-section {' . $background_size . $background_position . $background_repeat . $background_attachment . $border . $margin . $color . '}';
     $css[] = '#' . $id . ' .su-section-overlay {' . $background_overlay . $overlay_opacity . '}';
     $css[] = '#' . $id . ' .su-section-content {' . $color . $max_width . $text_align . $text_shadow . $padding . '}';
     if ($atts['video_url']) {
         suAsset::addFile('js', 'modernizr.video.js');
         suAsset::addFile('js', 'swfobject.js');
         suAsset::addFile('js', 'video_background.js');
     }
     suAsset::addString('css', implode("\n", $css));
     suAsset::addFile('css', 'section.css', __FUNCTION__);
     suAsset::addFile('js', 'section.js', __FUNCTION__);
     if ($atts['force_fullwidth'] === 'yes') {
         $return[] = '<div class="su-section-forcefullwidth">';
     }
     $return[] = '<div id="' . $id . '"' . su_scroll_reveal($atts) . ' class="su-section-wrapper" data-id="' . $id . '" data-rtl="' . $rtl_check . '">';
     $return[] = '<div class="' . su_acssc($classes) . '" data-url="' . $atts['url'] . '" data-speed="' . $atts['speed'] . '" style="' . $background_image . ';">';
     $return[] = '<div class="su-section-content su-content-wrap">';
     $return[] = su_do_shortcode($content);
     $return[] = '</div>';
     if ($atts['background_overlay']) {
         $return[] = '<div class="su-section-overlay"></div>';
     }
     if ($atts['video_url']) {
         $return[] = '<div class="su-section-video" id="svb_' . $id . '" data-id="svb_' . $id . '" data-loop="' . $loop . '" data-muted="' . $muted . '" data-autoplay="' . $autoplay . '" data-ratio="' . $atts['video_ratio'] . '" data-overlay="' . $atts['video_overlay'] . '" data-swfpath="' . BDT_SU_URI . '/other/video.swf"' . $video . '></div>';
     }
     $return[] = '</div>';
     $return[] = '</div>';
     if ($atts['force_fullwidth'] === 'yes') {
         $return[] = '</div>';
     }
     return implode('', $return);
 }
Exemple #14
0
    public static function icon_list_item($atts = null, $content = null)
    {
        $atts = su_shortcode_atts(array('title' => 'Icon List Heading', 'title_color' => '', 'title_size' => '', 'color' => '', 'icon_background' => 'transparent', 'icon' => 'icon: heart', 'icon_color' => '', 'icon_size' => 24, 'icon_animation' => '', 'icon_border' => '', 'icon_shadow' => '', 'icon_radius' => '', 'icon_align' => 'left', 'icon_padding' => '20px', 'icon_gap' => '', 'connector' => 'no', 'url' => '', 'target' => 'self', 'scroll_reveal' => '', 'scroll_reveal' => '', 'class' => ''), $atts, 'icon_list_item');
        $id = uniqid('suil');
        $css[] = '';
        $has_connector = '';
        $icon_animation = '';
        $shadow = '';
        $icon = '';
        $lang = JFactory::getLanguage();
        if ($lang->isRTL()) {
            if ($atts['icon_align'] === 'left') {
                $atts['icon_align'] = 'right';
            } elseif ($atts['icon_align'] === 'right') {
                $atts['icon_align'] = 'left';
            }
        }
        $has_connector = $atts['connector'] == 'yes' ? ' has-connector ' : '';
        $icon_animation = $atts['icon_animation'] ? 'su-il-animation-' . $atts['icon_animation'] . '' : '';
        $title_color = $atts['title_color'] ? 'color:' . $atts['title_color'] . ';' : '';
        $title_size = $atts['title_size'] ? 'font-size: ' . $atts['title_size'] . ';' : '';
        $radius = $atts['icon_radius'] ? '-webkit-border-radius:' . $atts['icon_radius'] . '; border-radius:' . $atts['icon_radius'] . ';' : '';
        $shadow = $atts['icon_shadow'] ? '-webkit-box-shadow:' . $atts['icon_shadow'] . '; box-shadow:' . $atts['icon_shadow'] . ';' : '';
        $padding = $atts['icon_padding'] ? 'padding:' . $atts['icon_padding'] . ';' : '';
        $border = $atts['icon_border'] ? 'border:' . $atts['icon_border'] . ';' : '';
        $icon_color = $atts['icon_color'] ? 'color:' . $atts['icon_color'] . ';' : '';
        $icon_size = $atts['icon_size'] ? 'font-size: ' . intval($atts['icon_size']) . 'px;' : '';
        $has_url = $atts['url'] != '' ? 'su-il-has-url' : '';
        $classes = array('su-icon-list', 'su-icon-align-' . $atts['icon_align'], $has_connector, $icon_animation, $has_url, su_ecssc($atts));
        if (strpos($atts['icon'], 'licon:') !== false) {
            suAsset::addFile('css', 'linea.css');
            $icon = '<i class="list-img-icon li li-' . trim(str_replace('licon:', '', $atts['icon'])) . '"></i>';
            if ($icon_color or $icon_size) {
                $css[] .= '#' . $id . ' .icon_list_icon .list-img-icon {' . $icon_color . $icon_size . '}';
            }
        } elseif (strpos($atts['icon'], 'icon:') !== false) {
            $icon = '<i class="list-img-icon fa fa-' . trim(str_replace('icon:', '', $atts['icon'])) . '"></i>';
            if ($icon_color or $icon_size) {
                $css[] .= '#' . $id . ' .icon_list_icon .list-img-icon {' . $icon_color . $icon_size . '}';
            }
        } else {
            $icon = '<img class="list-img-icon" src="' . image_media($atts['icon']) . '" style="width:' . $atts['icon_size'] . 'px" alt="" />';
        }
        if ($atts['icon_align'] == 'right') {
            if ($atts['icon_background'] == 'transparent' || $atts['icon_background'] == '' and $atts['icon_border'] == '' || substr($atts['icon_border'], 0, 1) == '0') {
                $description_margin = 'margin-right: ' . ($atts['icon_size'] + 30) . 'px;';
            } else {
                $description_margin = 'margin-right: ' . ($atts['icon_size'] + intval($atts['icon_padding']) * 2 + 30 + intval($atts['icon_border']) * 2) . 'px;';
            }
            $description_margin = $atts['icon_gap'] ? 'margin-right: ' . $atts['icon_gap'] . 'px;' : $description_margin;
        } elseif ($atts['icon_align'] == 'top') {
            $description_margin = $atts['icon_gap'] ? 'margin-right: ' . $atts['icon_gap'] . 'px;' : '';
        } elseif ($atts['icon_align'] == 'title') {
            $description_margin = $atts['icon_gap'] ? 'margin-right: ' . $atts['icon_gap'] . 'px;' : '';
            $padding = 'padding: 0;';
        } elseif ($atts['icon_align'] == 'top_left') {
            $description_margin = $atts['icon_gap'] ? 'margin-right: ' . $atts['icon_gap'] . 'px;' : '';
            if ($atts['icon_background'] == 'transparent' || $atts['icon_background'] == '' and $atts['icon_border'] == '' || substr($atts['icon_border'], 0, 1) == '0') {
                $padding = 'padding: 0;';
            }
        } elseif ($atts['icon_align'] == 'top_right') {
            $description_margin = $atts['icon_gap'] ? 'margin-right: ' . $atts['icon_gap'] . 'px;' : '';
            if ($atts['icon_background'] == 'transparent' || $atts['icon_background'] == '' and $atts['icon_border'] == '' || substr($atts['icon_border'], 0, 1) == '0') {
                $padding = 'padding: 0;';
            }
        } else {
            if ($atts['icon_background'] == 'transparent' || $atts['icon_background'] == '' and $atts['icon_border'] == '' || substr($atts['icon_border'], 0, 1) == '0') {
                $description_margin = 'margin-left: ' . ($atts['icon_size'] + 20) . 'px;';
                $padding = 'padding: 0;';
            } else {
                $description_margin = 'margin-left: ' . ($atts['icon_size'] + intval($atts['icon_padding']) * 2 + 30 + intval($atts['icon_border']) * 2) . 'px;';
            }
            $description_margin = $atts['icon_gap'] ? 'margin-left: ' . $atts['icon_gap'] . 'px;' : $description_margin;
        }
        if ($atts['icon_animation'] == 6) {
            $css[] = '#' . $id . '.su-il-animation-6 .icon_list_icon i:before { margin-right: -' . round($atts['icon_size'] / 2) . 'px}';
        }
        $icon_list_connector = ($atts['connector'] == "yes" and ($atts['icon_align'] == 'right' or $atts['icon_align'] == 'left')) ? 'icon_list_connector' : '';
        $css[] = '#' . $id . ' .icon_list_icon { background:' . $atts['icon_background'] . '; font-size:' . $atts['icon_size'] . 'px; max-width:' . $atts['icon_size'] . 'px; height:' . $atts['icon_size'] . 'px;' . $border . $padding . $radius . $shadow . '}';
        $css[] = '#' . $id . ' .icon_description { ' . $description_margin . '}';
        if ($title_color or $title_size) {
            $css[] = '#' . $id . ' .icon_description h3 {' . $title_color . $title_size . '}';
        }
        if ($atts['color']) {
            $css[] = '#' . $id . ' .icon_description_text { color:' . $atts['color'] . ';}';
        }
        $url = $atts['url'] != '' ? 'data-url="' . $atts['url'] . '" data-target="' . $atts['target'] . '"' : '';
        // Add CSS in head
        suAsset::addString('css', implode("\n", $css));
        suAsset::addFile('css', 'icon-list.css', __FUNCTION__);
        if ($atts['url'] != '') {
            suAsset::addFile('js', 'icon-list.js', __FUNCTION__);
        }
        $return = '
            <div id="' . $id . '"' . su_scroll_reveal($atts) . ' class="' . su_acssc($classes) . '">
                <div class="icon_list_item" ' . $url . '>
                    <div class="icon_list_wrapper ' . $icon_list_connector . '">
                        <div class="icon_list_icon">' . $icon . '
                        </div>
                    </div>

                    <div class="icon_description">
                        <h3>' . $atts['title'] . '</h3>
                        <div class="icon_description_text">' . su_do_shortcode($content) . '</div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>';
        return $return;
    }
Exemple #15
0
 public static function button($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('style' => 'default', 'url' => '#', 'target' => 'self', 'color' => '#FFFFFF', 'background' => '#2D89EF', 'background_hover' => '', 'size' => 3, 'wide' => 'no', 'center' => 'no', 'radius' => '3px', 'icon' => false, 'icon_color' => '#FFFFFF', 'desc' => '', 'onclick' => '', 'rel' => '', 'title' => '', 'padding' => '', 'margin' => '', 'scroll_reveal' => '', 'class' => ''), $atts, 'button');
     // Initioal Variables
     $id = uniqid('subtn_');
     $css = array();
     $js = array();
     $borderBtn = '';
     $borderBtnHover = '';
     // Prepare vars
     $before = $after = '';
     // Common styles for button
     $btn_size = round(($atts['size'] + 7) * 1.25);
     // Background hover check
     if ($atts['background_hover']) {
         $bg_hover = $atts['background_hover'];
     } elseif ($atts['background'] != 'transparent') {
         $bg_hover = su_color::lighten($atts['background']);
     } else {
         $bg_hover = '';
     }
     $lineheight = $atts['icon'] ? 'line-height:' . round($btn_size * 1.5) . 'px;' : 'line-height:' . round($btn_size * 2) . 'px;';
     if ($atts['padding']) {
         $padding = 'padding: ' . $atts['padding'] . ';';
     } else {
         $padding = $atts['icon'] ? 'padding: ' . round($atts['size'] / 2 + 4) . 'px ' . round($atts['size'] * 2 + 10) . 'px;' : 'padding: ' . '4px ' . round($atts['size'] * 2 + 10) . 'px;';
     }
     $radius = $atts['radius'] ? '-webkit-border-radius: ' . $atts['radius'] . '; border-radius: ' . $atts['radius'] . ';' : '';
     $margin = $atts['margin'] ? 'margin: ' . $atts['margin'] . ';' : '';
     if ($atts['style'] === 'border') {
         $borderBtn = 'border-color: ' . $atts['color'] . ';';
         $borderBtnHover = 'border-color: ' . su_color::lighten($atts['color']) . ';';
     }
     // CSS rules for <a> tag
     $css[] = 'a#' . $id . ' { color: ' . $atts['color'] . '; background-color: ' . $atts['background'] . ';' . $radius . $borderBtn . $margin . '}';
     $css[] = 'a#' . $id . ' span { font-size: ' . $btn_size . 'px;' . $radius . $lineheight . $padding . '}';
     if ($bg_hover) {
         $css[] = 'a#' . $id . ':hover { background-color: ' . $bg_hover . ';}';
     } elseif ($atts['style'] === 'border') {
         $css[] = 'a#' . $id . ':hover {' . $borderBtnHover . '}';
     }
     if ($atts['desc']) {
         $css[] = 'a#' . $id . ' small {padding-bottom:' . round($atts['size'] / 2 + 4) . 'px;color: ' . $atts['color'] . ';}';
     }
     if ($atts['style'] === '3d') {
         $css[] = 'a#' . $id . '.su-button-style-3d { box-shadow: 0 ' . round($atts['size']) . 'px 0 ' . su_color::darken($atts['background'], '6%') . '; }';
         $css[] = 'a#' . $id . '.su-button-style-3d:active { box-shadow: 0 1px 0 ' . su_color::darken($atts['background'], '8%') . '; top: ' . round($atts['size'] - 1) . 'px }';
     }
     // Prepare button classes
     $classes = array('su-button', 'su-button-style-' . $atts['style']);
     // Additional classes
     if ($atts['class']) {
         $classes[] = $atts['class'];
     }
     // Wide class
     if ($atts['wide'] === 'yes') {
         $classes[] = 'su-button-wide';
     }
     // Prepare icon
     if ($atts['icon']) {
         if (strpos($atts['icon'], 'licon:') !== false) {
             suAsset::addFile('css', 'linea.css');
             $icon = '<i class="li li-' . trim(str_replace('licon:', '', $atts['icon'])) . '"></i>';
             $css[] = 'a#' . $id . ' i {font-size:' . $btn_size . 'px; color:' . $atts['icon_color'] . '}';
         } elseif (strpos($atts['icon'], 'icon:') !== false) {
             $icon = '<i class="fa fa-' . trim(str_replace('icon:', '', $atts['icon'])) . '"></i>';
             $css[] = 'a#' . $id . ' i {font-size:' . $btn_size . 'px; color:' . $atts['icon_color'] . '}';
         } else {
             $icon = '<img src="' . image_media($atts['icon']) . '" alt="' . esc_attr($content) . '"/>';
             $css[] = 'a#' . $id . ' img {width:' . round($btn_size * 1.5) . 'px; height:' . round($btn_size * 1.5) . 'px;}';
         }
     } else {
         $icon = '';
     }
     // Prepare <small> with description
     $desc = $atts['desc'] ? '<small>' . su_scattr($atts['desc']) . '</small>' : '';
     // Wrap with div if button centered
     if ($atts['center'] === 'yes') {
         $before .= '<div class="su-button-center">';
         $after .= '</div>';
     }
     // Replace icon marker in content,
     // add float-icon class to rearrange margins
     if (strpos($content, '%icon%') !== false) {
         $content = str_replace('%icon%', $icon, $content);
         $classes[] = 'su-button-float-icon';
     } else {
         $content = $icon . ' ' . $content;
     }
     // Prepare onclick action
     $atts['onclick'] = $atts['onclick'] ? ' onClick="' . $atts['onclick'] . '"' : '';
     // Prepare rel attribute
     $atts['rel'] = $atts['rel'] ? ' rel="' . $atts['rel'] . '"' : '';
     // Prepare title attribute
     $atts['title'] = $atts['title'] ? ' title="' . $atts['title'] . '"' : '';
     // put css in head
     suAsset::addFile('css', 'button.css', __FUNCTION__);
     suAsset::addString('css', implode("\n", $css));
     return $before . '<a id="' . $id . '" href="' . su_scattr($atts['url']) . '"' . su_scroll_reveal($atts) . ' class="' . su_acssc($classes) . '" target="_' . $atts['target'] . '"' . $atts['onclick'] . $atts['rel'] . $atts['title'] . '><span>' . su_do_shortcode(stripcslashes($content)) . $desc . '</span></a>' . $after;
 }