Hugging Face's logo

Spaces:
aletrn
/
driver.js
Running

App Files Community
kamrify commited on
Commit
2b7567f
·
1 Parent(s): 22fca24

Add popover

Browse files
Files changed (3) hide show
  1. assets/scripts/src/sholo.js +3 -1
  2. assets/styles/scss/demo.scss +84 -1
  3. index.html +54 -36
assets/scripts/src/sholo.js CHANGED
@@ -44,12 +44,14 @@ export default class Sholo {
44
 
45
  onMouseUp(e) {
46
  const highlightedElement = this.overlay.getHighlightedElement();
 
 
47
  if (!highlightedElement || !highlightedElement.node) {
48
  return;
49
  }
50
 
51
  // Remove the overlay If clicked outside the highlighted element
52
- if (!highlightedElement.node.contains(e.target)) {
53
  this.overlay.clear();
54
  }
55
  }
 
44
 
45
  onMouseUp(e) {
46
  const highlightedElement = this.overlay.getHighlightedElement();
47
+ const popover = document.getElementById('sholo-popover-item');
48
+
49
  if (!highlightedElement || !highlightedElement.node) {
50
  return;
51
  }
52
 
53
  // Remove the overlay If clicked outside the highlighted element
54
+ if (!highlightedElement.node.contains(e.target) && (!popover || !popover.contains(e.target))) {
55
  this.overlay.clear();
56
  }
57
  }
assets/styles/scss/demo.scss CHANGED
@@ -1,6 +1,7 @@
1
  @import "base";
2
 
3
  $container-width: 500px !default;
 
4
  $button-font-size: 13px !default;
5
  $dark-button-bg: #2d2d2d !default;
6
  $dark-button-text: #ffffff !default;
@@ -34,6 +35,88 @@ section {
34
  }
35
 
36
  .section__header {
37
- margin: 80px 0 60px;
38
  text-align: center;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
39
  }
 
1
  @import "base";
2
 
3
  $container-width: 500px !default;
4
+ $logo-font-size: 55px !default;
5
  $button-font-size: 13px !default;
6
  $dark-button-bg: #2d2d2d !default;
7
  $dark-button-text: #ffffff !default;
 
35
  }
36
 
37
  .section__header {
38
+ margin: 80px 0 50px;
39
  text-align: center;
40
+ display: block;
41
+ padding: 10px 10px 20px;
42
+
43
+ h1 {
44
+ font-size: $logo-font-size;
45
+ }
46
+ }
47
+
48
+ /////////////////////////////////////////
49
+ div#sholo-popover-item {
50
+
51
+ //////// Temp style
52
+ position: absolute;
53
+ top: 285px;
54
+ left: 710px;
55
+ //////////////////
56
+
57
+ display: block;
58
+ background: white;
59
+ margin: 0;
60
+ padding: 15px;
61
+ border-radius: 5px;
62
+ min-width: 250px;
63
+ max-width: 300px;
64
+ box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
65
+ z-index: 1000000000;
66
+
67
+ .sholo-popover-tip {
68
+ border: 5px solid white;
69
+ content: '';
70
+ position: absolute;
71
+
72
+ &.bottom {
73
+ bottom: -10px;
74
+ border-top-color: white;
75
+ border-right-color: transparent;
76
+ border-bottom-color: transparent;
77
+ border-left-color: transparent;
78
+ }
79
+
80
+ &.left {
81
+ left: -10px;
82
+ top: 10px;
83
+ border-top-color: transparent;
84
+ border-right-color: white;
85
+ border-bottom-color: transparent;
86
+ border-left-color: transparent;
87
+ }
88
+
89
+ &.right {
90
+ right: -10px;
91
+ top: 10px;
92
+ border-top-color: transparent;
93
+ border-right-color: transparent;
94
+ border-bottom-color: transparent;
95
+ border-left-color: white;
96
+ }
97
+
98
+ &.top {
99
+ top: -10px;
100
+ border-top-color: transparent;
101
+ border-right-color: transparent;
102
+ border-bottom-color: white;
103
+ border-left-color: transparent;
104
+ }
105
+ }
106
+
107
+ .sholo-popover-title {
108
+ font-size: 19px;
109
+ margin: 0 0 5px;
110
+ font-weight: bold;
111
+ display: block;
112
+ position: relative;
113
+ }
114
+
115
+ .sholo-popover-description {
116
+ margin-bottom: 0;
117
+ font-size: 14px;
118
+ line-height: 1.5;
119
+ color: #2d2d2d;
120
+ font-weight: normal;
121
+ }
122
  }
