Skip to content

Commit

Permalink
bootrao 4
Browse files Browse the repository at this point in the history
  • Loading branch information
@vahidalvandi
vahidalvandi committed Jul 29, 2022
1 parent 03b9c40 commit e22d764
Show file tree
Hide file tree
Showing 11 changed files with 1,651 additions and 5,159 deletions.
9 changes: 4 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
Grid Editor
===========

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.
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.


(Looking for the __bootstrap 3 support__? Use version 0 in the [bootstrap_3 branch](https://github.com/vahidalvandi/grid-editor/tree/bootstrap_3))
(Looking for the __bootstrap 3 support__? Use version 0 in the [bootstrap_3 branch](https://github.com/Frontwise/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 @@ -15,14 +14,14 @@ It provides integration plugins for the following rich text editors to edit colu
Installation
------------

* __Dependencies:__ Grid Editor depends on jQuery, jQuery UI, Bootstrap icons , and Bootstap 5, so make sure you have included those in the page.
* __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.
* 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, bootstrap icons, and bootstrap 5 are included. TinyMCE is optional. -->
<!-- Make sure jQuery, jQuery UI, font awesome, and bootstrap 4 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
26 changes: 13 additions & 13 deletions dist/jquery.grideditor.js
View file
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="bi bi-plus-lg"></i>');
btn.append('<i class="fa fa-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-bs-toggle="dropdown">Desktop</button>' +
'<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-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="bi bi-code-slash"></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="fa fa-chevron-left"></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="bi bi-eye-fill"></i></button>')
var previewButton = $('<button title="Preview" type="button" class="btn btn-sm btn-primary gm-preview"><i class="fa fa-eye"></i></button>')
.on('mouseenter', function() {
canvas.removeClass('ge-editing');
})
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', 'bi bi-arrows-move');
createTool(drawer, 'Settings', '', 'bi bi-gear-fill', function() {
createTool(drawer, 'Move', 'ge-move', 'fa fa-arrows-alt');
createTool(drawer, 'Settings', '', 'fa fa-cog', 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', '', 'bi bi-trash', function() {
createTool(drawer, 'Remove row', '', 'fa fa-trash-alt', function() {
if (window.confirm('Delete row?')) {
row.slideUp(function() {
row.remove();
});
}
});
createTool(drawer, 'Add column', 'ge-add-column', 'bi bi-plus-circle', function() {
createTool(drawer, 'Add column', 'ge-add-column', 'fa fa-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', 'bi bi-arrows-move');
createTool(drawer, 'Move', 'ge-move', 'fa fa-arrows-alt');

createTool(drawer, 'Make column narrower\n(hold shift for min)', 'ge-decrease-col-width', 'bi bi-dash-lg', function(e) {
createTool(drawer, 'Make column narrower\n(hold shift for min)', 'ge-decrease-col-width', 'fa fa-minus', 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', 'bi bi-plus-lg', function(e) {
createTool(drawer, 'Make column wider\n(hold shift for max)', 'ge-increase-col-width', 'fa fa-plus', 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', '', 'bi bi-gear-fill', function() {
createTool(drawer, 'Settings', '', 'fa fa-cog', 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', '', 'bi bi-dash-circle', function() {
createTool(drawer, 'Remove col', '', 'fa fa-trash-alt', function() {
if (window.confirm('Delete column?')) {
col.animate({
opacity: 'hide',
Expand Down
2 changes: 1 addition & 1 deletion dist/jquery.grideditor.min.js
View file

Large diffs are not rendered by default.

Loading

0 comments on commit e22d764

Please sign in to comment.