mirror of https://github.com/rancher/ui.git
101 lines
2.8 KiB
JavaScript
101 lines
2.8 KiB
JavaScript
import Ember from 'ember';
|
|
import ThrottledResize from 'ui/mixins/throttled-resize';
|
|
|
|
var MIN_WIDTH = 260; // Minimum width of a column, including margin-right
|
|
var COLUMN_MARGIN = 10; // this must match the rule in styles/pod.scss .pod-column
|
|
var SELECTOR = '.pod-column'; // Each column must have this class
|
|
|
|
var columnWidth = MIN_WIDTH; // this will get changed by onResize;
|
|
|
|
// Automatically apply the width to any columns that get added without a resize
|
|
jQuery(SELECTOR).initialize(function() {
|
|
$(this).css('width', columnWidth+'px');
|
|
});
|
|
|
|
export default Ember.Component.extend(ThrottledResize, {
|
|
pods: null, // Override me with an array of content pods
|
|
emptyMessage: null,
|
|
|
|
classNames: ['pods','clearfix'],
|
|
tagName: 'section',
|
|
|
|
columnCount: 3, // Will be reset on didInsertElement and resize
|
|
podCount: Ember.computed.alias('pods.length'),
|
|
|
|
onResize: function() {
|
|
try {
|
|
var elem = this.$();
|
|
var sectionWidth = $('#application').width(); // On first call the pods aren't rendered yet, so approximate with the screen width
|
|
if ( elem && elem.is(':visible') )
|
|
{
|
|
sectionWidth = elem.width();
|
|
}
|
|
|
|
var logicalWidth = (sectionWidth + 10); // Add one extra COLUMN_MARGIN because the last column doesn't actually have one
|
|
var columnCount = Math.max(1, Math.floor(logicalWidth/(MIN_WIDTH+COLUMN_MARGIN)));
|
|
columnWidth = Math.max(50, Math.floor(logicalWidth/columnCount) - COLUMN_MARGIN - columnCount);
|
|
|
|
//console.log('section:',sectionWidth,'margin:',COLUMN_MARGIN,'logical:',logicalWidth,'count:',columnCount,'width:',columnWidth);
|
|
|
|
if ( this.get('columnCount') !== columnCount )
|
|
{
|
|
this.set('columnCount', columnCount);
|
|
}
|
|
|
|
Ember.run(this, () => {
|
|
this.$(SELECTOR).css('width', columnWidth+'px');
|
|
});
|
|
} catch (e) {
|
|
// Just in case..
|
|
}
|
|
},
|
|
|
|
init: function() {
|
|
this._super();
|
|
this.onResize(); // Estimate the columnCount so it doesn't have to get called twice in most cases
|
|
},
|
|
|
|
podCountChanged: function() {
|
|
Ember.run.next(this,'onResize');
|
|
}.observes('podCount'),
|
|
|
|
columns: function() {
|
|
var i;
|
|
var idx = 0;
|
|
var pods = this.get('pods')||[];
|
|
var columnCount = this.get('columnCount');
|
|
|
|
// Pre-initialize all the columns
|
|
var columns = [];
|
|
for ( i = 0 ; i < columnCount ; i++ )
|
|
{
|
|
columns[i] = [];
|
|
}
|
|
|
|
// Copy in the hosts
|
|
for ( i = 0 ; i < pods.get('length') ; i++ )
|
|
{
|
|
columns[nextIndex()].push(pods.objectAt(i));
|
|
}
|
|
|
|
return columns;
|
|
|
|
function nextIndex() {
|
|
var out = idx;
|
|
|
|
idx++;
|
|
if ( idx >= columnCount )
|
|
{
|
|
idx = 0;
|
|
}
|
|
|
|
return out;
|
|
}
|
|
}.property('pods.[]','columnCount'),
|
|
|
|
didInsertElement: function() {
|
|
this._super();
|
|
this.onResize();
|
|
},
|
|
});
|