index.html CHANGED
@@ -1,45 +1,63 @@
1
  <!doctype html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
7
- <title>Sholo</title>
8
- <link rel="stylesheet" href="./assets/styles/css/demo.css">
 
9
  </head>
10
  <body>
 
 
 
 
 
11
  <div class="page-wrap">
12
- <section class="section__header" data-sholo="Hey welcome to presenter!">
13
- <h1>Sholo</h1>
14
- <p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in spotlight</p>
15
- <a href="#" class="btn btn__dark">Show an Example</a>
16
- <a href="#" class="btn btn__light">Learn More</a>
17
- </section>
18
- <section class="section__purpose">
19
- <h1>Whats does it do?</h1>
20
- <p>Let's you bring any component on the page into the spotlight.</p>
21
- <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>
22
- </section>
23
- <section class="section__how">
24
- <h1>How does it do that?</h1>
25
- <p>Ever heard of magic? ...it is not that, it just uses some canvas manipulation to put the focus on some element</p>
26
- <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>
27
- </section>
28
- <section class="section__examples">
29
- <h1>Can you show some Examples?</h1>
30
- <p>Here are some of the examples</p>
31
- <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>
32
- </section>
33
- <section class="section__learn">
34
- <h1>I want to learn more</h1>
35
- <p>Here are some of the examples</p>
36
- <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>
37
- </section>
38
- <section class="section__contributing">
39
- <h1>Contributing</h1>
40
- <p>Here are some of the examples</p>
41
- <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>
42
- </section>
 
 
 
 
 
 
 
 
 
 
 
 
43
  </div>
44
 
45
  <script src="./assets/scripts/dist/sholo.js"></script>
 
1
  <!doctype html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport"
6
+ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
8
+ <title>Sholo</title>
9
+ <link rel="stylesheet" href="./assets/styles/css/demo.css">
10
  </head>
11
  <body>
12
+ <div id="sholo-popover-item">
13
+ <div class="sholo-popover-tip top"></div>
14
+ <div class="sholo-popover-title">Did you know?</div>
15
+ <div class="sholo-popover-description">You can make step by step introductions with sholo!</div>
16
+ </div>
17
  <div class="page-wrap">
18
+ <section class="section__header" data-sholo="Hey welcome to presenter!">
19
+ <h1>Sholo</h1>
20
+ <p class="text-muted">A light-weight, no-dependency, vanilla JavaScript library to bring certain parts of page in
21
+ spotlight</p>
22
+ <a href="#" class="btn btn__dark">Show an Example</a>
23
+ <a href="#" class="btn btn__light">Learn More</a>
24
+ </section>
25
+ <section class="section__purpose">
26
+ <h1>Whats does it do?</h1>
27
+ <p>Let's you bring any component on the page into the spotlight.</p>
28
+ <p>It lets you focus any element of the page while putting an overlay on top of the other elements in page. You can
29
+ use it to make powerful introduction for different features of your application or for example if you want to
30
+ highlight some component that needs user attention.</p>
31
+ </section>
32
+ <section class="section__how">
33
+ <h1>How does it do that?</h1>
34
+ <p>Ever heard of magic? ...it is not that, it just uses some canvas manipulation to put the focus on some
35
+ element</p>
36
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore
37
+ ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus
38
+ reprehenderit tempora!</p>
39
+ </section>
40
+ <section class="section__examples">
41
+ <h1>Can you show some Examples?</h1>
42
+ <p>Here are some of the examples</p>
43
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore
44
+ ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus
45
+ reprehenderit tempora!</p>
46
+ </section>
47
+ <section class="section__learn">
48
+ <h1>I want to learn more</h1>
49
+ <p>Here are some of the examples</p>
50
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore
51
+ ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus
52
+ reprehenderit tempora!</p>
53
+ </section>
54
+ <section class="section__contributing">
55
+ <h1>Contributing</h1>
56
+ <p>Here are some of the examples</p>
57
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda, at consectetur cupiditate inventore
58
+ ipsa molestias, natus nulla odit optio pariatur perspiciatis, quae quam quasi quibusdam recusandae repellendus
59
+ reprehenderit tempora!</p>
60
+ </section>
61
  </div>
62
 
63
  <script src="./assets/scripts/dist/sholo.js"></script>