Tags: cristiano-acosta/tour
Tags
New Rewrite Complete (tannerlinsley#16) * Add Parcel * Fix progress info The step/length info on the bottom of the tour box used to have those weird awkward giant circles around them... got rid of those to make it much clearer. Also added a "/" separating `step` from `length` making them more intuitive (ie 1/4 means step 1 out of 4) * Part 1 Most of the rewrite is done. Now it's just a matter of fixing the masks (make them work in position:absolute instead of fixed). I think in the end I'm gonna just go through all my changes that I made in the rewrite and merge them into the original code for my PR, that way I don't make to many changes to the repo (potentially breaking something) * Add lib build function We want people to actually be able to import built modules :) * Add Parcel as dev dependency Whoops this was an oversight (had it installed globally on my machine) * Document new build process * Part 2 Fixed masks to work with new absolute positioning (really only required changing the bottom one) * Change example dark mode back to normal Changed it during UI testing and forgot to change it back * Create 'build' While I'm waiting for the PR to get merged I'm just gonna consume this git fork in my projects directly (not publishing my own package on npm) * Complete rewrite * Add most major features Now everything actually works * Fix gitignore * Add autoscrolling and progress * Add ability to specify custom templates * Minor style fixes * Cleanup * Remove custom config example * Fix bug where where tour.currentStep would get incremented past bounds * Change tour.js to index.js * Fix edge case where initial bodyRect.y !== 0 I naively assumed that all pages body's start at position 0. Some pages add a margin-top to body which throws everything off. The mask still doesn't work properly in this case (you see a giant empty space), but at least the hole lines up with the element. In the future figure out how to mask stuff outside the bodyRect bounds. * Add support for fixed positioned elements Elements that are fixed position wouldn't work properly. Added fix for position:fix. Note: This doesn't fix other cases where the same issue of moving elements might appear, such as position:sticky and elements with animations / transitions. Consider always repositioning the tourbox and mask on each frame regardless to avoid issues. * Fix pointer events * Cleanup example * Fix buggy clientRect math Had tons of issues with clientRect calculations, finally added a more robust implementation and consolidated logic into a single util function (Note: the bug fix doesn't account for the case where the target is within a div that is scrolled internally etc, but this would be very costly to implement perf wise - would require traversing all parents to check for scroll on each render) * New renderer * Separated rendering logic into a "Renderer" class that handles rendering all the components * Separated the DOM diffing logic from the render into it's own DOMRectChangeWatcher class to simplify Renderer logic * Refactored files into /renderer and /components (probably should of made each of those separate commits, whoops) * Fix Example HMR Makes debugging faster... not super important * Change example to use local version of CSS file * Create tourBoxTemplate alias for lit-html `html` template literal tag Instead of putting the burden to install and import lit-html and to know the lib/lit-extended, just alias wrap it up in our own tagged template literal. This also has the implicit benefit that it "abstracts away" the fact that it's lit html (doesn't scare the users into thinking they have to learn some new view framework, it's just javascript) * Cleanup Optimized imports (removed unused and ran IDE's organize import feature), removed `console.log`s