How can I change the breakpoint for MegaMenu in Magento 2? - magento2

I am using the MegaMenu in Magento 2. The default breakpoint for the menu to collapse is 1024px / 1025px. The smaller version is a simple list of categories, sliding in from the right side of the screen. The bigger version is a dropdown with categories to hover.
How can I change the breakpoint to 1194px / 1195px?
I tried modifying JS and CSS but it just broke the menu. I could also not find an option in the admin panel.

I don't own the extension but i read the javascript and in the file of demo website:
https://mega-menu-m2-ce.magento-demo.amasty.com/static/version1586867535/frontend/Magento/luma/en_US/Amasty_MegaMenu/js/open-type.js
Line number 35:
_create: function () {
var self = this,
isMobile = $(window).width() <= 1024 ? 1 : 0,
options = self.options,
openType = options.openType,
isHamburger = +options.hamburgerStatus;
There is the breakpoint (1024). Maybe if you change that to 1194 or 1195?
_create: function () {
var self = this,
isMobile = $(window).width() <= 1194 ? 1 : 0,
options = self.options,
openType = options.openType,
isHamburger = +options.hamburgerStatus;
Override that setting with js. or override the whole js file? Hope that helps.

Related

Echart bind different click event handler for different part of rich-text of xAxis.axisLabel in?

I need to bind click event handler for the icon in the red rectangle zone,bind different click event handler for the blue rectangle zone.
right now ,i have no idea how to make it work, any help will be appreciate
example and codes
I figure out an solution.
You can add an icon dom after the label by manual, like below codes.
var myChart = echarts.init(document.getElementById('main'));
var option = {
// your options
};
const parent = myChart.getDom().parentElement;
const xPixel = myChart.convertToPixel({ xAxisIndex: 0 }, 2) // to get the x postion of target category
var div = document.createElement('img')
div.style = `position: absolute;top: 366px;height: 12px;left:${xPixel + 2 * 14}px` // 2 * 14 is in order to correct the left
div.src = 'image path'
div.addEventListener('click', () => {})
if (parent) parent.appendChild(div)
You can change top or left to correct the icon position.
If somebody have greater solution, plz let me know.

How to use HTML in a tooltip on a Leaflet legend (or other control)?

I have lost a day on this so far. I have a legend that will obscure a large part of my (AngualrJs) leaflet map, so I don't want it to be permanently visible.
I guess that means a tooltip, although a clickable button might also be acceptable (downside: requires a click to open & one to close).
There are many, many, many attempts to answer this out there, and even a Leaflet legend plugin, which would be ideal, but won't work for me, probably because of the versions of angualrJs or Leaflet used.
Most of the solutions I found seem to use HML & CSS to position a button over the map, but I would be happier with something that is a part of the map.
This question has an answer that actually works. BUT, if I put even the simplest HTML in it, it gets rendered as plain text. E.g <h``>Legend</h1>.
What is the simplest way to show a tooltip on a Leaflet control with interpreted HTML? Failing that a pop-up window?
The legend cannto be permanently displayed as it would obscure the map, and the map must fill the window.
title can't be styled because every browser display it different and has no style functions. Also it should only a one liner.
You can create your own Tooltip which is only visible if the mouse is over the control.
L.CustomControl = L.Control.extend({
options: {
position: 'topright'
//control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
container.title = "Plain Text Title";
var button = L.DomUtil.create('a', '', container);
button.innerHTML = '<img src="https://cdn4.iconfinder.com/data/icons/evil-icons-user-interface/64/location-512.png" width="100%"/>';
L.DomEvent.disableClickPropagation(button);
L.DomEvent.on(button, 'click', this._click,this);
L.DomEvent.on(button, 'mouseover', this._mouseover,this);
L.DomEvent.on(button, 'mouseout', this._mouseout,this);
var hiddenContainer = L.DomUtil.create('div', 'leaflet-bar leaflet-control',container);
hiddenContainer.style.position = "absolute";
hiddenContainer.style.right = "32px";
hiddenContainer.style.width = "100px";
hiddenContainer.style.height = "100%";
hiddenContainer.style.top = "-2px";
hiddenContainer.style.margin = "0";
hiddenContainer.style.background = "#fff";
hiddenContainer.style.display = "none";
L.DomEvent.on(hiddenContainer, 'mouseover', this._mouseover,this);
L.DomEvent.on(hiddenContainer, 'mouseout', this._mouseout,this);
L.DomEvent.disableClickPropagation(hiddenContainer);
this.hiddenContainer = hiddenContainer;
return container;
},
_click : function () {
},
_mouseover : function () {
this.hiddenContainer.style.display ="block";
},
_mouseout : function () {
this.hiddenContainer.style.display ="none";
},
setContent: function(text){
this.hiddenContainer.innerHTML = text;
}
});
var control = new L.CustomControl().addTo(map)
control.setContent('<span style="color: red">TEST</span>')
https://jsfiddle.net/falkedesign/r1ndpL9y/
You need to style it with CSS by your self

Chartjs custom tooltip is not removing from UI

I have included chart.js custom tooltip using example in official docs.
Problem:
If someone have mouse on chart then this custom tooltip is displayed. And while the mouse is in chart, if someone uses tabs/enter to navigate to another page, this custom tooltip function is not called. As a consequence, tooltip is not removed from UI in rest of the interactions with app. I have inspected the core library and I think it was only detecting mouseout event which in this case, didn't call this custom tooltip hook.
Below attached is my code for tooltip configuration, and I am using react-chartjs-2 wrapper to consume chart.js
Chart.js version: 2.9.1
react-chartjs-2: 2.8.0
tooltips: {
enabled: false,
placement: 'left',
caretSize: 5,
cornerRadius: 6,
custom: function(tooltipModel) {
let tooltipEl = document.getElementById('custom-tooltip');
// Create element on first render
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'custom-tooltip';
document.body.appendChild(tooltipEl);
}
// Hide if no tooltip
if (tooltipModel.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
let position = this._chart.canvas.getBoundingClientRect();
let clickPointPosition = position.left + window.pageXOffset + tooltipModel.caretX;
// Display, position, and set styles for font
tooltipEl.style.opacity = 0.9;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = (clickPointPosition < tooltipEl.offsetWidth ? clickPointPosition : clickPointPosition - tooltipEl.offsetWidth) + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
tooltipEl.style.pointerEvents = 'none';
}
},
Just for reference, This issue was resolved by adding animation: false and var tooltipModel = this.
Luckily, this issue was resolved by chartjs. Otherwise an alternate solution is to hide the tooltip in componentWillUnmount hook of your component or react-chartjs-2 wrapper component.
Here is link to actual github issue which includes fiddles as well for demonstration.
https://github.com/chartjs/Chart.js/issues/7493

References in axis using chart.js (or another library)

Im trying to make a graph like this:
https://www.google.com/finance?q=BCBA:PAMP
I have a line chart in chart.js, now I want to add labels (like the letters A, B, C) for certain dates.
Can't find a doc/example to start from. Any idea?
If its more simple to do with another library a recommendation is more than welcome.
Thanks!
Unfortunately, there is no native support in chart.js for what you are wanting. However, you can certainly add this capability using the plugin interface. This requires that you implement your own logic to draw the canvas pixels at the locations that you want them. It might sound challenging, but its easier than it sounds.
Here is an example plugin that will add a value above specific points in the chart (based upon configuration).
Chart.plugins.register({
afterDraw: function(chartInstance) {
if (chartInstance.config.options.showDatapoints || chartInstance.config.options.showDatapoints.display) {
var showOnly = chartInstance.config.options.showDatapoints.showOnly || [];
var helpers = Chart.helpers;
var ctx = chartInstance.chart.ctx;
var fontColor = helpers.getValueOrDefault(chartInstance.config.options.showDatapoints.fontColor, chartInstance.config.options.defaultFontColor);
// render the value of the chart above the bar
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize + 5, 'normal', Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
ctx.fillStyle = fontColor;
chartInstance.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
if (showOnly.includes(dataset.data[i])) {
var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
var scaleMax = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight;
var yPos = (scaleMax - model.y) / scaleMax >= 0.93 ? model.y + 20 : model.y - 5;
ctx.fillText(dataset.data[i], model.x, yPos);
}
}
});
}
}
});
It allows you to configure which points you want to annotate using this new configuration. The showOnly option contains the points that you want to label.
options: {
showDatapoints: {
display: true,
showOnly: [3, 10, 9]
},
}
Obviously, this only adds the datapoint value at the specified points, but you can just change the plugin to paint whatever you want to show instead. Simply replace ctx.fillText(dataset.data[i], model.x, yPos) with different code to render something different on the canvas.
Here is a codepen example to show you want it looks like.

