--- /dev/null
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+
+
+class HeaderSlideshow extends Widget_Base {
+
+ protected $_has_template_content = false; // Tell Elementor that content is all rendered dynamically
+
+ // Widget name / ID
+ public function get_name() {
+ return 'cube-header-slideshow';
+ }
+
+ // Elementor widget title
+ public function get_title() {
+ return __( 'Header Slideshow', 'cube' );
+ }
+
+ // Elementor interface icon
+ public function get_icon() {
+ return 'eicon-slideshow';
+ }
+
+ // Where to display the widget in the Elementor interface
+ public function get_categories() {
+ return [ 'theme-elements' ];
+ }
+
+ /**
+ * List of scripts the widget depends on.
+ * Used to set scripts dependencies required to run the widget.
+ *
+ * @since 1.0.0
+ * @access public
+ * @return array Widget scripts dependencies.
+ */
+ public function get_script_depends() {
+ return [];
+ }
+ /**
+ * Register the widget controls.
+ * Adds different input fields to allow the user to change and customize the widget settings.
+ *
+ * @since 1.0.0
+ * @access protected
+ */
+ protected function _register_controls() {
+
+ $this->start_controls_section(
+ 'section_content',
+ [
+ 'label' => __( 'Header Slideshow', 'cube' ),
+ ]
+ );
+
+ $this->add_control(
+ 'images',
+ [
+ 'label' => __( 'Add Images', 'elementor' ),
+ 'type' => Controls_Manager::GALLERY,
+ 'default' => [],
+ 'show_label' => false,
+ 'dynamic' => [
+ 'active' => true,
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'title',
+ [
+ 'label' => __( 'Title', 'elementor' ),
+ 'type' => Controls_Manager::TEXTAREA,
+ 'placeholder' => __( 'Enter your title', 'elementor' ),
+ 'default' => '',
+ ]
+ );
+
+ $this->add_control(
+ 'subtitle',
+ [
+ 'label' => __( 'Subtitle', 'cube' ),
+ 'type' => Controls_Manager::TEXTAREA,
+ 'placeholder' => __( 'Enter your subtitle', 'cube' ),
+ 'default' => '',
+ ]
+ );
+
+
+ $this->end_controls_section();
+ }
+ /**
+ * Render the widget output on the frontend.
+ * Written in PHP and used to generate the final HTML.
+ *
+ * @since 1.0.0
+ * @access protected
+ */
+ protected function render() {
+
+ $id = 'header_slideshow_' . $this->get_id();
+ $title = $this->get_settings('title');
+ $subtitle = $this->get_settings('subtitle');
+ $images = $this->get_settings('images');
+
+ // When this element is present, add a class to the body so the header can be styled differently (transparent background)
+ add_filter('body_class', function($classes) {
+ $classes[] = 'header-slideshow-present';
+ return $classes;
+ });
+
+
+ ?>
+
+ <div class="header-slideshow elementor" id="<?= $id ?>">
+
+ <?php
+ /*
+ Here we're hijacking Elementor's built in entrance animations for the title text.
+ The class "elementor-element" must be present for it to be attached to the waypoints.
+ The other classes are also necessary for making the animation work...
+ After recent updates, the parent must also have the class "elementor" for animations to work.
+ */
+ ?>
+ <div class="header-slideshow-content">
+
+ <div class="header-slideshow-content-inner elementor-element elementor-invisible" data-settings='{"animation":"fadeInUp","animation_delay":0}' data-element_type="section">
+ <h1 class="header-slideshow-title"><?= $title ?></h1>
+ <h2 class="header-slideshow-subtitle"><?= $subtitle ?></h2>
+ </div>
+
+ <!-- Todo: handle images and simple carousel. See Elementor image-carousel.php -->
+
+ </div>
+
+
+ <div class="header-slideshow-background-container">
+ <div class="header-slideshow-background"></div>
+ </div>
+
+ </div>
+
+ <?php
+ }
+}
module.exports = {
theme: {
+ screens: {
+ // We're using the desktop-first approach to media queries so everything is max-width based
+ // The most important breakpoint is when the columns stack. This is defined in setup.styl
+ // and for now it needs to be manually matched here. The idea is that we can set styles using
+ // the sm: prefix in Tailwind. Maybe there's a better name for this breakpoint but for now it's 'sm'.
+ // Sizes should be listed largest to smallest so they are generated in this order, allowing smaller
+ // breakpoints to take precedence over larger ones (eg. xs:p-1 should override sm:p-2)
+ //'md': {'max': '1023px'}, // => @media (max-width: 1023px) { ... }
+ 'sm': {'max': '767px'}, // => @media (max-width: 767px) { ... }
+ 'xs': {'max': '499px'}, // => @media (max-width: 499px) { ... }
+ },
extend: {
colors: {
+ 'inherit': 'inherit',
'dark': '#1A0707', // Text colour
'light': '#F6F5F5', // Light grey backgrounds
'purple-dark': '#2E2C40', // Footer and other dark sections
projects / ccv-wordpress.git / commitdiff