You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
1.3 KiB
41 lines
1.3 KiB
var ko = require('knockout');
|
|
var dom = require('../lib/dom');
|
|
var dispose = require('../lib/dispose');
|
|
var Layout = require('./Layout');
|
|
|
|
/**
|
|
* LayoutPreview - Represents a preview for a single layout. Builds an icon that takes
|
|
* the size of its container showing a version of the layout made from solid blocks.
|
|
* An optional map between leafId and hex color strings may be used to color the blocks.
|
|
* The map may be an observable, but it is only consulted on changes to layoutSpecObj.
|
|
*/
|
|
function LayoutPreview(layoutSpecObj, optColorMap) {
|
|
var self = this;
|
|
this.layoutSpecObj = layoutSpecObj;
|
|
this.colorMap = optColorMap || {};
|
|
|
|
this.layout = this.autoDispose(
|
|
Layout.Layout.create(this.layoutSpecObj(),
|
|
function(leafId) {
|
|
var content = dom('div.layout_preview_leaf');
|
|
var colorMap = ko.unwrap(self.colorMap);
|
|
content.style.backgroundColor = colorMap[leafId] || "#000";
|
|
return content;
|
|
}, true)
|
|
);
|
|
|
|
// When the layoutSpec changes, rebuild.
|
|
this.autoDispose(this.layoutSpecObj.subscribe(function(spec) {
|
|
this.layout.buildLayout(this.layoutSpecObj(), true);
|
|
}, this));
|
|
|
|
}
|
|
dispose.makeDisposable(LayoutPreview);
|
|
|
|
|
|
LayoutPreview.prototype.buildDom = function() {
|
|
return this.layout.rootElem;
|
|
};
|
|
|
|
module.exports = LayoutPreview;
|