Slider component

src/components/slider/attributes.js

@@ -0,0 +1,203 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var fontAttrs = require('../../plots/font_attributes');
+var colorAttrs = require('../color/attributes');
+var extendFlat = require('../../lib/extend').extendFlat;
+
+var stepsAttrs = {
+    _isLinkedToArray: true,
+
+    method: {
+        valType: 'enumerated',
+        values: ['restyle', 'relayout', 'animate', 'update'],
+        dflt: 'restyle',
+        role: 'info',
+        description: [
+            'Sets the Plotly method to be called on click.'
+        ].join(' ')
+    },
+    args: {
+        valType: 'info_array',
+        role: 'info',
+        freeLength: true,
+        items: [
+            { valType: 'any' },
+            { valType: 'any' },
+            { valType: 'any' }
+        ],
+        description: [
+            'Sets the arguments values to be passed to the Plotly',
+            'method set in `method` on click.'
+        ].join(' ')
+    },
+    label: {
+        valType: 'string',
+        role: 'info',
+        dflt: '',
+        description: 'Sets the text label to appear on the slider'
+    }
+};
+
+module.exports = {
+    visible: {
+        valType: 'boolean',
+        role: 'info',
+        dflt: true,
+        description: [
+            'Determines whether or not the slider is visible.'
+        ].join(' ')
+    },
+
+    active: {
+        valType: 'string',
+        role: 'info',
+        min: -1,
+        dflt: 0,
+        description: [
+            'Determines which button (by index starting from 0) is',
+            'considered active.'
+        ].join(' ')
+    },
+
+    steps: stepsAttrs,
+
+    updateevent: {
+        valType: 'string',
+        arrayOk: true,
+        role: 'info',
+        description: [
+            'The name of the event to which this component subscribes',
+            'in order to trigger updates. When the event is received',
+            'the component will attempt to update the slider position',
+            'to reflect the value passed as the data property of the',
+            'event. The corresponding step\'s API method is assumed to',
+            'have been triggered externally and so is not triggered again',
+            'when the event is received. If an array is provided, multiple',
+            'events will be subscribed to for updates.'
+        ].join(' ')
+    },
+
+    updatevalue: {
+        valType: 'string',
+        arrayOk: true,
+        role: 'info',
+        description: [
+            'The property of the event data that is matched to a slider',
+            'value when an event of type `updateevent` is received. If',
+            'undefined, the data argument itself is used. If a string,',
+            'that property is used, and if a string with dots, e.g.',
+            '`item.0.label`, then `data[\'item\'][0][\'label\']` will',
+            'be used. If an array, it is matched to the respective',
+            'updateevent item or if there is no corresponding updatevalue',
+            'for a particular updateevent, it is interpreted as `undefined` and defaults to the data property itself.'
+        ].join(' ')
+    },
+
+    lenmode: {
+        valType: 'enumerated',
+        values: ['fraction', 'pixels'],
+        role: 'info',
+        dflt: 'fraction',
+        description: [
+            'Determines whether this color bar\'s length',
+            '(i.e. the measure in the color variation direction)',
+            'is set in units of plot *fraction* or in *pixels.',
+            'Use `len` to set the value.'
+        ].join(' ')
+    },
+    len: {
+        valType: 'number',
+        min: 0,
+        dflt: 1,
+        role: 'style',
+        description: [
+            'Sets the length of the color bar',
+            'This measure excludes the padding of both ends.',
+            'That is, the color bar length is this length minus the',
+            'padding on both ends.'
+        ].join(' ')
+    },
+    x: {
+        valType: 'number',
+        min: -2,
+        max: 3,
+        dflt: -0.05,
+        role: 'style',
+        description: 'Sets the x position (in normalized coordinates) of the slider.'
+    },
+    xpad: {
+        valType: 'number',
+        min: 0,
+        dflt: 10,
+        role: 'style',
+        description: 'Sets the amount of padding (in px) along the x direction'
+    },
+    ypad: {
+        valType: 'number',
+        min: 0,
+        dflt: 10,
+        role: 'style',
+        description: 'Sets the amount of padding (in px) along the x direction'
+    },
+    xanchor: {
+        valType: 'enumerated',
+        values: ['auto', 'left', 'center', 'right'],
+        dflt: 'left',
+        role: 'info',
+        description: [
+            'Sets the slider\'s horizontal position anchor.',
+            'This anchor binds the `x` position to the *left*, *center*',
+            'or *right* of the range selector.'
+        ].join(' ')
+    },
+    y: {
+        valType: 'number',
+        min: -2,
+        max: 3,
+        dflt: 1,
+        role: 'style',
+        description: 'Sets the y position (in normalized coordinates) of the slider.'
+    },
+    yanchor: {
+        valType: 'enumerated',
+        values: ['auto', 'top', 'middle', 'bottom'],
+        dflt: 'bottom',
+        role: 'info',
+        description: [
+            'Sets the slider\'s vertical position anchor',
+            'This anchor binds the `y` position to the *top*, *middle*',
+            'or *bottom* of the range selector.'
+        ].join(' ')
+    },
+
+    font: extendFlat({}, fontAttrs, {
+        description: 'Sets the font of the slider button text.'
+    }),
+
+    bgcolor: {
+        valType: 'color',
+        role: 'style',
+        description: 'Sets the background color of the slider buttons.'
+    },
+    bordercolor: {
+        valType: 'color',
+        dflt: colorAttrs.borderLine,
+        role: 'style',
+        description: 'Sets the color of the border enclosing the slider.'
+    },
+    borderwidth: {
+        valType: 'number',
+        min: 0,
+        dflt: 1,
+        role: 'style',
+        description: 'Sets the width (in px) of the border enclosing the slider.'
+    }
+};

