Skip to content

D
driver.js

L-Y. / driver.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
D
driver.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 2b7567f6 编写于 作者: K Kamran Ahmed
浏览文件
操作

Add popover

上级 22fca24d
隐藏空白更改
内联 并排
Showing with 141 addition and 38 deletion
assets/scripts/src/sholo.js
浏览文件 @ 2b7567f6
......@@ -44,12 +44,14 @@ export default class Sholo {
onMouseUp(e) {
const highlightedElement = this.overlay.getHighlightedElement();
const popover = document.getElementById('sholo-popover-item');
if (!highlightedElement || !highlightedElement.node) {
return;
}
// Remove the overlay If clicked outside the highlighted element
if (!highlightedElement.node.contains(e.target)) {
if (!highlightedElement.node.contains(e.target) && (!popover || !popover.contains(e.target))) {
this.overlay.clear();
}
}
......
assets/styles/scss/demo.scss
浏览文件 @ 2b7567f6
@import "base";
$container-width: 500px !default;
$logo-font-size: 55px !default;
$button-font-size: 13px !default;
$dark-button-bg: #2d2d2d !default;
$dark-button-text: #ffffff !default;
......@@ -34,6 +35,88 @@ section {
}
.section__header {
margin: 80px 0 60px;
margin: 80px 0 50px;
text-align: center;
display: block;
padding: 10px 10px 20px;
h1 {
font-size: $logo-font-size;
}
}
/////////////////////////////////////////
div#sholo-popover-item {
//////// Temp style
position: absolute;
top: 285px;
left: 710px;
//////////////////
display: block;
background: white;
margin: 0;
padding: 15px;
border-radius: 5px;
min-width: 250px;
max-width: 300px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
z-index: 1000000000;
.sholo-popover-tip {
border: 5px solid white;
content: '';
position: absolute;
&.bottom {
bottom: -10px;
border-top-color: white;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
}
&.left {
left: -10px;
top: 10px;
border-top-color: transparent;
border-right-color: white;
border-bottom-color: transparent;
border-left-color: transparent;
}
&.right {
right: -10px;
top: 10px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: white;
}
&.top {
top: -10px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: white;
border-left-color: transparent;
}
}
.sholo-popover-title {
font-size: 19px;
margin: 0 0 5px;
font-weight: bold;
display: block;
position: relative;
}
.sholo-popover-description {
margin-bottom: 0;
font-size: 14px;
line-height: 1.5;
color: #2d2d2d;
font-weight: normal;
}
}
\ No newline at end of file
index.html
浏览文件 @ 2b7567f6
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sholo</title>
<link rel="stylesheet" href="./assets/styles/css/demo.css">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Sholo</title>
<link rel="stylesheet" href="./assets/styles/css/demo.css">
</head>
<body>
<div id="sholo-popover-item">
<div class="sholo-popover-tip top"></div>
<div class="sholo-popover-title">Did you know?</div>
<div class="sholo-popover-description">You can make step by step introductions with sholo!</div>
</div>
<div class="page-wrap">
<section class="section__header" data-sholo="Hey welcome to presenter!">
<h1>Sholo</h1>
<p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in spotlight</p>
<a href="#" class="btn btn__dark">Show an Example</a>
<a href="#" class="btn btn__light">Learn More</a>
</section>
<section class="section__purpose">
<h1>Whats does it do?</h1>
<p>Let's you bring any component on the page into the spotlight.</p>
<p>It lets you focus any element of the page while putting an overlay on top of the other elements in page. You can use it to make powerful introduction for different features of your application or for example if you want to highlight some component that needs user attention.</p>
</section>
<section class="section__how">
<h1>How does it do that?</h1>
<p>Ever heard of magic? ...it is not that, it just uses some canvas manipulation to put the focus on some element</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!</p>
</section>
<section class="section__examples">
<h1>Can you show some Examples?</h1>
<p>Here are some of the examples</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!</p>
</section>
<section class="section__learn">
<h1>I want to learn more</h1>
<p>Here are some of the examples</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!</p>
</section>
<section class="section__contributing">
<h1>Contributing</h1>
<p>Here are some of the examples</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus reprehenderit tempora!</p>
</section>
<section class="section__header" data-sholo="Hey welcome to presenter!">
<h1>Sholo</h1>
<p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in
spotlight</p>
<a href="#" class="btn btn__dark">Show an Example</a>
<a href="#" class="btn btn__light">Learn More</a>
</section>
<section class="section__purpose">
<h1>Whats does it do?</h1>
<p>Let's you bring any component on the page into the spotlight.</p>
<p>It lets you focus any element of the page while putting an overlay on top of the other elements in page. You can
use it to make powerful introduction for different features of your application or for example if you want to
highlight some component that needs user attention.</p>
</section>
<section class="section__how">
<h1>How does it do that?</h1>
<p>Ever heard of magic? ...it is not that, it just uses some canvas manipulation to put the focus on some
element</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore
ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus
reprehenderit tempora!</p>
</section>
<section class="section__examples">
<h1>Can you show some Examples?</h1>
<p>Here are some of the examples</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore
ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus
reprehenderit tempora!</p>
</section>
<section class="section__learn">
<h1>I want to learn more</h1>
<p>Here are some of the examples</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore
ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus
reprehenderit tempora!</p>
</section>
<section class="section__contributing">
<h1>Contributing</h1>
<p>Here are some of the examples</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore
ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus
reprehenderit tempora!</p>
</section>
</div>
<script src="./assets/scripts/dist/sholo.js"></script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或