Skip to content

Commit 031e256

Browse files
yama-devyama-dev
committed
adjust property name
1 parent 8bc06ca commit 031e256

File tree

1 file changed

+59
-55
lines changed

1 file changed

+59
-55
lines changed

‎src/js-scroll-effect-module.js‎

Lines changed: 59 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default class SCROLL_EFFECT_MODULE {
99
this.Version = process.env.VERSION;
1010

1111
// Set State.
12-
this.State = {
12+
this.state = {
1313
NumScrolltopPre: window.pageYOffset,
1414
NumScrolltop : window.pageYOffset,
1515
NumAcceleration: 0,
@@ -45,9 +45,12 @@ export default class SCROLL_EFFECT_MODULE {
4545
}
4646
};
4747
// Merge Config Settings.
48-
this.Config = Object.assign(configDefault, options);
48+
this.config = {
49+
...configDefault,
50+
...options
51+
};
4952

50-
if(this.Config.autoStart) this.Init();
53+
if(this.config.autoStart) this.Init();
5154
}
5255

5356
Init(){
@@ -67,7 +70,7 @@ export default class SCROLL_EFFECT_MODULE {
6770
setTimeout(() => {
6871
this.Update();
6972
this.StoreElementStateAtPosList('load');
70-
}, this.Config.firstDelay);
73+
}, this.config.firstDelay);
7174

7275
// for Resize-Event
7376
window.addEventListener('resize', () => {
@@ -81,32 +84,32 @@ export default class SCROLL_EFFECT_MODULE {
8184
}
8285

8386
CacheDom(){
84-
this.$elemItem = DOM.selectDom(this.Config.elem);
85-
this.$elemItemFirst = DOM.selectDom(this.Config.firstElem);
87+
this.$elemItem = DOM.selectDom(this.config.elem);
88+
this.$elemItemFirst = DOM.selectDom(this.config.firstElem);
8689
}
8790

8891
CacheDomSize(){
8992
this.NumWindowHeight = window.innerHeight;
9093
}
9194

9295
SetDom(){
93-
this.State.PosList = [];
94-
this.State.NumScrolltop = window.pageYOffset;
96+
this.state.PosList = [];
97+
this.state.NumScrolltop = window.pageYOffset;
9598
let _elem = DOM.selectDom(this.$elemItem);
9699
if(_elem){
97100
_elem.map((el,i)=>{
98101
let obj = {
99102
index: i,
100-
pos: el.getBoundingClientRect().top + this.State.NumScrolltop,
103+
pos: el.getBoundingClientRect().top + this.state.NumScrolltop,
101104
count: 0
102105
};
103-
this.State.PosList.push( obj );
106+
this.state.PosList.push( obj );
104107
});
105108
}
106109
}
107110

108111
Start(){
109-
if(this.Config.autoStart) return false;
112+
if(this.config.autoStart) return false;
110113

111114
this.Init();
112115
}
@@ -124,85 +127,86 @@ export default class SCROLL_EFFECT_MODULE {
124127
}
125128

126129
Clear(){
127-
this.State.PosList.map((el, i)=>{
128-
DOM.removeClass(this.$elemItem[i], this.Config.addClassNameActive);
130+
this.state.PosList.map((el, i)=>{
131+
DOM.removeClass(this.$elemItem[i], this.config.addClassNameActive);
129132
});
130133
}
131134

132135
StoreElementStateAtPosList(method){
133136

134137
// Array initialization
135-
this.State.PosListFix = [];
136-
this.State.PosListNoneFix = [];
138+
this.state.PosListFix = [];
139+
this.state.PosListNoneFix = [];
137140

138141
// Scroll top cache
139-
this.State.NumScrolltop = window.pageYOffset;
142+
this.state.NumScrolltop = window.pageYOffset;
140143

141144
// Store element state at PosList.
142-
this.State.PosList.map((el, i)=>{
143-
if( this.State.NumScrolltop + ( this.NumWindowHeight * this.Config.displayRatio ) > el.pos ){
145+
this.state.PosList.map((el)=>{
146+
147+
if( this.state.NumScrolltop + ( this.NumWindowHeight * this.config.displayRatio ) > el.pos ){
144148

145149
// First count up.
146150
if(method === 'load'){
147151
el.count++;
148152
}
149153

150154
// 「active」Set of lists
151-
this.State.PosListFix.push(el);
155+
this.state.PosListFix.push(el);
152156
} else {
153157

154158
// 「none active」Set of lists
155-
this.State.PosListNoneFix.push(el);
159+
this.state.PosListNoneFix.push(el);
156160
}
157161
});
158162

159-
if(this.Config.acceleration){
160-
if(Math.abs(this.State.NumAcceleration) <= Math.abs(this.State.NumScrolltop - this.State.NumScrolltopPre)){
161-
this.State.NumAcceleration = this.State.NumScrolltop - this.State.NumScrolltopPre;
163+
if(this.config.acceleration){
164+
if(Math.abs(this.state.NumAcceleration) <= Math.abs(this.state.NumScrolltop - this.state.NumScrolltopPre)){
165+
this.state.NumAcceleration = this.state.NumScrolltop - this.state.NumScrolltopPre;
162166

163-
if(this.State.NumAcceleration >= 100) this.State.NumAcceleration = 100;
164-
if(this.State.NumAcceleration <= -100) this.State.NumAcceleration = -100;
167+
if(this.state.NumAcceleration >= 100) this.state.NumAcceleration = 100;
168+
if(this.state.NumAcceleration <= -100) this.state.NumAcceleration = -100;
165169

166170
clearInterval(this.Interval);
167171
this.CheckAcceleration();
168172
}
169173

170174
// Callback function.
171-
if(this.Config.on.Acceleration && typeof(this.Config.on.Acceleration) === 'function') this.Config.on.Acceleration(this.State.NumAcceleration);
175+
if(this.config.on.Acceleration && typeof(this.config.on.Acceleration) === 'function') this.config.on.Acceleration(this.state.NumAcceleration);
172176
}
173177

174178
if(method === 'load'){
175179
this.ActionChangeFirst();
176180
} else if(method === 'scroll'){
177-
if(this.State.PosListFixPre.length !== this.State.PosListFix.length) this.ActionChange();
181+
if(this.state.PosListFixPre.length !== this.state.PosListFix.length) this.ActionChange();
178182
}
179183

180184
// Callback function.
181-
if(this.Config.on.Scroll && typeof(this.Config.on.Scroll) === 'function') this.Config.on.Scroll(this.State.NumScrolltop);
185+
if(this.config.on.Scroll && typeof(this.config.on.Scroll) === 'function') this.config.on.Scroll(this.state.NumScrolltop);
182186

183-
this.State.NumScrolltopPre = this.State.NumScrolltop;
184-
this.State.PosListFixPre = this.State.PosListFix;
187+
this.state.NumScrolltopPre = this.state.NumScrolltop;
188+
this.state.PosListFixPre = this.state.PosListFix;
185189
}
186190

187191
// For Config.acceleration == true.
188192
CheckAcceleration(){
189193
this.Interval = setInterval(()=>{
190194

191-
let _racio = Math.pow(1.02, Math.abs(this.State.NumAcceleration)) - 0.6;
192-
if(this.State.NumAcceleration > 0){
193-
this.State.NumAcceleration = this.State.NumAcceleration - _racio;
194-
} else if(this.State.NumAcceleration < 0){
195-
this.State.NumAcceleration = this.State.NumAcceleration + _racio;
195+
let _racio = Math.pow(1.02, Math.abs(this.state.NumAcceleration)) - 0.6;
196+
if(this.state.NumAcceleration > 0){
197+
this.state.NumAcceleration = this.state.NumAcceleration - _racio;
198+
} else if(this.state.NumAcceleration < 0){
199+
this.state.NumAcceleration = this.state.NumAcceleration + _racio;
196200
}
197-
this.State.NumAcceleration = Math.ceil(this.State.NumAcceleration * 100) / 100;
201+
this.state.NumAcceleration = Math.ceil(this.state.NumAcceleration * 100) / 100;
198202

199-
if(this.State.NumAcceleration > -0.8 && this.State.NumAcceleration < 0.8){
200-
this.State.NumAcceleration = 0;
203+
if(this.state.NumAcceleration > -0.8 && this.state.NumAcceleration < 0.8){
204+
this.state.NumAcceleration = 0;
201205
clearInterval(this.Interval);
202206
}
203207

204208
// Callback function.
205-
if(this.Config.on.Acceleration && typeof(this.Config.on.Acceleration) === 'function') this.Config.on.Acceleration(this.State.NumAcceleration);
209+
if(this.config.on.Acceleration && typeof(this.config.on.Acceleration) === 'function') this.config.on.Acceleration(this.state.NumAcceleration);
206210
},10);
207211
}
208212

@@ -213,8 +217,8 @@ export default class SCROLL_EFFECT_MODULE {
213217
// for Initial display
214218
setTimeout(() => {
215219

216-
if(this.Config.addClassNameActive){
217-
DOM.addClass(this.$elemItemFirst[loopCount], this.Config.addClassNameActive);
220+
if(this.config.addClassNameActive){
221+
DOM.addClass(this.$elemItemFirst[loopCount], this.config.addClassNameActive);
218222
}
219223

220224
loopCount++;
@@ -228,7 +232,7 @@ export default class SCROLL_EFFECT_MODULE {
228232
this.ActionChange();
229233
}
230234

231-
},this.Config.firstDelaySteps);
235+
},this.config.firstDelaySteps);
232236
};
233237

234238
// When there is an initial display element.
@@ -237,38 +241,38 @@ export default class SCROLL_EFFECT_MODULE {
237241
} else {
238242
setTimeout(() => {
239243
this.ActionChange();
240-
},this.Config.firstDelaySteps);
244+
},this.config.firstDelaySteps);
241245
}
242246

243247
}
244248

245249
ActionChange(){
246250

247-
this.State.PosListFix.map((el)=>{
248-
if(!DOM.hasClass(this.$elemItem[el.index], this.Config.addClassNameActive)){
251+
this.state.PosListFix.map((el)=>{
252+
if(!DOM.hasClass(this.$elemItem[el.index], this.config.addClassNameActive)){
249253
el.count++;
250-
if(this.Config.addClassNameActive) DOM.addClass(this.$elemItem[el.index], this.Config.addClassNameActive);
254+
if(this.config.addClassNameActive) DOM.addClass(this.$elemItem[el.index], this.config.addClassNameActive);
251255

252256
// Callback function.
253-
if(this.Config.on.In && typeof(this.Config.on.In) === 'function') this.Config.on.In(this.$elemItem[el.index], el.index, el, this.State.NumScrolltop);
257+
if(this.config.on.In && typeof(this.config.on.In) === 'function') this.config.on.In(this.$elemItem[el.index], el.index, el, this.state.NumScrolltop);
254258
}
255259
});
256260

257-
if(this.Config.displayReverse){
258-
this.State.PosListNoneFix.map((el)=>{
259-
if(DOM.hasClass(this.$elemItem[el.index], this.Config.addClassNameActive)){
260-
DOM.removeClass(this.$elemItem[el.index], this.Config.addClassNameActive);
261+
if(this.config.displayReverse){
262+
this.state.PosListNoneFix.map((el)=>{
263+
if(DOM.hasClass(this.$elemItem[el.index], this.config.addClassNameActive)){
264+
DOM.removeClass(this.$elemItem[el.index], this.config.addClassNameActive);
261265

262266
// Callback function.
263-
if(this.Config.on.Out && typeof(this.Config.on.Out) === 'function') this.Config.on.Out(this.$elemItem[el.index], el.index, el, this.State.NumScrolltop);
267+
if(this.config.on.Out && typeof(this.config.on.Out) === 'function') this.config.on.Out(this.$elemItem[el.index], el.index, el, this.state.NumScrolltop);
264268
}
265269
});
266270
}
267271

268272
// Callback function.
269-
if(this.Config.on.Change && typeof(this.Config.on.Change) === 'function'){
270-
let _pf = this.State.PosListFix;
271-
this.Config.on.Change(this.$elemItem[_pf.length-1], _pf.length, _pf[_pf.length-1], this.State.NumScrolltop);
273+
if(this.config.on.Change && typeof(this.config.on.Change) === 'function'){
274+
let _pf = this.state.PosListFix;
275+
this.config.on.Change(this.$elemItem[_pf.length-1], _pf.length, _pf[_pf.length-1], this.state.NumScrolltop);
272276
}
273277

274278
}

0 commit comments

Comments
 (0)