PHP su_scroll_reveal函数代码示例

 public static function calltoaction($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('title' => 'This is Call To Action Title', 'title_color' => '#ffffff', 'button_text' => 'Click Here', 'align' => 'default', 'button_link' => '#', 'target' => 'self', 'color' => '#ddd', 'background' => '#2D89EF', 'button_color' => '#fff', 'button_background' => '#165194', 'button_background_hover' => '', 'radius' => '3px', 'button_radius' => '3px', 'desc' => '', 'scroll_reveal' => '', 'class' => ''), $atts, 'calltoaction');
     $id = uniqid('suca_');
     $css = array();
     $padding = '';
     $title = $atts['title'] ? "<h3>" . $atts['title'] . "</h3>" : '';
     $target = $atts['target'] === 'yes' || $atts['target'] === 'blank' ? ' target="_blank"' : 'target="_self"';
     $bdt_hbg = $atts['button_background_hover'] ? $atts['button_background_hover'] : su_color::lighten($atts['button_background'], '5%');
     if (intval($atts['radius']) > 40 && intval($atts['button_radius']) > 40) {
         $padding = "padding: 20px 20px 20px 40px;";
     }
     $css[] = '#' . $id . ' {' . $padding . ' background-color:' . $atts['background'] . '; border-radius:' . $atts['radius'] . '; }';
     $css[] = '#' . $id . ' a.cta-dbtn { border-radius:' . $atts['button_radius'] . '; color:' . $atts['button_color'] . '; background:' . $atts['button_background'] . ';}';
     $css[] = '#' . $id . ' a.cta-dbtn:hover { background:' . $bdt_hbg . ';}';
     $css[] = '#' . $id . ' .cta-content > h3 { color: ' . $atts['title_color'] . ';}';
     $css[] = '#' . $id . ' .cta-content div { color:' . $atts['color'] . ';}';
     suAsset::addFile('css', 'call-to-action.css', 'calltoaction');
     suAsset::addString('css', implode("\n", $css));
     $return = '<section id="' . $id . '"' . su_scroll_reveal($atts) . ' class="call-to-action' . su_ecssc($atts) . ' cta-align-' . $atts['align'] . '">';
     $return .= "<a class='cta-dbtn hidden-phone' " . $target . " href='" . $atts['button_link'] . "'>" . $atts['button_text'] . "</a>";
     $return .= "<div class='cta-content'>" . $title . "<div>" . su_do_shortcode($content) . '</div></div>';
     $return .= "<a class='cta-dbtn visible-phone' " . $target . " href='" . $atts['button_link'] . "'>" . $atts['button_text'] . "</a>";
     $return .= '<div class="clear"></div></section>';
     return $return;
 }

 public static function modal($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('effect' => 1, 'button_text' => 'Open Modal', 'button_class' => '', 'close_button' => '', 'title' => 'Modal Title', 'title_background' => 'rgba(0,0,0,0.1)', 'title_color' => '#222222', 'background' => '#ffffff', 'color' => '#666666', 'border' => 'none', 'shadow' => '0 solid #000000', 'width' => '', 'height' => '', 'overlay_background' => 'rgba(0,0,0,0.4)', 'scroll_reveal' => '', 'class' => ''), $atts, 'modal');
     $id = uniqid('sum_');
     $css = array();
     $height = $atts['height'] ? 'height: ' . $atts['height'] . ';' : '';
     $width = $atts['width'] ? 'width: ' . $atts['width'] . ';' : '';
     $css[] = '#' . $id . ' .su-modal-content-wrapper { background: ' . $atts['background'] . '; color: ' . $atts['color'] . '; border: ' . $atts['border'] . '; box-shadow: ' . $atts['shadow'] . ';' . $height . $width . '}';
     $css[] = '#' . $id . ' .su-modal-title-wrapper { background: ' . $atts['title_background'] . ';}';
     $css[] = '#' . $id . ' .su-modal-title-wrapper h3 { color: ' . $atts['title_color'] . ';}';
     $overlay_style = 'style=" background-color: ' . $atts['overlay_background'] . ';"';
     $close_button = $atts['close_button'] === 'yes' ? '<a href="javascript:void(0);" class="su-modal-close"><i class="fa fa-remove"></i></a>' : '';
     suAsset::addString('css', implode('', $css));
     suAsset::addFile('css', 'modal.css', __FUNCTION__);
     suAsset::addFile('js', 'modal.js', __FUNCTION__);
     $return = '<a href="javascript:void(0);"' . su_scroll_reveal($atts) . ' class="su-modal-trigger ' . $atts['button_class'] . '" data-modal="' . $id . '">' . $atts['button_text'] . '</a>';
     $return .= '<div class="su-modal-wrapper">';
     $return .= '<div class="su-modal su-modal-effect-' . $atts['effect'] . '" id="' . $id . '">
                 <div class="su-modal-content-wrapper">';
     $return .= '<div class="su-modal-title-wrapper">';
     $return .= '<h3>' . $atts['title'] . '</h3>';
     $return .= $close_button;
     $return .= '</div>';
     $return .= '<div class="su-content">';
     $return .= su_do_shortcode($content);
     $return .= '</div>
         </div>
     </div>
     <div class="su-modal-overlay" ' . $overlay_style . '></div>';
     $return .= '</div>';
     return $return;
 }

 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;
 }

 public static function tabs($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('active' => 1, 'vertical' => 'no', 'align' => 'left', 'style' => 'default', 'scroll_reveal' => '', 'class' => ''), $atts, 'tabs');
     if ($atts['style'] === '3') {
         $atts['vertical'] = 'yes';
     }
     if (self::$tab_count = -1) {
         self::$tab_count = 0;
     }
     su_do_shortcode($content);
     $return = '';
     $tabs = $panes = array();
     if (is_array(self::$tabs)) {
         if (self::$tab_count < $atts['active']) {
             $atts['active'] = self::$tab_count;
         }
         foreach (self::$tabs as $tab) {
             $tabs[] = '<span class="' . su_ecssc($tab) . $tab['disabled'] . '"' . $tab['anchor'] . $tab['url'] . $tab['target'] . '>' . su_scattr($tab['icon']) . su_scattr($tab['title']) . '</span>';
             $panes[] = '<div class="su-tabs-pane su-clearfix' . su_ecssc($tab) . '">' . $tab['content'] . '</div>';
         }
         $atts['vertical'] = $atts['vertical'] === 'yes' ? ' su-tabs-vertical' : '';
         $return = '<div' . su_scroll_reveal($atts) . ' class="su-tabs  su-tabs-align-' . $atts['align'] . ' su-tabs-style-' . $atts['style'] . $atts['vertical'] . su_ecssc($atts) . '" data-active="' . (string) $atts['active'] . '"><div class="su-tabs-nav">' . implode('', $tabs) . '</div><div class="su-tabs-panes">' . implode("\n", $panes) . '</div></div>';
     }
     self::$tabs = array();
     self::$tab_count = 0;
     suAsset::addFile('css', 'tabs.css', __FUNCTION__);
     suAsset::addFile('js', 'tabs.js', __FUNCTION__);
     return $return;
 }

 public static function livicon($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('icon' => 'heart', 'size' => 32, 'color' => '#666666', 'original_color' => 'false', 'hover_color' => '#000000', 'background_color' => '#eeeeee', 'padding' => '15px', 'radius' => '3px', 'border' => 'none', 'margin' => '', 'event_type' => 'hover', 'animate' => 'yes', 'loop' => 'no', 'parent' => 'no', 'morph_duration' => 0.6, 'duration' => 0.6, 'iteration' => 1, 'url' => '', 'target' => 'self', 'scroll_reveal' => '', 'class' => ''), $atts, 'livicon');
     $id = uniqid('sulic_');
     $css[] = '';
     $atts['animate'] = $atts['animate'] === 'yes' ? 'true' : 'false';
     $atts['loop'] = $atts['loop'] === 'yes' ? 'true' : 'false';
     $atts['parent'] = $atts['parent'] === 'yes' ? 'true' : 'false';
     $atts['morph_duration'] = $atts['morph_duration'] * 1000;
     $atts['duration'] = $atts['duration'] * 1000;
     $margin = $atts['margin'] ? 'margin:' . $atts['margin'] . ';' : '';
     $padding = $atts['padding'] ? 'padding:' . $atts['padding'] . ';' : '';
     $background_color = $atts['background_color'] ? 'background-color:' . $atts['background_color'] . ';' : '';
     $border = $atts['border'] ? 'border:' . $atts['border'] . ';' : '';
     $radius = $atts['radius'] ? 'border-radius:' . $atts['radius'] . ';' : '';
     if ($margin or $padding or $background_color or $radius or $border) {
         $css[] = '#' . $id . '.su-livicon { ' . $margin . $padding . $background_color . $border . $radius . '}';
     }
     if ($atts['url']) {
         $return = '<a id="' . $id . '" ' . su_scroll_reveal($atts) . ' href="' . $atts['url'] . '" class="su-livicon ' . su_ecssc($atts) . '" target="_' . $atts['target'] . '"><span class="livicon" data-name="' . $atts['icon'] . '" data-size="' . intval($atts['size']) . '" data-color="' . $atts['color'] . '" data-hovercolor="' . $atts['hover_color'] . '" data-animate="' . $atts['animate'] . '" data-loop="' . $atts['loop'] . '" data-iteration="' . $atts['iteration'] . '" data-duration="' . $atts['duration'] . '" data-eventtype="' . $atts['event_type'] . '" data-onparent="' . $atts['parent'] . '"></span>' . su_do_shortcode($content) . '</a>';
     } else {
         $return = '<span id="' . $id . '" ' . su_scroll_reveal($atts) . ' class="su-livicon' . su_ecssc($atts) . ' livicon" data-name="' . $atts['icon'] . '" data-size="' . intval($atts['size']) . '" data-color="' . $atts['color'] . '" data-hovercolor="' . $atts['hover_color'] . '" data-animate="' . $atts['animate'] . '" data-loop="' . $atts['loop'] . '" data-iteration="' . $atts['iteration'] . '" data-duration="' . $atts['duration'] . '" data-eventtype="' . $atts['event_type'] . '" data-onparent="' . $atts['parent'] . '"></span>' . su_do_shortcode($content);
     }
     // Asset added
     suAsset::addFile('css', 'livicon.css', __FUNCTION__);
     suAsset::addString('css', implode("\n", $css));
     suAsset::addFile('js', 'raphael.min.js', __FUNCTION__);
     suAsset::addFile('js', 'livicons.min.js', __FUNCTION__);
     return $return;
 }

 public static function dummy_text($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('amount' => 1, 'what' => 'paras', 'cache' => 'yes', 'scroll_reveal' => '', 'class' => ''), $atts, 'dummy_text');
     $xml = simplexml_load_file('http://www.lipsum.com/feed/xml?amount=' . $atts['amount'] . '&what=' . $atts['what'] . '&start=0');
     $return = '<div' . su_scroll_reveal($atts) . ' class="su-dummy-text' . su_ecssc($atts) . '"><p>' . str_replace("\n", "</p><p>", $xml->lipsum) . '</p></div>';
     return $return;
 }

 public static function box($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('style' => 'default', 'title' => JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_BOX_TITLE_DEFAULT'), 'title_color' => '#FFFFFF', 'box_color' => '#333333', 'color' => null, 'radius' => '', 'scroll_reveal' => '', 'class' => ''), $atts, 'box');
     // Initioal Variables
     $id = uniqid('su_box_');
     $radius = '';
     $css = array();
     // Color Manage
     if ($atts['color'] !== null) {
         $atts['box_color'] = $atts['color'];
     }
     // Radius Manage
     if ($atts['radius']) {
         $radius = $atts['radius'] != '0' ? 'border-radius:' . $atts['radius'] . 'px;' : '';
     }
     // Get Css in $css variable
     $css[] = '#' . $id . '{' . $radius . 'border-color:' . $atts['box_color'] . ';} #' . $id . ' .su-box-title { background-color:' . $atts['box_color'] . ';color:' . $atts['title_color'] . ';}';
     // Add CSS in head
     suAsset::addString('css', implode("\n", $css));
     suAsset::addFile('css', 'box.css', __FUNCTION__);
     // Output HTML
     $return = '<div id="' . $id . '"' . su_scroll_reveal($atts) . ' class="su-box su-box-style-' . $atts['style'] . su_ecssc($atts) . '">
                 <div class="su-box-title">' . su_scattr($atts['title']) . '
                 </div>
                 <div class="su-box-content su-clearfix">' . has_child_shortcode($content, 'b') . '</div>
             </div>';
     return $return;
 }

 public static function trailer_box($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('style' => 1, 'title' => 'Trailer Box Title', 'title_color' => '', 'title_font_weight' => 'bold', 'title_size' => '', 'image' => BDT_SU_URI . '/images/no-image.jpg', 'url' => '#', 'target' => 'self', 'color' => '', 'background' => '', 'opacity' => '1', 'hover_opacity' => '0.7', 'radius' => '', 'align' => '', 'scroll_reveal' => '', 'class' => ''), $atts, 'trailer_box');
     $id = uniqid('sutb');
     $css = array();
     $css[] = $atts['color'] ? '#' . $id . ' .su-trailer-box-content { color: ' . $atts['color'] . ';}' : '';
     $css[] = $atts['title_color'] ? '#' . $id . ' .su-trailer-box-title { color: ' . $atts['title_color'] . ';}' : '';
     $border_radius = $atts['radius'] ? 'overflow: hidden; -webkit-border-radius:' . $atts['radius'] . '; border-radius:' . $atts['radius'] . ';' : '';
     $background = $atts['background'] ? 'background:' . $atts['background'] . ';' : '';
     if ($border_radius or $background) {
         $css[] = '#' . $id . ' {' . $border_radius . $background . '}';
     }
     $css[] = $atts['title_size'] ? '#' . $id . ' .su-trailer-box-title {font-size: ' . $atts['title_size'] . ';line-height: ' . $atts['title_size'] . ';}' : '';
     $css[] = $atts['align'] ? '#' . $id . ' .su-trailer-box-desc {text-align: ' . $atts['align'] . ';}' : '';
     // Add CSS and JS in head
     suAsset::addString('css', implode("\n", $css));
     suAsset::addFile('css', 'trailer_box.css', __FUNCTION__);
     suAsset::addFile('js', 'trailer_box.js', __FUNCTION__);
     return '<div id="' . $id . '"' . su_scroll_reveal($atts) . ' class="su-trailer-box su-trailer-box-style' . $atts['style'] . su_ecssc($atts) . '" data-opacity="' . $atts['opacity'] . '" data-hover-opacity="' . $atts['hover_opacity'] . '">
                 <img class="su-trailer-box-img" src="' . image_media($atts['image']) . '" alt="' . $atts['title'] . '">
                 <div class="su-trailer-box-desc">
                     <h2 class="su-trailer-box-title">' . $atts['title'] . '</h2>
                     <div class="su-trailer-box-content">' . su_do_shortcode($content) . '</div>
                 </div>
                 <a class="su-trailer-box-link" href="' . $atts['url'] . '" target="_' . $atts['target'] . '"></a>
             </div>';
 }

    public static function image_compare($atts = null, $content = null)
    {
        $atts = su_shortcode_atts(array('before_image' => '', 'after_image' => '', 'orientation' => '', 'before_text' => 'Original', 'after_text' => 'Modified', 'scroll_reveal' => '', 'class' => ''), $atts, 'image_compare');
        // Unique Id
        $id = uniqid("suic");
        if (image_media($atts['before_image']) && image_media($atts['after_image'])) {
            $orientation = $atts['orientation'] == 'vertical' ? ', orientation: "vertical"' : '';
            $css[] = '#' . $id . ' .twentytwenty-before-label:before {content: "' . $atts['before_text'] . '"}';
            $css[] = '#' . $id . ' .twentytwenty-after-label:before {content: "' . $atts['after_text'] . '"}';
            // OUtput Structure in  here
            $return = '
            <div id="' . $id . '"' . su_scroll_reveal($atts) . ' class="twentytwenty-container ' . su_ecssc($atts) . '">
                <img src="' . image_media($atts['before_image']) . '" alt="' . $atts['before_text'] . '">
                <img src="' . image_media($atts['after_image']) . '" alt="' . $atts['before_text'] . '">
            </div>';
            $js = '
            jQuery(window).load(function(){
              jQuery("#' . $id . '").twentytwenty({default_offset_pct: 0.7' . $orientation . '});

            });';
            suAsset::addString('css', implode("\n", $css));
            // Css Adding in Head
            suAsset::addFile('css', 'image_compare.css', __FUNCTION__);
            // JavaScipt additon in Head
            suAsset::addFile('js', 'jquery.event.move.js', __FUNCTION__);
            suAsset::addFile('js', 'jquery.twentytwenty.js', __FUNCTION__);
            suAsset::addString('js', $js);
        } else {
            return alert_box(JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_IMAGE_COMPARE_INF'), 'warning');
        }
        return $return;
    }

 public static function youtube_advanced($atts = null, $content = null)
 {
     $return = array();
     $params = array();
     $atts = su_shortcode_atts(array('url' => false, 'playlist' => '', 'width' => 600, 'height' => 400, 'responsive' => 'yes', 'autohide' => 'alt', 'autoplay' => 'no', 'controls' => 'yes', 'loop' => 'no', 'fs' => 'yes', 'modestbranding' => 'no', 'rel' => 'yes', 'theme' => 'dark', 'wmode' => '', 'showinfo' => 'yes', 'scroll_reveal' => '', 'class' => ''), $atts, 'youtube_advanced');
     if (!$atts['url']) {
         return alert_box(JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_YOUTUBE_CU'), 'warning');
     }
     $atts['url'] = su_scattr($atts['url']);
     $id = preg_match('%(?:youtube(?:-nocookie)?\\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\\.be/)([^"&?/ ]{11})%i', $atts['url'], $match) ? $match[1] : false;
     if (!$id) {
         return alert_box(JText::_('PLG_SYSTEM_BDTHEMES_SHORTCODES_YOUTUBE_CI'), 'warning');
     }
     // Prepare params
     foreach (array('autohide', 'autoplay', 'controls', 'fs', 'loop', 'modestbranding', 'playlist', 'rel', 'showinfo', 'theme', 'wmode') as $param) {
         $params[$param] = str_replace(array('no', 'yes', 'alt'), array('0', '1', '2'), $atts[$param]);
     }
     // Correct loop
     if ($params['loop'] === '1' && $params['playlist'] === '') {
         $params['playlist'] = $id;
     }
     // Prepare protocol
     $protocol = preg_match('/^(https?:\\/\\/)/i', $atts['url'], $match) ? $match[1] : "http://";
     // Prepare player parameters
     $params = http_build_query($params);
     // Create player
     $return[] = '<div' . su_scroll_reveal($atts) . ' class="su-youtube su-responsive-media-' . $atts['responsive'] . su_ecssc($atts) . '">';
     $return[] = '<iframe width="' . $atts['width'] . '" height="' . $atts['height'] . '" src="' . $protocol . 'www.youtube.com/embed/' . $id . '?' . $params . '" allowfullscreen></iframe>';
     $return[] = '</div>';
     suAsset::addFile('css', 'youtube_advanced.css', __FUNCTION__);
     return implode('', $return);
 }

 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>';
 }

 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;
 }

 public static function switcher($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('id' => uniqid('swt'), 'style' => 1, 'active' => 1, 'position' => 'top', 'align' => 'center', 'animation' => 'bounceLeft', 'scroll_reveal' => '', 'class' => ''), $atts, 'switcher');
     su_do_shortcode($content);
     $return = $panes = $css = $filter_item = array();
     if (is_array(self::$switcher)) {
         foreach (self::$switcher as $switcher_item) {
             $filter_data = su_title_class($switcher_item['title']);
             $filter_item[] = '<div data-filter=".' . $filter_data . '" class="cbp-filter-item ' . su_ecssc($switcher_item) . '"><div class="cbp-filter-item-inner">' . su_scattr($switcher_item['icon']) . '<span class="su-swt-title">' . su_scattr($switcher_item['title']) . '</span></div></div>';
             $panes[] = '<div class="' . $filter_data . ' cbp-item' . su_ecssc($switcher_item) . '">' . $switcher_item['content'] . '</div>';
         }
         $filters = '<div id="' . $atts['id'] . '_filter" class="su-swt-filter">' . implode('', $filter_item) . '</div>';
         if (is_int($atts['active']) && $atts['active'] > 0) {
             $active_tab = su_title_class(self::$switcher[$atts['active'] - 1]['title']);
         } else {
             $active_tab = su_title_class(self::$switcher[0]['title']);
         }
         $return[] = '<div id="' . $atts['id'] . '"' . su_scroll_reveal($atts) . ' data-animation="' . $atts['animation'] . '" class="su-switcher  su-switch-position-' . $atts['position'] . ' su-switch-align-' . $atts['align'] . ' su-switcher-style-' . $atts['style'] . su_ecssc($atts) . '" data-active_tab=".' . $active_tab . '" data-swtid="' . $atts['id'] . '">';
         $return[] = ($atts['position'] == 'top' or $atts['position'] == 'left') ? $filters : '';
         $return[] = '<div id="' . $atts['id'] . '_container" class="cbp cbp-l-grid-tabs">' . implode("\n", $panes) . '</div>';
         $return[] = ($atts['position'] == 'bottom' or $atts['position'] == 'right') ? $filters : '';
         $return[] = '<div class="su-clearfix"></div>';
         $return[] = '</div>';
     }
     self::$switcher = array();
     self::$switcher_item_count = 0;
     suAsset::addFile('css', 'cubeportfolio.min.css');
     suAsset::addFile('js', 'cubeportfolio.min.js');
     suAsset::addFile('css', 'switcher.css', __FUNCTION__);
     suAsset::addFile('js', 'switcher.js', __FUNCTION__);
     return implode("\n", $return);
 }

 public static function frame($atts = null, $content = null)
 {
     $atts = su_shortcode_atts(array('style' => 'default', 'align' => 'left', 'scroll_reveal' => '', 'class' => ''), $atts, 'frame');
     suAsset::addFile('css', 'frame.css', __FUNCTION__);
     suAsset::addFile('js', 'frame.js', __FUNCTION__);
     return '<span' . su_scroll_reveal($atts) . ' class="su-frame su-frame-align-' . $atts['align'] . ' su-frame-style-' . $atts['style'] . su_ecssc($atts) . '"><span class="su-frame-inner">' . su_do_shortcode($content) . '</span></span><div class="clear clearfix"></div>';
 }

 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;
 }