src/components/slider/constants.js

@@ -0,0 +1,85 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+
+'use strict';
+
+
+module.exports = {
+
+    // layout attribute names
+    name: 'sliders',
+    itemName: 'slider',
+
+    // class names
+    containerClassName: 'slider-container',
+    groupClassName: 'slider-group',
+    inputAreaClass: 'slider-input-area',
+    railRectClass: 'slider-rail-rect',
+    railTouchRectClass: 'slider-rail-touch-rect',
+    gripRectClass: 'slider-grip-rect',
+    tickRectClass: 'slider-tick-rect',
+    inputProxyClass: 'slider-input-proxy',
+
+    railHeight: 5,
+
+    // DOM attribute name in button group keeping track
+    // of active update menu
+    menuIndexAttrName: 'slider-active-index',
+
+    // id root pass to Plots.autoMargin
+    autoMarginIdRoot: 'slider-',
+
+    // min item width / height
+    minWidth: 30,
+    minHeight: 30,
+
+    // padding around item text
+    textPadX: 40,
+
+    // font size to height scale
+    fontSizeToHeight: 1.3,
+
+    // item rect radii
+    rx: 2,
+    ry: 2,
+
+    // item  text x offset off left edge
+    textOffsetX: 12,
+
+    // item  text y offset (w.r.t. middle)
+    textOffsetY: 3,
+
+    // arrow offset off right edge
+    arrowOffsetX: 4,
+
+    railRadius: 2,
+    railWidth: 5,
+    railBorder: 4,
+    railBorderColor: '#bec8d9',
+    railBgColor: '#ebedf0',
+
+
+    gripRadius: 10,
+    gripWidth: 20,
+    gripHeight: 20,
+    gripBorder: 20,
+    gripBorderWidth: 1,
+    gripBorderColor: '#bec8d9',
+    gripBgColor: '#ebedf0',
+    gripBgActiveColor: '#dbdde0',
+
+    // Padding in the direction perpendicular to the length of the rail:
+    // (which, at the moment is always vertical, but for the sake of the future...)
+    widthPadding: 10,
+
+    tickWidth: 1,
+    tickColor: '#333',
+    tickOffset: 25,
+    tickLength: 7,
+};

src/components/slider/defaults.js

@@ -0,0 +1,103 @@
+/**
+* Copyright 2012-2016, Plotly, Inc.
+* All rights reserved.
+*
+* This source code is licensed under the MIT license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+'use strict';
+
+var Lib = require('../../lib');
+
+var attributes = require('./attributes');
+var contants = require('./constants');
+
+var name = contants.name;
+var stepAttrs = attributes.steps;
+
+
+module.exports = function slidersDefaults(layoutIn, layoutOut) {
+    var contIn = Array.isArray(layoutIn[name]) ? layoutIn[name] : [],
+        contOut = layoutOut[name] = [];
+
+    for(var i = 0; i < contIn.length; i++) {
+        var sliderIn = contIn[i] || {},
+            sliderOut = {};
+
+        sliderDefaults(sliderIn, sliderOut, layoutOut);
+
+        // used on button click to update the 'active' field
+        sliderOut._input = sliderIn;
+
+        // used to determine object constancy
+        sliderOut._index = i;
+
+        contOut.push(sliderOut);
+    }
+};
+
+function sliderDefaults(sliderIn, sliderOut, layoutOut) {
+
+    function coerce(attr, dflt) {
+        return Lib.coerce(sliderIn, sliderOut, attributes, attr, dflt);
+    }
+
+    var steps = stepsDefaults(sliderIn, sliderOut);
+
+    var visible = coerce('visible', steps.length > 0);
+    if(!visible) return;
+
+    coerce('active');
+
+    coerce('x');
+    coerce('y');
+    Lib.noneOrAll(sliderIn, sliderOut, ['x', 'y']);
+
+    coerce('xanchor');
+    coerce('yanchor');
+
+    coerce('len');
+    coerce('lenmode');
+
+    coerce('xpad');
+    coerce('ypad');
+
+    coerce('updateevent');
+    coerce('updatevalue');
+
+    Lib.coerceFont(coerce, 'font', layoutOut.font);
+
+    coerce('bgcolor', layoutOut.paper_bgcolor);
+    coerce('bordercolor');
+    coerce('borderwidth');
+}
+
+function stepsDefaults(sliderIn, sliderOut) {
+    var valuesIn = sliderIn.steps || [],
+        valuesOut = sliderOut.steps = [];
+
+    var valueIn, valueOut;
+
+    function coerce(attr, dflt) {
+        return Lib.coerce(valueIn, valueOut, stepAttrs, attr, dflt);
+    }
+
+    for(var i = 0; i < valuesIn.length; i++) {
+        valueIn = valuesIn[i];
+        valueOut = {};
+
+        if(!Lib.isPlainObject(valueIn) || !Array.isArray(valueIn.args)) {
+            continue;
+        }
+
+        coerce('method');
+        coerce('args');
+        coerce('label');
+
+        valueOut._index = i;
+        valuesOut.push(valueOut);
+    }
+
+    return valuesOut;
+}