/core/widgets/modules/slider.php

  1. <?php /** 
  2. * Sliders Widget 
  3. * 
  4. * This file is used to register and display the Layers - Slider widget. 
  5. * 
  6. * @package Layers 
  7. * @since Layers 1.0.0 
  8. */ 
  9. if( !class_exists( 'Layers_Slider_Widget' ) ) { 
  10. class Layers_Slider_Widget extends Layers_Widget { 
  11.  
  12. /** 
  13. * Widget construction 
  14. */ 
  15. function __construct() { 
  16.  
  17. /** 
  18. * Widget variables 
  19. * 
  20. * @param string $this->widget_id Widget title 
  21. * @param string $widget_id Widget slug for use as an ID/classname 
  22. * @param string $post_type (optional) Post type for use in widget options 
  23. * @param string $taxonomy (optional) Taxonomy slug for use as an ID/classname 
  24. * @param array $checkboxes (optional) Array of checkbox names to be saved in this widget. Don't forget these please! 
  25. */ 
  26. $this->widget_title = __( 'Slider' , 'layerswp' ); 
  27. $this->widget_id = 'slide'; 
  28. $this->post_type = ''; 
  29. $this->taxonomy = ''; 
  30. $this->checkboxes = array( 
  31. 'show_slider_arrows',  
  32. 'show_slider_dots',  
  33. 'autoplay_slides',  
  34. 'autoheight_slides',  
  35. ); 
  36.  
  37. /** Widget settings. */ 
  38. $widget_ops = array( 
  39. 'classname' => 'obox-layers-' . $this->widget_id .'-widget',  
  40. 'description' => __( 'This widget is used to display slides and can be used to display a page-banner.', 'layerswp' ) ,  
  41. 'customize_selective_refresh' => TRUE,  
  42. ); 
  43.  
  44. /** Widget control settings. */ 
  45. $control_ops = array( 
  46. 'width' => LAYERS_WIDGET_WIDTH_LARGE,  
  47. 'height' => NULL,  
  48. 'id_base' => LAYERS_THEME_SLUG . '-widget-' . $this->widget_id,  
  49. ); 
  50.  
  51. /** Create the widget. */ 
  52. parent::__construct( 
  53. LAYERS_THEME_SLUG . '-widget-' . $this->widget_id ,  
  54. $this->widget_title,  
  55. $widget_ops,  
  56. $control_ops 
  57. ); 
  58.  
  59. /** Setup Widget Defaults */ 
  60. $this->defaults = array ( 
  61. 'title' => NULL,  
  62. 'excerpt' => NULL,  
  63. 'slide_height' => '550',  
  64. 'show_slider_arrows' => 'on',  
  65. 'show_slider_dots' => 'on',  
  66. 'animation_type' => 'slide',  
  67. ); 
  68.  
  69. /** Setup Widget Repeater Defaults */ 
  70. $this->register_repeater_defaults( 'slide', 2, array( 
  71. 'title' => __( 'Slider Title', 'layerswp' ),  
  72. 'excerpt' => __( 'Short Excerpt', 'layerswp' ),  
  73. 'design' => array( 
  74. 'imagealign' => 'image-top',  
  75. 'imageratios' => NULL,  
  76. 'background' => array( 
  77. 'color' => '#f8f8f8',  
  78. 'position' => 'center',  
  79. 'repeat' => 'no-repeat',  
  80. 'size' => 'cover' 
  81. ),  
  82. 'fonts' => array( 
  83. 'color' => NULL,  
  84. 'align' => 'text-center',  
  85. 'size' => 'large',  
  86. 'shadow' => '',  
  87. 'heading-type' => 'h3',  
  88. ),  
  89. 'button' => array( 
  90. 'link_type' => 'custom',  
  91. 'link_type_custom' => '#more',  
  92. 'link_text' => __( 'See More', 'layerswp' ),  
  93. ),  
  94. ) ); 
  95.  
  96.  
  97. /** 
  98. * Enqueue Scripts 
  99. */ 
  100. function enqueue_scripts() { 
  101.  
  102. // Enqueue Swiper Slider 
  103. wp_enqueue_script( LAYERS_THEME_SLUG . '-slider-js' ); 
  104. wp_enqueue_style( LAYERS_THEME_SLUG . '-slider' ); 
  105.  
  106. /** 
  107. * Widget front end display 
  108. */ 
  109. function widget( $args, $instance ) { 
  110. global $wp_customize; 
  111.  
  112. $this->backup_inline_css(); 
  113.  
  114. // Turn $args array into variables. 
  115. extract( $args ); 
  116.  
  117. // Use defaults if $instance is empty. 
  118. if( empty( $instance ) && ! empty( $this->defaults ) ) { 
  119. $instance = wp_parse_args( $instance, $this->defaults ); 
  120.  
  121. // Mix in new/unset defaults on every instance load (NEW) 
  122. $instance = $this->apply_defaults( $instance ); 
  123.  
  124. // Enqueue Scipts when needed 
  125. $this->enqueue_scripts(); 
  126.  
  127. // Apply slider arrow color 
  128. if( $this->check_and_return( $instance, 'slider_arrow_color' ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id, 'color', array( 'selectors' => array( '.arrows a' ), 'color' => $this->check_and_return( $instance, 'slider_arrow_color' ) ) ); 
  129. if( $this->check_and_return( $instance, 'slider_arrow_color' ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id, 'border', array( 'selectors' => array( 'span.swiper-pagination-switch' ), 'border' => array( 'color' => $this->check_and_return( $instance, 'slider_arrow_color' ) ) ) ); 
  130. if( $this->check_and_return( $instance, 'slider_arrow_color' ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id, 'background', array( 'selectors' => array( 'span.swiper-pagination-switch' ), 'background' => array( 'color' => $this->check_and_return( $instance, 'slider_arrow_color' ) ) ) ); 
  131. if( $this->check_and_return( $instance, 'slider_arrow_color' ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id, 'background', array( 'selectors' => array( 'span.swiper-pagination-switch.swiper-active-switch' ), 'background' => array( 'color' => 'transparent !important' ) ) ); 
  132.  
  133.  
  134. // Get slider height css 
  135. $slider_height_css = ''; 
  136. if( 'layout-full-screen' != $this->check_and_return( $instance , 'design', 'layout' ) && FALSE == $this->check_and_return( $instance , 'autoheight_slides' ) && $this->check_and_return( $instance , 'slide_height' ) ) { 
  137. $slider_height_css = 'height: ' . $instance['slide_height'] . 'px; '; 
  138.  
  139. // Apply the advanced widget styling 
  140. $this->apply_widget_advanced_styling( $widget_id, $instance ); 
  141.  
  142. /** 
  143. * Generate the widget container class 
  144. */ 
  145. $widget_container_class = array(); 
  146. $widget_container_class[] = 'widget'; 
  147. $widget_container_class[] = 'layers-slider-widget'; 
  148. $widget_container_class[] = 'row'; 
  149. $widget_container_class[] = 'slide'; 
  150. $widget_container_class[] = 'swiper-container'; 
  151. $widget_container_class[] = 'loading'; // `loading` will be changed to `loaded` to fade in the slider. 
  152. $widget_container_class[] = $this->check_and_return( $instance , 'design', 'advanced', 'customclass' ); // Apply custom class from design-bar's advanced control. 
  153. $widget_container_class[] = $this->get_widget_spacing_class( $instance ); 
  154. $widget_container_class[] = $this->get_widget_layout_class( $instance ); 
  155.  
  156. if( $this->check_and_return( $instance , 'autoheight_slides' ) ) { 
  157. if( FALSE !== ( $fullwidth = array_search( 'full-screen', $widget_container_class ) ) ) { 
  158. unset( $widget_container_class[ $fullwidth ] ); 
  159. $widget_container_class[] = 'auto-height'; 
  160.  
  161. if( $this->check_and_return( $instance , 'design', 'layout') ) { 
  162. // Slider layout eg 'slider-layout-full-screen' 
  163. $widget_container_class[] = 'slider-' . $instance['design']['layout']; 
  164. if( ( ! isset( $instance['design']['layout'] ) || ( isset( $instance['design']['layout'] ) && 'layout-full-screen' != $instance['design']['layout'] ) ) ) { 
  165. // If slider is not full screen 
  166. $widget_container_class[] = 'not-full-screen'; 
  167. if( 1 == count( $instance[ 'slides' ] ) ) { 
  168. // If only one slide 
  169. $widget_container_class[] = 'single-slide'; 
  170.  
  171. $widget_container_class = apply_filters( 'layers_slider_widget_container_class' , $widget_container_class, $this, $instance ); 
  172. $widget_container_class = implode( ' ', $widget_container_class ); 
  173.  
  174. /** 
  175. * Slider HTML 
  176. */ 
  177.  
  178. if( ! empty( $instance[ 'slides' ] ) ) { ?> 
  179.  
  180. <?php 
  181. // Custom Anchor 
  182. echo $this->custom_anchor( $instance ); ?> 
  183.  
  184. <div id="<?php echo esc_attr( $widget_id ); ?>" class="<?php echo esc_attr( $widget_container_class ); ?>" style="<?php echo esc_attr( $slider_height_css ); ?>" <?php $this->selective_refresh_atts( $args ); ?>> 
  185.  
  186. <?php do_action( 'layers_before_slider_widget_inner', $this, $instance ); ?> 
  187.  
  188. <?php if( 1 < count( $instance[ 'slides' ] ) && isset( $instance['show_slider_arrows'] ) ) { ?> 
  189. <div class="arrows"> 
  190. <a href="" class="l-left-arrow animate"></a> 
  191. <a href="" class="l-right-arrow animate"></a> 
  192. </div> 
  193. <?php } ?> 
  194.  
  195. <div class="<?php echo $this->get_layers_field_id( 'pages' ); ?> pages animate"> 
  196. <?php for( $i = 0; $i < count( $instance[ 'slides' ] ); $i++ ) { ?> 
  197. <a href="" class="page animate <?php if( 0 == $i ) echo 'active'; ?>"></a> 
  198. <?php } ?> 
  199. </div> 
  200.  
  201. <div class="swiper-wrapper"> 
  202. <?php foreach ( wp_parse_id_list( $instance[ 'slide_ids' ] ) as $slide_key ) { 
  203.  
  204. // Make sure we've got a column going on here 
  205. if( !isset( $instance[ 'slides' ][ $slide_key ] ) ) continue; 
  206.  
  207. // Setup the relevant slide 
  208. $item_instance = $instance[ 'slides' ][ $slide_key ]; 
  209.  
  210. // Mix in new/unset defaults on every instance load (NEW) 
  211. $item_instance = $this->apply_defaults( $item_instance, 'slide' ); 
  212.  
  213. // Set the background styling 
  214. if( !empty( $item_instance['design'][ 'background' ] ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id . '-' . $slide_key , 'background', array( 'background' => $item_instance['design'][ 'background' ] ) ); 
  215. if( !empty( $item_instance['design']['fonts'][ 'color' ] ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id . '-' . $slide_key , 'color', array( 'selectors' => array( '.heading', '.heading a', 'div.excerpt' ) , 'color' => $item_instance['design']['fonts'][ 'color' ] ) ); 
  216. if( !empty( $item_instance['design']['fonts'][ 'shadow' ] ) ) $this->inline_css .= layers_inline_styles( '#' . $widget_id . '-' . $slide_key , 'text-shadow', array( 'selectors' => array( '.heading', '.heading a', 'div.excerpt' ) , 'text-shadow' => $item_instance['design']['fonts'][ 'shadow' ] ) ); 
  217.  
  218. // Set the button styling 
  219. $button_size = ''; 
  220. if ( function_exists( 'layers_pro_apply_widget_button_styling' ) ) { 
  221. $button_size = $this->check_and_return( $item_instance , 'design' , 'buttons-size' ) ? 'btn-' . $this->check_and_return( $item_instance , 'design' , 'buttons-size' ) : '' ; 
  222. $this->inline_css .= layers_pro_apply_widget_button_styling( $this, $item_instance, array( "#{$widget_id}-{$slide_key} .button" ) ); 
  223.  
  224. // Set Featured Media 
  225. $featureimage = $this->check_and_return( $item_instance , 'design' , 'featuredimage' ); 
  226. $featurevideo = $this->check_and_return( $item_instance , 'design' , 'featuredvideo' ); 
  227.  
  228. // Set Image Sizes 
  229. if( isset( $item_instance['design'][ 'imageratios' ] ) ) { 
  230.  
  231. // Translate Image Ratio into something usable 
  232. $image_ratio = layers_translate_image_ratios( $item_instance['design'][ 'imageratios' ] ); 
  233. $use_image_ratio = $image_ratio . '-medium'; 
  234.  
  235. } else { 
  236. $use_image_ratio = 'large'; 
  237.  
  238. // Get the button array. 
  239. $link_array = $this->check_and_return_link( $item_instance, 'button' ); 
  240. $link_href_attr = ( $link_array['link'] ) ? 'href="' . esc_url( $link_array['link'] ) . '"' : ''; 
  241. $link_target_attr = ( '_blank' == $link_array['target'] ) ? 'target="_blank"' : ''; 
  242.  
  243. /** 
  244. * Set Individual Slide CSS 
  245. */ 
  246. $slide_class = array(); 
  247. $slide_class[] = 'swiper-slide'; 
  248. if( $this->check_and_return( $item_instance, 'design', 'background' , 'color' ) ) { 
  249. if( 'dark' == layers_is_light_or_dark( $this->check_and_return( $item_instance, 'design', 'background' , 'color' ) ) ) { 
  250. $slide_class[] = 'invert'; 
  251. } else { 
  252. $slide_class[] = 'invert'; 
  253. if( false != $this->check_and_return( $item_instance , 'image' ) || 'image-left' == $item_instance['design'][ 'imagealign' ] || 'image-top' == $item_instance['design'][ 'imagealign' ] ) { 
  254. $slide_class[] = 'has-image'; 
  255. if( isset( $item_instance['design'][ 'imagealign' ] ) && '' != $item_instance['design'][ 'imagealign' ] ) { 
  256. $slide_class[] = $item_instance['design'][ 'imagealign' ]; 
  257. if( isset( $item_instance['design']['fonts'][ 'align' ] ) && '' != $item_instance['design']['fonts'][ 'align' ] ) { 
  258. $slide_class[] = $item_instance['design']['fonts'][ 'align' ]; 
  259. $slide_class[] = $this->check_and_return( $item_instance, 'design', 'advanced', 'customclass' ); // Apply custom class from design-bar's advanced control. 
  260.  
  261. $slide_class = apply_filters( 'layers_slider_widget_item_class', $slide_class, $this, $item_instance, $instance ); 
  262. $slide_class = implode( ' ', $slide_class ); 
  263.  
  264. // Set link entire slide or not 
  265. $slide_wrapper_tag = 'div'; 
  266. $slide_wrapper_href = ''; 
  267.  
  268. if( $link_array['link'] && ! $link_array['text'] ) { 
  269. $slide_wrapper_tag = 'a'; 
  270. $slide_wrapper_href = $link_href_attr; 
  271. } ?> 
  272. <<?php echo $slide_wrapper_tag; ?> <?php echo $slide_wrapper_href; ?> class="<?php echo $slide_class; ?>" id="<?php echo $widget_id; ?>-<?php echo $slide_key; ?>" style="float: left; <?php echo $slider_height_css; ?>" <?php echo $link_target_attr; ?>> 
  273.  
  274. <?php do_action( 'layers_before_slider_widget_item_inner', $this, $item_instance, $instance ); ?> 
  275.  
  276. <?php 
  277. /** 
  278. * Set Overlay CSS Classes 
  279. */ 
  280. $overlay_class = array(); 
  281. $overlay_class[] = 'overlay'; 
  282. if( isset( $item_instance['design'][ 'background' ][ 'darken' ] ) ) { 
  283. $overlay_class[] = 'darken'; 
  284. if( '' != $this->check_and_return( $item_instance, 'design' , 'background', 'image' ) || '' != $this->check_and_return( $item_instance, 'design' , 'background', 'color' ) ) { 
  285. $overlay_class[] = 'content'; 
  286. $overlay_classes = implode( ' ', $overlay_class ); ?> 
  287.  
  288. <div class="<?php echo $overlay_classes; ?>" > 
  289. <div class="container clearfix"> 
  290. <?php if( '' != $item_instance['title'] || '' != $item_instance['excerpt'] || '' != $link_array['link'] ) { ?> 
  291. <div class="copy-container"> 
  292. <div class="section-title <?php echo ( isset( $item_instance['design']['fonts'][ 'size' ] ) ? $item_instance['design']['fonts'][ 'size' ] : '' ); ?>"> 
  293. <?php if( $this->check_and_return( $item_instance , 'title' ) ) { ?> 
  294. <<?php echo $this->check_and_return( $item_instance, 'design', 'fonts', 'heading-type' ); ?> data-swiper-parallax="-100" class="heading"> 
  295. <?php echo $item_instance['title']; ?> 
  296. </<?php echo $this->check_and_return( $item_instance, 'design', 'fonts', 'heading-type' ); ?>> 
  297. <?php } ?> 
  298. <?php if( $this->check_and_return( $item_instance , 'excerpt' ) ) { ?> 
  299. <div data-swiper-parallax="-300" class="excerpt"><?php layers_the_content( $item_instance['excerpt'] ); ?></div> 
  300. <?php } ?> 
  301. <?php if( 'div' == $slide_wrapper_tag && $link_array['link'] && $link_array['text'] ) { ?> 
  302. <a data-swiper-parallax="-200" <?php echo $link_href_attr; ?> <?php echo $link_target_attr; ?> class="button <?php echo $button_size; ?>"> 
  303. <?php echo $link_array['text']; ?> 
  304. </a> 
  305. <?php } ?> 
  306. </div> 
  307. </div> 
  308. <?php } // if title || excerpt ?> 
  309. <?php if( $featureimage || $featurevideo ) { ?> 
  310. <div class="image-container <?php echo ( 'image-round' == $this->check_and_return( $item_instance, 'design', 'imageratios' ) ? 'image-rounded' : '' ); ?>"> 
  311. <?php echo layers_get_feature_media( 
  312. $featureimage ,  
  313. $use_image_ratio ,  
  314. $featurevideo 
  315. ); ?> 
  316. </div> 
  317. <?php } // if $item image ?> 
  318. </div> <!-- .container --> 
  319. </div> <!-- .overlay --> 
  320.  
  321. <?php do_action( 'layers_after_slider_widget_item_inner', $this, $item_instance, $instance ); ?> 
  322.  
  323. </<?php echo $slide_wrapper_tag; ?>> 
  324. <?php } // foreach slides ?> 
  325. </div> 
  326.  
  327. <?php do_action( 'layers_after_slider_widget_inner', $this, $instance ); 
  328.  
  329. // Print the Inline Styles for this Widget 
  330. $this->print_inline_css(); 
  331.  
  332. /** 
  333. * Slider javascript initialize 
  334. */ 
  335. $swiper_js_obj = str_replace( '-' , '_' , $this->get_layers_field_id( 'slider' ) ); ?> 
  336. <script type='text/javascript'> 
  337. jQuery(function($) { 
  338.  
  339. var <?php echo $swiper_js_obj; ?> = $('#<?php echo $widget_id; ?>').swiper({ 
  340. mode:'horizontal' 
  341. , onInit: function(s) { 
  342. $(document).trigger( 'layers-slider-init', s); 
  343. , bulletClass: 'swiper-pagination-switch' 
  344. , bulletActiveClass: 'swiper-active-switch swiper-visible-switch' 
  345. , paginationClickable: true 
  346. , watchActiveIndex: true 
  347. <?php if( 'fade' == $this->check_and_return( $instance, 'animation_type' ) ) { ?> 
  348. , effect: '<?php echo $instance['animation_type']; ?>' 
  349. <?php } else if( 'parallax' == $this->check_and_return( $instance, 'animation_type' ) ) { ?> 
  350. , speed: 700 
  351. , parallax: true 
  352. <?php } ?> 
  353. <?php if( isset( $instance['show_slider_dots'] ) && ( !empty( $instance[ 'slides' ] ) && 1 < count( $instance[ 'slides' ] ) ) ) { ?> 
  354. , pagination: '.<?php echo $this->get_layers_field_id( 'pages' ); ?>' 
  355. <?php } ?> 
  356. <?php if( 1 < count( $instance[ 'slides' ] ) ) { ?> 
  357. , loop: true 
  358. <?php } else { ?> 
  359. , loop: false 
  360. , noSwiping: true 
  361. , allowSwipeToPrev: false 
  362. , allowSwipeToNext: false 
  363. <?php } ?> 
  364. <?php if( isset( $instance['autoplay_slides'] ) && isset( $instance['slide_time'] ) && is_numeric( $instance['slide_time'] ) ) {?> 
  365. , autoplay: <?php echo ($instance['slide_time']*1000); ?> 
  366. <?php }?> 
  367. <?php if( isset( $wp_customize ) && $this->check_and_return( $instance, 'focus_slide' ) ) { ?> 
  368. , initialSlide: <?php echo $this->check_and_return( $instance, 'focus_slide' ); ?> 
  369. <?php } ?> 
  370. }); 
  371.  
  372. <?php if( 1 < count( $instance[ 'slides' ] ) ) { ?> 
  373. // Allow keyboard control 
  374. <?php echo $swiper_js_obj; ?>.enableKeyboardControl(); 
  375. <?php } // if > 1 slide ?> 
  376.  
  377. <?php if( TRUE == $this->check_and_return( $instance , 'autoheight_slides' ) ) { ?> 
  378. $( '#<?php echo esc_attr( $widget_id ); ?>' ).imagesLoaded(function() { 
  379. layers_swiper_resize( <?php echo $swiper_js_obj; ?> ); 
  380. }); 
  381.  
  382. $(window).resize(function() { 
  383. layers_swiper_resize( <?php echo $swiper_js_obj; ?> ); 
  384. }); 
  385. <?php } ?> 
  386.  
  387. $('#<?php echo $widget_id; ?>').find('.arrows a').on( 'click' , function(e) { 
  388. e.preventDefault(); 
  389.  
  390. // "Hi Mom" 
  391. $that = $(this); 
  392.  
  393. if( $that.hasClass( 'swiper-pagination-switch' ) ) { 
  394. // Anchors 
  395. <?php echo $swiper_js_obj; ?>.slideTo( $that.index() ); 
  396. } else if( $that.hasClass( 'l-left-arrow' ) ) { 
  397. // Previous 
  398. <?php echo $swiper_js_obj; ?>.slidePrev(); 
  399. } else if( $that.hasClass( 'l-right-arrow' ) ) { 
  400. // Next 
  401. <?php echo $swiper_js_obj; ?>.slideNext(); 
  402.  
  403. return false; 
  404. }); 
  405.  
  406. <?php echo $swiper_js_obj; ?>.init(); 
  407.  
  408. // Do stuff if this is the first widget. 
  409. if ( ! $('#<?php echo $widget_id; ?>').prev('.widget').length ) { 
  410. if ( ! $('#<?php echo $widget_id; ?>').hasClass( '.full-screen' ) ) { 
  411. jQuery('.header-site.header-overlay').css( 'transition', '0s' ); 
  412. setTimeout( function() { jQuery('.header-site.header-overlay').css( 'transition', '' ); }, 1000 ); 
  413. jQuery('body').addClass( 'header-overlay-no-push' ); 
  414.  
  415. // Fade-in slider after it's been initilaized (FOUC). 
  416. $( '#<?php echo $widget_id; ?>' ).removeClass('loading').addClass('loaded'); 
  417. }); 
  418. </script> 
  419.  
  420. </div> 
  421. <?php } 
  422.  
  423.  
  424. /** 
  425. * Widget update 
  426. */ 
  427. function update( $new_instance, $old_instance ) { 
  428.  
  429. if ( isset( $this->checkboxes ) ) { 
  430. foreach( $this->checkboxes as $cb ) { 
  431. if( isset( $old_instance[ $cb ] ) ) { 
  432. $old_instance[ $cb ] = strip_tags( $new_instance[ $cb ] ); 
  433. } // foreach checkboxes 
  434. } // if checkboxes 
  435.  
  436. // Don't break the slider when 
  437. if ( !isset( $new_instance['slides'] ) ) { 
  438. $new_instance['slides'] = array(); 
  439.  
  440. return $new_instance; 
  441.  
  442. /** 
  443. * Widget form 
  444. * 
  445. * We use regular HTML here, it makes reading the widget much easier than if we used just php to echo all the HTML out. 
  446. */ 
  447. function form( $instance ) { 
  448.  
  449. // Use defaults if $instance is empty. 
  450. if( empty( $instance ) && ! empty( $this->defaults ) ) { 
  451. $instance = wp_parse_args( $instance, $this->defaults ); 
  452.  
  453. // Mix in new/unset defaults on every instance load (NEW) 
  454. $instance = $this->apply_defaults( $instance ); 
  455.  
  456. $components = apply_filters( 'layers_slide_widget_design_bar_components', array( 
  457. 'layout' => array( 
  458. 'icon-css' => 'icon-layout-fullwidth',  
  459. 'label' => __( 'Layout', 'layerswp' ),  
  460. 'wrapper-class' => 'layers-pop-menu-wrapper layers-small',  
  461. 'elements' => array( 
  462. 'layout' => array( 
  463. 'type' => 'select-icons',  
  464. 'label' => __( '' , 'layerswp' ),  
  465. 'name' => $this->get_layers_field_name( 'design', 'layout' ) ,  
  466. 'id' => $this->get_layers_field_id( 'design', 'layout' ) ,  
  467. 'value' => ( isset( $instance['design']['layout'] ) ) ? $instance['design']['layout'] : NULL,  
  468. 'options' => array( 
  469. 'layout-boxed' => __( 'Boxed' , 'layerswp' ),  
  470. 'layout-fullwidth' => __( 'Full Width' , 'layerswp' ),  
  471. 'layout-full-screen' => __( 'Full Screen' , 'layerswp' ) 
  472. ),  
  473. ),  
  474. ),  
  475. ),  
  476. 'display' => array( 
  477. 'icon-css' => 'icon-slider',  
  478. 'label' => __( 'Slider', 'layerswp' ),  
  479. 'elements' => array( 
  480. 'autoheight_slides' => array( 
  481. 'type' => 'checkbox',  
  482. 'name' => $this->get_layers_field_name( 'autoheight_slides' ) ,  
  483. 'id' => $this->get_layers_field_id( 'autoheight_slides' ) ,  
  484. 'value' => ( isset( $instance['autoheight_slides'] ) ) ? $instance['autoheight_slides'] : NULL,  
  485. 'label' => __( 'Auto Height Slides' , 'layerswp' ),  
  486. ),  
  487. 'slide_height' => array( 
  488. 'type' => 'number',  
  489. 'name' => $this->get_layers_field_name( 'slide_height' ) ,  
  490. 'id' => $this->get_layers_field_id( 'slide_height' ) ,  
  491. 'value' => ( isset( $instance['slide_height'] ) ) ? $instance['slide_height'] : NULL,  
  492. 'label' => __( 'Slider Height (px)' , 'layerswp' ),  
  493. 'data' => array( 
  494. 'show-if-selector' => '#' . $this->get_layers_field_id( 'autoheight_slides' ),  
  495. 'show-if-value' => 'false',  
  496. ),  
  497. ),  
  498. 'show_slider_arrows' => array( 
  499. 'type' => 'checkbox',  
  500. 'name' => $this->get_layers_field_name( 'show_slider_arrows' ) ,  
  501. 'id' => $this->get_layers_field_id( 'show_slider_arrows' ) ,  
  502. 'value' => ( isset( $instance['show_slider_arrows'] ) ) ? $instance['show_slider_arrows'] : NULL,  
  503. 'label' => __( 'Show Slider Arrows' , 'layerswp' ),  
  504. ),  
  505. 'slider_arrow_color' => array( 
  506. 'type' => 'color',  
  507. 'name' => $this->get_layers_field_name( 'slider_arrow_color' ) ,  
  508. 'id' => $this->get_layers_field_id( 'slider_arrow_color' ) ,  
  509. 'value' => ( isset( $instance['slider_arrow_color'] ) ) ? $instance['slider_arrow_color'] : NULL,  
  510. 'label' => __( 'Slider Controls Color' , 'layerswp' ),  
  511. 'data' => array( 
  512. 'show-if-selector' => '#' . $this->get_layers_field_id( 'show_slider_arrows' ),  
  513. 'show-if-value' => 'true',  
  514. ),  
  515. ),  
  516. 'show_slider_dots' => array( 
  517. 'type' => 'checkbox',  
  518. 'name' => $this->get_layers_field_name( 'show_slider_dots' ) ,  
  519. 'id' => $this->get_layers_field_id( 'show_slider_dots' ) ,  
  520. 'value' => ( isset( $instance['show_slider_dots'] ) ) ? $instance['show_slider_dots'] : NULL,  
  521. 'label' => __( 'Show Slider Dots' , 'layerswp' ),  
  522. ),  
  523. 'animation_type' => array( 
  524. 'type' => 'select',  
  525. 'name' => $this->get_layers_field_name( 'animation_type' ) ,  
  526. 'id' => $this->get_layers_field_id( 'animation_type' ) ,  
  527. 'value' => ( isset( $instance['animation_type'] ) ) ? $instance['animation_type'] : 'slide',  
  528. 'label' => __( 'Animation Type' , 'layerswp' ),  
  529. 'options' => array( 
  530. 'slide' => __( 'Slide', 'layerswp' ),  
  531. 'fade' => __( 'Fade', 'layerswp' ),  
  532. 'parallax' => __( 'Parallax', 'layerswp' ),  
  533. ),  
  534. ),  
  535. 'autoplay_slides' => array( 
  536. 'type' => 'checkbox',  
  537. 'name' => $this->get_layers_field_name( 'autoplay_slides' ) ,  
  538. 'id' => $this->get_layers_field_id( 'autoplay_slides' ) ,  
  539. 'value' => ( isset( $instance['autoplay_slides'] ) ) ? $instance['autoplay_slides'] : NULL,  
  540. 'label' => __( 'Autoplay Slides' , 'layerswp' ),  
  541. ),  
  542. 'slide_time' => array( 
  543. 'type' => 'number',  
  544. 'name' => $this->get_layers_field_name( 'slide_time' ) ,  
  545. 'id' => $this->get_layers_field_id( 'slide_time' ) ,  
  546. 'min' => 1,  
  547. 'max' => 10,  
  548. 'placeholder' => __( 'Time in seconds, eg. 2' , 'layerswp' ),  
  549. 'value' => ( isset( $instance['slide_time'] ) ) ? $instance['slide_time'] : NULL,  
  550. 'label' => __( 'Slide Interval (seconds)' , 'layerswp' ),  
  551. 'data' => array( 
  552. 'show-if-selector' => '#' . $this->get_layers_field_id( 'autoplay_slides' ),  
  553. 'show-if-value' => 'true',  
  554. ),  
  555. ),  
  556. ),  
  557. ),  
  558. 'advanced',  
  559. ), $this, $instance ); 
  560.  
  561. // Legacy application of this filter - Do Not Use! (will be removed soon) 
  562. $components = apply_filters( 'layers_slide_widget_design_bar_custom_components', $components ); 
  563.  
  564. $this->design_bar( 
  565. 'side', // CSS Class Name 
  566. array( // Widget Object 
  567. 'name' => $this->get_layers_field_name( 'design' ),  
  568. 'id' => $this->get_layers_field_id( 'design' ),  
  569. 'widget_id' => $this->widget_id,  
  570. ),  
  571. $instance, // Widget Values 
  572. $components // Components 
  573. ); ?> 
  574. <div class="layers-container-large" id="layers-slide-widget-<?php echo esc_attr( $this->number ); ?>"> 
  575.  
  576. <?php $this->form_elements()->header( array( 
  577. 'title' =>'Sliders',  
  578. 'icon_class' =>'slider' 
  579. ) ); ?> 
  580.  
  581. <?php echo $this->form_elements()->input( 
  582. array( 
  583. 'type' => 'hidden',  
  584. 'name' => $this->get_layers_field_name( 'focus_slide' ) ,  
  585. 'id' => $this->get_layers_field_id( 'focus_slide' ) ,  
  586. 'value' => ( isset( $instance['focus_slide'] ) ) ? $instance['focus_slide'] : NULL,  
  587. 'data' => array( 
  588. 'focus-slide' => 'true' 
  589. ); ?> 
  590.  
  591. <section class="layers-accordion-section layers-content"> 
  592. <div class="layers-form-item"> 
  593. <?php $this->repeater( 'slide', $instance ); ?> 
  594. </div> 
  595. </section> 
  596.  
  597. </div> 
  598.  
  599. <?php } 
  600.  
  601. function slide_item( $item_guid, $item_instance ) { 
  602.  
  603. // Required - Get the name of this type. 
  604. $type = str_replace( '_item', '', __FUNCTION__ ); 
  605.  
  606. // Mix in new/unset defaults on every instance load (NEW) 
  607. $item_instance = $this->apply_defaults( $item_instance, 'slide' ); 
  608. ?> 
  609. <li class="layers-accordion-item <?php echo $this->item_count; ?>" data-guid="<?php echo $item_guid; ?>"> 
  610.  
  611. <a class="layers-accordion-title"> 
  612. <span> 
  613. <?php echo ucfirst( $type ); ?><span class="layers-detail"><?php if ( isset( $item_instance['title'] ) ) echo $this->format_repeater_title( $item_instance['title'] ); ?></span> 
  614. </span> 
  615. </a> 
  616.  
  617. <section class="layers-accordion-section layers-content"> 
  618. <?php $this->design_bar( 
  619. 'top', // CSS Class Name 
  620. array( 
  621. 'name' => $this->get_layers_field_name( 'design' ),  
  622. 'id' => $this->get_layers_field_id( 'design' ),  
  623. 'widget_id' => $this->widget_id . '_item',  
  624. 'number' => $this->number,  
  625. 'show_trash' => TRUE 
  626. ), // Widget Object 
  627. $item_instance, // Widget Values 
  628. apply_filters( 'layers_slide_widget_slide_design_bar_components', array( // Components 
  629. 'background',  
  630. 'featuredimage',  
  631. 'imagealign' => array( 
  632. 'elements' => array( 
  633. 'imagealign' => array( 
  634. 'options' => array( 
  635. 'image-left' => __( 'Left', 'layerswp' ),  
  636. 'image-right' => __( 'Right', 'layerswp' ),  
  637. 'image-top' => __( 'Top', 'layerswp' ),  
  638. 'image-bottom' => __( 'Bottom', 'layerswp' ),  
  639. ),  
  640. ),  
  641. ),  
  642. ),  
  643. 'fonts',  
  644. 'buttons' => array( 
  645. 'icon-css' => 'icon-call-to-action',  
  646. 'label' => __( 'Buttons', 'layerswp' ),  
  647. 'elements' => array( 
  648. 'layers-pro-upsell' =>array( 
  649. 'type' => 'html',  
  650. 'html' => '<div class="layers-upsell-tag"> 
  651. <span class="layers-upsell-title">Upgrade to Layers Pro</span> 
  652. <div class="description customize-control-description"> 
  653. Want more control over your button styling and sizes? 
  654. <a target="_blank" href="https://www.layerswp.com/layers-pro/?ref=obox&utm_source=layers%20theme&utm_medium=link&utm_campaign=Layers%20Pro%20Upsell&utm_content=Widget%20Button%20Control">Purchase Layers Pro</a> 
  655. and gain more control over your button styling! 
  656. </div> 
  657. </div>' 
  658. ),  
  659. 'elements_combine' => 'replace',  
  660. ),  
  661. 'advanced' => array( 
  662. 'elements' => array( 
  663. 'customclass' 
  664. ),  
  665. 'elements_combine' => 'replace',  
  666. ),  
  667. ), $this, $item_instance ) 
  668. ); ?> 
  669. <div class="layers-row"> 
  670. <p class="layers-form-item"> 
  671. <label for="<?php echo $this->get_layers_field_id( 'title' ); ?>"><?php _e( 'Title' , 'layerswp' ); ?></label> 
  672. <?php echo $this->form_elements()->input( 
  673. array( 
  674. 'type' => 'text',  
  675. 'name' => $this->get_layers_field_name( 'title' ),  
  676. 'id' => $this->get_layers_field_id( 'title' ),  
  677. 'placeholder' => __( 'Enter a Title' , 'layerswp' ),  
  678. 'value' => ( isset( $item_instance['title'] ) ) ? $item_instance['title'] : NULL ,  
  679. 'class' => 'layers-text' 
  680. ); ?> 
  681. </p> 
  682. <p class="layers-form-item"> 
  683. <label for="<?php echo $this->get_layers_field_id( 'excerpt' ); ?>"><?php _e( 'Excerpt' , 'layerswp' ); ?></label> 
  684. <?php echo $this->form_elements()->input( 
  685. array( 
  686. 'type' => 'rte',  
  687. 'name' => $this->get_layers_field_name( 'excerpt' ),  
  688. 'id' => $this->get_layers_field_id( 'excerpt' ),  
  689. 'placeholder' => __( 'Short Excerpt' , 'layerswp' ),  
  690. 'value' => ( isset( $item_instance['excerpt'] ) ) ? $item_instance['excerpt'] : NULL ,  
  691. 'disallow_buttons' => array( 'insertOrderedList', 'insertUnorderedList' ),  
  692. 'class' => 'layers-textarea',  
  693. 'rows' => 6 
  694. ); ?> 
  695. </p> 
  696.  
  697. <?php 
  698. // Fix widget's that were created before dynamic linking structure. 
  699. $item_instance = $this->convert_legacy_widget_links( $item_instance, 'button' ); 
  700. ?> 
  701.  
  702. <div class="layers-form-item"> 
  703. <label> 
  704. <?php _e( 'Insert Link' , 'layerswp' ); ?> 
  705. </label> 
  706. <?php echo $this->form_elements()->input( 
  707. array( 
  708. 'type' => 'link-group',  
  709. 'name' => $this->get_layers_field_name( 'button' ),  
  710. 'id' => $this->get_layers_field_id( 'button' ),  
  711. 'value' => ( isset( $item_instance['button'] ) ) ? $item_instance['button'] : NULL,  
  712. ); ?> 
  713. </div> 
  714.  
  715. </div> 
  716. </section> 
  717. </li> 
  718. <?php 
  719.  
  720. } // Class 
  721.  
  722. // Add our function to the widgets_init hook. 
  723. register_widget("Layers_Slider_Widget"); 
.