@domoinc/domo-select
Version:
DomoSelect - Domo Widget
251 lines (221 loc) • 8.22 kB
JavaScript
var d3 = require('d3');
var d3Chart = require('d3.chart');
var BaseWidget = require('@domoinc/base-widget');
require('style!css!./styles/da-button.css');
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
// Button:
// Domo UI widget for buttons.
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
module.exports = BaseWidget.extend('Button', {
//**********************************************************************************
// Initialization
//**********************************************************************************
initialize: function() {
"use strict";
var _Chart = this;
var button = _Chart._layerGroup;
var buttonContent;
this.transform = function(data) {
var validData = _Chart.validateData(data);
validateInitialIndex(validData);
if (validData.length) {
if (_Chart.c('staticValue')) {
_Chart.c('textElement')
.text(_Chart.c('staticValue'));
} else {
_Chart.c('textElement')
.text(_Chart.a('Label')(validData[_Chart.c('selectedIndex')]));
}
button.datum(validData[_Chart.c('selectedIndex')]);
}
updateConfigs();
return validData;
};
//----------------------------------------------------------------------------------
// Config
//----------------------------------------------------------------------------------
this._newConfig = {
centerText: {
description: 'Centers the button text',
type: 'boolean',
value: false,
},
chartName: {
description: 'Name of chart for Reporting.',
type: 'string',
value: 'Button'
},
disabled: {
description: 'Property Description',
type: 'boolean',
value: false,
},
height: {
description: 'Buttons Height',
type: 'string',
value: 'auto',
},
leftIconElement: {
description: 'Div element for the left icon',
type: 'd3 selection',
value: null,
},
margin: {
description: 'Property Description',
type: 'string',
value: '0px 0px 0px 0px',
},
orientation: {
description: 'Determines if the botton is vertical or horizontal',
type: 'string',
value: 'horizontal',
},
rightIconElement: {
description: 'Div element for the right icon',
type: 'd3 selection',
value: null,
},
showChevron: {
description: 'Determines if the chevron should be visible',
type: 'boolean',
value: true,
},
size: {
description: 'Determines the size of the theme',
type: 'string',
value: 'sz-sm',
},
textElement: {
description: 'Div element containing the button text',
type: 'd3 selection',
value: null,
},
theme: {
description: 'Determines the theme of the theme',
type: 'string',
value: 'thm-light-grey',
},
width: {
description: 'Buttons Width',
type: 'string',
value: '250px',
},
selectedIndex: {
description: 'Selected Index to get the label from',
type: 'number',
value: 0
},
staticValue: {
// name: 'Static Value',
description: 'Sets a static default value on the select',
type: 'string',
value: null
},
};
// Update config object from base chart.
this.mergeConfig(_Chart._newConfig);
//----------------------------------------------------------------------------------
// Data Definition:
//----------------------------------------------------------------------------------
_Chart._newDataDefinition = {
'Label': {
type: 'string',
validate: function(d) { return this.accessor(d) !== undefined; },
accessor: function(line) { return (line && line[0] !== undefined) ? String(line[0]) : undefined; },
}
};
// Update data defs object from base chart.
this.mergeDataDefinition(_Chart._newDataDefinition);
//----------------------------------------------------------------------------------
// Interface - This is where you document your events. The chart's .on()' and
// '.trigger()' methods will go here.
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
// Static - Anything that is defined here will never change
//----------------------------------------------------------------------------------
button.attr('class', 'da-btn ' + _Chart.c('size') + ' ' + _Chart.c('theme'))
.attr('tabindex', 1)
.on("click", function(d) {
_Chart.trigger('dispatch:click', d);
})
.on('focusout', function() {
_Chart.trigger('dispatch:focusout');
})
.on('blur', function() {
_Chart.trigger('dispatch:blur');
});
buttonContent = button.append('div')
.attr('class', 'btn-content');
_Chart.c('leftIconElement', buttonContent.append("div")
.attr('class', 'btn-icon-left')
);
_Chart.c('textElement', buttonContent.append("div")
.attr('class', 'btn-text truncate')
.text('')
);
_Chart.c('rightIconElement', buttonContent.append("div")
.attr('class', 'btn-icon-right')
)
_Chart.c('rightIconElement')
.append('div')
.attr('class', 'chevron hidden')
.append('svg')
.attr('viewBox', '0 0 7.4 5')
.append('path')
.attr('d', 'm 3.2 5 l -3.2 -3.36 l 0.64 -0.64 l 2.56 2.64 l 2.56 -2.64 l 0.64 0.64 l -3.2 3.36 l 0 0 Z')
//----------------------------------------------------------------------------------
// Helper Functions
//----------------------------------------------------------------------------------
function removeClassbyPrefix(c, p) {
var r = new RegExp(p + '-\\w+(-\\w+)*');
return c.replace(r, '');
}
/**
* ensure the initial index is within the range of the data length
*/
function validateInitialIndex(validData) {
if (_Chart.c('selectedIndex') < 0) {
_Chart.c('selectedIndex', 0);
return;
} else if (_Chart.c('selectedIndex') > validData.length - 1) {
_Chart.c('selectedIndex', validData.length - 1);
return;
}
return;
}
function updateConfigs() {
button.select('.btn-text').classed('center', _Chart.c('centerText')); //centerText
button.classed('disabled', _Chart.c('disabled')); //disabled
button.style('height', _Chart.c('height')); //height
button.style('margin', _Chart.c('margin')); //margin
button.classed('rotate', _Chart.c('orientation') === 'vertical'); //orientation
//showChevron
button.select('.btn-text').style('width', '95%'); // this measurement will need to be recalculated if left or right icons edited
button.select('.btn-icon-right')
.style('width', '0%')
.style('position', 'absolute')
// .style('right', '15px')
.style('right', function() {
if (_Chart.c('size') === 'sz-sm') {
return '15px';
} else if (_Chart.c('size') === 'sz-md') {
return '17px';
} else if (_Chart.c('size') === 'sz-lg') {
return '19px';
}
})
button.select('.chevron').classed('hidden', !_Chart.c('showChevron'));
//size
var classesSize = removeClassbyPrefix(button.attr('class'), 'sz');
classesSize += ' ' + _Chart.c('size');
button.attr('class', classesSize);
//theme (color)
var classesTheme = removeClassbyPrefix(button.attr('class'), 'thm');
classesTheme += ' ' + _Chart.c('theme');
button.attr('class', classesTheme);
button.style('width', (parseInt(_Chart.c('width')) - 2) + 'px'); //width
}
}
});