File manager

File manager - Edit - /home/jardides/www/Jardi-design/plugins/pagebuilderck/animatedtext/layouts/edit_animatedtext.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 - https://www.template-creator.com - https://www.joomlack.fr / defined('_JEXEC') or die; ?> <div id="elementscontainer"> <div class="menulink" tab="tab_edition"><?php echo JText::_('CK_TEXT_EDITION'); ?></div> <div class="tab menustyles ckproperty" id="tab_edition"> <div class="ckoption"> <select type="text" id="<?php echo $id; ?>_headingtag" onchange="ckUpdatePreviewArea()" style="width: 90%;" > <option value="div">DIV</option> <option value="h1">H1</option> <option value="h2">H2</option> <option value="h3">H3</option> <option value="h4">H4</option> <option value="h5">H5</option> <option value="h6">H6</option> </select> </div> <div class="menupanetitle"><?php echo JText::_('PLG_PAGEBUILDERCK_ANIMATEDTEXT_ANIMATED_TEXT'); ?></div> <div class="ckoption"> <input type="text" id="<?php echo $id; ?>_title" onchange="ckUpdatePreviewArea()" style="width: 90%;" /> </div> <div class="menupanetitle"><?php echo JText::_('PLG_PAGEBUILDERCK_ANIMATEDTEXT_BEFORE_TEXT'); ?></div> <div class="ckoption"> <input type="text" id="<?php echo $id; ?>_beforetitle" onchange="ckUpdatePreviewArea()" style="width: 90%;" /> </div> <div class="menupanetitle"><?php echo JText::_('PLG_PAGEBUILDERCK_ANIMATEDTEXT_AFTER_TEXT'); ?></div> <div class="ckoption"> <input type="text" id="<?php echo $id; ?>_aftertitle" onchange="ckUpdatePreviewArea()" style="width: 90%;" /> </div> </div> <div class="menulink" tab="tab_texteffects"><?php echo JText::_('PLG_PAGEBUILDERCK_ANIMATEDTEXT_EFFECTS'); ?></div> <div class="tab menustyles" id="tab_texteffects"> <p style="padding:0 10px;"> Library <a href="https://animejs.com/" target="_blank">Anime JS</a> for the effects</p> <p style="padding:0 10px;"> Thanks to <a href="https://tobiasahlin.com/moving-letters/" target="_blank">https://tobiasahlin.com/moving-letters/</a> for the effects</p> <?php for ($i=1; $i<= 14; $i++) {?> <div class="tab_texteffect"> <div class="pbck_animatedtext" data-effect="<?php echo $i ?>">DEMO TEXT</div> <div class="ckbutton ckselecteffect" data-effect="<?php echo $i ?>"><?php echo JText::_('CK_SELECT') . ' ' . $i ?> </div> </div> <?php } ?> </div> <div class="menulink" tab="tab_blocstyles"><?php echo JText::_('CK_STYLES'); ?></div> <div class="tab menustyles ckproperty" id="tab_blocstyles"> <div class="menustylescustom" data-prefix="bloc" data-rule=".titleck"><?php echo $this->menustyles->createBlocStyles('bloc') ?></div> </div> </div> <style> #tab_texteffects { overflow: hidden; } #tab_texteffects .pbck_animatedtext { font-size: 26px; pointer-events: none; } .tab_texteffect { display: flex; border-bottom: 1px solid #ddd; padding: 10px; margin: 0 10px; } .tab_texteffect .ckbutton { margin-left: auto; } </style> <script language="javascript" type="text/javascript"> var focus = $ck('.editfocus'); function ckLoadEditionPopup() { let effect = focus.find('.titleck-effect').attr('data-effect'); $ck('.pbck_animatedtext[data-effect="' + effect + '"] + .ckbutton').addClass('active'); $ck('#<?php echo $id; ?>_title').val(focus.find('.titleck-effect').html()); $ck('#<?php echo $id; ?>_beforetitle').val(focus.find('.titleck-before').html()); $ck('#<?php echo $id; ?>_aftertitle').val(focus.find('.titleck-after').html()); $ck('#<?php echo $id; ?>_headingtag').val(focus.find('.titleck')[0].tagName.toLowerCase()); ckFillEditionPopup(focus.attr('id')); let selectors = document.getElementById('elementscontainer').querySelectorAll('.pbck_animatedtext'); PBCK_animatedtext_start(selectors); $ck('#elementscontainer .ckselecteffect').on('click', function() { ckSelectEffect(this); }); } function ckBeforeSaveEditionPopup() { ckUpdatePreviewArea(); } function ckUpdatePreviewArea() { var title = $ck('#<?php echo $id; ?>_title').val(); var before = $ck('#<?php echo $id; ?>_beforetitle').val(); var after = $ck('#<?php echo $id; ?>_aftertitle').val(); var effect = $ck('#elementscontainer .ckselecteffect.active').attr('data-effect'); var html = $ck('<' + $ck('#<?php echo $id; ?>_headingtag').val() + ' class="titleck">' + '<span class="titleck-before">' + before + '</span>' + '<span class="titleck-effect" data-effect="' + effect + '">' + title + '</span>' + '<span class="titleck-after">' + after + '</span>' + '</' + $ck('#<?php echo $id; ?>_headingtag').val() + '>'); focus.find('> .inner').html(html); } / * Method automatically called in ckCloseEditionPopup() if exists */ function ckBeforeCloseEditionPopup() { var textID = '<?php echo $id; ?>_text'; ckRemoveEditorOnTheFly(textID); } function ckSelectEffect(btn) { let effect = btn.getAttribute('data-effect'); focus.find('.titleck-effect').attr('data-effect', effect); $ck('#elementscontainer .ckselecteffect').removeClass('active'); btn.classList.add('active'); } </script>

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.02 | proxy | phpinfo | Settings