Related
I have been able to display Json data from API in FutureBuilder Widget. However, the widget has checkbox for each list. Whenever I check on one list, the whole list get checked.
I want a help on how to check each list individually and be able to use the data of the selected list.
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:bottom_navy_bar/bottom_navy_bar.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mar/Components/mydrawer.dart';
import 'package:mar/Services/auth.dart';
import 'package:mar/sccreens/readRequirements.dart';
import 'package:mar/sccreens/scanAnalysis.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../constants.dart';
import 'infoAnalysis.dart';
import 'login_screen.dart';
class Know extends StatefulWidget {
static String id = 'Know';
#override
_KnowState createState() => _KnowState();
}
class _KnowState extends State<Know> {
List sympotms = [];
int currentIndex = 2;
bool valuefirst = false;
int _bottomBarIndex = 0;
Auth _auth;
showdialogall(context, String mytitle, String mycontent) {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
title: Text(
mytitle,
style: TextStyle(color: Colors.deepOrange),
),
content: Text(mycontent),
actions: [
Center(
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
color: kMainColor,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ReadReq()),
);
},
child: Text(
"Requirements",
style: TextStyle(color: Colors.black),
)),
),
],
);
});
}
Future fetchdata() async {
var res = await http.get("http://10.0.2.2/medical/symptoms.php");
if (res.statusCode == 200) {
var obj = json.decode(res.body);
return obj;
}
}
bool isSearching = false;
#override
void initState() {
fetchdata().then((data) {
setState(() {
sympotms = data;
});
});
super.initState();
}
void _filterSymptoms(value) {
setState(() {
filteredsympotms = sympotms
.where(
(sym) => sym['name'].toLowerCase().contains(value.toLowerCase()))
.toList();
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: kMainColor,
title: Text(
"Know Your Analysis",
style: TextStyle(
fontFamily: 'Pacifico',
),
),
actions: <Widget>[
FlatButton(
child: CircleAvatar(
child: Image(
image: AssetImage('images/icons/medical.png'),
),
backgroundColor: Colors.black,
),
onPressed: () {
Navigator.pushNamed(context, Scan.id);
},
),
],
centerTitle: true,
),
drawer: MyDrawer(),
body: Column(
children: [
Expanded(
child: sympotms.length > 0
? ListView.builder(
itemBuilder: (_, index) {
return Container(
child: Row(
children: [
SizedBox(width: 10),
Checkbox(
value: this.valuefirst,
onChanged: (bool value) {
setState(() {
valuefirst = value;
});
},
checkColor: Colors.greenAccent,
activeColor: Colors.black,
),
Text(
"${sympotms[index]['SymptomsName']}",
style: TextStyle(fontSize: 17.0),
),
],
),
);
},
itemCount: sympotms.length,
)
: Container(child: Center(child: Text("Loading..."))),
),
RaisedButton(
child: Text(
" Submit ",
style: TextStyle(fontSize: 20),
),
onPressed: () {
showdialogall(context, "Result !", "CBC Test");
},
// onPressed: showdialogall(context, "Result !", "CBC Test"),
color: Colors.green,
textColor: Colors.white,
splashColor: Colors.grey,
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
),
],
),
//Navigation
bottomNavigationBar: BottomNavyBar(
animationDuration: Duration(milliseconds: 800),
curve: Curves.easeInOut,
selectedIndex: currentIndex,
onItemSelected: (index) async {
if (index == 0) {
Navigator.pushNamed(context, Scan.id);
}
if (index == 1) {
Navigator.pushNamed(context, Information.id);
}
if (index == 2) {
Navigator.pushNamed(context, Know.id);
}
if (index == 3) {
SharedPreferences pref = await SharedPreferences.getInstance();
pref.clear();
await _auth.signOut();
Navigator.popAndPushNamed(context, LoginScreen.id);
}
setState(() {
currentIndex = index;
});
},
items: <BottomNavyBarItem>[
BottomNavyBarItem(
icon: Icon(
Icons.camera_alt,
),
title: Text('Scan'),
activeColor: Colors.black,
inactiveColor: Colors.black,
),
BottomNavyBarItem(
icon: Icon(
Icons.perm_device_information,
),
title: Text('Information'),
activeColor: Colors.black,
inactiveColor: Colors.black,
),
BottomNavyBarItem(
icon: Icon(
Icons.open_in_new_outlined,
),
title: Text('Know analysis'),
activeColor: Colors.black,
inactiveColor: Colors.black,
),
],
),
);
}
}
I want a help on how to check each list individually and be able to use the data of the selected list.
this image display my problem
You can do it by storing the selected index in an array.
Here is the idea.
final selectedIndexes = [];
/// In List View
ListView.builder(
itemBuilder: (_, index) {
return Container(
child: Row(
children: [
SizedBox(width: 10),
Checkbox(
value: selectedIndexes.contains(index),
onChanged: (bool value) {
if(selectedIndexes.contains(index) {
selectedIndexes.remove(index); // unselect
} else {
selectedIndexes.add(index); // select
}
setState(() {});
},
checkColor: Colors.greenAccent,
activeColor: Colors.black,
),
Text(
"${sympotms[index]['SymptomsName']}",
style: TextStyle(fontSize: 17.0),
),
],
),
);
},
itemCount: sympotms.length,
)
Since now you have stored the indexes, you can get whatever data you want for selected checkboxes.
I am using the flutter_staggered_grid_view package (https://github.com/letsar/flutter_staggered_grid_view) to have a feed of images. I want to implement something where first of all I can fetch say 30 images on initial screen load then when I reach the end and the scroll listener fires fetch more from the api. How do I change the below to do this? Can anyone give me any direction on docs etc. I think fundamentally this package is using gridview underneath but I am new to flutter so I'm unsure.
I just want an infinite scroll feed of images from an api.
class HomeScreen extends StatefulWidget {
_HomeState createState() => _HomeState();
}
class _HomeState extends State<HomeScreen> {
final scrollController = ScrollController();
#override
void initState() {
super.initState();
scrollController.addListener(() {
if (scrollController.position.maxScrollExtent ==
scrollController.offset) {
// Get more
print('End of screen');
}
});
}
List<String> imageList = [
'https://cdn.pixabay.com/photo/2020/12/15/16/25/clock-5834193__340.jpg',
'https://cdn.pixabay.com/photo/2020/09/18/19/31/laptop-5582775_960_720.jpg',
'https://media.istockphoto.com/photos/woman-kayaking-in-fjord-in-norway-picture-id1059380230?b=1&k=6&m=1059380230&s=170667a&w=0&h=kA_A_XrhZJjw2bo5jIJ7089-VktFK0h0I4OWDqaac0c=',
'https://cdn.pixabay.com/photo/2019/11/05/00/53/cellular-4602489_960_720.jpg',
'https://cdn.pixabay.com/photo/2017/02/12/10/29/christmas-2059698_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/01/29/17/09/snowboard-4803050_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/02/06/20/01/university-library-4825366_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/11/22/17/28/cat-5767334_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/12/13/16/22/snow-5828736_960_720.jpg',
'https://cdn.pixabay.com/photo/2020/12/15/16/25/clock-5834193__340.jpg',
'https://cdn.pixabay.com/photo/2020/09/18/19/31/laptop-5582775_960_720.jpg',
];
#override
Widget build(BuildContext context) {
/// If you set your home screen as first screen make sure call [SizeConfig().init(context)]
SizeConfig().init(context);
return Scaffold(
body: Platform.isIOS
? Container(
margin: EdgeInsets.only(left: 12, right: 12, top: 5),
child: CustomScrollView(
controller: scrollController,
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics()),
slivers: <Widget>[
SliverAppBar(
floating: true,
title: SvgPicture.asset(
"assets/images/logo-dark.svg",
height: getProportionateScreenWidth(40),
),
actions: [
// Filter Button
FlatButton(
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FilterScreen(),
),
),
child: Text(
"Filter",
style: Theme.of(context).textTheme.bodyText1,
),
),
],
),
CupertinoSliverRefreshControl(
onRefresh: () async {
await Future.delayed(Duration(seconds: 2));
},
),
SliverStaggeredGrid.countBuilder(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 12,
itemCount: imageList.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(15)),
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: imageList[index],
fit: BoxFit.cover,
),
),
);
},
staggeredTileBuilder: (index) {
return StaggeredTile.count(1, index.isEven ? 1.2 : 1.8);
},
)
],
),
)
: RefreshIndicator(
color: kMainColor,
displacement: 120,
onRefresh: () async {
await Future.delayed(Duration(seconds: 2));
},
child: Container(
margin: EdgeInsets.only(left: 12, right: 12, top: 5),
child: CustomScrollView(
controller: scrollController,
physics: const BouncingScrollPhysics(
parent: AlwaysScrollableScrollPhysics(),
),
slivers: <Widget>[
SliverAppBar(
floating: true,
title: SvgPicture.asset(
"assets/images/logo-dark.svg",
height: getProportionateScreenWidth(40),
),
actions: [
// Filter Button
FlatButton(
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FilterScreen(),
),
),
child: Text(
"Filter",
style: Theme.of(context).textTheme.bodyText1,
),
),
],
),
SliverStaggeredGrid.countBuilder(
crossAxisCount: 2,
crossAxisSpacing: 10,
mainAxisSpacing: 12,
itemCount: imageList.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
),
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(15),
),
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: imageList[index],
fit: BoxFit.cover,
),
),
);
},
staggeredTileBuilder: (index) {
return StaggeredTile.count(1, index.isEven ? 1.2 : 1.8);
},
)
],
),
),
),
);
}
}
You need to add the ScrollController for the scrolling detection at the bottom for the ListView and GridView. As you need the GridView i have created the ScrollController listner and added to the GridView's contollerfor the detection of the scroll. I have created the demo of it , please check it once. At first time it load the 10 items and when list comes to the bottom then it add more 10 items in it.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class HomeScreen extends StatefulWidget {
#override
State<StatefulWidget> createState() {
// TODO: implement createState
return HomeState();
}
}
class HomeState extends State<HomeScreen> {
List dataList = new List<int>();
bool isLoading = false;
int pageCount = 1;
ScrollController _scrollController;
#override
void initState() {
super.initState();
////LOADING FIRST DATA
addItemIntoLisT(1);
_scrollController = new ScrollController(initialScrollOffset: 5.0)
..addListener(_scrollListener);
}
Widget build(BuildContext context) {
return MaterialApp(
title: 'Gridview',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.red,
accentColor: Color(0xFFFEF9EB),
),
home: Scaffold(
appBar: new AppBar(),
body: GridView.count(
controller: _scrollController,
scrollDirection: Axis.vertical,
crossAxisCount: 2,
mainAxisSpacing: 10.0,
physics: const AlwaysScrollableScrollPhysics(),
children: dataList.map((value) {
return Container(
alignment: Alignment.center,
height: MediaQuery.of(context).size.height * 0.2,
margin: EdgeInsets.only(left: 10.0, right: 10.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
),
child: Text("Item ${value}"),
);
}).toList(),
)));
}
//// ADDING THE SCROLL LISTINER
_scrollListener() {
if (_scrollController.offset >=
_scrollController.position.maxScrollExtent &&
!_scrollController.position.outOfRange) {
setState(() {
print("comes to bottom $isLoading");
isLoading = true;
if (isLoading) {
print("RUNNING LOAD MORE");
pageCount = pageCount + 1;
addItemIntoLisT(pageCount);
}
});
}
}
////ADDING DATA INTO ARRAYLIST
void addItemIntoLisT(var pageCount) {
for (int i = (pageCount * 10) - 10; i < pageCount * 10; i++) {
dataList.add(i);
isLoading = false;
}
}
#override
void dispose() {
_scrollController.dispose();
super.dispose();
}
}
https://i.stack.imgur.com/7hcDc.gif
When i am on edit profile screen i changed my details and back from the back icon, On the next screen my updated data not reflecting.
This is my home screen where i need to call below API:
Main.dart
#override
Widget build(BuildContext context) {
return new MaterialApp(
showPerformanceOverlay: false,
debugShowCheckedModeBanner: false,
title: 'hempmeASAP',
home: (is_loggedin) ? Home():Login(),
routes: {
"/home": (_) => new Home(),
"/login": (_) => new Login(),
"/signup": (_) => new Signup(),
"/forgot": (_) => new ForgotPassword()
},
);
}
home.dart
void initState() {
super.initState();
getProfileData();
}
getProfileData() {
customFun.readToken().then((val) {
setState(() {
access_token = val;
});
try{
(() async {
await restApis.getProfile(access_token).then((val) => setState((){
print(val);
name = (val["data"]["name"]).toString();
profile_img = val["data"]["avatarUrl"];
}));
})();
}catch(e){
setState(() {
showProgressBar = false;
//show_error = true;
//error_msg = "The exception thrown is $e";
});
scaffoldKey.currentState.showSnackBar(SnackBar(
backgroundColor: Colors.red,
content: Text("The exception thrown is $e"),
));
}
});
}
// I need to pass updated name and profile_img here
child: new Scaffold(
key: scaffoldKey,
//drawer: new Drawer(child: DrawerList()),
appBar: AppBarComponent(context: context, appbarTitle:appBarTitle, name: name, profile_img: profile_img),
)
app_bar_component.dart
class AppBarComponent extends AppBar {
AppBarComponent({Key key, BuildContext context, appbarTitle, name, profile_img, screenName})
: super(
key: key,
backgroundColor: Colors.white,
//centerTitle: false,
iconTheme: IconThemeData(
color: Color(0xff888888), //change your color here
),
title: Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Stack(
children: <Widget>[
CircleAvatar(
radius: 26.0,
backgroundImage: (profile_img != null && profile_img != "") ? NetworkImage("$profile_img"):NetworkImage('https://via.placeholder.com/150',scale: 1.0),
backgroundColor: Colors.transparent,
),
]
),
Padding(
padding: const EdgeInsets.all(10.0),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 2.0),
child: Text("$name",style: TextStyle(color: Color(0xff444444),fontSize: 16.0))
),
screenName != 'edit' ?
GestureDetector(
child: Text("Edit Profile", style: TextStyle(fontSize: 11.0, color: Colors.blue,decoration: TextDecoration.underline)),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => Editprofile())
);
}
):Container()
]
)
)
],
),
),
actions: <Widget>[
new IconButton(
onPressed: () =>
customFun.logout().then((_) =>
Navigator.pushReplacement(context, MaterialPageRoute(builder: (context)=> Login(logout:true)))
),
icon: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 8.0,top: 4.0),
child: Icon(Icons.exit_to_app,color: Color(0xff888888)),
),
]
)
),
],
);
}
editprofile.dart
void _submitlogin() {
final form = formKey.currentState;
Map _data;
if(form.validate()){
if(_newpassword != _confirmpassword){
setState(() {
show_error = true;
error_msg = "Confirm Password should match password";
});
}
showProgressBar = true;
customFun.readToken().then((val) {
access_token = val;
try{
(() async {
await restApis.postUpdateProfile(access_token,_name,_mobile,_oldpassword,_newpassword,_confirmpassword).then((val) => setState(() {
// print("response");
print(val);
if(val["success"]){
form.save();
scaffoldKey.currentState.showSnackBar(SnackBar(
backgroundColor: Colors.green,
content: Text(val["message"]),
));
setState(() {
showProgressBar = false;
show_error = false;
});
_getProfleDetail();
}else{
showProgressBar = false;
scaffoldKey.currentState.showSnackBar(SnackBar(
backgroundColor: Colors.red,
content: Text(val["message"]),
));
}
}));
})();
}catch(e){
setState(() {
showProgressBar = false;
//show_error = true;
//error_msg = "The exception thrown is $e";
});
scaffoldKey.currentState.showSnackBar(SnackBar(
backgroundColor: Colors.red,
content: Text("The exception thrown is $e"),
));
}
});
}
}
THESE ARE THE MAIN FUNCTIONS AND WHEN I UPDATE MY PROFILE AND BACK FROM NAVIGATION BACK ICON ON EDIT PROFILE SCREEN ON MY HOME PAGE APP BAR PROFILE PHOTO AND THE NAME IS NOT UPDATING. NAME AND PROFILE PHOTO SHOULD BE UPDATED IN APP.
I need to call getProfileData(); function when i am coming to home screen from edit profile screen.
UPDATED: My issue is when i update my image from updateprofile screen this result is not reflecting on the home screen.
Please let me know if any solution.
I use the react-native-charts-wrapper.
My code:
xAxis: {
drawLabels: true,
position: "BOTTOM",
labelCount: 5,
valueFormatter: testobj.map(item => {
//test
return "a\nb";
})
}
Any idea, how can I use "\n" inside valueFormatter?
I have a problem properly displaying slideshow (which is written in Jquery) when i revisit web page (via router-link)...
So if i press f5 and web page reloads, everything is working properly, but once i click on one link and i'm redirected, half of web page is blank... I belive that problem is because a lot of parts of this application is in jquery code. I bought a template and include it in to my Vuejs2 project
Example of home component
<template>
<div id="wrapper">
<HeaderComponent></HeaderComponent>
<div id="main-content">
<SlideShow></SlideShow>
</div>
<FooterComponent></FooterComponent>
</div>
</template>
<script>
import HeaderComponent from './HeaderComponent.vue'
import SlideShow from './subComponents/SlideShow.vue'
import FooterComponent from './FooterComponent.vue'
export default {
name: 'Home',
components: {
'HeaderComponent': HeaderComponent,
'SlideShow': SlideShow,
'FooterComponent': FooterComponent
}
}
</script>
Slideshow component
<template>
<div class="">
<div class="rev_slider_wrapper">
<div id="rev_slider" data-slider-layout="fullscreen" data-slider-thumbnail="true" class="rev_slider">
<ul>
<li><img src="static/img/various/bg-image.png"/></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'SlideShow'
}
</script>
This is the slider.js included in index.html via tag
$(document).ready(function () {
// MAIN VARIABLES INITIALIZATION
var revapi;
$(window).resize(function () {
'use strict';
if ($('#rev_slider').data('slider-layout') == 'fullscreen' && $('body').hasClass('left-nav')) {
var windowHeight = $(window).height();
$('.rev_slider_wrapper, #rev_slider').height(windowHeight);
}
});
(function () {
'use strict';
slickCarousel();
setTimeout(function () {
revSlider();
owlCarousel();
}, 100);
bxSlider();
flexslider();
}());
// REVOLUTION SLIDER
function revSlider() {
if ($.fn.revolution && $('#rev_slider').length) {
var revSliderLayout = $('#rev_slider').data('slider-layout') ? $('#rev_slider').data('slider-layout') : 'auto';
var revSliderHeight = $('#rev_slider').data('gridheight') ? $('#rev_slider').data('gridheight') : [800, 800, 480, 360];
var windowHeight = $(window).height();
if ($('body').hasClass('left-nav')) {
revSliderLayout = 'auto';
if ($('#rev_slider').data('slider-layout') == 'fullscreen') {
revSliderHeight = windowHeight;
}
}
revapi = $('#rev_slider').show().revolution({
sliderType: $('#rev_slider').data('slider-type') ? $('#rev_slider').data('slider-type') : 'standard',// standard, hero, carousel
jsFileLocation: 'static/js/plugins/revolution-slider/revolution/js/',
sliderLayout: revSliderLayout, // auto, fullscreen, fullwidth
dottedOverlay: 'none',
delay: 9000,
lazyLoad: 'on',
navigation: {
keyboardNavigation: 'on',
keyboard_direction: 'horizontal',
mouseScrollNavigation: $('#rev_slider').data('nav-mouse') ? $('#rev_slider').data('nav-mouse') : 'off',
onHoverStop: 'off',
touch: {
touchenabled: 'on',
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: 'horizontal',
drag_block_vertical: false
},
arrows: {
style: 'zeus',
enable: $('#rev_slider').attr('data-nav-arrows') ? false : true,
hide_onmobile: false,
hide_onleave: false,
tmp: $('#rev_slider').data('slider-thumbnail') ? '<div class="tp-title-wrap"><div class="tp-arr-imgholder"></div></div>' : '<div class="tp-title-wrap"></div>',
left: {
h_align: 'left',
v_align: 'center',
h_offset: 10,
v_offset: 0
},
right: {
h_align: 'right',
v_align: 'center',
h_offset: 10,
v_offset: 0
}
},
bullets: {
enable: $('#rev_slider').attr('data-nav-bullets') ? true : false,
hide_onmobile: false,
style: 'uranus',
hide_onleave: false,
direction: 'vertical',
h_align: $('#rev_slider').data('bullets-align') ? $('#rev_slider').data('bullets-align') : 'left',
v_align: 'center',
h_offset: 30,
v_offset: 0,
space: 10,
tmp: '<span class="tp-bullet-inner"></span>'
}
},
carousel: {
maxRotation: 5,
vary_rotation: "off",
minScale: 15,
vary_scale: "off",
horizontal_align: "center",
vertical_align: "center",
fadeout: "on",
vary_fade: "on",
maxVisibleItems: 3,
infinity: "off",
space: -80,
stretch: "off"
},
responsiveLevels: $(this).data('responsive') ? $(this).data('responsive') : [1240, 1024, 778, 480],
gridwidth: $(this).data('gridwidth') ? $(this).data('gridwidth') : [1230, 1024, 767, 480],
gridheight: revSliderHeight,
lazyType: 'none',
parallax: {
type: 'mouse',
origo: 'slidertop',
speed: 2000,
levels: [2, 3, 4, 5, 6, 7, 12, 16, 10, 50],
disable_onmobile: 'on'
},
shadow: 0,
spinner: 'off',
stopLoop: 'on',
stopAfterLoops: 0,
// stopAtSlide: $('#rev_slider').data('autoplay') ? 0 : 1,
shuffle: 'off',
autoHeight: 'off',
disableProgressBar: 'on',
hideThumbsOnMobile: 'off',
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
startWithSlide: 0,
fallbacks: {
simplifyAll: 'off',
nextSlideOnWindowFocus: 'off',
disableFocusListener: 'off'
}
});
revapi.bind("revolution.slide.onbeforeswap", function (e) {
if ($('#rev_slider').data('slider-layout') == 'fullscreen' && $('body').hasClass('left-nav')) {
var windowHeight = $(window).height();
$('.rev_slider_wrapper, #rev_slider').height(windowHeight);
}
});
revapi.bind('revolution.slide.onchange', function (event, data) {
var logoImg = $('#logo a img');
var logoLight = $('#logo a').data('logo-light');
var logoDark = $('#logo a').data('logo-dark');
var currentSlide = data.slideIndex;
if (revapi.find('li').eq(data.slideIndex - 1).attr('data-color') === 'dark') {
$('body').addClass('transparent-dark');
logoImg.attr('src', logoDark);
}
if (revapi.find('li').eq(data.slideIndex - 1).attr('data-color') === 'light') {
$('body').removeClass('transparent-dark');
logoImg.attr('src', logoLight);
}
});
$('body').on('click', '[data-go-to-slide]', function () {
var goToSlide = $(this).data('go-to-slide');
revapi.revshowslide(goToSlide);
return false;
});
setTimeout(function () {
revapi.revredraw();
}, 400);
}
}
});
So how to properly reinitialise, reload, do something with this slideshow, so it will be re rendered when i visit page via .
If you need any additional informations please let me know and i will provide. Thank you!
i managed to solve it by calling Jquery function in mounted function
example:
export default {
name: 'SlideShow',
methods: {
},
mounted: function () {
// initial start of slide show
revSlider();
}
}
And this is example how my external sliders.js script looks like
// MAIN VARIABLES INITIALIZATION
var revapi;
$(window).resize(function () {
'use strict';
if ($('#rev_slider').data('slider-layout') == 'fullscreen' && $('body').hasClass('left-nav')) {
var windowHeight = $(window).height();
$('.rev_slider_wrapper, #rev_slider').height(windowHeight);
}
});
(function () {
'use strict';
setTimeout(function () {
revSlider();
}, 1000);
}());
stopAtSlide:1
// REVOLUTION SLIDER
function revSlider() {
if ($.fn.revolution && $('#rev_slider').length) {
var revSliderLayout = $('#rev_slider').data('slider-layout') ? $('#rev_slider').data('slider-layout') : 'auto';
......