search

EragonJ / Trip.js

🚀 Trip.js is a plugin that can help you customize a tutorial trip easily with more flexibilities.
https://eragonj.github.io/Trip.js/
MIT License
793 stars 111 forks source link

unique id for each trip #131

Closed tobias-wedel closed 8 years ago

tobias-wedel commented 8 years ago

Is it possible to set an unique id for a trip to get more control from the "outside"?

EragonJ commented 8 years ago

hi @webnut-de , can you talk more about your idea ? Can you show us some use case about which part needs the unique id and how it would be useful to gain more control from outside ?

More information would be better, thanks !

tobias-wedel commented 8 years ago

Here is what i want to do:

I have a few trips on one page. Some of them should be hide on mobile devices. I use media queries for that. Now, i need a unique id oder class for the trip-block to hide it. Otherwise i just can hide/show all trips.

I hope you understand my idea. Maybe you have a better idea to hide this plugin on small devices.

EragonJ commented 8 years ago

@webnut-de I was wondering if we don't share trip-block with different instances, does this fit your use case ? For me, each trip instance should have its own scope and should not mess up with the other instances, so if we can get an unique trip-block when doing var trip = new Trip(), this problem should be solved.

I forgot why I share these DOM elements together when I wrote the first line of Trip.js, but I did remember it's not a good design.

Any idea ?

tobias-wedel commented 8 years ago

I dont know if i understand you right, but i think about something like that:

var trip1 = new Trip([ { sel : $(".demo-basic-1.step1"), class : "hide-on-mobile", id : "trip-width-id" } ]

EragonJ commented 8 years ago

@webnut-de you may misread my words, let me show some examples here :

var trip1 = new Trip(); var trip2 = new Trip();

will create

<div class="trip-block black s animated tada trip-091235823" style="left: 199.594px; top: 702px; display: inline-block; z-index: 100000;">
   <a href="#" class="trip-close" style="display: none;">×</a>
   <div class="trip-header" style="display: none;">Step 1</div>
   <div class="trip-content">For Trip 1</div>
   <div class="trip-progress-wrapper">
      <div class="trip-progress-bar" style="width: 41.75%;"></div>
      <a href="#" class="trip-prev" style="display: none;">Back</a><a href="#" class="trip-next" style="display: none;">Next</a>
   </div>
</div>
<div class="trip-block black s animated tada trip-101235831" style="left: 199.594px; top: 702px; display: inline-block; z-index: 100000;">
   <a href="#" class="trip-close" style="display: none;">×</a>
   <div class="trip-header" style="display: none;">Step 1</div>
   <div class="trip-content">For Trip 2</div>
   <div class="trip-progress-wrapper">
      <div class="trip-progress-bar" style="width: 41.75%;"></div>
      <a href="#" class="trip-prev" style="display: none;">Back</a><a href="#" class="trip-next" style="display: none;">Next</a>
   </div>
</div>

Based on the html above, we'll create a brand-new DOM elements when you are initializing a new Trip object and we will give a unique id for each one.

And for each trip instance, you can easily get generated id like 101235831 (from the code above) by accessing trip.id or a method. Not sure whether this fits your use case for multiple trips on same page ?

tobias-wedel commented 8 years ago

I realise that with changing the tripBlockHTML.