332 lines
8.1 KiB
PHP
332 lines
8.1 KiB
PHP
<?php
|
|
/**
|
|
* Elementor AR Model Configurator Widget.
|
|
*
|
|
* Elementor widget that inserts an embbedable content into the page, from any given URL.
|
|
*
|
|
* @since 1.0.0
|
|
*/
|
|
class AR_ModelViewer_Widget extends \Elementor\Widget_Base
|
|
{
|
|
|
|
/**
|
|
* Get widget name.
|
|
*
|
|
* Retrieve AR Model Viewer widget name.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*
|
|
* @return string Widget name.
|
|
*/
|
|
public function get_name()
|
|
{
|
|
return 'ar-model-viewer';
|
|
}
|
|
|
|
/**
|
|
* Get widget title.
|
|
*
|
|
* Retrieve AR Model Viewer widget title.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*
|
|
* @return string Widget title.
|
|
*/
|
|
public function get_title()
|
|
{
|
|
return __('AR Model Configurator', 'ar-model-viewer');
|
|
}
|
|
|
|
/**
|
|
* Get widget icon.
|
|
*
|
|
* Retrieve AR Model Viewer widget icon.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*
|
|
* @return string Widget icon.
|
|
*/
|
|
public function get_icon()
|
|
{
|
|
return 'eicon-photo-library';
|
|
}
|
|
|
|
/**
|
|
* Get widget categories.
|
|
*
|
|
* Retrieve the list of categories the AR Model Viewer widget belongs to.
|
|
*
|
|
* @since 1.0.0
|
|
* @access public
|
|
*
|
|
* @return array Widget categories.
|
|
*/
|
|
// public function get_categories() {
|
|
// return [ 'AR' ];
|
|
// }
|
|
|
|
/**
|
|
* Register AR Model Viewer 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(
|
|
'content_section',
|
|
[
|
|
'label' => __('Content', 'ar-model-viewer'),
|
|
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
|
|
]
|
|
);
|
|
$this->add_control(
|
|
'file_link',
|
|
[
|
|
'label' => esc_html__('Select GLB File', 'elementor-file-select-control'),
|
|
'type' => 'file-select',
|
|
'placeholder' => esc_html__('URL to File', 'elementor-file-select-control'),
|
|
'description' => esc_html__('Select file from media library or upload. Support GLB/GLTF format', 'elementor-file-select-control'),
|
|
]
|
|
);
|
|
$this->add_control(
|
|
'ios_src',
|
|
[
|
|
'label' => esc_html__('Select USDZ File for iOS', 'elementor-file-select-control'),
|
|
'type' => 'file-select',
|
|
'placeholder' => esc_html__('URL to File', 'elementor-file-select-control'),
|
|
'description' => esc_html__('Select file from media library or upload. Select USDZ model which will be used on supported iOS 12+ devices via AR Quick Look on Safari.', 'elementor-file-select-control'),
|
|
'condition' => [
|
|
'file_link[url]!' => '',
|
|
],
|
|
],
|
|
);
|
|
$this->add_control(
|
|
'poster',
|
|
[
|
|
'label' => esc_html__('Select Poster', 'elementor-file-select-control'),
|
|
'type' => \Elementor\Controls_Manager::MEDIA,
|
|
'description' => "Image to display while model loads",
|
|
'default' => [
|
|
'url' => \Elementor\Utils::get_placeholder_image_src(),
|
|
],
|
|
'condition' => [
|
|
'file_link[url]!' => '',
|
|
],
|
|
]
|
|
);
|
|
$this->add_control(
|
|
'skybox_image',
|
|
[
|
|
'label' => esc_html__('Select background', 'elementor-file-select-control'),
|
|
'type' => \Elementor\Controls_Manager::MEDIA,
|
|
'description' => "Add background image. Recommended file type .hdr.",
|
|
'condition' => [
|
|
'file_link[url]!' => '',
|
|
],
|
|
]
|
|
);
|
|
$this->add_control(
|
|
'modelZoom',
|
|
[
|
|
'label' => esc_html__('Disable Zoom', 'elementor-disable-zoom-control'),
|
|
'type' => \Elementor\Controls_Manager::SWITCHER,
|
|
'description' => "Disable zooming of 3D models",
|
|
'default' => [
|
|
'url' => \Elementor\Utils::get_placeholder_image_src(),
|
|
],
|
|
'condition' => [
|
|
'file_link[url]!' => '',
|
|
],
|
|
'return_value' => 'yes',
|
|
'default' => 'no',
|
|
]
|
|
);
|
|
$this->add_control(
|
|
'autoRotate',
|
|
[
|
|
'label' => esc_html__('Auto rotate', 'elementor-auto-rotate-model-control'),
|
|
'type' => \Elementor\Controls_Manager::SWITCHER,
|
|
'description' => "Auto rotate 3D model",
|
|
'default' => [
|
|
'url' => \Elementor\Utils::get_placeholder_image_src(),
|
|
],
|
|
'condition' => [
|
|
'file_link[url]!' => '',
|
|
],
|
|
'return_value' => 'yes',
|
|
'default' => 'no',
|
|
]
|
|
);
|
|
$this->add_control(
|
|
'placement',
|
|
[
|
|
'label' => esc_html__('AR placement', 'elementor-model-placement-control'),
|
|
'type' => \Elementor\Controls_Manager::SELECT,
|
|
'description' => "Default placement is Floor",
|
|
'default' => '',
|
|
'options' => [
|
|
'' => esc_html__( 'Default', 'textdomain' ),
|
|
'floor' => esc_html__( 'Floor', 'textdomain' ),
|
|
'wall' => esc_html__( 'Wall', 'textdomain' ),
|
|
],
|
|
'condition' => [
|
|
'file_link[url]!' => '',
|
|
],
|
|
]
|
|
);
|
|
$this->add_control(
|
|
'arScaling',
|
|
[
|
|
'label' => esc_html__('Lock AR Scaling', 'elementor-ar-scaling-control'),
|
|
'type' => \Elementor\Controls_Manager::SWITCHER,
|
|
'description' => "Lock scaling of models in AR",
|
|
'default' => [
|
|
'url' => \Elementor\Utils::get_placeholder_image_src(),
|
|
],
|
|
'condition' => [
|
|
'file_link[url]!' => '',
|
|
],
|
|
'return_value' => 'yes',
|
|
'default' => 'no',
|
|
]
|
|
);
|
|
$this->add_responsive_control(
|
|
'width',
|
|
[
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'label' => esc_html__('Width', 'ar-model-viewer'),
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 300,
|
|
'max' => 800,
|
|
],
|
|
],
|
|
'devices' => ['desktop', 'tablet', 'mobile'],
|
|
'desktop_default' => [
|
|
'size' => 350,
|
|
'unit' => 'px',
|
|
],
|
|
'tablet_default' => [
|
|
'size' => 350,
|
|
'unit' => 'px',
|
|
],
|
|
'mobile_default' => [
|
|
'size' => 350,
|
|
'unit' => 'px',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .model-viewer' => 'width: {{SIZE}}{{UNIT}};',
|
|
],
|
|
'condition' => [
|
|
'file_link[url]!' => '',
|
|
],
|
|
]
|
|
);
|
|
|
|
$this->add_responsive_control(
|
|
'height',
|
|
[
|
|
'type' => \Elementor\Controls_Manager::SLIDER,
|
|
'label' => esc_html__('Height', 'ar-model-viewer'),
|
|
'range' => [
|
|
'px' => [
|
|
'min' => 300,
|
|
'max' => 800,
|
|
],
|
|
],
|
|
'devices' => ['desktop', 'tablet', 'mobile'],
|
|
'desktop_default' => [
|
|
'size' => 350,
|
|
'unit' => 'px',
|
|
],
|
|
'tablet_default' => [
|
|
'size' => 350,
|
|
'unit' => 'px',
|
|
],
|
|
'mobile_default' => [
|
|
'size' => 350,
|
|
'unit' => 'px',
|
|
],
|
|
'selectors' => [
|
|
'{{WRAPPER}} .model-viewer' => 'height: {{SIZE}}{{UNIT}};',
|
|
],
|
|
'condition' => [
|
|
'file_link[url]!' => '',
|
|
],
|
|
]
|
|
);
|
|
$this->add_responsive_control(
|
|
'content_align',
|
|
[
|
|
'label' => __('Alignment', 'ar-model-viewer'),
|
|
'type' => \Elementor\Controls_Manager::CHOOSE,
|
|
'options' => [
|
|
'left' => [
|
|
'title' => __('Left', 'ar-model-viewer'),
|
|
'icon' => 'eicon-text-align-left',
|
|
],
|
|
'center' => [
|
|
'title' => __('Center', 'ar-model-viewer'),
|
|
'icon' => 'eicon-text-align-center',
|
|
],
|
|
'right' => [
|
|
'title' => __('Right', 'ar-model-viewer'),
|
|
'icon' => 'eicon-text-align-right',
|
|
],
|
|
],
|
|
'devices' => ['desktop', 'tablet'],
|
|
]
|
|
);
|
|
$this->end_controls_section();
|
|
}
|
|
|
|
/**
|
|
* Render AR Model Viewer widget output on the frontend.
|
|
*
|
|
* Written in PHP and used to generate the final HTML.
|
|
*
|
|
* @since 1.0.0
|
|
* @access protected
|
|
*/
|
|
protected function render()
|
|
{
|
|
|
|
$settings = $this->get_settings_for_display();
|
|
$src = esc_attr($settings['file_link']);
|
|
$ios_src = esc_attr($settings['ios_src']);
|
|
$ar_placement = esc_attr($settings['placement']);
|
|
$model_zoom = esc_attr($settings['modelZoom']) === 'yes';
|
|
$auto_rotate = esc_attr($settings['autoRotate']) === 'yes';
|
|
$ar_scaling = esc_attr($settings['arScaling']) === 'yes' ? 'fixed': 'auto';
|
|
$alignment = esc_attr($settings['content_align']);
|
|
$margin ='0 auto 0 0';
|
|
if ($alignment == 'right') {
|
|
$margin ='0 0 0 auto';
|
|
}
|
|
if ($alignment == 'center') {
|
|
$margin ='0 auto';
|
|
}
|
|
$ar = AR_Model_Viewer::instance()->renderer;
|
|
$poster = esc_attr($settings['poster']['url']);
|
|
$skybox_image = esc_attr($settings['skybox_image']['url']);
|
|
$ar->set_attributes(
|
|
array('src' => $src, 'ios-src' => $ios_src, 'poster' => $poster, 'disable-zoom' => $model_zoom, 'auto-rotate' => $auto_rotate, 'skybox-image' => $skybox_image, 'ar-placement' => $ar_placement, 'ar-scale' => $ar_scaling)
|
|
);
|
|
$ar->set_styles(
|
|
array('margin' => $margin)
|
|
);
|
|
?>
|
|
|
|
<div class="ar-elementor-widget">
|
|
<?php echo $ar->render_ar(); ?>
|
|
</div>
|
|
|
|
<?php }
|
|
}
|