fortesinformatica / Sideshow

Sideshow is a powerful javascript library which aims to reduce your user's learning curve by providing a way to create step-by-step interactive tours. Explain the features of your application, control your end-user's interaction with your UI, emphasize what you're explaining in each step by masking it. Just think! The sky is the limit!
http://fortesinformatica.github.io/Sideshow
Apache License 2.0
86 stars 31 forks source link

Allow providing of function for text #13

Open DanielApt opened 9 years ago

DanielApt commented 9 years ago

Some of the copy in steps needs to be dynamic.

As a simple example, I want the text to be:

“You have 6 alerts!”

Now 6 is a dynamic value.” I'm aware it can be a variable, but this only lends itself to very simple text, especially if the text is more dynamic a function lends itself better.

What I suggest is a that the step's property can be either a string or a function (which returns a string).

// a step
{
    title: 'Alerts',
    text: function () {
        return 'You have ' + alerts.length + ' alerts!';
    }
}

This technically can be expanded to other properties (e.g. title), but I can't image it would require that complexity just yet.

alcidesqueiroz commented 9 years ago

@DanielApt using functions for text property is already supported, but with a different goal. When a function is assigned to the text property of a step, Sideshow treats this function as a heredoc syntax. How Sideshow will decide if the given function must be called (your situation) or parsed as a heredoc function? I think a good option could be to adopt the function calling as the default behavior, and to expose the heredoc feature as an utility method available through the Sideshow global object (actually, it's already exposed through Sideshow.heredoc method). This way, to compose a step text using the heredoc syntax, we should do this way:

{
    title: "Example",
    text: Sideshow.heredoc(function(){/*
whatever...
Heredoc FTW!
    */},
    ...
}
ftsdev-nash-ic commented 9 years ago

I like this way :D

2015-04-02 0:08 GMT-03:00 Alcides Queiroz Aguiar notifications@github.com:

@DanielApt https://github.com/DanielApt using functions for text property is already supported, but with a different goal. When a function is assigned to the text property of a step, Sideshow treats this function as a heredoc syntax https://github.com/SideshowJS/Sideshow/blob/9f994e386e06cd4a7297d8630a6c7688fce66891/src/wizard/wizard.js#L213. How Sideshow will decide if the given function must be called (your situation) or parsed as a heredoc function? I think a good option could be to adopt the function calling as the default behavior, and to expose the heredoc feature as an utility method available through the Sideshow global object (actually, it's already exposed through Sideshow.heredoc method). This way, to compose a step text using the heredoc syntax, we should do this way:

{ title: "Example", text: Sideshow.heredoc(function(){/ whatever... Heredoc FTW! /}, ... }

— Reply to this email directly or view it on GitHub https://github.com/SideshowJS/Sideshow/issues/13#issuecomment-88711150.

Alberto Monteiro Desenvolvedor Fortes Informática

Fone: (85) 4005.1156 Cel: (85) 8623.4779

albertomonteiro@grupofortes.com.br www.fortesinformatica.com.br

http://www.grupofortes.com.br/

DanielApt commented 9 years ago

Which way @ftsdev-nash-ic ?

@alcidesqueiroz I understand that multi-line strings are annoying in JS, but I think the heredoc comment is not the solution.

I used it in the past, and many js minifiers / uglifiers will scrap the content away, which is far from ideal, as this leaves your step with no text.

AlbertoMonteiro commented 9 years ago

@DanielApt the way that @alcidesqueiroz proposed :laughing: Btw i am @ftsdev-nash-ic :yum: