jQuery-gridmanager
jQuery-gridmanager copied to clipboard
Published
20 hours ago •
neokoenig
neokoenig
New version
Is there any upcomming new version of this ? On the issues are such kind of information. for example: https://github.com/neokoenig/jQuery-gridmanager/issues/84
Sorry, just haven't had the time to have another crack at it. 1.3 works well enough for most of the things I do, so it's not been a priority.
var gm = $('.my-grid-mng-test').gridmanager().data('gridmanager');
gm.destroy();
Uncaught TypeError: gm.destroy is not a function
at turnOffGridManager (froala.html:140)
at HTMLDocument.<anonymous> (froala.html:135)
at j (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.K (jquery.min.js:2)
In the source code jquery.gridmanager.js i don't see also this function.
hmm, I think I must have tried this later (been so long since I've touched the code).
Does this work?
/**
* Destroy instance, save created HTML in original container
* @method destroy
* @returns null
*/
gm.destroy = function(){
if(gm.status){
// Remove controls
$("#" + gm.options.controlId).remove();
// Remove content out of canvas
gm.deinitCanvas();
gm.$el.html($("#" + gm.options.canvasId).html());
// Remove canvas
$("#" + gm.options.canvasId).remove();
}
};
Either way, the principle is there I think - get the content, destroy the containing element
Well it doesn't work, it removes almost everything. But here are the codes: Html before init:
<div style="margin: 0 15px;">
<div class="row fr-inner">
<div class="col-xs-12 col-md-8 fr-inner">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
</div>
<div class="row fr-inner">
<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4 fr-inner">.col-xs-6 .col-md-4</div>
</div>
<div class="row fr-inner">
<div class="col-xs-6 fr-inner">.col-xs-6</div>
<div class="col-xs-6 fr-inner">.col-xs-6</div>
</div>
</div>
after init:
<div class="clearfix" id="gm-controls">
<div class="row">
<div class="col-md-12">
<div id="gm-addnew" class="btn-group pull-left"></div>
<div class="btn-group pull-right">
<button class="btn btn-xs btn-primary gm-edit-mode" title="Edit Source Code" type="button"><span class="fa fa-code"></span></button>
<button class="btn btn-xs btn-primary gm-preview" title="Preview" type="button"><span class="fa fa-eye"></span></button>
<div class="dropdown pull-left gm-layout-mode">
<button class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="fa fa-desktop" title="Desktop"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a data-width="auto" title="Desktop"><span class="fa fa-desktop"></span> Desktop</a></li>
<li><a data-width="768" title="Tablet"><span class="fa fa-tablet"></span> Tablet</a></li>
<li><a data-width="640" title="Phone"><span class="fa fa-mobile-phone"></span> Phone</a></li>
</ul>
</div>
<button class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="sr-only">Toggle Dropdown</span></button>
<ul class="dropdown-menu" role="menu">
<li><a class="gm-save" href="#" title="Save"><span class="fa fa-save"></span> Save</a></li>
<li><a class="gm-resetgrid" href="#" title="Reset Grid"><span class="fa fa-trash-o"></span> Reset</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-sortable" id="gm-canvas">
<div style="margin: 0 15px;">
<div class="row fr-inner gm-editing ui-sortable">
<div class="gm-tools clearfix"><a class="gm-moveRow pull-left" title="Move"><span class="fa fa-arrows "></span> </a> <a class="gm-addColumn pull-left " title="New Column"><span class="fa fa-plus"></span> </a> <a class="pull-right gm-rowSettings" title="Row Settings"><span class="fa fa-cog"></span> </a> </div>
<div class="col-xs-12-clsstmp col-md-8 fr-inner col-sm-8-clsstmp column gm-editing ui-sortable">
<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span> </a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span> </a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span> </a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span> </a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span> </a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span> </a> </div>
<!--gm-editable-region-->
<div class="gm-editable-region gm-content-draggable">
<div class="gm-controls-element">
<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
</div>
<div class="gm-content">.col-xs-12 .col-md-8</div>
</div>
<!--/gm-editable-region-->
<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span> </a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span> </a> </div>
</div>
<div class="col-xs-6-clsstmp col-md-4 fr-inner col-sm-4-clsstmp column gm-editing ui-sortable">
<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span> </a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span> </a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span> </a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span> </a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span> </a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span> </a> </div>
<!--gm-editable-region-->
<div class="gm-editable-region gm-content-draggable">
<div class="gm-controls-element">
<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
</div>
<div class="gm-content">.col-xs-6 .col-md-4</div>
</div>
<!--/gm-editable-region-->
<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span> </a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span> </a> </div>
</div>
<div class="gm-tools clearfix"><a class="pull-right gm-removeRow" title="Remove row"><span class="fa fa-trash-o"></span> </a> </div>
</div>
<div class="row fr-inner gm-editing ui-sortable">
<div class="gm-tools clearfix"><a class="gm-moveRow pull-left" title="Move"><span class="fa fa-arrows "></span> </a> <a class="gm-addColumn pull-left " title="New Column"><span class="fa fa-plus"></span> </a> <a class="pull-right gm-rowSettings" title="Row Settings"><span class="fa fa-cog"></span> </a> </div>
<div class="col-xs-6-clsstmp col-md-4 fr-inner col-sm-4-clsstmp column gm-editing ui-sortable">
<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span> </a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span> </a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span> </a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span> </a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span> </a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span> </a> </div>
<!--gm-editable-region-->
<div class="gm-editable-region gm-content-draggable">
<div class="gm-controls-element">
<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
</div>
<div class="gm-content">.col-xs-6 .col-md-4</div>
</div>
<!--/gm-editable-region-->
<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span> </a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span> </a> </div>
</div>
<div class="col-xs-6-clsstmp col-md-4 fr-inner col-sm-4-clsstmp column gm-editing ui-sortable">
<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span> </a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span> </a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span> </a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span> </a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span> </a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span> </a> </div>
<!--gm-editable-region-->
<div class="gm-editable-region gm-content-draggable">
<div class="gm-controls-element">
<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
</div>
<div class="gm-content">.col-xs-6 .col-md-4</div>
</div>
<!--/gm-editable-region-->
<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span> </a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span> </a> </div>
</div>
<div class="col-xs-6-clsstmp col-md-4 fr-inner col-sm-4-clsstmp column gm-editing ui-sortable">
<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span> </a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span> </a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span> </a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span> </a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span> </a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span> </a> </div>
<!--gm-editable-region-->
<div class="gm-editable-region gm-content-draggable">
<div class="gm-controls-element">
<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
</div>
<div class="gm-content">.col-xs-6 .col-md-4</div>
</div>
<!--/gm-editable-region-->
<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span> </a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span> </a> </div>
</div>
<div class="gm-tools clearfix"><a class="pull-right gm-removeRow" title="Remove row"><span class="fa fa-trash-o"></span> </a> </div>
</div>
<div class="row fr-inner gm-editing ui-sortable">
<div class="gm-tools clearfix"><a class="gm-moveRow pull-left" title="Move"><span class="fa fa-arrows "></span> </a> <a class="gm-addColumn pull-left " title="New Column"><span class="fa fa-plus"></span> </a> <a class="pull-right gm-rowSettings" title="Row Settings"><span class="fa fa-cog"></span> </a> </div>
<div class="col-xs-6-clsstmp fr-inner col-md-6 col-sm-6-clsstmp column gm-editing ui-sortable">
<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span> </a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span> </a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span> </a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span> </a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span> </a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span> </a> </div>
<!--gm-editable-region-->
<div class="gm-editable-region gm-content-draggable">
<div class="gm-controls-element">
<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
</div>
<div class="gm-content">.col-xs-6</div>
</div>
<!--/gm-editable-region-->
<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span> </a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span> </a> </div>
</div>
<div class="col-xs-6-clsstmp fr-inner col-md-6 col-sm-6-clsstmp column gm-editing ui-sortable">
<div class="gm-tools clearfix"><a class="gm-moveCol pull-left" title="Move"><span class="fa fa-arrows "></span> </a> <a class="pull-right gm-colSettings" title="Column Settings"><span class="fa fa-cog"></span> </a> <a class="gm-colDecrease pull-left" title="Make Column Narrower"><span class="fa fa-minus"></span> </a> <a class="gm-colIncrease pull-left" title="Make Column Wider"><span class="fa fa-plus"></span> </a> <a class="gm-0_btn" title="Select Column"><span class="fa fa-square-o"></span> </a> <a class="gm-1_btn" title="Add Editable Region"><span class="fa fa-edit"></span> </a> </div>
<!--gm-editable-region-->
<div class="gm-editable-region gm-content-draggable">
<div class="gm-controls-element">
<a class="gm-move fa fa-arrows ui-sortable-handle" href="#" title="Move"></a>
<a class="gm-delete fa fa-times" href="#" title="Delete"></a>
</div>
<div class="gm-content">.col-xs-6</div>
</div>
<!--/gm-editable-region-->
<div class="gm-tools clearfix"><a class="pull-left gm-addRow" title="Add Nested Row"><span class="fa fa-plus-square"></span> </a> <a class="pull-right gm-removeCol" title="Remove Column"><span class="fa fa-trash-o"></span> </a> </div>
</div>
<div class="gm-tools clearfix"><a class="pull-right gm-removeRow" title="Remove row"><span class="fa fa-trash-o"></span> </a> </div>
</div>
</div>
</div>
after destroy:
<div class="clearfix" id="gm-controls">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12 column">
<!--gm-editable-region-->
<div id="gm-addnew" class="btn-group pull-left" style="display: none;"></div>
<div class="btn-group pull-right">
<button class="btn btn-xs btn-primary gm-edit-mode" title="Edit Source Code" type="button"><span class="fa fa-code"></span></button>
<button class="btn btn-xs btn-primary gm-preview" title="Preview" type="button"><span class="fa fa-eye"></span></button>
<div class="dropdown pull-left gm-layout-mode">
<button class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="fa fa-desktop" title="Desktop"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a data-width="auto" title="Desktop"><span class="fa fa-desktop"></span> Desktop</a></li>
<li><a data-width="768" title="Tablet"><span class="fa fa-tablet"></span> Tablet</a></li>
<li><a data-width="640" title="Phone"><span class="fa fa-mobile-phone"></span> Phone</a></li>
</ul>
</div>
<button class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="sr-only">Toggle Dropdown</span></button>
<ul class="dropdown-menu" role="menu">
<li><a class="gm-save" href="#" title="Save"><span class="fa fa-save"></span> Save</a></li>
<li><a class="gm-resetgrid" href="#" title="Reset Grid"><span class="fa fa-trash-o"></span> Reset</a></li>
</ul>
</div>
<!--/gm-editable-region-->
</div>
</div>
</div>
```
Try replacing
// Remove controls
$("#" + gm.options.controlId).remove();
with
// Remove controls
$("#gm-controls").remove();
Same result
Final output:
<div class="clearfix" id="gm-controls">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12 column">
<!--gm-editable-region-->
<div id="gm-addnew" class="btn-group pull-left" style="display: none;"></div>
<div class="btn-group pull-right">
<button class="btn btn-xs btn-primary gm-edit-mode" title="Edit Source Code" type="button"><span class="fa fa-code"></span></button>
<button class="btn btn-xs btn-primary gm-preview" title="Preview" type="button"><span class="fa fa-eye"></span></button>
<div class="dropdown pull-left gm-layout-mode">
<button class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="fa fa-desktop" title="Desktop"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a data-width="auto" title="Desktop"><span class="fa fa-desktop"></span> Desktop</a></li>
<li><a data-width="768" title="Tablet"><span class="fa fa-tablet"></span> Tablet</a></li>
<li><a data-width="640" title="Phone"><span class="fa fa-mobile-phone"></span> Phone</a></li>
</ul>
</div>
<button class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown" type="button"><span class="sr-only">Toggle Dropdown</span></button>
<ul class="dropdown-menu" role="menu">
<li><a class="gm-save" href="#" title="Save"><span class="fa fa-save"></span> Save</a></li>
<li><a class="gm-resetgrid" href="#" title="Reset Grid"><span class="fa fa-trash-o"></span> Reset</a></li>
</ul>
</div>
<!--/gm-editable-region-->
</div>
</div>
</div>
Currently i have changed the destroy function to:
gm.destroy = function(){
if(gm.status){
// Remove controls
$("#" + gm.options.controlId).remove();
// Remove content out of canvas ( grid manager )
gm.deinitCanvas();
gm.$el.html($("#" + gm.options.canvasId).html());
// Remove canvas - right corner
gm.$el.find("#" + gm.options.controlId).remove();
// remove main container for gridmanager
gm.$el.find('#' + gm.options.canvasId).contents().unwrap();
// removes gmTags all bootstrap divs are inside divs with that class
var gmTags = gm.$el.find(".gm-editable-region");
gmTags.contents().unwrap();
// remove comments that gridmanager created
var html = gm.$el.html();
html = html.replace(new RegExp( "<!--" + gm.options.gmEditRegion + "-->", "g"),'');
html = html.replace(new RegExp( "<!--/" + gm.options.gmEditRegion + "-->", "g"),'');
gm.$el.html(html);
}
};
It works like a harm on cleaning the html code but when i initialize the grid manager again the controls for it are creating one more time per each init. So if i destroy grid manager one time and recreate it the controls will be create twice for each row / col. If i do it 4 times then they will be 4 inits per each control. Still working on it. Can you provide some help on that ?