<?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 class="menustylescustom" data-prefix="iconhover" data-rule=".buttonck:hover .pbckicon"></div>
<div class="menustylescustom" data-prefix="buttonwrap" data-rule="|ID|"></div>
<div id="elementscontainer">
	<div class="menulink" tab="tab_button"><?php echo Pagebuilderck\CKText::_('PLG_PAGEBUILDERCK_BUTTON_EDITION'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_button">
		<div class="menupanetitle"><?php echo Pagebuilderck\CKText::_('CK_LINK'); ?></div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>edit-lipsum.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_TEXT'); ?>
			</span>
			<span class="ckoption-field">
				<input id="linktext" name="linktext" class="inputbox" value="" type="text" onchange="ckUpdateLinkText(this.value)" />
			</span>
			<div class="clr"></div>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>link.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_LINK_URL'); ?>
			</span>
			<span class="ckoption-field">
				<input id="linkurl" name="linkurl" class="inputbox"  value="" type="text" onchange="ckUpdateLinkAttribute('href', this.value)" style="width:120px;" />
				<span class="ckbuttonstyle" onclick="ckCallLinkManagerPopup('linkurl', 'all')">+</span>
			</span>
			<div class="clr"></div>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>text_signature.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_REL_TAG'); ?>
			</span>
			<span class="ckoption-field">
				<input id="linkrel" name="linkrel" class="inputbox"  value="" type="text" onchange="ckUpdateLinkAttribute('rel', this.value)" />
			</span>
			<div class="clr"></div>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>text_signature.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_CSS_CLASS'); ?>
			</span>
			<span class="ckoption-field">
				<input id="linkcss" name="linkcss" class="inputbox"  value="" type="text" onchange="ckUpdateLinkAttribute('class', this.value)" />
			</span>
			<div class="clr"></div>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>hand-point-090.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_ONCLICK'); ?>
			</span>
			<span class="ckoption-field">
				<input id="linkonlick" name="linkonlick" class="inputbox"  value="" type="text" onchange="ckUpdateLinkAttribute('onclick', this.value)" />
			</span>
			<div class="clr"></div>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>link_add.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_TARGET'); ?>
			</span>
			<span class="ckoption-field">
				<select id="linktarget" class="inputbox" name="linktarget" onchange="ckUpdateLinkAttribute('target', this.value)" >
					<option value="default"><?php echo Pagebuilderck\CKText::_('CK_DEFAULT'); ?></option>
					<option value="_blank"><?php echo Pagebuilderck\CKText::_('CK_NEW_WINDOW'); ?></option>
				</select>
			</span>
			<div class="ckclr"></div>
		</div>

		<div class="menupanetitle"><?php echo Pagebuilderck\CKText::_('CK_DIMENSIONS'); ?></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::_('CK_WIDTH'); ?>
			</span>
			<span class="ckoption-field">
				<input class="inputbox" type="text" name="blocwidth" id="blocwidth" value="" />
			</span>
			<div class="clr"></div>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				<img class="ckoption-icon" src="<?php echo $this->imagespath; ?>height.png" width="16" height="16" />
				<?php echo Pagebuilderck\CKText::_('CK_HEIGHT'); ?>
			</span>
			<span class="ckoption-field">
				<input class="inputbox" type="text" name="blocheight" id="blocheight" value="" />
			</span>
			<div class="clr"></div>
		</div>
		<div class="ckoption">
			<span class="ckoption-label">
				
				<?php echo Pagebuilderck\CKText::_('CK_ALIGN'); ?>
			</span>
			<span class="ckoption-field">
				<span class="ckoption-field ckbutton-group">
					<input id="buttonwrapalignementleft" class="inputbox" name="buttonwrapalignement" value="left" type="radio" >
					<label class="ckbutton" for="buttonwrapalignementleft">
						<img src="<?php echo $this->imagespath; ?>text_align_left.png" width="16" height="16" />
					</label>
					<input id="buttonwrapalignementcenter" class="inputbox" name="buttonwrapalignement" value="center" type="radio" >
					<label class="ckbutton" for="buttonwrapalignementcenter">
						<img src="<?php echo $this->imagespath; ?>text_align_center.png" width="16" height="16" />
					</label>
					<input id="buttonwrapalignementright" class="inputbox" name="buttonwrapalignement" value="right" type="radio" >
					<label class="ckbutton" for="buttonwrapalignementright">
						<img src="<?php echo $this->imagespath; ?>text_align_right.png" width="16" height="16" />
					</label>
				</span>	
			</span>
			<div class="clr"></div>
		</div>

	</div>
	<div class="menulink" tab="tab_iconstyles"><?php echo Pagebuilderck\CKText::_('CK_ICON'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_iconstyles">
		<?php 
		$this->menustyles->createIcon('icon', '.editfocus .buttonck .pbckicon', $space = false, $align = false, $font = true, $useaccordion = false, $removebutton = true, $fontalign = true, $selection = true, $iconhover = true);
		?>
		<div class="ckoption">
			<div class="menupanetitle"><?php echo Pagebuilderck\CKText::_('CK_POSITION'); ?></div>
			<div class="ckbutton" onclick="ckUpdateLayout(this)" data-layout="top"><?php echo Pagebuilderck\CKText::_('CK_TOP'); ?></div>
			<div class="ckbutton" onclick="ckUpdateLayout(this)" data-layout="bottom"><?php echo Pagebuilderck\CKText::_('CK_BOTTOM'); ?></div>
			<div class="ckbutton" onclick="ckUpdateLayout(this)" data-layout="left"><?php echo Pagebuilderck\CKText::_('CK_LEFT'); ?></div>
			<div class="ckbutton" onclick="ckUpdateLayout(this)" data-layout="right"><?php echo Pagebuilderck\CKText::_('CK_RIGHT'); ?></div>
		</div>
		<div class="ckoption">
			<div class="menupanetitle"><?php echo Pagebuilderck\CKText::_('CK_VERTICAL_ALIGN'); ?></div>
			<span class="ckbutton-group">
				<input id="iconverticalaligntop" class="inputbox" name="iconverticalalign" value="top" type="radio" data-prefix="icon">
				<label class="ckbutton" for="iconverticalaligntop">
					<?php echo Pagebuilderck\CKText::_('CK_TOP') ?>
				</label>
				<input id="iconverticalaligncenter" class="inputbox" name="iconverticalalign" value="center" type="radio" data-prefix="icon">
				<label class="ckbutton" for="iconverticalaligncenter">
					<?php echo Pagebuilderck\CKText::_('CK_CENTER') ?>
				</label>
				<input id="iconverticalalignbottom" class="inputbox" name="iconverticalalign" value="bottom" type="radio" data-prefix="icon">
				<label class="ckbutton" for="iconverticalalignbottom">
					<?php echo Pagebuilderck\CKText::_('CK_BOTTOM') ?>
				</label>
				<input id="iconverticalaligndefault" class="inputbox" name="iconverticalalign" value="default" type="radio" data-prefix="icon">
				<label class="ckbutton" for="iconverticalaligndefault">
					<?php echo Pagebuilderck\CKText::_('CK_DEFAULT') ?>
				</label>
			</span>
		</div>
		<?php
		$this->menustyles->createBackground('icon');
		$this->menustyles->createDimensions('icon');
		$this->menustyles->createDecoration('icon');
		$this->menustyles->createShadow('icon');
		$this->menustyles->createCustom('icon');
		?>
	</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', 'button', '') ?>
	</div>
	<div class="menulink" tab="tab_blochoverstyles"><?php echo Pagebuilderck\CKText::_('CK_STYLES_HOVER'); ?></div>
	<div class="tab menustyles ckproperty" id="tab_blochoverstyles">
		<?php echo $this->menustyles->createBlocStyles('blochover', 'button', '') ?>
	</div>
</div>
<script language="javascript" type="text/javascript">
var focus = $ck('.editfocus');
function ckLoadEditionPopup() {
	// $ck('#previewareabloc .buttonck').click(function(e) {e.preventDefault();return false;});
	// $ck('#previewareabloc .buttonck')[0].outerHTML = focus.find('.buttonck')[0].outerHTML;
	// $ck('#previewareabloc .ckstyle').html(focus.find('.ckstyle').html());
	ckFillEditionPopup(focus.attr('id'));
	// $ck('#previewareabloc').css('text-align', $ck('#previewareabloc .buttonck').attr('data-align'));
	$ck('#iconicon-class').val(focus.find('.iconck > i').attr('data-iconclass'));
	var linktext = $ck('#linktext').val();
	if (! linktext) {
		$ck('#iconaccessibilitytext').val(focus.find('i,.pbckicon svg').attr('aria-label'));
	}
}

function ckSetAlignButton() {
	var align = $ck('input[name="buttonalignement"]:checked').val();
	$ck('.editfocus .buttonck').attr('data-align', align);
	$ck('.editfocus').css('text-align', align);
}

function ckBeforeSaveEditionPopup() {
	var focus = $ck('.editfocus');
	//	var button = $ck('.editfocus .buttonck');
	// focus.find('.buttonck')[0].outerHTML = $ck('#previewareabloc .buttonck')[0].outerHTML;
	// focus.find('.ckstyle').html($ck('#previewareabloc .ckstyle').html());
	// if ($ck('.editfocus a.buttonck').attr('data-align')) focus.css('text-align', focus.find('.buttonck').attr('data-align'));
	ckSaveEditionPopup(focus.attr('id'));
	ckCloseEditionPopup();
	var accessibilitytext = $ck('#iconaccessibilitytext').val();
	var linktext = $ck('#linktext').val();
	if (! linktext && accessibilitytext) {
		focus.find('i,.pbckicon svg').removeAttr('aria-hidden')
				.attr('aria-label', accessibilitytext)
				.attr('role', 'image');
	} else {
		focus.find('i,.pbckicon svg').removeAttr('aria-label')
				.removeAttr('role')
				.attr('aria-hidden', 'true');
	}
	let valign = $ck('[name="iconverticalalign"]:checked').val();
	if (valign) {
		ckToggleVerticalAlign(focus.attr('id') + ' .pbckicon', valign, null);
	}
}

function ckUpdateLinkAttribute(attribute, value) {
	var buttonpreview = $ck('.editfocus .buttonck');
	if (attribute == 'class') {
		if (value) {
			buttonpreview.addClass(value);
		} else {
			buttonpreview.attr('class', 'buttonck inner');
		}
	} else {
		if (value && value != 'default') {
			buttonpreview.attr(attribute, value.replace(/"/g, '\''));
			if (attribute == 'onclick') $ck('#linkonlick').val($ck('#linkonlick').val().replace(/"/g, '\''));
		} else {
			buttonpreview.removeAttr(attribute, value);
		}
	}
	ckSaveEditionPanel(); // force the update
}

function ckUpdateLinkText(text) {
	var buttonpreview = $ck('.editfocus .buttontextck');
	buttonpreview.html(text);
}

function ckSelectIcon(icon) {
	$ck('.editfocus .buttonck').find('.pbckicon').remove();
	$ck('.editfocus .buttonck').prepend(icon);
	$ck('.editfocus .buttonck .pbckicon').css('vertical-align', $ck('#iconicon-position button.active').attr('data-position'))
		.addClass($ck('#iconicon-size button.active').attr('data-width'));
	ckSetIconMargin('.editfocus .buttonck i.fa', '#iconicon_margin');
	return $ck('.editfocus .iconck');
}

//function ckSelectIcon(icon) {
//	var focusIcon = $ck('.editfocus .iconck');
//	focusIcon.empty().append(icon);
//	return focusIcon;
//}

function ckUpdateLayout(btn) {
	$ck(btn).parent().find('.active').removeClass('active');
	$ck(btn).addClass('active');
	var layout = $ck(btn).attr('data-layout');

	focus.attr('data-layout', layout); 
}

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