scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-03 19:45:44 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix palette labels and improve CSS id / class structure.

Browse source
This commit is contained in:
Jürg Lehni 2014-10-02 16:30:27 +02:00
parent 54de02149b
commit 7194d4bcf0
2 changed files with 24 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/ui/Component.js
View file

@ -97,6 +97,7 @@ var Component = Base.extend(Callback, /** @lends Component# */{
this._name = name;
this._row = row;
this._parent = parent; // The parent component, if any.
this._nested = !!parent;
var type = this._type = props.type in this._types
? props.type
: 'options' in props
@ -115,19 +116,20 @@ var Component = Base.extend(Callback, /** @lends Component# */{
components.push(new Component(pane, key, entry,
pane._values[key], row, this));
}
pane._maxComponents = Math.max(components.length,
pane._maxComponents || 0);
pane._numCells = Math.max(components.length * 2, pane._numCells || 0);
} else {
DomElement.addChildren(row, [
this._labelCell = create('td', {
class: 'palettejs-label',
id: 'palettejs-label-' + name
}),
this._inputCell = create('td', {
class: 'palettejs-input',
id: 'palettejs-input-' + name
this._cell = create('td', {
class: 'palettejs-component',
id: 'palettejs-component-' + name
}, [
this._input = create(meta.tag || 'input', {
class: 'palettejs-input',
id: 'palettejs-input-' + name,
type: meta.type,
events: {
change: function() {
@ -173,16 +175,20 @@ var Component = Base.extend(Callback, /** @lends Component# */{
return this._name;
},
_setLabel: function(label, nodeName, parent) {
this[nodeName] = DomElement.set(this[nodeName]
|| parent.appendChild(DomElement.create('label',
{ 'for': 'palettejs-input-' + this._name })),
'text', label);
},
getLabel: function() {
return this._label;
},
setLabel: function(label) {
this._label = label;
DomElement.set(this._labelNode = this._labelNode
|| this._labelCell.appendChild(DomElement.create('label',
{ 'for': 'palettejs-input-' + this._name })),
'text', label);
this._setLabel(label, '_labelNode', this._labelCell);
},
getSuffix: function() {
@ -191,10 +197,7 @@ var Component = Base.extend(Callback, /** @lends Component# */{
setSuffix: function(suffix) {
this._suffix = suffix;
DomElement.set(this._suffixNode = this._suffixNode
|| this._inputCell.appendChild(DomElement.create('label',
{ 'for': 'palettejs-input-' + this._name })),
'text', suffix);
this._setLabel(label, '_suffixNode', this._cell);
},
getOptions: function() {
@ -239,7 +242,7 @@ var Component = Base.extend(Callback, /** @lends Component# */{
setVisible: function(visible) {
// NOTE: Only set the visibility of the whole row if this is a row item,
// in which case this._input is not defined.
DomElement.toggleClass(this._inputCell || this._row, 'hidden', !visible);
DomElement.toggleClass(this._cell || this._row, 'hidden', !visible);
DomElement.toggleClass(this._labelCell, 'hidden', !visible);
this._visible = !!visible;
},

12
src/ui/Pane.js
View file

@ -37,7 +37,7 @@ var Pane = Base.extend(Callback, /** @lends Pane# */{
// referenced from outside.
this._components = components;
this._values = values;
this._maxComponents = 1; // 1 component per row is the default.
this._numCells = 2; // 2 cells per row is the default (label / item).
for (var name in components) {
var row = DomElement.create('tr', { class: 'palettejs-row' }),
component = new Component(this, name, components[name],
@ -45,12 +45,14 @@ var Pane = Base.extend(Callback, /** @lends Pane# */{
DomElement.set(row, 'id', 'palettejs-row-' + component._name);
this._table.appendChild(row);
}
if (this._maxComponents > 1) {
if (this._numCells > 2) {
// Update colspan in all components that are not nested in another
// component.
for (name in components) {
var component = components[name];
if (component._inputCell && !component._parent) {
DomElement.set(component._inputCell, 'colspan',
this._maxComponents * 2 - 1);
if (component._cell && !component._nested) {
DomElement.set(component._cell, 'colspan',
this._numCells - 1); // Remove first label.
}
}
}