scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-06 04:42:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement Component#label and Palette#remove().

Browse source
This commit is contained in:
Jürg Lehni 2012-11-14 12:05:12 -08:00
parent b334c95266
commit 405198f94d
2 changed files with 40 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/ui/Component.js
View file

@ -41,22 +41,23 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
}, },
slider: { slider: {
type: 'range' type: 'range',
number: true
}, },
list: { list: {
tag: 'select', tag: 'select',
options: function() { options: function() {
DomElement.removeChildren(this.element); DomElement.removeChildren(this._inputItem);
DomElement.create(Base.each(this._options, function(option) { DomElement.create(Base.each(this._options, function(option) {
this.push('option', { value: option, text: option }); this.push('option', { value: option, text: option });
}, []), this.element); }, []), this._inputItem);
}, },
value: function(value) { value: function(value) {
DomElement.set( DomElement.set(
DomElement.find('option[value="' + value + '"]', this.element), DomElement.find('option[value="' + value + '"]', this._inputItem),
'selected', true); 'selected', true);
} }
} }
@ -72,14 +73,14 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
this._info = this._types[this._type] || { type: this._type }; this._info = this._types[this._type] || { type: this._type };
var that = this, var that = this,
fireChange = false; fireChange = false;
this.element = DomElement.create(this._info.tag || 'input', { this._inputItem = DomElement.create(this._info.tag || 'input', {
type: this._info.type, type: this._info.type,
events: { events: {
change: function() { change: function() {
var key = that._info.value; var key = that._info.value;
if (typeof key === 'function') if (typeof key === 'function')
key = null; key = null;
var value = DomElement.get(that.element, key || 'value'); var value = DomElement.get(this, key || 'value');
if (fireChange) { if (fireChange) {
that.palette.fire('change', that, that.name, value); that.palette.fire('change', that, that.name, value);
that.fire('change', value); that.fire('change', value);
@ -90,6 +91,10 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
} }
} }
}); });
this._element = DomElement.create('tr', [
this._labelItem = DomElement.create('td'),
'td', this._inputItem
]);
Base.each(obj, function(value, key) { Base.each(obj, function(value, key) {
this[key] = value; this[key] = value;
}, this); }, this);
@ -102,6 +107,15 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
return this._type; return this._type;
}, },
getLabel: function() {
return this._label;
},
setLabel: function(label) {
this._label = label;
DomElement.set(this._labelItem, 'text', label + ':');
},
getOptions: function() { getOptions: function() {
return this._options; return this._options;
}, },
@ -121,18 +135,18 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
if (typeof key === 'function') if (typeof key === 'function')
key.call(this, value); key.call(this, value);
else else
DomElement.set(this.element, key || 'value', value); DomElement.set(this._inputItem, key || 'value', value);
this._value = value; this._value = value;
}, },
getRange: function() { getRange: function() {
return [toFloat(DomElement.get(this.element, 'min')), return [toFloat(DomElement.get(this._inputItem, 'min')),
toFloat(DomElement.get(this.element, 'max'))]; toFloat(DomElement.get(this._inputItem, 'max'))];
}, },
setRange: function(min, max) { setRange: function(min, max) {
var range = Array.isArray(min) ? min : [min, max]; var range = Array.isArray(min) ? min : [min, max];
DomElement.set(this.element, { min: range[0], max: range[1] }); DomElement.set(this._inputItem, { min: range[0], max: range[1] });
}, },
getMin: function() { getMin: function() {
@ -152,11 +166,11 @@ var Component = this.Component = Base.extend(Callback, /** @lends Component# */{
}, },
getStep: function() { getStep: function() {
return toFloat(DomElement.get(this.element, 'step')); return toFloat(DomElement.get(this._inputItem, 'step'));
}, },
setStep: function(step) { setStep: function(step) {
DomElement.set(this.element, 'step', step); DomElement.set(this._inputItem, 'step', step);
}, },
reset: function() { reset: function() {

28
src/ui/Palette.js
View file

@ -20,35 +20,31 @@ var Palette = this.Palette = Base.extend(Callback, /** @lends Palette# */{
initialize: function(title, components, values) { initialize: function(title, components, values) {
var parent = DomElement.find('.palettejs-panel') var parent = DomElement.find('.palettejs-panel')
|| DomElement.find('body').appendChild( || DomElement.find('body').appendChild(
DomElement.create('div', { 'class': 'palettejs-panel' })), DomElement.create('div', { 'class': 'palettejs-panel' }));
table = parent.appendChild( this._element = parent.appendChild(
DomElement.create('table', { 'class': 'palettejs-pane' })), DomElement.create('table', { 'class': 'palettejs-pane' })),
that = this;
this._title = title; this._title = title;
if (!values) if (!values)
values = {}; values = {};
this._components = Base.each(components, function(component, name) { for (var name in (this._components = components)) {
var component = components[name];
if (!(component instanceof Component)) { if (!(component instanceof Component)) {
if (component.value == null) if (component.value == null)
component.value = values[name]; component.value = values[name];
component.name = name; component.name = name;
component = components[name] = new Component(component); component = components[name] = new Component(component);
} }
component.palette = that; this._element.appendChild(component._element);
component.palette = this;
// Make sure each component has an entry in values, so observers get // Make sure each component has an entry in values, so observers get
// installed further down. // installed further down.
if (values[name] === undefined) if (values[name] === undefined)
values[name] = null; values[name] = null;
var row = table.appendChild( }
DomElement.create('tr', [ // Now replace each entry in values with a getter / setters so we can
'td', { text: (component.label || name) + ':' }, // observe change.
'td', component.element
])
);
}); });
this._values = Base.each(values, function(value, name) { this._values = Base.each(values, function(value, name) {
// Replace each entry with an getter / setters so we can observe
// change.
Base.define(values, name, { Base.define(values, name, {
enumerable: true, enumerable: true,
configurable: true, configurable: true,
@ -67,5 +63,9 @@ var Palette = this.Palette = Base.extend(Callback, /** @lends Palette# */{
reset: function() { reset: function() {
for (var i in this._components) for (var i in this._components)
this._components[i].reset(); this._components[i].reset();
},
remove: function() {
DomElement.remove(this._element);
} }
}); });