valnub/framework7-plugin-welcomescreen

A plugin for Framework7 that displays a swipeable welcome screen to guide the user through a tutorial

framework7-plugin-welcomescreen's Issues

How to show welcome screen only one time after the app is installed.

Hello Welcome screen team, Greetings. Is there any way to show welcome screen only the first time after the app is installed. when the user opens the second time, i dont wanna show welcome screen.

Dot navigation / # of slides

Hi,
Is it possible to shows dots to show number of slides that fill in (active index) when you slide across and can navigate by?

Thanks

[Feature] gracefully exit or adopt slide transition from framework7

is there any possibility of adding a slide transition on exit so it goes with the rest of the app?

white Screen on Tablette

i send the app to my friend that have a TAB E. he told me that he get a white screen howver it works on other devices . this is the aPK
besthost.tn/doc/android.apk

welcomescreen.js: Line 185 : Uncaught TypeError: swiper.destroy is not a function

Hi
I am using the welcome Screen F7 plugin to display a user guide but I get this error.
My F7 Version is 1.4 (Very old)
I am using cordova/Android
Can Any one helps with that? Thanks.

09-29 08:10:02.734 19244-19244/com.idriss.karatou D/SystemWebChromeClient: file:///android_asset/www/js/welcomescreen.js: Line 185 : Uncaught TypeError: swiper.destroy is not a function
09-29 08:10:02.734 19244-19244/com.idriss.karatou I/chromium: [INFO:CONSOLE(185)] "Uncaught TypeError: swiper.destroy is not a function", source: file:///android_asset/www/js/welcomescreen.js (185)

Uncaught TypeError: swiper.destroy is not a function (welcomescreen.js:165)

Hi, there

I'm using this plugin to show a small tutorial on app startup (I'm using Framework7 + PhoneGap/Cordova).
This works well untill I click/tap the "End Tutorial" or "Skip" button.

I got this error:
Uncaught TypeError: swiper.destroy is not a function (welcomescreen.js:165)

This is a piece of my code (scripts.js):

document.addEventListener('deviceready', onDeviceReady, false);

function onDeviceReady() {
  // some code ...
  InitApp();
  // some code ...
}

function InitApp() {
  // some code ...
  LaunchTutorial();
}

function LaunchTutorial() {
  var welcomescreen_slides = [
    {
      id: 'slide0',
      picture: '<div class="tutorialicon">♥</div>',
      text: 'Welcome to this tutorial. In the next steps we will guide you through a manual that will teach you how to use this app.'
    },
    {
      id: 'slide1',
      picture: '<div class="tutorialicon">✲</div>',
      text: 'This is slide 2'
    },
    {
      id: 'slide2',
      picture: '<div class="tutorialicon">♫</div>',
      text: 'This is slide 3'
    },
    {
      id: 'slide3',
      picture: '<div class="tutorialicon">☆</div>',
      text: 'Thanks for reading! Enjoy this app.<br><br><a id="tutorial-close-btn" href="#" class="link color-white">End Tutorial</a>'
    }
  ];

  var options = {
    'bgcolor': '#f44336',
    'fontcolor': 'rgba(255, 255, 255, 0.75)'
  }
  var welcomescreen = myApp.welcomescreen(welcomescreen_slides, options);
}

In index.html:

<link rel="stylesheet" href="css/welcomescreen.css">    
<!-- A lot of HTML code ....  -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/framework7.min.js"></script> 
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript" src="js/toast.js"></script>    
<script type="text/javascript" src="js/welcomescreen.js"></script>
<script type="text/javascript" src="js/fw7.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/localization/messages_it.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

Solutions?

The swiper.destroy(true) doesn't work

Hi,

With the latest version of Framework7 1.2.0, your nice plugin doesn't work, because if fails in the function that states:

self.close = function () {
if (swiper) { swiper.destroy(true); }
if (container) { container.remove(); }
container = swiperContainer = swiper = undefined;
if (typeof options.onClosed === 'function') { options.onClosed(); }
};

it says:

TypeError: swiper.destroy is not a function. (In 'swiper.destroy(true)', 'swiper.destroy' is undefined)

in line 166 of welcomescreen.js.

Do you guys think there is a solution for this?! I would like to use the plugin in my app.

Regards,

Jose.

Does not work or load at all

