@domoinc/domo-select
Version:
DomoSelect - Domo Widget
538 lines (484 loc) • 16.9 kB
JavaScript
/*! Copyright 2016 Domo Inc. */
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("d3"), require("d3.chart"), require("@domoinc/base-widget"), require("@domoinc/dropdown"), require("@domoinc/button"));
else if(typeof define === 'function' && define.amd)
define(["d3", "d3.chart", "base-widget", "dropdown", "button"], factory);
else if(typeof exports === 'object')
exports["DomoSelect"] = factory(require("d3"), require("d3.chart"), require("@domoinc/base-widget"), require("@domoinc/dropdown"), require("@domoinc/button"));
else
root["DomoSelect"] = factory(root["d3"], root["d3.chart"], root["BaseWidget"], root["Dropdown"], root["Button"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__, __WEBPACK_EXTERNAL_MODULE_2__, __WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/dist/";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
var d3 = __webpack_require__(1);
var d3Chart = __webpack_require__(2);
var BaseWidget = __webpack_require__(3);
var Dropdown = __webpack_require__(4);
var Button = __webpack_require__(5);
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
// DomoSelect:
// This is where you can give some high level documentation of your widget.
//----------------------------------------------------------------------------------
//----------------------------------------------------------------------------------
module.exports = BaseWidget.extend('DomoSelect', {
//**********************************************************************************
// Anything in the initialization method will only run once.
// i.e. It will not be run every time you call draw.
//**********************************************************************************
initialize: function() {
// Make the chart constructor accessible to all other methods.
var _Chart = this;
var _selectedValue;
_Chart.transform = processData;
this._newConfig = {
//Plugin configurable configs
width: {
name: 'Widget Width',
description: 'Width of the widget',
value: 250,
type: 'number',
units: 'px'
},
size: {
description: 'Size of the button and the dropdown',
type: 'string',
value: 'small',
},
centerText: {
name: 'Text Position',
description: 'Set the text position',
type: 'select',
value: { name: 'Left', value: false },
options: [
{ name: 'Left', value: false },
{ name: 'Center', value: true },
]
},
color: {
description: 'Color of the dropdown button',
type: 'string',
value: 'lightGrey',
onChange: function(val) {
var theme;
switch (val) {
case 'clear':
theme = 'thm-clear';
break;
case 'lightGrey':
theme = 'thm-light-grey';
break;
case 'lightGreyInvert':
theme = 'thm-light-grey-invert';
break;
case 'none':
theme = 'thm-none';
break;
case 'darkGrey':
theme = 'thm-dark-grey';
break;
case 'orange':
theme = 'thm-orange';
break;
case 'orangeInvert':
theme = 'thm-orange-invert';
break;
case 'green':
theme = 'thm-green';
break;
case 'greenInvert':
theme = 'thm-green-invert';
break;
case 'red':
theme = 'thm-red';
break;
case 'redInvert':
theme = 'thm-red-invert';
break;
default:
theme = val;
break;
}
_Chart.button.c({ theme: theme })
}
},
initialIndex: {
name: 'Initial Selection',
description: 'Sets the default option to show on the select bar (the number corresponds to the options\' order number in the dropdown)',
type: 'number',
value: 0,
},
domoScroll: {
name: 'Show Scroll Bar',
description: 'Shows the scroll bar to the right of the dropdown',
type: 'select',
value: { name: 'Hide', value: false },
options: [
{ name: 'Show', value: true },
{ name: 'Hide', value: false },
]
},
//widget default configs
chartName: {
description: 'Name of chart for reporting',
type: 'string',
value: 'Dropdown'
},
height: {
description: 'Height of the select',
type: 'string',
value: '250px',
},
marginBottom: {
description: 'Margin Bottom',
type: 'string',
value: '0px'
},
listIconPadding: {
description: 'Left padding on the dropdown',
type: 'number',
value: 0,
},
staticValue: {
description: 'Sets a static default value on the select',
type: 'string',
value: null
},
dropdownLocation: {
description: 'Direction that the dropdown extends from',
type: 'string',
value: 'bottom'
},
orientation: {
description: 'Orientation of the button',
type: 'string',
value: 'horizontal',
},
popoutHeight: {
description: 'Height of the dropdown when opened',
type: 'number',
value: '250px',
},
buttonIcon: {
description: 'd3 selection of the element for the button icon',
type: 'd3 selection',
value: null
},
listIconFunction: {
description: 'Function to run on each dropdown list item for icons.',
type: 'function',
value: function() {}
},
disabled: {
description: 'Disables the dropdown',
type: 'boolean',
value: false,
}
};
// Update config object from base chart.
this.mergeConfig(_Chart._newConfig);
//----------------------------------------------------------------------------------
// Accessor Functions:
// Set functions on how to access data values
//----------------------------------------------------------------------------------
_Chart._newDataDefinition = {
'Label': {
type: 'string',
validate: function(d) {
return this.accessor(d) !== 'undefined';
},
accessor: function(line) {
return String(line[0]);
},
},
'Value': {
type: 'string',
validate: function(d) {
return this.accessor(d) !== 'undefined';
},
accessor: function(line) {
return String(line[1]);
},
}
};
// Update data defs object from base chart.
this.mergeDataDefinition(_Chart._newDataDefinition);
_Chart.widgetContainer = this._layerGroup
.attr('class', 'da-domo-select');
// Add button to widget
_Chart.button = this.widgetContainer
.chart('Button')
.c('theme', 'thm-light-grey')
// Add dropdown to widget
_Chart.dropdown = this.widgetContainer
.chart('Dropdown');
// Attach charts to _Chart object
this.attach('button', _Chart.button);
this.attach('dropdown', _Chart.dropdown);
_Chart._dropdownOpen = _Chart.dropdown.c('visible');
// Click event handles
_Chart.button.on('dispatch:click', function(d) {
displayDropdown();
_Chart.dropdown.toggleVisibility();
_Chart._dropdownOpen = _Chart.dropdown.c('visible');
})
.on('dispatch:focusout', function() {
if (_Chart._dropdownOpen) {
_Chart._dropdownOpen = false;
setTimeout(function() {
_Chart.dropdown.toggleVisibility();
}, 250)
}
})
.on('dispatch:blur', function() {
if (_Chart._dropdownOpen) {
_Chart._dropdownOpen = false;
setTimeout(function() {
_Chart.dropdown.toggleVisibility();
}, 250)
}
})
_Chart.dropdown.on('click', function(d, i) {
if (!_Chart.c('staticValue')) {
_Chart.button.c('textElement')
.text(_Chart.a('Label')(d))
}
_Chart.trigger('valueSelected', d, i);
_selectedValue = d;
_Chart.trigger('dispatch:selection', { data: _selectedValue });
});
//************************************************
//Puts the dropdown where it needs to go on click
//************************************************
function displayDropdown() {
var dropdownStyle = {};
var boxShadow = 3;
var padding = 7;
var containerBBox = _Chart.base.node().getBoundingClientRect();
var dropdownBBox = _Chart.dropdown.dropdownContainer.node().getBoundingClientRect();
var buttonBBox = _Chart._layerGroup.select('.da-btn').node().getBoundingClientRect();
var marginLeft = buttonBBox.left - containerBBox.left;
var marginTop = buttonBBox.top - containerBBox.top;
switch (_Chart.c('dropdownLocation')) {
// switch(_Chart.c('dropdownLocation').value) {
case 'bottom':
dropdownStyle.display = 'list-item'
break;
case 'top':
dropdownStyle.top = (marginTop - padding) + (-dropdownBBox.height - (boxShadow * 2) - padding) + 'px'
break;
case 'right':
dropdownStyle.left = marginLeft + (buttonBBox.width + (boxShadow * 2) + padding) + 'px'
dropdownStyle.top = marginTop + -(boxShadow * 2) + 'px'
break;
case 'left':
dropdownStyle.right = marginLeft + (buttonBBox.width + (boxShadow * 2) + padding) + 'px'
dropdownStyle.top = marginTop + -(boxShadow * 2) + 'px'
break;
}
_Chart.dropdown.dropdownContainer.style(dropdownStyle)
}
//**********************************************************************************
// processData: Called before dataBind on the layers
// the data returned is passed into dataBind.
//**********************************************************************************
function processData(onDrawData) {
if (_Chart.c('width') < 50) {
_Chart.c('width', 50);
}
//find size abbreviation for corresponding small, medium, and large values
var buttonSize;
if (_Chart.c('size') === 'small') {
buttonSize = 'sz-sm';
} else if (_Chart.c('size') === 'medium') {
buttonSize = 'sz-md';
} else if (_Chart.c('size') === 'large') {
buttonSize = 'sz-lg';
}
// Set properties of the dropdown based off this charts config
_Chart.dropdown.c({
width: _Chart.c('width'),
height: _Chart.c('popoutHeight'),
size: _Chart.c('size'),
visible: false,
selectedIndex: _Chart.c('initialIndex'),
domoScroll: !_Chart.c('domoScroll').value,
listIconFunction: _Chart.c('listIconFunction'),
listIconPadding: _Chart.c('listIconPadding'),
}).a({
Label: _Chart.a('Label'),
Value: _Chart.a('Value')
})
// Set properties of the button based off this charts config
_Chart.button.c({
width: _Chart.c('width'),
size: buttonSize,
orientation: _Chart.c('orientation'),
centerText: _Chart.c('centerText').value,
selectedIndex: _Chart.c('initialIndex'),
showChevron: true,
disabled: _Chart.c('disabled'),
staticValue: _Chart.c('staticValue')
}).a({
Label: _Chart.a('Label')
})
if (_Chart.c('staticValue')) {
_Chart.button.c('textElement').text(_Chart.c('staticValue'));
} else if (onDrawData && _Chart.c('initialIndex') < onDrawData.length && _Chart.c('initialIndex') > -1) {
_selectedValue = onDrawData[_Chart.c('initialIndex')];
_Chart.button.c('textElement').text(_Chart.a('Label')(_selectedValue))
}
_Chart.c('buttonIcon', _Chart.button.c('leftIconElement'));
_Chart.widgetContainer.style({
'margin-bottom': _Chart.c('marginBottom')
});
return onDrawData;
}
_Chart.reset = function() {
_Chart.dropdown.setSelectedValueByIndex(_Chart.c('initialIndex'));
};
_Chart.setSelectedValue = function(label) {
_Chart.dropdown.setSelectedValueByLabel(label);
};
_Chart.getSelectedValue = function() {
return _selectedValue;
};
},
//************************************************
//Legacy Getter/Setters for backwards compatibility
//************************************************
disabled: function(_) {
if (arguments.length === 0) {
return this.c('disabled');
}
this.c('disabled', _);
return this;
},
marginBottom: function(_) {
if (arguments.length === 0) {
return this.c('marginBottom');
}
this.c('marginBottom', _);
return this;
},
width: function(_) {
if (arguments.length === 0) {
return this.c('width');
}
this.c('width', _)
return this;
},
popoutHeight: function(_) {
if (arguments.length === 0) {
return this.c('popoutHeight');
}
this.c('popoutHeight', _);
return this;
},
size: function(_) {
if (arguments.length === 0) {
return this.c('size');
}
this.c('size', _);
return this;
},
color: function(_) {
if (arguments.length === 0) {
return this.c('color');
}
this.c('color', _);
return this;
},
center: function(_) {
if (arguments.length === 0) {
return this.c('centerText');
}
this.c('centerText', _);
return this;
},
orientation: function(_) {
if (arguments.length === 0) {
return this.c('orientation');
}
this.c('orientation', _);
return this;
},
dropdownLocation: function(_) {
if (arguments.length === 0) {
return this.c('dropdownLocation');
}
this.c('dropdownLocation', _);
return this;
},
staticValue: function(_) {
if (arguments.length === 0) {
return this.c('staticValue');
}
this.c('staticValue', _);
return this;
},
initialIndex: function(_) {
if (arguments.length === 0) {
return this.c('initialIndex');
}
this.c('initialIndex', _);
return this;
}
});
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
/***/ }),
/* 4 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
/***/ }),
/* 5 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_5__;
/***/ })
/******/ ])
});
;