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

Remove all Palette and Component related code, as it is separated into its own project.

Browse source 
https://github.com/lehni/palette.js
This commit is contained in:
Jürg Lehni 2014-10-08 17:43:03 +02:00
parent f29f3c8b11
commit f4a36b7cd4
4 changed files with 0 additions and 715 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

152
src/dom/DomElement.js
View file

@ -16,36 +16,6 @@
* @private * @private
*/ */
var DomElement = new function() { var DomElement = new function() {
// We use a mix of Bootstrap.js legacy and Bonzo.js magic, ported over and
// furhter simplified to a subset actually required by Paper.js
var special = /^(checked|value|selected|disabled)$/i,
translated = { text: 'textContent', html: 'innerHTML' },
unitless = { lineHeight: 1, zoom: 1, zIndex: 1, opacity: 1 };
function create(nodes, parent) {
var res = [];
for (var i = 0, l = nodes && nodes.length; i < l;) {
var el = nodes[i++];
if (typeof el === 'string') {
el = document.createElement(el);
} else if (!el || !el.nodeType) {
continue;
}
// Do we have attributes?
if (Base.isPlainObject(nodes[i]))
DomElement.set(el, nodes[i++]);
// Do we have children?
if (Array.isArray(nodes[i]))
create(nodes[i++], el);
// Are we adding to a parent?
if (parent)
parent.appendChild(el);
res.push(el);
}
return res;
}
// Handles both getting and setting of vendor prefix values // Handles both getting and setting of vendor prefix values
function handlePrefix(el, name, set, value) { function handlePrefix(el, name, set, value) {
var prefixes = ['', 'webkit', 'moz', 'Moz', 'ms', 'o'], var prefixes = ['', 'webkit', 'moz', 'Moz', 'ms', 'o'],
@ -65,54 +35,6 @@ var DomElement = new function() {
} }
return /** @lends DomElement */{ 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;
},
find: function(selector, root) {
return (root || document).querySelector(selector);
},
findAll: function(selector, root) {
return (root || document).querySelectorAll(selector);
},
get: function(el, key) {
return el
? special.test(key)
? key === 'value' || typeof el[key] !== 'string'
? el[key]
: true
: key in translated
? el[translated[key]]
: el.getAttribute(key)
: null;
},
set: function(el, key, value) {
if (typeof key !== 'string') {
for (var name in key)
if (key.hasOwnProperty(name))
DomElement.set(el, name, key[name]);
} else if (!el || value == null) {
return el;
} else if (special.test(key)) {
el[key] = value;
} else if (key in translated) {
el[translated[key]] = value;
} else if (key === 'style') {
DomElement.setStyle(el, value);
} else if (key === 'events') {
DomEvent.add(el, value);
} else {
el.setAttribute(key, value);
}
return el;
},
getStyles: function(el) { getStyles: function(el) {
// If el is a document (nodeType == 9), use it directly // If el is a document (nodeType == 9), use it directly
var doc = el && el.nodeType !== 9 ? el.ownerDocument : el, var doc = el && el.nodeType !== 9 ? el.ownerDocument : el,
@ -120,80 +42,6 @@ var DomElement = new function() {
return view && view.getComputedStyle(el, ''); return view && view.getComputedStyle(el, '');
}, },
getStyle: function(el, key) {
return el && el.style[key] || DomElement.getStyles(el)[key] || null;
},
setStyle: function(el, key, value) {
if (typeof key !== 'string') {
for (var name in key)
if (key.hasOwnProperty(name))
DomElement.setStyle(el, name, key[name]);
} else {
if (/^-?[\d\.]+$/.test(value) && !(key in unitless))
value += 'px';
el.style[key] = value;
}
return el;
},
hasClass: function(el, cls) {
return el && new RegExp('\\s*' + cls + '\\s*').test(el.className);
},
addClass: function(el, cls) {
if (el) {
el.className = (el.className + ' ' + cls).trim();
}
},
removeClass: function(el, cls) {
if (el) {
el.className = el.className.replace(
new RegExp('\\s*' + cls + '\\s*'), ' ').trim();
}
},
toggleClass: function(el, cls, state) {
DomElement[(state === undefined ? !DomElement.hasClass(el, cls)
: state) ? 'addClass' : 'removeClass'](el, cls);
},
remove: function(el) {
if (el.parentNode)
el.parentNode.removeChild(el);
},
addChildren: function(el, children) {
// We can use the create() function for this too!
return create(children, el);
},
removeChildren: function(el) {
while (el.firstChild)
el.removeChild(el.firstChild);
},
addChild: function(el, child) {
return create(child, el)[0];
},
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) { getBounds: function(el, viewport) {
var doc = el.ownerDocument, var doc = el.ownerDocument,
body = doc.body, body = doc.body,

5
src/paper.js
View file

@ -117,11 +117,6 @@ var paper = new function(undefined) {
/*#*/ include('ui/Key.js'); /*#*/ include('ui/Key.js');
/*#*/ include('ui/MouseEvent.js'); /*#*/ include('ui/MouseEvent.js');
/*#*/ if (__options.palette) {
/*#*/ include('ui/Component.js');
/*#*/ include('ui/Palette.js');
/*#*/ }
/*#*/ include('tool/ToolEvent.js'); /*#*/ include('tool/ToolEvent.js');
/*#*/ include('tool/Tool.js'); /*#*/ include('tool/Tool.js');

438
src/ui/Component.js
View file

@ -1,438 +0,0 @@
/*
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
* http://paperjs.org/
*
* Copyright (c) 2011 - 2014, Juerg Lehni & Jonathan Puckey
* http://scratchdisk.com/ & http://jonathanpuckey.com/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
/**
* @name Component
* @class
*/
var Component = Base.extend(Emitter, /** @lends Component# */{
_class: 'Component',
_events: [ 'onChange', 'onClick' ],
// DOCS: All!
// Meta-information, by type. This is stored in _meta on the components.
_types: {
'boolean': {
type: 'checkbox',
value: 'checked'
},
string: {
type: 'text'
},
number: {
type: 'number',
number: true
},
button: {
type: 'button',
tag: 'button',
value: 'text'
},
text: {
tag: 'span',
// This will return the native textContent through DomElement.get():
value: 'text'
},
slider: {
type: 'range',
number: true
},
ruler: {
tag: 'hr'
},
list: {
tag: 'select',
setOptions: function() {
DomElement.removeChildren(this._element);
DomElement.create(Base.each(this._options, function(option) {
this.push('option', { value: option, text: option });
}, []), this._element);
}
},
color: {
type: 'color',
getValue: function(value) {
// Always convert internal string representation back to a
// paper.js color object.
return new Color(value);
},
setValue: function(value) {
// Only enfore hex values if the input field is indeed of
// color type. This allows sketch.paperjs.org to plug in
// the Spectrum.js library with alpha support.
return new Color(value).toCSS(
DomElement.get(this._element, 'type') === 'color');
}
}
},
// Default values for internals
_visible: true,
_enabled: true,
initialize: function Component(palette, parent, name, props, values, row) {
if (!name)
name = 'component-' + this._id;
var value = Base.pick(values[name], props.value);
this._id = Component._id = (Component._id || 0) + 1;
this._palette = palette;
this._parent = parent;
this._name = name;
// The row within which this component is contained. This can be a
// shared row, e.g. when the parent component has a columns layout.
this._row = row;
var type = this._type = props.type in this._types
? props.type
: 'options' in props
? 'list'
: 'onClick' in props
? 'button'
: value !== undefined
? typeof value
: undefined,
meta = this._meta = this._types[type] || { type: type },
create = DomElement.create,
element,
className;
if (!type) {
// No type defined, so we're dealing with a layout component that
// contains nested child components. See if they are to be aligned
// as columns or rows, and lay things out accordingly.
var columns = props.columns,
// 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' }, [ '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];
if (Base.isPlainObject(component)) {
// Create the rows for vertical elements, as well as
// columns root elements.
if (table && !(columns && currentRow)) {
currentRow = DomElement.addChildren(tbody, ['tr', {
class: 'palettejs-row',
id: 'palettejs-row-' + key
}])[0];
// Set _row for the columns root element.
if (columns)
this._row = currentRow;
}
components[key] = new Component(palette, this, key,
component, values, currentRow);
// Keep track of the maximum amount of cells per row, so we
// can adjust colspan after.
numCells = Math.max(numCells, this._numCells);
// Do not reset cell counter if all components go to the
// same parent row.
if (!columns)
this._numCells = 0;
// Remove the entry now from the object that was provided to
// create the component since the leftovers will be injected
// into the created component through #_set() below.
delete props[key];
}
}
this._numCells = numCells;
// If aligning things horizontally, we need to tell the parent how
// many cells there are all together.
if (columns && parent)
parent._numCells = numCells;
Base.each(components, function(component, key) {
// NOTE: Components with columns layout won't have their _cell
// set.
if (numCells > 2 && component._cell && !columns)
DomElement.set(component._cell, 'colspan', numCells - 1);
// Replace each entry in values with getters/setters so we can
// directly link the value to the component and observe change.
if (key in values) {
Base.define(values, key, {
enumerable: true,
configurable: true,
get: function() {
return component.getValue();
},
set: function(val) {
component.setValue(val);
}
});
}
});
// Add child components directly to this component, so we can access
// it through the same path as in the components object literal that
// was passed.
Base.set(this, components);
} else {
var that = this;
element = this._element = create(meta.tag || 'input', {
id: !meta.tag ? 'palettejs-input-' + name : null,
type: meta.type,
events: {
change: function() {
that.setValue(DomElement.get(this,
meta.value || 'value'));
},
click: function() {
that.emit('click');
}
}
});
className = 'type-' + type;
}
if (element) {
DomElement.addChildren(row, [
this._labelCell = create('td', {
class: 'palettejs-label',
id: 'palettejs-label-' + name
}),
this._cell = create('td', {
class: 'palettejs-component palettejs-' + className,
id: 'palettejs-component-' + name
}, [ element ])
]);
// We just added two cells to the row:
if (parent)
parent._numCells += 2;
}
this._className = className;
// Attach default 'change' even that delegates to the palette.
this.on('change', function(value) {
if (!this._dontFire)
palette.emit('change', this, this._name, value);
});
this._dontFire = true;
// Now that everything is set up, copy over values fro, props.
// NOTE: This triggers setters, which is why we set _dontFire = true,
// and why we can only call this after everything else is set up (e.g.
// setLabel() requires this._labelCell).
// Exclude name because it's already set, and value since we want to set
// it after range.
this._set(props, { name: true, value: true });
this.setValue(value);
// Start firing change events after we have initialized.
this._dontFire = false;
this._defaultValue = this._value;
},
getType: function() {
return this._type;
},
getName: function() {
return this._name;
},
getElement: function() {
return this._element;
},
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;
},
getParent: function() {
return this._parent;
},
getValue: function() {
var value = this._value,
getValue = this._meta.getValue;
return getValue ? getValue.call(this, value) : value;
},
setValue: function(value) {
if (this._components)
return;
var meta = this._meta,
key = meta.value || 'value',
setValue = meta.setValue;
if (setValue)
value = setValue.call(this, value);
// If setValue doesn't return a value, then we assume it took care of
// the setting by itself.
if (value !== undefined) {
DomElement.set(this._element, key, value);
// Read back and convert from input again to make sure we're in sync
value = DomElement.get(this._element, key);
}
if (meta.number)
value = parseFloat(value, 10);
if (this._value !== value) {
this._value = value;
if (!this._dontFire)
this.emit('change', this.getValue());
}
},
// Setup #text as an alias to #value, for better semantics when creating
// buttons.
getText: '#getValue',
setText: '#setValue',
_setLabel: function(label, nodeName, parent) {
if (parent) {
this[nodeName] = DomElement.set(
this[nodeName] || DomElement.addChild(parent, ['label', {
'for': !this._meta.tag
? 'palettejs-input-' + this._name
: null
}]), 'text', label);
}
},
getLabel: function() {
return this._label;
},
setLabel: function(label) {
this._label = label;
this._setLabel(label, '_labelNode', this._labelCell);
},
getSuffix: function() {
return this._suffix;
},
setSuffix: function(suffix) {
this._suffix = suffix;
this._setLabel(suffix, '_suffixNode', this._cell);
},
getOptions: function() {
return this._options;
},
setOptions: function(options) {
this._options = options;
var setOptions = this._meta.setOptions;
if (setOptions)
setOptions.call(this);
},
isVisible: function() {
return this._visible;
},
setVisible: function(visible) {
// NOTE: Only set the visibility of the whole row if this is a row item,
// in which case this._cell is not defined.
DomElement.toggleClass(this._cell || this._row, 'hidden', !visible);
DomElement.toggleClass(this._labelCell, 'hidden', !visible);
this._visible = !!visible;
},
isEnabled: function() {
return this._enabled;
},
setEnabled: function(enabled, _fromParent) {
if (_fromParent) {
// When called from the parent component, we have to remember the
// component's previous enabled state when disabling the palette,
// so we can restore it when enabling the palette again.
var prev = Base.pick(this._previousEnabled, this._enabled);
this._previousEnabled = enabled ? undefined : prev; // clear
enabled = enabled && prev;
}
DomElement.toggleClass(this._cell || this._row, 'disabled', !enabled);
if (this._components) {
for (var i in this._components)
this._components[i].setEnabled(enabled, true);
} else {
DomElement.set(this._element, 'disabled', !enabled);
}
this._enabled = !!enabled;
},
getRange: function() {
return [parseFloat(DomElement.get(this._element, 'min')),
parseFloat(DomElement.get(this._element, 'max'))];
},
setRange: function(min, max) {
var range = Array.isArray(min) ? min : [min, max];
DomElement.set(this._element, { min: range[0], max: range[1] });
},
getMin: function() {
return this.getRange()[0];
},
setMin: function(min) {
this.setRange(min, this.getMax());
},
getMax: function() {
return this.getRange()[1];
},
setMax: function(max) {
this.setRange(this.getMin(), max);
},
getStep: function() {
return parseFloat(DomElement.get(this._element, 'step'));
},
setStep: function(step) {
DomElement.set(this._element, 'step', step);
},
reset: function() {
if (this._components) {
for (var i in this._components)
this._components[i].reset();
} else {
this.setValue(this._defaultValue);
}
}
});

120
src/ui/Palette.js
View file

@ -1,120 +0,0 @@
/*
* Paper.js - The Swiss Army Knife of Vector Graphics Scripting.
* http://paperjs.org/
*
* Copyright (c) 2011 - 2014, Juerg Lehni & Jonathan Puckey
* http://scratchdisk.com/ & http://jonathanpuckey.com/
*
* Distributed under the MIT license. See LICENSE file for details.
*
* All rights reserved.
*/
/**
* @name Palette
* @class
*/
var Palette = Base.extend(Emitter, /** @lends Palette# */{
_class: 'Palette',
_events: [ 'onChange' ],
// DOCS: Palette#initialize(props)
// DOCS: Palette#initialize(title, components, values)
// DOCS: Palette#components
// DOCS: Palette#values
// DOCS: Palette#remove()
initialize: function Palette(props) {
// Support legacy constructor(title, components, values)
if (!Base.isPlainObject(props)) {
var args = arguments;
props = { title: args[0], components: args[1], values: args[2] };
}
var components = this._components = props.components,
id = this._id = Palette._id = (Palette._id || 0) + 1,
title = props.title,
name = this._name = props.name || (title
? Base.hyphenate(title).replace(/\W/g, '_')
: 'palette-' + this._id);
this._values = props.values || {};
// Create one root component that handles the layout and contains all
// the components.
var root = this._root = new Component(this, null, 'root', components,
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 = props.parent
|| DomElement.find('.palettejs-root')
|| DomElement.find('body').appendChild(
DomElement.create('div', { class: 'palettejs-root' }));
this._element = parent.appendChild(DomElement.create('div', {
class: 'palettejs-palette palettejs-' + root._className,
id: 'palettejs-palette-' + name,
'data-id': id
}, [root._table]));
this._set(props, { components: true, values: true, parent: true });
// Link to the current scope's palettes list.
// TODO: This is the only paper dependency in Palette.js
// Find a way to make it independent.
(this._palettes = paper.palettes).push(this);
Palette._palettes[id] = this;
},
getName: function() {
return this._name;
},
getElement: function() {
return this._element;
},
getComponents: function() {
return this._components;
},
getValues: function() {
return this._values;
},
/**
* @name Palette#reset()
* @function
*
* Resets the values of the components to their
* {@link Component#defaultValue}.
*/
remove: function() {
DomElement.remove(this._element);
var palettes = this._palettes;
var index = palettes.indexOf(this);
var remove = index !== -1;
if (remove)
palettes.splice(index, 1);
return remove;
},
statics: {
_palettes: {},
get: function(idOrElement) {
if (typeof idOrElement === 'object') {
// Support child elements by walking up the parents of the
// element until the palette element is found.
while (idOrElement && !DomElement.hasClass(idOrElement,
'palettejs-palette'))
idOrElement = idOrElement.parentNode;
idOrElement = DomElement.get(idOrElement, 'data-id');
}
return Palette._palettes[idOrElement];
}
}
}, Base.each(['getTitle', 'setTitle', 'isEnabled', 'setEnabled', 'reset'],
function(name) {
this[name] = function() {
var root = this._root;
return root[name].apply(root, arguments);
}
}, {})
);