scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-05 20:32:00 -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._name = name;
this._row = row; this._row = row;
this._parent = parent; // The parent component, if any. this._parent = parent; // The parent component, if any.
this._nested = !!parent;
var type = this._type = props.type in this._types var type = this._type = props.type in this._types
? props.type ? props.type
: 'options' in props : 'options' in props
@ -115,19 +116,20 @@ var Component = Base.extend(Callback, /** @lends Component# */{
components.push(new Component(pane, key, entry, components.push(new Component(pane, key, entry,
pane._values[key], row, this)); pane._values[key], row, this));
} }
pane._maxComponents = Math.max(components.length, pane._numCells = Math.max(components.length * 2, pane._numCells || 0);
pane._maxComponents || 0);
} else { } else {
DomElement.addChildren(row, [ DomElement.addChildren(row, [
this._labelCell = create('td', { this._labelCell = create('td', {
class: 'palettejs-label', class: 'palettejs-label',
id: 'palettejs-label-' + name id: 'palettejs-label-' + name
}), }),
this._inputCell = create('td', { this._cell = create('td', {
class: 'palettejs-input', class: 'palettejs-component',
id: 'palettejs-input-' + name id: 'palettejs-component-' + name
}, [ }, [
this._input = create(meta.tag || 'input', { this._input = create(meta.tag || 'input', {
class: 'palettejs-input',
id: 'palettejs-input-' + name,
type: meta.type, type: meta.type,
events: { events: {
change: function() { change: function() {
@ -173,16 +175,20 @@ var Component = Base.extend(Callback, /** @lends Component# */{
return this._name; 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() { getLabel: function() {
return this._label; return this._label;
}, },
setLabel: function(label) { setLabel: function(label) {
this._label = label; this._label = label;
DomElement.set(this._labelNode = this._labelNode this._setLabel(label, '_labelNode', this._labelCell);
|| this._labelCell.appendChild(DomElement.create('label',
{ 'for': 'palettejs-input-' + this._name })),
'text', label);
}, },
getSuffix: function() { getSuffix: function() {
@ -191,10 +197,7 @@ var Component = Base.extend(Callback, /** @lends Component# */{
setSuffix: function(suffix) { setSuffix: function(suffix) {
this._suffix = suffix; this._suffix = suffix;
DomElement.set(this._suffixNode = this._suffixNode this._setLabel(label, '_suffixNode', this._cell);
|| this._inputCell.appendChild(DomElement.create('label',
{ 'for': 'palettejs-input-' + this._name })),
'text', suffix);
}, },
getOptions: function() { getOptions: function() {
@ -239,7 +242,7 @@ var Component = Base.extend(Callback, /** @lends Component# */{
setVisible: function(visible) { setVisible: function(visible) {
// NOTE: Only set the visibility of the whole row if this is a row item, // NOTE: Only set the visibility of the whole row if this is a row item,
// in which case this._input is not defined. // 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); DomElement.toggleClass(this._labelCell, 'hidden', !visible);
this._visible = !!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. // referenced from outside.
this._components = components; this._components = components;
this._values = values; 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) { for (var name in components) {
var row = DomElement.create('tr', { class: 'palettejs-row' }), var row = DomElement.create('tr', { class: 'palettejs-row' }),
component = new Component(this, name, components[name], 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); DomElement.set(row, 'id', 'palettejs-row-' + component._name);
this._table.appendChild(row); 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) { for (name in components) {
var component = components[name]; var component = components[name];
if (component._inputCell && !component._parent) { if (component._cell && !component._nested) {
DomElement.set(component._inputCell, 'colspan', DomElement.set(component._cell, 'colspan',
this._maxComponents * 2 - 1); this._numCells - 1); // Remove first label.
} }
} }
} }