' . '' .'
' .'' . '' . '' .''; } public function createShortcodes() { $titan = TitanFramework::getInstance( GAMBIT_VC_4K_ICONS ); // Create a shortcode. After doing this, the shortcode will be // automatically placed in a drop down box in the Visual Editor // for easy shortcode selecting. // The shortcode will also be automatically integrated with // Visual Composer $titan->createShortcode( array( 'tag' => '4k_icon', 'name' => __( '4k Icon (Free)', GAMBIT_VC_4K_ICONS ), 'desc' => __( 'Awesome styleable icon', GAMBIT_VC_4K_ICONS ), // URL to my icon for Visual Composer 'icon' => plugins_url( 'vc-icon.png', __FILE__ ), // All my attributes, define as many as we need 'attributes' => array( 'icon' => array( 'name' => __( 'Choose your icon', GAMBIT_VC_4K_ICONS ), 'type' => '4k_icon', 'holder' => 'div', 'desc' => __( 'Choose an icon. Type in the text box above to search for a specific icon. Use the drop down above to filter or show icons from specific icon sets.

In this free version, all features are available, but only 900+ icons and 9 hover effects are included.
Get the premium version to access all awesome 4,000+ icon fonts and a few more hover effects.', GAMBIT_VC_4K_ICONS ), ), 'icon_color' => array( 'name' => __( 'Icon Color', GAMBIT_VC_4K_ICONS ), 'default' => '#3498db', 'type' => 'color', 'desc' => __( 'Pick a color for your icon.', GAMBIT_VC_4K_ICONS ), ), 'icon_size' => array( 'name' => __( 'Icon Size', GAMBIT_VC_4K_ICONS ), 'default' => '50', 'type' => 'text', 'desc' => __( 'The size of your icon in pixels.', GAMBIT_VC_4K_ICONS ) ), 'shape' => array( 'name' => __( 'Background Shape', GAMBIT_VC_4K_ICONS ), 'default' => 'none', 'type' => 'select', 'options' => array( 'none' => __( 'No background shape', GAMBIT_VC_4K_ICONS ), 'circle' => __( 'Circle', GAMBIT_VC_4K_ICONS ), 'square' => __( 'Square', GAMBIT_VC_4K_ICONS ), 'rounded' => __( 'Rounded-Square', GAMBIT_VC_4K_ICONS ) ), 'desc' => __( "Select a background shape for your icon. (Changes may not be visible in the frontend editor)", GAMBIT_VC_4K_ICONS ), ), 'shape_type' => array( 'name' => __( 'Background Shape Type', GAMBIT_VC_4K_ICONS ), 'default' => 'solid', 'type' => 'select', 'options' => array( 'solid' => __( 'Normal, solid background', GAMBIT_VC_4K_ICONS ), 'button' => __( 'Solid background with a dark bottom border', GAMBIT_VC_4K_ICONS ), 'thin-border' => __( 'Thin bordered background', GAMBIT_VC_4K_ICONS ), 'thick-border' => __( 'Thick bordered background', GAMBIT_VC_4K_ICONS ), ), 'desc' => __( "Select a type of background shape for your icon. This is only applied when there are no hover effects.", GAMBIT_VC_4K_ICONS ), 'dependency' => array( 'element' => 'hover_effect', 'value' => array( 'none' ) ), ), 'border_radius' => array( 'name' => __( 'Background Shape Border Radius', GAMBIT_VC_4K_ICONS ), 'default' => '8', 'type' => 'text', 'desc' => __( 'The border radius of the background shape in pixels.', GAMBIT_VC_4K_ICONS ), 'dependency' => array( 'element' => 'shape', 'value' => array( 'rounded' ) ), ), 'shape_color' => array( 'name' => __( 'Background Shape Color', GAMBIT_VC_4K_ICONS ), 'default' => '#dddddd', 'type' => 'color', 'desc' => __( "Pick a color for your icon's background shape.", GAMBIT_VC_4K_ICONS ), 'dependency' => array( 'element' => 'shape', 'value' => array( 'circle', 'square', 'rounded' ) ), ), 'shape_size' => array( 'name' => __( 'Shape Size', GAMBIT_VC_4K_ICONS ), 'default' => '60', 'type' => 'text', 'desc' => __( "The size for your icon's background shape in pixels.", GAMBIT_VC_4K_ICONS ), 'dependency' => array( 'element' => 'shape', 'value' => array( 'circle', 'square', 'rounded' ) ), ), 'hover_effect' => array( 'name' => __( 'Hover Effect', GAMBIT_VC_4K_ICONS ), 'default' => 'none', 'type' => 'select', 'desc' => __( "The hover effect to play when the mouse hovers over the icon. (Changes may not be visible in the frontend editor)", GAMBIT_VC_4K_ICONS ), 'options' => array( 'none' => __( 'No hover effect', GAMBIT_VC_4K_ICONS ), 'faint-circle' => '(faint-circle) ' . __( "Faint background shape that solidifies on hover with an outline", GAMBIT_VC_4K_ICONS ), 'solid-outline' => '(solid-outline) ' . __( "Solid background shape that gets smaller when hovered on and shows a border", GAMBIT_VC_4K_ICONS ), 'swipe-down' => '(swipe-down) ' . __( "Solid background shape, icon swipes down on hover and gets replaced with inverted colors", GAMBIT_VC_4K_ICONS ), 'swipe-up' => '(swipe-up) ' . __( "Solid background shape, icon swipes up on hover and gets replaced with inverted colors", GAMBIT_VC_4K_ICONS ), 'swipe-left' => '(swipe-left) ' . __( "Solid background shape, icon swipes left on hover and gets replaced with inverted colors", GAMBIT_VC_4K_ICONS ), 'swipe-right' => '(swipe-right) ' . __( "Solid background shape, icon swipes right on hover and gets replaced with inverted colors", GAMBIT_VC_4K_ICONS ), 'fill-up' => '(fill-up) ' . __( "Outlined background shape that gets filled up from the bottom when hovered", GAMBIT_VC_4K_ICONS ), 'border-solid' => '(border-solid) ' . __( "Border background shape that gets filled up from the edges when hovered", GAMBIT_VC_4K_ICONS ), 'border-thick' => '(border-thick) ' . __( "Border background shape that gets smaller with another thicker border when hovered", GAMBIT_VC_4K_ICONS ), ), 'dependency' => array( 'element' => 'shape', 'value' => array( 'circle', 'square', 'rounded' ) ), ), 'hover_on' => array( 'name' => __( 'Hover Effect Trigger', GAMBIT_VC_4K_ICONS ), 'default' => 'icon', 'type' => 'select', 'desc' => __( "Choose the element which would trigger the hover effect. You may need to play around this value depending on your hover effect since some may have additional containers for the effect. (Changes may not be visible in the frontend editor)", GAMBIT_VC_4K_ICONS ), 'options' => array( 'icon' => 'When the mouse hovers over the icon', 'parent' => "When the mouse hovers over the icon's container", 'parent2' => sprintf( __( "When the mouse hovers over the icon's container (%d containers outward)", GAMBIT_VC_4K_ICONS ), 2), 'parent3' => sprintf( __( "When the mouse hovers over the icon's container (%d containers outward)", GAMBIT_VC_4K_ICONS ), 3), 'parent4' => sprintf( __( "When the mouse hovers over the icon's container (%d containers outward)", GAMBIT_VC_4K_ICONS ), 4), "row" => __( "When the mouse hovers over the row", GAMBIT_VC_4K_ICONS ) ), 'dependency' => array( 'element' => 'hover_effect', 'value' => array( 'faint-circle', 'solid-outline', 'solid-outline2', 'flip-vertical', 'flip-horizontal', 'swipe-down', 'swipe-up', 'swipe-left', 'swipe-right', 'fill-up', 'border-solid', 'border-thick' ), ), ), 'link' => array( 'name' => __( 'Link to go to When Icon is Clicked', GAMBIT_VC_4K_ICONS ), 'default' => '', 'type' => 'text', 'desc' => __( "Enter a URL here to make your icon a link.", GAMBIT_VC_4K_ICONS ), ), 'link_new_window' => array( 'name' => __( 'Open The Link in a New Window?', GAMBIT_VC_4K_ICONS ), 'default' => array( __( 'Check this to open the link above in a new window', GAMBIT_VC_4K_ICONS ) => 'new_window' ), 'type' => 'checkbox', 'dependency' => array( 'element' => 'link', 'not_empty' => true ), ), 'float' => array( 'name' => __( 'Icon Float', GAMBIT_VC_4K_ICONS ), 'default' => 'none', 'type' => 'select', 'options' => array( 'none' => __( "Don't float", GAMBIT_VC_4K_ICONS ), 'left' => __( 'Float left', GAMBIT_VC_4K_ICONS ), 'right' => __( 'Float right', GAMBIT_VC_4K_ICONS ), ), 'desc' => __( "The float rule of the icon.", GAMBIT_VC_4K_ICONS ), ), 'overflow_next' => array( 'name' => __( 'Overflow the Next Content?', GAMBIT_VC_4K_ICONS ), 'default' => array( 'Overflow the next block' => 'overflow' ), 'type' => 'checkbox', 'desc' => __( "If the next content box is a single text block, you can check this field in order for the icon to occupy the whole height (not like when floated). This only applies when you have the float field set to left or right.", GAMBIT_VC_4K_ICONS ), 'dependency' => array( 'element' => 'float', 'value' => array( 'left', 'right' ), ), ), 'margin' => array( 'name' => __( 'Icon Margin', GAMBIT_VC_4K_ICONS ), 'default' => '20', 'type' => 'textfield', 'desc' => __( "The margin in pixels. By default this margin will be placed on the bottom of your icon. If floated left or right, this margin will also be used on the side the icon meets your content.", GAMBIT_VC_4K_ICONS ), ), 'extra_class' => array( 'name' => __( 'Class name', GAMBIT_VC_4K_ICONS ), 'default' => '', 'type' => 'textfield', 'desc' => __( "You can add an extra class name to this icon if you want to add custom CSS styles to it.", GAMBIT_VC_4K_ICONS ), ), ), // The callback function to render my shortcode, // This can be a callable array, this behaves the same // as the function you pass to add_shortcode() 'function' => array( $this, 'renderShortcode' ) ) ); } // All $atts are filled up with the default values for you, // Start rendering my shortcode public function renderShortcode( $atts, $content ) { $ret = ''; // Enqueue the CSS if ( ! empty( $atts['icon'] ) ) { $cssFile = substr( $atts['icon'], 0, stripos( $atts['icon'], '-' ) ); wp_enqueue_style( '4k-icon-' . $cssFile, plugins_url( 'icons/css/' . $cssFile . '.css', __FILE__ ) ); wp_enqueue_style( '4k-icons', plugins_url( 'css/icon-styles.css', __FILE__ ) ); wp_enqueue_script( '4k-icons', plugins_url( 'js/script.js', __FILE__ ), array( 'jquery' ) ); } $divClasses = array(); if ( empty( $atts['shape'] ) ) { $atts['shape'] = 'none'; } $dataAttributes = array(); $shapeColor = $atts['shape_color']; if ( ! empty( $shapeColor ) && $atts['shape'] != 'none' ) { $shapeColor = $this->hex2rgb( $shapeColor ); if ( $atts['shape'] != 'none' && $atts['hover_effect'] == 'faint-circle' ) { $shapeColor[] = '.2'; $dataAttributes[] = "data-hover-background='" . $atts['shape_color'] . "'"; } else { $shapeColor[] = '1'; } $shapeColor = 'rgba(' . implode( ',', $shapeColor ) . ')'; } $containerStyles = array(); $divStyles = array(); $beforeStyles = array(); $afterStyles = array(); $iconStyles = array(); $iconHoverStyles = array(); $containerStyles[] = 'text-align:' . 'center';//$atts['alignment']; if ( $atts['shape'] == 'none' ) { $atts['hover_effect'] = 'none'; } if ( $atts['shape'] != 'none' ) { $divStyles[] = 'background-color:' . $shapeColor; $divStyles[] = 'padding:' . ( ( (int)$atts['shape_size'] - (int)$atts['icon_size'] ) / 2 ) . 'px 0'; $divStyles[] = 'width:' . (int)$atts['shape_size'] . 'px'; $divStyles[] = 'height:' . (int)$atts['icon_size'] . 'px'; $beforeStyles[] = 'border-color:' . $atts['shape_color']; $afterStyles[] = 'border-color:' . $atts['shape_color']; } else { $divStyles[] = 'background-color: transparent'; } if ( $atts['shape'] == 'rounded' ) { $divStyles[] = 'border-radius:' . (int)$atts['border_radius'] . 'px'; $beforeStyles[] = 'border-radius:' . ( (int)$atts['border_radius'] * 2 ) . 'px'; $afterStyles[] = 'border-radius:' . ( (int)$atts['border_radius'] * 2 ) . 'px'; if ( $atts['hover_effect'] == 'fill-up' || $atts['hover_effect'] == 'border-solid' ) { $afterStyles[] = 'border-radius:' . ( (int)$atts['border_radius'] ) . 'px'; } if ( $atts['hover_effect'] == 'solid-outline' ) { $afterStyles[] = 'border-radius:' . ( (int)$atts['border_radius'] ) . 'px'; $beforeStyles[] = 'border-radius:' . ( (int)$atts['border_radius'] ) . 'px'; } if ( $atts['hover_effect'] == 'border-thick' ) { $afterStyles[] = 'border-radius:' . ( (int)$atts['border_radius'] ) . 'px'; $beforeStyles[] = 'border-radius:' . ( (int)$atts['border_radius'] * 1.5 ) . 'px'; } } else if ( $atts['shape'] == 'circle' ) { $divStyles[] = 'border-radius:100%'; $beforeStyles[] = 'border-radius:100%'; $afterStyles[] = 'border-radius:100%'; } // Shape type if ( $atts['hover_effect'] == 'none' && $atts['shape'] != 'none' ) { if ( $atts['shape_type'] == 'button' ) { $divStyles[] = 'box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2)'; } else if ( $atts['shape_type'] == 'thin-border' ) { $divStyles[] = 'background-color: transparent'; $divStyles[] = 'box-shadow: inset 0 0 0 2px ' . $atts['shape_color']; } else if ( $atts['shape_type'] == 'thick-border' ) { $divStyles[] = 'background-color: transparent'; $divStyles[] = 'box-shadow: inset 0 0 0 4px ' . $atts['shape_color']; } // 'solid' => __( 'Normal, solid background', GAMBIT_VC_4K_ICONS ), // 'button' => __( 'Solid background with a dark bottom border', GAMBIT_VC_4K_ICONS ), // 'thin-border' => __( 'Thin bordered background', GAMBIT_VC_4K_ICONS ), // 'thick-border' => __( 'Thick bordered background', GAMBIT_VC_4K_ICONS ), } if ( $atts['hover_effect'] == 'solid-outline' || $atts['hover_effect'] == 'fill-up' || $atts['hover_effect'] == 'border-solid' || $atts['hover_effect'] == 'border-thick' ) { $beforeStyles[] = 'background:' . $atts['shape_color']; // $afterStyles[] = 'background:' . $atts['shape_color']; $iconHoverStyles[] = 'color:' . $atts['shape_color']; $afterStyles[] = 'box-shadow: inset 0 0 0 3px ' . $atts['shape_color']; } if ( $atts['hover_effect'] == 'border-thick' ) { $beforeStyles[] = 'box-shadow: inset 0 0 0 4px ' . $atts['shape_color']; } $iconStyles[] = 'font-size:' . (int)$atts['icon_size'] . 'px'; $iconStyles[] = 'line-height:' . (int)$atts['icon_size'] . 'px'; $iconStyles[] = 'color:' . $atts['icon_color']; if ( $atts['hover_effect'] == 'fill-up' || $atts['hover_effect'] == 'border-solid' ) { $iconStyles[] = 'color:' . $atts['shape_color']; } $containerStyles = array_filter( $containerStyles ); $divStyles = array_filter( $divStyles ); $beforeStyles = array_filter( $beforeStyles ); $afterStyles = array_filter( $afterStyles ); $iconStyles = array_filter( $iconStyles ); $iconHoverStyles = array_filter( $iconHoverStyles ); $divClasses[] = 'fourk-icon'; $divClasses[] = $atts['shape']; $divClasses[] = $atts['hover_effect']; $divClasses[] = $atts['extra_class']; $divClasses = array_filter( $divClasses ); /* * Add styles */ // Normal styles used for everything $ret .= ""; // Compress styles a bit for readability $ret = preg_replace( "/\s?(\{|\})\s?/", "$1", preg_replace( "/\s+/", " ", str_replace( "\n", "", $ret ) ) ) . "\n"; /* * Link */ if ( ! empty( $atts['link'] ) ) { $target = '_self'; if ( $atts['link_new_window'] == 'new_window' ) { $target = '_blank'; } $ret .= ""; } /* * Add the necessary html */ $ret .= "
"; // Put everything in a container for the flip effect if ( stripos( $atts['hover_effect'], 'flip-' ) !== false ) { $ret .= "
"; } $ret .= "
"; $ret .= ""; if ( stripos( $atts['hover_effect'], 'swipe-' ) !== false ) { $ret .= "
"; } $ret .= "
"; // Add a new element for the flip effect if ( stripos( $atts['hover_effect'], 'flip-' ) !== false ) { $ret .= "
"; $ret .= "
"; } $ret .= "
"; self::$iconId++; return $ret; } private function hex2rgb($hex) { $hex = str_replace("#", "", $hex); if(strlen($hex) == 3) { $r = hexdec(substr($hex,0,1).substr($hex,0,1)); $g = hexdec(substr($hex,1,1).substr($hex,1,1)); $b = hexdec(substr($hex,2,1).substr($hex,2,1)); } else { $r = hexdec(substr($hex,0,2)); $g = hexdec(substr($hex,2,2)); $b = hexdec(substr($hex,4,2)); } $rgb = array($r, $g, $b); return $rgb; // returns an array with the rgb values } /** * Adds links * * @access public * @param array $plugin_meta The current array of links * @param string $plugin_file The plugin file * @return array The current array of links together with our additions * @since 1.0 **/ public function pluginLinks( $plugin_meta, $plugin_file ) { if ( $plugin_file == plugin_basename( __FILE__ ) ) { $plugin_meta[] = sprintf( "%s", "http://goo.gl/8n4Qyz", __( "Get 4k Icons Premium For Only $14", GAMBIT_VC_4K_ICONS ) ); } return $plugin_meta; } } new FourKIconShortcodeFree();