Carga
Carga
This commit is contained in:
@@ -0,0 +1,295 @@
|
||||
/* *
|
||||
*
|
||||
* Popup generator for Stock tools
|
||||
*
|
||||
* (c) 2009-2021 Sebastian Bochan
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*
|
||||
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
||||
*
|
||||
* */
|
||||
'use strict';
|
||||
import AST from '../../../Core/Renderer/HTML/AST.js';
|
||||
import H from '../../../Core/Globals.js';
|
||||
var doc = H.doc;
|
||||
import D from '../../../Core/DefaultOptions.js';
|
||||
var getOptions = D.getOptions;
|
||||
import PopupAnnotations from './PopupAnnotations.js';
|
||||
import PopupIndicators from './PopupIndicators.js';
|
||||
import PopupTabs from './PopupTabs.js';
|
||||
import U from '../../../Core/Utilities.js';
|
||||
var addEvent = U.addEvent, createElement = U.createElement, extend = U.extend, fireEvent = U.fireEvent, pick = U.pick;
|
||||
/* *
|
||||
*
|
||||
* Functions
|
||||
*
|
||||
* */
|
||||
/**
|
||||
* Get values from all inputs and selections then create JSON.
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {Highcharts.HTMLDOMElement} parentDiv
|
||||
* The container where inputs and selections are created.
|
||||
*
|
||||
* @param {string} type
|
||||
* Type of the popup bookmark (add|edit|remove).
|
||||
*/
|
||||
function getFields(parentDiv, type) {
|
||||
var inputList = Array.prototype.slice.call(parentDiv.querySelectorAll('input')), selectList = Array.prototype.slice.call(parentDiv.querySelectorAll('select')), optionSeries = '#highcharts-select-series > option:checked', optionVolume = '#highcharts-select-volume > option:checked', linkedTo = parentDiv.querySelectorAll(optionSeries)[0], volumeTo = parentDiv.querySelectorAll(optionVolume)[0];
|
||||
var fieldsOutput = {
|
||||
actionType: type,
|
||||
linkedTo: linkedTo && linkedTo.getAttribute('value') || '',
|
||||
fields: {}
|
||||
};
|
||||
inputList.forEach(function (input) {
|
||||
var param = input.getAttribute('highcharts-data-name'), seriesId = input.getAttribute('highcharts-data-series-id');
|
||||
// params
|
||||
if (seriesId) {
|
||||
fieldsOutput.seriesId = input.value;
|
||||
}
|
||||
else if (param) {
|
||||
fieldsOutput.fields[param] = input.value;
|
||||
}
|
||||
else {
|
||||
// type like sma / ema
|
||||
fieldsOutput.type = input.value;
|
||||
}
|
||||
});
|
||||
selectList.forEach(function (select) {
|
||||
var id = select.id;
|
||||
// Get inputs only for the parameters, not for series and volume.
|
||||
if (id !== 'highcharts-select-series' &&
|
||||
id !== 'highcharts-select-volume') {
|
||||
var parameter = id.split('highcharts-select-')[1];
|
||||
fieldsOutput.fields[parameter] = select.value;
|
||||
}
|
||||
});
|
||||
if (volumeTo) {
|
||||
fieldsOutput.fields['params.volumeSeriesID'] = volumeTo
|
||||
.getAttribute('value') || '';
|
||||
}
|
||||
return fieldsOutput;
|
||||
}
|
||||
/* *
|
||||
*
|
||||
* Class
|
||||
*
|
||||
* */
|
||||
var Popup = /** @class */ (function () {
|
||||
/* *
|
||||
*
|
||||
* Constructor
|
||||
*
|
||||
* */
|
||||
function Popup(parentDiv, iconsURL, chart) {
|
||||
this.chart = chart;
|
||||
this.iconsURL = iconsURL;
|
||||
this.lang = getOptions().lang.navigation.popup;
|
||||
// create popup div
|
||||
this.container = createElement('div', {
|
||||
className: 'highcharts-popup highcharts-no-tooltip'
|
||||
}, void 0, parentDiv);
|
||||
addEvent(this.container, 'mousedown', function () {
|
||||
var activeAnnotation = chart &&
|
||||
chart.navigationBindings &&
|
||||
chart.navigationBindings.activeAnnotation;
|
||||
if (activeAnnotation) {
|
||||
activeAnnotation.cancelClick = true;
|
||||
var unbind_1 = addEvent(H.doc, 'click', function () {
|
||||
setTimeout(function () {
|
||||
activeAnnotation.cancelClick = false;
|
||||
}, 0);
|
||||
unbind_1();
|
||||
});
|
||||
}
|
||||
});
|
||||
// add close button
|
||||
this.addCloseBtn();
|
||||
}
|
||||
/* *
|
||||
*
|
||||
* Functions
|
||||
*
|
||||
* */
|
||||
/**
|
||||
* Initialize the popup. Create base div and add close button.
|
||||
* @private
|
||||
* @param {Highcharts.HTMLDOMElement} parentDiv
|
||||
* Container where popup should be placed
|
||||
* @param {string} iconsURL
|
||||
* Icon URL
|
||||
*/
|
||||
Popup.prototype.init = function (parentDiv, iconsURL, chart) {
|
||||
Popup.call(this, parentDiv, iconsURL, chart);
|
||||
};
|
||||
/**
|
||||
* Create HTML element and attach click event (close popup).
|
||||
* @private
|
||||
*/
|
||||
Popup.prototype.addCloseBtn = function () {
|
||||
var _this = this;
|
||||
var iconsURL = this.iconsURL;
|
||||
// create close popup btn
|
||||
var closeBtn = createElement('div', {
|
||||
className: 'highcharts-popup-close'
|
||||
}, void 0, this.container);
|
||||
closeBtn.style['background-image'] = 'url(' +
|
||||
(iconsURL.match(/png|svg|jpeg|jpg|gif/ig) ?
|
||||
iconsURL : iconsURL + 'close.svg') + ')';
|
||||
['click', 'touchstart'].forEach(function (eventName) {
|
||||
addEvent(closeBtn, eventName, function () {
|
||||
if (_this.chart) {
|
||||
fireEvent(_this.chart.navigationBindings, 'closePopup');
|
||||
}
|
||||
else {
|
||||
_this.closePopup();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
/**
|
||||
* Create input with label.
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {string} option
|
||||
* Chain of fields i.e params.styles.fontSize separeted by the dot.
|
||||
*
|
||||
* @param {string} indicatorType
|
||||
* Type of the indicator i.e. sma, ema...
|
||||
*
|
||||
* @param {HTMLDOMElement} parentDiv
|
||||
* HTML parent element.
|
||||
*
|
||||
* @param {Highcharts.InputAttributes} inputAttributes
|
||||
* Attributes of the input.
|
||||
*
|
||||
* @return {HTMLInputElement}
|
||||
* Return created input element.
|
||||
*/
|
||||
Popup.prototype.addInput = function (option, indicatorType, parentDiv, inputAttributes) {
|
||||
var optionParamList = option.split('.'), optionName = optionParamList[optionParamList.length - 1], lang = this.lang, inputName = 'highcharts-' + indicatorType + '-' + pick(inputAttributes.htmlFor, optionName);
|
||||
if (!inputName.match(/\d/g)) {
|
||||
// add label
|
||||
createElement('label', {
|
||||
htmlFor: inputName,
|
||||
className: inputAttributes.labelClassName
|
||||
}, void 0, parentDiv).appendChild(doc.createTextNode(lang[optionName] || optionName));
|
||||
}
|
||||
// add input
|
||||
var input = createElement('input', {
|
||||
name: inputName,
|
||||
value: inputAttributes.value,
|
||||
type: inputAttributes.type,
|
||||
className: 'highcharts-popup-field'
|
||||
}, void 0, parentDiv);
|
||||
input.setAttribute('highcharts-data-name', option);
|
||||
return input;
|
||||
};
|
||||
/**
|
||||
* Create button.
|
||||
* @private
|
||||
* @param {Highcharts.HTMLDOMElement} parentDiv
|
||||
* Container where elements should be added
|
||||
* @param {string} label
|
||||
* Text placed as button label
|
||||
* @param {string} type
|
||||
* add | edit | remove
|
||||
* @param {Function} callback
|
||||
* On click callback
|
||||
* @param {Highcharts.HTMLDOMElement} fieldsDiv
|
||||
* Container where inputs are generated
|
||||
* @return {Highcharts.HTMLDOMElement}
|
||||
* HTML button
|
||||
*/
|
||||
Popup.prototype.addButton = function (parentDiv, label, type, fieldsDiv, callback) {
|
||||
var _this = this;
|
||||
var button = createElement('button', void 0, void 0, parentDiv);
|
||||
button.appendChild(doc.createTextNode(label));
|
||||
if (callback) {
|
||||
['click', 'touchstart'].forEach(function (eventName) {
|
||||
addEvent(button, eventName, function () {
|
||||
_this.closePopup();
|
||||
return callback(getFields(fieldsDiv, type));
|
||||
});
|
||||
});
|
||||
}
|
||||
return button;
|
||||
};
|
||||
/**
|
||||
* Reset content of the current popup and show.
|
||||
* @private
|
||||
*/
|
||||
Popup.prototype.showPopup = function () {
|
||||
var popupDiv = this.container, toolbarClass = 'highcharts-annotation-toolbar', popupCloseBtn = popupDiv
|
||||
.querySelectorAll('.highcharts-popup-close')[0];
|
||||
this.formType = void 0;
|
||||
// reset content
|
||||
popupDiv.innerHTML = AST.emptyHTML;
|
||||
// reset toolbar styles if exists
|
||||
if (popupDiv.className.indexOf(toolbarClass) >= 0) {
|
||||
popupDiv.classList.remove(toolbarClass);
|
||||
// reset toolbar inline styles
|
||||
popupDiv.removeAttribute('style');
|
||||
}
|
||||
// add close button
|
||||
popupDiv.appendChild(popupCloseBtn);
|
||||
popupDiv.style.display = 'block';
|
||||
popupDiv.style.height = '';
|
||||
};
|
||||
/**
|
||||
* Hide popup.
|
||||
* @private
|
||||
*/
|
||||
Popup.prototype.closePopup = function () {
|
||||
this.container.style.display = 'none';
|
||||
};
|
||||
/**
|
||||
* Create content and show popup.
|
||||
* @private
|
||||
* @param {string} - type of popup i.e indicators
|
||||
* @param {Highcharts.Chart} - chart
|
||||
* @param {Highcharts.AnnotationsOptions} - options
|
||||
* @param {Function} - on click callback
|
||||
*/
|
||||
Popup.prototype.showForm = function (type, chart, options, callback) {
|
||||
if (!chart) {
|
||||
return;
|
||||
}
|
||||
// show blank popup
|
||||
this.showPopup();
|
||||
// indicator form
|
||||
if (type === 'indicators') {
|
||||
this.indicators.addForm.call(this, chart, options, callback);
|
||||
}
|
||||
// annotation small toolbar
|
||||
if (type === 'annotation-toolbar') {
|
||||
this.annotations.addToolbar.call(this, chart, options, callback);
|
||||
}
|
||||
// annotation edit form
|
||||
if (type === 'annotation-edit') {
|
||||
this.annotations.addForm.call(this, chart, options, callback);
|
||||
}
|
||||
// flags form - add / edit
|
||||
if (type === 'flag') {
|
||||
this.annotations.addForm.call(this, chart, options, callback, true);
|
||||
}
|
||||
this.formType = type;
|
||||
// Explicit height is needed to make inner elements scrollable
|
||||
this.container.style.height = this.container.offsetHeight + 'px';
|
||||
};
|
||||
return Popup;
|
||||
}());
|
||||
extend(Popup.prototype, {
|
||||
annotations: PopupAnnotations,
|
||||
indicators: PopupIndicators,
|
||||
tabs: PopupTabs
|
||||
});
|
||||
/* *
|
||||
*
|
||||
* Default Export
|
||||
*
|
||||
* */
|
||||
export default Popup;
|
||||
@@ -0,0 +1,177 @@
|
||||
/* *
|
||||
*
|
||||
* Popup generator for Stock tools
|
||||
*
|
||||
* (c) 2009-2021 Sebastian Bochan
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*
|
||||
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
||||
*
|
||||
* */
|
||||
'use strict';
|
||||
import H from '../../../Core/Globals.js';
|
||||
var doc = H.doc, isFirefox = H.isFirefox;
|
||||
import U from '../../../Core/Utilities.js';
|
||||
var createElement = U.createElement, isArray = U.isArray, isObject = U.isObject, objectEach = U.objectEach, pick = U.pick, stableSort = U.stableSort;
|
||||
/* *
|
||||
*
|
||||
* Functions
|
||||
*
|
||||
* */
|
||||
/**
|
||||
* Create annotation simple form.
|
||||
* It contains fields with param names.
|
||||
* @private
|
||||
* @param {Highcharts.Chart} chart
|
||||
* Chart
|
||||
* @param {Object} options
|
||||
* Options
|
||||
* @param {Function} callback
|
||||
* On click callback
|
||||
* @param {boolean} [isInit]
|
||||
* If it is a form declared for init annotation
|
||||
*/
|
||||
function addForm(chart, options, callback, isInit) {
|
||||
if (!chart) {
|
||||
return;
|
||||
}
|
||||
var popupDiv = this.container, lang = this.lang;
|
||||
// create title of annotations
|
||||
var lhsCol = createElement('h2', {
|
||||
className: 'highcharts-popup-main-title'
|
||||
}, void 0, popupDiv);
|
||||
lhsCol.appendChild(doc.createTextNode(lang[options.langKey] || options.langKey || ''));
|
||||
// left column
|
||||
lhsCol = createElement('div', {
|
||||
className: ('highcharts-popup-lhs-col highcharts-popup-lhs-full')
|
||||
}, void 0, popupDiv);
|
||||
var bottomRow = createElement('div', {
|
||||
className: 'highcharts-popup-bottom-row'
|
||||
}, void 0, popupDiv);
|
||||
addFormFields.call(this, lhsCol, chart, '', options, [], true);
|
||||
this.addButton(bottomRow, isInit ?
|
||||
(lang.addButton || 'add') :
|
||||
(lang.saveButton || 'save'), isInit ? 'add' : 'save', popupDiv, callback);
|
||||
}
|
||||
/**
|
||||
* Create annotation simple form. It contains two buttons
|
||||
* (edit / remove) and text label.
|
||||
* @private
|
||||
* @param {Highcharts.Chart} - chart
|
||||
* @param {Highcharts.AnnotationsOptions} - options
|
||||
* @param {Function} - on click callback
|
||||
*/
|
||||
function addToolbar(chart, options, callback) {
|
||||
var _this = this;
|
||||
var lang = this.lang, popupDiv = this.container, showForm = this.showForm, toolbarClass = 'highcharts-annotation-toolbar';
|
||||
// set small size
|
||||
if (popupDiv.className.indexOf(toolbarClass) === -1) {
|
||||
popupDiv.className += ' ' + toolbarClass;
|
||||
}
|
||||
// set position
|
||||
if (chart) {
|
||||
popupDiv.style.top = chart.plotTop + 10 + 'px';
|
||||
}
|
||||
// create label
|
||||
createElement('span', void 0, void 0, popupDiv).appendChild(doc.createTextNode(pick(
|
||||
// Advanced annotations:
|
||||
lang[options.langKey] || options.langKey,
|
||||
// Basic shapes:
|
||||
options.shapes && options.shapes[0].type, '')));
|
||||
// add buttons
|
||||
var button = this.addButton(popupDiv, lang.removeButton || 'remove', 'remove', popupDiv, callback);
|
||||
button.className += ' highcharts-annotation-remove-button';
|
||||
button.style['background-image'] = 'url(' +
|
||||
this.iconsURL + 'destroy.svg)';
|
||||
button = this.addButton(popupDiv, lang.editButton || 'edit', 'edit', popupDiv, function () {
|
||||
showForm.call(_this, 'annotation-edit', chart, options, callback);
|
||||
});
|
||||
button.className += ' highcharts-annotation-edit-button';
|
||||
button.style['background-image'] = 'url(' +
|
||||
this.iconsURL + 'edit.svg)';
|
||||
}
|
||||
/**
|
||||
* Create annotation's form fields.
|
||||
* @private
|
||||
* @param {Highcharts.HTMLDOMElement} parentDiv
|
||||
* Div where inputs are placed
|
||||
* @param {Highcharts.Chart} chart
|
||||
* Chart
|
||||
* @param {string} parentNode
|
||||
* Name of parent to create chain of names
|
||||
* @param {Highcharts.AnnotationsOptions} options
|
||||
* Options
|
||||
* @param {Array<unknown>} storage
|
||||
* Array where all items are stored
|
||||
* @param {boolean} [isRoot]
|
||||
* Recursive flag for root
|
||||
*/
|
||||
function addFormFields(parentDiv, chart, parentNode, options, storage, isRoot) {
|
||||
var _this = this;
|
||||
if (!chart) {
|
||||
return;
|
||||
}
|
||||
var addInput = this.addInput, lang = this.lang;
|
||||
var parentFullName, titleName;
|
||||
objectEach(options, function (value, option) {
|
||||
// create name like params.styles.fontSize
|
||||
parentFullName = parentNode !== '' ? parentNode + '.' + option : option;
|
||||
if (isObject(value)) {
|
||||
if (
|
||||
// value is object of options
|
||||
!isArray(value) ||
|
||||
// array of objects with params. i.e labels in Fibonacci
|
||||
(isArray(value) && isObject(value[0]))) {
|
||||
titleName = lang[option] || option;
|
||||
if (!titleName.match(/\d/g)) {
|
||||
storage.push([
|
||||
true,
|
||||
titleName,
|
||||
parentDiv
|
||||
]);
|
||||
}
|
||||
addFormFields.call(_this, parentDiv, chart, parentFullName, value, storage, false);
|
||||
}
|
||||
else {
|
||||
storage.push([
|
||||
_this,
|
||||
parentFullName,
|
||||
'annotation',
|
||||
parentDiv,
|
||||
value
|
||||
]);
|
||||
}
|
||||
}
|
||||
});
|
||||
if (isRoot) {
|
||||
stableSort(storage, function (a) { return (a[1].match(/format/g) ? -1 : 1); });
|
||||
if (isFirefox) {
|
||||
storage.reverse(); // (#14691)
|
||||
}
|
||||
storage.forEach(function (genInput) {
|
||||
if (genInput[0] === true) {
|
||||
createElement('span', {
|
||||
className: 'highcharts-annotation-title'
|
||||
}, void 0, genInput[2]).appendChild(doc.createTextNode(genInput[1]));
|
||||
}
|
||||
else {
|
||||
genInput[4] = {
|
||||
value: genInput[4][0],
|
||||
type: genInput[4][1]
|
||||
};
|
||||
addInput.apply(genInput[0], genInput.splice(1));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
/* *
|
||||
*
|
||||
* Default Export
|
||||
*
|
||||
* */
|
||||
var PopupAnnotations = {
|
||||
addForm: addForm,
|
||||
addToolbar: addToolbar
|
||||
};
|
||||
export default PopupAnnotations;
|
||||
@@ -0,0 +1,81 @@
|
||||
/* *
|
||||
*
|
||||
* Popup generator for Stock tools
|
||||
*
|
||||
* (c) 2009-2021 Sebastian Bochan
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*
|
||||
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
||||
*
|
||||
* */
|
||||
'use strict';
|
||||
import Popup from './Popup.js';
|
||||
import U from '../../../Core/Utilities.js';
|
||||
var addEvent = U.addEvent, wrap = U.wrap;
|
||||
/* *
|
||||
*
|
||||
* Constants
|
||||
*
|
||||
* */
|
||||
var composedClasses = [];
|
||||
/* *
|
||||
*
|
||||
* Functions
|
||||
*
|
||||
* */
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function compose(NagivationBindingsClass, PointerClass) {
|
||||
if (composedClasses.indexOf(NagivationBindingsClass) === -1) {
|
||||
composedClasses.push(NagivationBindingsClass);
|
||||
addEvent(NagivationBindingsClass, 'closePopup', onNavigationBindingsClosePopup);
|
||||
addEvent(NagivationBindingsClass, 'showPopup', onNavigationBindingsShowPopup);
|
||||
}
|
||||
if (composedClasses.indexOf(PointerClass) === -1) {
|
||||
composedClasses.push(PointerClass);
|
||||
wrap(PointerClass.prototype, 'onContainerMouseDown', wrapPointerOnContainerMouserDown);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function onNavigationBindingsClosePopup() {
|
||||
if (this.popup) {
|
||||
this.popup.closePopup();
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
function onNavigationBindingsShowPopup(config) {
|
||||
if (!this.popup) {
|
||||
// Add popup to main container
|
||||
this.popup = new Popup(this.chart.container, (this.chart.options.navigation.iconsURL ||
|
||||
(this.chart.options.stockTools &&
|
||||
this.chart.options.stockTools.gui.iconsURL) ||
|
||||
'https://code.highcharts.com/10.2.1/gfx/stock-icons/'), this.chart);
|
||||
}
|
||||
this.popup.showForm(config.formType, this.chart, config.options, config.onSubmit);
|
||||
}
|
||||
/**
|
||||
* onContainerMouseDown blocks internal popup events, due to e.preventDefault.
|
||||
* Related issue #4606
|
||||
* @private
|
||||
*/
|
||||
function wrapPointerOnContainerMouserDown(proceed, e) {
|
||||
// elements is not in popup
|
||||
if (!this.inClass(e.target, 'highcharts-popup')) {
|
||||
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
}
|
||||
}
|
||||
/* *
|
||||
*
|
||||
* Default Export
|
||||
*
|
||||
* */
|
||||
var PopupComposition = {
|
||||
compose: compose
|
||||
};
|
||||
export default PopupComposition;
|
||||
@@ -0,0 +1,609 @@
|
||||
/* *
|
||||
*
|
||||
* Popup generator for Stock tools
|
||||
*
|
||||
* (c) 2009-2021 Sebastian Bochan
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*
|
||||
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
||||
*
|
||||
* */
|
||||
'use strict';
|
||||
import AST from '../../../Core/Renderer/HTML/AST.js';
|
||||
import H from '../../../Core/Globals.js';
|
||||
var doc = H.doc;
|
||||
import NU from '../NavigationBindingsUtilities.js';
|
||||
var annotationsFieldsTypes = NU.annotationsFieldsTypes;
|
||||
import SeriesRegistry from '../../../Core/Series/SeriesRegistry.js';
|
||||
var seriesTypes = SeriesRegistry.seriesTypes;
|
||||
import U from '../../../Core/Utilities.js';
|
||||
var addEvent = U.addEvent, createElement = U.createElement, defined = U.defined, isArray = U.isArray, isObject = U.isObject, objectEach = U.objectEach, stableSort = U.stableSort;
|
||||
/* *
|
||||
*
|
||||
* Enums
|
||||
*
|
||||
* */
|
||||
/**
|
||||
* Enum for properties which should have dropdown list.
|
||||
* @private
|
||||
*/
|
||||
var DropdownProperties;
|
||||
(function (DropdownProperties) {
|
||||
DropdownProperties[DropdownProperties["params.algorithm"] = 0] = "params.algorithm";
|
||||
DropdownProperties[DropdownProperties["params.average"] = 1] = "params.average";
|
||||
})(DropdownProperties || (DropdownProperties = {}));
|
||||
/**
|
||||
* List of available algorithms for the specific indicator.
|
||||
* @private
|
||||
*/
|
||||
var dropdownParameters = {
|
||||
'algorithm-pivotpoints': ['standard', 'fibonacci', 'camarilla'],
|
||||
'average-disparityindex': ['sma', 'ema', 'dema', 'tema', 'wma']
|
||||
};
|
||||
/* *
|
||||
*
|
||||
* Functions
|
||||
*
|
||||
* */
|
||||
/**
|
||||
* Create two columns (divs) in HTML.
|
||||
* @private
|
||||
* @param {Highcharts.HTMLDOMElement} container
|
||||
* Container of columns
|
||||
* @return {Highcharts.Dictionary<Highcharts.HTMLDOMElement>}
|
||||
* Reference to two HTML columns (lhsCol, rhsCol)
|
||||
*/
|
||||
function addColsContainer(container) {
|
||||
// left column
|
||||
var lhsCol = createElement('div', {
|
||||
className: 'highcharts-popup-lhs-col'
|
||||
}, void 0, container);
|
||||
// right column
|
||||
var rhsCol = createElement('div', {
|
||||
className: 'highcharts-popup-rhs-col'
|
||||
}, void 0, container);
|
||||
// wrapper content
|
||||
createElement('div', {
|
||||
className: 'highcharts-popup-rhs-col-wrapper'
|
||||
}, void 0, rhsCol);
|
||||
return {
|
||||
lhsCol: lhsCol,
|
||||
rhsCol: rhsCol
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Create indicator's form. It contains two tabs (ADD and EDIT) with
|
||||
* content.
|
||||
* @private
|
||||
*/
|
||||
function addForm(chart, _options, callback) {
|
||||
var lang = this.lang;
|
||||
var buttonParentDiv;
|
||||
if (!chart) {
|
||||
return;
|
||||
}
|
||||
// add tabs
|
||||
this.tabs.init.call(this, chart);
|
||||
// get all tabs content divs
|
||||
var tabsContainers = this.container
|
||||
.querySelectorAll('.highcharts-tab-item-content');
|
||||
// ADD tab
|
||||
addColsContainer(tabsContainers[0]);
|
||||
addSearchBox.call(this, chart, tabsContainers[0]);
|
||||
addIndicatorList.call(this, chart, tabsContainers[0], 'add');
|
||||
buttonParentDiv = tabsContainers[0]
|
||||
.querySelectorAll('.highcharts-popup-rhs-col')[0];
|
||||
this.addButton(buttonParentDiv, lang.addButton || 'add', 'add', buttonParentDiv, callback);
|
||||
// EDIT tab
|
||||
addColsContainer(tabsContainers[1]);
|
||||
addIndicatorList.call(this, chart, tabsContainers[1], 'edit');
|
||||
buttonParentDiv = tabsContainers[1]
|
||||
.querySelectorAll('.highcharts-popup-rhs-col')[0];
|
||||
this.addButton(buttonParentDiv, lang.saveButton || 'save', 'edit', buttonParentDiv, callback);
|
||||
this.addButton(buttonParentDiv, lang.removeButton || 'remove', 'remove', buttonParentDiv, callback);
|
||||
}
|
||||
/**
|
||||
* Create typical inputs for chosen indicator. Fields are extracted from
|
||||
* defaultOptions (ADD mode) or current indicator (ADD mode). Two extra
|
||||
* fields are added:
|
||||
* - hidden input - contains indicator type (required for callback)
|
||||
* - select - list of series which can be linked with indicator
|
||||
* @private
|
||||
* @param {Highcharts.Chart} chart
|
||||
* Chart
|
||||
* @param {Highcharts.Series} series
|
||||
* Indicator
|
||||
* @param {string} seriesType
|
||||
* Indicator type like: sma, ema, etc.
|
||||
* @param {Highcharts.HTMLDOMElement} rhsColWrapper
|
||||
* Element where created HTML list is added
|
||||
*/
|
||||
function addFormFields(chart, series, seriesType, rhsColWrapper) {
|
||||
var fields = series.params || series.options.params;
|
||||
// reset current content
|
||||
rhsColWrapper.innerHTML = AST.emptyHTML;
|
||||
// create title (indicator name in the right column)
|
||||
createElement('h3', {
|
||||
className: 'highcharts-indicator-title'
|
||||
}, void 0, rhsColWrapper).appendChild(doc.createTextNode(getNameType(series, seriesType).indicatorFullName));
|
||||
// input type
|
||||
createElement('input', {
|
||||
type: 'hidden',
|
||||
name: 'highcharts-type-' + seriesType,
|
||||
value: seriesType
|
||||
}, void 0, rhsColWrapper);
|
||||
// list all series with id
|
||||
listAllSeries.call(this, seriesType, 'series', chart, rhsColWrapper, series, series.linkedParent && series.linkedParent.options.id);
|
||||
if (fields.volumeSeriesID) {
|
||||
listAllSeries.call(this, seriesType, 'volume', chart, rhsColWrapper, series, series.linkedParent && fields.volumeSeriesID);
|
||||
}
|
||||
// add param fields
|
||||
addParamInputs.call(this, chart, 'params', fields, seriesType, rhsColWrapper);
|
||||
}
|
||||
/**
|
||||
* Create HTML list of all indicators (ADD mode) or added indicators
|
||||
* (EDIT mode).
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {Highcharts.AnnotationChart} chart
|
||||
* The chart object.
|
||||
*
|
||||
* @param {string} [optionName]
|
||||
* Name of the option into which selection is being added.
|
||||
*
|
||||
* @param {HTMLDOMElement} [parentDiv]
|
||||
* HTML parent element.
|
||||
*
|
||||
* @param {string} listType
|
||||
* Type of list depending on the selected bookmark.
|
||||
* Might be 'add' or 'edit'.
|
||||
*
|
||||
* @param {string|undefined} filter
|
||||
* Applied filter string from the input.
|
||||
* For the first iteration, it's an empty string.
|
||||
*/
|
||||
function addIndicatorList(chart, parentDiv, listType, filter) {
|
||||
var popup = this, lang = popup.lang, lhsCol = parentDiv.querySelectorAll('.highcharts-popup-lhs-col')[0], rhsCol = parentDiv.querySelectorAll('.highcharts-popup-rhs-col')[0], isEdit = listType === 'edit', series = (isEdit ?
|
||||
chart.series : // EDIT mode
|
||||
chart.options.plotOptions || {} // ADD mode
|
||||
);
|
||||
if (!chart && series) {
|
||||
return;
|
||||
}
|
||||
var item, filteredSeriesArray = [];
|
||||
// Filter and sort the series.
|
||||
if (!isEdit && !isArray(series)) {
|
||||
// Apply filters only for the 'add' indicator list.
|
||||
filteredSeriesArray = filterSeries.call(this, series, filter);
|
||||
}
|
||||
else if (isArray(series)) {
|
||||
filteredSeriesArray = filterSeriesArray.call(this, series);
|
||||
}
|
||||
// Sort indicators alphabeticaly.
|
||||
stableSort(filteredSeriesArray, function (a, b) {
|
||||
var seriesAName = a.indicatorFullName.toLowerCase(), seriesBName = b.indicatorFullName.toLowerCase();
|
||||
return (seriesAName < seriesBName) ?
|
||||
-1 : (seriesAName > seriesBName) ? 1 : 0;
|
||||
});
|
||||
// If the list exists remove it from the DOM
|
||||
// in order to create a new one with different filters.
|
||||
if (lhsCol.children[1]) {
|
||||
lhsCol.children[1].remove();
|
||||
}
|
||||
// Create wrapper for list.
|
||||
var indicatorList = createElement('ul', {
|
||||
className: 'highcharts-indicator-list'
|
||||
}, void 0, lhsCol);
|
||||
var rhsColWrapper = rhsCol.querySelectorAll('.highcharts-popup-rhs-col-wrapper')[0];
|
||||
filteredSeriesArray.forEach(function (seriesSet) {
|
||||
var indicatorFullName = seriesSet.indicatorFullName, indicatorType = seriesSet.indicatorType, series = seriesSet.series;
|
||||
item = createElement('li', {
|
||||
className: 'highcharts-indicator-list'
|
||||
}, void 0, indicatorList);
|
||||
item.appendChild(doc.createTextNode(indicatorFullName));
|
||||
['click', 'touchstart'].forEach(function (eventName) {
|
||||
addEvent(item, eventName, function () {
|
||||
var button = rhsColWrapper.parentNode
|
||||
.children[1];
|
||||
addFormFields.call(popup, chart, series, indicatorType, rhsColWrapper);
|
||||
if (button) {
|
||||
button.style.display = 'block';
|
||||
}
|
||||
// add hidden input with series.id
|
||||
if (isEdit && series.options) {
|
||||
createElement('input', {
|
||||
type: 'hidden',
|
||||
name: 'highcharts-id-' + indicatorType,
|
||||
value: series.options.id
|
||||
}, void 0, rhsColWrapper).setAttribute('highcharts-data-series-id', series.options.id);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
// select first item from the list
|
||||
if (indicatorList.childNodes.length > 0) {
|
||||
indicatorList.childNodes[0].click();
|
||||
}
|
||||
else if (!isEdit) {
|
||||
AST.setElementHTML(rhsColWrapper.parentNode.children[0], lang.noFilterMatch || '');
|
||||
rhsColWrapper.parentNode.children[1]
|
||||
.style.display = 'none';
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Recurent function which lists all fields, from params object and
|
||||
* create them as inputs. Each input has unique `data-name` attribute,
|
||||
* which keeps chain of fields i.e params.styles.fontSize.
|
||||
* @private
|
||||
* @param {Highcharts.Chart} chart
|
||||
* Chart
|
||||
* @param {string} parentNode
|
||||
* Name of parent to create chain of names
|
||||
* @param {Highcharts.PopupFieldsDictionary<string>} fields
|
||||
* Params which are based for input create
|
||||
* @param {string} type
|
||||
* Indicator type like: sma, ema, etc.
|
||||
* @param {Highcharts.HTMLDOMElement} parentDiv
|
||||
* Element where created HTML list is added
|
||||
*/
|
||||
function addParamInputs(chart, parentNode, fields, type, parentDiv) {
|
||||
var _this = this;
|
||||
if (!chart) {
|
||||
return;
|
||||
}
|
||||
var addInput = this.addInput;
|
||||
objectEach(fields, function (value, fieldName) {
|
||||
var predefinedType = annotationsFieldsTypes[fieldName];
|
||||
var fieldType = type;
|
||||
if (predefinedType) {
|
||||
fieldType = predefinedType;
|
||||
}
|
||||
// create name like params.styles.fontSize
|
||||
var parentFullName = parentNode + '.' + fieldName;
|
||||
if (defined(value) && // skip if field is unnecessary, #15362
|
||||
parentFullName) {
|
||||
if (isObject(value)) {
|
||||
// (15733) 'Periods' has an arrayed value. Label must be
|
||||
// created here.
|
||||
addInput.call(_this, parentFullName, type, parentDiv, {});
|
||||
addParamInputs.call(_this, chart, parentFullName, value, type, parentDiv);
|
||||
}
|
||||
// If the option is listed in dropdown enum,
|
||||
// add the selection box for it.
|
||||
if (parentFullName in DropdownProperties) {
|
||||
// Add selection boxes.
|
||||
var selectBox = addSelection.call(_this, type, parentFullName, parentDiv);
|
||||
// Add possible dropdown options.
|
||||
addSelectionOptions.call(_this, chart, parentNode, selectBox, type, fieldName, value);
|
||||
}
|
||||
else if (
|
||||
// Skip volume field which is created by addFormFields.
|
||||
parentFullName !== 'params.volumeSeriesID' &&
|
||||
!isArray(value) // Skip params declared in array.
|
||||
) {
|
||||
addInput.call(_this, parentFullName, type, parentDiv, {
|
||||
value: value,
|
||||
type: 'number'
|
||||
} // all inputs are text type
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Add searchbox HTML element and its' label.
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {Highcharts.AnnotationChart} chart
|
||||
* The chart object.
|
||||
*
|
||||
* @param {HTMLDOMElement} parentDiv
|
||||
* HTML parent element.
|
||||
*/
|
||||
function addSearchBox(chart, parentDiv) {
|
||||
var popup = this, lhsCol = parentDiv.querySelectorAll('.highcharts-popup-lhs-col')[0], options = 'searchIndicators', inputAttributes = {
|
||||
value: '',
|
||||
type: 'text',
|
||||
htmlFor: 'search-indicators',
|
||||
labelClassName: 'highcharts-input-search-indicators-label'
|
||||
}, clearFilterText = this.lang.clearFilter, inputWrapper = createElement('div', {
|
||||
className: 'highcharts-input-wrapper'
|
||||
}, void 0, lhsCol);
|
||||
var handleInputChange = function (inputText) {
|
||||
// Apply some filters.
|
||||
addIndicatorList.call(popup, chart, popup.container, 'add', inputText);
|
||||
};
|
||||
// Add input field with the label and button.
|
||||
var input = this.addInput(options, 'input', inputWrapper, inputAttributes), button = createElement('a', {
|
||||
textContent: clearFilterText
|
||||
}, void 0, inputWrapper);
|
||||
input.classList.add('highcharts-input-search-indicators');
|
||||
button.classList.add('clear-filter-button');
|
||||
// Add input change events.
|
||||
addEvent(input, 'input', function (e) {
|
||||
handleInputChange(this.value);
|
||||
// Show clear filter button.
|
||||
if (this.value.length) {
|
||||
button.style.display = 'inline-block';
|
||||
}
|
||||
else {
|
||||
button.style.display = 'none';
|
||||
}
|
||||
});
|
||||
// Add clear filter click event.
|
||||
['click', 'touchstart'].forEach(function (eventName) {
|
||||
addEvent(button, eventName, function () {
|
||||
// Clear the input.
|
||||
input.value = '';
|
||||
handleInputChange('');
|
||||
// Hide clear filter button- no longer nececary.
|
||||
button.style.display = 'none';
|
||||
});
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Add selection HTML element and its' label.
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {string} indicatorType
|
||||
* Type of the indicator i.e. sma, ema...
|
||||
*
|
||||
* @param {string} [optionName]
|
||||
* Name of the option into which selection is being added.
|
||||
*
|
||||
* @param {HTMLDOMElement} [parentDiv]
|
||||
* HTML parent element.
|
||||
*/
|
||||
function addSelection(indicatorType, optionName, parentDiv) {
|
||||
var optionParamList = optionName.split('.'), labelText = optionParamList[optionParamList.length - 1], selectName = 'highcharts-' + optionName + '-type-' + indicatorType, lang = this.lang;
|
||||
// Add a label for the selection box.
|
||||
createElement('label', {
|
||||
htmlFor: selectName
|
||||
}, null, parentDiv).appendChild(doc.createTextNode(lang[labelText] || optionName));
|
||||
// Create a selection box.
|
||||
var selectBox = createElement('select', {
|
||||
name: selectName,
|
||||
className: 'highcharts-popup-field',
|
||||
id: 'highcharts-select-' + optionName
|
||||
}, null, parentDiv);
|
||||
selectBox.setAttribute('id', 'highcharts-select-' + optionName);
|
||||
return selectBox;
|
||||
}
|
||||
/**
|
||||
* Get and add selection options.
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {Highcharts.AnnotationChart} chart
|
||||
* The chart object.
|
||||
*
|
||||
* @param {string} [optionName]
|
||||
* Name of the option into which selection is being added.
|
||||
*
|
||||
* @param {HTMLSelectElement} [selectBox]
|
||||
* HTML select box element to which the options are being added.
|
||||
*
|
||||
* @param {string|undefined} indicatorType
|
||||
* Type of the indicator i.e. sma, ema...
|
||||
*
|
||||
* @param {string|undefined} parameterName
|
||||
* Name of the parameter which should be applied.
|
||||
*
|
||||
* @param {string|undefined} selectedOption
|
||||
* Default value in dropdown.
|
||||
*/
|
||||
function addSelectionOptions(chart, optionName, selectBox, indicatorType, parameterName, selectedOption, currentSeries) {
|
||||
// Get and apply selection options for the possible series.
|
||||
if (optionName === 'series' || optionName === 'volume') {
|
||||
// List all series which have id - mandatory for indicator.
|
||||
chart.series.forEach(function (series) {
|
||||
var seriesOptions = series.options, seriesName = seriesOptions.name ||
|
||||
seriesOptions.params ?
|
||||
series.name :
|
||||
seriesOptions.id || '';
|
||||
if (seriesOptions.id !== 'highcharts-navigator-series' &&
|
||||
seriesOptions.id !== (currentSeries &&
|
||||
currentSeries.options &&
|
||||
currentSeries.options.id)) {
|
||||
if (!defined(selectedOption) &&
|
||||
optionName === 'volume' &&
|
||||
series.type === 'column') {
|
||||
selectedOption = seriesOptions.id;
|
||||
}
|
||||
createElement('option', {
|
||||
value: seriesOptions.id
|
||||
}, void 0, selectBox).appendChild(doc.createTextNode(seriesName));
|
||||
}
|
||||
});
|
||||
}
|
||||
else if (indicatorType && parameterName) {
|
||||
// Get and apply options for the possible parameters.
|
||||
var dropdownKey = parameterName + '-' + indicatorType, parameterOption = dropdownParameters[dropdownKey];
|
||||
parameterOption.forEach(function (element) {
|
||||
createElement('option', {
|
||||
value: element
|
||||
}, void 0, selectBox).appendChild(doc.createTextNode(element));
|
||||
});
|
||||
}
|
||||
// Add the default dropdown value if defined.
|
||||
if (defined(selectedOption)) {
|
||||
selectBox.value = selectedOption;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Filter object of series which are not indicators.
|
||||
* If the filter string exists, check against it.
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {Highcharts.FilteredSeries} series
|
||||
* All series are available in the plotOptions.
|
||||
*
|
||||
* @param {string|undefined} filter
|
||||
* Applied filter string from the input.
|
||||
* For the first iteration, it's an empty string.
|
||||
*
|
||||
* @return {Array<Highcharts.FilteredSeries>} filteredSeriesArray
|
||||
* Returns array of filtered series based on filter string.
|
||||
*/
|
||||
function filterSeries(series, filter) {
|
||||
var popup = this, indicators = popup.indicators, lang = popup.chart && popup.chart.options.lang, indicatorAliases = lang &&
|
||||
lang.navigation &&
|
||||
lang.navigation.popup &&
|
||||
lang.navigation.popup.indicatorAliases, filteredSeriesArray = [];
|
||||
var filteredSeries;
|
||||
objectEach(series, function (series, value) {
|
||||
var seriesOptions = series && series.options;
|
||||
// Allow only indicators.
|
||||
if (series.params || seriesOptions &&
|
||||
seriesOptions.params) {
|
||||
var _a = getNameType(series, value), indicatorFullName = _a.indicatorFullName, indicatorType = _a.indicatorType;
|
||||
if (filter) {
|
||||
// Replace invalid characters.
|
||||
var validFilter = filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
var regex = new RegExp(validFilter, 'i'), alias = indicatorAliases &&
|
||||
indicatorAliases[indicatorType] &&
|
||||
indicatorAliases[indicatorType].join(' ') || '';
|
||||
if (indicatorFullName.match(regex) ||
|
||||
alias.match(regex)) {
|
||||
filteredSeries = {
|
||||
indicatorFullName: indicatorFullName,
|
||||
indicatorType: indicatorType,
|
||||
series: series
|
||||
};
|
||||
filteredSeriesArray.push(filteredSeries);
|
||||
}
|
||||
}
|
||||
else {
|
||||
filteredSeries = {
|
||||
indicatorFullName: indicatorFullName,
|
||||
indicatorType: indicatorType,
|
||||
series: series
|
||||
};
|
||||
filteredSeriesArray.push(filteredSeries);
|
||||
}
|
||||
}
|
||||
});
|
||||
return filteredSeriesArray;
|
||||
}
|
||||
/**
|
||||
* Filter an array of series and map its names and types.
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {Highcharts.FilteredSeries} series
|
||||
* All series that are available in the plotOptions.
|
||||
*
|
||||
* @return {Array<Highcharts.FilteredSeries>} filteredSeriesArray
|
||||
* Returns array of filtered series based on filter string.
|
||||
*/
|
||||
function filterSeriesArray(series) {
|
||||
var filteredSeriesArray = [];
|
||||
// Allow only indicators.
|
||||
series.forEach(function (series) {
|
||||
if (series.is('sma')) {
|
||||
filteredSeriesArray.push({
|
||||
indicatorFullName: series.name,
|
||||
indicatorType: series.type,
|
||||
series: series
|
||||
});
|
||||
}
|
||||
});
|
||||
return filteredSeriesArray;
|
||||
}
|
||||
/**
|
||||
* Get amount of indicators added to chart.
|
||||
* @private
|
||||
* @return {number} - Amount of indicators
|
||||
*/
|
||||
function getAmount() {
|
||||
var counter = 0;
|
||||
this.series.forEach(function (serie) {
|
||||
if (serie.params ||
|
||||
serie.options.params) {
|
||||
counter++;
|
||||
}
|
||||
});
|
||||
return counter;
|
||||
}
|
||||
/**
|
||||
* Extract full name and type of requested indicator.
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {Highcharts.Series} series
|
||||
* Series which name is needed(EDITmode - defaultOptions.series,
|
||||
* ADDmode - indicator series).
|
||||
*
|
||||
* @param {string} [indicatorType]
|
||||
* Type of the indicator i.e. sma, ema...
|
||||
*
|
||||
* @return {Highcharts.Dictionary<string>}
|
||||
* Full name and series type.
|
||||
*/
|
||||
function getNameType(series, indicatorType) {
|
||||
var options = series.options;
|
||||
// add mode
|
||||
var seriesName = (seriesTypes[indicatorType] &&
|
||||
seriesTypes[indicatorType].prototype.nameBase) ||
|
||||
indicatorType.toUpperCase(), seriesType = indicatorType;
|
||||
// edit
|
||||
if (options && options.type) {
|
||||
seriesType = series.options.type;
|
||||
seriesName = series.name;
|
||||
}
|
||||
return {
|
||||
indicatorFullName: seriesName,
|
||||
indicatorType: seriesType
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Create the selection box for the series,
|
||||
* add options and apply the default one.
|
||||
*
|
||||
* @private
|
||||
*
|
||||
* @param {string} indicatorType
|
||||
* Type of the indicator i.e. sma, ema...
|
||||
*
|
||||
* @param {string} [optionName]
|
||||
* Name of the option into which selection is being added.
|
||||
*
|
||||
* @param {Highcharts.AnnotationChart} chart
|
||||
* The chart object.
|
||||
*
|
||||
* @param {HTMLDOMElement} [parentDiv]
|
||||
* HTML parent element.
|
||||
*
|
||||
* @param {string|undefined} selectedOption
|
||||
* Default value in dropdown.
|
||||
*/
|
||||
function listAllSeries(indicatorType, optionName, chart, parentDiv, currentSeries, selectedOption) {
|
||||
var popup = this, indicators = popup.indicators;
|
||||
// Won't work without the chart.
|
||||
if (!chart) {
|
||||
return;
|
||||
}
|
||||
// Add selection boxes.
|
||||
var selectBox = addSelection.call(popup, indicatorType, optionName, parentDiv);
|
||||
// Add possible dropdown options.
|
||||
addSelectionOptions.call(popup, chart, optionName, selectBox, void 0, void 0, void 0, currentSeries);
|
||||
// Add the default dropdown value if defined.
|
||||
if (defined(selectedOption)) {
|
||||
selectBox.value = selectedOption;
|
||||
}
|
||||
}
|
||||
/* *
|
||||
*
|
||||
* Default Export
|
||||
*
|
||||
* */
|
||||
var PopupIndicators = {
|
||||
addForm: addForm,
|
||||
getAmount: getAmount
|
||||
};
|
||||
export default PopupIndicators;
|
||||
@@ -0,0 +1,134 @@
|
||||
/* *
|
||||
*
|
||||
* Popup generator for Stock tools
|
||||
*
|
||||
* (c) 2009-2021 Sebastian Bochan
|
||||
*
|
||||
* License: www.highcharts.com/license
|
||||
*
|
||||
* !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
|
||||
*
|
||||
* */
|
||||
'use strict';
|
||||
import H from '../../../Core/Globals.js';
|
||||
var doc = H.doc;
|
||||
import U from '../../../Core/Utilities.js';
|
||||
var addEvent = U.addEvent, createElement = U.createElement;
|
||||
/* *
|
||||
*
|
||||
* Functions
|
||||
*
|
||||
* */
|
||||
/**
|
||||
* Create tab content
|
||||
* @private
|
||||
* @return {HTMLDOMElement} - created HTML tab-content element
|
||||
*/
|
||||
function addContentItem() {
|
||||
var popupDiv = this.container;
|
||||
return createElement('div', {
|
||||
// #12100
|
||||
className: 'highcharts-tab-item-content highcharts-no-mousewheel'
|
||||
}, void 0, popupDiv);
|
||||
}
|
||||
/**
|
||||
* Create tab menu item
|
||||
* @private
|
||||
* @param {string} tabName
|
||||
* `add` or `edit`
|
||||
* @param {number} [disableTab]
|
||||
* Disable tab when 0
|
||||
* @return {Highcharts.HTMLDOMElement}
|
||||
* Created HTML tab-menu element
|
||||
*/
|
||||
function addMenuItem(tabName, disableTab) {
|
||||
var popupDiv = this.container, lang = this.lang;
|
||||
var className = 'highcharts-tab-item';
|
||||
if (disableTab === 0) {
|
||||
className += ' highcharts-tab-disabled';
|
||||
}
|
||||
// tab 1
|
||||
var menuItem = createElement('span', {
|
||||
className: className
|
||||
}, void 0, popupDiv);
|
||||
menuItem.appendChild(doc.createTextNode(lang[tabName + 'Button'] || tabName));
|
||||
menuItem.setAttribute('highcharts-data-tab-type', tabName);
|
||||
return menuItem;
|
||||
}
|
||||
/**
|
||||
* Set all tabs as invisible.
|
||||
* @private
|
||||
*/
|
||||
function deselectAll() {
|
||||
var popupDiv = this.container, tabs = popupDiv
|
||||
.querySelectorAll('.highcharts-tab-item'), tabsContent = popupDiv
|
||||
.querySelectorAll('.highcharts-tab-item-content');
|
||||
for (var i = 0; i < tabs.length; i++) {
|
||||
tabs[i].classList.remove('highcharts-tab-item-active');
|
||||
tabsContent[i].classList.remove('highcharts-tab-item-show');
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Init tabs. Create tab menu items, tabs containers
|
||||
* @private
|
||||
* @param {Highcharts.Chart} chart
|
||||
* Reference to current chart
|
||||
*/
|
||||
function init(chart) {
|
||||
if (!chart) {
|
||||
return;
|
||||
}
|
||||
var indicatorsCount = this.indicators.getAmount.call(chart);
|
||||
// create menu items
|
||||
var firstTab = addMenuItem.call(this, 'add'); // run by default
|
||||
addMenuItem.call(this, 'edit', indicatorsCount);
|
||||
// create tabs containers
|
||||
addContentItem.call(this);
|
||||
addContentItem.call(this);
|
||||
switchTabs.call(this, indicatorsCount);
|
||||
// activate first tab
|
||||
selectTab.call(this, firstTab, 0);
|
||||
}
|
||||
/**
|
||||
* Set tab as visible
|
||||
* @private
|
||||
* @param {globals.Element} - current tab
|
||||
* @param {number} - Index of tab in menu
|
||||
*/
|
||||
function selectTab(tab, index) {
|
||||
var allTabs = this.container
|
||||
.querySelectorAll('.highcharts-tab-item-content');
|
||||
tab.className += ' highcharts-tab-item-active';
|
||||
allTabs[index].className += ' highcharts-tab-item-show';
|
||||
}
|
||||
/**
|
||||
* Add click event to each tab
|
||||
* @private
|
||||
* @param {number} disableTab
|
||||
* Disable tab when 0
|
||||
*/
|
||||
function switchTabs(disableTab) {
|
||||
var popup = this, popupDiv = this.container, tabs = popupDiv.querySelectorAll('.highcharts-tab-item');
|
||||
tabs.forEach(function (tab, i) {
|
||||
if (disableTab === 0 &&
|
||||
tab.getAttribute('highcharts-data-tab-type') === 'edit') {
|
||||
return;
|
||||
}
|
||||
['click', 'touchstart'].forEach(function (eventName) {
|
||||
addEvent(tab, eventName, function () {
|
||||
// reset class on other elements
|
||||
deselectAll.call(popup);
|
||||
selectTab.call(popup, this, i);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
/* *
|
||||
*
|
||||
* Default Export
|
||||
*
|
||||
* */
|
||||
var PopupTabs = {
|
||||
init: init
|
||||
};
|
||||
export default PopupTabs;
|
||||
Reference in New Issue
Block a user