// Register Carbon Fields
add_action('after_setup_theme', function () {
- Carbon_Fields::boot();
+ if (isset($_GET['action']) && $_GET['action'] !== 'elementor') {
+ Carbon_Fields::boot();
+ }
});
}
$elementor->widgets_manager->register_widget_type( new Widgets\TextBlock() );
$elementor->widgets_manager->register_widget_type( new Widgets\IntroCarousel() );
+ $elementor->widgets_manager->register_widget_type( new Widgets\Circle() );
+ $elementor->widgets_manager->register_widget_type( new Widgets\ImageMap() );
+ $elementor->widgets_manager->register_widget_type( new Widgets\TeamGrid() );
}
--- /dev/null
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Controls_Manager;
+
+
+class Circle extends _Base {
+
+ // Widget name / ID
+ public function get_name() {
+ return 'cube-circle';
+ }
+
+ // Elementor widget title
+ public function get_title() {
+ return __( 'Cercle Coloré', 'cube' );
+ }
+
+ // Elementor interface icon
+ public function get_icon() {
+ return 'eicon-circle';
+ }
+
+ /**
+ * 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' => __( 'Cercle Coloré', 'cube' ),
+ ]
+ );
+
+ $this->add_control(
+ 'fill_color',
+ [
+ 'label' => __( 'Couleur', 'cube' ),
+ 'type' => Controls_Manager::COLOR,
+ 'default' => '#ffcf3b',
+ 'selectors' => [
+ '{{WRAPPER}} svg' => 'fill: {{VALUE}};',
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'width',
+ [
+ 'label' => __( 'Largeur', 'cube' ),
+ 'type' => Controls_Manager::TEXT,
+ 'default' => '100%',
+ 'selectors' => [
+ '{{WRAPPER}} .cube-circle-wrapper' => 'width: {{VALUE}};',
+ ],
+ ]
+ );
+
+
+
+ $this->end_controls_section();
+
+ $this->common_controls();
+ }
+ /**
+ * 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() {
+
+ $svg = '<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">';
+ $svg .= '<circle cx="50" cy="50" r="50"/>';
+ $svg .= '</svg>';
+
+ echo '<div class="cube-circle-wrapper">'. $svg .'</div>';
+ }
+}
--- /dev/null
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Controls_Manager;
+use Elementor\Utils;
+
+
+class ImageMap extends _Base {
+
+ // Which versions should be handled?
+ protected $versions = [
+ 'desktop',
+ //'mobile', // TODO: mobile version!
+ ];
+
+ // Widget name / ID
+ public function get_name() {
+ return 'cube-image-map';
+ }
+
+ // Elementor widget title
+ public function get_title() {
+ return __( 'Image à zones cliquables', 'cube' );
+ }
+
+ // Elementor interface icon
+ public function get_icon() {
+ return 'eicon-click';
+ }
+
+ /**
+ * 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' => __( 'Image à zones cliquables', 'cube' ),
+ ]
+ );
+
+ $this->add_control(
+ 'reminder',
+ [
+ 'type' => Controls_Manager::RAW_HTML,
+ 'raw' => 'Pour générer le HTML, <a href="https://www.zaneray.com/responsive-image-map/" target="_blank">utilisez cet outil</a>',
+ // TODO: consider modifying Weebly Image Map generator so it generates code like Zaneray. Or just use Weebly version with jQuery plugin?
+ ]
+ );
+
+ foreach($this->versions as $version) {
+
+ $this->add_control(
+ "image_$version",
+ [
+ 'label' => "Image ($version)",
+ 'type' => Controls_Manager::MEDIA,
+ 'default' => [
+ 'url' => Utils::get_placeholder_image_src(),
+ ],
+ ]
+ );
+
+ $this->add_control(
+ "html_$version",
+ [
+ 'label' => "HTML ($version)",
+ 'type' => Controls_Manager::CODE,
+ 'default' => '',
+ ]
+ );
+
+ }
+
+ $this->end_controls_section();
+
+ $this->common_controls();
+ }
+ /**
+ * 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() {
+
+ $res = '';
+
+ foreach($this->versions as $version) {
+ $image = $this->get_settings("image_{$version}");
+ $image_meta = wp_get_attachment_metadata($image['id']);
+ $max_width = isset($image_meta['width']) ? $image_meta['width'] . 'px' : 'none'; // Container must not be wider than image
+ $html = $this->get_settings("html_{$version}");
+
+ $res .= '<div class="relative mx-auto cube-image-map-'. $version .'" style="max-width: '. $max_width .'">';
+ $res .= '<img src="'. $image['url'] .'" class="cube-image-map-image">';
+ $res .= $html;
+ $res .= '</div>';
+ }
+
+ echo '<div class="cube-image-map">'. $res .'</div>';
+ }
+}
--- /dev/null
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Controls_Manager;
+use Elementor\Repeater;
+use Elementor\Utils;
+
+use function Roots\view;
+
+
+class TeamGrid extends _Base {
+
+ // Widget name / ID
+ public function get_name() {
+ return 'cube-team-grid';
+ }
+
+ // Elementor widget title
+ public function get_title() {
+ return __("Grille d'équipe", 'cube');
+ }
+
+ // Elementor interface icon
+ public function get_icon() {
+ return 'eicon-posts-grid';
+ }
+
+ /**
+ * 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' => __("Grille d'équipe", 'cube'),
+ ]
+ );
+
+ $repeater = new Repeater();
+
+
+ $repeater->add_control(
+ 'first_name',
+ [
+ 'label' => __('Prénom', 'cube'),
+ 'title_block' => false,
+ 'type' => Controls_Manager::TEXT,
+ 'default' => ''
+ ]
+ );
+
+ $repeater->add_control(
+ 'last_name',
+ [
+ 'label' => __('Nom', 'cube'),
+ 'title_block' => false,
+ 'type' => Controls_Manager::TEXT,
+ 'default' => ''
+ ]
+ );
+
+ $repeater->add_control(
+ 'role',
+ [
+ 'label' => __('Rôle', 'cube'),
+ 'title_block' => false,
+ 'type' => Controls_Manager::TEXT,
+ 'default' => ''
+ ]
+ );
+
+ $repeater->add_control(
+ 'details',
+ [
+ 'label' => __('Détails', 'cube'),
+ 'title_block' => false,
+ 'type' => Controls_Manager::TEXTAREA,
+ 'default' => ''
+ ]
+ );
+
+ $repeater->add_control(
+ 'photo',
+ [
+ 'label' => __('Portait', 'cube'),
+ 'type' => Controls_Manager::MEDIA,
+ 'default' => [
+ 'url' => Utils::get_placeholder_image_src(),
+ ],
+ ]
+ );
+
+ $repeater->add_control(
+ 'photo_hover',
+ [
+ 'label' => __('Portrait au survol de la souris', 'cube'),
+ 'type' => Controls_Manager::MEDIA,
+ 'default' => [
+ 'url' => Utils::get_placeholder_image_src(),
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'team',
+ [
+ 'label' => __('Équipe', 'cube'),
+ 'type' => Controls_Manager::REPEATER,
+ 'prevent_empty' => false,
+ 'fields' => $repeater->get_controls(),
+ 'title_field' => '{{{ first_name }}} {{{ last_name }}}',
+ ]
+ );
+
+
+ $this->end_controls_section();
+
+ $this->common_controls();
+ }
+ /**
+ * 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() {
+
+ $team = $this->get_settings('team');
+
+ echo view('widgets/team-grid', compact('team'));
+ }
+}
wp_enqueue_style('sage/app.css', asset('styles/app.css')->uri(), false, null);
}, 100);
+/**
+ * Add admin specific styles
+ */
+function add_admin_styles() {
+ if (is_admin()) {
+ wp_enqueue_style('cube/admin.css', asset('styles/admin.css')->uri(), false, null);
+ }
+}
+add_action('admin_enqueue_scripts', __NAMESPACE__ . '\add_admin_styles');
+add_action('elementor/common/after_register_scripts', __NAMESPACE__ . '\add_admin_styles');
+
+
/**
* Remove Gutenberg styles from frontend since we don't use them
*/
--- /dev/null
+// Admin specific styles
+
+// Position Cubedesigners custom widgets above all others in the Elementor sidebar
+#elementor-panel-categories
+ display: flex
+ flex-direction: column
+
+#elementor-panel-category-cube
+ order: -1
+
+#elementor-panel-category-pro-elements
+ order: 99 // Put these at the bottom (or could hide them completely?)
// Extracted components or custom styles that can't be done with utilities
@import 'common/global'
-@import 'common/admin'
@import 'common/layout'
@import 'components/*'
@import 'widgets/*'
+++ /dev/null
-.elementor-editor-active
-
- // Make background layer outlines visible when in Elementor editor mode
- .layered-backgrounds
- > *
- outline: 2px dashed rgba(76, 175, 80, 0.5)
bottom: 0 !important
margin: 0 !important
transform: none !important
+
+// Make background layer outlines visible when in Elementor editor mode
+.elementor-editor-active .layered-backgrounds
+ > *
+ outline: 2px dashed rgba(76, 175, 80, 0.5)
--- /dev/null
+{{-- TEAM GRID --}}
+<div class="team-grid">
+
+ <div class="team-grid-items">
+ @foreach ($team as $person)
+ <div class="team-grid-person">
+ <div class="team-grid-photos relative rounded-lg" style="max-width: 385px">
+ <div style="width: 100%; padding-bottom: 100%;">{{-- Proportional sizer to make a responsive square --}}</div>
+
+ @php($photo_classes = 'absolute top-0 left-0 w-full h-full')
+
+ {{-- Main photo --}}
+ <div class="z-20 group-hover:opacity-0 {{ $photo_classes }}" style="background-image:url({{ $person['photo']['url'] }})"></div>
+ {{-- Hover photo --}}
+ <div class="z-10 {{ $photo_classes }}" style="background-image:url({{ $person['photo_hover']['url'] }})"></div>
+ </div>
+ <div class="text-center">
+ <strong class="text-lg">{{ $person['first_name'] }} {{ strtoupper($person['last_name']) }}</strong>
+ <br>
+ <em>{{ $person['role'] }}</em>
+ <br>
+ {{ $person['details'] }}
+ </div>
+ </div>
+ @endforeach
+ </div>
+
+</div>
.tailwind();
mix.stylus('resources/assets/styles/editor.styl', 'styles');
+mix.stylus('resources/assets/styles/admin.styl', 'styles');
// Javascript
mix
projects / usines-reunies.git / commitdiff