Skip to content

Commit

Permalink
update isClient
Browse files Browse the repository at this point in the history
  • Loading branch information
@likuner
likuner committed May 26, 2022
1 parent 889c658 commit 7e913ed
Show file tree
Hide file tree
Showing 23 changed files with 726 additions and 775 deletions.
116 changes: 55 additions & 61 deletions src/components/affix/affix.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,25 +26,20 @@
}
function getOffset(element) {
if (isClient) {
const rect = element.getBoundingClientRect();
if (!isClient) return;
const rect = element.getBoundingClientRect();
const scrollTop = getScroll(window, true);
const scrollLeft = getScroll(window);
const scrollTop = getScroll(window, true);
const scrollLeft = getScroll(window);
const docEl = window.document.body;
const clientTop = docEl.clientTop || 0;
const clientLeft = docEl.clientLeft || 0;
const docEl = window.document.body;
const clientTop = docEl.clientTop || 0;
const clientLeft = docEl.clientLeft || 0;
return {
top: rect.top + scrollTop - clientTop,
left: rect.left + scrollLeft - clientLeft
};
}
return {
top: 0,
left: 0
}
top: rect.top + scrollTop - clientTop,
left: rect.left + scrollLeft - clientLeft
};
}
export default {
Expand Down Expand Up @@ -101,53 +96,52 @@
},
methods: {
handleScroll () {
if (isClient) {
const affix = this.affix;
const scrollTop = getScroll(window, true);
const elOffset = getOffset(this.$el);
const windowHeight = window.innerHeight;
const elHeight = this.$el.getElementsByTagName('div')[0].offsetHeight;
// Fixed Top
if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) {
this.affix = true;
this.slotStyle = {
width: this.$refs.point.clientWidth + 'px',
height: this.$refs.point.clientHeight + 'px'
};
this.slot = true;
this.styles = {
top: `${this.offsetTop}px`,
left: `${elOffset.left}px`,
width: `${this.$el.offsetWidth}px`
};
this.$emit('on-change', true);
} else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) {
this.slot = false;
this.slotStyle = {};
this.affix = false;
this.styles = null;
this.$emit('on-change', false);
}
if (!isClient) return;
const affix = this.affix;
const scrollTop = getScroll(window, true);
const elOffset = getOffset(this.$el);
const windowHeight = window.innerHeight;
const elHeight = this.$el.getElementsByTagName('div')[0].offsetHeight;
// Fixed Top
if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) {
this.affix = true;
this.slotStyle = {
width: this.$refs.point.clientWidth + 'px',
height: this.$refs.point.clientHeight + 'px'
};
this.slot = true;
this.styles = {
top: `${this.offsetTop}px`,
left: `${elOffset.left}px`,
width: `${this.$el.offsetWidth}px`
};
this.$emit('on-change', true);
} else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) {
this.slot = false;
this.slotStyle = {};
this.affix = false;
this.styles = null;
this.$emit('on-change', false);
}
// Fixed Bottom
if ((elOffset.top + this.offsetBottom + elHeight) > (scrollTop + windowHeight) && this.offsetType == 'bottom' && !affix) {
this.affix = true;
this.styles = {
bottom: `${this.offsetBottom}px`,
left: `${elOffset.left}px`,
width: `${this.$el.offsetWidth}px`
};
this.$emit('on-change', true);
} else if ((elOffset.top + this.offsetBottom + elHeight) < (scrollTop + windowHeight) && this.offsetType == 'bottom' && affix) {
this.affix = false;
this.styles = null;
this.$emit('on-change', false);
}
// Fixed Bottom
if ((elOffset.top + this.offsetBottom + elHeight) > (scrollTop + windowHeight) && this.offsetType == 'bottom' && !affix) {
this.affix = true;
this.styles = {
bottom: `${this.offsetBottom}px`,
left: `${elOffset.left}px`,
width: `${this.$el.offsetWidth}px`
};
this.$emit('on-change', true);
} else if ((elOffset.top + this.offsetBottom + elHeight) < (scrollTop + windowHeight) && this.offsetType == 'bottom' && affix) {
this.affix = false;
this.styles = null;
this.$emit('on-change', false);
}
}
}
Expand Down
62 changes: 29 additions & 33 deletions src/components/anchor/anchor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,40 +108,37 @@
this.getCurrentScrollAtTitleId(scrollTop);
},
handleHashChange () {
if (isClient) {
const url = window.location.href;
const sharpLinkMatch = sharpMatcherRegx.exec(url);
if (!sharpLinkMatch) return;
this.currentLink = sharpLinkMatch[0];
this.currentId = sharpLinkMatch[1];
}
if (!isClient) return;
const url = window.location.href;
const sharpLinkMatch = sharpMatcherRegx.exec(url);
if (!sharpLinkMatch) return;
this.currentLink = sharpLinkMatch[0];
this.currentId = sharpLinkMatch[1];
},
handleScrollTo () {
if (isClient) {
const anchor = document.getElementById(this.currentId);
const currentLinkElementA = document.querySelector(`a[data-href="${this.currentLink}"]`);
let offset = this.scrollOffset;
if (currentLinkElementA) {
offset = parseFloat(currentLinkElementA.getAttribute('data-scroll-offset'));
}
if (!anchor) return;
const offsetTop = anchor.offsetTop - this.wrapperTop - offset;
this.animating = true;
scrollTop(this.scrollContainer, this.scrollElement.scrollTop, offsetTop, 600, () => {
this.animating = false;
});
this.handleSetInkTop();
if (!isClient) return;
const anchor = document.getElementById(this.currentId);
const currentLinkElementA = document.querySelector(`a[data-href="${this.currentLink}"]`);
let offset = this.scrollOffset;
if (currentLinkElementA) {
offset = parseFloat(currentLinkElementA.getAttribute('data-scroll-offset'));
}
if (!anchor) return;
const offsetTop = anchor.offsetTop - this.wrapperTop - offset;
this.animating = true;
scrollTop(this.scrollContainer, this.scrollElement.scrollTop, offsetTop, 600, () => {
this.animating = false;
});
this.handleSetInkTop();
},
handleSetInkTop () {
if (isClient) {
const currentLinkElementA = document.querySelector(`a[data-href="${this.currentLink}"]`);
if (!currentLinkElementA) return;
const elementATop = currentLinkElementA.offsetTop;
const top = (elementATop < 0 ? this.offsetTop : elementATop);
this.inkTop = top;
}
if (!isClient) return;
const currentLinkElementA = document.querySelector(`a[data-href="${this.currentLink}"]`);
if (!currentLinkElementA) return;
const elementATop = currentLinkElementA.offsetTop;
const top = (elementATop < 0 ? this.offsetTop : elementATop);
this.inkTop = top;
},
getCurrentScrollAtTitleId (scrollTop) {
let i = -1;
Expand All @@ -163,10 +160,9 @@
this.handleSetInkTop();
},
getContainer () {
if (isClient) {
this.scrollContainer = this.container ? (typeof this.container === 'string' ? document.querySelector(this.container) : this.container) : window;
this.scrollElement = this.container ? this.scrollContainer : (document.documentElement || document.body);
}
if (!isClient) return;
this.scrollContainer = this.container ? (typeof this.container === 'string' ? document.querySelector(this.container) : this.container) : window;
this.scrollElement = this.container ? this.scrollContainer : (document.documentElement || document.body);
},
removeListener () {
off(this.scrollContainer, 'scroll', this.handleScroll);
Expand Down
26 changes: 10 additions & 16 deletions src/components/back-top/back-top.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,18 +42,14 @@
mounted () {
// window.addEventListener('scroll', this.handleScroll, false);
// window.addEventListener('resize', this.handleScroll, false);
if (isClient) {
on(window, 'scroll', this.handleScroll);
on(window, 'resize', this.handleScroll);
}
on(window, 'scroll', this.handleScroll);
on(window, 'resize', this.handleScroll);
},
beforeUnmount () {
// window.removeEventListener('scroll', this.handleScroll, false);
// window.removeEventListener('resize', this.handleScroll, false);
if (isClient) {
off(window, 'scroll', this.handleScroll);
off(window, 'resize', this.handleScroll);
}
off(window, 'scroll', this.handleScroll);
off(window, 'resize', this.handleScroll);
},
computed: {
classes () {
Expand All @@ -76,16 +72,14 @@
},
methods: {
handleScroll () {
if (isClient) {
this.backTop = window.pageYOffset >= this.height;
}
if (!isClient) return;
this.backTop = window.pageYOffset >= this.height;
},
back () {
if (isClient) {
const sTop = document.documentElement.scrollTop || document.body.scrollTop;
scrollTop(window, sTop, 0, this.duration);
this.$emit('on-click');
}
if (!isClient) return;
const sTop = document.documentElement.scrollTop || document.body.scrollTop;
scrollTop(window, sTop, 0, this.duration);
this.$emit('on-click');
}
}
};
Expand Down
65 changes: 32 additions & 33 deletions src/components/base/notification/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,43 +3,42 @@ import { createApp, h, getCurrentInstance } from 'vue';
import { isClient } from '../../../utils/index';

Notification.newInstance = properties => {
if (isClient) {
const _props = properties || {};
if (!isClient) return;
const _props = properties || {};

let _instance = null;
let _instance = null;

const Instance = createApp({
render () {
return h(Notification, Object.assign({
ref: 'notification'
}, _props));
},
created () {
_instance = getCurrentInstance();
}
});
const Instance = createApp({
render () {
return h(Notification, Object.assign({
ref: 'notification'
}, _props));
},
created () {
_instance = getCurrentInstance();
}
});

const container = document.createElement('div');
document.body.appendChild(container);
Instance.mount(container);
const notification = _instance.refs.notification;
const container = document.createElement('div');
document.body.appendChild(container);
Instance.mount(container);
const notification = _instance.refs.notification;

return {
notice (noticeProps) {
notification.add(noticeProps);
},
remove (name) {
notification.close(name);
},
component: notification,
destroy (element) {
notification.closeAll();
isClient && setTimeout(function() {
document.body.removeChild(document.getElementsByClassName(element)[0]);
}, 500);
}
};
}
return {
notice (noticeProps) {
notification.add(noticeProps);
},
remove (name) {
notification.close(name);
},
component: notification,
destroy (element) {
notification.closeAll();
isClient && setTimeout(function() {
document.body.removeChild(document.getElementsByClassName(element)[0]);
}, 500);
}
};
};

export default Notification;
13 changes: 6 additions & 7 deletions src/components/carousel/carousel.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -269,13 +269,12 @@
}
},
setAutoplay () {
if (isClient) {
window.clearInterval(this.timer);
if (this.autoplay) {
this.timer = window.setInterval(() => {
this.add(1);
}, this.autoplaySpeed);
}
if (!isClient) return;
window.clearInterval(this.timer);
if (this.autoplay) {
this.timer = window.setInterval(() => {
this.add(1);
}, this.autoplaySpeed);
}
},
updateOffset () {
Expand Down
Loading

0 comments on commit 7e913ed

Please sign in to comment.