Hugging Face's logo

Spaces:
aletrn
/
driver.js
Running

App Files Community
kamrify commited on
Commit
ec45071
·
1 Parent(s): ede8cb9

Popover auto positioning

Browse files
Files changed (3) hide show
  1. assets/scripts/src/element.js +47 -3
  2. assets/styles/scss/demo.scss +0 -1
  3. index.html +3 -2
assets/scripts/src/element.js CHANGED
@@ -75,11 +75,30 @@ export default class Element {
75
  }
76
 
77
  showPopover() {
 
 
 
78
  const position = this.getCalculatedPosition();
79
 
80
- this.popover.style.left = `${position.left}px`;
81
- this.popover.style.top = `${position.bottom + 10}px`;
82
- this.popover.style.display = 'block';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
83
  }
84
 
85
  getPopover() {
@@ -93,4 +112,29 @@ export default class Element {
93
  hidePopover() {
94
  this.popover.style.display = 'none';
95
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
96
  }
 
75
  }
76
 
77
  showPopover() {
78
+ this.resetPopover();
79
+
80
+ // Position at which the element is
81
  const position = this.getCalculatedPosition();
82
 
83
+ const popoverTip = this.popover.querySelector('.sholo-popover-tip');
84
+
85
+ const documentHeight = this.getDocumentHeight();
86
+ const popoverHeight = this.getPopoverHeight();
87
+ const popoverMargin = this.options.padding + 10;
88
+
89
+ this.popover.style.left = `${position.left - this.options.padding}px`;
90
+
91
+ // Calculate different dimensions after attaching popover
92
+ const documentHeightAfterPopOver = position.bottom + popoverHeight + popoverMargin;
93
+
94
+ // If adding popover would go out of the window height, then show it to the top
95
+ if (documentHeightAfterPopOver >= documentHeight) {
96
+ this.popover.style.top = `${position.top - popoverHeight - popoverMargin}px`;
97
+ popoverTip.classList.add('bottom');
98
+ } else {
99
+ this.popover.style.top = `${position.bottom + popoverMargin}px`;
100
+ popoverTip.classList.add('top');
101
+ }
102
  }
103
 
104
  getPopover() {
 
112
  hidePopover() {
113
  this.popover.style.display = 'none';
114
  }
115
+
116
+ getDocumentHeight() {
117
+ // eslint-disable-next-line prefer-destructuring
118
+ const body = this.document.body;
119
+ const html = this.document.documentElement;
120
+
121
+ return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
122
+ }
123
+
124
+ getPopoverHeight() {
125
+ return Math.max(this.popover.scrollHeight, this.popover.offsetHeight);
126
+ }
127
+
128
+ resetPopover() {
129
+ this.popover.style.display = 'block';
130
+ this.popover.style.left = '';
131
+ this.popover.style.top = '';
132
+ this.popover.style.bottom = '';
133
+ this.popover.style.right = '';
134
+
135
+ // Remove the positional classes from tip
136
+ this.popover
137
+ .querySelector('.sholo-popover-tip')
138
+ .className = 'sholo-popover-tip';
139
+ }
140
  }
assets/styles/scss/demo.scss CHANGED
@@ -47,7 +47,6 @@ section {
47
 
48
  /////////////////////////////////////////
49
  div#sholo-popover-item {
50
-
51
  display: none;
52
  background: white;
53
  margin: 0;
 
47
 
48
  /////////////////////////////////////////
49
  div#sholo-popover-item {
 
50
  display: none;
51
  background: white;
52
  margin: 0;
index.html CHANGED
@@ -10,7 +10,7 @@
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>
@@ -65,9 +65,10 @@
65
  const sholo = new Sholo({
66
  animate: true,
67
  opacity: 0.8,
68
- padding: 0
69
  });
70
 
 
71
  document.querySelector('.btn__example')
72
  .addEventListener('click', function () {
73
  sholo.highlight('.section__header');
 
10
  </head>
11
  <body>
12
  <div id="sholo-popover-item">
13
+ <div class="sholo-popover-tip"></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>
 
65
  const sholo = new Sholo({
66
  animate: true,
67
  opacity: 0.8,
68
+ padding: 5
69
  });
70
 
71
+
72
  document.querySelector('.btn__example')
73
  .addEventListener('click', function () {
74
  sholo.highlight('.section__header');