<?php
/**
 * @name		Page Builder CK
 * @package		com_pagebuilderck
 * @copyright	Copyright (C) 2022. All rights reserved.
 * @license		GNU General Public License version 2 or later; see LICENSE.txt
 * @author		Cedric Keiflin - https://www.template-creator.com - https://www.joomlack.fr
 */

defined('_JEXEC') or die;

?>
<div class="menustylescustom" data-prefix="timelineicon" data-rule=".itemtitleck .pbckicon"></div>
<div class="menustylescustom" data-prefix="line" data-rule=".pbck_timelines:after"></div>
<div class="menustylescustom" data-prefix="dot" data-rule=".pbck_timeline_dot"></div>
<div id="elementscontainer">
	<div class="menulink" tab="tab_blocstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_EDITION'); ?></div>
	<div class="tab menustyles ckproperty tab_fullscreen" id="tab_blocstyles">
		<div id="items_edition_list">
		</div>
		<div onclick="ckAddNewListItem()" class="item_add ckbutton ckbutton-primary"><?php echo \Joomla\CMS\Language\Text::_('CK_ADD_ITEM'); ?></div>
		<div class="clr"></div>
	</div>
	<div class="menulink" tab="tab_iconstyles"><?php echo \Joomla\CMS\Language\Text::_('CK_ICON'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_iconstyles">
		<?php echo $this->menustyles->createIconLight('timelineicon') ?>
		<?php echo $this->menustyles->createIconSvgLight('icon') ?>
		<?php echo $this->menustyles->createBackground('icon') ?>
		<?php echo $this->menustyles->createDimensions('icon', true, true) ?>
		<?php echo $this->menustyles->createDecoration('icon') ?>
		<?php echo $this->menustyles->createShadow('icon') ?>
		<?php echo $this->menustyles->createCustom('icon') ?>
	</div>
	<div class="menulink" tab="tab_itemtimelinestyles"><?php echo \Joomla\CMS\Language\Text::_('CK_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_itemtimelinestyles">
		<div class="ckoption">
			<div>
				<span class="ckoption-label">
					<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="16" height="16" />
					<?php echo \Joomla\CMS\Language\Text::_('CK_RESPONSIVE_RESOLUTION'); ?>
				</span>
				<span class="ckoption-field">
					<input id="responsiveresolution" name="responsiveresolution" class="inputbox" value="" type="text" placeholder="640" />
				</span>
				<div class="ckclr"></div>
			</div>
			<div class="ckclr"></div>
		</div>
		<div class="ckoption">
			<div>
				<span class="ckoption-label">
					<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>color.png" width="16" height="16" />
					<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TIMELINE_DOT_COLOR'); ?>
				</span>
				<span class="ckoption-field">
					<input id="dotbackgroundcolorstart" name="dotbackgroundcolorstart" class="inputbox colorPicker" value="" type="text" />
				</span>
				<div class="ckclr"></div>
			</div>
			<div class="ckclr"></div>
		</div>
		<div class="ckoption">
			<div>
				<span class="ckoption-label">
					<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>color.png" width="16" height="16" />
					<?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TIMELINE_LINE_COLOR'); ?>
				</span>
				<span class="ckoption-field">
					<input id="linebackgroundcolorstart" name="linebackgroundcolorstart" class="inputbox colorPicker" value="" type="text" />
				</span>
				<div class="ckclr"></div>
			</div>
			<div class="ckclr"></div>
		</div>
				
		<div class="menustylescustom" data-prefix="item" data-rule=".pbck_timeline_wrap > .inner"><?php echo $this->menustyles->createBlocStyles('item', 'item', $expert = false, $showlinks = true, $joomlaversion = '', $showtext = false, $showdimensions = true, $showdecoration = true, $showshadow = true) ?></div>
	</div>
	<div class="menulink" tab="tab_titletimelinestyles"><?php echo \Joomla\CMS\Language\Text::_('CK_TITLE_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_titletimelinestyles">
		<div class="menustylescustom" data-prefix="title" data-rule=".pbck_timeline_wrap h3"><?php echo $this->menustyles->createBlocStyles('title') ?></div>
	</div>
	<div class="menulink" tab="tab_contenttimelinestyles"><?php echo \Joomla\CMS\Language\Text::_('CK_CONTENT'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_contenttimelinestyles">
		<div class="menustylescustom" data-prefix="content" data-rule=".itemcontentck"><?php echo $this->menustyles->createBlocStyles('content') ?></div>
	</div>
	<div class="menulink" tab="tab_arrowstyles"><?php echo \Joomla\CMS\Language\Text::_('PLG_PAGEBUILDERCK_TIMELINE_ARROW_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_arrowstyles">
		<div class="menustylescustom" data-prefix="arrow" data-rule=".pbck_timeline_wrap > .inner:before">
			<div class="menupaneblock">
				<div class="ckoption">
					<div>
						<span class="ckoption-label">
							<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>color.png" width="16" height="16" />
							<?php echo \Joomla\CMS\Language\Text::_('CK_COLOR'); ?>
						</span>
						<span class="ckoption-field">
							<input id="arrowbackgroundcolorstart" name="arrowbackgroundcolorstart" class="inputbox colorPicker" value="" type="text" />
						</span>
						<div class="ckclr"></div>
					</div>
					<div class="ckclr"></div>
				</div>
				<div class="ckoption">
					<div>
						<span class="ckoption-label">
							<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>margintop.png" width="16" height="16" />
							<?php echo \Joomla\CMS\Language\Text::_('CK_TOP'); ?>
						</span>
						<span class="ckoption-field">
							<input id="arrowmargintop" name="arrowmargintop" class="inputbox" value="" type="text" />
						</span>
						<div class="ckclr"></div>
					</div>
					<div class="ckclr"></div>
				</div>
				<div class="ckoption">
					<div>
						<span class="ckoption-label">
							<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>marginleft.png" width="16" height="16" />
							<?php echo \Joomla\CMS\Language\Text::_('CK_LEFT'); ?>
						</span>
						<span class="ckoption-field">
							<input id="arrowmarginleft" name="arrowmarginleft" class="inputbox" value="" type="text" />
						</span>
						<div class="ckclr"></div>
					</div>
					<div class="ckclr"></div>
				</div>
				<div class="ckoption">
					<div>
						<span class="ckoption-label">
							<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>marginright.png" width="16" height="16" />
							<?php echo \Joomla\CMS\Language\Text::_('CK_RIGHT'); ?>
						</span>
						<span class="ckoption-field">
							<input id="arrowmarginright" name="arrowmarginright" class="inputbox" value="" type="text" />
						</span>
						<div class="ckclr"></div>
					</div>
					<div class="ckclr"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="clr"></div>
</div>
<div class="clr"></div>
<script language="javascript" type="text/javascript">
var focus = $ck('.editfocus');
function ckLoadEditionPopup() {
	// var noactivetabscss = focus.find('.pbck_timelines').attr('activetab') === 'false' ? ' btn-warning active' : '';
	// $ck('#items_edition_list').append('<div><div class="item_setdefault btn-small btn'+noactivetabscss+'" onclick="ckSetDefaultEditItem($ck(this).parent())"><span class="icon icon-star"></span><?php echo \Joomla\CMS\Language\Text::_('CK_SET_DEFAULT_CLOSED', true) ?></div></div>');

	$ck('.pbck_timelines .itemtitleck', focus).each(function(i, el) {
		var itemedition = ckCreateEditItem(i, $ck('#items_edition_list'), $ck(el).text(), ckContentToEditor($ck('.pbck_timelines .itemcontentck', focus).eq(i).html()), true, '', false);
		ckMakeEditItemTimeline(itemedition);
		ckLoadEditorOnTheFly('item_content_' + i);
		ckGetItemIcon(i, '.itemtitleck', itemedition);
	});
	// $ck('.item_setdefault').eq((parseInt(focus.find('.pbck_timelines').attr('activetab'))+1)).addClass('btn-warning').addClass('active');
	ckMakeEditItemsSortable();
	ckFillEditionPopup(focus.attr('id'));
}

function ckMakeEditItemTimeline(el) {
	$ck(el).accordionck({
		header: ".item_toggler",
		collapsible: true,
		active: false,
		heightStyle: "content"
	});
}

function ckAddNewListItem() {
	var focus = $ck('.editfocus');
	// add the element in the timeline
	$ck('.pbck_timelines', focus).append(ckGetNewTimelineItem('Lorem Ipsum ...', '<p>Lorem Ipsum ...</p>'));
//	$ck('.pbck_timelines', focus).accordionck( "refresh" );
	// add the element for edition
	var index = $ck('.pbck_timelines > .pbck_timeline', focus).length;
	var itemedition = ckCreateEditItem(index, $ck('#items_edition_list'), 'Lorem Ipsum ...', '<p>Lorem Ipsum ...</p>', true);
	ckMakeEditItemTimeline(itemedition);
	ckLoadEditorOnTheFly('item_content_' + index);
}

/* override the JS function for custom use */
function ckSelectIcon(icon) {
	return ckSelectIconFromEdition(icon);
}

function ckGetNewTimelineItem(title, content) {
	var html = '<div class="pbck_timeline">'
					+'<div class="pbck_timeline_wrap">'
						+'<div class="pbck_timeline_dot"></div>'
						+'<div class="inner">'
							+'<h3><span class="itemtitleck">'+title+'</span></h3>'
							+'<div class="itemcontentck">'
								+content
							+'</div>'
						+'</div>'
					+'</div>'
				+'</div>';

	return html;
}

function ckBeforeSaveEditionPopup() {
	var focus = $ck('.editfocus');

	$ck('.item_content_edition').each(function() {
		var textID = $ck(this).attr('id');
		ckSaveEditorOnTheFly(textID);
//		ckRemoveEditorOnTheFly(textID);
	});
	var focus = $ck('.editfocus');
	$ck('#items_edition_list .item_edition:not(.ui-sortable-helper)').each(function(i, el) {
		$ck('.itemtitleck', focus).eq(i).text($ck(el).find('.item_title_edition').val());
		$ck('.itemcontentck', focus).eq(i).html(ckEditorToContent($ck(el).find('.item_content_edition').val()));
		var icon = ckGetIconFromEdition(i, $ck(el), focus, '.itemtitleck');
		if (icon) $ck('.itemtitleck', focus).eq(i).prepend('<span class="iconck">' + icon + '</span>');
	});
	
	var vPos = $ck('#iconicon-position button.active').attr('data-position');
	$ck('.editfocus .itemtitleck .pbckicon').css('vertical-align', vPos);

	// B/C compatibility
	if (! focus.find('.pbck_timeline_wrap > .inner').length) {
		focus.find('.pbck_timeline_wrap').each(function() {
			var $this = $ck(this);
			$this.html('<div class="inner">' + $this.html() + '</div>');
			var dot = $this.find('.pbck_timeline_dot');
			$this.prepend(dot);
		});
	}
}

function ckSaveInlineEditionPopup() {
	ckBeforeSaveEditionPopup();
}

// function ckSetDefaultEditItem(item) {
	// $ck('.item_setdefault').removeClass('btn-warning').removeClass('active');
	// item.find('.item_setdefault').addClass('btn-warning').addClass('active');
// }

function ckBeforeCloseEditionPopup() {
	$ck('.item_content_edition').each(function() {
		ckRemoveEditorOnTheFly($ck(this).attr('id'));
	});
}

function ckBeforeDeleteEditItem(item) {
//	var focus = $ck('.editfocus');
//	var index_item = item.index('.item_edition');
	ckRemoveEditorOnTheFly(item.find('.item_content_edition').attr('id'));
	
	var index_item = item.index('.item_edition');
	ckRemoveEditorOnTheFly(item.find('.item_content_edition').attr('id'));
	$ck('.editfocus .pbck_timeline').eq(index_item).remove();
}

function ckUpdatePreviewArea() {

}

function ckMakeEditItemsSortable() {
	$ck( "#items_edition_list" ).sortable({
		items: ".item_edition",
		helper: "clone",
		// axis: "y",
		handle: "> .item_move",
		forcePlaceholderSize: true,
		tolerance: "pointer",
		placeholder: "placeholderck",
		// zIndex: 9999,
		start: function(e, ui){
			$ck(this).find('.item_content_edition').each(function(){
				if (tinymce.get($ck(this).attr('id'))) {
					ckRemoveEditorOnTheFly($ck(this).attr('id'));
				}
			});
		},
		update: function(e, ui) {
			$ck(this).find('.item_content_edition:not(.ui-sortable-helper)').each(function(){
				ckLoadEditorOnTheFly($ck(this).attr('id'));
			});
			ckUpdatePreviewArea();
			// $ck( "#<?php echo $id; ?>_preview_timeline" ).timelineck("refresh");
		}
	});
}

ckInitIconPosition('.editfocus .itemtitleck .pbckicon', '#iconicon-position button');
</script>