Skip to content

Commit f3e7341

Browse files
webdevnerdstuffwebdevnerdstuff
committed
Debugging
1 parent a3589b2 commit f3e7341

File tree

7 files changed

+75
-13
lines changed

7 files changed

+75
-13
lines changed

‎.npmignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎build/webpack.base.config.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
const path = require('path');
22
const { VueLoaderPlugin } = require('vue-loader');
3-
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
43
const sass = require('sass');
54

65
/*
@@ -82,7 +81,6 @@ module.exports = {
8281
},
8382
plugins: [
8483
new VueLoaderPlugin(),
85-
new VuetifyLoaderPlugin(),
8684
],
8785
infrastructureLogging: {
8886
level: 'none',

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@
33
function gtag() { dataLayer.push(arguments); }
44
gtag('js', new Date());
55

6-
gtag('config', 'UA-XXXXXXXXX-X');</script><meta name="base" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/"><meta name="charset" content="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="vuetify-resize-drawer, vuetifyResizeDrawer, v-resize-drawer, vResizeDrawer, vuetify, navigation drawer, v-navigation-drawer, vNavigationDrawer, api, drawer, resize, resizable, vue, vue2, component, javascript, webdevnerdstuff, wdns"><meta name="description" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="author" content="WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)"><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="rating" content="General"><meta name="theme-color" content="#21252a"><meta name="og:type" content="website"><meta name="og:title" content="Vuetify Resize Drawer"><meta name="og:image" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/images/vuetify-resize-drawer-social.jpg"><meta name="og:image:alt" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="og:image:width" content="1200"><meta name="og:image:height" content="630"><meta name="og:description" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="og:site_name" content="Vuetify Resize Drawer"><meta name="og:locale" content="en_US"></head><body><noscript><strong>We're sorry but Vuetify Resize Drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script defer="defer" src="vuetify-resize-drawer.js?67816addb24c252a75a6"></script></body></html>
6+
gtag('config', 'UA-XXXXXXXXX-X');</script><meta name="base" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/"><meta name="charset" content="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="keywords" content="vuetify-resize-drawer, vuetifyResizeDrawer, v-resize-drawer, vResizeDrawer, vuetify, navigation drawer, v-navigation-drawer, vNavigationDrawer, api, drawer, resize, resizable, vue, vue2, component, javascript, webdevnerdstuff, wdns"><meta name="description" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="author" content="WebDevNerdStuff & Bunnies... lots and lots of bunnies! <webdevnerdstuff@gmail.com> (https://webdevnerdstuff.com)"><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="rating" content="General"><meta name="theme-color" content="#21252a"><meta name="og:type" content="website"><meta name="og:title" content="Vuetify Resize Drawer"><meta name="og:image" content="https://webdevnerdstuff.github.io/vuetify-resize-drawer/images/vuetify-resize-drawer-social.jpg"><meta name="og:image:alt" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="og:image:width" content="1200"><meta name="og:image:height" content="630"><meta name="og:description" content="The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user."><meta name="og:site_name" content="Vuetify Resize Drawer"><meta name="og:locale" content="en_US"></head><body><noscript><strong>We're sorry but Vuetify Resize Drawer doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script><script defer="defer" src="vuetify-resize-drawer.js?2c401028564bb7e8cfa9"></script></body></html>

‎docs/vuetify-resize-drawer.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vuetify-resize-drawer",
3-
"version": "1.0.7-alpha.0",
3+
"version": "0.0.1-alpha.0",
44
"description": "The vuetify-resize-drawer component extends the functionality of the v-navigation-drawer so that it is resizable by the user.",
55
"private": false,
66
"main": "dist/vuetify-resize-drawer.js",

‎src/App.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
</v-app-bar>
4040

4141
<!-- ====================================================== Navigation Drawer -->
42-
<v-navigation-drawer
42+
<!-- <v-navigation-drawer
4343
app
4444
v-model="drawer"
4545
clipped
@@ -65,7 +65,7 @@
6565
<v-divider></v-divider>
6666
6767
<Menu :drawerOptions="drawerOptions" />
68-
</v-navigation-drawer>
68+
</v-navigation-drawer> -->
6969

7070
<v-resize-drawer
7171
v-model="drawer"

‎src/components/VResizeDrawer.vue

Lines changed: 68 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,17 +93,19 @@
9393
</template>
9494

9595
<script>
96-
import Vue from 'vue';
97-
import Vuetify from 'vuetify';
9896
import { VNavigationDrawer } from 'vuetify/lib';
9997
98+
// ! `this.$vuetify.application` is supposed to be readonly ! //
99+
100100
// ! This is needed for this.$vuetify to work, but causes the file to be huge. Need to figure a way around this ! //
101-
const vuetifyOptions = {};
102-
Vue.use(Vuetify);
101+
// import Vue from 'vue';
102+
// import Vuetify from 'vuetify';
103+
// const vuetifyOptions = {};
104+
// Vue.use(Vuetify);
103105
104106
export default {
105107
extends: VNavigationDrawer,
106-
vuetify: new Vuetify(vuetifyOptions),
108+
// vuetify: new Vuetify(vuetifyOptions),
107109
name: 'v-resize-drawer',
108110
props: {
109111
handleColor: {
@@ -155,6 +157,14 @@ export default {
155157
},
156158
loading: false,
157159
resizedWidth: 256,
160+
unicornLog: {
161+
styles: [
162+
'background: black',
163+
'color: #0f0',
164+
'padding: 5px',
165+
],
166+
prefix: '[VResizeDrawer.vue]',
167+
},
158168
}),
159169
computed: {
160170
drawerClasses() {
@@ -178,8 +188,10 @@ export default {
178188
},
179189
drawerStyles() {
180190
const translate = this.isBottom ? 'translateY' : 'translateX';
191+
// ! This causes issues when not importing vuetify ! //
181192
let top = this.$vuetify.application.bar;
182193
194+
// ! This causes issues when not importing vuetify ! //
183195
top += this.clipped ? this.$vuetify.application.top : 0;
184196
185197
const styles = {
@@ -329,9 +341,23 @@ export default {
329341
330342
// Handle Events //
331343
handleClick(evt) {
344+
this.$unicornLog({
345+
text: 'handleClick',
346+
styles: this.unicornLog.styles,
347+
logPrefix: this.unicornLog.prefix,
348+
objects: evt,
349+
});
350+
332351
this.emitEvent('handle:click', evt);
333352
},
334353
handleDoubleClick(evt) {
354+
this.$unicornLog({
355+
text: 'handleDoubleClick',
356+
styles: this.unicornLog.styles,
357+
logPrefix: this.unicornLog.prefix,
358+
objects: evt,
359+
});
360+
335361
this.resizedWidth = this.defaultWidth;
336362
this.setLocalStorage();
337363
@@ -349,6 +375,13 @@ export default {
349375
}
350376
351377
if (!this.events.handle.mouseDown) {
378+
this.$unicornLog({
379+
text: 'handleMouseDown',
380+
styles: this.unicornLog.styles,
381+
logPrefix: this.unicornLog.prefix,
382+
objects: evt,
383+
});
384+
352385
this.events.handle.mouseDown = true;
353386
document.addEventListener('mouseup', this.handleMouseUp, false);
354387
this.emitEvent('handle:mousedown', evt);
@@ -372,6 +405,16 @@ export default {
372405
373406
this.updateAppWidth(this.resizedWidth);
374407
408+
const logStuff = {
409+
resizedWidth: this.resizedWidth,
410+
};
411+
412+
this.$unicornLog({
413+
text: 'handleMouseUp',
414+
styles: this.unicornLog.styles,
415+
logPrefix: this.unicornLog.prefix,
416+
objects: logStuff,
417+
});
375418
document.removeEventListener('mouseup', this.handleMouseUp, false);
376419
document.removeEventListener('mousemove', this.drawerResize, false);
377420
this.emitEvent('handle:mouseup', evt);
@@ -406,8 +449,10 @@ export default {
406449
computeTop() {
407450
if (!this.hasApp) return 0;
408451
452+
// ! This causes issues when not importing vuetify ! //
409453
let top = this.$vuetify.application.bar;
410454
455+
// ! This causes issues when not importing vuetify ! //
411456
top += this.clipped ?
412457
this.$vuetify.application.top :
413458
0;
@@ -432,6 +477,15 @@ export default {
432477
width: this.resizedWidth,
433478
};
434479
480+
if (name !== 'handle:drag') {
481+
this.$unicornLog({
482+
text: `emitEvent: ${name}`,
483+
styles: this.unicornLog.styles,
484+
logPrefix: this.unicornLog.prefix,
485+
objects: { evt, drawerData },
486+
});
487+
}
488+
435489
this.$emit(name, drawerData);
436490
},
437491
genListeners() {
@@ -440,6 +494,13 @@ export default {
440494
drawer.addEventListener('mouseleave', this.drawerMouseleave, false);
441495
},
442496
updateApplication() {
497+
if (
498+
!this.isActive ||
499+
this.isMobile ||
500+
this.temporary ||
501+
!this.$el
502+
) return 0;
503+
443504
let intWidth = typeof this.drawerWidth === 'number' ? this.drawerWidth : this.drawerWidth.replace('px', '');
444505
445506
if (!this.miniVariant && this.expandOnHover) {
@@ -456,10 +517,12 @@ export default {
456517
const intWidth = typeof width === 'number' ? width : width.replace('px', '');
457518
458519
if (this.right) {
520+
// ! `this.$vuetify.application` is supposed to be readonly ! //
459521
this.$vuetify.application.right = intWidth;
460522
return false;
461523
}
462524
525+
// ! `this.$vuetify.application` is supposed to be readonly ! //
463526
this.$vuetify.application.left = intWidth;
464527
return false;
465528
},

0 commit comments

Comments
 (0)