firepot

Back Back Up Advanced Editor

<?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() {
	}
}