Your IP : 216.73.216.43

Current Path : /home/cbequiperp/www/plugins/flexicontent_fields/image/tmpl/
Upload File :
Current File : /home/cbequiperp/www/plugins/flexicontent_fields/image/tmpl/value_gallery_juxtapose.php

<?php  // *** DO NOT EDIT THIS FILE, CREATE A COPY !!

/**
 * (Popup) Gallery layout  --  Juxtapose
 *
 * This layout supports inline_info, pretext, posttext
 */


// ***
// *** Values loop
// ***

$i = -1;
$compositeKey='';

$compare_mode    = $field->parameters->get( $PPFX_ . 'compare_mode', 'horizontal' ); // Horizontal slide or vertical
$slider_position = $field->parameters->get( $PPFX_ . 'slider_position', '50' );      // Starting position of slider
$display_label   = $field->parameters->get( $PPFX_ . 'display_label', 'true' );      // Display label
$display_credit  = $field->parameters->get( $PPFX_ . 'display_credit', 'true' );     // Display credit
$use_animation   = $field->parameters->get( $PPFX_ . 'use_animation', 'true' );      // Disable animation
$make_responsive = $field->parameters->get( $PPFX_ . 'make_responsive', 'true' );    // Disable responsive image

foreach ($values as $n => $value)
{
	// Include common layout code for preparing values, but you may copy here to customize
	$result = include( JPATH_ROOT . '/plugins/flexicontent_fields/image/tmpl_common/prepare_value_display.php' );
	if ($result === _FC_CONTINUE_) continue;
	if ($result === _FC_BREAK_) break;

	$field->{$prop}[] = $pretext . $img_legend . $inline_info . $posttext;
}

//var_dump($field->{$prop});

// ***
// *** Add per field custom JS
// ***

if ( !isset(static::$js_added[$field->id][__FILE__]) )
{
	//flexicontent_html::loadFramework('juxtapose'); TODO ADDING script inline not in CDN

	$js = "
	(function($)
	{
		$(document).ready(function()
		{
			var juxtapose = $('.juxtapose_" . $field->id . "');

			juxtapose.each(function(index, element) {
				var juxtaposeContainer = juxtapose.parent();
				var juxtaposeRatio;
			
				$(window).on('load', function (event) {
					juxtaposeRatio = $(element).outerHeight() / $(element).outerWidth();
				});
			
				$(window).on('resize', function (event) {
					var newWidth = juxtaposeContainer.outerWidth();
					var newHeight = newWidth * juxtaposeRatio;
					$(element).css({width: newWidth, height: newHeight});
				});
			});
		});
	})(jQuery);
	";

	if ($js) JFactory::getDocument()->addScriptDeclaration($js);

	static::$js_added[$field->id][__FILE__] = array();
}

// ***
// *** Add - per (field, item) pair - custom JS
// ***

$uid = 'fc_'.$field_name_js."_fcitem".$item->id;

if (!isset(static::$js_added[$field->id][__FILE__][$item->id]))
{
	$js = "";

	if ($js) JFactory::getDocument()->addScriptDeclaration($js);
	static::$js_added[$field->id][__FILE__][$item->id] = true;
}

/**
 * Include common layout code before finalize values
 */

$result = include( JPATH_ROOT . '/plugins/flexicontent_fields/image/tmpl_common/before_values_finalize.php' );
if ($result !== _FC_RETURN_)
{
	// ***
	// *** Add container HTML (if required by current layout) and add value separator (if supported by current layout), then finally apply open/close tags
	// ***

	$i = 0;
	$html = array();
	while($i < count($field->{$prop}))
	{
		/**
		 * Check for special case of 9 or 11 images.
		 * Meanging that we have a single image (at the end of values array)
		 * and just add it by itself
		 */
		if ($i + 1 == count($field->{$prop}))
		{
			$html[] = $field->{$prop}[$i];
			break;
		}

		/**
		 * Create a pair of images, (e.g. a "before" and an "after") this layout create a "comparison" slider for every pair
		 */
		$html[] = '
			<div
				id="juxtapose-wrapper_' . $item->id . '_' . $field->id . '"
				class="juxtapose juxtapose_' . $field->id . '"
				data-startingposition="'.$slider_position.'%"
				data-showlabels="' . $display_label . '"
				data-showcredits="' . $display_credit . '"
				data-makeresponsive="' . $make_responsive . '"
				data-mode="' . $compare_mode . '"
				data-animate="' . $use_animation . '"
			>
					' . $field->{$prop}[$i] . '
					' . $field->{$prop}[$i+1] . '
			</div>
		';

		$i = $i + 2;
	}

	// Implode the image pairs ... that were created inside $html using configured value separator
	$field->{$prop} = implode($separatorf, $html);

	// Apply open/close tags
	$field->{$prop}  = $opentag . $field->{$prop} . $closetag;
}

if ( !isset(static::$js_added['juxtapose']) )
{
	static::$js_added['juxtapose'] = true;
	$field->{$prop} .= '
		<script src="https://cdn.knightlab.com/libs/juxtapose/latest/js/juxtapose.min.js"></script>
		<link rel="stylesheet" href="https://cdn.knightlab.com/libs/juxtapose/latest/css/juxtapose.css">
	';
}