From f4a36b7cd40b899448693ab6add7e8b6714f7b26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=BCrg=20Lehni?= Date: Wed, 8 Oct 2014 17:43:03 +0200 Subject: [PATCH] Remove all Palette and Component related code, as it is separated into its own project. https://github.com/lehni/palette.js --- src/dom/DomElement.js | 152 --------------- src/paper.js | 5 - src/ui/Component.js | 438 ------------------------------------------ src/ui/Palette.js | 120 ------------ 4 files changed, 715 deletions(-) delete mode 100644 src/ui/Component.js delete mode 100644 src/ui/Palette.js diff --git a/src/dom/DomElement.js b/src/dom/DomElement.js index 17ce5443..1a41f7c7 100644 --- a/src/dom/DomElement.js +++ b/src/dom/DomElement.js @@ -16,36 +16,6 @@ * @private */ 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 function handlePrefix(el, name, set, value) { var prefixes = ['', 'webkit', 'moz', 'Moz', 'ms', 'o'], @@ -65,54 +35,6 @@ 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; - }, - - 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) { // If el is a document (nodeType == 9), use it directly var doc = el && el.nodeType !== 9 ? el.ownerDocument : el, @@ -120,80 +42,6 @@ var DomElement = new function() { 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) { var doc = el.ownerDocument, body = doc.body, diff --git a/src/paper.js b/src/paper.js index 76d6de2b..89087301 100644 --- a/src/paper.js +++ b/src/paper.js @@ -117,11 +117,6 @@ var paper = new function(undefined) { /*#*/ include('ui/Key.js'); /*#*/ include('ui/MouseEvent.js'); -/*#*/ if (__options.palette) { -/*#*/ include('ui/Component.js'); -/*#*/ include('ui/Palette.js'); -/*#*/ } - /*#*/ include('tool/ToolEvent.js'); /*#*/ include('tool/Tool.js'); diff --git a/src/ui/Component.js b/src/ui/Component.js deleted file mode 100644 index c9b66347..00000000 --- a/src/ui/Component.js +++ /dev/null @@ -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); - } - } -}); diff --git a/src/ui/Palette.js b/src/ui/Palette.js deleted file mode 100644 index f74840a1..00000000 --- a/src/ui/Palette.js +++ /dev/null @@ -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); - } - }, {}) -);