Improve the Python APIs for IntroJS website tours
This commit is contained in:
parent
a244324e73
commit
48c915e915
|
@ -507,6 +507,8 @@ self.create_hopscotch_tour(name=None)
|
|||
|
||||
self.create_introjs_tour(name=None)
|
||||
|
||||
self.set_introjs_colors(theme_color=None, hover_color=None)
|
||||
|
||||
self.add_tour_step(message, selector=None, name=None,
|
||||
title=None, theme=None, alignment=None)
|
||||
|
||||
|
|
|
@ -117,6 +117,9 @@ dt_backdrop_style = """
|
|||
#driver-popover-item, .popover-class {
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
button.driver-prev-btn.driver-disabled {
|
||||
visibility: hidden;
|
||||
}
|
||||
"""
|
||||
|
||||
messenger_style = """
|
||||
|
@ -146,6 +149,35 @@ hops_backdrop_style = """
|
|||
}
|
||||
"""
|
||||
|
||||
# IntroJS Style
|
||||
introjs_style = """
|
||||
.introjs-button.introjs-nextbutton,
|
||||
.introjs-button.introjs-donebutton {
|
||||
color: #fff !important;
|
||||
background-color: %s !important;
|
||||
border: 1px solid %s !important;
|
||||
text-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.introjs-button.introjs-nextbutton:hover,
|
||||
.introjs-button.introjs-donebutton:hover {
|
||||
color: #fff !important;
|
||||
background-color: %s !important;
|
||||
border: 1px solid %s !important;
|
||||
}
|
||||
.introjs-button {
|
||||
box-sizing: content-box;
|
||||
text-decoration: none;
|
||||
}
|
||||
.introjs-button.introjs-skipbutton {
|
||||
color: %s;
|
||||
}
|
||||
.introjs-tooltip, .introjs-floating {
|
||||
box-sizing: content-box;
|
||||
position: absolute;
|
||||
}
|
||||
"""
|
||||
|
||||
# Shepherd Backdrop Style
|
||||
sh_backdrop_style = """
|
||||
body.shepherd-active .shepherd-target.shepherd-enabled {
|
||||
|
|
|
@ -6,6 +6,7 @@ import os
|
|||
import re
|
||||
import time
|
||||
from selenium.webdriver.common.by import By
|
||||
from seleniumbase import config as sb_config
|
||||
from seleniumbase.config import settings
|
||||
from seleniumbase.core import style_sheet
|
||||
from seleniumbase.fixtures import constants
|
||||
|
@ -154,6 +155,16 @@ def activate_introjs(driver):
|
|||
intro_css = constants.IntroJS.MIN_CSS
|
||||
intro_js = constants.IntroJS.MIN_JS
|
||||
|
||||
theme_color = sb_config.introjs_theme_color
|
||||
hover_color = sb_config.introjs_hover_color
|
||||
backdrop_style = style_sheet.introjs_style % (
|
||||
theme_color,
|
||||
hover_color,
|
||||
hover_color,
|
||||
hover_color,
|
||||
theme_color,
|
||||
)
|
||||
|
||||
verify_script = """// Verify IntroJS activated
|
||||
var intro2 = introJs();
|
||||
"""
|
||||
|
@ -161,6 +172,7 @@ def activate_introjs(driver):
|
|||
activate_bootstrap(driver)
|
||||
js_utils.wait_for_ready_state_complete(driver)
|
||||
js_utils.wait_for_angularjs(driver)
|
||||
js_utils.add_css_style(driver, backdrop_style)
|
||||
for x in range(4):
|
||||
js_utils.activate_jquery(driver)
|
||||
js_utils.add_css_link(driver, intro_css)
|
||||
|
@ -727,7 +739,9 @@ def play_introjs_tour(
|
|||
intro.setOption("overlayOpacity", .29);
|
||||
intro.setOption("scrollToElement", true);
|
||||
intro.setOption("keyboardNavigation", true);
|
||||
intro.setOption("exitOnEsc", false);
|
||||
intro.setOption("exitOnEsc", true);
|
||||
intro.setOption("hidePrev", true);
|
||||
intro.setOption("nextToDone", true);
|
||||
intro.setOption("exitOnOverlayClick", false);
|
||||
intro.setOption("showStepNumbers", false);
|
||||
intro.setOption("showProgress", false);
|
||||
|
@ -946,7 +960,19 @@ def export_tour(tour_steps, name=None, filename="my_tour.js", url=None):
|
|||
elif tour_type == "introjs":
|
||||
intro_css = constants.IntroJS.MIN_CSS
|
||||
intro_js = constants.IntroJS.MIN_JS
|
||||
theme_color = sb_config.introjs_theme_color
|
||||
hover_color = sb_config.introjs_hover_color
|
||||
backdrop_style = style_sheet.introjs_style % (
|
||||
theme_color,
|
||||
hover_color,
|
||||
hover_color,
|
||||
hover_color,
|
||||
theme_color,
|
||||
)
|
||||
backdrop_style = backdrop_style.replace("\n", "")
|
||||
backdrop_style = js_utils.escape_quotes_if_needed(backdrop_style)
|
||||
instructions += 'injectCSS("%s");\n' % intro_css
|
||||
instructions += 'injectStyle("%s");\n' % backdrop_style
|
||||
instructions += 'injectJS("%s");' % intro_js
|
||||
|
||||
elif tour_type == "shepherd":
|
||||
|
@ -1028,7 +1054,9 @@ def export_tour(tour_steps, name=None, filename="my_tour.js", url=None):
|
|||
intro.setOption("overlayOpacity", .29);
|
||||
intro.setOption("scrollToElement", true);
|
||||
intro.setOption("keyboardNavigation", true);
|
||||
intro.setOption("exitOnEsc", false);
|
||||
intro.setOption("exitOnEsc", true);
|
||||
intro.setOption("hidePrev", true);
|
||||
intro.setOption("nextToDone", true);
|
||||
intro.setOption("exitOnOverlayClick", false);
|
||||
intro.setOption("showStepNumbers", false);
|
||||
intro.setOption("showProgress", false);
|
||||
|
|
|
@ -6228,6 +6228,10 @@ class BaseCase(unittest.TestCase):
|
|||
name - If creating multiple tours at the same time,
|
||||
use this to select the tour you wish to add steps to.
|
||||
"""
|
||||
if not hasattr(sb_config, "introjs_theme_color"):
|
||||
sb_config.introjs_theme_color = constants.TourColor.theme_color
|
||||
if not hasattr(sb_config, "introjs_hover_color"):
|
||||
sb_config.introjs_hover_color = constants.TourColor.hover_color
|
||||
if not name:
|
||||
name = "default"
|
||||
|
||||
|
@ -6242,6 +6246,36 @@ class BaseCase(unittest.TestCase):
|
|||
self._tour_steps[name] = []
|
||||
self._tour_steps[name].append(new_tour)
|
||||
|
||||
def set_introjs_colors(self, theme_color=None, hover_color=None):
|
||||
"""Use this method to set the theme colors for IntroJS tours.
|
||||
Args must be hex color values that start with a "#" sign.
|
||||
If a color isn't specified, the color will reset to the default.
|
||||
The border color of buttons is set to the hover color.
|
||||
@Params
|
||||
theme_color - The color of buttons.
|
||||
hover_color - The color of buttons after hovering over them.
|
||||
"""
|
||||
if not hasattr(sb_config, "introjs_theme_color"):
|
||||
sb_config.introjs_theme_color = constants.TourColor.theme_color
|
||||
if not hasattr(sb_config, "introjs_hover_color"):
|
||||
sb_config.introjs_hover_color = constants.TourColor.hover_color
|
||||
if theme_color:
|
||||
match = re.search(r'^#(?:[0-9a-fA-F]{3}){1,2}$', theme_color)
|
||||
if not match:
|
||||
raise Exception(
|
||||
'Expecting a hex value color that starts with "#"!')
|
||||
sb_config.introjs_theme_color = theme_color
|
||||
else:
|
||||
sb_config.introjs_theme_color = constants.TourColor.theme_color
|
||||
if hover_color:
|
||||
match = re.search(r'^#(?:[0-9a-fA-F]{3}){1,2}$', hover_color)
|
||||
if not match:
|
||||
raise Exception(
|
||||
'Expecting a hex value color that starts with "#"!')
|
||||
sb_config.introjs_hover_color = hover_color
|
||||
else:
|
||||
sb_config.introjs_hover_color = constants.TourColor.hover_color
|
||||
|
||||
def add_tour_step(
|
||||
self,
|
||||
message,
|
||||
|
|
|
@ -232,6 +232,13 @@ class HighCharts:
|
|||
)
|
||||
|
||||
|
||||
class TourColor:
|
||||
# theme_color = "#f26721" # Orange
|
||||
# hover_color = "#db5409" # Darker Orange
|
||||
theme_color = "#2167e2" # Blue
|
||||
hover_color = "#0954cb" # Darker Blue
|
||||
|
||||
|
||||
class BootstrapTour:
|
||||
VER = "0.12.0"
|
||||
MIN_CSS = (
|
||||
|
@ -269,15 +276,9 @@ class Hopscotch:
|
|||
|
||||
|
||||
class IntroJS:
|
||||
VER = "2.9.3"
|
||||
MIN_CSS = (
|
||||
"https://cdnjs.cloudflare.com/ajax/libs/"
|
||||
"intro.js/%s/introjs.css" % VER
|
||||
)
|
||||
MIN_JS = (
|
||||
"https://cdnjs.cloudflare.com/ajax/libs/"
|
||||
"intro.js/%s/intro.min.js" % VER
|
||||
)
|
||||
VER = "4.2.2"
|
||||
MIN_CSS = "https://unpkg.com/intro.js@%s/minified/introjs.min.css" % VER
|
||||
MIN_JS = "https://unpkg.com/intro.js@%s/minified/intro.min.js" % VER
|
||||
|
||||
|
||||
class JqueryConfirm:
|
||||
|
|
Loading…
Reference in New Issue