File manager - Edit - /home/jardides/www/Jardi-design/j37/administrator/components/com_pagebuilderck/views/options/tmpl/edit_image.php
Back
<?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 - http://www.template-creator.com - http://www.joomlack.fr */ defined('_JEXEC') or die; $input = new JInput(); $id = $input->get('ckid', '', 'string'); // $mediabox = JPluginHelper::getPlugin('system', 'mediabox_ck'); // $mediaboxParams = new JRegistry($mediabox->params); ?> <div id="elementscontainer"> <div class="menulink current" tab="tab_image"><?php echo JText::_('CK_IMAGE_EDITION'); ?></div> <div class="menulink" tab="tab_blocstyles"><?php echo JText::_('CK_STYLES'); ?></div> <div class="clr"></div> <div id="elementscontent"> <div class="tab menustyles current ckproperty" id="tab_image"> <table> <tr> <td style="vertical-align:top;"> <div class="layoutinfos"> <div class="layoutinfostitle"><?php echo JText::_('CK_IMAGE_INFOS'); ?></div> <div class="layoutinfosdesc"><?php echo JText::_('CK_IMAGE_INFOS_DESC'); ?></div> </div> </td> <td style="vertical-align:top;width:800px;"> <div class="menustylesblock" style="width:850px;"> <div class="menustylesblocktitle"><?php echo JText::_('CK_IMAGE') ?></div> <div class="menustylesblockaccordion"> <div class="menupanetitle"><?php echo JText::_('CK_IMAGE'); ?></div> <div style="text-align:left;"> <a style="display:block;float:left;padding:0 5px;width:105px;" class="ckbuttonstyle" href="javascript:void(0)" onclick="CKBox.open({handler: 'iframe', url: 'index.php?option=com_pagebuilderck&view=browse&type=image&func=ckSelectFile&field=<?php echo $id; ?>imageurl&tmpl=component'})" ><?php echo JText::_('CK_SELECT'); ?></a> <a style="display:block;float:left;padding:0 5px;width:80px;" class="ckbuttonstyle" href="javascript:void(0)" onclick="$ck('#<?php echo $id; ?>imageurl').attr('value', '');"><?php echo JText::_('CK_CLEAN'); ?></a> <div class="clr"></div> <input class="inputboxfake" type="text" value="" name="<?php echo $id; ?>imageurl" id="<?php echo $id; ?>imageurl" size="7" style="width:90%; min-width: 200px; clear:both;" onchange="ckUpdateImagepreview()" /> </div> <div class="menupanetitle"><?php echo JText::_('CK_DIMENSIONS'); ?></div> <div style="text-align:left;clear:both;"> <div style="float:left;text-align:right;margin:5px 5px 0 0;line-height: 15px;;"><?php echo JText::_('CK_WIDTH'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>width.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="imagewidth" id="imagewidth" size="2" value="" style="" onchange="ckUpdateImagepreview()" /></div><div style="float:left;text-align:left;margin-left:3px;"></div> <div style="float:left;text-align:right;margin:5px 5px 0 10px;line-height: 15px;;"><?php echo JText::_('CK_HEIGHT'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>height.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="imageheight" id="imageheight" size="2" value="" style="" onchange="ckUpdateImagepreview()" /></div><div style="float:left;text-align:left;margin-left:3px;"></div> <div class="clr"></div> </div> <div class="menupanetitle"><?php echo JText::_('CK_ALIGN'); ?></div> <div style="text-align:left;"> <div style="margin:5px 0 0 0px;" class="btn-group"> <div style="float:left;margin:0px 0px 0 2px;"><input type="radio" class="inputbox" name="imagealignement" id="imagealignementleft" onclick="ckSetActiveAlignmentButton()" value="left" style="width:16px;border:none;margin:0 2px;display:none;" /><label for="imagealignementleft" class="btn"><img src="<?php echo $this->imagespath; ?>text_align_left.png" width="16" height="16" /></label></div> <div style="float:left;margin:0px 5px 0 2px;"></div> <div style="float:left;margin:0px 0px 0 2px;"><input type="radio" class="inputbox" name="imagealignement" id="imagealignementcenter" onclick="ckSetActiveAlignmentButton()" value="center" style="width:16px;border:none;margin:0 2px;display:none;" /><label for="imagealignementcenter" class="btn"><img src="<?php echo $this->imagespath; ?>text_align_center.png" width="16" height="16" /></label></div> <div style="float:left;margin:0px 5px 0 2px;"></div> <div style="float:left;margin:0px 0px 0 2px;"><input type="radio" class="inputbox" name="imagealignement" id="imagealignementright" onclick="ckSetActiveAlignmentButton()" value="right" style="width:16px;border:none;margin:0 2px;display:none;" /><label for="imagealignementright" class="btn"><img src="<?php echo $this->imagespath; ?>text_align_right.png" width="16" height="16" /></label></div> <div style="float:left;margin:0px 5px 0 2px;"></div> </div> </div> <br /> <div style="text-align:left;clear:both;"> <div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo JText::_('CK_CSS_CLASS'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>text_signature.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="imagecssclass" id="imagecssclass" size="10" value="" style="width:300px;" onchange="ckUpdateImageAttribute('class', this.value)" /></div><div style="float:left;text-align:left;margin-left:3px;"></div> </div> <div style="text-align:left;clear:both;"> <div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo JText::_('CK_ALT_TAG'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>text_signature.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="imagealt" id="imagealt" size="10" value="" style="width:300px;" onchange="ckUpdateImageAttribute('alt', this.value)" /></div><div style="float:left;text-align:left;margin-left:3px;"></div> </div> <div style="text-align:left;clear:both;"> <div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo JText::_('CK_TITLE'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>text_signature.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="imagetitle" id="imagetitle" size="10" value="" style="width:300px;" onchange="ckUpdateImageAttribute('title', this.value)" /></div><div style="float:left;text-align:left;margin-left:3px;"></div> </div> <div class="clr"></div> <div class="menupanetitle"><?php echo JText::_('CK_IMAGE_EFFECT'); ?></div> <?php if (! JPluginHelper::isEnabled('system', 'imageeffectck') || ! JPluginHelper::isEnabled('editors-xtd', 'imageeffectckbutton')) { ?> <div class="alert alert-warning"> <?php if (! JPluginHelper::isEnabled('system', 'imageeffect')) { ?><b><?php echo JText::_('CK_IMAGEEFFECTCK_NOT_INSTALLED') ?></b><?php } ?> <br /><a href="https://www.joomlack.fr/en/joomla-extensions/image-effect-ck" target="_blank"><?php echo JText::_('CK_DOWNLOAD') ?> : Image Effect CK</a> <div class="clr"></div> <?php if (! JPluginHelper::isEnabled('editors-xtd', 'imageeffectbutton')) { ?><b><?php echo JText::_('CK_IMAGEEFFECTCK_BUTTON_NOT_INSTALLED') ?></b><?php } ?> <br /><a href="https://www.joomlack.fr/en/component/dms/view_document/147-image-effect-ck-params" target="_blank"><?php echo JText::_('CK_DOWNLOAD') ?> : Image Effect CK Params</a> </div> <?php } else { ?> <script src="<?php echo JUri::root(true) ?>/plugins/editors-xtd/imageeffectckbutton/assets/imageeffectckbutton.js"></script> <a style="display:block;float:left;padding:0 5px;width:80px;" class="ckbuttonstyle" href="javascript:void(0)" onclick="CKApi.Imageeffect.showInterface('ckValidateImageEffect()');"><?php echo JText::_('CK_SELECT'); ?></a> <?php } ?> <div class="clr"></div> </div> </div> <div class="menustylesblock" style="width:850px;"> <div class="menustylesblocktitle"><?php echo JText::_('CK_LINK') ?></div> <div class="menustylesblockaccordion"> <div style="text-align:left;clear:both;"> <div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo JText::_('CK_LINK_URL'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>link.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox link_attrib" type="text" name="linkurl" id="linkurl" size="10" value="" style="width:300px;" data-attrib="href" onchange="ckUpdateLinkAttribute('href', this.value)" /></div><div style="float:left;text-align:left;margin-left:3px;"></div> </div> <div style="text-align:left;clear:both;"> <div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo JText::_('CK_REL_TAG'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>text_signature.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox link_attrib" type="text" name="linkrel" id="linkrel" size="10" value="" style="width:300px;" data-attrib="rel" onchange="ckUpdateLinkAttribute('rel', this.value)" /></div><div style="float:left;text-align:left;margin-left:3px;"></div> </div> <div style="text-align:left;clear:both;"> <div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo JText::_('CK_CSS_CLASS'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>text_signature.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox link_attrib" type="text" name="linkcss" id="linkcss" size="10" value="" style="width:300px;" data-attrib="class" onchange="ckUpdateLinkAttribute('class', this.value)" /></div><div style="float:left;text-align:left;margin-left:3px;"></div> </div> <div style="text-align:left;clear:both;"> <div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo JText::_('CK_TARGET'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>link_add.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox link_attrib" type="text" name="linktarget" id="linktarget" size="10" value="" style="width:300px;" data-attrib="target" onchange="ckUpdateLinkAttribute('target', this.value)" /></div><div style="float:left;text-align:left;margin-left:3px;"></div> </div> <div style="text-align:left;clear:both;"> <div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo JText::_('CK_TITLE'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>text_signature.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="linktitle" id="linktitle" size="10" value="" style="width:300px;" onchange="ckUpdateLinkAttribute('title', this.value)" /></div><div style="float:left;text-align:left;margin-left:3px;"></div> </div> </div> </div> <div class="menustylesblock" style="width:850px;"> <div class="menustylesblocktitle"><?php echo JText::_('CK_LIGHTBOX') ?></div> <div class="menustylesblockaccordion"> <?php if (! JPluginHelper::isEnabled('system', 'mediabox_ck')) { ?> <div class="alert alert-danger"><b><?php echo JText::_('CK_MEDIABOXCK_NOT_INSTALLED') ?></b><br /><a href="http://www.joomlack.fr/en/joomla-extensions/mediabox-ck" target="_blank"><?php echo JText::_('CK_DOWNLOAD') ?> : Mediabox CK</a></div> <?php } ?> <div style="text-align:left;clear:both;"> <div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo JText::_('CK_USE_LIGHTBOX'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>magnifier.png" width="15" height="15" align="top" /></div> <div style="float:left;text-align:left;margin-left:3px;"> <select class="inputbox" type="list" value="" name="uselightbox" id="uselightbox" style="width: 70px;float:right; margin-right:4px;" onchange="ckToggleLightboxState(this.value)"> <option value="0"><?php echo JText::_('JNO'); ?></option> <option value="1"><?php echo JText::_('JYES'); ?></option> </select> </div> </div> <div style="text-align:left;clear:both;"> <div style="width:150px;float:left;text-align:left;margin:5px 5px 0 0;line-height: 15px;"><?php echo JText::_('CK_LIGHTBOX_ALBUM'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>photo_album.png" width="15" height="15" align="top" /></div> <div style="float:left;text-align:left;margin-left:3px;"> <select class="inputbox" type="list" value="" name="lightboxalbum" id="lightboxalbum" style="width: 70px;float:right; margin-right:4px;" onchange="ckToggleLightboxAlbum(this.value)"> <option value="0"><?php echo JText::_('JNO'); ?></option> <option value="1"><?php echo JText::_('JYES'); ?></option> </select> </div> </div> </div> </div> </td> </tr> </table> <div class="clr"></div> </div> <div class="tab menustyles ckproperty" id="tab_blocstyles"> <table> <tr> <td style="vertical-align:top;"> <div class="layoutinfos"> <div class="layoutinfostitle"><?php echo JText::_('CK_IMAGE_INFOS'); ?></div> <div class="layoutinfosdesc"><?php echo JText::_('CK_IMAGE_INFOS_DESC'); ?></div> </div> </td> <td style="vertical-align:top;"> <?php echo $this->menustyles->createImageStyles('image', 'image', '') ?> </td> </tr> </table> <div class="clr"></div> </div> </div> </div> <div id="previewarea" class="clearfix"> <div class="previewareatitle"><?php echo JText::_('CK_PREVIEWAREA_TITLE'); ?></div> <div id="previewareabloc"> <div class="ckstyle"></div> <div class="inner"> <div id="<?php echo $id; ?>_preview_image" class="imageck cktype"> <img /> </div> </div> </div> </div> <div class="clr"></div> <script language="javascript" type="text/javascript"> function ckLoadEditionPopup() { var focus = $ck('.editfocus'); var focus_img = $ck('.editfocus img'); $ck('#<?php echo $id; ?>imageurl').val(focus_img.attr('data-src')); $ck('#<?php echo $id; ?>_preview_image').html(focus.find('.imageck').html()); // $ck('#<?php echo $id; ?>_preview_image img').attr('src', '<?php echo JUri::root(true); ?>/' + focus_img.attr('data-src')); $ck('#<?php echo $id; ?>_preview_image img').attr('src', getImgPathFromImgSrc(focus_img.attr('data-src'), true)); $ck('#previewareabloc .ckstyle').html(focus.find('.ckstyle').html()); ckFillEditionPopup(focus.attr('id')); // $ck('.link_attrib').each(function() { // ckUpdateLinkAttribute($ck(this).attr('data-attrib'), $ck(this).val()); // }); ckUpdateLinkAttribute('href', $ck('#linkurl').val()); ckUpdateLinkAttribute('rel', $ck('#linkrel').val()); ckUpdateLinkAttribute('class', $ck('#linkcss').val()); ckUpdateLinkAttribute('target', $ck('#linktarget').val()); } function ckBeforeSaveEditionPopup() { var focus = $ck('.editfocus'); var focus_img = $ck('.editfocus img'); var image = $ck('#<?php echo $id; ?>_preview_image img'); ckUpdateImagepreview(); focus.find('.imageck').html($ck('#<?php echo $id; ?>_preview_image').html()); focus.find('.ckstyle').html($ck('#previewareabloc .ckstyle').html()); ckSaveEditionPopup(focus.attr('id')); ckCloseEditionPopup(); } /* function insert_image_ck(imgtag) { jInsertEditorText(imgtag, ''); } function jInsertEditorText(imgtag, editor) { var img_src = $ck(imgtag).attr('src'); $ck('#<?php echo $id; ?>_preview_image img').attr('src', '<?php echo JUri::root(true); ?>/'+img_src) .attr('width', '') .attr('height', '') .attr('data-src', img_src); $ck('#<?php echo $id; ?>imageurl').val(img_src); }*/ function ckUpdateImagepreview() { var img_src = $ck('#<?php echo $id; ?>imageurl').val(); // $ck('#<?php echo $id; ?>_preview_image img').attr('src', '<?php echo JUri::root(true); ?>/'+img_src) $ck('#<?php echo $id; ?>_preview_image img').attr('src', getImgPathFromImgSrc(img_src, true)) .attr('width', $ck('#imagewidth').val()) .attr('height', $ck('#imageheight').val()) .attr('data-src', img_src); ckUpdateImageAttribute('class', $ck('#imagecssclass').val()); ckUpdateImageAttribute('aly', $ck('#imagealt').val()); ckUpdateImageAttribute('title', $ck('#imagetitle').val()); } // set active class for radio buttons function ckSetActiveAlignmentButton() { $ck('#elementscontainer .inputbox[name="imagealignement"]').each(function() { if ($ck(this).attr('checked')) { $ck(this).next('label').addClass('active'); } else { $ck(this).next('label').removeClass('active'); } }); } function ckUpdateImageAttribute(attribute, value) { var imagepreview = $ck('#<?php echo $id; ?>_preview_image img'); if (value) { imagepreview.attr(attribute, value); } else { imagepreview.removeAttr(attribute); } } function ckUpdateLinkAttribute(attribute, value) { var imagepreview = $ck('#<?php echo $id; ?>_preview_image img'); if (imagepreview.parent()[0].tagName.toLowerCase() == 'a') { var imagelink = imagepreview.parent(); if (value) { imagelink.attr(attribute, value); } else { if (attribute == 'href') { $ck('#<?php echo $id; ?>_preview_image').empty().append(imagepreview); } else { imagelink.removeAttr(attribute); } } } else { if (value) imagepreview.wrap('<a href="' + (attribute == 'href' ? value : '') + '"></a>'); // if (attribute != 'href') { // alert('Warning : you must have an url to create a link'); // } } } function ckToggleLightboxState(value) { // TODO : checker champ à changer avec $mediaboxParams->get if (value == 1) { // if link is empty, auto target the image if ($ck('#linkurl').val() == '') { $ck('#linkurl').val(getImgPathFromImgSrc($ck('#<?php echo $id; ?>imageurl').val(), true)).trigger('change'); } if ($ck('#elementscontainer #linkrel').val().indexOf('lightbox') == -1) { var relvalue = $ck('#elementscontainer #linkrel').val() + ' lightbox'; $ck('#elementscontainer #linkrel').val(relvalue.trim()); } if ($ck('#lightboxalbum').val() == '1') { ckToggleLightboxAlbum(1); } } else { var relvalue = $ck('#elementscontainer #linkrel').val().replace('lightbox', '').trim(); $ck('#elementscontainer #linkrel').val(relvalue); $ck('#lightboxalbum').val('0'); } ckUpdateLinkAttribute('rel', $ck('#linkrel').val()); } function ckToggleLightboxAlbum(value) { if ($ck('#uselightbox').val() != 1) { alert('Warning : you can not enable the album feature, the Lightbox option must be enabled'); $ck('#lightboxalbum').val('0'); return; } var pageid = $ck('input[name="id"]').val(); if (value == 1) { if ($ck('#elementscontainer #linkrel').val().indexOf('lightbox[') != -1) { // check if lightbox already exists without album var re = /lightbox(\[.*?\])/g; var relvalue = $ck('#elementscontainer #linkrel').val(); $ck('#elementscontainer #linkrel').val(relvalue.replace(re, 'lightbox[pagebuilderck' + pageid + ']')); } else { var relvalue = $ck('#elementscontainer #linkrel').val().replace('lightbox', '') + ' lightbox[pagebuilderck' + pageid + ']'; $ck('#elementscontainer #linkrel').val(relvalue.trim()); } } else { var re = /lightbox(\[.*?\])/g; var relvalue = $ck('#elementscontainer #linkrel').val().replace(re, 'lightbox').trim(); $ck('#elementscontainer #linkrel').val(relvalue); } ckUpdateLinkAttribute('rel', $ck('#linkrel').val()); } function ckValidateImageEffect() { var title = $ck('#imageeffectckbuttonimgdesc').val() ? $ck('#imageeffectckbuttonimgtitle').val() + '::' + $ck('#imageeffectckbuttonimgdesc').val() : $ck('#imageeffectckbuttonimgtitle').val(); var imgCustomClasses = $ck('#imageeffectckbuttonimgclass').val() != '' ? ' ' + $ck('#imageeffectckbuttonimgclass').val() : ''; var cssclass = $ck('#imageeffectckbuttoneffectslist').val() + imgCustomClasses; $ck('#imagetitle').val(title); $ck('#imagecssclass').val(cssclass); } /* * Triggered from the Image Effect CK Params plugin, used to fill the data * @returns {undefined} */ function onImageeffectckmodalLoaded() { var imgsrc = $ck('#<?php echo $id; ?>_preview_image img').attr('src'); var imgtitletmp = $ck('#imagetitle').val(); var imgclass = $ck('#imagecssclass').val(); CKApi.Imageeffect.setFieldsValue(imgsrc, imgtitletmp, imgclass); } /**------- Needed for tabs ----------**/ $ck('#elementscontent div.tab:not(.current)').hide(); $ck('.menulink', $ck('#elementscontainer')).each(function(i, tab) { $ck(tab).click(function() { $ck('#elementscontent div.tab').hide(); $ck('.menulink', $ck('#elementscontainer')).removeClass('current'); if ($ck('#' + $ck(tab).attr('tab')).length) $ck('#' + $ck(tab).attr('tab')).show(); $ck(this).addClass('current'); }); }); ckSetActiveAlignmentButton(); ckInitColorPickers(); initModalPopup(); ckInitAccordions(); </script> <style type="text/css"> #image_preview { padding: 5px; background: #f5f5f5; border: 1px solid #ddd; margin: 10px 10px 10px 0; max-width: 600px; /*height: 200px;*/ overlow: hidden; } #image_preview > img { max-width: 100%; } </style>
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.02 |
proxy
|
phpinfo
|
Settings