I downloaded it and extracted f7.welcomescreen.js and f7.welcomescreen.css
I followed each step in the tutorial, but instead of using node js to package npm, I downloaded the latest release github repo as zip to use it local since it has zero dependency. But it didn’t work.
I import f7.welcomescreen.js and f7.welcomescreen.css like this in my index.html

<script type=“text/javascript” src=“lib/f7.welcomescreen.js”></script> Even though this was not instructed in the tutorial. In my main js file I tried all these

import welcomescreen from ‘lib/f7-welcomescreen.js’;

import welcomescreen from ‘lib/f7-welcomescreen’;

and similar typing but at the end it was no avail and didn’t work.
And of course, I have imported framework7.min.js and framework7.min.js initially.
I am stuck.

The weird thing is, if I import the bundle.js in my index.html it works, bundle.js is used in the demo example, but I believe it is an old version as indicated in the comments.

I want to use this library in my phonegap project but I move forward because of this problem.

'open':'false' block the use of welcome screen

Hi,
When we use the 'open':'false' option (to block the automatic beginning of the welcome screen), we can't start the slider with a simple <a href="#" class="tutorial-open-btn button">Open Welcome Screen</a>.

Is there any solution to be able to launch the welcome screen only on demand and not after every refresh ?

Thanks. Br,

Where to place code

In the setup on part 2 and 3 it just says to define it, it doesnt say to put it in the index page or anything so where does it go?

Not workin on Framework7 V6 Vue

Hi, how to initialize this plugin on Framework7 V6 Vue

I've tried

// app.js
import welcomescreen from 'f7-welcomescreen';
Framework7.use(welcomescreen);

Here's the error

app.js:2539 Uncaught TypeError: Cannot read property 'compile' of undefined
    at compileTemplate (f7.welcomescreen.js:139)
    at eval (f7.welcomescreen.js:212)
    at new Welcomescreen (f7.welcomescreen.js:220)
    at Framework7.init (f7.welcomescreen.js:264)
    at eval (events-class.js:106)
    at Array.forEach (<anonymous>)
    at eval (events-class.js:105)
    at Array.forEach (<anonymous>)
    at Framework7.emit (events-class.js:99)
    at init (app-class.js_+_1_modules:451)

Can't get the plugin to work

Hi!

I've been trying to add this plugin to my project for days now without success.

Im using framework7 and i have followed the instructions. Still it wont show any slides. I have no idea what i am doing wrong.

