File manager

File manager - Edit - /home/jardides/www/Jardi-design/old/plugins/pagebuilderck/table/layouts/edit_table.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_table" style="background:#fff;"> <div id="tableckbuttons"> <div class="alert alert-info"><?php echo JText::_('PLG_PAGEBUILDERCK_TABLE_ADD_BUTTON_INFOS'); ?></div> <a class="tableck-button ckbutton">Button</a> </div> <div class="previewareatitle"><?php echo JText::_('CK_PREVIEWAREA_TITLE'); ?></div> <div id="previewareabloc" style="margin-left:100px;"> <div class="ckstyle"></div> </div> <div class="" style="margin-top: 50px;"> <div id="tableckeditorarea" 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_TABLE_SAVE_TO_CELL'); ?></button> <textarea id="tableck_text" data-id="tableck_text"></textarea> </div> <div id="tableckbuttonarea" 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_TABLE_SAVE_TO_BUTTON'); ?></button> <button class="ckbutton" onclick="ckRemoveButtonFromCell()"><span class="fa fa-remove fa-lg"></span> <?php echo JText::_('PLG_PAGEBUILDERCK_TABLE_REMOVE_BUTTON_FROM_CELL'); ?></button> </div> </div> </div> </div> <div class="menulink" tab="tab_tablestyles"><?php echo JText::_('CK_TABLE_STYLES'); ?></div> <div class="tab menustyles ckproperty" id="tab_tablestyles"> <div class="ckoption"> <div class="menupanetitle"><?php echo JText::_('PLG_PAGEBUILDERCK_TABLE_RESPONSIVE'); ?></div> <div class="alert alert-info"><?php echo JText::_('PLG_PAGEBUILDERCK_TABLE_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_TABLE_RESOLUTION'); ?></span> <span class="ckoption-field"> <input class="inputbox" type="text" value="" name="tableckresponsivevalue" id="tableckresponsivevalue" /> [px] </span> </div> </div> <div class="clr"></div> <div class="menustylescustom" data-prefix="tableck" data-rule=".tableck"><?php echo $this->menustyles->createBlocStyles('tableck') ?></div> </div> <div class="menulink" tab="tab_colstyles"><?php echo JText::_('CK_COLUMNS_STYLES'); ?></div> <div class="tab menustyles ckproperty" id="tab_colstyles"> <div class="menustylesblock" style=""> <div class="menustylesblocktitle"><?php echo JText::_('PLG_PAGEBUILDERCK_TABLE_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="tableckborderspacingh" id="tableckborderspacingh" 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="tableckborderspacingv" id="tableckborderspacingv" style="width:100px;" onchange="ckTableSetBorderSpacing()" /> [px] </span> <div class="clr"></div> </div> </div> </div> <div class="menustylescustom" data-prefix="tableckcols" data-rule=".tableck .tableck-col"><?php echo $this->menustyles->createBlocStyles('tableckcols', '', $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="tableckcells" data-rule=".tableck .tableck-cell"><?php echo $this->menustyles->createBlocStyles('tableckcells', '', $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_TABLE_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_TABLE_ADD_STYLE'); ?></button> <button onclick="ckRemoveCustomStylesFields()" class="ckbutton ckbutton-danger" id="ckremovestylebutton"><span class="fa fa-minus"></span> <?php echo JText::_('PLG_PAGEBUILDERCK_TABLE_REMOVE_STYLE'); ?></button> <button onclick="ckRenameCustomStylesFields()" class="ckbutton" id="ckrenamestylebutton"><span class="fa fa-edit"></span> <?php echo JText::_('PLG_PAGEBUILDERCK_TABLE_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="tableckbuttons" data-rule=".tableck .tableck-button"><?php echo $this->menustyles->createBlocStyles('tableckbuttons', '', $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="tableckbuttonshover" data-rule=".tableck .tableck-button:hover"><?php echo $this->menustyles->createBlocStyles('tableckbuttonshover', '', $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> #tableck_text_ifr { height: 200px !important; } #previewareabloc > .inner { overflow: visible; } #previewareabloc { padding-right: 50px; } .previewareatitle { margin-bottom: 40px; } #previewareabloc .tableck .ckbutton { width: 30px; height: 30px; box-sizing: border-box; background-position: center center; background-repeat: no-repeat; margin: 0 -1px; } #previewareabloc .tableck-controlCssStyles .ckbutton { width: auto; } #previewareabloc .tableck-cell:empty, #previewareabloc .ckemptycell { height: 35px; box-sizing: border-box; } #previewareabloc .tableck-cell.ckhover { border: 2px dashed orange !important; } #previewareabloc .tableck-controlMove { background-image: url(<?php echo PAGEBUILDERCK_MEDIA_URI ?>/images/toolbar/arrow_move.png); } #previewareabloc .tableck-controlDelete { background-image: url(<?php echo PAGEBUILDERCK_MEDIA_URI ?>/images/toolbar/delete.png); } #previewareabloc .tableck-controlCss { background-image: url(<?php echo PAGEBUILDERCK_MEDIA_URI ?>/images/toolbar/styles.png); } #previewareabloc .tableck-controlEdit { background-image: url(<?php echo PAGEBUILDERCK_MEDIA_URI ?>/images/toolbar/edit.png); } #previewareabloc .tableck-controlAdd { color: #000; font-size: 30px; font-family: Helvetica; line-height: 30px; text-align: center; padding: 0; display: block; } #previewareabloc .tableck-head { position: absolute; left: -100px; top: 5px; } #previewareabloc .tableck-rowcontrol { margin: 3px; position: relative; } #previewareabloc .tableck-colcontrol { margin: 3px; position: absolute; top: -40px; } #previewareabloc .tableck-rowcontrolAdd { bottom: -40px; position: absolute; } #previewareabloc .tableck-colcontrolAdd { position: absolute; right: -30px; top: 0; } #previewareabloc .tableck-cell { position: relative; } #previewareabloc .tableck-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 .tableck-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'); var blocid = focus.attr('id'); $ck('#previewareabloc').append(focus.find('.tableck')[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 > .tableck'; ckRemoveTableEdition($ck(table)); ckAddEditionToTable(table); ckMakeTableColsSortable(table); ckMakeTableRowsSortable(table); ckSetEqualCols($ck(table)); ckMakeButtonsDraggable(); $ck(table + ' .tableck-col .tableck-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('#tableckresponsivevalue').val(res); // create the editor ckLoadEditorOnTheFly('tableck_text'); editorId = document.querySelector('[data-id="tableck_text"]').id; } function ckBeforeSaveEditionPopup() { $ck('#replaceckstylesfields').remove(); 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 .tableck-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 .tableck'); ckRemoveTableEdition(table); // save the table in the page focus.find('.tableck')[0].outerHTML = table[0].outerHTML; ckResponsiveValue = $ck('#tableckresponsivevalue').val() ? $ck('#tableckresponsivevalue').val() : '524'; focus.attr('data-responsive', ckResponsiveValue); } function ckSaveInlineEditionPopup() { ckBeforeSaveEditionPopup(); } // feature removed and added in the frontend when rendering the table function ckBeforeCloseEditionPopup() { ckRemoveEditorOnTheFly('tableck_text'); } function ckAddCellEdition(cell) { $cell = $ck(cell); var celleditionbuttons = '<div class="tableck-controlEdit ckbutton"></div>' +'<div class="tableck-controlCss ckbutton" onclick="ckShowTableckCssOptions(this)"></div>'; $cell.on('mouseenter', function() { $this = $ck(this); if (! $this.find('.tableck-cellEdition').length) { if ($this.text().trim() == '') $this.addClass('ckemptycell'); $this.append('<div class="tableck-cellEdition" contenteditable="false">'+celleditionbuttons+'</div>'); $this.find('.tableck-controlEdit').click(function() { ckEditCell($this); }); } }) $cell.on('mouseleave', function() { $this = $ck(this); $this.find('.tableck-cellEdition').remove(); $this.removeClass('ckemptycell'); }); } function ckEditCell(cell) { $cell = $ck(cell); if ($cell.find('.tableck-button').length) { ckEditButtonInCell(cell); return; } $ck('#tableckeditorarea').show(); $ck('#tableckbuttonarea').hide(); $ck('.tableckfocus').removeClass('tableckfocus'); $cell.addClass('tableckfocus'); $cell.find('.tableck-cellEdition').remove(); // $ck('.menulink[tab="tab_table"]').click(); ckSetTableContentEditor($cell.html()); } function ckEditButtonInCell(cell) { $cell = $ck(cell); $ck('#tableckeditorarea').hide(); $ck('#tableckbuttonarea').show(); $ck('.tableckfocus').removeClass('tableckfocus'); $cell.addClass('tableckfocus'); $cell.find('.tableck-cellEdition').remove(); $ck('.menulink[tab="tab_table"]').click(); ckGetCellButton($cell); } function ckGetCellButton(cell) { $cell = $ck(cell); var button = $cell.find('.tableck-button'); if (button.length > 1) button = button.first(); var buttonClass = button.attr('class').replace('tableck-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('.tableck-button'); if (button.length > 1) button = button.first(); var buttonClass = $ck('#linkcss').val() + ' tableck-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=".tableck .'+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: ".tableck-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_TABLE_FIRST_SELECT_STYLE', true); ?>'); return; } if (! confirm('<?php echo JText::_('PLG_PAGEBUILDERCK_TABLE_CONFIRM_REMOVE_STYLE', true); ?>') ) return; var prefix = $ck('.stylesfieldsbutton.active').attr('data-prefix'); $ck('.stylesfieldsbutton.active').remove(); $ck('.stylesfieldscustom[data-prefix="' + prefix + '"]').remove(); $ck('.tableck .tableck-col').removeClass(prefix); $ck('.tableck .tableck-cell').removeClass(prefix); } function ckRenameCustomStylesFields() { var button = $ck('.stylesfieldsbutton.active'); if (! button.length) { alert('<?php echo JText::_('PLG_PAGEBUILDERCK_TABLE_FIRST_SELECT_STYLE', true); ?>'); return; } var newname = prompt('<?php echo JText::_('PLG_PAGEBUILDERCK_TABLE_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', '.tableck .' + 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(); $ck('.tableck-col', tableEl).each(function() { $row = $ck(this); $row.prepend(controlColHtml); }); $ck('.tableck-body', tableEl).before('<header class="tableck-head"></header>'); var controlRowHtml = ckGetRowControls(); var tablehead = $ck('.tableck-head', tableEl); var numbercellsinrow = $ck('.tableck-col').first().find('.tableck-cell').length; for (var i=0; i<numbercellsinrow; i++) { tablehead.append(controlRowHtml); } $ck('.tableck-body', tableEl).after('<div class="tableck-controlAdd tableck-colcontrolAdd ckbutton">+</div>'); $ck('.tableck-body', tableEl).after('<div class="tableck-controlAdd tableck-rowcontrolAdd ckbutton">+</div>'); $ck('.tableck-colcontrolAdd', tableEl).click(function() { $row = tableEl.find('.tableck-col').last().clone(); $row.insertAfter(tableEl.find('.tableck-col').last()).find('.tableck-cell').empty(); $row.find('.tableck-cell').each(function() { ckAddCellEdition(this); ckMakeCellsDraggableForButton(); }); ckSetEqualCols(tableEl); }); $ck('.tableck-rowcontrolAdd', tableEl).click(function() { tableEl.find('.tableck-col').each(function() { $row = $ck(this); $row.append('<div class="tableck-cell"></div>'); $row.find('.tableck-cell').each(function() { ckAddCellEdition(this); ckMakeCellsDraggableForButton(); }); }); tablehead.append(ckGetRowControls()); }); } function ckSetEqualCols(tableEl) { tableEl.find('.tableck-col').width(parseFloat(100 / tableEl.find('.tableck-col').length) + '%'); } function ckGetRowControls() { var controlColHtml = '<div class="tableck-rowcontrol">' +'<div class="tableck-controlDelete ckbutton" onclick="ckTableRowDelete(this)"></div>' +'<div class="tableck-controlCss ckbutton" onclick="ckShowTableckCssOptions(this)"></div>' +'<div class="tableck-controlMove ckbutton"></div>' +'</div>'; return controlColHtml; } function ckGetColControls() { var controlRowHtml = '<div class="tableck-colcontrol">' +'<div class="tableck-controlDelete ckbutton" onclick="ckTableColDelete(this)"></div>' +'<div class="tableck-controlCss ckbutton" onclick="ckShowTableckCssOptions(this)"></div>' +'<div class="tableck-controlMove ckbutton"></div>' +'</div>'; return controlRowHtml; } function ckShowTableckCssOptions(btn) { var html = '<div class="tableck-controlCssStyles"><?php echo JText::_('PLG_PAGEBUILDERCK_TABLE_NO_CUSTOM_STYLES', true); ?></div>'; $ck('.tableck-controlCssStyles').remove(); if ($ck(btn).hasClass('active')) { $ck(btn).removeClass('active'); } else { $ck('.tableck-controlCss').removeClass('active'); $ck(btn).addClass('active'); $ck(btn).append(html); var btnstyleslist = $ck(btn).find('.tableck-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('.tableck-rowcontrol').length) { var control = $ck($ck(btn).parents('.tableck-rowcontrol')[0]); var index = control.index(); var target = $ck('#previewareabloc .tableck .tableck-col').map(function(){ return $ck(this).find('.tableck-cell').eq(index); }); } else if ($ck(btn).parents('.tableck-colcontrol').length) { var target = $ck($ck(btn).parents('.tableck-col')[0]); } else if ($ck(btn).parents('.tableck-cellEdition').length) { var target = $ck($ck(btn).parents('.tableck-cell')[0]); } return target; } function ckTableRowDelete(btn) { if (! confirm('<?php echo JText::_('CK_CONFIRM_DELETE', true); ?>')) return; var colindex = $ck(btn).parent().index(); var table = $ck($ck(btn).parents('.tableck')[0]); table.find('.tableck-col').each(function() { $row = $ck(this); $row.find('.tableck-cell').eq(colindex).remove(); }); table.find('.tableck-head .tableck-cell').eq(colindex).remove(); $ck($ck(btn).parents('.tableck-rowcontrol')[0]).remove(); } function ckTableColDelete(btn) { if (! confirm('<?php echo JText::_('CK_CONFIRM_DELETE', true); ?>')) return; var col = $ck($ck(btn).parents('.tableck-col')[0]); var tableEl = $ck($ck(btn).parents('.tableck')[0]); col.remove(); ckSetEqualCols(tableEl); } function ckMakeTableColsSortable(tableEl) { $ck(tableEl).sortable({ items: ".tableck-col", helper: "clone", handle: ".tableck-controlMove", forcePlaceholderSize: true, tolerance: "intersect", placeholder: "placeholderck", start: function(e, ui){ }, stop: function( event, ui ) { }, }); } function ckMakeTableRowsSortable(tableEl) { $ck( tableEl + " .tableck-head" ).sortable({ items: ".tableck-rowcontrol", helper: "clone", handle: ".tableck-controlMove", forcePlaceholderSize: true, tolerance: "pointer", placeholder: "placeholderck", start: function(e, ui){ $ck(ui.item).attr('data-from', $ck(ui.item).parent().find('.tableck-rowcontrol').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('.tableck-rowcontrol').index($ck(ui.item)); $ck('.tableck-col', $ck(tableEl)).each(function() { if (new_index > old_index) { $ck(this).find('.tableck-cell').eq(old_index).insertAfter($ck(this).find('.tableck-cell').eq(new_index)); } else if (old_index > new_index) { $ck(this).find('.tableck-cell').eq(old_index).insertBefore($ck(this).find('.tableck-cell').eq(new_index)); } }); // ckUpdatePreviewArea(); } }); } function ckRemoveTableEdition(table) { table.find('.tableck-head').remove(); table.find('.tableck-colcontrol').remove(); table.find('.tableck-controlAdd').remove(); table.find('.tableckfocus').removeClass('tableckfocus'); table.find('.tableck-col').css('display', ''); } function ckSaveEditorToCell() { $cell = $ck('#previewareabloc .tableckfocus'); var content = ckGetTableContentEditor(); content = ckEditorToContent(content); $cell.html(content); } function ckSaveEditorToButton() { $cell = $ck('#previewareabloc .tableckfocus'); ckSetCellButton($cell); } function ckRemoveButtonFromCell() { if (! confirm('<?php echo JText::_('CK_CONFIRM_DELETE', true); ?>')) return; $cell = $ck('#previewareabloc .tableckfocus'); $cell.find('.tableck-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('#tableckborderspacingh').val() != '' ? ckTestUnit($ck('#tableckborderspacingh').val()) : '0'; var spacingV = $ck('#tableckborderspacingv').val() != '' ? ckTestUnit($ck('#tableckborderspacingv').val()) : '0'; $ck('#previewareabloc .tableck').css('border-spacing', spacingH + ' ' + spacingV); } function ckMakeButtonsDraggable() { // make the buttons draggable $ck('#tableckbuttons .tableck-button').draggable({ // connectToSortable: ".blockck .innercontent", helper: "clone", // appendTo: "#previewareabloc .tableck-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 .tableck-cell').droppable({ hoverClass: "ckhover", accept: ".tableck-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.02 | proxy | phpinfo | Settings