File manager

File manager - Edit - /home/jardides/www/Jardi-design/old/plugins/pagebuilderck/tablerow/layouts/edit_tablerow.php

Back
<?php /** * @copyright Copyright (C) 2020 Cédric KEIFLIN alias ced1870 * https://www.template-creator.com * https://www.joomlack.fr * @license GNU/GPL * / defined('_JEXEC') or die; ?> <div id="elementscontainer"> <div class="ckproperty tab_fullscreen" id="tab_tablerow" style="background:#fff;"> <div id="tablerowckbuttons"> <div class="alert alert-info"><?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_ADD_BUTTON_INFOS'); ?></div> <a class="tablerowck-button ckbutton">Button</a> </div> <div id="previewareabloc" style="margin-left:100px;"> <div class="ckstyle"></div> </div> <div class="" style="margin-top: 50px;"> <div id="tablerowckeditorarea" style="display:block;"> <button class="ckbutton ckbutton-primary" onclick="ckSaveEditorToCell()" style="margin: 10px;"><span class="fa fa-save fa-lg"></span> <?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_SAVE_TO_CELL'); ?></button> <textarea id="tablerowck_text" data-id="tablerowck_text"></textarea> </div> <div id="tablerowckbuttonarea" style="display:none;"> <div class="menustylesblocktitle"><?php echo JText::_('CK_BUTTON_OPTIONS') ?></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_TEXT'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>edit-lipsum.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="linktext" id="linktext" size="10" value="" style="width:300px;" onchange="ckSaveEditorToButton()" /></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_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" type="text" name="linkurl" id="linkurl" size="10" value="" style="width:300px;" onchange="ckSaveEditorToButton()" /></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" type="text" name="linkrel" id="linkrel" size="10" value="" style="width:300px;" onchange="ckSaveEditorToButton()" /></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" type="text" name="linkcss" id="linkcss" size="10" value="" style="width:300px;" onchange="ckSaveEditorToButton()" /></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_ONCLICK'); ?></div><div style="float:left;text-align:right;margin:5px 5px 0 0;"><img src="<?php echo $this->imagespath; ?>hand-point-090.png" width="15" height="15" align="top" /></div><div style="float:left;"><input class="inputbox" type="text" name="linkonclick" id="linkonclick" size="10" value="" style="width:300px;" onchange="ckSaveEditorToButton()" /></div><div style="float:left;text-align:left;margin-left:3px;"></div> </div> <div class="clr"></div> <div style="margin: 10px;"> <button class="ckbutton ckbutton-primary" onclick="ckSaveEditorToButton()"><span class="fa fa-save fa-lg"></span> <?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_SAVE_TO_BUTTON'); ?></button> <button class="ckbutton" onclick="ckRemoveButtonFromCell()"><span class="fa fa-remove fa-lg"></span> <?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_REMOVE_BUTTON_FROM_CELL'); ?></button> </div> </div> </div> </div> <div class="menulink" tab="tab_tablerowstyles"><?php echo JText::_('CK_TABLE_STYLES'); ?></div> <div class="tab menustyles ckproperty" id="tab_tablerowstyles"> <div class="ckoption"> <div class="menupanetitle"><?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_RESPONSIVE'); ?></div> <div class="alert alert-info"><?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_RESPONSIVE_INFOS'); ?></div> <div class=""> <span class="ckoption-label"> <img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="16" height="16" /> <?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_RESOLUTION'); ?></span> <span class="ckoption-field"> <input class="inputbox" type="text" value="" name="tablerowckresponsivevalue" id="tablerowckresponsivevalue" /> [px] </span> </div> </div> <div class="clr"></div> <div class="menustylescustom" data-prefix="tablerowck" data-rule=".tablerowck"><?php echo $this->menustyles->createBlocStyles('tablerowck') ?></div> </div> <div class="menulink" tab="tab_colstyles"><?php echo JText::_('CK_ROWS_STYLES'); ?></div> <div class="tab menustyles ckproperty" id="tab_colstyles"> <div class="menustylesblock" style=""> <div class="menustylesblocktitle"><?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_COLS_SPACING'); ?></div> <div class="menustylesblockaccordion"> <div> <span class="ckoption-label"> <img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="16" height="16" /> <?php echo JText::_('CK_HORIZONTAL'); ?> </span> <span class="ckoption-field"> <input class="inputboxfake" type="text" value="" name="tablerowckborderspacingh" id="tablerowckborderspacingh" style="width:100px;" onchange="ckTableSetBorderSpacing()" /> [px] </span> <div class="clr"></div> </div> <div> <span class="ckoption-label"> <img class="ckoption-icon" src="<?php echo $this->imagespath; ?>width.png" width="16" height="16" /> <?php echo JText::_('CK_VERTICAL'); ?> </span> <span class="ckoption-field"> <input class="inputboxfake" type="text" value="" name="tablerowckborderspacingv" id="tablerowckborderspacingv" style="width:100px;" onchange="ckTableSetBorderSpacing()" /> [px] </span> <div class="clr"></div> </div> </div> </div> <div class="menustylescustom" data-prefix="tablerowckrows" data-rule=".tablerowck .tablerowck-row"><?php echo $this->menustyles->createBlocStyles('tablerowckrows', '', $expert = false, $showlinks = false, '', $showtext = false, $showdimensions = true, $showdecoration = true, $showshadow = true, $showmargins = false) ?></div> </div> <div class="menulink" tab="tab_cellstyles"><?php echo JText::_('CK_CELLS_STYLES'); ?></div> <div class="tab menustyles ckproperty" id="tab_cellstyles"> <div class="menustylescustom" data-prefix="tablerowckcells" data-rule=".tablerowck .tablerowck-cell"><?php echo $this->menustyles->createBlocStyles('tablerowckcells', '', $expert = false, $showlinks = false, '', $showtext = false, $showdimensions = true, $showdecoration = true, $showshadow = true, $showmargins = true) ?></div> </div> <div class="menulink" tab="tab_customstyles"><?php echo JText::_('CK_CUSTOM_STYLES'); ?></div> <div class="tab menustyles ckproperty" id="tab_customstyles"> <div class="alert alert-info"><?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_INFOS_CUSTOM_STYLES'); ?></div> <div id="ckcustomstylesbuttons"> </div> <button onclick="ckCreateNewCustomStylesFields()" class="ckbutton ckbutton-primary" id="ckcreatenewstylebutton"><span class="fa fa-plus"></span> <?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_ADD_STYLE'); ?></button> <button onclick="ckRemoveCustomStylesFields()" class="ckbutton ckbutton-danger" id="ckremovestylebutton"><span class="fa fa-minus"></span> <?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_REMOVE_STYLE'); ?></button> <button onclick="ckRenameCustomStylesFields()" class="ckbutton" id="ckrenamestylebutton"><span class="fa fa-edit"></span> <?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_RENAME_STYLE'); ?></button> <div id="customstylesfields"></div> </div> <div class="menulink" tab="tab_buttonstyles"><?php echo JText::_('CK_BUTTON_STYLES'); ?></div> <div class="tab menustyles ckproperty" id="tab_buttonstyles"> <div class="menustylescustom" data-prefix="tablerowckbuttons" data-rule=".tablerowck .tablerowck-button"><?php echo $this->menustyles->createBlocStyles('tablerowckbuttons', '', $expert = false, $showlinks = false, '', $showtext = true, $showdimensions = true, $showdecoration = true, $showshadow = true, $showmargins = true) ?></div> </div> <div class="menulink" tab="tab_buttonhoverstyles"><?php echo JText::_('CK_BUTTON_HOVER_STYLES'); ?></div> <div class="tab menustyles ckproperty" id="tab_buttonhoverstyles"> <div class="menustylescustom" data-prefix="tablerowckbuttonshover" data-rule=".tablerowck .tablerowck-button:hover"><?php echo $this->menustyles->createBlocStyles('tablerowckbuttonshover', '', $expert = false, $showlinks = false, '', $showtext = true, $showdimensions = true, $showdecoration = true, $showshadow = true, $showmargins = true) ?></div> </div> </div> <div id="replaceckstylesfields" class="stylesfieldscustom" style="display:none;" data-prefix="replaceck" data-rule=".replaceck"><?php echo $this->menustyles->createBlocStyles('REPLACECK') ?></div> <div class="clr"></div> <style> #tablerowck_text_ifr { height: 200px !important; } #previewareabloc > .inner { overflow: visible; } #previewareabloc { padding-right: 50px; } .previewareatitle { margin-bottom: 40px; } #previewareabloc .tablerowck .tablerowck-row { position: relative; } #previewareabloc .tablerowck .ckbutton { width: 30px; height: 30px; box-sizing: border-box; background-position: center center; background-repeat: no-repeat; margin: 0 -1px; } #previewareabloc .tablerowck-controlCssStyles .ckbutton { width: auto; } #previewareabloc .tablerowck-cell:empty, #previewareabloc .ckemptycell { height: 35px; box-sizing: border-box; } #previewareabloc .tablerowck-cell.ckhover { border: 2px dashed orange !important; } #previewareabloc .tablerowck-controlMove { background-image: url(<?php echo PAGEBUILDERCK_MEDIA_URI ?>/images/toolbar/arrow_move.png); } #previewareabloc .tablerowck-controlDelete { background-image: url(<?php echo PAGEBUILDERCK_MEDIA_URI ?>/images/toolbar/delete.png); } #previewareabloc .tablerowck-controlCss { background-image: url(<?php echo PAGEBUILDERCK_MEDIA_URI ?>/images/toolbar/styles.png); } #previewareabloc .tablerowck-controlEdit { background-image: url(<?php echo PAGEBUILDERCK_MEDIA_URI ?>/images/toolbar/edit.png); } #previewareabloc .tablerowck-controlAdd { color: #000; font-size: 30px; font-family: Helvetica; line-height: 30px; text-align: center; padding: 0; display: block; } #previewareabloc .tablerowck-head { /position: absolute; top: -40px;/ } #previewareabloc .tablerowck-colcontrol { margin: 3px; position: relative; } #previewareabloc .tablerowck-rowcontrol { margin: 3px; position: absolute; /top: 0px;/ left: -100px; } #previewareabloc .tablerowck-rowcontrolAdd { bottom: -40px; position: absolute; } #previewareabloc .tablerowck-colcontrolAdd { position: absolute; right: -30px; top: 0; } #previewareabloc .tablerowck-cell { position: relative; } #previewareabloc .tablerowck-cellEdition { position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0,0,0, 0.3); text-align: center; min-height: 35px; vertical-align: middle; } #previewareabloc .tablerowck-controlCssStyles { position: absolute; left: 2px; top: 30px; width: 200px; background: #f3f3f3; border: 1px solid #bbb; z-index: 9; text-align: left; padding: 2px; } </style> <script language="javascript" type="text/javascript"> var editorId; function ckLoadEditionPopup() { var focus = $ck('.editfocus'); focus.attr('data-previewedition', '1'); var blocid = focus.attr('id'); $ck('#previewareabloc').append(focus.find('.tablerowck')[0].outerHTML); // $ck('#previewareabloc .ckstyle').html(focus.find('.ckstyle').html()); var customstyles = focus.attr('customstyles'); if (customstyles) customstyles = JSON.parse(customstyles); if (customstyles) { for (var key in customstyles) { ckCreateNewCustomStylesFields(key, customstyles[key], true); } $ck('.stylesfieldscustom').hide(); } ckFillEditionPopup(focus.attr('id')); // Add controls to the table var table = '#previewareabloc > .tablerowck'; ckRemoveTableEdition($ck(table)); ckAddEditionToTable(table); ckMakeTableColsSortable(table); ckMakeTableRowsSortable(table); ckSetEqualCols($ck(table)); ckMakeButtonsDraggable(); $ck(table + ' .tablerowck-row .tablerowck-cell').each(function() { ckAddCellEdition(this); }); // set the responsive resolution var res = (focus.attr('data-responsive') == undefined \|\| focus.attr('data-responsive') == '') ? '524' : focus.attr('data-responsive'); $ck('#tablerowckresponsivevalue').val(res); // create the editor ckLoadEditorOnTheFly('tablerowck_text'); editorId = document.querySelector('[data-id="tablerowck_text"]').id; } function ckBeforeSaveEditionPopup() { // $ck('#replaceckstylesfields').detach(); ckFixTableButtons(); ckUpdatePreviewArea(); var focus = $ck('.editfocus'); var blocid = focus.attr('id'); var styles = $ck('#previewareabloc > .ckstyle').html(); var re = new RegExp('previewareabloc', 'g'); styles = styles.replace(re, blocid); focus.find('> .ckstyle').html(styles); } // Fix issue with buttons that are made with DIV function ckFixTableButtons() { $ck('#previewareabloc .tablerowck-button').each(function() { if (this.tagName.toLowerCase() == 'div') { this.outerHTML = this.outerHTML.replace('div', 'a'); } }); } function ckUpdatePreviewArea() { var focus = $ck('.editfocus'); // save the custom style list on the focused item var customstyles = new Object(); $ck('.stylesfieldsbutton').each(function() { customstyles[$ck(this).attr('data-prefix')] = ($ck(this).attr('data-text') ? $ck(this).attr('data-text') : $ck(this).text()); }); customstyles = JSON.stringify(customstyles); focus.attr('customstyles', customstyles); var table = $ck('#previewareabloc .tablerowck'); // save the table in the page focus.find('.tablerowck')[0].outerHTML = table[0].outerHTML; ckRemoveTableEdition(focus); ckResponsiveValue = $ck('#tablerowckresponsivevalue').val() ? $ck('#tablerowckresponsivevalue').val() : '524'; focus.attr('data-responsive', ckResponsiveValue); } function ckSaveInlineEditionPopup() { ckBeforeSaveEditionPopup(); } // feature removed and added in the frontend when rendering the table /function ckAfterSaveEditionPopup() { // save the resolution for the responsive and add the css var focus = $ck('.editfocus'); // var res = $ck('#tablerowckresponsivevalue').val(); focus.attr('data-responsive', ckResponsiveValue); var responsiveCss = '@media screen and (max-width: ' + ckTestUnit(ckResponsiveValue) + ') {' + '#' + focus.attr('id') + ' .tablerowck-row {' + 'display: block !important;' + 'width: inherit !important;' + '}' + '}'; focus.find('.ckstyle style').append(responsiveCss); }*/ function ckBeforeCloseEditionPopup() { var focus = $ck('.editfocus'); focus.removeAttr('data-previewedition'); ckRemoveEditorOnTheFly('tablerowck_text'); // var table = $ck('#previewareabloc .tablerowck'); // ckRemoveTableEdition(table); } function ckAddCellEdition(cell) { $cell = $ck(cell); var celleditionbuttons = '<div class="tablerowck-controlEdit ckbutton"></div>' +'<div class="tablerowck-controlCss ckbutton" onclick="ckShowTableckCssOptions(this)"></div>'; $cell.on('mouseenter', function() { $this = $ck(this); if (! $this.find('.tablerowck-cellEdition').length) { if ($this.text().trim() == '') $this.addClass('ckemptycell'); $this.append('<div class="tablerowck-cellEdition" contenteditable="false">'+celleditionbuttons+'</div>'); $this.find('.tablerowck-controlEdit').click(function() { ckEditCell($this); }); } }) $cell.on('mouseleave', function() { $this = $ck(this); $this.find('.tablerowck-cellEdition').remove(); $this.removeClass('ckemptycell'); }); } function ckEditCell(cell) { $cell = $ck(cell); if ($cell.find('.tablerowck-button').length) { ckEditButtonInCell(cell); return; } $ck('#tablerowckeditorarea').show(); $ck('#tablerowckbuttonarea').hide(); $ck('.tablerowckfocus').removeClass('tablerowckfocus'); $cell.addClass('tablerowckfocus'); $cell.find('.tablerowck-cellEdition').remove(); // $ck('.menulink[tab="tab_tablerow"]').click(); ckSetTableContentEditor($cell.html()); } function ckEditButtonInCell(cell) { $cell = $ck(cell); $ck('#tablerowckeditorarea').hide(); $ck('#tablerowckbuttonarea').show(); $ck('.tablerowckfocus').removeClass('tablerowckfocus'); $cell.addClass('tablerowckfocus'); $cell.find('.tablerowck-cellEdition').remove(); $ck('.menulink[tab="tab_tablerow"]').click(); ckGetCellButton($cell); } function ckGetCellButton(cell) { $cell = $ck(cell); var button = $cell.find('.tablerowck-button'); if (button.length > 1) button = button.first(); var buttonClass = button.attr('class').replace('tablerowck-button','').replace('uick-draggable','').trim(); $ck('#linktext').val(button.text()); $ck('#linkurl').val(button.attr('href')); $ck('#linkrel').val(button.attr('rel')); $ck('#linkcss').val(buttonClass); $ck('#linkonclick').val(button.attr('onclick')); } function ckSetCellButton(cell) { $cell = $ck(cell); var button = $cell.find('.tablerowck-button'); if (button.length > 1) button = button.first(); var buttonClass = $ck('#linkcss').val() + ' tablerowck-button'; button.text(ckCleanFieldValue($ck('#linktext').val())); button.attr('href', ckCleanFieldValue($ck('#linkurl').val())); button.attr('rel', ckCleanFieldValue($ck('#linkrel').val())); button.attr('class', ckCleanFieldValue(buttonClass)); button.attr('onclick', ckCleanFieldValue($ck('#linkonclick').val())); } function ckCleanFieldValue(val) { return val.replace(/"/g, '\''); } function ckShowCustomStylesFields(prefix, btn, withoutEvents) { $ck('.stylesfieldscustom').hide(); $ck('.stylesfieldsbutton').removeClass('active'); $ck(btn).addClass('active'); if (! $ck('#stylesfields' + prefix).length) ckAddCustomStylesFields(prefix, !withoutEvents); $ck('#stylesfields' + prefix).show(); } function ckCreateNewCustomStylesFields(prefix, text, withoutEvents) { if (! prefix) { var index = ckGetNewStyleId(); var prefix = 'style' + index; var text = 'style' + index; } var newbutton = '<div data-prefix="'+prefix+'" data-rule=".tablerowck .'+prefix+'" onclick="ckShowCustomStylesFields(\''+prefix+'\', this)" class="ckbutton stylesfieldsbutton menustylescustom">'+text+'</div>'; // $ck('#ckcreatenewstylebutton').before(newbutton); $ck('#ckcustomstylesbuttons').append(newbutton); ckMakeCustomStylesButtonsSortable(); ckShowCustomStylesFields(prefix, newbutton, withoutEvents); } function ckMakeCustomStylesButtonsSortable() { $ck('#ckcustomstylesbuttons').sortable({ items: ".stylesfieldsbutton", helper: "clone", // handle: ".tablerowck-controlMove", // forcePlaceholderSize: true, // tolerance: "cursor", // placeholder: "placeholderck", start: function(e, ui){ }, stop: function( event, ui ) { }, update: function ( event, ui ) { ckGetPreviewAreastylescss('previewareabloc', $ck('#elementscontainer'), $ck('.editfocus').attr('id'), '1'); // ckUpdatePreviewArea(); } }); } function ckRemoveCustomStylesFields() { if (! $ck('.stylesfieldsbutton.active').length) { alert('<?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_FIRST_SELECT_STYLE', true); ?>'); return; } if (! confirm('<?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_CONFIRM_REMOVE_STYLE', true); ?>') ) return; var prefix = $ck('.stylesfieldsbutton.active').attr('data-prefix'); $ck('.stylesfieldsbutton.active').remove(); $ck('.stylesfieldscustom[data-prefix="' + prefix + '"]').remove(); $ck('.tablerowck .tablerowck-row').removeClass(prefix); $ck('.tablerowck .tablerowck-cell').removeClass(prefix); } function ckRenameCustomStylesFields() { var button = $ck('.stylesfieldsbutton.active'); if (! button.length) { alert('<?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_FIRST_SELECT_STYLE', true); ?>'); return; } var newname = prompt('<?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_NEW_STYLE_NAME', true); ?>', button.text()); if (newname) { newname = newname.replace(/([^a-z0-9]+)/gi, '-'); button.attr('data-text', newname).text(newname); } } function ckGetNewStyleId() { var i = 1; while ($ck('#stylesfieldsstyle' + i).length && i < 1000) { i++; } return i; } function ckAddCustomStylesFields(prefix, isNew) { if (! isNew) isNew = false; var re = new RegExp(/REPLACECK/, "g"); // $ck('#tab_columnstyles').html($ck('#tab_columnstyles').html().replace(re, prefix)); var newFields = $ck('#replaceckstylesfields').clone(); newFields.attr('id', 'stylesfields' + prefix).attr('data-prefix', prefix).attr('data-rule', '.tablerowck .' + prefix); newFields.html(newFields.html().replace(re, prefix)); $ck('#customstylesfields').append(newFields); var focus = $ck('.editfocus'); if (isNew) ckTableAddEventOnFields(newFields, focus.attr('id')); ckInitColorPickers(newFields); ckInitMenustylesAccordion(newFields); } function ckTableAddEventOnFields(fieldsarea, blocid) { // call the general styling process when a new field is changed $ck('.inputbox:not(.colorPicker)', fieldsarea).change(function() { ckGetPreviewAreastylescss('previewareabloc', $ck('#elementscontainer'), blocid, true); // ckUpdatePreviewArea(); }); $ck('.colorPicker,.inputbox[type=radio]', fieldsarea).blur(function() { ckGetPreviewAreastylescss('previewareabloc', $ck('#elementscontainer'), blocid, true); // ckUpdatePreviewArea(); }); } function ckAddEditionToTable(tableEl) { tableEl = $ck(tableEl); var controlColHtml = ckGetColControls(); var controlRowHtml = ckGetRowControls(); $ck('.tablerowck-row', tableEl).each(function() { $row = $ck(this); $row.prepend(controlRowHtml); }); $ck('.tablerowck-body', tableEl).prepend('<tr class="tablerowck-head"></tr>'); var tablehead = $ck('.tablerowck-head', tableEl); var numbercellsinrow = $ck('.tablerowck-row').first().find('.tablerowck-cell').length; tablehead.append('<td></td>'); // for empty columns to load row controls for (var i=0; i<numbercellsinrow; i++) { tablehead.append(controlColHtml); } $ck('.tablerowck-body', tableEl).after('<div class="tablerowck-controlAdd tablerowck-colcontrolAdd ckbutton">+</div>'); $ck('.tablerowck-body', tableEl).after('<div class="tablerowck-controlAdd tablerowck-rowcontrolAdd ckbutton">+</div>'); $ck('.tablerowck-rowcontrolAdd', tableEl).click(function() { $row = tableEl.find('.tablerowck-row').last().clone(); $row.insertAfter(tableEl.find('.tablerowck-row').last()).find('.tablerowck-cell').empty(); $row.find('.tablerowck-cell').each(function() { ckAddCellEdition(this); ckMakeCellsDraggableForButton(); }); // ckSetEqualCols(tableEl); }); $ck('.tablerowck-colcontrolAdd', tableEl).click(function() { tableEl.find('.tablerowck-row').each(function() { $row = $ck(this); $row.append('<td class="tablerowck-cell"></td>'); $row.find('.tablerowck-cell').each(function() { ckAddCellEdition(this); ckMakeCellsDraggableForButton(); }); }); tablehead.append(ckGetColControls()); }); } function ckSetEqualCols(tableEl) { // tableEl.find('.tablerowck-row').width(parseFloat(100 / tableEl.find('.tablerowck-row').length) + '%'); } function ckGetRowControls() { var controlColHtml = '<td class="tablerowck-rowcontrol">' +'<div class="tablerowck-controlDelete ckbutton" onclick="ckTableRowDelete(this)"></div>' +'<div class="tablerowck-controlCss ckbutton" onclick="ckShowTableckCssOptions(this)"></div>' +'<div class="tablerowck-controlMove ckbutton"></div>' +'</td>'; return controlColHtml; } function ckGetColControls() { var controlRowHtml = '<td class="tablerowck-colcontrol">' +'<div class="tablerowck-controlDelete ckbutton" onclick="ckTableColDelete(this)"></div>' +'<div class="tablerowck-controlCss ckbutton" onclick="ckShowTableckCssOptions(this)"></div>' +'<div class="tablerowck-controlMove ckbutton"></div>' +'</td>'; return controlRowHtml; } function ckShowTableckCssOptions(btn) { var html = '<div class="tablerowck-controlCssStyles"><?php echo JText::_('PLG_PAGEBUILDERCK_TABLEROW_NO_CUSTOM_STYLES', true); ?></div>'; $ck('.tablerowck-controlCssStyles').remove(); if ($ck(btn).hasClass('active')) { $ck(btn).removeClass('active'); } else { $ck('.tablerowck-controlCss').removeClass('active'); $ck(btn).addClass('active'); $ck(btn).append(html); var btnstyleslist = $ck(btn).find('.tablerowck-controlCssStyles'); if ($ck('.stylesfieldsbutton').length) btnstyleslist.empty(); $ck('.stylesfieldsbutton').each(function() { var prefix = $ck(this).attr('data-prefix'); var active = 'active'; var target = ckGetButtonTarget(btn); target.each(function() { if (! $ck(this).hasClass(prefix)) active = ''; }); var button = '<button class="ckbutton ' + active + '" data-prefix="' + prefix + '" onclick="ckTableToggleStyle(this)">' + $ck(this).text() + '</button>'; btnstyleslist.append(button); }); } } function ckTableToggleStyle(btn) { var target = ckGetButtonTarget(btn); var style = $ck(btn).attr('data-prefix'); target.each(function() { $this = $ck(this); if ($this.hasClass(style)) { $this.removeClass(style); $ck(btn).removeClass('active'); } else { $this.addClass(style); $ck(btn).addClass('active'); } }); } function ckGetButtonTarget(btn) { if ($ck(btn).parents('.tablerowck-colcontrol').length) { var control = $ck($ck(btn).parents('.tablerowck-colcontrol')[0]); var index = control.index() - 1; var target = $ck('#previewareabloc .tablerowck .tablerowck-row').map(function(){ return $ck(this).find('.tablerowck-cell').eq(index); }); } else if ($ck(btn).parents('.tablerowck-rowcontrol').length) { var target = $ck($ck(btn).parents('.tablerowck-row')[0]).find('.tablerowck-cell'); } else if ($ck(btn).parents('.tablerowck-cellEdition').length) { var target = $ck($ck(btn).parents('.tablerowck-cell')[0]); } return target; } function ckTableColDelete(btn) { if (! confirm('<?php echo JText::_('CK_CONFIRM_DELETE', true); ?>')) return; var colindex = $ck(btn).parent().index() - 1; var table = $ck($ck(btn).parents('.tablerowck')[0]); table.find('.tablerowck-row').each(function() { $row = $ck(this); $row.find('.tablerowck-cell').eq(colindex).remove(); }); table.find('.tablerowck-head .tablerowck-cell').eq(colindex).remove(); $ck($ck(btn).parents('.tablerowck-colcontrol')[0]).remove(); } function ckTableRowDelete(btn) { if (! confirm('<?php echo JText::_('CK_CONFIRM_DELETE', true); ?>')) return; var row = $ck($ck(btn).parents('.tablerowck-row')[0]); var tableEl = $ck($ck(btn).parents('.tablerowck')[0]); row.remove(); ckSetEqualCols(tableEl); } function ckMakeTableRowsSortable(tableEl) { $ck(tableEl).sortable({ items: ".tablerowck-row", helper: "clone", handle: ".tablerowck-controlMove", forcePlaceholderSize: true, tolerance: "pointer", placeholder: "placeholderck", start: function(e, ui){ }, stop: function( event, ui ) { }, }); } function ckMakeTableColsSortable(tableEl) { $ck( tableEl + " .tablerowck-head" ).sortable({ items: ".tablerowck-colcontrol", helper: "clone", handle: ".tablerowck-controlMove", forcePlaceholderSize: true, tolerance: "pointer", placeholder: "placeholderck", start: function(e, ui){ $ck(ui.item).attr('data-from', $ck(ui.item).parent().find('.tablerowck-colcontrol').index($ck(ui.item))); }, update: function( event, ui ) { var old_index = $ck(ui.item).attr('data-from'); var new_index = $ck(ui.item).parent().find('.tablerowck-colcontrol').index($ck(ui.item)); $ck('.tablerowck-row', $ck(tableEl)).each(function() { if (new_index > old_index) { $ck(this).find('.tablerowck-cell').eq(old_index).insertAfter($ck(this).find('.tablerowck-cell').eq(new_index)); } else if (old_index > new_index) { $ck(this).find('.tablerowck-cell').eq(old_index).insertBefore($ck(this).find('.tablerowck-cell').eq(new_index)); } }); // ckUpdatePreviewArea(); } }); } function ckRemoveTableEdition(table) { table.find('.tablerowck-head').remove(); table.find('.tablerowck-colcontrol').remove(); table.find('.tablerowck-rowcontrol').remove(); table.find('.tablerowck-controlAdd').remove(); table.find('.tablerowckfocus').removeClass('tablerowckfocus'); table.find('.tablerowck-row').css('display', ''); } function ckSaveEditorToCell() { $cell = $ck('#previewareabloc .tablerowckfocus'); var content = ckGetTableContentEditor(); content = ckEditorToContent(content); $cell.html(content); } function ckSaveEditorToButton() { $cell = $ck('#previewareabloc .tablerowckfocus'); ckSetCellButton($cell); } function ckRemoveButtonFromCell() { if (! confirm('<?php echo JText::_('CK_CONFIRM_DELETE', true); ?>')) return; $cell = $ck('#previewareabloc .tablerowckfocus'); $cell.find('.tablerowck-button').remove(); } function ckGetTableContentEditor() { ckSaveEditorOnTheFly(editorId); return $ck('#' + editorId).val(); } function ckSetTableContentEditor(text) { text = ckContentToEditor(text); tinymce.get(editorId).setContent(text, {format : 'raw'}); } function ckTableSetBorderSpacing() { var spacingH = $ck('#tablerowckborderspacingh').val() != '' ? ckTestUnit($ck('#tablerowckborderspacingh').val()) : '0'; var spacingV = $ck('#tablerowckborderspacingv').val() != '' ? ckTestUnit($ck('#tablerowckborderspacingv').val()) : '0'; $ck('#previewareabloc .tablerowck').css('border-spacing', spacingH + ' ' + spacingV); } function ckMakeButtonsDraggable() { // make the buttons draggable $ck('#tablerowckbuttons .tablerowck-button').draggable({ // connectToSortable: ".blockck .innercontent", helper: "clone", // appendTo: "#previewareabloc .tablerowck-cell", zIndex: "999999", tolerance: "pointer", start: function( event, ui ){ }, stop: function( event, ui ){ } }); ckMakeCellsDraggableForButton(); } function ckMakeCellsDraggableForButton() { // make the cells droppable for the buttons $ck('#previewareabloc .tablerowck-cell').droppable({ hoverClass: "ckhover", accept: ".tablerowck-button", drop: function( event, ui ) { $ck(this).empty(); ui.draggable.clone().removeClass('ckbutton').removeClass('uick-draggable').appendTo( this ); } }) } </script>

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