$elementor->widgets_manager->register_widget_type( new Widgets\ScientificNews() );
$elementor->widgets_manager->register_widget_type( new Widgets\DynamicTable() );
$elementor->widgets_manager->register_widget_type( new Widgets\FancyList() );
+ $elementor->widgets_manager->register_widget_type( new Widgets\JustifiedList() );
}
protected function _customise_sections() {
'type' => Controls_Manager::SELECT,
'options' => [
'' => __( 'Défaut', 'cube' ),
+ 'bg-white' => __( 'Blanc', 'cube' ),
'bg-light' => __( 'Gris clair', 'cube' ),
],
],
[
- 'name' => 'text_align',
- 'label' => __( 'Alignement du texte', 'cube' ),
+ 'name' => 'font_style',
+ 'label' => __( 'Style de police', 'cube' ),
'type' => Controls_Manager::SELECT,
'options' => [
'' => __( 'Défaut', 'cube' ),
- 'text-left' => __( 'Gauche', 'cube' ),
- 'text-center' => __( 'Centré', 'cube' ),
- 'text-right' => __( 'Droit', 'cube' ),
+ 'font-bold' => __( 'Gras', 'cube' ),
],
],
[
- 'name' => 'font_style',
- 'label' => __( 'Style de police', 'cube' ),
+ 'name' => 'text_align',
+ 'label' => __( 'Alignement du texte', 'cube' ),
'type' => Controls_Manager::SELECT,
'options' => [
'' => __( 'Défaut', 'cube' ),
- 'font-bold' => __( 'Gras', 'cube' ),
+ 'text-left' => __( 'Gauche', 'cube' ),
+ 'text-center' => __( 'Centré', 'cube' ),
+ 'text-right' => __( 'Droit', 'cube' ),
],
],
],
use Elementor\Widget_Base;
use Elementor\Controls_Manager;
+use Elementor\Core\Schemes;
use function Roots\view;
'section_content',
[
'label' => __( 'Liste formatée', 'cube' ),
+ 'tab' => Controls_Manager::TAB_CONTENT
]
);
);
$this->end_controls_section();
+
+ $this->start_controls_section(
+ 'section_style',
+ [
+ 'label' => __( 'Liste formatée', 'cube' ),
+ 'tab' => Controls_Manager::TAB_STYLE,
+ ]
+ );
+
+ $this->add_control(
+ 'bg_color',
+ [
+ 'label' => __( 'Couleur de fond', 'cube' ),
+ 'type' => Controls_Manager::COLOR,
+ 'default' => '',
+ 'selectors' => [
+ '{{WRAPPER}}' => 'background-color: {{VALUE}};',
+ ],
+ 'scheme' => [
+ 'type' => Schemes\Color::get_type(),
+ 'value' => Schemes\Color::COLOR_3,
+ ],
+ ]
+ );
+
+ $this->add_control(
+ 'text_color',
+ [
+ 'label' => __( 'Couleur de texte', 'cube' ),
+ 'type' => Controls_Manager::COLOR,
+ 'default' => '',
+ 'selectors' => [
+ '{{WRAPPER}}' => 'color: {{VALUE}};',
+ ],
+ 'scheme' => [
+ 'type' => Schemes\Color::get_type(),
+ 'value' => Schemes\Color::COLOR_3,
+ ],
+ ]
+ );
+
+ $this->end_controls_section();
+
+
}
/**
* Render the widget output on the frontend.
--- /dev/null
+<?php
+
+namespace Cube\Elementor\Widgets;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+
+use function Roots\view;
+
+
+class JustifiedList extends Widget_Base {
+
+ // Widget name / ID
+ public function get_name() {
+ return 'cube-justified-list';
+ }
+
+ // Elementor widget title
+ public function get_title() {
+ return __( 'Données Justifiées', 'cube' );
+ }
+
+ // Elementor interface icon
+ public function get_icon() {
+ return 'eicon-columns';
+ }
+
+ // 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' => __( 'Données Justifiées', 'cube' ),
+ ]
+ );
+
+ $this->add_control(
+ 'items',
+ [
+ 'label' => __( 'Éléments', 'cube' ),
+ 'type' => Controls_Manager::REPEATER,
+ 'fields' => [
+ [
+ 'name' => 'title',
+ 'label' => __( 'Titre', 'cube' ),
+ 'type' => Controls_Manager::WYSIWYG,
+ 'default' => '',
+ 'label_block' => true,
+ ],
+ [
+ 'name' => 'value',
+ 'label' => __( 'Valeur', 'cube' ),
+ 'type' => Controls_Manager::WYSIWYG,
+ 'default' => '',
+ 'label_block' => true,
+ ],
+ [
+ 'name' => 'bg_color',
+ 'label' => __( 'Couleur de fond', 'cube' ),
+ 'type' => Controls_Manager::SELECT,
+ 'options' => [
+ '' => __( 'Défaut', 'cube' ),
+ 'bg-white' => __( 'Blanc', 'cube' ),
+ 'bg-light' => __( 'Gris clair', 'cube' ),
+ ],
+ ],
+ ],
+ 'title_field' => '{{{ title }}}',
+ ]
+ );
+
+
+ $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() {
+
+ $items = $this->get_settings('items');
+
+ echo view('widgets/justified-list', compact('items'));
+ }
+
+}
// Add format classes to
add_filter( 'tiny_mce_before_init', function($init_array) {
+
+ // Text size styles
$sizes = [
- 'xs',
- 'sm',
- 'lg',
- 'xl',
+ 'xs' => 'Extra Small',
+ 'sm' => 'Small',
+ 'base' => 'Normal',
+ 'lg' => 'Large',
+ 'xl' => 'Extra Large',
];
- // Text size styles
- foreach ($sizes as $size) {
- $style_formats[] = [
- 'title' => 'Text '. strtoupper($size),
+ $size_formats = [];
+
+ foreach ($sizes as $size => $size_label) {
+ $size_formats[] = [
+ 'title' => $size_label,
'inline' => 'span',
'selector' => 'h1, h2, h3, h4, h5, p, div',
'classes' => 'text-'. $size,
];
}
+ // Add submenu for font sizes
+ $style_formats[] = [
+ 'title' => 'Font Size',
+ 'items' => $size_formats,
+ ];
+
+ // Font weights
+ $weights = [
+ 'light',
+ 'normal',
+ 'medium',
+ 'bold',
+ ];
+
+ $weight_formats = [];
+
+ foreach ($weights as $weight) {
+ $weight_formats[] = [
+ 'title' => ucfirst($weight),
+ 'inline' => 'span',
+ 'selector' => 'h1, h2, h3, h4, h5, p, div, li',
+ 'classes' => 'font-'. $weight,
+ 'wrapper' => false,
+ ];
+ }
+
+ // Add submenu for font weights
+ $style_formats[] = [
+ 'title' => 'Font Weight',
+ 'items' => $weight_formats,
+ ];
+
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
-<svg xmlns="http://www.w3.org/2000/svg" width="39.071" height="24.097" viewBox="0 0 39.071 24.097">
- <g transform="translate(2.828 2.828)">
- <path d="M556,228.366l14.146,14.146,19.268-19.268" transform="translate(-556 -223.244)" fill="none" stroke="#ff078b" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"/>
- </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="39" height="25"><path d="M3.028 8.028l14 13.9 19-19" fill="none" stroke="#ff078b" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
min-width: 320px
background-color: #FBFBFB
-p:not(:last-child)
- margin-bottom: 1.5em
+* + p
+ margin-top: 1.5em
.wrapper
@apply mx-auto
max-width: $content-max-width
-
-// VueJS styling to hide elements until they're ready
-[v-cloak]
- visibility: hidden
.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated
padding: 0
+.elementor-section-boxed > .elementor-column-gap-extended
+ horizontal-spacing(-1.5vw, margin) // Negative margins to pull back horizontal padding added to child columns below
+ > .elementor-row > .elementor-column > .elementor-element-populated
+ horizontal-spacing(1.5vw)
+ padding-top: 0
+ padding-bottom: 0
+
.elementor-section-boxed > .elementor-column-gap-wide
horizontal-spacing(-2.5vw, margin) // Negative margins to pull back horizontal padding added to child columns below
> .elementor-row > .elementor-column > .elementor-element-populated
horizontal-spacing(2.5vw)
padding-top: 0
padding-bottom: 0
- //+below(450px)
- // padding-left: 0
- // padding-right: 0
+
+// Once columns have wrapped, remove padding for all
++below($breakpoint-columns)
+ .elementor-container > .elementor-row > .elementor-column > .elementor-element-populated
+ padding: 0 !important
background: theme('colors.pink')
+below(1150px)
- width: 0.9em
- left: -1.3em
+ width: 0.8em
+ left: -1.15em
height: 4px
+below($breakpoint-columns)
--- /dev/null
+.fancy-list
+
+ &-wrapper
+ @apply px-6 py-8
+
+ &-title:not(.plain)
+ .fancy-list-wrapper & // Adds some specificity so these rules override others from the headings
+ @apply uppercase text-2xl text-center
+ padding-bottom: 0.75em
+ margin-bottom: @padding-bottom
+ margin-left: 0
+
+ &:before
+ top: auto
+ bottom: 0
+ left: 50%
+ transform: translateX(-50%)
+
+ // Top level list
+ &-items
+ > * + *
+ margin-top: 1.5em
+
+ // Top level individual list item
+ &-item
+ @apply relative pl-6
+
+ &:before
+ content: ''
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='25'%3E%3Cpath d='M3.028 8.028l14 13.9 19-19' fill='none' stroke='%23ff078b' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
+ background-size: contain
+ background-repeat: no-repeat
+ position: absolute
+ width: 1.5rem
+ height: 0.91rem
+ left: -0.6em
+ top: 0.4em
+
+ &-content
+ p:not(:last-child) // Mostly for the p + ul elements
+ margin-bottom: 0.5em
+
+ p.text-lg // Tighten up larger text
+ line-height: 1.25
+
+ ul
+ @apply pl-4
+
+ li
+ position: relative
+
+ &:before
+ content: ''
+ position: absolute
+ top: 0.45em
+ left: -0.8em
+ width: 7px
+ height: 13px
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath stroke='%23ff078b' stroke-width='2' stroke-linecap='round' d='M1 1l6 6M1 13l6-6'/%3E%3C/svg%3E")
+ background-repeat: no-repeat
+ background-size: contain
--- /dev/null
+.justified-list
+
+ &-wrapper
+ @apply -mx-4 // Offsets the padding on items
+
+ .compact-prices &
+ @apply flex flex-wrap
+
+ > *
+ flex-basis: 50%
+
+ // Out of every 4 children, the first two get a grey background
+ // This is needed for the zebra stripes and the two column view
+ &:nth-child(4n-2), &:nth-child(4n-3)
+ @apply bg-light
+
+ // Create extra space between the two columns
+ &:nth-child(odd)
+ constrain(padding-right, 3vw)
+ &:nth-child(even)
+ constrain(padding-left, 3vw)
+
+ // On small screens, columns stack and zebra stripes are changed to odd/even
+ +below('medium')
+ flex-basis: 100%
+
+ &:nth-child(odd)
+ @apply bg-light pr-4
+ &:nth-child(even)
+ @apply bg-transparent pl-4
+
+
+
+ &-item
+ @apply flex items-center justify-between
+ @apply py-6 px-4
+
+ // Tighten up vertical spacing
+ .compact-prices &
+ @apply py-1
+
+
+ &-title
+
+ // > Arrow before titles
+ .compact-prices &
+ position: relative
+ padding-left: 1em // Space for arrow
+
+ &:before
+ content: ''
+ position: absolute
+ top: 0.4em
+ left: 0
+ width: 7px
+ height: 13px
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath stroke='%23ff078b' stroke-width='2' stroke-linecap='round' d='M1 1l6 6M1 13l6-6'/%3E%3C/svg%3E")
+ background-repeat: no-repeat
+ background-size: contain
+
+ &-value
+ flex: 0 0 15% // Normally the value should fit within 15% width but it's ok if it doesn't
+ constrain(margin-left, 2.5vw) // Make sure title doesn't touch the value
+ white-space: nowrap
+ text-align: right
<div class="fancy-list-wrapper">
- <h3 class="fancy-list-title">{{ $title }}</h3>
+ <h3 class="h2 fancy-list-title">{{ $title }}</h3>
<ul class="fancy-list-items">
@foreach ($items as $item)
<li class="fancy-list-item">
--- /dev/null
+<div class="justified-list-wrapper">
+ @foreach ($items as $item)
+ <div class="justified-list-item {{ $item['bg_color'] }}">
+
+ @if ($item['title'])
+ <div class="justified-list-item-title">{!! $item['title'] !!}</div>
+ @endif
+
+ @if ($item['value'])
+ <div class="justified-list-item-value">{!! $item['value'] !!}</div>
+ @endif
+
+ </div>
+ @endforeach
+</div>
],
corePlugins: {
container: false,
- float: false,
objectFit: false,
objectPosition: false,
},
*/
whitelist: [
...whitelist,
+ 'antialiased',
'font-body',
'font-light',
'text-dark',
'text-3xl',
'italic',
'mt-2',
+ 'mb-6',
+ 'mr-6',
+ 'float-left',
+ 'xs:block',
+ 'xs:float-none',
+ 'xs:mx-auto',
+ 'sm:text-base',
+ 'sm:mx-2v',
],
whitelistPatterns: [
...whitelistPatterns,
projects / ccv-wordpress.git / commitdiff
