Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
大大大太阳yt
driver.js
提交
25ec032b
D
driver.js
项目概览
大大大太阳yt
/
driver.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
D
driver.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
25ec032b
编写于
3月 11, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Add examples and UI for the demo page
上级
00da064b
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
238 addition
and
87 deletion
+238
-87
demo/images/separator.png
demo/images/separator.png
+0
-0
demo/scripts/demo.js
demo/scripts/demo.js
+106
-0
demo/scripts/emoji.js
demo/scripts/emoji.js
+0
-0
demo/styles/base.scss
demo/styles/base.scss
+13
-39
demo/styles/demo.scss
demo/styles/demo.scss
+36
-8
index.html
index.html
+78
-36
webpack.config.dev.js
webpack.config.dev.js
+5
-4
未找到文件。
demo/images/separator.png
0 → 100644
浏览文件 @
25ec032b
6.7 KB
demo/demo.js
→
demo/
scripts/
demo.js
浏览文件 @
25ec032b
/* eslint-disable */
const
sholo
=
new
Sholo
({
const
tourSholo
=
new
Sholo
({
animate
:
true
,
opacity
:
0.8
,
padding
:
5
,
});
s
holo
.
defineSteps
([
tourS
holo
.
defineSteps
([
{
element
:
'
.section__header
'
,
popover
:
{
...
...
@@ -14,6 +15,20 @@ sholo.defineSteps([
position
:
'
bottom
'
,
},
},
{
element
:
'
.btn__dark
'
,
popover
:
{
title
:
'
This is Button
'
,
description
:
'
Yeah I know I dont need to tell that but anyways, we need a step in the listing so yeah!
'
}
},
{
element
:
'
#free-use
'
,
popover
:
{
title
:
'
Free to Use
'
,
description
:
'
Yes, you can use it in your personal or commercial products
'
}
},
{
element
:
'
.section__how
'
,
popover
:
{
...
...
@@ -43,5 +58,49 @@ sholo.defineSteps([
document
.
querySelector
(
'
.btn__example
'
)
.
addEventListener
(
'
click
'
,
()
=>
{
sholo
.
start
();
tourSholo
.
start
();
});
document
.
querySelectorAll
(
'
pre code
'
).
forEach
((
element
)
=>
{
hljs
.
highlightBlock
(
element
);
});
/////////////////////////////////////////////
// First example – highlighting without popover
/////////////////////////////////////////////
const
singleSholoNoPopover
=
new
Sholo
();
document
.
querySelector
(
'
#run-single-element-no-popover
'
)
.
addEventListener
(
'
click
'
,
(
e
)
=>
{
e
.
preventDefault
();
singleSholoNoPopover
.
highlight
(
'
#single-element-no-popover
'
);
});
/////////////////////////////////////////////
// Form focus examples
/////////////////////////////////////////////
const
focusSholo
=
new
Sholo
({
padding
:
0
});
const
inputIds
=
[
'
creation-input
'
,
'
creation-input-2
'
,
'
creation-input-3
'
,
'
creation-input-4
'
];
inputIds
.
forEach
(
inputId
=>
{
// Highlight the section on focus
document
.
getElementById
(
inputId
).
addEventListener
(
'
focus
'
,
()
=>
{
focusSholo
.
highlight
(
`#
${
inputId
}
`
);
});
});
/////////////////////////////////////////////
// Highlighting single element with popover
/////////////////////////////////////////////
const
singleSholoWithPopover
=
new
Sholo
();
document
.
querySelector
(
'
#run-single-element-with-popover
'
)
.
addEventListener
(
'
click
'
,
(
e
)
=>
{
e
.
preventDefault
();
singleSholoWithPopover
.
highlight
({
element
:
'
#single-element-with-popover
'
,
popover
:
{
title
:
'
Did you know?
'
,
description
:
'
You can add HTML in title or description also!
'
,
}
});
});
demo/emoji.js
→
demo/
scripts/
emoji.js
浏览文件 @
25ec032b
文件已移动
demo/base.scss
→
demo/
styles/
base.scss
浏览文件 @
25ec032b
...
...
@@ -50,16 +50,21 @@ label {
p
{
margin-top
:
0
;
margin-bottom
:
20px
;
line-height
:
1
.5
;
}
hr
{
hr
,
.hr
{
display
:
block
;
margin
:
$global-guttering
*
1
.25
0
;
border
:
0
;
border-bottom
:
1px
solid
#eaeaea
;
background
:
url(https://i.imgur.com/MoU1Mn4.png)
repeat-y
;
height
:
5px
;
background-size
:
cover
;
height
:
1px
;
&
.hr__fancy
{
background
:
url("./separator.png")
repeat-y
;
height
:
5px
;
background-size
:
cover
;
}
}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
...
...
@@ -85,6 +90,7 @@ a, a:visited, a:focus {
font-size
:
14px
;
-webkit-appearance
:
none
;
appearance
:
none
;
outline
:
none
;
margin-bottom
:
$global-guttering
;
}
...
...
@@ -115,6 +121,7 @@ h6, .h6 {
ul
li
,
ol
li
{
list-style-type
:
none
;
line-height
:
1
.5
;
margin-bottom
:
3px
;
}
blockquote
{
...
...
@@ -124,41 +131,8 @@ blockquote {
border-radius
:
10px
;
}
.container
{
display
:
block
;
margin
:
auto
;
max-width
:
40em
;
padding
:
$global-guttering
*
2
;
@media
(
max-width
:
620px
)
{
padding
:
0
;
}
}
.section
{
background-color
:
#FFFFFF
;
padding
:
$global-guttering
;
color
:
#333
;
a
,
a
:visited
,
a
:focus
{
color
:
#00bcd4
;
}
}
.logo
{
display
:
block
;
margin-bottom
:
$global-guttering
/
2
;
}
.logo__img
{
width
:
100%
;
height
:
auto
;
display
:
inline-block
;
max-width
:
100%
;
vertical-align
:
top
;
padding
:
$global-guttering
/
4
0
;
}
.visible-ie
{
display
:
none
;
.top-20
{
margin-top
:
20px
;
}
.zero-bottom
{
...
...
demo/demo.scss
→
demo/
styles/
demo.scss
浏览文件 @
25ec032b
@import
"base"
;
@import
"../src/sholo"
;
@import
"
./
base"
;
@import
"../
../
src/sholo"
;
$container-width
:
500px
!
default
;
$logo-font-size
:
55px
!
default
;
...
...
@@ -23,14 +23,12 @@ img.emoji {
padding
:
10px
30px
;
border-radius
:
5px
;
color
:
#333333
;
}
.btn
{
font-size
:
$button-font-size
;
padding
:
7px
10px
;
border-radius
:
3px
;
a
,
a
:visited
,
a
:focus
{
color
:
#333333
;
}
&
.btn__dark
{
a
.btn__dark
{
color
:
#FFFFFF
;
background-color
:
#F44336
;
padding
:
0
18px
;
...
...
@@ -45,6 +43,16 @@ img.emoji {
margin
:
auto
;
display
:
block
;
}
a
.btn__run-demo
{
background
:
#f54336
;
padding
:
5px
;
border-radius
:
20px
;
color
:
white
;
display
:
block
;
margin
:
15px
0
10px
;
text-align
:
center
;
}
}
section
{
...
...
@@ -67,4 +75,24 @@ section {
position
:
relative
;
}
}
}
.section__examples
{
.section__example
{
margin-bottom
:
20px
;
}
#creation-input
{
margin-top
:
20px
;
}
input
{
padding
:
10px
;
background-color
:
#fafbfc
;
border
:
3px
solid
#e1e4e8
;
border-radius
:
3px
;
box-shadow
:
inset
0
0
10px
rgba
(
27
,
31
,
35
,
0
.05
);
margin-bottom
:
0
;
margin-top
:
7px
;
}
}
\ No newline at end of file
index.html
浏览文件 @
25ec032b
...
...
@@ -7,66 +7,108 @@
<meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<title>
Sholo
</title>
<link
rel=
"stylesheet"
href=
"./dist/demo.css"
>
<link
rel=
"stylesheet"
href=
"//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai.min.css"
>
</head>
<body>
<div
class=
"page-wrap"
>
<section
class=
"section__header"
data-sholo=
"Hey welcome to presenter!"
>
<h1><span
class=
"emoji"
>
👨🔧️
</span>
Driver
</h1>
<p
class=
"text-muted"
>
A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the page
</p>
<a
href=
"javascript:void(0)"
class=
"btn btn__example btn__dark"
>
Quick Example
</a>
<p
class=
"text-muted"
>
A light-weight, no-dependency, vanilla JavaScript library to drive the user's focus across the
page
</p>
<a
href=
"javascript:void(0)"
class=
"btn btn__example btn__dark"
>
Quick Tour
</a>
</section>
<blockquote>
<p>
A lightweight (~4kb gzipped) yet powerful JavaScript engine that helps you drive the user's focus on page.
</p>
<p
class=
"zero-bottom"
>
Some sample use-cases can be creating powerful feature introductions, call-to-action components, focus shifters etc.
</p>
<p
class=
"zero-bottom"
>
Some sample use-cases can be creating powerful feature introductions, call-to-action
components, focus shifters etc.
</p>
</blockquote>
<section
class=
"section__purpose"
>
<h3>
Features
</h3>
<h3>
What are the features?
</h3>
<p>
Driver is compatible with all the major browsers and can be used for any of your overlay needs. Feature
introductions, focus shifters, call-to-action are just a few examples.
</p>
<ul>
<li>
Highlight any item on page
</li>
<li>
Block user interactions
</li>
<li>
Create feature introductions
</li>
<li>
User Friendly – Controllable by keys
</li>
<li>
Free for personal and commercial use
</li>
<li>
Lightweight – Only ~4kb when gzipped
</li>
<li>
Supports all major browsers
</li>
<li></li>
<li>
🔆
<strong>
Highlight
</strong>
any item on page
</li>
<li>
✋
<strong>
Block user interactions
</strong></li>
<li>
📣 Create
<strong>
feature introductions
</strong></li>
<li>
👓 Add
<strong>
focus shifters
</strong>
for users
</li>
<li>
🛠️ Highly customizable –
<strong>
Use it anywhere
</strong>
for overlay
</li>
<li>
⌨️ User Friendly –
<strong>
Controllable by keys
</strong></li>
<li
id=
"free-use"
>
🆓
<strong>
MIT Licensed
</strong>
– Free for personal and commercial use
</li>
<li>
🕊️ Lightweight – Only
<strong>
~4kb
</strong>
when gzipped
</li>
<li>
🌀
<strong>
Consistent behavior
</strong>
across all major browsers
</li>
</ul>
</section>
<hr>
<hr
class=
"hr__fancy"
>
<section
class=
"section__how"
>
<h3>
How does it do that?
</h3>
<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>
<p>
In it simplest, it puts the canvas on top of the whole page and then cuts the part that is over the element to be
highlighted and provides you several hooks when highlighting, highlighted or un-highlighting elements making it
highly customizable.
</p>
</section>
<hr
class=
"hr__fancy"
>
<section
class=
"section__examples"
>
<h3>
Can you show some Examples?
</h3>
<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"
>
<h3>
I want to learn more
</h3>
<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"
>
<h3>
Contributing
</h3>
<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>
<p>
Below you find some of the examples and sample use-cases on how you can use it. Run by clicking the
<code>
RUN
</code>
button.
</p>
<div
id=
"single-element-no-popover"
class=
"section__example"
>
<h4>
Highlighting a Single Element – Without Popover
</h4>
<p
class=
"zero-bottom"
>
If all you want is just highlight a single element, you can do that simply by passing the
selector
</p>
<a
href=
"#"
class=
"btn__run-demo"
id=
"run-single-element-no-popover"
>
Run it
</a>
<pre><code
class=
"javascript"
>
const driver = new Driver();
driver.highlight('#create-post');
</code></pre>
</div>
<hr
class=
"hr__fancy"
>
<div
class=
"section__example"
>
<p>
A
<strong>
real world use-case
</strong>
for this could be highlighting an element when user is interacting with
it
</p>
<pre><code
class=
"javascript"
>
const focusDriver = new Driver();
// Highlight the section on focus
document.getElementById('creation-input')
.addEventListener('focus', (e) => {
focusDriver.focus('#creation-input');
});
</code></pre>
<p
class=
"top-20"
>
Focus any of the inputs and see how it moves the highlight from one element to the other
</p>
<div
id=
"creation-forms"
>
<input
type=
"text"
id=
"creation-input"
class=
"form-control"
placeholder=
"Focus any of the inputs"
>
<input
type=
"text"
id=
"creation-input-2"
class=
"form-control"
placeholder=
"Focus any of the inputs"
>
<input
type=
"text"
id=
"creation-input-3"
class=
"form-control"
placeholder=
"Focus any of the inputs"
>
<input
type=
"text"
id=
"creation-input-4"
class=
"form-control"
placeholder=
"Focus any of the inputs"
>
</div>
</div>
<p>
You can also turn off the animation or set the padding around the corner. More on it later.
</p>
<hr
class=
"hr__fancy"
>
<div
id=
"single-element-with-popover"
class=
"section__example"
>
<h4>
Highlighting a Single Element – With Popover
</h4>
<p>
If you would like to show some details alongside the highlighted element, you can do that easily by specifying
title and description
</p>
<a
href=
"#"
class=
"btn__run-demo"
id=
"run-single-element-with-popover"
>
Run it
</a>
<pre><code
class=
"javascript"
>
const driver = new Driver();
driver.highlight({
element: '#some-element',
popover: {
title: 'Title for the Popover',
description: 'Description for it',
}
});
</code></pre>
</div>
</section>
</div>
<script
src=
"//twemoji.maxcdn.com/2/twemoji.min.js?2.5"
></script>
<script
src=
"//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"
></script>
<script
src=
"./dist/sholo.js"
></script>
<script
src=
"./dist/demo.js"
></script>
...
...
webpack.config.dev.js
浏览文件 @
25ec032b
...
...
@@ -6,7 +6,7 @@ module.exports = {
mode
:
'
development
'
,
entry
:
[
'
webpack-dev-server/client?http://localhost:3000
'
,
'
./demo/demo.scss
'
,
'
./demo/
styles/
demo.scss
'
,
'
./src/index.js
'
,
],
output
:
{
...
...
@@ -39,7 +39,7 @@ module.exports = {
},
{
test
:
/.scss$/
,
loader
:
ExtractTextPlugin
.
extract
([
'
css-loader
'
,
'
sass-loader
'
]),
loader
:
ExtractTextPlugin
.
extract
([
'
css-loader
?url=false
'
,
'
sass-loader
'
]),
},
],
},
...
...
@@ -49,8 +49,9 @@ module.exports = {
allChunks
:
true
,
}),
new
CopyWebpackPlugin
([
'
./demo/demo.js
'
,
'
./demo/emoji.js
'
,
'
./demo/scripts/emoji.js
'
,
'
./demo/scripts/demo.js
'
,
'
./demo/images/separator.png
'
,
]),
],
stats
:
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录