ion slide is not working when i navigate back in ionic 4 - ionic4

Auto Play Slider is Not Working
I tried all solutions from the given stack overflow nothing works for me I am using ionic4 slide
I am trying this from last 6 days not getting the solution please let me know proper solution so that I can fix this issue
#ViewChild('sliderRef', { static:false }) slides: IonSlides;
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000,
loop:true,
autoplay:{disableOnInteraction:false}
}
ionViewWillEnter(){
this.sliderThree =
{
slidesItems: [
{
id: "../../assets/images/market.jpg",
name:"Sumo"
},
{
id: "../../assets/images/mobile.jpg",
name:"Shelcal 500"
},
{
id: "../../assets/images/test.jpg",
name:"Orofer Xt"
},
]
};
this.slide.update();
}
async slideChange() {
console.log("method called");
this.slides.update();
}
<ion-slides [options]="option" #sliderRef (ionSlideDidChange)="slideChange()">
<ion-slide *ngFor="let item of sliderThree.slidesItems" style="width:90%;height:20vh;" (click)="labTest()">
<ion-card style="width:90%;height:20vh;
display:-webkit-box;
overflow:hidden;border:1px solid grey;" >
<img [src]="item.id" style="width:100%;height:20vh;
display:-webkit-box;" alt="">
</ion-card>
</ion-slide>
</ion-slides>

Had an similar issue try manually starting on ionViewDidEnter and stoping it on ionViewDidEnter.
But first remove your loop, and autoplay properties from the options like so:
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000
}
Then handle start and stop like this:
ionViewDidEnter(){
this.slide.startAutoplay();
}
ionViewDidLeave(){
this.slide.stopAutoplay();
}
EDIT:
If you want to make it work between tabs, then use the autoplay option like so:
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000,
autoplay: {
delay: 1000,
disableOnInteraction: false
}
}

Related

How i can use Freemode with Autoplay? [Marquee]

Im trying to do swiper marquee.
But I only found a solution with .swiper-wrapper { transition-timing-function: linear; } which doesn't work well with loop and safari IOS.
It is logical to assume that autoplay with delay:0 and freemode should create something similar to marquee, but alas, this does not work.
Are there any other ways to make a marquee swiper?
I tried this code and expecting marquee:
` const sliderInstance = new Swiper(root, {
...defaultOptions,
modules: [FreeMode, Autoplay],
init: false,
slidesPerView: 2.2,
loop: true,
freeMode: true,
spaceBetween: 8,
autoplay: {
delay: 1000,
disableOnInteraction: false,
},
});`

How to change vue-toasted pop-up direction

I'm using vue-toasted to show notifaction.
By default, it pops down to top.
Code:
<v-btn #click="onTest" />
...
onTest() {
this.$toast.info('Test!', {
containerClass: 'toasted-container',
className: 'toasted',
keepOnHover: true,
})
},
nuxt.config.js:
toast: {
duration: 3800,
action: {
icon: 'mdi-close-circle',
onClick: (e, toastObject) => {
toastObject.goAway(0)
},
},
iconPack: 'mdi',
icon: 'mdi-check-circle',
},
The toast pops down to top.
I tried to add some css like transition.
I'm not familiar with CSS, so I guess it's wrong.
How can I change it to right to left?
I couldn't find any info on their GitHub.
vue-toasted v1.1.27 only supports animating upward or downward. It has no API to add new animations.
I added some #keyframes and animation, it worked.
#keyframes in {
0% {
opacity: 0;
left: 100%
}
100% {
opacity: 1;
left: 0%
}
}
.some-class{
animation: in 300ms;
}

Is it possible to print a chart with vue-chartjs?

