react-widgetconfigurator
Version:
A React app for to generate out of box widgets
220 lines (193 loc) • 19.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = undefined;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _class;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactstrap = require('reactstrap');
var _mobxReact = require('mobx-react');
var _reactCopyToClipboard = require('react-copy-to-clipboard');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var CopyModal = (0, _mobxReact.observer)(_class = function (_React$Component) {
_inherits(CopyModal, _React$Component);
function CopyModal(props) {
_classCallCheck(this, CopyModal);
var _this = _possibleConstructorReturn(this, (CopyModal.__proto__ || Object.getPrototypeOf(CopyModal)).call(this, props));
_this.state = {
modal: false,
value: '',
valuewithoutscript: '',
copied: false,
copiedwithoutscript: false,
widgetselections: "",
chartselections: ""
};
_this.toggle = _this.toggle.bind(_this);
return _this;
}
_createClass(CopyModal, [{
key: 'toggle',
value: function toggle() {
this.setState({
modal: !this.state.modal
});
}
}, {
key: 'componentWillMount',
value: function componentWillMount() {
var customstyles = " <style id=\"sstyles\">\r\n\r\n .aculistmastergrid-container { \r\n justify-content: center;\r\n }\r\n\r\n .aculistkpigrid-item { \r\n -ms-flex-direction: column;\r\n flex-direction: column;\r\n border: none!important;\r\n padding: 5px 30px 25px 30px;\r\n }\r\n .aculistkpigrid-measurelogo {\r\n background-repeat: no-repeat!important;\r\n grid-column: 1;\r\n -ms-grid-row-span: 2;\r\n column-count: 1;\r\n grid-row: 1\/3;\r\n justify-self: center;\r\n align-self: center;\r\n-webkit-box-ordinal-group: 1;\r\n -moz-box-ordinal-group: 1;\r\n -ms-flex-order: 1;\r\n -webkit-order: 1;\r\n order: 1;\r\n margin-right: 10px;\r\n}\r\n \r\n .aculistkpigrid-measure {\r\n display: inline-block;\r\n display: flex; \r\n -ms-grid-column: 2;\r\n grid-column: 2;\r\n justify-self: center!important;\r\n -ms-flex-item-align: center!important;\r\n -ms-grid-row-align: center!important;\r\n align-self: center!important;\r\n justify-self: center!important;\r\n -webkit-box-ordinal-group: 2;\r\n -moz-box-ordinal-group: 2;\r\n -ms-flex-order: 2;\r\n -webkit-order: 2;\r\n order: 2;\r\n font-family:Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif!important;\r\n font-size: 1.75rem;\r\n font-weight:700;\r\n margin-bottom: -10px; \r\n \r\n }\r\n \r\n .aculistkpigrid-measurelabel {\r\n grid-column: 2; \r\n justify-self: center; \r\n -webkit-box-ordinal-group: 3;\r\n -moz-box-ordinal-group: 3;\r\n -ms-flex-order: 3;\r\n -webkit-order: 3;\r\n order: 3;\r\n font-family:Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif!important;\r\n font-size: .95rem;\r\n font-weight:400;\r\n \r\n }\r\n .aculistdisclaimer-holder\r\n {\r\n font-family:Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif!important;\r\n font-size: .85rem;\r\n font-weight:400;\r\n }\r\n\r\n .aculistattribution-label{\r\n font-family:Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif!important;\r\n font-size: .75rem;\r\n font-weight:400;\r\n }\r\n\r\n .aculisttitle-holder {\r\n font-family:Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif!important;\r\n font-size: 1.85rem;\r\n font-weight:700;\r\n padding:20px 0px;\r\n}\r\n\r\n.aculistattribution-holder {\r\n padding-bottom: 20px; \r\n}\r\n\r\n@supports (display: -webkit-flex) {\r\n.aculistkpigrid-container {\r\n -webkit-align-items: center;\r\n align-items:center;\r\n -webkit-justify-content: center; \r\n justify-content: center;\r\n}\r\n}\r\n\r\n <\/style> ";
var chartselections = _extends({}, this.state.chartselections);
var widgetselections = _extends({}, this.state.widgetselections);
var value = void 0,
valuewithoutscript = '';
var copied = this.state.copied;
var widgettype = void 0,
geotype = void 0,
geoname = void 0,
tokenid = void 0,
colors = void 0,
period = void 0,
periodtype = void 0,
classtype = void 0,
usertoken = void 0,
geocounty = void 0;
widgettype = this.props.wtype;
tokenid = this.props.tokenid;
geotype = this.props.widgetselections.geo[0].split(':')[0];
geoname = this.props.widgetselections.geo[0].split(':')[1];
geocounty = this.props.widgetselections.geo[0].split(':')[2];
period = this.props.widgetselections.period;
periodtype = this.props.widgetselections.periodtype;
colors = widgettype == 'trends' ? this.props.chartselections.colors : "";
classtype = this.props.widgetselections.classtype;
usertoken = this.props.widgetselections.usertoken;
var script = " <script>(function () {" + " var bi = document.createElement('script');" + " bi.type = 'text/javascript';" + "bi.async = true;" + "bi.src = 'https://aculist-widget-assets.azureedge.net/aculist-embed-widgetdiv.js?v=3.2';" + "var s = document.getElementsByTagName('body')[0];" + "s.appendChild(bi);" + "})();" + "</script>";
//const scriptdivblocktrends="<div id=\'test\' data-widgettype="+"'"+widgettype+"'"+" data-aculistwidget=\"\" data-geographytype="+ "'"+geotype+"'"+" data-geographyname="+"'"+ geoname +"'"+" data-colors="+"'"+colors+"'"+ " data-period="+"'"+period+"'"+ " data-periodtype="+"'"+periodtype+"'"+ " data-tokenid="+"'"+tokenid+"'"+ " data-title=true\" ><\/div>";
//Default parameters for period, periodtype, and colors
//const scriptdivblocktrends="<div id=\'test\' data-widgettype="+"'"+widgettype+"'"+" data-aculistwidget=\"\" data-geographytype="+ "'"+geotype+"'"+" data-geographyname="+"'"+ geoname +"'"+ " data-tokenid="+"'"+tokenid+"'"+ " data-title=true\" ><\/div>";
var scriptdivblocktrends = "<div id=\'test\' data-widgettype=" + "'" + widgettype + "'" + " data-aculistwidget=\"\" data-geographytype=" + "'" + geotype + "'" + " data-geographyname=" + "'" + geoname + "'" + " data-county=" + "'" + geocounty + "'" + " data-colors=" + "'" + colors + "'" + " data-period=" + "'" + period + "'" + " data-periodtype=" + "'" + periodtype + "'" + " data-tokenid=" + "'" + tokenid + "'" + " data-classtype=" + "'" + classtype + "'" + " data-usertoken=" + "'" + usertoken + "'" + " data-title=true\" ><\/div>";
var scriptdivblockkpi1row = "<div id=\'test\' data-styleid=\"sstyles\" data-widgettype=" + "'" + widgettype + "'" + " data-aculistwidget=\"\" data-geographytype=" + "'" + geotype + "'" + " data-geographyname=" + "'" + geoname + "'" + " data-county=" + "'" + geocounty + "'" + " data-tokenid=" + "'" + tokenid + "'" + " data-usertoken=" + "'" + usertoken + "'" + " data-title=\'true\' data-displaycolumns=\'3\' data-themecolor='black'\" ><\/div>";
var scriptdivblockkpi2columns = "<div id=\'test\' data-widgettype=" + "'" + widgettype + "'" + " data-aculistwidget=\"\" data-geographytype=" + "'" + geotype + "'" + " data-geographyname=" + "'" + geoname + "'" + " data-county=" + "'" + geocounty + "'" + " data-tokenid=" + "'" + tokenid + "'" + " data-usertoken=" + "'" + usertoken + "'" + " data-title=true data-displaycolumns=\'2\' data-themecolor=\'black\'\" ><\/div>";
value = widgettype == 'trends' ? script + scriptdivblocktrends : tokenid == 'default1row' ? customstyles + script + scriptdivblockkpi1row : script + scriptdivblockkpi2columns;
valuewithoutscript = widgettype == 'trends' ? scriptdivblocktrends : tokenid == 'default1row' ? customstyles + scriptdivblockkpi1row : scriptdivblockkpi2columns;
//}
this.setState({ value: value, valuewithoutscript: valuewithoutscript, copied: false });
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
console.log('props user token', nextProps.widgetselections);
console.log('testreceiveprops', this.state.copied);
var chartselections = _extends({}, this.state.chartselections);
var widgetselections = _extends({}, this.state.widgetselections);
var customstyles = " <style id=\"sstyles\">\r\n\r\n .aculistmastergrid-container { \r\n justify-content: center;\r\n }\r\n\r\n .aculistkpigrid-item { \r\n -ms-flex-direction: column;\r\n flex-direction: column;\r\n border: none!important;\r\n padding: 5px 30px 25px 30px;\r\n }\r\n .aculistkpigrid-measurelogo {\r\n background-repeat: no-repeat!important;\r\n grid-column: 1;\r\n -ms-grid-row-span: 2;\r\n column-count: 1;\r\n grid-row: 1\/3;\r\n justify-self: center;\r\n align-self: center;\r\n-webkit-box-ordinal-group: 1;\r\n -moz-box-ordinal-group: 1;\r\n -ms-flex-order: 1;\r\n -webkit-order: 1;\r\n order: 1;\r\n margin-right: 10px;\r\n}\r\n \r\n .aculistkpigrid-measure {\r\n display: inline-block;\r\n display: flex; \r\n -ms-grid-column: 2;\r\n grid-column: 2;\r\n justify-self: center!important;\r\n -ms-flex-item-align: center!important;\r\n -ms-grid-row-align: center!important;\r\n align-self: center!important;\r\n justify-self: center!important;\r\n -webkit-box-ordinal-group: 2;\r\n -moz-box-ordinal-group: 2;\r\n -ms-flex-order: 2;\r\n -webkit-order: 2;\r\n order: 2;\r\n font-family:Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif!important;\r\n font-size: 1.75rem;\r\n font-weight:700;\r\n margin-bottom: -10px; \r\n \r\n }\r\n \r\n .aculistkpigrid-measurelabel {\r\n grid-column: 2; \r\n justify-self: center; \r\n -webkit-box-ordinal-group: 3;\r\n -moz-box-ordinal-group: 3;\r\n -ms-flex-order: 3;\r\n -webkit-order: 3;\r\n order: 3;\r\n font-family:Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif!important;\r\n font-size: .95rem;\r\n font-weight:400;\r\n \r\n }\r\n .aculistdisclaimer-holder\r\n {\r\n font-family:Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif!important;\r\n font-size: .85rem;\r\n font-weight:400;\r\n }\r\n\r\n .aculistattribution-label{\r\n font-family:Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif!important;\r\n font-size: .75rem;\r\n font-weight:400;\r\n }\r\n\r\n .aculisttitle-holder {\r\n font-family:Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif!important;\r\n font-size: 1.85rem;\r\n font-weight:700;\r\n padding:20px 0px;\r\n}\r\n\r\n.aculistattribution-holder {\r\n padding-bottom: 20px; \r\n}\r\n\r\n@supports (display: -webkit-flex) {\r\n.aculistkpigrid-container {\r\n -webkit-align-items: center;\r\n align-items:center;\r\n -webkit-justify-content: center; \r\n justify-content: center;\r\n}\r\n}\r\n\r\n <\/style> ";
var value = void 0,
valuewithoutscript = '';
var copied = this.state.copied;
var widgettype = void 0,
geotype = void 0,
geoname = void 0,
tokenid = void 0,
period = void 0,
periodtype = void 0,
colors = void 0,
classtype = void 0,
usertoken = void 0,
geocounty = void 0;
widgettype = nextProps.wtype;
tokenid = nextProps.tokenid;
// if (nextProps.widgetselections.geo==='undefined')
// {
geotype = nextProps.widgetselections.geo[0].split(':')[0];
geoname = nextProps.widgetselections.geo[0].split(':')[1];
geocounty = nextProps.widgetselections.geo[0].split(':')[2];
period = nextProps.widgetselections.period;
periodtype = nextProps.widgetselections.periodtype;
//colors=nextProps.chartselections.colors;
colors = widgettype == 'trends' ? this.props.chartselections.colors : "";
classtype = nextProps.widgetselections.classtype;
usertoken = nextProps.widgetselections.usertoken;
var script = " <script>(function () {" + " var bi = document.createElement('script');" + " bi.type = 'text/javascript';" + "bi.async = true;" + "bi.src = 'https://aculist-widget-assets.azureedge.net/aculist-embed-widgetdiv.js?v=3.0';" + "var s = document.getElementsByTagName('body')[0];" + "s.appendChild(bi);" + "})();" + "</script>";
// const scriptdivblocktrends="<div id=\'test\' data-widgettype="+"'"+widgettype+"'"+" data-aculistwidget=\"\" data-geographytype="+ "'"+geotype+"'"+" data-geographyname="+"'"+ geoname +"'"+" data-tokenid="+"'"+tokenid+"'"+" data-title=true\" ><\/div>";
var scriptdivblocktrends = "<div id=\'test\' data-widgettype=" + "'" + widgettype + "'" + " data-aculistwidget=\"\" data-geographytype=" + "'" + geotype + "'" + " data-geographyname=" + "'" + geoname + "'" + " data-county=" + "'" + geocounty + "'" + " data-colors=" + "'" + colors + "'" + " data-period=" + "'" + period + "'" + " data-periodtype=" + "'" + periodtype + "'" + " data-tokenid=" + "'" + tokenid + "'" + " data-classtype=" + "'" + classtype + "'" + " data-usertoken=" + "'" + usertoken + "'" + " data-title=true\" ><\/div>";
var scriptdivblockkpi1row = "<div id=\'test\' data-tp=\"sstyles\" data-styleid=\"sstyles\" data-widgettype=" + "'" + widgettype + "'" + " data-aculistwidget=\"\" data-geographytype=" + "'" + geotype + "'" + " data-geographyname=" + "'" + geoname + "'" + " data-county=" + "'" + geocounty + "'" + " data-tokenid=" + "'" + tokenid + "'" + " data-classtype=" + "'" + classtype + "'" + " data-usertoken=" + "'" + usertoken + "'" + " data-title=\'true\' data-displaycolumns=\'3\' data-themecolor='black'\" ><\/div>";
var scriptdivblockkpi2columns = "<div id=\'test\' data-widgettype=" + "'" + widgettype + "'" + " data-aculistwidget=\"\" data-geographytype=" + "'" + geotype + "'" + " data-geographyname=" + "'" + geoname + "'" + " data-county=" + "'" + geocounty + "'" + " data-tokenid=" + "'" + tokenid + "'" + " data-classtype=" + "'" + classtype + "'" + " data-usertoken=" + "'" + usertoken + "'" + " data-title=true data-displaycolumns=\'2\' data-themecolor=\'black\'\" ><\/div>";
value = widgettype == 'trends' ? script + scriptdivblocktrends : tokenid == 'default1row' ? customstyles + script + scriptdivblockkpi1row : script + scriptdivblockkpi2columns;
valuewithoutscript = widgettype == 'trends' ? scriptdivblocktrends : tokenid == 'default1row' ? customstyles + scriptdivblockkpi1row : scriptdivblockkpi2columns;
//}
this.setState({ value: value, valuewithoutscript: valuewithoutscript, copied: false });
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
// console.log('script value', this.state.value);
var svalue = this.state.value;
return _react2.default.createElement(
'div',
{ className: 'generatescript' },
_react2.default.createElement(
_reactstrap.Container,
{ fluid: false },
_react2.default.createElement(
_reactstrap.Row,
null,
_react2.default.createElement(
_reactstrap.Col,
{ className: 'mx-0 px-0', sm: { size: 10 } },
_react2.default.createElement('textarea', { className: 'scriptinput', readOnly: true, value: svalue,
onChange: function onChange(_ref) {
var value = _ref.target.value;
return _this2.setState({ value: value, copied: false });
} })
),
_react2.default.createElement(
_reactstrap.Col,
{ sm: { size: 1 }, className: 'copywithscript' },
_react2.default.createElement(
_reactCopyToClipboard.CopyToClipboard,
{ text: this.state.value,
onCopy: function onCopy() {
return _this2.setState({ copied: true });
} },
_react2.default.createElement('img', { className: 'btncopyscript', title: 'Copy the entire script to embed single widget', src: 'https://aculist-widget-assets.azureedge.net/copyfull.png' })
),
this.state.copied ? _react2.default.createElement(
'span',
{ style: { color: 'red' } },
'Copied.'
) : _react2.default.createElement('span', null)
),
_react2.default.createElement(
_reactstrap.Col,
{ sm: { size: 1 }, className: 'copywithoutscript' },
_react2.default.createElement(
_reactCopyToClipboard.CopyToClipboard,
{ text: this.state.valuewithoutscript,
onCopy: function onCopy() {
return _this2.setState({ copiedwithoutscript: true });
} },
_react2.default.createElement('img', { className: 'btncopyscript', title: 'Copy partially to embed multiple widgets', src: 'https://aculist-widget-assets.azureedge.net/copypartial.png' })
),
this.state.copiedwithoutscript ? _react2.default.createElement(
'span',
{ style: { color: 'red' } },
'Copied.'
) : _react2.default.createElement('span', null)
)
)
)
);
}
}]);
return CopyModal;
}(_react2.default.Component)) || _class;
exports.default = CopyModal;
module.exports = exports['default'];