hello everyone ,
i want to change table button to something like that
i know it's too hard but i think you can do it guys ...
my version is phpbb2
Last edited by coolkool on November 17th 2018, 6:38 pm; edited 1 time in total
This is a Hitskin.com skin preview
Install the skin • Return to the skin page
APE wrote:Not as far as I know No sorry
It would take a lot of recoding to make it and maybe have to have server side as well and we don't offer server side tools
APE wrote:was it on a forumotion forum ?
APE wrote:oh right then yes it can be done BUT sadly I have looked over the download file and can not work out all of the codes used I found the Javascript for it but I think it needs templates and CSS files also
Have you gave @Wecoc a PM asking if there is any way to get the codes used ?
I have tagged Wecoc in this post maybe Wecoc will see it when they log in next.
/*--------------------------------------------------------------------------
SCEditor Table Dropdown
[ This javascript was made for the Forumotion skin Modern redux ]
Author: Wecoc
Placement: In all the pages
--------------------------------------------------------------------------
This is a rewrite of the Table command which allows to pick the row and column
size directly. It's mainly based on the table size picker found in Microsoft Word
Requirements: CSS Edits (Section: SCEditor Edits)
--------------------------------------------------------------------------*/
$(function(){
if (!$.sceditor) return;
/* Configuration */
var lang = { insert: "insert", cancel: "cancel", fill_content: "text" };
var max_x = 10, max_y = 8; // Set here the max number of columns and rows
/* Configuration */
var recent_click = false; // ! Don't change this line
// Define the new dropbox
$.sceditor.command.set('table', {
dropDown : function(editor, caller, callback) {
var div_table = '<div class="cell_table"><div class="cell_picker">';
for (i = 0; i < max_y; i++) {
div_table += '<li style="display:block;">';
for (j = 0; j < max_x; j++) {
var tstring = "Table (" + (j + 1) + ", " + (i + 1) + ")";
div_table += '<div class="cell_option" title="' + tstring +
'" style="display:inline-block; unselectable="on"/>';
}
div_table += '</li>';
}
div_table += '</div></div>';
var div_buttons = '<div class="cell_buttons"><input type="button" class="button" value="' + lang.insert +
'" style="display:inline-block"><input type="button" class="button" value="' + lang.cancel +
'" style="display:inline-block"></div>';
var a = $(div_table), b = $(div_buttons); a.append(b);
// Hover - Paint cells
$('.cell_option', a).on('hover', function() {
if (!recent_click) {
$('.cell_option', a).removeClass("over");
get_hover_cells(this);
}
});
// Click - Set current one as new value
$('.cell_option', a).on('click', function() {
if (!recent_click) {
$('.cell_option', a).removeClass("picked");
$(this).addClass("picked");
recent_click = true;
setTimeout(function(){ recent_click = false }, 500);
}
});
// Mouse leave - Remove the hover paint cells and paint them again based on the last picked
$('.cell_picker', a).on('mouseleave', function() {
$('.cell_option', a).removeClass("over");
$('.cell_option.picked', a).filter(function(){ get_hover_cells(this) });
});
// Click Insert button
$('input[value=' + lang.insert + ']', b).on('click', function() {
callback();
editor.closeDropDown(true);
return false;
});
// Click Cancel button
$('input[value=' + lang.cancel + ']', b).on('click', function() {
editor.closeDropDown(true);
return false;
});
editor.createDropDown(caller, 'table', a);
},
// wysiwyg
exec : function(caller) {
var editor = this;
$.sceditor.command.get('table').dropDown(editor, caller, function() {
$('.cell_option.picked').filter(function(){
var result = '[table class="table-content"]', cell = this, parent = cell.parentNode;
var x = Array.prototype.indexOf.call(parent.childNodes, cell);
var y = Array.prototype.indexOf.call(parent.parentNode.childNodes, parent);
for (i = 0; i <= y; i++) {
result += '[tr class="tr' + i + '"]';
for (j = 0; j <= x; j++) {
result += '[td class="td' + j + '"]' + lang.fill_content + '[/td]';
}
result += "[/tr]";
}
result += '[/table]';
editor.insert(result, '', true, true, true);
});
});
},
// source
txtExec : function(caller) {
var editor = this;
$.sceditor.command.get('table').dropDown(editor, caller, function() {
$('.cell_option.picked').filter(function(){
var result = '[table class="table-content"]', cell = this, parent = cell.parentNode;
var x = Array.prototype.indexOf.call(parent.childNodes, cell);
var y = Array.prototype.indexOf.call(parent.parentNode.childNodes, parent);
for (i = 0; i <= y; i++) {
result += '[tr class="tr' + i + '"]';
for (j = 0; j <= x; j++) {
result += '[td class="td' + j + '"]' + lang.fill_content + '[/td]';
}
result += "[/tr]";
}
result += '[/table]';
editor.insert(result, '', true, true, true);
});
});
},
tooltip : 'Insert Table'
});
});
// Paint cells from 0 to x (current column) and from 0 to y (current row)
function get_hover_cells(cell){
var parent = cell.parentNode;
var x = Array.prototype.indexOf.call(parent.childNodes, cell);
var y = Array.prototype.indexOf.call(parent.parentNode.childNodes, parent);
for (i = 0; i <= y; i++) {
var row = parent.parentNode.childNodes[i];
for (j = 0; j <= x; j++) {
var target = row.childNodes[j];
$(target).addClass("over");
}
}
}
/* SCEditor Edits */
.color_option { width: 24px; height: 24px; cursor: pointer; }
.color_buttons, .cell_buttons { text-align: center; }
.color_buttons input.button { margin: 8px 8px 0 8px !important; }
.cell_buttons input.button { margin: 8px 8px 0 8px !important; }
.color_option.picked:before {
content: "\f120";
position: absolute;
font-family: Ionicons;
font-size: 2rem;
transform: translateX(3px) translateY(3px);
color: #fff;
text-shadow: 1px 1px rgba(0,0,0,0.2);
}
.cell_option {
width: 16px;
height: 16px;
background-color: #fff;
border: solid 1px #b0b0b0;
margin: 1px !important;
}
.cell_option.over { background-color: #ebeadd; border: solid 1px #d3d2c7; }
#preview .postbody table, #preview .postbody td,
div[class*='post--'] .postbody table, div[class*='post--'] .postbody td {
border: none !important;
border-spacing: 0;
}
#preview .postbody table.table-content, .postbody table.table-content {
border: 2px solid #302f4f !important;
}
.table-content td { padding: 4px; }
.table-content { width: 100%; }
.table-content .tr0 {
background-color: #302f4f;
color: #fff;
font-weight: 500;
}
Problem solved & topic archived.
|