Alignment in Flex table

How can I get the flex table (flex3) to align at the top in this Ui?
function doGet(e) {
var app = UiApp.createApplication();
var flex1 = app.createFlexTable().setBorderWidth(1);
var flex2 = app.createFlexTable().setBorderWidth(1).setWidget(0, 0, app.createLabel('flex2'))
.setWidget(1, 0, app.createTextArea().setHeight(400).setText('Text area in flex2'));
var flex3 = app.createFlexTable().setBorderWidth(1).setWidget(0, 0, app.createLabel('flex3'));
flex1.setWidget(0, 0, flex2).setWidget(0, 1, flex3);
app.add(flex1);
return app;
}
Was expecting...
var flex1 = app.createFlexTable().setBorderWidth(1).setStyleAttribute('vertical-align', 'top');
or
var flex1 = app.createFlexTable().setBorderWidth(1).setColumnStyleAttribute(1, 'vertical-align', 'top');
to work.
Also, using a flow panel instead of a flex for the root didn't work as expected either. That stacked the 2 flex vertically and not left to right.
Adding this line towards the bottom did the trick for me -
flex1.setStyleAttribute(0, 1, 'vertical-align', 'top');
Not sure why the global set style or set column style didn't work. However, setting it on a specific row/column seem to work. Let me know.
This might have to end up on the Issue Tracker, please check there and log an issue.