neokoenig / jquery-gridmanager Goto Github PK

Trickier this one, requires separating out the editable elements, and probably some fun recursion bits.

Would be good to be able to allow passing in of all buttons which then override the default internal ones; this would be an alternative for people disabling the control bar completely and doing their own.

hello, i need help. when i test the demo of jquery-gridmanager, nothing works correctly. the icons do not appear, the tinyMCE and CKeditor doesn't works.

thank you in advance

Maybe ID's too.

I have a form in php and I'm riding textarea with TinyMCE, but now I see that there GridManager to put any textarea. The contents of the textarea is sent to a database and now I do not know how I can do that.

greetings and thanks

It would be good to add the possibility to put the Grid Manager content into a form field, or just get the content without posting it in AJAX by the Save button.

Hello,
I'm trying to share edited content of gridmanager (opened into modal popup), with a textarea (out of modal popup).
I added custom button with controlAppend and give .gm-mysave class
I can't access "clean" (without grid personal classes) html with this .on action :(
$(document).on("click", ".gm-mysave", function(e){
[CODE ?????]
});

can u help me, please?

Makes it a LOT easier to rearrange cols.

Requires a bit more work on the input configuration & button factory

I need to place default-content (such as some js charts) inside editable region once it is created. How to get notified about new regions being created?

Or, once an editable region is created, I would like the user to click on it to let him select a chart from multiple charts so that the region gets filled with that selected chart. Is this kind of thing possible?

Also, is it possible to know about other events, such as "preview about to be shown" etc. ?

In ckeditor, is very simple integrate a custom file browser as descripted here: http://docs.ckeditor.com/#!/guide/dev_file_browse_upload.
How could integrate this in gridmanager?

Hi, first up i want to thank you for your great work. I always wanted a tool like gridmanager.

We have a problem with editors wanting to center images via text-alignment (which is imho, even in the age of grid systems not a horrible thing to do). Due to the fact that img-responsive is automatically added in the cleanup-function, the centering is prevented (because .img-responsive 'display: block's the image).

I think the editors (in this case using tinyMCE) should be able to disable the automatic addition of img-responsive.

Apparently I can only drag blocks within the same row but not into other rows.
How can I allow dragging to and from anywhere?

See: DHoffm/Bootstrap-editor#3

Hi,
I have a question, if I have a textarea with ckeditor I need only give a name to the textarea and get the post when I submit the form.
What I want is to do the same thing with the gridmanager, but this being a canvas as I do to collect this data from the post without being for ajax?

Thanks

Looks like having the plugin control RTEs directly may cause more issues than it fixes: using window.tinymce (for instance) is probably bad form, as it breaks encapsulation, but also as we don't know the environment the plugin will be deployed in; case: Joomla, autoloading TinyMCE.

However, this means the 'activation' of editable elements need to be done with care, as it may inadvertently trigger RTEs where we don't want them.

See: DHoffm/Bootstrap-editor#2
Commit with solution: DHoffm/Bootstrap-editor#2

Those lines are the important ones:

var label = val[0];
var _class = gm.generateButtonClass(val[1]);
buttons.push("<a title='" + gm.options.addRow + " " + _class + "' class='" + gm.options.controlButtonClass + " add" + _class + "'><span class='" + gm.options.controlButtonSpanClass + "'></span> " + label + " " + _class + "</a>");
gm.generateClickHandler(val[1]);

And default config was changed from:

[12],
[6, 6],
[4, 4, 4],
[3, 3, 3, 3],
[2, 2, 2, 2, 2, 2],
[2, 8, 2],
[4, 8],
[8, 4]

to:

['',[12]],
['',[6, 6]],
['',[4, 4, 4]],
['',[3, 3, 3, 3]],
['',[2, 2, 2, 2, 2, 2]],
['',[2, 8, 2]],
['',[4, 8]],
['',[8, 4]]

As per custom row styles.

Hi, i need help. I want push a button and save all data (rows, columns, position, content of box...) of my template in a database. Then i need too a process to load all data again.

Any help?
Thanks

Move all destructive elements (delete/reset) to RH side, all editing/creative elements to LH side for consistency.

Saving whilst in codeview basically saves
<textarea cols="130" rows="25" style="margin-top: 0px; margin-bottom: 0px; height: 1117px;"></textarea>

instead of the actual content, as it does the GM cleanup.

Now the internal functions are exposed, people might want to build their own click handlers etc, or integrate their controls into a pre-existing CMS structure etc.

Hi! Excellent work. This is very good.

But a small thing is we can't align images to right and center.
I tested in: http://neokoenig.github.io/jQuery-gridmanager/demo/tinymce.html

Future developments: accordions and tabs

Thank you

Need a feature for switching between Desktop (i.e col-lg-*), medium screen (col-md) tablet, mobile (etc.) so you can resize the columns and it then only affects the designated class:
P is working on this

Hi, I am currently implementing gridmanager on http://launch.nairobi.io/creator

