diff --git a/.travis.yml b/.travis.yml index 6979eb4..d81cb56 100644 --- a/.travis.yml +++ b/.travis.yml @@ -4,6 +4,7 @@ env: - 'RAILS_VERSION=5.1' - 'RAILS_VERSION=5.2' - 'RAILS_VERSION=6.0' + - 'RAILS_VERSION=6.1' before_script: - 'yarn' diff --git a/README.md b/README.md index 020a273..20b7ab5 100644 --- a/README.md +++ b/README.md @@ -95,7 +95,7 @@ NB: You must specify a locale in the filename, even if you're only supporting on ### Tour content -A tour is composed of a series of steps. A step may have a title and must have a description. You may attach a step to a particular element on the page, and place the callout to the left, right, top, or bottom. +A tour is composed of a series of steps. A step may have a title and must have a description. You may attach a step to a particular element on the page, and place the callout in a particular position (see below). ```yaml intro: @@ -122,6 +122,18 @@ Abraham takes care of which buttons should appear with each step: * "Exit" and "Next" buttons on intermediate steps * "Done" button on the last step +When you specify an `attachTo` element, use the `placement` option to choose where the callout should appear relative to that element: + +* `bottom` / `bottom center` +* `bottom left` +* `bottom right` +* `center` / `middle` / `middle center` +* `left` / `middle left' +* `right` / `middle right` +* `top` / `top center` +* `top left` +* `top right` + Abraham tries to be helpful when your tour steps attach to page elements that are missing: * If your first step is attached to a particular element, and that element is not present on the page, the tour won't start. ([#28](https://github.com/actmd/abraham/issues/28)) @@ -161,7 +173,7 @@ If you have any trouble at all, please [submit an issue](https://github.com/actm Contributions are welcome! -Create a feature branch (using git-flow) and submit as a pull request. +Create a feature branch (using git-flow) and submit as a pull request (with a base branch of `develop`). Everyone interacting in Abraham's codebase, issue tracker, etc. is expected to follow the [Contributor Covenent Code of Conduct](https://www.contributor-covenant.org/version/1/4/code-of-conduct). @@ -176,6 +188,8 @@ Cloning into 'abraham'... ruby-2.5.3 - #gemset created /Users/jon/.rvm/gems/ruby-2.5.3@abraham ruby-2.5.3 - #generating abraham wrappers - please wait ~ bundle install +Bundle complete! 13 Gemfile dependencies, 73 gems now installed. +Use `bundle info [gemname]` to see where a bundled gem is installed. ~ yarn install ``` diff --git a/test/dummy/app/controllers/dashboard_controller.rb b/test/dummy/app/controllers/dashboard_controller.rb index 1452282..3a71e42 100644 --- a/test/dummy/app/controllers/dashboard_controller.rb +++ b/test/dummy/app/controllers/dashboard_controller.rb @@ -3,5 +3,6 @@ class DashboardController < ApplicationController def home; end def other; end + def placement; end def missing; end end diff --git a/test/dummy/app/views/dashboard/placement.html.erb b/test/dummy/app/views/dashboard/placement.html.erb new file mode 100644 index 0000000..0870f30 --- /dev/null +++ b/test/dummy/app/views/dashboard/placement.html.erb @@ -0,0 +1,22 @@ +
Find me in app/views/dashboard/placement.html.erb
+ +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae leo sagittis, sodales ante tincidunt, tincidunt tellus. Integer rutrum id quam maximus pellentesque. Morbi non justo ac dui mollis commodo nec sit amet neque. Sed et nunc quis nibh sagittis facilisis. Vivamus pharetra mauris in leo pulvinar, hendrerit pharetra eros mattis. Praesent eleifend convallis purus in facilisis. Donec molestie turpis sed ligula hendrerit malesuada. Curabitur porttitor eros ex, mattis malesuada ligula ullamcorper a. Donec accumsan at turpis ac tristique. Fusce finibus metus at lacinia sollicitudin. In efficitur mauris ante, nec lacinia nunc fermentum sit amet.
+ +Cras a ullamcorper nisl, sed vulputate nisi. In hac habitasse platea dictumst. Sed pulvinar diam ultricies leo accumsan efficitur. Nullam pharetra velit risus, in vestibulum tortor finibus eget. Phasellus varius, ante sed maximus placerat, lectus nisl tempus ligula, sed tincidunt nulla odio ut augue. Phasellus dignissim, lacus non faucibus cursus, purus quam euismod mi, eu porta mi dui quis diam. Pellentesque in vulputate sem, a suscipit nunc. Etiam non elementum felis. Suspendisse rutrum, odio finibus rutrum ornare, orci quam consectetur massa, id bibendum lorem sem ut nulla. Nunc euismod varius ipsum quis commodo. Maecenas massa arcu, gravida a odio sed, tristique placerat nisl. In eget ligula tempor, iaculis felis at, ultricies augue. Praesent ac tellus sed risus dignissim ornare a at erat. Donec id finibus tortor, eget semper ante. Cras sed erat ultricies, pellentesque arcu vel, egestas ex.
+ +Proin viverra arcu ut purus maximus gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus leo sit amet lacus gravida, vitae viverra nunc aliquam. Suspendisse porttitor neque ac libero mollis, ac fermentum enim iaculis. Suspendisse malesuada, diam eget elementum maximus, ex dolor dapibus diam, sed scelerisque urna nisi luctus odio. Sed sed porttitor elit, et gravida sapien. Ut mattis vehicula iaculis. Sed pretium lorem id erat gravida dapibus. Etiam vitae faucibus arcu, ac fermentum lorem.
+ +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae leo sagittis, sodales ante tincidunt, tincidunt tellus. Integer rutrum id quam maximus pellentesque. Morbi non justo ac dui mollis commodo nec sit amet neque. Sed et nunc quis nibh sagittis facilisis. Vivamus pharetra mauris in leo pulvinar, hendrerit pharetra eros mattis. Praesent eleifend convallis purus in facilisis. Donec molestie turpis sed ligula hendrerit malesuada. Curabitur porttitor eros ex, mattis malesuada ligula ullamcorper a. Donec accumsan at turpis ac tristique. Fusce finibus metus at lacinia sollicitudin. In efficitur mauris ante, nec lacinia nunc fermentum sit amet.
+ +Cras a ullamcorper nisl, sed vulputate nisi. In hac habitasse platea dictumst. Sed pulvinar diam ultricies leo accumsan efficitur. Nullam pharetra velit risus, in vestibulum tortor finibus eget. Phasellus varius, ante sed maximus placerat, lectus nisl tempus ligula, sed tincidunt nulla odio ut augue. Phasellus dignissim, lacus non faucibus cursus, purus quam euismod mi, eu porta mi dui quis diam. Pellentesque in vulputate sem, a suscipit nunc. Etiam non elementum felis. Suspendisse rutrum, odio finibus rutrum ornare, orci quam consectetur massa, id bibendum lorem sem ut nulla. Nunc euismod varius ipsum quis commodo. Maecenas massa arcu, gravida a odio sed, tristique placerat nisl. In eget ligula tempor, iaculis felis at, ultricies augue. Praesent ac tellus sed risus dignissim ornare a at erat. Donec id finibus tortor, eget semper ante. Cras sed erat ultricies, pellentesque arcu vel, egestas ex.
+ +Proin viverra arcu ut purus maximus gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus leo sit amet lacus gravida, vitae viverra nunc aliquam. Suspendisse porttitor neque ac libero mollis, ac fermentum enim iaculis. Suspendisse malesuada, diam eget elementum maximus, ex dolor dapibus diam, sed scelerisque urna nisi luctus odio. Sed sed porttitor elit, et gravida sapien. Ut mattis vehicula iaculis. Sed pretium lorem id erat gravida dapibus. Etiam vitae faucibus arcu, ac fermentum lorem.
+ +Sed mollis lectus a tellus interdum efficitur. Maecenas et mauris neque. Aliquam erat volutpat. Cras vehicula mollis varius. Aenean quis pretium libero, sit amet sodales urna. Maecenas a elementum neque. Maecenas quis pharetra ex. Maecenas at lorem odio. Etiam malesuada non justo non porta. Donec massa lectus, suscipit non leo nec, vulputate tincidunt turpis. Integer ullamcorper, diam id pharetra tempor, erat arcu semper ex, eu rhoncus libero mauris sed ipsum. Duis bibendum dui ipsum, at fringilla sapien gravida eget. Nam finibus blandit dui.
+ +Integer accumsan enim eget leo placerat, at imperdiet libero porta. Nam in cursus sapien. Maecenas nunc enim, posuere a nulla bibendum, convallis aliquet odio. Curabitur a magna dolor. Vestibulum sed eros quis nisl aliquet condimentum. Phasellus ut odio a enim molestie gravida. Praesent sagittis mi sit amet lacus varius, vitae fermentum lorem iaculis. Ut fringilla turpis nec est fringilla finibus. Nullam accumsan tortor non massa tincidunt egestas. Nunc ac eros dignissim, mattis dui sed, mattis enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec purus dolor, consectetur in dui vitae, aliquet aliquam orci. Nulla iaculis lorem et sem gravida, in sollicitudin elit dictum. Vestibulum consectetur sapien sed vestibulum venenatis. Cras id libero vel risus ullamcorper cursus in sit amet erat.
\ No newline at end of file diff --git a/test/dummy/config/routes.rb b/test/dummy/config/routes.rb index fb1f82e..48cc29f 100644 --- a/test/dummy/config/routes.rb +++ b/test/dummy/config/routes.rb @@ -3,6 +3,7 @@ Rails.application.routes.draw do get "dashboard/home" get "dashboard/other" + get "dashboard/placement" get "dashboard/missing" # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html diff --git a/test/dummy/config/tours/dashboard/placement.en.yml b/test/dummy/config/tours/dashboard/placement.en.yml new file mode 100644 index 0000000..3564d04 --- /dev/null +++ b/test/dummy/config/tours/dashboard/placement.en.yml @@ -0,0 +1,77 @@ +intro: + steps: + 1: + text: "bottom" + attachTo: + element: ".notice-me" + placement: "bottom" + 2: + text: "bottom center" + attachTo: + element: ".notice-me" + placement: "bottom center" + 3: + text: "bottom left" + attachTo: + element: ".notice-me" + placement: "bottom left" + 4: + text: "bottom right" + attachTo: + element: ".notice-me" + placement: "bottom right" + 5: + text: "center" + attachTo: + element: ".notice-me" + placement: "center" + 6: + text: "left" + attachTo: + element: ".notice-me" + placement: "left" + 7: + text: "middle" + attachTo: + element: ".notice-me" + placement: "middle" + 8: + text: "middle center" + attachTo: + element: ".notice-me" + placement: "middle center" + 9: + text: "middle left" + attachTo: + element: ".notice-me" + placement: "middle left" + 10: + text: "middle right" + attachTo: + element: ".notice-me" + placement: "middle right" + 11: + text: "right" + attachTo: + element: ".notice-me" + placement: "right" + 12: + text: "top" + attachTo: + element: ".notice-me" + placement: "top" + 13: + text: "top center" + attachTo: + element: ".notice-me" + placement: "top center" + 14: + text: "top left" + attachTo: + element: ".notice-me" + placement: "top left" + 15: + text: "top right" + attachTo: + element: ".notice-me" + placement: "top right" diff --git a/test/dummy/db/schema.rb b/test/dummy/db/schema.rb index 2be2300..b3952e3 100644 --- a/test/dummy/db/schema.rb +++ b/test/dummy/db/schema.rb @@ -1,5 +1,3 @@ -# frozen_string_literal: true - # This file is auto-generated from the current state of the database. Instead # of editing this file, please use the migrations feature of Active Record to # incrementally modify your database, and then regenerate this schema definition.