Skip to content

Commit 78de439

Browse files
Kukksgmsa
Kukks
authored and
gmsa
committed
abstract DOM related calls for initial SSR Support (#208)
* abstract DOM related calls for initial SSR Support * missing commit * better pr quality * final pr cleanup * save dir state on server
1 parent 8246cd3 commit 78de439

File tree

5 files changed

+108
-58
lines changed

5 files changed

+108
-58
lines changed

‎src/App.vue

+3-5
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@
9494
//import ResponsiveGridLayout from './ResponsiveGridLayout.vue';
9595
import TestElement from './TestElement.vue';
9696
import CustomDragElement from './CustomDragElement.vue';
97+
import {getDocumentDir, setDocumentDir} from "./DOM";
9798
//var eventBus = require('./eventBus');
9899
99100
var testLayout = [
@@ -185,17 +186,14 @@
185186
* Add change direction button
186187
*/
187188
changeDirection() {
188-
let documentDirection = (document.dir !=undefined) ?
189-
document.dir :
190-
document.getElementsByTagName("html")[0].getAttribute("dir");
189+
let documentDirection = getDocumentDir();
191190
let toggle = "";
192191
if (documentDirection == "rtl") {
193192
toggle = "ltr"
194193
} else {
195194
toggle = "rtl"
196195
}
197-
var html = document.getElementsByTagName("html")[0];
198-
html.setAttribute("dir", toggle);
196+
setDocumentDir(toggle);
199197
//eventBus.$emit('directionchange');
200198
}
201199
},

‎src/DOM.js

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
let currentDir: "ltr" | "rtl" | "auto" = "auto";
2+
3+
function hasDocument(){
4+
return (typeof document !== "undefined");
5+
}
6+
7+
function hasWindow(){
8+
return (typeof window !== "undefined");
9+
}
10+
11+
export function getDocumentDir(){
12+
if(!hasDocument()){
13+
return currentDir;
14+
}
15+
const direction = (typeof document.dir !== "undefined") ?
16+
document.dir :
17+
document.getElementsByTagName("html")[0].getAttribute("dir");
18+
return direction;
19+
}
20+
21+
export function setDocumentDir(dir: "ltr" | "rtl" | "auto"){
22+
if(!hasDocument){
23+
currentDir = dir;
24+
return;
25+
}
26+
27+
const html = document.getElementsByTagName("html")[0];
28+
html.setAttribute("dir", dir);
29+
}
30+
31+
export function addWindowEventListener(event:string, callback: () => mixed){
32+
if(!hasWindow){
33+
34+
callback();
35+
return;
36+
}
37+
window.addEventListener(event, callback);
38+
}
39+
40+
export function removeWindowEventListener(event:string, callback: () => mixed){
41+
if(!hasWindow){
42+
return;
43+
}
44+
window.removeEventListener(event, callback);
45+
}
46+
47+
48+

‎src/GridItem.vue

+3-8
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@
8383
<script>
8484
import {setTopLeft, setTopRight, setTransformRtl, setTransform, createMarkup, getLayoutItem} from './utils';
8585
import {getControlPosition, offsetXYFromParentOf, createCoreData} from './draggableUtils';
86+
import {getDocumentDir} from "./DOM";
8687
// var eventBus = require('./eventBus');
8788
8889
var interact = require("interactjs");
@@ -251,10 +252,7 @@
251252
};
252253
253254
self.directionchangeHandler = (direction) => {
254-
var direction = (document.dir !== undefined) ?
255-
document.dir :
256-
document.getElementsByTagName("html")[0].getAttribute("dir");
257-
this.rtl = (direction === "rtl");
255+
this.rtl = getDocumentDir();
258256
this.compact();
259257
};
260258
@@ -270,10 +268,7 @@
270268
this.eventBus.$on('directionchange', self.directionchangeHandler);
271269
this.eventBus.$on('setColNum', self.setColNum)
272270
273-
var direction = (document.dir !== undefined) ?
274-
document.dir :
275-
document.getElementsByTagName("html")[0].getAttribute("dir");
276-
this.rtl = (direction === "rtl");
271+
this.rtl = getDocumentDir();
277272
},
278273
beforeDestroy: function(){
279274
var self = this;

‎src/GridLayout.vue

+24-20
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
import {bottom, compact, getLayoutItem, moveElement, validateLayout} from './utils';
2424
//var eventBus = require('./eventBus');
2525
import GridItem from './GridItem.vue'
26+
import {addWindowEventListener, removeWindowEventListener} from "./DOM";
2627
2728
export default {
2829
name: "GridLayout",
@@ -119,7 +120,7 @@
119120
//Remove listeners
120121
this.eventBus.$off('resizeEvent', this.resizeEventHandler);
121122
this.eventBus.$off('dragEvent', this.dragEventHandler);
122-
window.removeEventListener("resize", this.onWindowResize)
123+
removeWindowEventListener("resize", this.onWindowResize);
123124
},
124125
mounted: function() {
125126
this.$nextTick(function () {
@@ -129,7 +130,7 @@
129130
if (self.width === null) {
130131
self.onWindowResize();
131132
//self.width = self.$el.offsetWidth;
132-
window.addEventListener('resize', self.onWindowResize);
133+
addWindowEventListener('resize', self.onWindowResize);
133134
}
134135
compact(self.layout, self.verticalCompact);
135136
@@ -143,25 +144,8 @@
143144
});
144145
});
145146
});
146-
window.onload = function() {
147-
if (self.width === null) {
148-
self.onWindowResize();
149-
//self.width = self.$el.offsetWidth;
150-
window.addEventListener('resize', self.onWindowResize);
151-
}
152-
compact(self.layout, self.verticalCompact);
153147
154-
self.updateHeight();
155-
self.$nextTick(function () {
156-
var erd = elementResizeDetectorMaker({
157-
strategy: "scroll" //<- For ultra performance.
158-
});
159-
erd.listenTo(self.$refs.item, function (element) {
160-
self.onWindowResize();
161-
});
162-
});
163-
164-
};
148+
addWindowEventListener("load", self.onWindowLoad.bind(this));
165149
});
166150
},
167151
watch: {
@@ -189,6 +173,26 @@
189173
}
190174
},
191175
methods: {
176+
onWindowLoad: function(){
177+
var self = this;
178+
179+
if (self.width === null) {
180+
self.onWindowResize();
181+
//self.width = self.$el.offsetWidth;
182+
addWindowEventListener('resize', self.onWindowResize);
183+
}
184+
compact(self.layout, self.verticalCompact);
185+
186+
self.updateHeight();
187+
self.$nextTick(function () {
188+
var erd = elementResizeDetectorMaker({
189+
strategy: "scroll" //<- For ultra performance.
190+
});
191+
erd.listenTo(self.$refs.item, function (element) {
192+
self.onWindowResize();
193+
});
194+
});
195+
},
192196
layoutUpdate() {
193197
if (this.layout !== undefined) {
194198
if (this.layout.length !== this.lastLayoutLength) {

‎src/ResponsiveGridLayout.vue

+30-25
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,14 @@
44
</div>
55
</template>
66
<style>
7-
.vue-grid-layout {
8-
position: relative;
9-
transition: height 200ms ease;
10-
}
7+
.vue-grid-layout {
8+
position: relative;
9+
transition: height 200ms ease;
10+
}
1111
</style>
1212
<script>
13+
import {addWindowEventListener, removeWindowEventListener} from "./DOM";
14+
1315
var elementResizeDetectorMaker = require("element-resize-detector");
1416
1517
import {bottom, compact, getLayoutItem, moveElement, validateLayout, findItemInArray, findAndRemove} from './utils';
@@ -99,32 +101,14 @@
99101
},
100102
beforeDestroy: function(){
101103
//Remove listeners
102-
window.removeEventListener("resize", self.onWindowResize)
104+
removeWindowEventListener("resize", self.onWindowResize)
103105
},
104106
mounted() {
105107
this.$nextTick(function () {
106108
validateLayout(this.layout);
107109
this.originalCols = this.colNum;
108-
var self = this;
109-
window.onload = function() {
110-
self.onWindowResize();
111-
//self.width = self.$el.offsetWidth;
112-
window.addEventListener('resize', self.onWindowResize);
113-
compact(self.layout, self.verticalCompact);
114-
self.updateHeight();
115-
self.$nextTick(function() {
116-
// self.onWindowResize();
117-
var erd = elementResizeDetectorMaker({
118-
strategy: "scroll" //<- For ultra performance.
119-
});
120-
erd.listenTo(self.$refs.item, function(element) {
121-
self.onWindowResize();
122-
/*var width = element.offsetWidth;
123-
var height = element.offsetHeight;
124-
console.log("Size: " + width + "x" + height);*/
125-
});
126-
});
127-
}
110+
addWindowEventListener("load", self.onWindowLoad.bind(this));
111+
128112
});
129113
},
130114
watch: {
@@ -162,6 +146,27 @@
162146
}
163147
},
164148
methods: {
149+
onWindowLoad: function(){
150+
var self = this;
151+
this.onWindowResize();
152+
//self.width = self.$el.offsetWidth;
153+
addWindowEventListener('resize', self.onWindowResize);
154+
compact(self.layout, self.verticalCompact);
155+
self.updateHeight();
156+
self.$nextTick(function() {
157+
//self.onWindowResize();
158+
var erd = elementResizeDetectorMaker({
159+
strategy: "scroll" //<- For ultra performance.
160+
});
161+
erd.listenTo(self.$refs.item, function(element) {
162+
self.onWindowResize();
163+
/*var width = element.offsetWidth;
164+
var height = element.offsetHeight;
165+
console.log("Size: " + width + "x" + height);*/
166+
});
167+
});
168+
169+
},
165170
onWindowResize: function() {
166171
if (this.$refs !== null && this.$refs.item !== null) {
167172
this.width = this.$refs.item.offsetWidth;

0 commit comments

Comments
 (0)