VisualComposer VC_Map with Shortcode Example

<?php
/**
 * Plugin Name: VisualComposer Example
 * Plugin URI: https://urosevic.net/wordpress/
 * Description: Example plugin to show how to map custom shortcode to VisualComposer
 * Version: 1.0
 * Author: Aleksandar Urošević
 * Author URI: https://urosevic.net
 * License: GPL3
 */

// Do not load this file directly!
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}

// Do not proceed if VC class WPBakeryShortCode does not exists
if ( ! class_exists( 'WPBakeryShortCode' ) ) {
    return;
}

// Create shortcode `my_shortcode` for VisualComposer (not available w/o VisualComposer)
if ( ! class_exists( 'WPBakeryShortCode_my_shortcode' ) ) {

    class WPBakeryShortCode_my_shortcode extends WPBakeryShortCode {

        function content( $atts, $content = null ) {

            // Extract shortcode parameters
            extract( shortcode_atts( array(
                'number'   => 3,
                'colour'   => 'red',
                'el_class' => '',
                'css'      => '',
            ), $atts ) );

            // Prepare base element class
            $el_class .= " {$this->settings['base']} {$this->settings['class']}";

            // Prepare design class
            $css_class = apply_filters( VC_SHORTCODE_CUSTOM_CSS_FILTER_TAG, trim( $el_class ) . vc_shortcode_custom_css_class( $css, ' ' ), $this->settings['base'], $atts );

            // Prepare output HTML
            $out = '<div class="' . esc_attr( $css_class ) . '">';
            $out .= sprintf(
                '<h3>Number is <strong>%1$s</strong>, colour is <strong style="color:%2$s">%2$s</strong>!</h3>',
                (int) $number,
                $colour
            );
            $out .= wpb_js_remove_wpautop( $content, true );
            $out .= '</div>' . $this->endBlockComment( $this->settings['base'] );

            // Return prepared HTML
            return $out;

        } // END function content( $atts, $content = null ) {

    } // END class WPBakeryShortCode_my_shortcode extends WPBakeryShortCode {

} // END if ( ! class_exists( 'WPBakeryShortCode_my_shortcode' ) ) {

// Now map VisualComposer element for custom shortcode my_shortcode
if ( function_exists( 'vc_map' ) ) {
    vc_map( array(
        'name'        => 'My Shortcode',
        'base'        => 'my_shortcode', // Provides $this->settings['base'] for shortcode method
        'class'       => 'custom_shortcode',
        'category'    => __( 'Content', 'js_composer' ),
        'description' => __( 'Description for My Shortcode', 'visualcomposer-example' ),
        'params'      => array(
            // Number field
            array(
                'type'        => 'textfield',
                'admin_label' => true,
                'class'       => 'number',
                'heading'     => __( 'Number', 'visualcomposer-example' ),
                'param_name'  => 'number',
                'std'         => 3,
                'description' => __( 'Description for number param.', 'visualcomposer-example' ),
            ),
            // Colours dropdown
            array(
                'type'        => 'dropdown',
                'admin_label' => true,
                'class'       => '',
                'heading'     => __( 'Colour', 'visualcomposer-example' ),
                'param_name'  => 'colour',
                'std'         => 'red',
                'value'       => array(
                    'White'   => 'white',
                    'Yellow'  => 'yellow',
                    'Gold'    => 'gold',
                    'Orange'  => 'orange',
                    'Pink'    => 'pink',
                    'Red'     => 'red',
                    'Magenta' => 'magenta',
                    'Lime'    => 'lime',
                    'Green'   => 'green',
                    'Cyan'    => 'cyan',
                    'Blue'    => 'blue',
                    'Black'   => 'black',
                ),
                'description' => __( 'Description for colour param.', 'visualcomposer-example' ),
            ),
            // Shortcode content
            array(
                'type'        => 'textarea_html',
                'holder'      => 'div',
                'class'       => '',
                'heading'     => __( 'Text', 'js_composer' ),
                'param_name'  => 'content',
                'value'       => __( 'Hello world', 'js_composer' ),
                'description' => __( 'Enter your content.', 'js_composer' ),
            ),
            // Custom class field
            array(
                'type'        => 'textfield',
                'heading'     => __( 'Custom Class', 'js_composer' ),
                'param_name'  => 'el_class',
                'std'         => '',
                'description' => __( 'Description for el_class param.', 'visualcomposer-example' ),
            ),
            // Design options tab
            array(
                'type'       => 'css_editor',
                'heading'    => __( 'Css', 'js_composer' ),
                'param_name' => 'css',
                'group'      => __( 'Design options', 'js_composer' ),
            ),
        ),
    ));
}