Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support bootstrap 5 #118

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Support bootstrap 5 #118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3fe5b81
fix tinymce 5.6 in edit content
vahidalvandi Jul 31, 2021
2b1150f
add npm
vahidalvandi Jul 31, 2021
3527f2c
update to bootstrap 5 and remove fontawsome
vahidalvandi Jul 29, 2022
5d0674b
build
vahidalvandi Jul 29, 2022
01f7e02
change readme
vahidalvandi Jul 29, 2022
03b9c40
change readme
vahidalvandi Jul 29, 2022
a81a399
fix
vahidalvandi Jul 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
Grid Editor
===========

Grid Editor is a visual javascript editor for the [bootstrap 4 grid system](http://getbootstrap.com/css/#grid), written as a [jQuery](http://jquery.com/) plugin. You can create, drag, resize and delete rows and columns, and set different column widths for tablets and phones.
Grid Editor is a visual javascript editor for the [bootstrap 5 grid system](http://getbootstrap.com), written as a [jQuery](http://jquery.com/) plugin. You can create, drag, resize and delete rows and columns, and set different column widths for tablets and phones.

(Looking for the __bootstrap 3 support__? Use version 0 in the [bootstrap_3 branch](https://github.com/Frontwise/grid-editor/tree/bootstrap_3))

(Looking for the __bootstrap 3 support__? Use version 0 in the [bootstrap_3 branch](https://github.com/vahidalvandi/grid-editor/tree/bootstrap_3))

It provides integration plugins for the following rich text editors to edit column content: TinyMCE, summernote and CKEditor.

Expand All @@ -14,14 +15,14 @@ It provides integration plugins for the following rich text editors to edit colu
Installation
------------

* __Dependencies:__ Grid Editor depends on jQuery, jQuery UI, Font Awesome 4 or 5, and Bootstap 4, so make sure you have included those in the page.
* __Dependencies:__ Grid Editor depends on jQuery, jQuery UI, Bootstrap icons , and Bootstap 5, so make sure you have included those in the page.
* If you want to use the tincyMCE integration, include tinyMCE and tinyMCE jQuery plugin as well.
* If you want to use the summernote integration, include summernote as well.
* If you want to use the CKEditor integration... you get the point.
* [Download the latest version of Grid Editor](https://github.com/Frontwise/grid-editor/archive/master.zip) and include it in your page:

```html
<!-- Make sure jQuery, jQuery UI, font awesome, and bootstrap 4 are included. TinyMCE is optional. -->
<!-- Make sure jQuery, jQuery UI, bootstrap icons, and bootstrap 5 are included. TinyMCE is optional. -->
<link rel="stylesheet" type="text/css" href="grid-editor/dist/grideditor.css" />
<script src="grid-editor/dist/jquery.grideditor.min.js"></script>
```
Expand Down
12 changes: 6 additions & 6 deletions dist/grideditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}
.ge-mainControls .ge-addRowGroup .btn.btn-primary {
background: #f4f4f4;
color: #666;
color: #222222;
border-color: #999;
display: flex;
align-items: center;
Expand Down Expand Up @@ -119,21 +119,21 @@
color: #666;
}
.ge-canvas.ge-editing .row > .ge-tools-drawer > a.ge-add-column {
color: #178acc;
color: #025281;
}
.ge-canvas.ge-editing .column {
background-color: rgba(47, 164, 231, 0.15);
border: 1px solid #2FA4E7;
background-color: rgba(3, 114, 179, 0.15);
border: 1px solid #0372b3;
padding: 0 5px 5px;
}
.ge-canvas.ge-editing .column > .ge-tools-drawer {
background: #afd5ea;
}
.ge-canvas.ge-editing .column > .ge-tools-drawer a {
color: #178acc;
color: #025281;
}
.ge-canvas.ge-editing .column > .ge-tools-drawer > a.ge-add-row {
color: #666;
color: #222222;
}
.ge-canvas.ge-editing .ge-content-type-tinymce.active {
outline: 1px dotted #333;
Expand Down
28 changes: 14 additions & 14 deletions dist/jquery.grideditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ $.fn.gridEditor = function( options ) {
.appendTo(addRowGroup)
;

btn.append('<i class="fa fa-plus"></i>');
btn.append('<i class="bi bi-plus"></i>');

var layoutName = layout.join(' - ');
var icon = '<div class="row ge-row-icon">';
Expand All @@ -133,7 +133,7 @@ $.fn.gridEditor = function( options ) {

// Buttons on right
var layoutDropdown = $('<div class="dropdown pull-right ge-layout-mode">' +
'<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown">Desktop</button>' +
'<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown">Desktop</button>' +
'<div class="dropdown-menu" role="menu">' +
'<a class="dropdown-item" data-width="auto" title="Desktop">Desktop</a>'+
'<a class="dropdown-item" title="Tablet">Tablet'+
Expand All @@ -150,7 +150,7 @@ $.fn.gridEditor = function( options ) {
var btnGroup = $('<div class="btn-group pull-right"/>')
.appendTo(wrapper)
;
var htmlButton = $('<button title="Edit Source Code" type="button" class="btn btn-sm btn-primary gm-edit-mode"><i class="fa fa-chevron-left"></i><i class="fa fa-chevron-right"></i></span></button>')
var htmlButton = $('<button title="Edit Source Code" type="button" class="btn btn-sm btn-primary gm-edit-mode"><i class="bi bi-code-slash"></i><i class="fa fa-chevron-right"></i></span></button>')
.on('click', function() {
if (htmlButton.hasClass('active')) {
canvas.empty().html(htmlTextArea.val()).show();
Expand All @@ -170,7 +170,7 @@ $.fn.gridEditor = function( options ) {
})
.appendTo(btnGroup)
;
var previewButton = $('<button title="Preview" type="button" class="btn btn-sm btn-primary gm-preview"><i class="fa fa-eye"></i></button>')
var previewButton = $('<button title="Preview" type="button" class="btn btn-sm btn-primary gm-preview"><i class="bi bi-eye-fill"></i></button>')
.on('mouseenter', function() {
canvas.removeClass('ge-editing');
})
Expand Down Expand Up @@ -221,7 +221,7 @@ $.fn.gridEditor = function( options ) {
}

function initRTE(e) {
if ($(this).hasClass('ge-rte-active')) { return; }
// if ($(this).hasClass('ge-rte-active')) { return; }

var rte = getRTE($(this).data('ge-content-type'));
if (rte) {
Expand Down Expand Up @@ -272,21 +272,21 @@ $.fn.gridEditor = function( options ) {
if (row.find('> .ge-tools-drawer').length) { return; }

var drawer = $('<div class="ge-tools-drawer" />').prependTo(row);
createTool(drawer, 'Move', 'ge-move', 'fa fa-arrows-alt');
createTool(drawer, 'Settings', '', 'fa fa-cog', function() {
createTool(drawer, 'Move', 'ge-move', 'bi bi-arrows-move');
createTool(drawer, 'Settings', '', 'bi bi-gear-fill', function() {
details.toggle();
});
settings.row_tools.forEach(function(t) {
createTool(drawer, t.title || '', t.className || '', t.iconClass || 'fa fa-wrench', t.on);
});
createTool(drawer, 'Remove row', '', 'fa fa-trash-alt', function() {
createTool(drawer, 'Remove row', '', 'bi bi-trash', function() {
if (window.confirm('Delete row?')) {
row.slideUp(function() {
row.remove();
});
}
});
createTool(drawer, 'Add column', 'ge-add-column', 'fa fa-plus-circle', function() {
createTool(drawer, 'Add column', 'ge-add-column', 'bi bi-plus-circle', function() {
row.append(createColumn(3));
init();
});
Expand All @@ -302,9 +302,9 @@ $.fn.gridEditor = function( options ) {

var drawer = $('<div class="ge-tools-drawer" />').prependTo(col);

createTool(drawer, 'Move', 'ge-move', 'fa fa-arrows-alt');
createTool(drawer, 'Move', 'ge-move', 'bi bi-arrows-move');

createTool(drawer, 'Make column narrower\n(hold shift for min)', 'ge-decrease-col-width', 'fa fa-minus', function(e) {
createTool(drawer, 'Make column narrower\n(hold shift for min)', 'ge-decrease-col-width', 'bi bi-dash-lg', function(e) {
var colSizes = settings.valid_col_sizes;
var curColClass = colClasses[curColClassIndex];
var curColSizeIndex = colSizes.indexOf(getColSize(col, curColClass));
Expand All @@ -315,7 +315,7 @@ $.fn.gridEditor = function( options ) {
setColSize(col, curColClass, Math.max(newSize, 1));
});

createTool(drawer, 'Make column wider\n(hold shift for max)', 'ge-increase-col-width', 'fa fa-plus', function(e) {
createTool(drawer, 'Make column wider\n(hold shift for max)', 'ge-increase-col-width', 'bi bi-plus-lg', function(e) {
var colSizes = settings.valid_col_sizes;
var curColClass = colClasses[curColClassIndex];
var curColSizeIndex = colSizes.indexOf(getColSize(col, curColClass));
Expand All @@ -327,15 +327,15 @@ $.fn.gridEditor = function( options ) {
setColSize(col, curColClass, Math.min(newSize, MAX_COL_SIZE));
});

createTool(drawer, 'Settings', '', 'fa fa-cog', function() {
createTool(drawer, 'Settings', '', 'bi bi-gear-fill', function() {
details.toggle();
});

settings.col_tools.forEach(function(t) {
createTool(drawer, t.title || '', t.className || '', t.iconClass || 'fa fa-wrench', t.on);
});

createTool(drawer, 'Remove col', '', 'fa fa-trash-alt', function() {
createTool(drawer, 'Remove col', '', 'bi bi-dash-circle', function() {
if (window.confirm('Delete column?')) {
col.animate({
opacity: 'hide',
Expand Down
Loading