My issue is when a user add new segments onto the html I am unable to make the bootstrap columns editable by double click. e.g. Click "add segment" -> "headers" -> "header 2"

Basically I there is a step I need to go through to make the newly appended colums gm-editable

Kindly assist me..

Already done in private dev branch.

Hi, i need help with this:
http://neokoenig.github.io/jQuery-gridmanager/demo/multiple.html

In this demo you can view duplicate buttons, any solution for this issue?

Problem in Internet Explorer because of $ sign is missing.
When you delete a row or column, it seems that it disappear, but if you add another row or column, the old row or column will show again.

Running IE with developer tools F12 on consol, I got this error: Object doesn't support property or method 'remove'

The problem can be solved by a little change in gridmanager.js:

// Remove a col or row
}).on("click", "a.gm-removeCol", function(){
$(this).closest("." +gm.options.gmEditClass).animate({opacity: 'hide', width: 'hide', height: 'hide'}, 400, function(){this.remove();});
gm.log("Column Removed");

}).on("click", "a.gm-removeRow", function(){
gm.log($(this).closest("." +gm.options.colSelector));
$(this).closest("." +gm.options.gmEditClass).animate({opacity: 'hide', height: 'hide'}, 400, function(){
this.remove();

Maybe this can help:

change from: this.remove();

To this: $(this).remove();

Waiting for the feature set to settle first - will be on github wiki

Hello,

i want to remove and recreate the Gridmanager on the fly, but i have a big problem:

Create the gridmanager

            var object  = $('<div class="gridmanager"/>');

            var gm = object.gridmanager({
                remoteUrl: app.base.baseHref
            }).data('gridmanager');

Remove the Gridmanager

            if ($('.gridmanager').length) {
                var gm = $('.gridmanager').data('gridmanager');
                var  canvas = gm.$el.find("#" + gm.options.canvasId);
                gm.deinitCanvas();  
                gm.cleanup();
                $('.gridmanager').remove();
            }

And if i recreate a new gridmanager, the buttons select column and add editable area will each time multiply. Can you give me a solution for this?

Best regards
Stephan

sigh. Yes, need to do this.

Hi, I have a problem when change view button to edit source code or any other, I see that you insert this code automatically
< input name = "mce_0" value = "< p> New Content </ p>" type = "hidden"> I do not understand why.

any solution?

Hello, first, awesome work, thank you.

I have a problem with the plugin, my pages are called with an ajax call, at the first time was ok, but when I make another ajax call the button tools (".gm-tools") are duplicated. You have some tip to me fix this?

Currently essential to have some sort of icon font; should remove this as a necessity and add as a user configurable add-on.

Selecting a column is currently toggled, so resizing the column (or deleting it) will trigger the column activated toggle class incorrectly.
(Steps to reproduce, select a column so it has a red border, resize using the +- controls).

I'm wondering whether it would make more sense to have the control bar markup have its own button CSS, rather than relying on bootstrap.

One of the issues is having to redo the config each time for foundation, so having a generic button class for the control bar which could then be overwritten in options might be good. Should only be a few lines of CSS I guess.

Percy's working on this - a modal dialog system which can be used by custom controls

I'm sorry. I think I asked this before, but couldn't find my original question here. :(

I see that Grid Manager can be used with TinyMCE, however, how would I go about using Grid Manager with TinyMCE in WordPress? Has anyone done this yet? If so, how?

Thank you!

Hi,

This tool is perfect for my work. I downloaded it but the icons won't show. I try to change the version of font awesome, the icons name but it doesn't work. This is not a browser problem because I can use your demo. Any Idea ? Thanks a lot

Would like to retain the right-hand side preview/markup buttons on the top, but turn-off the size buttons on the left-top - how to do it?

My thought is to use jQuery-gridmanager in conjunction with the WordPress editor so that all the functionality of the WP editor (formatting, media, shortcodes, etc.) are available for use within the grid system of gridmanager. Has this been integrated into WordPress? Does anyone have any thoughts as to how to accomplish this?

there is many style-class
so make a sub-object, style
then all the properties regarding style would be treated like this
which is much better to understand

options.style.xxx

Old-name New-name
controlMove controlMove (options.style.controlMove)
controlNestedEditable controlNestedEditable (options.style.controlNestedEditable)
controlButtonClass controlButton
controlButtonSpanClass controlButtonSpan
gmEditClass gmEdit
gmEditClassSelected gmEditSelected
gmEditRegion gmEditRegion
gmContentRegion gmContentRegion
gmToolClass gmToolbar
gmClearClass gmClear
gmFloatLeft gmFloatLeft
gmFloatRight gmFloatRight
gmBtnGroup gmBtnGroup
gmDangerClass gmDanger

rowClass row
rowSelector rowSelector
rowSortingClass rowSorting
colClass Col
contentDraggableClass contentDraggable
colDesktopClass colDesktop
colTabletClass colTablet
colPhoneClass colPhone
colAdditionalClass colAdditional

Should probably support Redactor (latest version, not the old OSS version).

As in row settings, but for columns. Need to work out how to make this useable at v small col widths.