I am using vue-chartjs to render graphs on a webapp. I know you can print charts if you are using the original library. However I have no idea on how to do it with the vue version of the library.
I have my charts variable on an external charts.js file
import {Bar, mixins } from 'vue-chartjs'
Chart.defaults.global
let chartOptions = Chart.defaults.global;
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
let that = this;
that.chartOptions = {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
fontFamily: "'Overpass_Mono', 'Monaco', monospace",
fontColor: "rgba(254, 255, 248, 0.5)"
},
gridLines: {
color: 'rgba(255, 80, 248, 0.08)',
zeroLineColor: 'rgb(168, 119, 181)',
zeroLineWidth: 2
},
}],
xAxes: [{
ticks: {
suggestedMin: 0,
fontColor: "rgb(168, 119, 181)"
},
gridLines: {
color: 'rgba(255, 80, 248, 0.08)',
zeroLineColor: 'transparent',
}
}],
},
legend: {
labels: {
fontColor: 'rgb(168, 119, 181)',
}
}
},
this.renderChart(this.chartData, that.chartOptions)
}
}
Then on my component template I have:
<template>
<div class="report">
<charts v-if="todaySelected"
:chart-id="'total_visits_chart_bar'"
:height="chartsHeight"
:options="chartOptions"
:chart-data="datacollection"
></charts>
<div v-if="todaySelected">
<button #click="printChart(charts)">Print chart</button>
</div>
</template>
<script>
import charts from './chart_0.js'
components: {
charts,
},
data() {
return{
datacollection: {"datasets":[{"label":"Entries Today","data":[15,15,15,0]},{"label":"Currently Inside","data":[2,2,2,0]}],"labels":[]}
}
}.
methods: {
printChart(charts) {
charts.print();
},
}
</script>
Any help would be appreciated.
The answer is: Yes, it is. Your print method in the components' script could be:
methods:{
printChart() {
var canvasEle = document.getElementById('total_visits_chart_bar');
var win = window.open('', 'Print', 'height=600,width=800');
win.document.write("<br><img src='" + canvasEle.toDataURL() + "' />");
setTimeout(function(){ //giving it 200 milliseconds time to load
win.document.close();
win.focus()
win.print();
win.location.reload()
}, 200);
},
}
You can also add this to your component's style:
#media print{
#page {
size: landscape
}
}
vue-chartjs is based on chart.js and not canvas.js, thus it does not have a "build-in" way of printing.
You have to do it with some custom logic and the native javascript printing functions.
You can however grab the canvas element inside your chart component and generate for example an image and then print that image.
It will get a bit tricky, because you only have access to the canvas inside your chart component. So you will need to maybe wait for an event or prop to trigger the toDataURL call and then emit the image to your parent component where you can print it. If you want to trigger the print in your parent component.
methods: {
print () {
// grab the canvas and generate an image
let image = this.$refs.canvas.toDataURL('image/png')
// Emits an event with the image
this.$emit('chart:print', image)
}
}
In your parent component:
<template>
<your-chart #chart:print="handlePrint"
<template/>
....
...
methods: {
handlePrint(image) {
const win = window.open('', 'Print', 'height=600, width=800')
win.document.write(`<br><img src='${image}' />`)
win.print()
win.close()
}
}
It seems like the library is based on chartjs not canvasjs https://www.chartjs.org/docs/latest/ you might want to look into how to print a window Quick Print HTML5 Canvas, and remember you have access to the canvas element where your graph is drawn:
methods: {
printChart() {
const canvasEle = this.$el.querySelector('canvas');
//now your chart image is on canvasEle
},
}
If you are not against using export to pdf format, you can implement this task using jsPDF library, for example:
<template>
<div class="report">
<charts v-if="todaySelected"
:chart-id="'total_visits_chart_bar'"
:height="chartsHeight"
:options="chartOptions"
:chart-data="datacollection"
></charts>
</div>
</template>
<script>
import jsPDF from 'jspdf'; //for PDF printing
methods: {
pdfThatThing : function(){
//Default export is a4 paper, portrait, using milimeters for units
let pdfName = 'test';
var doc = new jsPDF();
doc.text("Header", 20, 20); //at x,y at def.units 2cm
//chart element
let canvasEle = document.getElementById('total_visits_chart_bar');
let chartURL = canvasEle.toDataURL(); //transform path
//a4 page is 209mm, adds at 4cm top, 2cm left, for 15cm in size
doc.addImage(chartURL, 'PNG', 20, 40, 150, 150 )
doc.save(pdfName + '.pdf');
},
}
</script>
There is also option to auto show print dialog in pdf viewer:
doc.autoPrint({variant: 'non-conform'})

BxSlider - wrong Slider-Viewport-Height in Safari 5

In Safari 5 the Viewport-Height is wrong on first load: http://www.filmreich.com/
When the slider starts to go to next slide, the viewport-height is correct. This is the code I use:
slider.reloadSlider({
mode: 'horizontal',
speed: 800,
pause: 7000,
infiniteLoop: false,
adaptiveHeight: true,
preloadImages: 'visible',
nextText: '<i class="fa fa-angle-right"></i>',
prevText: '<i class="fa fa-angle-left"></i>',
pager: false,
controls: false,
auto: true,
onSliderLoad: function(){
jQuery('.article-controls a').on('click', function(e){
e.preventDefault();
var goTo = jQuery(this).attr('data-slide-index');
slider.goToSlide(goTo);
});
}
});
I use jQuery(window).load(), to be sure the slider is fully loaded.
I find a solution - not the best way - but that worked for me. I added the following Code to the onSlideLoad-function:
setTimeout(function(){
var sliderHeight = jQuery('.bxslider li:first-child').height() + 'px';
jQuery('.bx-viewport').css('height', sliderHeight);
}, 300);

Magnific Popup - Counter in Videogallery

I made a video gallery with magnific popup.
But unlike the imagegallery, the videogallery doesn't show a counter e.g. 1/3 at the bottom right of the video. Why not? In the imagegallery it works well.
Code of the Videogallery:
$('.gallery_video').each(function() { // the containers for all your galleries
$(this).magnificPopup({
delegate: 'a', // the selector for gallery item
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: true,
fixedContentPos: false,
gallery: {
enabled:true
},
callbacks: {
lazyLoad: function(item) {
console.log(item); // Magnific Popup data object that should be loaded
}
}
});
});
Code of imagegallery:
$('.image-popup-no-margins').magnificPopup({
type: 'image',
closeOnContentClick: true,
closeBtnInside: true,
fixedContentPos: true,
mainClass: 'mfp-no-margins mfp-with-zoom', // class to remove default margin from left and right side
image: {
verticalFit: true
},
zoom: {
enabled: true,
duration: 300 // don't foget to change the duration also in CSS
},
callbacks: {
lazyLoad: function(item) {
console.log(item); // Magnific Popup data object that should be loaded
}
}
});
Both scripts don't specify a counter so why isn't it showing up on both?
thank you
It has been a time ago when this was asked but a full anwser:
You have to add or specify the iframe markup.
You also want to add some small css updates for positioning the counter.
var $attachmentContainers = $('.js-attachments-in-gallery');
$attachmentContainers.magnificPopup({
delegate: 'a',
type: 'image',
gallery:{
enabled:true,
},
iframe: {
markup:
'<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>'
}
});
.mfp-iframe-scaler .mfp-bottom-bar {
margin-top: 4px; }
Figured it out - for the iframe type you have to specify that you want a counter:
$(this).magnificPopup({
.....
iframe: {
markup: '<button title="Close (Esc)" type="button" class="mfp-close">×</button>'+
'<div class="mfp-counter"></div>'
}