mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2025-01-03 19:45:44 -05:00
Implement table captions through Palette#title / Component#title.
This commit is contained in:
Jürg Lehni
parent
b9af3af6f4
commit
9fec267dd4
3 changed files with 68 additions and 12 deletions
|
|
@ -67,8 +67,9 @@ var DomElement = new function() {
|
|||
return /** @lends DomElement */{
|
||||
create: function(nodes, parent) {
|
||||
var isArray = Array.isArray(nodes),
|
||||
res = create(isArray ? nodes : arguments, isArray ? parent : null);
|
||||
return res.length == 1 ? res[0] : res;
|
||||
res = create(isArray ? nodes : arguments,
|
||||
isArray ? parent : null);
|
||||
return res.length === 1 ? res[0] : res;
|
||||
},
|
||||
|
||||
find: function(selector, root) {
|
||||
|
|
@ -173,6 +174,22 @@ var DomElement = new function() {
|
|||
el.removeChild(el.firstChild);
|
||||
},
|
||||
|
||||
insertBefore: function(ref, el) {
|
||||
return ref.parentNode.insertBefore(create(el)[0], ref);
|
||||
},
|
||||
|
||||
// insertAfter: function(ref, el) {
|
||||
// var parent = ref.parentNode,
|
||||
// next = ref.nextSibling,
|
||||
// el = create(el)[0];
|
||||
// if (next) {
|
||||
// parent.insertBefore(el, next);
|
||||
// } else {
|
||||
// parent.appendChild(el);
|
||||
// }
|
||||
// return el;
|
||||
// },
|
||||
|
||||
getBounds: function(el, viewport) {
|
||||
var doc = el.ownerDocument,
|
||||
body = doc.body,
|
||||
|
|
|
|||
|
|
@ -117,10 +117,13 @@ var Component = Base.extend(Callback, /** @lends Component# */{
|
|||
// On the root element, we need to create the table and row even
|
||||
// if it's a columns layout.
|
||||
table = this._table = !(columns && row) && DomElement.create(
|
||||
'table', { class: 'palettejs-pane' }),
|
||||
'table', { class: 'palettejs-pane' }, [ 'tbody' ]),
|
||||
tbody = this._tbody = table && table.firstChild,
|
||||
components = this._components = {},
|
||||
currentRow = row,
|
||||
numCells = 0;
|
||||
element = row && table;
|
||||
className = 'layout-' + (columns ? 'columns' : 'rows');
|
||||
this._numCells = 0;
|
||||
for (var key in props) {
|
||||
var component = props[key];
|
||||
|
|
@ -128,7 +131,7 @@ var Component = Base.extend(Callback, /** @lends Component# */{
|
|||
// Create the rows for vertical elements, as well as
|
||||
// columns root elements.
|
||||
if (table && !(columns && currentRow)) {
|
||||
currentRow = DomElement.addChildren(table, ['tr', {
|
||||
currentRow = DomElement.addChildren(tbody, ['tr', {
|
||||
class: 'palettejs-row',
|
||||
id: 'palettejs-row-' + key
|
||||
}])[0];
|
||||
|
|
@ -178,8 +181,6 @@ var Component = Base.extend(Callback, /** @lends Component# */{
|
|||
// it through the same path as in the components object literal that
|
||||
// was passed.
|
||||
Base.set(this, components);
|
||||
element = row && table;
|
||||
className = 'layout-' + (columns ? 'columns' : 'rows');
|
||||
} else {
|
||||
var that = this;
|
||||
element = this._input = create(meta.tag || 'input', {
|
||||
|
|
@ -242,6 +243,28 @@ var Component = Base.extend(Callback, /** @lends Component# */{
|
|||
return this._name;
|
||||
},
|
||||
|
||||
getTitle: function() {
|
||||
return this._title;
|
||||
},
|
||||
|
||||
setTitle: function(title) {
|
||||
this._title = title;
|
||||
if (this._tbody) {
|
||||
var node = this._titleNode;
|
||||
if (!node && title) {
|
||||
// Create a caption tag, and nest the title in a span inside,
|
||||
// so we can offer some more flexibility with CSS on it.
|
||||
node = this._titleNode = DomElement.insertBefore(
|
||||
this._tbody, [
|
||||
'caption', [ 'span' ],
|
||||
]).firstChild;
|
||||
} else if (node && !title) {
|
||||
DomElement.remove(node);
|
||||
}
|
||||
DomElement.set(node, 'text', title);
|
||||
}
|
||||
},
|
||||
|
||||
getPalette: function() {
|
||||
return this._palette;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -26,29 +26,37 @@
|
|||
|
||||
initialize: function Palette(title, components, values) {
|
||||
// Support object literal constructor
|
||||
var props = Base.isPlainObject(title) && title;
|
||||
var props = Base.isPlainObject(title) && title,
|
||||
name;
|
||||
if (props) {
|
||||
title = props.title;
|
||||
components = props.components;
|
||||
values = props.values;
|
||||
name = props.name;
|
||||
}
|
||||
this._id = Palette._id = (Palette._id || 0) + 1;
|
||||
this._title = title;
|
||||
this._values = values;
|
||||
this._name = name || title
|
||||
? Base.hyphenate(title).replace(/\W/g, '_')
|
||||
: 'palette-' + this._id;
|
||||
this._values = values || {};
|
||||
this._components = components;
|
||||
// Create one root component that handles the layout and contains all
|
||||
// the components.
|
||||
var root = this._root = new Component(this, null, 'root', components,
|
||||
values);
|
||||
this._values);
|
||||
// Write the created components back into the passed components object,
|
||||
// so they are exposed and can easily be accessed from the outside.
|
||||
Base.set(components, root._components);
|
||||
var parent = DomElement.find('.palettejs-panel')
|
||||
var parent = DomElement.find('.palettejs-root')
|
||||
|| DomElement.find('body').appendChild(DomElement.create('div', {
|
||||
class: 'palettejs-panel'
|
||||
class: 'palettejs-root'
|
||||
}));
|
||||
this._element = parent.appendChild(DomElement.create('div', {
|
||||
class: 'palettejs-palette palettejs-' + root._className
|
||||
class: 'palettejs-palette palettejs-' + root._className,
|
||||
id: 'palettejs-palette-' + this._name
|
||||
}, [root._table]));
|
||||
this.setTitle(title);
|
||||
if (props)
|
||||
this._set(props, { title: true, components: true, values: true });
|
||||
// Link to the current scope's palettes list.
|
||||
|
|
@ -65,6 +73,14 @@
|
|||
return this._values;
|
||||
},
|
||||
|
||||
getTitle: function() {
|
||||
return this._root.getTitle();
|
||||
},
|
||||
|
||||
setTitle: function(title) {
|
||||
return this._root.setTitle(title);
|
||||
},
|
||||
|
||||
getEnabled: function() {
|
||||
return this._root.getEnabled();
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue