1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | import VueCompositionApi, { defineComponent, ref, computed, onBeforeUnmount } from '@vue/composition-api';
|
9 | import Ping from 'ping.js';
|
10 |
|
11 | var script = defineComponent({
|
12 | name: 'VOffline',
|
13 | props: {
|
14 | onlineClass: {
|
15 | type: String ,
|
16 | required: false,
|
17 | default: '',
|
18 | },
|
19 | offlineClass: {
|
20 | type: String ,
|
21 | required: false,
|
22 | default: '',
|
23 | },
|
24 | pingUrl: {
|
25 | type: String ,
|
26 | required: false,
|
27 | default: 'https://google.com',
|
28 | },
|
29 | },
|
30 | setup(props, { emit }) {
|
31 |
|
32 | const isOnline = ref(navigator.onLine || false);
|
33 | const events = ref(['online', 'offline', 'load']);
|
34 | const url = ref(props.pingUrl || 'https://google.com');
|
35 |
|
36 |
|
37 | const wrapperClass = computed(() => {
|
38 | if (isOnline.value) {
|
39 | return typeof props.onlineClass === 'string' ? props.onlineClass : '';
|
40 | } else {
|
41 | return typeof props.offlineClass === 'string'
|
42 | ? props.offlineClass
|
43 | : '';
|
44 | }
|
45 | });
|
46 |
|
47 | |
48 |
|
49 |
|
50 | events.value.forEach((event) => window.addEventListener(event, check));
|
51 |
|
52 | |
53 |
|
54 |
|
55 | onBeforeUnmount(() => {
|
56 |
|
57 | events.value.forEach((event) =>
|
58 | window.removeEventListener(event, check),
|
59 | );
|
60 | });
|
61 |
|
62 |
|
63 | |
64 |
|
65 |
|
66 |
|
67 |
|
68 |
|
69 | async function check() {
|
70 | const p = new Ping();
|
71 | try {
|
72 | const ping = await p.ping(url.value);
|
73 | if (ping || navigator.onLine) {
|
74 | isOnline.value = true;
|
75 | emit('detected-condition', isOnline.value);
|
76 | }
|
77 | } catch (error) {
|
78 | if (error || !navigator.onLine) {
|
79 | isOnline.value = false;
|
80 | emit('detected-condition', isOnline.value);
|
81 | }
|
82 | }
|
83 | }
|
84 |
|
85 | return {
|
86 | wrapperClass,
|
87 | };
|
88 | },
|
89 | });
|
90 |
|
91 | function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
|
92 | if (typeof shadowMode !== 'boolean') {
|
93 | createInjectorSSR = createInjector;
|
94 | createInjector = shadowMode;
|
95 | shadowMode = false;
|
96 | }
|
97 |
|
98 | const options = typeof script === 'function' ? script.options : script;
|
99 |
|
100 | if (template && template.render) {
|
101 | options.render = template.render;
|
102 | options.staticRenderFns = template.staticRenderFns;
|
103 | options._compiled = true;
|
104 |
|
105 | if (isFunctionalTemplate) {
|
106 | options.functional = true;
|
107 | }
|
108 | }
|
109 |
|
110 | if (scopeId) {
|
111 | options._scopeId = scopeId;
|
112 | }
|
113 | let hook;
|
114 | if (moduleIdentifier) {
|
115 |
|
116 | hook = function (context) {
|
117 |
|
118 | context =
|
119 | context ||
|
120 | (this.$vnode && this.$vnode.ssrContext) ||
|
121 | (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext);
|
122 |
|
123 | if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
|
124 | context = __VUE_SSR_CONTEXT__;
|
125 | }
|
126 |
|
127 | if (style) {
|
128 | style.call(this, createInjectorSSR(context));
|
129 | }
|
130 |
|
131 | if (context && context._registeredComponents) {
|
132 | context._registeredComponents.add(moduleIdentifier);
|
133 | }
|
134 | };
|
135 |
|
136 |
|
137 | options._ssrRegister = hook;
|
138 | }
|
139 | else if (style) {
|
140 | hook = shadowMode
|
141 | ? function (context) {
|
142 | style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
|
143 | }
|
144 | : function (context) {
|
145 | style.call(this, createInjector(context));
|
146 | };
|
147 | }
|
148 | if (hook) {
|
149 | if (options.functional) {
|
150 |
|
151 | const originalRender = options.render;
|
152 | options.render = function renderWithStyleInjection(h, context) {
|
153 | hook.call(context);
|
154 | return originalRender(h, context);
|
155 | };
|
156 | }
|
157 | else {
|
158 |
|
159 | const existing = options.beforeCreate;
|
160 | options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
|
161 | }
|
162 | }
|
163 | return script;
|
164 | }
|
165 |
|
166 |
|
167 | const __vue_script__ = script;
|
168 |
|
169 |
|
170 | var __vue_render__ = function () {
|
171 | var _vm = this;
|
172 | var _h = _vm.$createElement;
|
173 | var _c = _vm._self._c || _h;
|
174 | return _c("div", { class: _vm.wrapperClass }, [_vm._t("default")], 2)
|
175 | };
|
176 | var __vue_staticRenderFns__ = [];
|
177 | __vue_render__._withStripped = true;
|
178 |
|
179 |
|
180 | const __vue_inject_styles__ = undefined;
|
181 |
|
182 | const __vue_scope_id__ = undefined;
|
183 |
|
184 | const __vue_module_identifier__ = undefined;
|
185 |
|
186 | const __vue_is_functional_template__ = false;
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 |
|
194 |
|
195 | const __vue_component__ = normalizeComponent(
|
196 | { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
|
197 | __vue_inject_styles__,
|
198 | __vue_script__,
|
199 | __vue_scope_id__,
|
200 | __vue_is_functional_template__,
|
201 | __vue_module_identifier__,
|
202 | false,
|
203 | undefined,
|
204 | undefined,
|
205 | undefined
|
206 | );
|
207 |
|
208 | let installed = false;
|
209 |
|
210 | const install = {
|
211 | install(Vue) {
|
212 | if (installed) return;
|
213 | Vue.use(VueCompositionApi);
|
214 | Vue.component('VOffline', __vue_component__);
|
215 | installed = true;
|
216 | },
|
217 | };
|
218 |
|
219 | export default install;
|
220 | export { __vue_component__ as VOffline };
|
221 |
|