← All changes | includes/widgets/common.php +286 -0 3.1.4 → 3.2.0 View file →

		@@ -43,8 +43,58 @@
43	43	return false;
44	44	}
45	45
46	46	/**
	47	+ * @param $shape String Shape name.
	48	+ *
	49	+ * @return string The shape path in the assets folder.
	50	+ */
	51	+ private function get_shape_url( $shape ) {
	52	+ return ELEMENTOR_ASSETS_URL . 'mask-shapes/' . $shape . '.svg';
	53	+ }
	54	+
	55	+ /**
	56	+ * @param bool $add_custom Determine if the output should contain `Custom` options.
	57	+ *
	58	+ * @return array Array of shapes with their URL as key.
	59	+ */
	60	+ private function get_shapes( $add_custom = true ) {
	61	+ $shapes = [
	62	+ 'circle' => __( 'Circle', 'elementor' ),
	63	+ 'flower' => __( 'Flower', 'elementor' ),
	64	+ 'sketch' => __( 'Sketch', 'elementor' ),
	65	+ 'triangle' => __( 'Triangle', 'elementor' ),
	66	+ 'blob' => __( 'Blob', 'elementor' ),
	67	+ 'hexagon' => __( 'Hexagon', 'elementor' ),
	68	+ ];
	69	+
	70	+ if ( $add_custom ) {
	71	+ $shapes['custom'] = __( 'Custom', 'elementor' );
	72	+ }
	73	+
	74	+ return $shapes;
	75	+ }
	76	+
	77	+ /**
	78	+ * Get array of selectors and rules to deal with image masking and mask the image instead of the wrapper.
	79	+ *
	80	+ * @param $rules string The CSS rules to apply.
	81	+ *
	82	+ * @return array Selectors with the rules applied.
	83	+ */
	84	+ private function get_mask_selectors( $rules ) {
	85	+ $mask_selectors = [
	86	+ 'default' => '{{WRAPPER}}:not( .elementor-widget-image ) .elementor-widget-container',
	87	+ 'image' => '{{WRAPPER}}.elementor-widget-image .elementor-widget-container img',
	88	+ ];
	89	+
	90	+ return [
	91	+ $mask_selectors['default'] => $rules,
	92	+ $mask_selectors['image'] => $rules,
	93	+ ];
	94	+ }
	95	+
	96	+ /**
47	97	* Register common widget controls.
48	98	*
49	99	* Adds different input fields to allow the user to change and customize the widget settings.
50	100	*
		@@ -360,8 +410,244 @@
360	410
361	411	$this->end_controls_tab();
362	412
363	413	$this->end_controls_tabs();
	414	+
	415	+ $this->end_controls_section();
	416	+
	417	+ $this->start_controls_section(
	418	+ '_section_masking',
	419	+ [
	420	+ 'label' => __( 'Mask', 'elementor' ),
	421	+ 'tab' => Controls_Manager::TAB_ADVANCED,
	422	+ ]
	423	+ );
	424	+
	425	+ $this->add_control(
	426	+ '_mask_switch',
	427	+ [
	428	+ 'label' => __( 'Mask', 'elementor' ),
	429	+ 'type' => Controls_Manager::SWITCHER,
	430	+ 'label_on' => __( 'On', 'elementor' ),
	431	+ 'label_off' => __( 'Off', 'elementor' ),
	432	+ 'default' => '',
	433	+ ]
	434	+ );
	435	+
	436	+ $this->add_control( '_mask_shape', [
	437	+ 'label' => __( 'Shape', 'elementor' ),
	438	+ 'type' => Controls_Manager::SELECT,
	439	+ 'options' => $this->get_shapes(),
	440	+ 'default' => 'circle',
	441	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( ' . ELEMENTOR_ASSETS_URL . '/mask-shapes/{{VALUE}}.svg );' ),
	442	+ 'condition' => [
	443	+ '_mask_switch!' => '',
	444	+ ],
	445	+ ] );
	446	+
	447	+ $this->add_control(
	448	+ '_mask_image',
	449	+ [
	450	+ 'label' => __( 'Image', 'elementor' ),
	451	+ 'type' => Controls_Manager::MEDIA,
	452	+ 'media_type' => 'image',
	453	+ 'should_include_svg_inline_option' => true,
	454	+ 'library_type' => 'image/svg+xml',
	455	+ 'dynamic' => [
	456	+ 'active' => true,
	457	+ ],
	458	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( {{URL}} );' ),
	459	+ 'condition' => [
	460	+ '_mask_switch!' => '',
	461	+ '_mask_shape' => 'custom',
	462	+ ],
	463	+ ]
	464	+ );
	465	+
	466	+ $this->add_control(
	467	+ '_mask_notice',
	468	+ [
	469	+ 'type' => Controls_Manager::HIDDEN,
	470	+ 'raw' => __( 'Need More Shapes?', 'elementor' ) . '<br>' . sprintf( __( 'Explore additional Premium Shape packs and use them in your site. <a target="_blank" href="%s">Learn More</a>', 'elementor' ), 'https://go.elementor.com/mask-control' ),
	471	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
	472	+ 'condition' => [
	473	+ '_mask_switch!' => '',
	474	+ ],
	475	+ ]
	476	+ );
	477	+
	478	+ $this->add_responsive_control(
	479	+ '_mask_size',
	480	+ [
	481	+ 'label' => __( 'Size', 'elementor' ),
	482	+ 'type' => Controls_Manager::SELECT,
	483	+ 'options' => [
	484	+ 'contain' => __( 'Fit', 'elementor' ),
	485	+ 'cover' => __( 'Fill', 'elementor' ),
	486	+ 'custom' => __( 'Custom', 'elementor' ),
	487	+ ],
	488	+ 'default' => 'contain',
	489	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{VALUE}};' ),
	490	+ 'condition' => [
	491	+ '_mask_switch!' => '',
	492	+ ],
	493	+ ]
	494	+ );
	495	+
	496	+ $this->add_responsive_control(
	497	+ '_mask_size_scale',
	498	+ [
	499	+ 'label' => __( 'Scale', 'elementor' ),
	500	+ 'type' => Controls_Manager::SLIDER,
	501	+ 'size_units' => [ 'px', 'em', '%', 'vw' ],
	502	+ 'range' => [
	503	+ 'px' => [
	504	+ 'min' => 0,
	505	+ 'max' => 500,
	506	+ ],
	507	+ 'em' => [
	508	+ 'min' => 0,
	509	+ 'max' => 100,
	510	+ ],
	511	+ '%' => [
	512	+ 'min' => 0,
	513	+ 'max' => 200,
	514	+ ],
	515	+ 'vw' => [
	516	+ 'min' => 0,
	517	+ 'max' => 100,
	518	+ ],
	519	+ ],
	520	+ 'default' => [
	521	+ 'unit' => '%',
	522	+ 'size' => 100,
	523	+ ],
	524	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{SIZE}}{{UNIT}};' ),
	525	+ 'condition' => [
	526	+ '_mask_switch!' => '',
	527	+ '_mask_size' => 'custom',
	528	+ ],
	529	+ ]
	530	+ );
	531	+
	532	+ $this->add_responsive_control(
	533	+ '_mask_position',
	534	+ [
	535	+ 'label' => __( 'Position', 'elementor' ),
	536	+ 'type' => Controls_Manager::SELECT,
	537	+ 'options' => [
	538	+ 'center center' => __( 'Center Center', 'elementor' ),
	539	+ 'center left' => __( 'Center Left', 'elementor' ),
	540	+ 'center right' => __( 'Center Right', 'elementor' ),
	541	+ 'top center' => __( 'Top Center', 'elementor' ),
	542	+ 'top left' => __( 'Top Left', 'elementor' ),
	543	+ 'top right' => __( 'Top Right', 'elementor' ),
	544	+ 'bottom center' => __( 'Bottom Center', 'elementor' ),
	545	+ 'bottom left' => __( 'Bottom Left', 'elementor' ),
	546	+ 'bottom right' => __( 'Bottom Right', 'elementor' ),
	547	+ 'custom' => __( 'Custom', 'elementor' ),
	548	+ ],
	549	+ 'default' => 'center center',
	550	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-position: {{VALUE}};' ),
	551	+ 'condition' => [
	552	+ '_mask_switch!' => '',
	553	+ ],
	554	+ ]
	555	+ );
	556	+
	557	+ $this->add_responsive_control(
	558	+ '_mask_position_x',
	559	+ [
	560	+ 'label' => __( 'X Position', 'elementor' ),
	561	+ 'type' => Controls_Manager::SLIDER,
	562	+ 'size_units' => [ 'px', 'em', '%', 'vw' ],
	563	+ 'range' => [
	564	+ 'px' => [
	565	+ 'min' => -500,
	566	+ 'max' => 500,
	567	+ ],
	568	+ 'em' => [
	569	+ 'min' => -100,
	570	+ 'max' => 100,
	571	+ ],
	572	+ '%' => [
	573	+ 'min' => -100,
	574	+ 'max' => 100,
	575	+ ],
	576	+ 'vw' => [
	577	+ 'min' => -100,
	578	+ 'max' => 100,
	579	+ ],
	580	+ ],
	581	+ 'default' => [
	582	+ 'unit' => '%',
	583	+ 'size' => 0,
	584	+ ],
	585	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-position-x: {{SIZE}}{{UNIT}};' ),
	586	+ 'condition' => [
	587	+ '_mask_switch!' => '',
	588	+ '_mask_position' => 'custom',
	589	+ ],
	590	+ ]
	591	+ );
	592	+
	593	+ $this->add_responsive_control(
	594	+ '_mask_position_y',
	595	+ [
	596	+ 'label' => __( 'Y Position', 'elementor' ),
	597	+ 'type' => Controls_Manager::SLIDER,
	598	+ 'size_units' => [ 'px', 'em', '%', 'vw' ],
	599	+ 'range' => [
	600	+ 'px' => [
	601	+ 'min' => -500,
	602	+ 'max' => 500,
	603	+ ],
	604	+ 'em' => [
	605	+ 'min' => -100,
	606	+ 'max' => 100,
	607	+ ],
	608	+ '%' => [
	609	+ 'min' => -100,
	610	+ 'max' => 100,
	611	+ ],
	612	+ 'vw' => [
	613	+ 'min' => -100,
	614	+ 'max' => 100,
	615	+ ],
	616	+ ],
	617	+ 'default' => [
	618	+ 'unit' => '%',
	619	+ 'size' => 0,
	620	+ ],
	621	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-position-y: {{SIZE}}{{UNIT}};' ),
	622	+ 'condition' => [
	623	+ '_mask_switch!' => '',
	624	+ '_mask_position' => 'custom',
	625	+ ],
	626	+ ]
	627	+ );
	628	+
	629	+ $this->add_responsive_control(
	630	+ '_mask_repeat',
	631	+ [
	632	+ 'label' => __( 'Repeat', 'elementor' ),
	633	+ 'type' => Controls_Manager::SELECT,
	634	+ 'options' => [
	635	+ 'no-repeat' => __( 'No-Repeat', 'elementor' ),
	636	+ 'repeat' => __( 'Repeat', 'elementor' ),
	637	+ 'repeat-x' => __( 'Repeat-X', 'elementor' ),
	638	+ 'repeat-Y' => __( 'Repeat-Y', 'elementor' ),
	639	+ 'round' => __( 'Round', 'elementor' ),
	640	+ 'space' => __( 'Space', 'elementor' ),
	641	+ ],
	642	+ 'default' => 'no-repeat',
	643	+ 'selectors' => $this->get_mask_selectors( '-webkit-mask-repeat: {{VALUE}};' ),
	644	+ 'condition' => [
	645	+ '_mask_switch!' => '',
	646	+ '_mask_size!' => 'cover',
	647	+ ],
	648	+ ]
	649	+ );
364	650
365	651	$this->end_controls_section();
366	652
367	653	$this->start_controls_section(