API tools faq
paste
EduardET

Custom Audio Module

EduardET
Feb 20th, 2018
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 14.81 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2.  
  3. class WPC_ET_Builder_Module_Audio extends ET_Builder_Module {
  4.     function init() {
  5.         $this->name       = esc_html__( 'WPC Audio', 'et_builder' );
  6.         $this->slug       = 'et_pb_audio_wpc';
  7.         $this->fb_support = false;
  8.  
  9.         $this->whitelisted_fields = array(
  10.             'audio',
  11.             'title',
  12.             'artist_name',
  13.             'album_name',
  14.             'image_url',
  15.             'background_color',
  16.             'background_layout',
  17.             'admin_label',
  18.             'module_id',
  19.             'module_class',
  20.         );
  21.  
  22.         $this->fields_defaults = array(
  23.             'background_color'  => array( et_builder_accent_color(), 'add_default_setting' ),
  24.             'background_layout' => array( 'dark' ),
  25.             'text_orientation'  => array( 'center' ),
  26.         );
  27.  
  28.         $this->main_css_element = '%%order_class%%.et_pb_audio_module';
  29.  
  30.         $this->options_toggles = array(
  31.             'general'  => array(
  32.                 'toggles' => array(
  33.                     'main_content' => esc_html__( 'Text', 'et_builder' ),
  34.                     'audio'        => esc_html__( 'Audio', 'et_builder' ),
  35.                     'image'        => esc_html__( 'Image', 'et_builder' ),
  36.                 ),
  37.             ),
  38.             'advanced' => array(
  39.                 'toggles' => array(
  40.                     'text' => array(
  41.                         'title'    => esc_html__( 'Text', 'et_builder' ),
  42.                         'priority' => 49,
  43.                     ),
  44.                     'image' => array(
  45.                         'title' => esc_html__( 'Image', 'et_builder' ),
  46.                         'priority' => 51,
  47.                     ),
  48.                 ),
  49.             ),
  50.         );
  51.  
  52.         $this->advanced_options = array(
  53.             'fonts' => array(
  54.                 'title' => array(
  55.                     'label'    => esc_html__( 'Title', 'et_builder' ),
  56.                     'css'      => array(
  57.                         'main' => "{$this->main_css_element} h2, {$this->main_css_element} h1.et_pb_module_header, {$this->main_css_element} h3.et_pb_module_header, {$this->main_css_element} h4.et_pb_module_header, {$this->main_css_element} h5.et_pb_module_header, {$this->main_css_element} h6.et_pb_module_header",
  58.                         'important' => 'plugin_only',
  59.                     ),
  60.                     'header_level' => array(
  61.                         'default' => 'h2',
  62.                     ),
  63.                 ),
  64.                 'caption'   => array(
  65.                     'label'    => esc_html__( 'Caption', 'et_builder' ),
  66.                     'css'      => array(
  67.                         'line_height' => "{$this->main_css_element} p",
  68.                         'main' => "{$this->main_css_element} p",
  69.                         'plugin_main' => "{$this->main_css_element} p, {$this->main_css_element} p strong",
  70.                     ),
  71.                 ),
  72.             ),
  73.             'background' => array(
  74.                 'settings' => array(
  75.                     'color' => 'alpha',
  76.                 ),
  77.                 'css' => array(
  78.                     'important' => true,
  79.                 ),
  80.             ),
  81.             'custom_margin_padding' => array(
  82.                 'css' => array(
  83.                     'important' => 'all',
  84.                     'padding' => '.et_pb_column %%order_class%% .et_pb_audio_module_content',
  85.                 ),
  86.             ),
  87.             'max_width' => array(
  88.                 'css' => array(
  89.                     'module_alignment' => '%%order_class%%.et_pb_audio_module.et_pb_module',
  90.                 ),
  91.             ),
  92.             'text'      => array(
  93.                 'css' => array(
  94.                     'text_orientation' => '%%order_class%% .et_pb_audio_module_content',
  95.                     'text_shadow'      => '%%order_class%% .et_pb_audio_module_content',
  96.                 ),
  97.             ),
  98.             'filters' => array(
  99.                 'css' => array(
  100.                     'main' => '%%order_class%%',
  101.                 ),
  102.                 'child_filters_target' => array(
  103.                     'tab_slug' => 'advanced',
  104.                     'toggle_slug' => 'image',
  105.                 ),
  106.             ),
  107.             'image' => array(
  108.                 'css' => array(
  109.                     'main' => '%%order_class%% .et_pb_audio_cover_art',
  110.                 ),
  111.             ),
  112.         );
  113.         $this->custom_css_options = array(
  114.             'audio_cover_art' => array(
  115.                 'label'    => esc_html__( 'Audio Cover Art', 'et_builder' ),
  116.                 'selector' => '.et_pb_audio_cover_art',
  117.             ),
  118.             'audio_content' => array(
  119.                 'label'    => esc_html__( 'Audio Content', 'et_builder' ),
  120.                 'selector' => '.et_pb_audio_module_content',
  121.             ),
  122.             'audio_title' => array(
  123.                 'label'    => esc_html__( 'Audio Title', 'et_builder' ),
  124.                 'selector' => '.et_pb_audio_module_content h2',
  125.             ),
  126.             'audio_meta' => array(
  127.                 'label'    => esc_html__( 'Audio Meta', 'et_builder' ),
  128.                 'selector' => '.et_audio_module_meta',
  129.             ),
  130.             'audio_buttons' => array(
  131.                 'label'    => esc_html__( 'Player Buttons', 'et_builder' ),
  132.                 'selector' => "{$this->main_css_element} .mejs-button.mejs-playpause-button button:before,{$this->main_css_element} .mejs-button.mejs-volume-button.mejs-mute button:before",
  133.             ),
  134.             'audio_timer' => array(
  135.                 'label'    => esc_html__( 'Player Timer', 'et_builder' ),
  136.                 'selector' => '.mejs-time.mejs-currenttime-container.custom',
  137.             ),
  138.             'audio_sliders' => array(
  139.                 'label'    => esc_html__( 'Player Sliders', 'et_builder' ),
  140.                 'selector' => "{$this->main_css_element} .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total,{$this->main_css_element} .et_audio_container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total",
  141.             ),
  142.             'audio_sliders_current' => array(
  143.                 'label'    => esc_html__( 'Player Sliders Current', 'et_builder' ),
  144.                 'selector' => "{$this->main_css_element} .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-current,{$this->main_css_element} .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-handle,{$this->main_css_element} .et_audio_container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,{$this->main_css_element} .et_audio_container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle",
  145.             ),
  146.         );
  147.     }
  148.  
  149.     function get_fields() {
  150.         $fields = array(
  151.             'audio' => array(
  152.                 'label'              => esc_html__( 'Audio', 'et_builder' ),
  153.                 'type'               => 'upload',
  154.                 'option_category'    => 'basic_option',
  155.                 'data_type'          => 'audio',
  156.                 'upload_button_text' => esc_attr__( 'Upload an audio file', 'et_builder' ),
  157.                 'choose_text'        => esc_attr__( 'Choose an Audio file', 'et_builder' ),
  158.                 'update_text'        => esc_attr__( 'Set As Audio for the module', 'et_builder' ),
  159.                 'description'        => esc_html__( 'Define the audio file for use in the module. To remove an audio file from the module, simply delete the URL from the settings field.', 'et_builder' ),
  160.                 'toggle_slug'        => 'audio',
  161.                 'computed_affects'   => array(
  162.                     '__audio',
  163.                 ),
  164.             ),
  165.             'title' => array(
  166.                 'label'           => esc_html__( 'Title', 'et_builder' ),
  167.                 'type'            => 'text',
  168.                 'option_category' => 'basic_option',
  169.                 'description'     => esc_html__( 'Define a title.', 'et_builder' ),
  170.                 'toggle_slug'     => 'main_content',
  171.             ),
  172.             'artist_name' => array(
  173.                 'label'           => esc_html__( 'Artist Name', 'et_builder' ),
  174.                 'type'            => 'text',
  175.                 'option_category' => 'basic_option',
  176.                 'description'     => esc_html__( 'Define an artist name.', 'et_builder' ),
  177.                 'toggle_slug'     => 'main_content',
  178.             ),
  179.             'album_name' => array(
  180.                 'label'           => esc_html__( 'Album name', 'et_builder' ),
  181.                 'type'            => 'text',
  182.                 'option_category' => 'basic_option',
  183.                 'description'     => esc_html__( 'Define an album name.', 'et_builder' ),
  184.                 'toggle_slug'     => 'main_content',
  185.             ),
  186.             'image_url' => array(
  187.                 'label'              => esc_html__( 'Cover Art Image URL', 'et_builder' ),
  188.                 'type'               => 'upload',
  189.                 'option_category'    => 'basic_option',
  190.                 'upload_button_text' => esc_attr__( 'Upload an image', 'et_builder' ),
  191.                 'choose_text'        => esc_attr__( 'Choose an Image', 'et_builder' ),
  192.                 'update_text'        => esc_attr__( 'Set As Image', 'et_builder' ),
  193.                 'description'        => esc_html__( 'Upload your desired image, or type in the URL to the image you would like to display.', 'et_builder' ),
  194.                 'toggle_slug'        => 'image',
  195.                 'computed_affects'   => array(
  196.                     '__audio',
  197.                 ),
  198.             ),
  199.             'background_color' => array(
  200.                 'label'             => esc_html__( 'Background Color', 'et_builder' ),
  201.                 'type'              => 'color-alpha',
  202.                 'toggle_slug'       => 'background',
  203.                 'description'       => esc_html__( 'Define a custom background color for your module, or leave blank to use the default color.', 'et_builder' ),
  204.             ),
  205.             'background_layout' => array(
  206.                 'label'             => esc_html__( 'Text Color', 'et_builder' ),
  207.                 'type'              => 'select',
  208.                 'option_category'   => 'color_option',
  209.                 'options'           => array(
  210.                     'dark'  => esc_html__( 'Light', 'et_builder' ),
  211.                     'light' => esc_html__( 'Dark', 'et_builder' ),
  212.                 ),
  213.                 'tab_slug'          => 'advanced',
  214.                 'toggle_slug'       => 'text',
  215.                 'description'       => esc_html__( 'Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.', 'et_builder' ),
  216.             ),
  217.             'disabled_on' => array(
  218.                 'label'           => esc_html__( 'Disable on', 'et_builder' ),
  219.                 'type'            => 'multiple_checkboxes',
  220.                 'options'         => array(
  221.                     'phone'   => esc_html__( 'Phone', 'et_builder' ),
  222.                     'tablet'  => esc_html__( 'Tablet', 'et_builder' ),
  223.                     'desktop' => esc_html__( 'Desktop', 'et_builder' ),
  224.                 ),
  225.                 'additional_att'  => 'disable_on',
  226.                 'option_category' => 'configuration',
  227.                 'description'     => esc_html__( 'This will disable the module on selected devices', 'et_builder' ),
  228.                 'tab_slug'        => 'custom_css',
  229.                 'toggle_slug'     => 'visibility',
  230.             ),
  231.             'admin_label' => array(
  232.                 'label'       => esc_html__( 'Admin Label', 'et_builder' ),
  233.                 'type'        => 'text',
  234.                 'description' => esc_html__( 'This will change the label of the module in the builder for easy identification.', 'et_builder' ),
  235.                 'toggle_slug' => 'admin_label',
  236.             ),
  237.             'module_id' => array(
  238.                 'label'           => esc_html__( 'CSS ID', 'et_builder' ),
  239.                 'type'            => 'text',
  240.                 'option_category' => 'configuration',
  241.                 'tab_slug'        => 'custom_css',
  242.                 'toggle_slug'     => 'classes',
  243.                 'option_class'    => 'et_pb_custom_css_regular',
  244.             ),
  245.             'module_class' => array(
  246.                 'label'           => esc_html__( 'CSS Class', 'et_builder' ),
  247.                 'type'            => 'text',
  248.                 'option_category' => 'configuration',
  249.                 'tab_slug'        => 'custom_css',
  250.                 'toggle_slug'     => 'classes',
  251.                 'option_class'    => 'et_pb_custom_css_regular',
  252.             ),
  253.             '__audio' => array(
  254.                 'type'                => 'computed',
  255.                 'computed_callback'   => array( 'ET_Builder_Module_Audio', 'get_audio' ),
  256.                 'computed_depends_on' => array(
  257.                     'audio',
  258.                 ),
  259.                 'computed_minimum' => array(
  260.                     'audio',
  261.                 ),
  262.             ),
  263.         );
  264.  
  265.         return $fields;
  266.     }
  267.  
  268.     static function get_audio( $args = array(), $conditional_tags = array(), $current_page = array() ) {
  269.         $defaults = array(
  270.             'audio' => '',
  271.         );
  272.  
  273.         $args = wp_parse_args( $args, $defaults );
  274.  
  275.         // remove all filters from WP audio shortcode to make sure current theme doesn't add any elements into audio module
  276.         remove_all_filters( 'wp_audio_shortcode_library' );
  277.         remove_all_filters( 'wp_audio_shortcode' );
  278.         remove_all_filters( 'wp_audio_shortcode_class' );
  279.  
  280.         return do_shortcode( sprintf( '[audio src="%s" /]', $args['audio'] ) );
  281.     }
  282.  
  283.     function shortcode_callback( $atts, $content = null, $function_name ) {
  284.         global $wp_version;
  285.         $module_id         = $this->shortcode_atts['module_id'];
  286.         $module_class      = $this->shortcode_atts['module_class'];
  287.         $audio             = $this->shortcode_atts['audio'];
  288.         $title             = $this->shortcode_atts['title'];
  289.         $artist_name       = $this->shortcode_atts['artist_name'];
  290.         $album_name        = $this->shortcode_atts['album_name'];
  291.         $image_url         = $this->shortcode_atts['image_url'];
  292.         $background_color  = '' !== $this->shortcode_atts['background_color'] ? $this->shortcode_atts['background_color'] : $this->fields_defaults['background_color'][0];
  293.         $background_layout = $this->shortcode_atts['background_layout'];
  294.         $header_level      = $this->shortcode_atts['title_level'];
  295.         $wp_48_or_lower    = version_compare( $wp_version, '4.9' ) === -1 ? 'et_pb_audio_legacy' : '';
  296.  
  297.         $module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name );
  298.  
  299.         $meta = $cover_art = '';
  300.         $class = " et_pb_module et_pb_bg_layout_{$background_layout}";
  301.  
  302.         if ( 'light' === $background_layout ) {
  303.             $class .= ' et_pb_text_color_dark';
  304.         }
  305.  
  306.         if ( '' !== $artist_name || '' !== $album_name ) {
  307.             if ( '' !== $artist_name && '' !== $album_name ) {
  308.                 $album_name = ' <span class="wpc-album-name"> ' . $album_name . '</span>';
  309.             }
  310.  
  311.             if ( '' !== $artist_name ) {
  312.                 $artist_name = sprintf(
  313.                     et_get_safe_localization( _x( 'by <strong>%1$s</strong>', 'Audio Module meta information', 'et_builder' ) ),
  314.                     esc_html( $artist_name )
  315.                 );
  316.             }
  317.  
  318.             $meta = sprintf( '%1$s%2$s',
  319.                 $artist_name,
  320.                 $album_name
  321.             );
  322.  
  323.             $meta = sprintf( '<p class="et_audio_module_meta">%1$s</p>', $meta );
  324.         }
  325.  
  326.         if ( '' !== $image_url ) {
  327.             $cover_art = sprintf(
  328.                 '<div class="et_pb_audio_cover_art" style="background-image: url(%1$s);">
  329.                 </div>',
  330.                 esc_attr( $image_url )
  331.             );
  332.         }
  333.         $video_background = $this->video_background();
  334.         $parallax_image_background = $this->get_parallax_image_background();
  335.  
  336.         // some themes do not include these styles/scripts so we need to enqueue them in this module
  337.         wp_enqueue_style( 'wp-mediaelement' );
  338.         wp_enqueue_script( 'et-builder-mediaelement' );
  339.  
  340.         // remove all filters from WP audio shortcode to make sure current theme doesn't add any elements into audio module
  341.         remove_all_filters( 'wp_audio_shortcode_library' );
  342.         remove_all_filters( 'wp_audio_shortcode' );
  343.         remove_all_filters( 'wp_audio_shortcode_class' );
  344.  
  345.         $video_background = $this->video_background();
  346.  
  347.         // Images: Add CSS Filters and Mix Blend Mode rules (if set)
  348.         if ( array_key_exists( 'image', $this->advanced_options ) && array_key_exists( 'css', $this->advanced_options['image'] ) ) {
  349.             $module_class .= $this->generate_css_filters(
  350.                 $function_name,
  351.                 'child_',
  352.                 self::$data_utils->array_get( $this->advanced_options['image']['css'], 'main', '%%order_class%%' )
  353.             );
  354.         }
  355.  
  356.         $output = sprintf(
  357.             '<div%8$s class="et_pb_audio_module clearfix%4$s%7$s%9$s%10$s%12$s %14$s"%5$s>
  358.                 %13$s
  359.                 %11$s
  360.                 %6$s
  361.  
  362.                 <div class="et_pb_audio_module_content et_audio_container">
  363.                     %1$s
  364.                     %2$s
  365.                     %3$s
  366.                 </div>
  367.             </div>',
  368.             ( '' !== $title ? sprintf( '<%1$s class="et_pb_module_header">%2$s</%1$s>', et_pb_process_header_level( $header_level, 'h2' ), esc_html( $title ) ) : '' ),
  369.             $meta,
  370.             self::get_audio( array(
  371.                 'audio' => $audio,
  372.             ) ),
  373.             esc_attr( $class ),
  374.             sprintf( ' style="background-color: %1$s;"', esc_attr( $background_color ) ),
  375.             $cover_art,
  376.             ( '' === $image_url ? ' et_pb_audio_no_image' : '' ),
  377.             ( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ),
  378.             ( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ),
  379.             '' !== $video_background ? ' et_pb_section_video et_pb_preload' : '',
  380.             $video_background,
  381.             '' !== $parallax_image_background ? ' et_pb_section_parallax' : '',
  382.             $parallax_image_background,
  383.             $wp_48_or_lower
  384.         );
  385.  
  386.         return $output;
  387.     }
  388.  
  389.     public function process_box_shadow( $function_name ) {
  390.         /**
  391.          * @var ET_Builder_Module_Field_BoxShadow $boxShadow
  392.          */
  393.         $boxShadow = ET_Builder_Module_Fields_Factory::get( 'BoxShadow' );
  394.         $selector = '.' . self::get_module_order_class( $function_name );
  395.  
  396.         self::set_style( $function_name, $boxShadow->get_style( $selector, $this->shortcode_atts ) );
  397.     }
  398. }
  399.  
  400. new WPC_ET_Builder_Module_Audio;
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!