-
-
Save OwlyCode/6421823 to your computer and use it in GitHub Desktop.
(function($) { | |
$.Gridster.generate_stylesheet = function(opts) { | |
var styles = ''; | |
var max_size_x = this.options.max_size_x; | |
var max_rows = 0; | |
var max_cols = 0; | |
var i; | |
var rules; | |
opts || (opts = {}); | |
opts.cols || (opts.cols = this.cols); | |
opts.rows || (opts.rows = this.rows); | |
opts.namespace || (opts.namespace = this.options.namespace); | |
opts.widget_base_dimensions || (opts.widget_base_dimensions = this.options.widget_base_dimensions); | |
opts.widget_margins || (opts.widget_margins = this.options.widget_margins); | |
opts.min_widget_width = (opts.widget_margins[0] * 2) + | |
opts.widget_base_dimensions[0]; | |
opts.min_widget_height = (opts.widget_margins[1] * 2) + | |
opts.widget_base_dimensions[1]; | |
/* generate CSS styles for cols */ | |
for (i = opts.cols; i >= 0; i--) { | |
styles += (opts.namespace + ' [data-col="'+ (i + 1) + '"] { left:' + | |
((i * opts.widget_base_dimensions[0]) + | |
(i * opts.widget_margins[0]) + | |
((i + 1) * opts.widget_margins[0])) + 'px;} '); | |
} | |
/* generate CSS styles for rows */ | |
for (i = opts.rows; i >= 0; i--) { | |
styles += (opts.namespace + ' [data-row="' + (i + 1) + '"] { top:' + | |
((i * opts.widget_base_dimensions[1]) + | |
(i * opts.widget_margins[1]) + | |
((i + 1) * opts.widget_margins[1]) ) + 'px;} '); | |
} | |
for (var y = 1; y <= opts.rows; y++) { | |
styles += (opts.namespace + ' [data-sizey="' + y + '"] { height:' + | |
(y * opts.widget_base_dimensions[1] + | |
(y - 1) * (opts.widget_margins[1] * 2)) + 'px;}'); | |
} | |
for (var x = 1; x <= max_size_x; x++) { | |
styles += (opts.namespace + ' [data-sizex="' + x + '"] { width:' + | |
(x * opts.widget_base_dimensions[0] + | |
(x - 1) * (opts.widget_margins[0] * 2)) + 'px;}'); | |
} | |
return this.add_style_tag(styles); | |
}; | |
$.Gridster.add_style_tag = function(css) { | |
var d = document; | |
var tag = d.createElement('style'); | |
tag.setAttribute('generated-from', 'gridster'); | |
d.getElementsByTagName('head')[0].appendChild(tag); | |
tag.setAttribute('type', 'text/css'); | |
if (tag.styleSheet) { | |
tag.styleSheet.cssText = css; | |
} else { | |
tag.appendChild(document.createTextNode(css)); | |
} | |
return this; | |
}; | |
$.Gridster.resize_widget_dimensions = function(options) { | |
if (options.widget_margins) { | |
this.options.widget_margins = options.widget_margins; | |
} | |
if (options.widget_base_dimensions) { | |
this.options.widget_base_dimensions = options.widget_base_dimensions; | |
} | |
this.min_widget_width = (this.options.widget_margins[0] * 2) + this.options.widget_base_dimensions[0]; | |
this.min_widget_height = (this.options.widget_margins[1] * 2) + this.options.widget_base_dimensions[1]; | |
var serializedGrid = this.serialize(); | |
this.$widgets.each($.proxy(function(i, widget) { | |
var $widget = $(widget); | |
this.resize_widget($widget); | |
}, this)); | |
this.generate_grid_and_stylesheet(); | |
this.get_widgets_from_DOM(); | |
this.set_dom_grid_height(); | |
return false; | |
}; | |
})(jQuery); |
Hi OwlyCode,
I was just trying to include your code in my existing gridster environment. It will fail because there is no more an "$.Gridster" reference.
Could you please give me a hint or fix your code? This would be nice.
Thank you!
@Irthen You can use fn. instead of $.Gridster
hello @OwlyCode, your code is doing fine, but when im resizing a widget & the container size is change, widget that i'm resize is not follow up the container size, how to fix this?
Thanks so much! This is completely what I want.
gridster.resize-patch.js:2 Uncaught TypeError: Cannot set property 'generate_stylesheet' of undefined... it showing above error message when this is included
@josephkuruvilla seems to replace $.Gridster with fn.
Where should I include this file?
Hmm where should I put this, doesn't seem working.. I changed
thanks for this! with some other mods I made it work nice: https://github.com/gcphost/gridster-responsive