I am upgrading to FancyBox 4.0.5 (from v3). I cannot understand how to run fullscreen mode by default when I'm clicking on carousel image. I could run fullscreen in v3 with no problem. I have tried static config options and events and nothing worked for me. There were no errors in console (very strange...). I am using it like this:
import {Fancybox} from "#fancyapps/ui";
import {Carousel} from "#fancyapps/ui";
import {Panzoom} from "#fancyapps/ui";
import {Fullscreen} from "#fancyapps/ui/src/shared/utils/Fullscreen";
$(document).ready(function () {
const itemImagesDetail = new Carousel(document.querySelector(".carousel"), {
'slidesPerPage': 1,
});
// Customize Fancybox
Fancybox.bind('[data-fancybox="gallery"]', {
Carousel: {
on: {
change: (that) => {
itemImagesDetail.slideTo(itemImagesDetail.findPageForSlide(that.page),
{
friction: 0,
});
},
},
},
Thumbs: {
autoStart: false,
},
Toolbar: {
display: [
{ id: "prev", position: "center" },
{ id: "counter", position: "center" },
{ id: "next", position: "center" },
"zoom",
"slideshow",
"fullscreen",
"download",
"close",
],
},
Fancybox: {
// ...
},
});
Any ideas please? THANKS FOR YOUR HELP.
It would be like this:
Fancybox.bind('[data-fancybox="gallery"]', {
Image: {
zoom: false,
},
fullscreen: {
autoStart: true,
},
});
Related
I can't make my last child node selected after click on it.
Click open this node (href url) but on reloaded page it only select parent node.
Maybe there is also an option to prevent selection of parent node? I don't need it at all.
My tree have only 3 levels and only 3rd/last is used to open links.
jstree config:
$(() => {
$('#jstree').jstree({
core: {
multiple: false,
themes: {
dots: false,
},
data: {
url: '/jsonCats',
dataType: 'json',
},
},
state: {
key: 'navTree',
tree_state: false,
},
types: {
firstfloor: {
icon: false,
selected: false,
},
secfloor: {
icon: false,
},
hidden: {
icon: false,
},
element: {
icon: 'bi bi-file-earmark-text',
},
},
search: {
case_sensitive: false,
show_only_matches: true,
},
plugins: ['search', 'types', 'state', 'changed'],
});
$(document).ready(() => {
$('.search-input').keyup(function () {
const searchString = $(this).val();
$('#jstree').jstree('search', searchString);
});
});
$('#jstree').on('changed.jstree', (e, data) => {
if (data.event === undefined) {
return false;
}
if (data.node.a_attr.href !== '#' && data.event.bubbles) {
location.assign(data.node.a_attr.href);
}
});
});
example json last child:
{
"id": 1001,
"parent": "16",
"text": "Text",
"type": "element",
"li_attr": {
"elem": "element"
},
"a_attr": {
"href": "/KnowledgeBase/1001"
}
localStorage only select parent node:
{"state":{"core":{"open":["1","16"],"scroll":{"left":0,"top":0},"selected":["1"]}},"ttl":false,"sec":1673943166005}
This is a custom control created for my previous question Custom font for currency signs
I have two span elements coming next to each other. They sit in the FormattedText. The FormattedText itself sits in the HBox.
I want popover fired when user mouses over/out from the hbox. Unfortunately, as I have 2 spans this fires separately when user hovers overs them (thus showing 2 separate popovers, when in fact it should be one). My assumption is that this causes because onmouseover/out is attached to both spans under the hood. Can I restrict these events to hbox only?
sap.ui.define([
'sap/ui/core/Control',
'sap/m/FormattedText',
'sap/m/HBox',
], function (Control, FormattedText, HBox) {
return Control.extend('drex.control.TherapyCosts', {
metadata: {
properties: {
rank: {
type: 'int',
defaultValue: 0
},
},
aggregations: {
_rankedTherapyCost: {type: 'sap.m.FormattedText', multiple: false, singularName: '_rankedTherapyCost'},
_popover: {type: 'sap.m.Popover', multiple: false, singularName: '_popover'},
_hbox: {type: 'sap.m.HBox', multiple: false}
}
},
init: function () {
Control.prototype.init.apply(this, arguments);
},
onBeforeRendering: function () {
const highlighedCurrency = this.getCurrency().repeat(this.getRank());
const fadedCurrency = this.getCurrency().repeat(7 - this.getRank());
const _popover = new sap.m.Popover({
showHeader: false,
placement: 'VerticalPreferredBottom',
content: new sap.m.Text({text: 'test'})
});
this.setAggregation('_popover', _popover);
const _formattedText = new FormattedText({
htmlText:
`<span class="currencyHighlighted">${highlighedCurrency}</span>` +
`<span class="currencyFaded">${fadedCurrency}</span>`
});
this.setAggregation('_rankedTherapyCost', _formattedText);
const _hbox = new HBox(
{ items: [this.getAggregation('_rankedTherapyCost')]})
.addEventDelegate({
onmouseover: () => {
this.getAggregation('_popover').openBy(this);
},
onmouseout: () => {
this.getAggregation('_popover').close()
}
});
this.setAggregation('_hbox', _hbox)
},
renderer: function (rm, oControl) {
const _hbox = oControl.getAggregation('_hbox');
rm.write('<div');
rm.writeControlData(oControl);
rm.write('>');
rm.renderControl(_hbox);
rm.write('</div>');
}
});
});
Here is the video of the issue
https://streamable.com/fjw408
The key here is the mouseout event is triggered when the mouse moves out of any child element of the element that is listening for the event. In this case, for example, moving from the emphasised text to the faded text, you get a mouseout event when moving off the emphasised text, which closes the popup, then a mouseover event on the faded text which opens it again.
Since you opening an already open popup doesn't do anything, you only need add a line on mouseout to inspect the element that you've gone to. If it is not a child of the current element, only then close the popover.
if (!this.getDomRef().contains(e.toElement)) {
popOver.close()
}
Building on D.Seah's answer, I've added this to the JSBin. I personally don't like using onBeforeRendering and onAfterRendering like this, so I've refactored a little to construct everything on init and simply change the controls on property change. This way, you're doing less on rendering for performance reasons.
sap.ui.define([
'sap/ui/core/Control',
'sap/m/FormattedText',
], function (Control, FormattedText) {
Control.extend('TherapyCosts', {
metadata: {
properties: {
rank: {
type: 'int',
defaultValue: 0
},
currency: {
type: "string",
defaultValue: "$"
}
},
aggregations: {
_highlighted: {type: 'sap.m.FormattedText', multiple: false},
_faded: {type: 'sap.m.FormattedText', multiple: false},
_popover: {type: 'sap.m.Popover', multiple: false, singularName: '_popover'}
}
},
init: function () {
Control.prototype.init.apply(this, arguments);
this.addStyleClass('therapy-cost');
const highlight = new FormattedText();
highlight.addStyleClass("currency-highlight");
this.setAggregation('_highlighted', highlight);
const faded = new FormattedText();
faded.addStyleClass("currency-faded");
this.setAggregation('_faded', faded);
const _popover = new sap.m.Popover({
showHeader: false,
placement: 'VerticalPreferredBottom',
content: new sap.m.Text({text: 'test'})
});
this.setAggregation('_popover', _popover);
},
_changeAggr: function () {
const highlighedCurrency = this.getCurrency().repeat(this.getRank());
const highlight = this.getAggregation("_highlighted");
highlight.setHtmlText(highlighedCurrency);
const fadedCurrency = this.getCurrency().repeat(7 - this.getRank());
const faded = this.getAggregation("_faded");
faded.setHtmlText(fadedCurrency);
},
setRank: function(rank) {
if (this.getProperty("rank") !== rank) {
this.setProperty("rank", rank);
this._changeAggr();
}
},
setCurrency: function(curr) {
if (this.getProperty("currency") !== curr) {
this.setProperty("currency", curr);
this._changeAggr();
}
},
renderer: function (rm, oControl) {
rm.write('<div');
rm.writeControlData(oControl);
rm.writeClasses(oControl);
rm.writeStyles(oControl);
rm.write('>');
rm.renderControl(oControl.getAggregation('_highlighted'));
rm.renderControl(oControl.getAggregation('_faded'));
rm.write('</div>');
},
onmouseover: function (e) {
const popOver = this.getAggregation('_popover');
popOver.openBy(this);
},
onmouseout: function (e) {
if (!this.getDomRef().contains(e.toElement)) {
const popOver = this.getAggregation('_popover');
popOver.close();
}
}
});
(new TherapyCosts({
rank: 5,
currency: "£"
})).placeAt('content')
});
.therapy-cost {
display: inline-flex;
flex-direction: row;
}
.therapy-cost .currency-highlighted {
color: black;
}
.therapy-cost .currency-faded {
color: lightgrey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
</head>
<body class="sapUiBody sapUiSizeCompact">
<div id='content'></div>
</body>
</html>
https://jsbin.com/gukedamemu/3/edit?css,js,output
i think you can do without the hbox; by just having two formatted text or any sapui5 controls will be ok too.
sap.ui.define([
'sap/ui/core/Control',
'sap/m/FormattedText',
], function (Control, FormattedText) {
Control.extend('TherapyCosts', {
metadata: {
properties: {
rank: {
type: 'int',
defaultValue: 0
},
currency: {
type: "string",
defaultValue: "$"
}
},
aggregations: {
_highlighted: {type: 'sap.m.FormattedText', multiple: false},
_faded: {type: 'sap.m.FormattedText', multiple: false},
_popover: {type: 'sap.m.Popover', multiple: false, singularName: '_popover'}
}
},
init: function () {
Control.prototype.init.apply(this, arguments);
this.addStyleClass('therapy-cost')
},
onBeforeRendering: function () {
const highlighedCurrency = this.getCurrency().repeat(this.getRank());
const highlight = new FormattedText({
htmlText: highlighedCurrency
});
this.setAggregation('_highlighted', highlight);
const fadedCurrency = this.getCurrency().repeat(7 - this.getRank());
const faded = new FormattedText({
htmlText: fadedCurrency
});
this.setAggregation('_faded', faded);
const _popover = new sap.m.Popover({
showHeader: false,
placement: 'VerticalPreferredBottom',
content: new sap.m.Text({text: 'test'})
});
this.setAggregation('_popover', _popover);
},
renderer: function (rm, oControl) {
rm.write('<div');
rm.writeControlData(oControl);
rm.writeClasses(oControl);
rm.writeStyles(oControl);
rm.write('>');
rm.renderControl(oControl.getAggregation('_highlighted'));
rm.renderControl(oControl.getAggregation('_faded'));
rm.write('</div>');
},
onAfterRendering: function () {
const popOver = this.getAggregation('_popover');
const highlighted = this.getAggregation("_highlighted");
highlighted.$().addClass("currency-highlighted");
highlighted.$().hover(function() {
popOver.openBy(highlighted);
}, function() {
popOver.close();
});
const faded = this.getAggregation("_faded");
faded.$().addClass("currency-faded");
},
});
(new TherapyCosts({
rank: 5
})).placeAt('content')
});
https://jsbin.com/razebuq/edit?css,js,output
I'm using Chart.js to create a bar char, I have to display the percentage on each bar, so I found the chartjs-plugin-datalabels, but I can't make it work, the documentation and the examples are not clear for me.
This is What I got:
HTML:
<canvas id="bar-chart" width="800" height="450"></canvas>
Javascript:
// Bar chart
var valuedata= [2478,5267,734,784,433];
var valuelabel=["Africa", "Asia", "Europe", "Latin America", "North America"];
var myBarChart = new Chart(document.getElementById("bar-chart"), {
type: 'bar',
data: {
labels: valuelabel,
datasets: [
{
label: "Population (millions)",
backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
data: valuedata,
}
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Predicted world population (millions) in 2050'
},
scales: {
xAxes: [{
gridLines: {
display:false
}
}],
yAxes: [{
gridLines: {
display:false,
drawBorder: false
},
ticks: {
display: false
}
}]
},
plugins: {
datalabels: {
color: 'white',
display: function(context) {
console.log("Algo: "+context);
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: function(value, context) {
return context.dataIndex + ': ' + Math.round(value*100) + '%';
}
}
}
}
});
myBarChart.update();
Supposedly, from what I get, the "plugin" inside option is the one that let the values to be display, but as I shown in my code above, doesn't work for me, surely I'm missing something but I don't know what, can somebody help me?
Thanks.
Fiddle:
https://jsfiddle.net/s64bq4sw/16/
It was because of the version of the Chartjs I was using, this plugin requieres 2.7.0 or later.
I added chart.resize() inside of addData and removeData function, but it is always increasing height and it is never decreasing!
I am updating the chart when the user click on item of the menu. Some items have more than 100 datas e some others items have only 2 data and when have few data, the chart is always increasing height:
horizontalBar
Why is this happening?
<canvas id="chart"></canvas>
var chartData = {
labels: [<?php echo '"'.implode('","', $chart_labels ).'"' ?>],
datasets: [
{
data: [<?php echo implode(',', $chart_numbers ) ?>],
backgroundColor: '#184b8f',
hoverBackgroundColor: '#ef3e42'
}
]
};
var barOptions = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
},
legend: {
display: false
},
scales : {
xAxes : [{
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
color: '#cfcfcf'
}
} ],
yAxes : [ {
gridLines : {
display: false
},
ticks: {
fontSize: 13,
fontFamily: "'Open Sans'",
fontWeight: 600,
}
}]
},
animation: {
duration: 500,
easing: "easeOutQuart",
}
};
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.resize();
chart.update();
}
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.resize();
chart.update();
}
var ctx = document.getElementById("chart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'horizontalBar',
data: chartData,
options: barOptions
});
I had the same thing. You have to put an empty div around the canvas.
I've found some users had the same issue in this post: https://github.com/jtblin/angular-chart.js/issues/84
The solution for me was to change the chart's options to maintainAspectRatio: false.
myChart.setOptions({
responsive: true,
maintainAspectRatio: false
});
In laravel livewire i fixed adding wire:ignore to wrapper div
<div wire:ignore>
<div class="chart-container" style="height: 80vh; width: 80vh;">
<canvas id="bar-chart" height="800" width="1500"></canvas>
</div>
</div>
I was having the same issue in a Bulma tile.
The fix was to set
responsive: false in the Chart.js script options area.
How can i change the background color in angular2-highcharts?
i my component i have:
chart: any;
saveChart(chart) {
this.chart = chart;
}
constructor(
private eventManager: EventManager,
private locationService: LocationService,
private route: ActivatedRoute,
private alertService: AlertService
) {
this.options = {
title: { text: 'Senaste dygnet' },
xAxis: {
type: 'datetime',
title: {
text: 'Tid'
}
},
yAxis: {
title: {
text: 'Temperatur'
}
},
series: [{
name: 'Vattentemperatur',
data: []
}]
};
}
template:
<chart [options]="options" (load)="saveChart($event.context)"></chart>
when i do this.chart.backgroundColor= "#000000";
nothing happens.
I got some help from a co-worker and this works for me now.
saveChart(chart) {
this.chart = chart;
this.chart.chartBackground.css({
color: 'rgba(225, 225, 225, 0.7)',
fontSize: '16px'
});
}
chart: {
"events": {
"drilldown": drillDownCallBack
},
"plotBackgroundColor": "black",
"plotBorderWidth": null,
"plotShadow": false,
"type": "pie"
}
You can just pass "plotBackgroundColor": "black",for background color. Here is an example check this