myApp.onPageInit('index', function (page) {

test = myApp.swiper($$('.swiper-container'), {pagination: '.swiper-pagination', spaceBetween: 100});


var options = {
      'bgcolor': '#0da6ec',
      'fontcolor': '#fff', 
      // parallax: true|false, 
      // parallaxBackgroundImage: 'http://lorempixel.com/900/600/nightlife/2/', // parallax default background image
      // parallaxBackground: '-23%', // parallax default background effect
      /* parallaxSlideElements: {
            title: -100, 
            subtitle: -300, 
            text: -500
        }, */
      'onOpened': function () {
        console.log("welcome screen opened");
      },
      'onClosed': function () {
        console.log("welcome screen closed");
      }
    },
    welcomescreen_slides = [
      {
        id: 'slide0', 
        title: 'Slide 1', 
        picture: '<div class="tutorialicon">♥</div>',
        text: 'Welcome to this tutorial. In the <a class="tutorial-next-link" href="#">next steps</a> we will guide you through a manual that will teach you how to use this app.'
      },
      {
        id: 'slide1',
        title: 'Slide 2', 
        picture: '<div class="tutorialicon">✲</div>',
        text: 'This is slide 2'
      },
      {
        id: 'slide2',
        title: 'Slide 3', 
        picture: '<div class="tutorialicon">♫</div>',
        text: 'This is slide 3'
      },
      {
        id: 'slide3',
        // title: 'NO TITLE', 
        picture: '<div class="tutorialicon">☆</div>',
        text: 'Thanks for reading! Enjoy this app or go to <a class="tutorial-previous-slide" href="#">previous slide</a>.<br><br><a class="tutorial-close-btn" href="#">End Tutorial</a>'
      }
    ],
    welcomescreen = myApp.welcomescreen(welcomescreen_slides, options);
    
	welcomescreen.open();  

problem with the 1.6.4 version of framework7

i tested this plugin with new versions of framework7 and it has a problem with tree new versions. when i call open function get this error:

Uncaught TypeError: Cannot read property 'parallaxSlideElements' of undefined.

Remove skip button in specific page.

Hi,
I want to remove skip button in specific slide, can anyone help on this.

Uncaught TypeError: myApp.welcomescreen is not a function

Hi,

I'm a Intermediate level in using jQuery, I just installed phonegap and created one hello world application and trying to embed welcomescreen plugin. I followed the steps what you have mentioned in readme.

//index.html

//my-app.js

when i try to run through web browser it gives me an error like ::
//browser console

Could you please suggest me how to embed this to my app?

Thanks & Regards

Welcomescreen Not Close on Android

Hello,
I test the plugin in my PC and everything works fine,
but when I build the app and open it on android,
the app.welcomescreen.close(); not working.

The skip button is working but when I press app.welcomescreen.close(); to close the welcome screen nothing happens.

I use the latest Framework7.

Error when calling welcomescreen.open

When I call welcomescreen.open() I get the following stack trace.

Uncaught TypeError: Cannot read property 'nodeType' of null(…)
window.Swiper @ framework7.js:13418
(anonymous function) @ framework7.js:13516
each @ framework7.js:11723
window.Swiper @ framework7.js:13515
initSwiper @ welcomescreen.js:60
Welcomescreen.self.open @   welcomescreen.js:133

any ideas?

not setting f7params.welcomescreen shows an empty screen

I save to localStorage if the welcome screen has been shown before. If shown before, I do not set f7params.welcomescreen or to f7params.welcomescreen = undefined.

Both, as well as setting it to an empty object or object with empty slides, causes the welcomescreen to show a white sheet instead of not loading at all.

current workaround: option to add an additional class to hide the element (but it still sits in memory). Will try the onOpened to remove the dom node.

what I expect: not having it loaded.

myApp.welcomescreen is not a function

Hello Welcomescreen team,

I referenced:

<link rel="stylesheet" href="welcomescreen.css">
<script src="welcomescreen.js"></script>

Added below code to my-app.js but get this message: myApp.welcomescreen is not a function
Please advise.

var myApp = new Framework7({
    animateNavBackIcon:true,
    //panelsCloseByOutside: false,
    precompileTemplates: true
    //uniqueHistory: true
});

var options = {
  'bgcolor': '#0da6ec',
  'fontcolor': '#fff'
}
var welcomescreen_slides = [
{
  id: 'slide0',
  picture: '<div class="tutorialicon">☆</div>',
  text: 'Thanks for reading! Enjoy this app.<br><br><a class="tutorial-close-btn" href="#">End Tutorial</a>'
}
];
var welcomescreen = myApp.welcomescreen(welcomescreen_slides, options);

Kind regards,
Mario

Not Working on Framework7 V6 Vue

Hello, how to initialize this plugin on Framework7 V6 vue?

I tried

// app.js
import welcomescreen from 'f7-welcomescreen';
Framework7.use(welcomescreen);

But it's not working

navigation arrows

Is it possible to have clickable navigation arrows with custom css

Using iOS fullscreen, leaves a gap

using the header <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> leaves a gap above the slides. (Careful when fixing: Even filling the gap, the top right link must stay at the same pos!)

It does not compensate for iOS fullscreen.

Not firing on Android

Im having some issues getting the "welcomeescreen" to fire on Android. Both Emulators and device, HTC one. Works without any issues sofar on iPhone and iPad. Do you have any issues with this on Android as well? Seems very "flaky" to me, fires sometimes yes and sometimes not.

Not working with [email protected] & VueJS & SCSS

Hi this plugin is not working with F7 v6.3.5 and VueJS, it shows only blank white screen with "skip" link top right screen, I did all the instructions in the doc include the css import

Cheers

Hi,Timo.Can u help me with some problems?

I cant realize your welcomescreen plugin?are u have full step-to-step tutorial?really,bro.Thats harder than i think :)

Different Background Color for each slide

Is it possible to have different color on each slide display?

side panels issue

after installing the plugin , only the left side panel is oppened. even the right button is opening the left side panel

Use in Framework7 v2

How to use this plugin for Framework7 v2?

And is it possible to automatically hide after 2/3 seconds?

Regards

pagination not work in new version

in new version, after add title property for slide, pagination not work. please check example in your files.

F7/Phonegap/Vue: "Dom7 is undefined"

Hi folks,
is this plugin suitable to be used in a F7/Phonegap/Vue template?
I used the Split View / Panel PhoneGap template from Framework7's templates download page and followed the instructions in the plugin's Readme.md, but as soon as I define
Framework7.use(welcomescreen);
I get "Dom7 is undefined" in the browsers error console.

Steps to reproduce:
-Create project based on this template
https://github.com/phonegap/phonegap-template-vue-f7-split-panel
-NPM install the welcomescreen plugin, installed it as stated in the readme file

Am I missing something? Any hints appreciated!

This plugin is not working with latest version of framework7. Neither in core nor in react.

Framwork7-React ERROR:-
f7-welcomescreen.js?v=b7f18c1f:60 Uncaught TypeError: Cannot read property 'compile' of undefined
at compileTemplate (f7-welcomescreen.js?v=b7f18c1f:60)
at f7-welcomescreen.js?v=b7f18c1f:105
at new Welcomescreen (f7-welcomescreen.js?v=b7f18c1f:110)
at Framework72.init (f7-welcomescreen.js?v=b7f18c1f:145)
at chunk-537ABVLD.js?v=b7f18c1f:99
at Array.forEach ()
at chunk-537ABVLD.js?v=b7f18c1f:98
at Array.forEach ()
at Framework72.emit (chunk-537ABVLD.js?v=b7f18c1f:92)
at init14 (chunk-O632XZYK.js?v=b7f18c1f:1066)

Using framework7 components in the slides

I need to put framework7 components in the slides, how?
Like license agreement, where the user have two options, two checkbox, if "not agree" the app shutdowns, and the user can never proceed to the next slide unless he chooses the "I agree" checkbox.

Or another important thing, choosing the language.
A slide has "smart select" component (from framework7 library) which gives user to choose his language, like English or Arabic.

So how we can do these?

Release to HTML5

Hey,
Amazing plugin. But I cant wait to see this being available for any html site.
Sorry for opening as an issue, this is actually a feature request.

[v3.0] close event / swiper.destroy is not a function

Hi! I'm using this plugin with new f7 v3.
With the event:
app.welcomescreen.close();
is throwing:

Uncaught TypeError: swiper.destroy is not a function
at Welcomescreen.self.close (f7.welcomescreen.js:168)

on this line

self.close = function () {
      if (swiper) { **swiper.destroy(true);** }
      if (container) { container.remove(); }
      container = swiperContainer = swiper = undefined;
      if (typeof options.onClosed === 'function') { options.onClosed(); }
    };
    

It opens with himself

Hello, I did every thing & every thing is ok, but
when i refresh the page it opens with himself
i want to disable that, could you tell me how?

thx

graceful exit *feature request*

would love the ability for the welcome screen to exit gracefully
also would love to be able to use css animations for each slide and use images for each slide: https://giphy.com/explore/onboarding

template for welcomescreen

please add template property in options to change template of welcomescreen with template7.

Error in V3 for Vue

Hello,

When trying to import the plugin it throws me an error of Dom7 is undefined

Doesn't work with Framework7 v4.3.0

Presents error app.js:125 Uncaught TypeError: Cannot read property 'create' of undefined
while doing

    function initSwiper() {
        swiper = window.swiper.create('.welcomescreen-swiper', {  <<<=====
            direction: 'horizontal',

closing animation - how can this be achieved?

How can a closing animation be added by using the close button?

onClose is not available ..

UglifyJS has trouble

Might be of interest. I tried building the app for production and this showed up:

ERROR in app.js from UglifyJs
Unexpected token: punc «(» [./node_modules/f7-welcomescreen/src/f7.welcomescreen.js:233,0][app.js:33458,8]

appened welcomescreen container to page element

I think it is better that welcomescreen container appened to page element (class="page").

Pagination: Bullets colour - unable to change

Hi, Hope someone can help me with this. I have changed the container background colour to white and fonts colour to black but I am unable to change pagination bullets colour to some thing darker. Can you please help me with some css code for bullets.

Also any support for using dynamic bullets?

Pagination problem

The pagination is not working and disappeared.

Hide view before welcome screen

Hello Welcomescreem team,

Just before getting the welcome screen I see the framework view shortly. Is there a way to hide this?

Please advise.

Kind regards,
Mario