<?php
/**
 * @name		Page Builder CK
 * @package		com_pagebuilderck
 * @copyright	Copyright (C) 2015. 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 id="elementscontainer">
	<div class="menulink" tab="tab_items"><?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_LIST_EDITION'); ?></div>
	<div class="tab menustyles ckproperty tab_fullscreen" id="tab_items">
			<div id="items_edition_list">
			</div>
			<div onclick="ckAddNewListItem()" class="item_add ckbutton ckbutton-primary"><?php echo Pagebuilderck\CKText::_('CK_ADD_NEW_ITEM'); ?></div>
			<div class="clr"></div>
	</div>
	<div class="menulink" tab="tab_iconstyles"><?php echo Pagebuilderck\CKText::_('CK_ICON'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_iconstyles">
		<?php echo $this->menustyles->createIcon('icon', '.editfocus .iconck i.fa', false, false, true, $useaccordion = false, $removebutton = false, $fontalign = false, $selection = true, $iconhover = false, $iconsize = false) ?>
		<?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_listoptions"><?php echo Pagebuilderck\CKText::_('CK_OPTIONS'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_listoptions">
		<div class="ckoption">
			<span class="ckoption-label">
				<?php echo Pagebuilderck\CKText::_('CK_ORIENTATION'); ?>
			</span>
			<span class="ckoption-field">
				<select id="orientation" name="orientation" class="inputbox" type="list">
					<option value="vertical"><?php echo Pagebuilderck\CKText::_('CK_VERTICAL'); ?></option>
					<option value="horizontal"><?php echo Pagebuilderck\CKText::_('CK_HORIZONTAL'); ?></option>
				</select>
			</span>
			<div class="clr"></div>
		</div>
		<div class="ckoption" id="nbcolsoptions">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>application_tile_horizontal.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_NUMBER_COLS'); ?>
			</span>
			<input id="nbcols" class="inputbox" name="nbcols" value="" type="hidden">
			<span class="ckoption-field ckbutton-group">
				<input id="nbcols_1" class="" name="nbcols" value="1" type="radio">
				<label class="ckbutton" for="nbcols_1">
					<?php echo Pagebuilderck\CKText::_('1'); ?>
				</label>
				<input id="nbcols_2" class="" name="nbcols" value="2" type="radio">
				<label class="ckbutton" for="nbcols_2">
					<?php echo Pagebuilderck\CKText::_('2'); ?>
				</label>
				<input id="nbcols_3" class="" name="nbcols" value="3" type="radio">
				<label class="ckbutton" for="nbcols_3">
					<?php echo Pagebuilderck\CKText::_('3'); ?>
				</label>
				<input id="nbcols_4" class="" name="nbcols" value="4" type="radio">
				<label class="ckbutton" for="nbcols_4">
					<?php echo Pagebuilderck\CKText::_('4'); ?>
				</label>
			</span>
			<div class="clr"></div>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_BLOG_RESPONSIVE'); ?>
			</span>
			<span class="ckoption-field">
				<input id="responsiveresolution" name="responsiveresolution" class="inputbox" value="" type="text" placeholder="640" />
			</span>
			<div class="clr"></div>
		</div>
	</div>
	<div class="menulink" tab="tab_blocstyles"><?php echo Pagebuilderck\CKText::_('CK_STYLES'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_blocstyles">
		<?php echo $this->menustyles->createBlocStyles('bloc', 'list', '') ?>
	</div>
	<div class="menulink" tab="tab_listitemstyles"><?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_LIST_ITEM'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_listitemstyles">
		<div class="menustylescustom" data-prefix="listitem" data-rule=".pbck_list_item"><?php echo $this->menustyles->createBlocStyles('listitem') ?></div>
	</div>
</div>
<script language="javascript" type="text/javascript">
var focus = $ck('.editfocus');
function ckLoadEditionPopup() {
	$ck('.editfocus .pbck_list .pbck_list_item').each(function(i, el) {
		var text = $ck('.pbck_list_item_text', el).html();
		var newItem = ckCreateEditListItem(i, text.replace(/"/g, '&quot;'));
		$ck('#items_edition_list').append(newItem);
	});

	
	$ck('#elementscontainer [name="nbcols"][type="radio"]').change(function() {
		$ck('#nbcols').val($ck('[name="nbcols"][type="radio"]:checked').val()).trigger('change');
		ckUpdatePreviewArea();
	});
	$ck('#orientation').mousedown(function() {
		ckManageOrientationAndColumns();
	});
	ckMakeEditItemsSortable();
	ckFillEditionPopup(focus.attr('id'));
	$ck('#iconicon-class').val(focus.find('.iconck > i').attr('data-iconclass'));
	var nbcols = $ck('#nbcols').val() ? $ck('#nbcols').val() : '1';
	$ck('#elementscontainer [name="nbcols"][type="radio"]').removeAttr('checked');
	$ck('#elementscontainer [id="nbcols_' + nbcols + '"][type="radio"]').prop('checked', 'checked');
	ckManageOrientationAndColumns();
}

function ckManageOrientationAndColumns() {
	var nbcols = $ck('#nbcols').val() ? $ck('#nbcols').val() : '3';
	var orientation = $ck('#orientation').val();
	if (orientation === 'horizontal') {
		$ck('#nbcolsoptions').hide();
		$ck('#nbcols_1').trigger('click');
	} else {
		$ck('#nbcolsoptions').show();
	}
}

function ckBeforeSaveEditionPopup() {
	ckUpdatePreviewArea();
}

function ckBeforeDeleteEditItem(item) {
	var index = item.index('.item_edition');
	$ck('.editfocus .pbck_list_item').eq(index).remove();
}

function ckUpdatePreviewArea() {
	var newItem = $ck('.editfocus .pbck_list_item').first().clone();
	$ck('.editfocus .pbck_list_item').remove();
	$ck('#items_edition_list .item_edition').each(function(i, el) {
		$ck('.editfocus .pbck_list').append(newItem.clone());
		$ck('.editfocus .pbck_list_item').eq(i).find('.pbck_list_item_text').html($ck('.item_text_edition',el).val());
	});
	/* update the layout */
	if ($ck('#elementscontainer #orientation').val() === 'horizontal') {
		focus.attr('data-orientation', 'horizontal');
	} else {
		focus.attr('data-orientation', 'vertical');		
	}
	var nbcols = $ck('#nbcols').val() ? $ck('#nbcols').val() : '3';
	if (nbcols !== '1') {
		focus.find('.pbck_list').css('columns', nbcols).addClass('pbck_list_has_columns');
	} else {
		focus.find('.pbck_list').css('columns', '').removeClass('pbck_list_has_columns');	
	}
}

