Skip to content

Commit 20c2606

Browse files
wuda-iowuda-io
committed
refactor: removed jquery taptarget and scrollspy
1 parent abfd3cb commit 20c2606

File tree

9 files changed

+282
-484
lines changed

9 files changed

+282
-484
lines changed

‎docs/js/init.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,9 @@ document.addEventListener("DOMContentLoaded", function() {
218218

219219
M.Sidenav.init(document.querySelectorAll('.sidenav'), {});
220220

221-
M.TapTarget.init(document.querySelectorAll('.tap-target'), {});
221+
const tts = M.TapTarget.init(document.querySelectorAll('.tap-target'), {});
222+
document.querySelector('#open-taptarget')?.addEventListener('click', e => tts[0].open());
223+
document.querySelector('#close-taptarget')?.addEventListener('click', e => tts[0].close());
222224

223225
M.FormSelect.init(document.querySelectorAll('select:not(.disabled)'), {});
224226

‎docs/js/materialize.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎pug/page-contents/featureDiscovery_content.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
<p class="caption">Feature discovery prompts have more impact when they are presented to the right users at contextually relevant moments.
1010
When presented to the wrong user at the wrong time, they can be intrusive and annoying.</p>
1111

12-
<a class="waves-effect waves-light btn" onclick="$('.tap-target').tapTarget('open')">Open tap target</a>&nbsp;&nbsp;&nbsp;&nbsp;
13-
<a class='waves-effect waves-light btn' onclick="$('.tap-target').tapTarget('close')">Close tap target</a>
12+
<a class="waves-effect waves-light btn" id="open-taptarget">Open tap target</a>&nbsp;&nbsp;&nbsp;&nbsp;
13+
<a class='waves-effect waves-light btn' id="close-taptarget">Close tap target</a>
1414
<br>
1515
<br>
1616

‎src/range.ts

+42-44
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import { Component } from "./component";
2-
import $, { Selector } from "cash-dom";
32
import anim from "animejs";
43

5-
let _defaults = {};
4+
const _defaults = {};
5+
6+
// TODO: !!!!!
67

78
export class Range extends Component {
9+
el: HTMLInputElement;
810
private _mousedown: boolean;
911
private _handleRangeChangeBound: any;
1012
private _handleRangeMousedownTouchstartBound: any;
1113
private _handleRangeInputMousemoveTouchmoveBound: any;
1214
private _handleRangeMouseupTouchendBound: any;
1315
private _handleRangeBlurMouseoutTouchleaveBound: any;
14-
value: Selector;
15-
thumb: Selector;
16+
value: HTMLElement;
17+
thumb: HTMLElement;
1618

1719
constructor(el, options) {
1820
super(Range, el, options);
@@ -32,7 +34,7 @@ import anim from "animejs";
3234
}
3335

3436
static getInstance(el) {
35-
let domElem = !!el.jquery ? el[0] : el;
37+
const domElem = !!el.jquery ? el[0] : el;
3638
return domElem.M_Range;
3739
}
3840

@@ -76,55 +78,55 @@ import anim from "animejs";
7678
}
7779

7880
_handleRangeChange() {
79-
$(this.value).html(this.$el.val());
80-
if (!$(this.thumb).hasClass('active')) {
81+
//$(this.value).html(this.$el.val());
82+
this.value.innerHTML = this.el.value;
83+
if (!this.thumb.classList.contains('active')) {
8184
this._showRangeBubble();
8285
}
83-
let offsetLeft = this._calcRangeOffset();
84-
$(this.thumb)
85-
.addClass('active')
86-
.css('left', offsetLeft + 'px');
86+
const offsetLeft = this._calcRangeOffset();
87+
this.thumb.classList.add('active');
88+
this.thumb.style.left = offsetLeft+'px';
8789
}
8890

8991
_handleRangeMousedownTouchstart(e) {
9092
// Set indicator value
91-
$(this.value).html(this.$el.val());
93+
//$(this.value).html(this.$el.val());
94+
this.value.innerHTML = this.el.value;
9295
this._mousedown = true;
93-
this.$el.addClass('active');
94-
if (!$(this.thumb).hasClass('active')) {
96+
this.el.classList.add('active');
97+
if (!this.thumb.classList.contains('active')) {
9598
this._showRangeBubble();
9699
}
97100
if (e.type !== 'input') {
98-
let offsetLeft = this._calcRangeOffset();
99-
$(this.thumb)
100-
.addClass('active')
101-
.css('left', offsetLeft + 'px');
101+
const offsetLeft = this._calcRangeOffset();
102+
this.thumb.classList.add('active');
103+
this.thumb.style.left = offsetLeft+'px';
102104
}
103105
}
104106

105107
_handleRangeInputMousemoveTouchmove() {
106108
if (this._mousedown) {
107-
if (!$(this.thumb).hasClass('active')) {
109+
if (!this.thumb.classList.contains('active')) {
108110
this._showRangeBubble();
109111
}
110-
let offsetLeft = this._calcRangeOffset();
111-
$(this.thumb)
112-
.addClass('active')
113-
.css('left', offsetLeft + 'px');
114-
$(this.value).html(this.$el.val());
112+
const offsetLeft = this._calcRangeOffset();
113+
this.thumb.classList.add('active');
114+
this.thumb.style.left = offsetLeft+'px';
115+
//$(this.value).html(this.$el.val());
116+
this.value.innerHTML = this.el.value;
115117
}
116118
}
117119

118120
_handleRangeMouseupTouchend() {
119121
this._mousedown = false;
120-
this.$el.removeClass('active');
122+
this.el.classList.remove('active');
121123
}
122124

123125
_handleRangeBlurMouseoutTouchleave() {
124126
if (!this._mousedown) {
125-
let paddingLeft = parseInt(this.$el.css('padding-left'));
126-
let marginLeft = 7 + paddingLeft + 'px';
127-
if ($(this.thumb).hasClass('active')) {
127+
const paddingLeft = parseInt(this.$el.css('padding-left'));
128+
const marginLeft = 7 + paddingLeft + 'px';
129+
if (this.thumb.classList.contains('active')) {
128130
anim.remove(this.thumb);
129131
anim({
130132
targets: this.thumb,
@@ -136,30 +138,26 @@ import anim from "animejs";
136138
duration: 100
137139
});
138140
}
139-
$(this.thumb).removeClass('active');
141+
this.thumb.classList.remove('active');
140142
}
141143
}
142144

143145
_setupThumb() {
144146
this.thumb = document.createElement('span');
145147
this.value = document.createElement('span');
146-
$(this.thumb).addClass('thumb');
147-
$(this.value).addClass('value');
148-
$(this.thumb).append(this.value);
149-
this.$el.after(this.thumb);
148+
this.thumb.classList.add('thumb');
149+
this.value.classList.add('value');
150+
this.thumb.append(this.value);
151+
this.el.after(this.thumb);
150152
}
151153

152154
_removeThumb() {
153-
$(this.thumb).remove();
155+
this.thumb.remove();
154156
}
155157

156158
_showRangeBubble() {
157-
let paddingLeft = parseInt(
158-
$(this.thumb)
159-
.parent()
160-
.css('padding-left')
161-
);
162-
let marginLeft = -7 + paddingLeft + 'px'; // TODO: fix magic number?
159+
const paddingLeft = parseInt(getComputedStyle(this.thumb.parentElement).paddingLeft);
160+
const marginLeft = -7 + paddingLeft + 'px'; // TODO: fix magic number?
163161
anim.remove(this.thumb);
164162
anim({
165163
targets: this.thumb,
@@ -173,10 +171,10 @@ import anim from "animejs";
173171
}
174172

175173
_calcRangeOffset(): number {
176-
let width = this.$el.width() - 15;
177-
let max = parseFloat(this.$el.attr('max')) || 100; // Range default max
178-
let min = parseFloat(this.$el.attr('min')) || 0; // Range default min
179-
let percent = (parseFloat(this.$el.val()) - min) / (max - min);
174+
const width = this.el.getBoundingClientRect().width - 15;
175+
const max = parseFloat(this.el.getAttribute('max')) || 100; // Range default max
176+
const min = parseFloat(this.el.getAttribute('min')) || 0; // Range default min
177+
const percent = (parseFloat(this.el.getAttribute('value')) - min) / (max - min);
180178
return percent * width;
181179
}
182180
}

0 commit comments

Comments
 (0)