<?php
namespace ColibriWP\Theme\Customizer\Controls;
abstract class VueControl extends ColibriControl {
protected $inline_content_template = false;
final protected function printVueMountPoint() {
?>
<div class="sidebar-container" data-name="vue-mount-point">
<?php $this->printVueContent(); ?>
</div>
<?php
}
public function json() {
$json = parent::json();
$json['inline_content_template'] = $this->getParam(
'inline_content_template',
false
);
return $json;
}
protected function content_template() {
?>
<# if(data.inline_content_template) { #>
<?php $this->printInlineContentTemplate(); ?>
<# } else { #>
<?php $this->printDefaultContentTemplate(); ?>
<# } #>
<div class="customize-control-notifications-container"></div>
<?php
}
protected function printInlineContentTemplate() {
?>
<div class="inline-elements-container">
<div class="inline-element">
<# if ( data.label ) { #>
<span class="customize-control-title">{{{ data.label }}}</span>
<# } #>
</div>
<div class="inline-element fit">
<?php $this->printVueMountPoint(); ?>
</div>
</div>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<?php
}
protected function printDefaultContentTemplate() {
?>
<# if ( data.label ) { #>
<span class="customize-control-title">{{{ data.label }}}</span>
<# } #>
<div>
<?php $this->printVueMountPoint(); ?>
</div>
<# if ( data.description ) { #>
<span class="description customize-control-description">{{{ data.description }}}</span>
<# } #>
<?php
}
abstract protected function printVueContent();
protected function vueEcho( $to_echo ) {
echo '${ ' . $to_echo . ' }';
}
protected function render() {
}
}