Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
大大大太阳yt
driver.js
提交
1923a660
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,发现更多精彩内容 >>
提交
1923a660
编写于
3月 11, 2018
作者:
K
Kamran Ahmed
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Demo page UI and basic example
上级
f0acb91e
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
120 addition
and
49 deletion
+120
-49
demo/base.scss
demo/base.scss
+21
-4
demo/demo.js
demo/demo.js
+0
-16
demo/demo.scss
demo/demo.scss
+36
-13
demo/emoji.js
demo/emoji.js
+28
-0
index.html
index.html
+28
-14
src/sholo.scss
src/sholo.scss
+6
-2
webpack.config.dev.js
webpack.config.dev.js
+1
-0
未找到文件。
demo/base.scss
浏览文件 @
1923a660
...
...
@@ -13,7 +13,9 @@ $heading-font-weight: 700;
*
{
-webkit-font-smoothing
:
antialiased
;
-moz-osx-font-smoothing
:
grayscale
-moz-osx-font-smoothing
:
grayscale
;
margin
:
0
;
padding
:
0
;
}
*,
*
:before
,
*
:after
{
...
...
@@ -32,8 +34,8 @@ body {
font-family
:
-
apple-system
,
BlinkMacSystemFont
,
"Segoe UI"
,
Roboto
,
Helvetica
,
Arial
,
sans-serif
,
"Apple Color Emoji"
,
"Segoe UI Emoji"
,
"Segoe UI Symbol"
;
font-size
:
16px
;
line-height
:
1
.4
;
color
:
#000000
;
background-color
:
#
FFFFFF
;
color
:
white
;
background-color
:
#
2E2E30
;
overflow-x
:
hidden
;
}
...
...
@@ -47,6 +49,7 @@ label {
p
{
margin-top
:
0
;
margin-bottom
:
20px
;
}
hr
{
...
...
@@ -54,7 +57,9 @@ hr {
margin
:
$global-guttering
*
1
.25
0
;
border
:
0
;
border-bottom
:
1px
solid
#eaeaea
;
height
:
1px
;
background
:
url(https://i.imgur.com/MoU1Mn4.png)
repeat-y
;
height
:
5px
;
background-size
:
cover
;
}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
...
...
@@ -107,6 +112,18 @@ h6, .h6 {
font-size
:
$global-font-size-h6
;
}
ul
li
,
ol
li
{
list-style-type
:
none
;
line-height
:
1
.5
;
}
blockquote
{
background
:
#f5f3f1
;
padding
:
10px
;
margin-bottom
:
35px
;
border-radius
:
10px
;
}
.container
{
display
:
block
;
margin
:
auto
;
...
...
demo/demo.js
浏览文件 @
1923a660
...
...
@@ -14,22 +14,6 @@ sholo.defineSteps([
position
:
'
bottom
'
,
},
},
{
element
:
'
.btn__example
'
,
popover
:
{
title
:
'
Adding Introductions
'
,
description
:
'
You can use it to add popovers on top of the website
'
,
position
:
'
left
'
,
},
},
{
element
:
'
.btn__light
'
,
popover
:
{
title
:
'
Adding Introductions
'
,
description
:
'
You can use it to add popovers on top of the website
'
,
position
:
'
rig
'
,
},
},
{
element
:
'
.section__how
'
,
popover
:
{
...
...
demo/demo.scss
浏览文件 @
1923a660
...
...
@@ -9,10 +9,20 @@ $dark-button-text: #ffffff !default;
$light-button-bg
:
#f5f5f5
!
default
;
$light-button-text
:
#2d2d2d
!
default
;
img
.emoji
{
height
:
1em
;
width
:
1em
;
margin
:
0
.05em
0
.1em
;
vertical-align
:
-0
.1em
;
}
.page-wrap
{
padding-top
:
1px
;
width
:
$container-width
;
margin
:
auto
;
width
:
500px
;
margin
:
50px
auto
;
background
:
white
;
padding
:
10px
30px
;
border-radius
:
5px
;
color
:
#333333
;
}
.btn
{
...
...
@@ -21,27 +31,40 @@ $light-button-text: #2d2d2d !default;
border-radius
:
3px
;
&
.btn__dark
{
background
:
$dark-button-bg
;
color
:
$dark-button-text
;
}
&
.btn__light
{
background
:
$light-button-bg
;
color
:
$light-button-text
;
color
:
#FFFFFF
;
background-color
:
#F44336
;
padding
:
0
18px
;
height
:
40px
;
line-height
:
40px
;
border-radius
:
20px
;
cursor
:
pointer
;
transition
:
background-color
0
.2s
,
color
0
.2s
;
font-weight
:
500
;
width
:
240px
;
font-size
:
17px
;
margin
:
auto
;
display
:
block
;
}
}
section
{
margin-bottom
:
35px
;
margin-bottom
:
$global-guttering
*
1
.25
;
}
.section__header
{
margin
:
80px
0
5
0px
;
margin
:
10px
0
3
0px
;
text-align
:
center
;
display
:
block
;
padding
:
10px
10px
20px
;
padding
:
10px
;
h1
{
font-size
:
$logo-font-size
;
.emoji
{
font-size
:
45px
;
top
:
-4px
;
margin-right
:
3px
;
position
:
relative
;
}
}
}
\ No newline at end of file
demo/emoji.js
0 → 100644
浏览文件 @
1923a660
// Just for the sake of styling page
/* eslint-disable */
/**
* Determine if this browser supports emoji.
*
* Modified from https://gist.github.com/mwunsch/4710561
* and probobly originally github's javascript source
*/
function
doesSupportEmoji
()
{
let
context
;
if
(
!
document
.
createElement
(
'
canvas
'
).
getContext
)
return
;
context
=
document
.
createElement
(
'
canvas
'
).
getContext
(
'
2d
'
);
if
((
typeof
context
.
fillText
)
!==
'
function
'
)
{
return
;
}
let
smile
=
String
.
fromCharCode
(
55357
)
+
String
.
fromCharCode
(
56835
);
context
.
textBaseline
=
"
top
"
;
context
.
font
=
"
32px Arial
"
;
context
.
fillText
(
smile
,
0
,
0
);
return
context
.
getImageData
(
16
,
16
,
1
,
1
).
data
[
0
]
!==
0
;
}
if
(
!
doesSupportEmoji
())
{
twemoji
.
parse
(
document
.
body
);
}
index.html
浏览文件 @
1923a660
...
...
@@ -11,21 +11,32 @@
<body>
<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=
"javascript:void(0)"
class=
"btn btn__example btn__dark"
>
Show an Example
</a>
<a
href=
"javascript:void(0)"
class=
"btn btn__light"
>
Learn More
</a>
<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>
</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>
</blockquote>
<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>
<h3>
Features
</h3>
<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>
</ul>
</section>
<hr>
<section
class=
"section__how"
>
<h
1>
How does it do that?
</h1
>
<h
3>
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
...
...
@@ -33,21 +44,21 @@
reprehenderit tempora!
</p>
</section>
<section
class=
"section__examples"
>
<h
1>
Can you show some Examples?
</h1
>
<h
3>
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"
>
<h
1>
I want to learn more
</h1
>
<h
3>
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"
>
<h
1>
Contributing
</h1
>
<h
3>
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
...
...
@@ -55,7 +66,10 @@
</section>
</div>
<script
src=
"//twemoji.maxcdn.com/2/twemoji.min.js?2.5"
></script>
<script
src=
"./dist/sholo.js"
></script>
<script
src=
"./dist/demo.js"
></script>
<script
src=
"./dist/emoji.js"
></script>
</body>
</html>
\ No newline at end of file
src/sholo.scss
浏览文件 @
1923a660
...
...
@@ -2,6 +2,7 @@ div#sholo-popover-item {
display
:
none
;
position
:
absolute
;
background
:
white
;
color
:
#2d2d2d
;
margin
:
0
;
padding
:
15px
;
border-radius
:
5px
;
...
...
@@ -87,18 +88,21 @@ div#sholo-popover-item {
}
.sholo-popover-title
{
font
-size
:
19px
;
font
:
19px
/
normal
sans-serif
;
margin
:
0
0
5px
;
font-weight
:
bold
;
display
:
block
;
position
:
relative
;
line-height
:
1
.5
;
zoom
:
1
;
}
.sholo-popover-description
{
margin-bottom
:
0
;
font
-size
:
14px
;
font
:
14px
/
normal
sans-serif
;
line-height
:
1
.5
;
color
:
#2d2d2d
;
font-weight
:
normal
;
zoom
:
1
;
}
}
\ No newline at end of file
webpack.config.dev.js
浏览文件 @
1923a660
...
...
@@ -50,6 +50,7 @@ module.exports = {
}),
new
CopyWebpackPlugin
([
'
./demo/demo.js
'
,
'
./demo/emoji.js
'
,
]),
],
stats
:
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录