New component: Shepherd.js - ProductTour

testing138 commented 4 years ago

Hi,

It would be very great, if you can add the following component into PFE:

Here is one example, I guess there are also other JS available. http://eragonj.github.io/Trip.js/

I would need this component to implement a Guide in my webpage, like you maybe know from intercom. Please see as reference this video: https://www.youtube.com/watch?v=TyWefNd1Tlc

For me it´s also important

Information can be coming also from database (so I can have a loop around that)
Content can be also in HTML:

Properties

modal
currentTab (integer)
titel (String), but you can also define it in
startOnPageLoad
DelayPageLoad
labelNext
labelPrevious
labelEnd Please see also: https://shepherdjs.dev/

Events:

Click next page
Start tour
Close tour
Stop

<p:repeat>
<pe:tourGuide>

     <f:facet name="header">
        List of Cars
    </f:facet>

     <h:outputText value="Text Text" />

    <f:facet name="footer">
        List of Cars
    </f:facet>
</pe:tourGuide>
</p:repeat>

Many thanks

tandraschko commented 4 years ago

don't get me wrong but you are longtime user and people really often invest time in the forum with you. Maybe a good point to give something back and create the compnent by yourself and provide it here opensource?

testing138 commented 4 years ago

agreed. if I would have the knowledge to create a component, I would do it. But I have no knowledge to do this.

tandraschko commented 4 years ago

thats a non-arg ;) We all started without knowledge. There enough sample components available here to dig in step by step

commander-hp commented 4 years ago

Oh yes! This component is awesome. Please integrate this in Primefaces.

rider87 commented 3 years ago

Agreed, whould be very great to have this component

melloware commented 3 years ago

One thing that concerns me it seems there is no active development and last commit was almost 2 years ago.

rider87 commented 3 years ago

Yes, maybe it make sense to include another JS library.

Trip.js is not the only JS library, please see here e.g.: https://ourcodeworld.com/articles/read/328/top-10-best-tour-website-guide-javascript-and-jquery-plugins

Great, as I can see, also other people would like to have this component.

jepsar commented 3 years ago

Rapster commented 3 years ago

A user mentionned https://shepherdjs.dev/ that I really like

jarciano commented 3 years ago

I also agree, the experience of using the application is much more professional.

rider87 commented 3 years ago

what do you mean exactly? which application?

jarciano commented 3 years ago

what do you mean exactly? which application?

Create a manual for the use of the new functions of the application, as this will prevent numerous user tickets on how to do so. In addition to speeding up feedback from users about features.

rider87 commented 3 years ago

Yes, that is exactly what is requested for this new component. Would be very great to have this component and get the information from the database.

jepsar commented 3 years ago

Why should this be a component? Can't this be done with vanilla JavaScript?

jarciano commented 3 years ago

Why should this be a component? Can't this be done with vanilla JavaScript?

JavaScript? Component is good because everything is interconnected with Primefaces, visuals and properties to save in the bank.

jepsar commented 3 years ago

@rider87 @jarciano Can you give a good example of how xhtml would look with a product tour included? And yes, I've seen the list of cars example above, which does not make sense to me.

jarciano commented 3 years ago

@jepsar Best example to show what would be perfect to have see on this site:

https://www.trychameleon.com/tours

jepsar commented 3 years ago

I was not talking about the result, but how to get there. How would your xhtml look? I guess you have an idea about that, as vanilla JavaScript won't work for you.

jarciano commented 3 years ago

I didn't actually get an analysis on Vanilla, do you have any examples with her in practice? Because if it looks cool like the examples presented it will already be a solution.

rider87 commented 3 years ago

Here just an example:

<pe:tourGuide model="modelFromDatabase" var="myVar">
        <pe:tourGuidePanel id="myId" for="myJsfId" closable="true|false" position="left| right| top| bottom" modal="true|false" >   

            <f:facet name="header">
                    My Header
            </f:facet>

            <h:outputText value="Text Text" />
            // Here different content can be visible, also like video, text

        <f:facet name="footer">
                <p:commandButton value="Previous"  />
                <p:commandButton value="Next"  />
                <p:commandButton value="Skip"  />
                <p:commandButton value="Close"  />
         </f:facet>
    </pe:tourGuidePanel>
</pe:tourGuide>

The main point would be the for (the Id for which it should be)

jepsar commented 3 years ago

I don't like pe:tourGuidePanel for="..." as the components in the tour might be all over the place (different includes or tags). I think I would prefer:

<p:commandButton value="New action">
  <pe:tourPanel ...>
    ...
  </pe:tourPanel>
</p:commandButton>

...

<pe:tour .../>

What do you have in mind for modelFromDatabase? I think I would prefer attributes for common settings and maybe an extender for the more uncommon stuff (whatever that may be).

melloware commented 3 years ago

Any database interaction should happen in your backing beans and the Product tour should be not be aware of it like all other JSF components. This component just feels more flexible as raw JS code.

rider87 commented 3 years ago

There is no interaction with the database, I need only the possibility to get the information from the database and not only "static" in the JSF page. I have in mind a "model", like you know from p:menu.... So all information are coming from the database, so it´s completelly dynamic. Maybe also a would fit in this case.

In the backend you will define a Entity, like: ProductTour

ID
Name

ProductTourPanel

ID
String headline;
String contentHtml;
String jsfId
String width;
String height;
int ordering;
ProduktTour_FK

Especially the "jsfId" is necessary. This is the ID, for which you have the "ProductTourPanel".

My scenario would be:

User will generate a "ProductTour".
A ProductTour can have 1....n ProductTourPanel
The user will create ProductTourPanel... The content can be HTML, which will be stored than in "String contentHtml".... User can add text and also pictures (base64...)
"ordering" is the sorting...

with you will have something like this:

<p:repeat value="#{myBean.list}" var="productTourObject">
    <pe:tourPanel forJsfId="#{productTourObject.jsfId}" height="#{productTourObject.height}" width="#{productTourObject.width}"/>

            <f:facet name="header">
                    <h:outputText value="#{productTourObject.headline}" />
            </f:facet>

            <h:outputText value="#{productTourObject.contentHtml}" />

            <f:facet name="footer">
                    <h:outputText value="bla bla bla" />
            </f:facet>

    </pe:tourPanel>

</p:repeat>

github-actions[bot] commented 1 year ago

This issue is marked as stale because there was no activity on it for the last 2 years. Remove stale label or comment or this will be closed in 30 days

melloware commented 2 months ago

There is also this one which is nice and Vanilla JS: https://driverjs.com/

primefaces-extensions / primefaces-extensions

New component: Shepherd.js - ProductTour #124