API tools faq
paste
insightdes

wtc-h10base.php

insightdes
Apr 18th, 2018
441
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 21.41 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2. /**
  3.  * wollaston Coustom Widgts Section Two
  4.  *
  5.  * @package wtc
  6.  * @since 1.0
  7.  * @license GPL 2.0
  8.  */
  9.  
  10. /*--------------------------------------------------------------
  11. >>> TABLE OF CONTENTS: CUSTOM wollaston WIDGETS
  12. ----------------------------------------------------------------
  13. 1.0 - wollaston S2: Contruct
  14.     1.1 - wollaston S2: Widget Decloration
  15.     1.2 - wollaston S2: Widget Form
  16.         1.2.1 - Custom Background Image uploader
  17.         1.2.2 - Custom Menu Selction
  18.         1.2.3 - Introductory Text Area
  19. 2.0 Typography
  20. 3.0 Elements
  21. 4.0 Forms
  22. 5.0 Navigation
  23.     5.1 Links
  24.     5.2 Menus
  25. 6.0 Accessibility
  26. 7.0 Alignments
  27. 8.0 Clearings
  28. 9.0 Widgets
  29. 10.0 Content
  30.     10.1 Posts and pages
  31.     10.2 Asides
  32.     10.3 Comments
  33. 11.0 Infinite scroll
  34. 12.0 Media
  35.     12.1 Captions
  36.     12.2 Galleries
  37. --------------------------------------------------------------*/
  38.  
  39.  
  40.  
  41. /*--------------------------------------------------------------
  42. >>> 1.0 - wollaston S2: Contruct
  43. --------------------------------------------------------------*/
  44. class wollaston_split_six_Widget extends WP_Widget {
  45.  
  46.     public function __construct() {
  47.        
  48.         // widget actual processes
  49.         parent::__construct(
  50.             'sec-two-widget', // Base ID
  51.             __('Home: Split Six', 'wtc'), // Name
  52.             array(
  53.                 'description' => __( 'Click here to edit section two template', 'wtc' ),
  54.                 'panels_groups' => array('home')
  55.             ) // Args
  56.         );
  57.         add_action( 'sidebar_admin_setup', array( $this, 'admin_setup' ) );
  58.     }
  59.    
  60.     /// Declare Widget Form Styles and Functions
  61.     function admin_setup(){
  62.         wp_enqueue_media();
  63.         wp_register_script('wtc-admin-js', get_template_directory_uri() . '/widgets/src/wtc_uploader.js', array( 'jquery', 'media-upload', 'media-views' ) );
  64.         wp_enqueue_script('wtc-admin-js');
  65.         wp_enqueue_style('wtc-admin', get_template_directory_uri() . '/widgets/src/wtc_styles.css' );
  66.     }
  67.    
  68.     // >>> 1.2 - wollaston S2: widget Form
  69.     //-------------------------------------------------------------*/
  70.    
  71.     /**
  72.      * @param array $instance
  73.      * @return string|void
  74.      */
  75.    
  76.     public function form( $instance ) {
  77.        
  78.         $title          = esc_attr($instance['title']);
  79.         $link_1         = esc_attr($instance['link_1']);
  80.         $link_2         = esc_attr($instance['link_2']);
  81.         $subtitle       = esc_attr($instance['subtitle']);
  82.         $sec_colour     = esc_attr($instance['sec_colour']);
  83.         $read_more      = esc_attr($instance['read_more']);
  84.         $nav_menu1      = isset( $instance['nav_menu'] ) ? $instance['nav_menu'] : '';
  85.      
  86.         $textarea       = esc_textarea($instance['textarea']);
  87.         $bg_image_1     = ( isset( $instance['background_image_1'] ) ) ? $instance['background_image_1'] : '';
  88.         $bg_image_2     = ( isset( $instance['background_image_2'] ) ) ? $instance['background_image_2'] : '';
  89.        
  90.      
  91.         $menu_title     = isset( $instance['menu_title'] ) ? $instance['menu_title'] : '';
  92.         $nav_menu       = isset( $instance['nav_menu'] ) ? $instance['nav_menu'] : '';
  93.        
  94.         //Video Control
  95.         $video_phdr     = ( isset( $instance['video_phdr'] ) ) ? $instance['video_phdr'] : '';
  96.         $video_link     = esc_attr($instance['video_link']);
  97.        
  98.         // Get menus
  99.         $menus = get_terms( 'nav_menu', array( 'hide_empty' => false ) );
  100.        
  101.         $menu_opt       = isset( $instance['menu_opt'] ) ? $instance['menu_opt'] : '';
  102.  
  103.     ?>
  104.      <!-- Load icon set -->
  105.     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  106.  
  107.     <script>
  108.         // init script for tabs
  109.         jQuery(document).ready(function($){
  110.             var tabs = $('.cd-tabs');
  111.  
  112.             tabs.each(function(){
  113.                 var tab = $(this),
  114.                     tabItems = tab.find('ul.cd-tabs-navigation'),
  115.                     tabContentWrapper = tab.children('ul.cd-tabs-content'),
  116.                     tabNavigation = tab.find('nav');
  117.  
  118.             tabItems.on('click', 'a', function(event){
  119.                 event.preventDefault();
  120.                 var selectedItem = $(this);
  121.                     if( !selectedItem.hasClass('selected') ) {
  122.                         var selectedTab = selectedItem.data('content'),
  123.                             selectedContent = tabContentWrapper.find('li[data-content="'+selectedTab+'"]'),
  124.                             slectedContentHeight = selectedContent.innerHeight();
  125.  
  126.                         tabItems.find('a.selected').removeClass('selected');
  127.                         selectedItem.addClass('selected');
  128.                         selectedContent.addClass('selected').siblings('li').removeClass('selected');
  129.                         //animate tabContentWrapper height when content changes
  130.                         tabContentWrapper.animate({
  131.                             'height': slectedContentHeight
  132.                         }, 200);
  133.                     }
  134.                 });
  135.  
  136.  
  137.  
  138.                  //hide the .cd-tabs::after element when tabbed navigation has scrolled to the end (mobile version)
  139.                 checkScrolling(tabNavigation);
  140.                 tabNavigation.on('scroll', function(){
  141.                     checkScrolling($(this));
  142.                 });
  143.             });
  144.  
  145.             $(window).on('resize', function(){
  146.                 tabs.each(function(){
  147.                     var tab = $(this);
  148.                     checkScrolling(tab.find('nav'));
  149.                     tab.find('.cd-tabs-content').css('height', 'auto');
  150.                 });
  151.             });
  152.  
  153.             function checkScrolling(tabs){
  154.                 var totalTabWidth = parseInt(tabs.children('.cd-tabs-navigation').width()),
  155.                     tabsViewport = parseInt(tabs.width());
  156.                 if( tabs.scrollLeft() >= totalTabWidth - tabsViewport) {
  157.                     tabs.parent('.cd-tabs').addClass('is-ended');
  158.                 } else {
  159.                     tabs.parent('.cd-tabs').removeClass('is-ended');
  160.                 }
  161.             }
  162.         });
  163.            
  164.     </script>
  165.  
  166.     <div class="cd-tabs">
  167.         <nav>
  168.             <ul class="cd-tabs-navigation">
  169.                 <li><a data-content="layout" class="selected" href="#3"><i class="fa fa-columns fa-3x"></i><p>Layout</p></a></li>
  170.                 <li><a data-content="content" href="#3"><i class="fa fa-file-text-o fa-3x"></i><p>Content</p></a></li>
  171.                 <li><a data-content="video" href="#3"><i class="fa fa-file-video-o k fa-3x"></i></i><p>Video</p></a></li>
  172.             </ul> <!-- cd-tabs-navigation -->
  173.         </nav>
  174.         <!-- Content -->
  175.         <ul class="cd-tabs-content">
  176.  
  177.             <!-- 1.2.3 >>> Layout -->
  178.             <li data-content="layout" class="selected">
  179.                 <div class="main-widget-content">
  180.                     <h1>layout</h1>
  181.                     <hr>
  182.                     <p class="discp">This section allows you to edit middle content of the widget. Select which category you wish to edit and click "done" on the bottom right corner then "update" on the top right corner to save the updated information.</p></br></br>
  183.                
  184.                     <div class="widget-col-left">
  185.                        
  186.                         <!-- 1.2.1 >>> Custom Background Image uploader -->
  187.                         <div class="widget-input">    
  188.                             <h3>Upload or Edit your Image</h3>
  189.                             <p class="discp">Click below on the 'Select Image" button to add a background image for this section</p>
  190.                             <div id="background_image_preview_1" class="preview_placholder">
  191.                                 <?php
  192.                                     if ($bg_image_1!='') echo '<img src="' . $bg_image_1 . '" height="auto" width="100%" align="middle"/>';
  193.                                 ?>
  194.                             </div>
  195.                             <p class="discp">URL Link</p>
  196.                             <input class="background_image upld-crtl" id="<?php echo $this->get_field_id( 'background_image_1' ); ?>"
  197.                             name="<?php echo $this->get_field_name( 'background_image_1' ); ?>" value="<?php echo $bg_image_1 ?>" type="text" readonly>
  198.                             <button id="background_image_button" class="button btn-crtl" onclick="image_button_click('Choose Background Image','Select Image','image','background_image_preview_1','<?php echo $this->get_field_id( 'background_image_1' ); ?>');"><i class="fa fa-upload fa-2x"></i></button>
  199.  
  200.                         </div>
  201.                     </div>
  202.                     <div class="widget-col-right">
  203.                          <!-- 1.2.1 >>> Custom Background Image uploader -->
  204.                          <div class="widget-input">    
  205.                             <h3>Upload or Edit your Image</h3>
  206.                             <p class="discp">Click below on the 'Select Image" button to add a background image for this section</p>
  207.                             <div id="background_image_preview_2" class="preview_placholder">
  208.                                 <?php
  209.                                     if ($bg_image_2!='') echo '<img src="' . $bg_image_2 . '" height="auto" width="100%" align="middle"/>';
  210.                                 ?>
  211.                             </div>
  212.                             <p class="discp">URL Link</p>
  213.                             <input class="background_image upld-crtl" id="<?php echo $this->get_field_id( 'background_image_2' ); ?>"
  214.                             name="<?php echo $this->get_field_name( 'background_image_2' ); ?>" value="<?php echo $bg_image_2 ?>" type="text" readonly>
  215.                             <button id="background_image_button" class="button btn-crtl" onclick="image_button_click('Choose Background Image','Select Image','image','background_image_preview_2','<?php echo $this->get_field_id( 'background_image_2' ); ?>');"><i class="fa fa-upload fa-2x"></i></button>
  216.  
  217.                         </div>
  218.                     </div>
  219.                    
  220.  
  221.                    
  222.                 </div>
  223.             </li>
  224.             <li data-content="content" >
  225.                 <div class="main-widget-content">
  226.                     <h1>Content</h1>
  227.                     <hr>
  228.                     <p class="discp">This section allows you to edit middle content of the widget. Select which category you wish to edit and click "done" on the bottom right corner then "update" on the top right corner to save the updated information.</p></br></br>
  229.                                            
  230.                     <div class="widget-col-left">
  231.                         <!-- 1.2.3 >>> Title Text Area -->
  232.                         <div class="widget-input">
  233.                             <h3>Title</h3>
  234.                             <p class="discp">Type in the title text in the text area below to wish to display in this section</p>
  235.                             <input type="text" class="widefat" id="<?php echo $this->get_field_id('title1') ?>" name="<?php echo $this->get_field_name('title1') ?>" value="<?php echo esc_textarea($instance['title1']) ?>" type="text" />
  236.                         </div>
  237.                        
  238.                         <div class="widget-input">
  239.                             <h3>Sub Title</h3>
  240.                             <p class="discp">Type in the title text in the text area below to wish to display in this section</p>
  241.                             <input type="text" class="widefat" id="<?php echo $this->get_field_id('subtitle1') ?>" name="<?php echo $this->get_field_name('subtitle1') ?>" value="<?php echo esc_textarea($instance['subtitle1']) ?>" type="text" />
  242.                         </div>
  243.                        
  244.                         <!-- 1.2.3 >>> Link Attribute -->
  245.                         <div class="widget-input">
  246.                             <h3>Link</h3>
  247.                        
  248.                             <input type="text" class="widefat" id="<?php echo $this->get_field_id('link_1') ?>" name="<?php echo $this->get_field_name('link_1') ?>" value="<?php echo $link_1; ?>" type="text" />
  249.                         </div>
  250.                        
  251.                         <!-- 1.2.3 >>> Backgroun Colour -->
  252.                         <div class="widget-input">
  253.                             <h3>Section Colour</h3>
  254.                             <p class="discp">Type in the Hex colour code to colour this section. Hex colour codes can be found at <a target="_blank" href="https://www.w3schools.com/colors/colors_picker.asp">here.</a> </p>
  255.                             <input type="text" class="widefat" id="<?php echo $this->get_field_id('sec_colour1') ?>" name="<?php echo $this->get_field_name('sec_colour1') ?>" value="<?php echo esc_textarea($instance['sec_colour1']) ?>" type="text" />
  256.                         </div>
  257.                     </div>
  258.  
  259.  
  260.                     <div class="widget-col-right">
  261.                     <!-- 1.2.3 >>> Title Text Area -->
  262.                     <div class="widget-input">
  263.                             <h3>Title</h3>
  264.                             <p class="discp">Type in the title text in the text area below to wish to display in this section</p>
  265.                             <input type="text" class="widefat" id="<?php echo $this->get_field_id('title2') ?>" name="<?php echo $this->get_field_name('title2') ?>" value="<?php echo esc_textarea($instance['title2']) ?>" type="text" />
  266.                         </div>
  267.                        
  268.                         <div class="widget-input">
  269.                             <h3>Sub Title</h3>
  270.                             <p class="discp">Type in the title text in the text area below to wish to display in this section</p>
  271.                             <input type="text" class="widefat" id="<?php echo $this->get_field_id('subtitle2') ?>" name="<?php echo $this->get_field_name('subtitle2') ?>" value="<?php echo esc_textarea($instance['subtitle2']) ?>" type="text" />
  272.                         </div>
  273.                        
  274.                         <!-- 1.2.3 >>> Link Attribute -->
  275.                         <div class="widget-input">
  276.                             <h3>Link</h3>
  277.                        
  278.                             <input type="text" class="widefat" id="<?php echo $this->get_field_id('link_2') ?>" name="<?php echo $this->get_field_name('link_2') ?>" value="<?php echo $link_2; ?>" type="text" />
  279.                         </div>
  280.                        
  281.                         <!-- 1.2.3 >>> Backgroun Colour -->
  282.                         <div class="widget-input">
  283.                             <h3>Section Colour</h3>
  284.                             <p class="discp">Type in the Hex colour code to colour this section. Hex colour codes can be found at <a target="_blank" href="https://www.w3schools.com/colors/colors_picker.asp">here.</a> </p>
  285.                             <input type="text" class="widefat" id="<?php echo $this->get_field_id('sec_colour2') ?>" name="<?php echo $this->get_field_name('sec_colour2') ?>" value="<?php echo esc_textarea($instance['sec_colour2']) ?>" type="text" />
  286.                         </div>
  287.                     </div>
  288.  
  289.                    
  290.                 </div>
  291.             </li>
  292.             <li data-content="video" >
  293.                 <div class="main-widget-content">
  294.                     <h1>Video</h1>
  295.                     <hr>
  296.                     <p></p>
  297.                    
  298.                     <div class="widget-col-left">
  299.                         <div class="widget-input">    
  300.                             <h3>Upload or Edit your Image</h3>
  301.                             <p class="discp">Click below on the 'Select Image" button to add a background image for this section</p>
  302.                             <div id="video_image_preview" class="preview_placholder">
  303.                                 <?php
  304.                                     if ($video_phdr!='') echo '<img src="' . $video_phdr . '" height="auto" width="100%" align="middle"/>';
  305.                                 ?>
  306.                             </div>
  307.                             <p class="discp">URL Link</p>
  308.                             <input class="background_image upld-crtl" id="<?php echo $this->get_field_id( 'video_phdr' ); ?>"
  309.                             name="<?php echo $this->get_field_name( 'video_phdr' ); ?>" value="<?php echo $video_phdr ?>" type="text" readonly>
  310.                             <button id="background_image_button" class="button btn-crtl" onclick="image_button_click('Choose Background Image','Select Image','image','background_image_preview','<?php echo $this->get_field_id( 'video_phdr' ); ?>');"><i class="fa fa-upload fa-2x"></i></button>
  311.  
  312.                         </div>
  313.                     </div>
  314.                    
  315.                     <div class="widget-col-right">
  316.                         <!-- 1.2.3 >>> Video URL link -->
  317.                         <div class="widget-input">
  318.                             <h3>Video Link</h3>
  319.                             <input type="text" class="widefat" id="<?php echo $this->get_field_id('video_link') ?>" name="<?php echo $this->get_field_name('video_link') ?>" value="<?php echo $video_link; ?>" type="text" />
  320.                         </div>
  321.                     </div>
  322.                 </div>
  323.             </li>
  324.         </ul>
  325.     </div>
  326.     <?php
  327.    
  328.     }
  329.    
  330.     // Update Custom functions
  331.     function update($new_instance, $old_instance) {
  332.         $instance = $old_instance;
  333.        
  334.         // Update Fields
  335.         $instance['title']              = strip_tags($new_instance['title']);
  336.         $instance['link_1']             = strip_tags($new_instance['link_1']);
  337.         $instance['link_2']             = strip_tags($new_instance['link_2']);
  338.         $instance['subtitle']           = strip_tags($new_instance['subtitle']);
  339.         $instance['sec_colour']         = strip_tags($new_instance['sec_colour']);
  340.         $instance['thematic']           = strip_tags($new_instance['thematic']);
  341.         $instance['textarea']           = strip_tags($new_instance['textarea']);
  342.        
  343.         $instance['video_link']         = strip_tags($new_instance['video_link']);
  344.        
  345.         $instance['read_more']          = strip_tags($new_instance['read_more']);
  346.         $instance['sub_title']          = strip_tags($new_instance['sub_title']);
  347.  
  348.         $instance['background_image_1'] = strip_tags($new_instance['background_image_1']);
  349.         $instance['background_image_2'] = strip_tags($new_instance['background_image_2']);      
  350.        
  351.         return $instance;
  352.     }
  353.    
  354.     //>>> 1.1 - wollaston S2: widget decloration
  355.     //-------------------------------------------------------------*/
  356.     public function widget( $args, $instance ) {
  357.        
  358.         wp_enqueue_style('wtc-home-sec-ten-style', get_stylesheet_directory_uri(). '/widgets/components/wtc_home/wtc_h10/lib/css/wtc-h10.style.css' );
  359.        
  360.  
  361.        
  362.         $bg_image_1       = ! empty( $instance['background_image_1'] ) ? $instance['background_image_1'] : false;
  363.         $bg_image_2       = ! empty( $instance['background_image_2'] ) ? $instance['background_image_2'] : false;
  364.        
  365.         $title1          = $instance['title1'];
  366.         $title2          = $instance['title2'];
  367.         $link_1           = $instance['link_1'];
  368.         $link_2           = $instance['link_2'];
  369.         $subtitle1       = $instance['subtitle1'];
  370.         $subtitle2       = $instance['subtitle2'];
  371.         $sec_colour1     = $instance['sec_colour1'];
  372.         $sec_colour2     = $instance['sec_colour2'];
  373.        
  374.        
  375.         //Video Control
  376.         $video_phdr       = ! empty( $instance['video_phdr'] ) ? $instance['video_phdr'] : false;
  377.         $video_link       = $instance['video_link'];
  378.        
  379.        
  380.         echo $args['before_widget'];
  381.        
  382.         $upload_dir = wp_upload_dir();
  383.            
  384.     ?>
  385.        
  386.        
  387.         <section class="ad-waypoint" data-animate-down="site-primary-menu-med" data-animate-up="site-primary-menu-med">
  388.             <div class="sec-one-wrapper">
  389.                 <div class="fg-no-gutter">
  390.                    
  391.                     <div class="fg6 ">
  392.            
  393.                         <div class="sec-ten-one-left" style="background: url(<?php echo $bg_image_1 ?>) no-repeat center center; background-size:cover;">
  394.                         <a target="_blank" href="<?php echo $link_1; ?>">
  395.                             <div class="sec-ten-top-wrapper" style="background-color:<?php echo $sec_colour1; ?>">
  396.                                 <h3> <?php echo $title1; ?></h3>
  397.                                 <p> <?php echo $subtitle1; ?> </p>
  398.                             </div>
  399.                             </a>  
  400.                         </div>
  401.                     </div>
  402.                     <div class="fg6 ">
  403.            
  404.                         <div class="sec-ten-one-left" style="background: url(<?php echo $bg_image_2 ?>) no-repeat center center; background-size:cover;">
  405.                         <a target="_blank" href="<?php echo $link_2; ?>">
  406.                             <div class="sec-ten-top-wrapper" style="background-color:<?php echo $sec_colour2; ?>">
  407.                                 <h3> <?php echo $title2; ?></h3>
  408.                                 <p> <?php echo $subtitle2; ?> </p>
  409.                             </div>
  410.                             </a>  
  411.                         </div>
  412.                     </div>
  413.                
  414.                 </div>
  415.             </div>
  416.         </section>
  417.        
  418.         <?php
  419.         echo $args['after_widget'];
  420.     }
  421.    
  422. }
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!