function ckCreateEditListItem(i, text) {
	var itemedition = $ck('<div class="item_edition clearfix" data_index="'+i+'">'
				+'<div class="item_move"></div>'
				+'<div class="item_list_text">'
				+'<label for="author_url_text_'+i+'">'+Joomla.JText._('CK_TEXT','Text')+'</label><input type="text" id="item_text_'+i+'" name="item_text_'+i+'" class="item_text_edition" value="'+text+'" style="width: 400px;" onchange="ckUpdatePreviewArea()"/>'
				+'<div class="item_delete ckbutton ckbutton-danger" onclick="ckDeleteEditItem($ck(this).parent().parent())">'+Joomla.JText._('CK_DELETE','Delete')+'</div>'
				+'</div>'
				+'</div>');

	return itemedition;
}


function ckAddNewListItem() {
	// add the element in the list
	var index = $ck('#items_edition_list .item_edition').length;
	var newItem = $ck('.editfocus .pbck_list_item').first().clone();
	$ck('.editfocus .pbck_list').append(newItem);
	// add the element for edition
	var newEditItem = ckCreateEditListItem(index, '');
	$ck('#items_edition_list').append(newEditItem);
	ckUpdatePreviewArea();
}

function ckMakeEditItemsSortable() {
	$ck( "#items_edition_list" ).sortable({
		items: ".item_edition",
		helper: "clone",
		handle: ".item_move",
		forcePlaceholderSize: true,
		tolerance: "pointer",
		placeholder: "placeholderck",
		start: function(e, ui){
		},
		stop: function( event, ui ) {
			ckUpdatePreviewArea();
		},
	});
}

</script>
<style type="text/css">
#items_edition_list label {
	display: inline-block;
	width: 180px;
}
</style>