Skip to content

Commit 3153274

Browse files
gmsagmsa
committed
code cleanup, changed var to let or const, interactjs rtl test
1 parent 979101f commit 3153274

File tree

5 files changed

+128
-23
lines changed

5 files changed

+128
-23
lines changed

‎src/App.vue

+5-7
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,6 @@
4747
:y="item.y"
4848
:w="item.w"
4949
:h="item.h"
50-
:min-w="2"
51-
:min-h="2"
5250
:i="item.i"
5351
@resize="resize"
5452
@move="move"
@@ -164,17 +162,17 @@
164162
this.layout.splice(this.layout.indexOf(item), 1);
165163
},
166164
addItem: function() {
167-
var self = this;
165+
let self = this;
168166
//console.log("### LENGTH: " + this.layout.length);
169-
var item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};
167+
let item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};
170168
this.index++;
171169
this.layout.push(item);
172170
},
173171
move: function(i, newX, newY){
174-
console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
172+
// console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
175173
},
176-
resize: function(i, newH, newW){
177-
console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW);
174+
resize: function(i, newH, newW, newHPx, newWPx){
175+
console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
178176
},
179177
moved: function(i, newX, newY){
180178
console.log("### MOVED i=" + i + ", X=" + newX + ", Y=" + newY);

‎src/GridItem.vue

+11-9
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
import {getDocumentDir} from "./DOM";
8787
// var eventBus = require('./eventBus');
8888
89-
var interact = require("interactjs");
89+
let interact = require("interactjs");
9090
9191
export default {
9292
name: "GridItem",
@@ -224,7 +224,7 @@
224224
}
225225
},
226226
created () {
227-
var self = this;
227+
let self = this;
228228
229229
// Accessible refernces of functions for removing in beforeDestroy
230230
self.updateWidthHandler = function (width) {
@@ -271,7 +271,7 @@
271271
this.rtl = getDocumentDir();
272272
},
273273
beforeDestroy: function(){
274-
var self = this;
274+
let self = this;
275275
//Remove listeners
276276
this.eventBus.$off('updateWidth', self.updateWidthHandler);
277277
this.eventBus.$off('compact', self.compactHandler);
@@ -363,7 +363,7 @@
363363
this.createStyle();
364364
},
365365
renderRtl: function () {
366-
console.log("### renderRtl");
366+
// console.log("### renderRtl");
367367
this.tryMakeResizable();
368368
this.createStyle();
369369
}
@@ -389,7 +389,7 @@
389389
this.innerX = this.x;
390390
this.innerW = this.w;
391391
}
392-
var pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
392+
let pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
393393
394394
395395
if (this.isDragging) {
@@ -434,11 +434,12 @@
434434
const {x, y} = position;
435435
436436
const newSize = {width: 0, height: 0};
437+
let pos;
437438
switch (event.type) {
438439
case "resizestart":
439440
this.previousW = this.innerW;
440441
this.previousH = this.innerH;
441-
var pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
442+
pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
442443
newSize.width = pos.width;
443444
newSize.height = pos.height;
444445
this.resizing = newSize;
@@ -459,7 +460,7 @@
459460
break;
460461
case "resizeend":
461462
//console.log("### resize end => x=" +this.innerX + " y=" + this.innerY + " w=" + this.innerW + " h=" + this.innerH);
462-
var pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
463+
pos = this.calcPosition(this.innerX, this.innerY, this.innerW, this.innerH);
463464
newSize.width = pos.width;
464465
newSize.height = pos.height;
465466
// console.log("### resize end => " + JSON.stringify(newSize));
@@ -469,7 +470,7 @@
469470
}
470471
471472
// Get new WH
472-
var pos = this.calcWH(newSize.height, newSize.width);
473+
pos = this.calcWH(newSize.height, newSize.width);
473474
if (pos.w < this.minW) {
474475
pos.w = this.minW;
475476
}
@@ -684,7 +685,8 @@
684685
// console.log("### MIN " + JSON.stringify(minimum));
685686
686687
const opts = {
687-
preserveAspectRatio: false,
688+
preserveAspectRatio: true,
689+
// allowFrom: "." + this.resizableHandleClass,
688690
edges: {
689691
left: false,
690692
right: "." + this.resizableHandleClass,

‎src/GridLayout.vue

+7-7
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
};
101101
},
102102
created () {
103-
var self = this;
103+
const self = this;
104104
105105
// Accessible refernces of functions for removing in beforeDestroy
106106
self.resizeEventHandler = function(eventType, i, x, y, h, w) {
@@ -125,7 +125,7 @@
125125
mounted: function() {
126126
this.$nextTick(function () {
127127
validateLayout(this.layout);
128-
var self = this;
128+
const self = this;
129129
this.$nextTick(function() {
130130
if (self.width === null) {
131131
self.onWindowResize();
@@ -136,7 +136,7 @@
136136
137137
self.updateHeight();
138138
self.$nextTick(function () {
139-
var erd = elementResizeDetectorMaker({
139+
const erd = elementResizeDetectorMaker({
140140
strategy: "scroll" //<- For ultra performance.
141141
});
142142
erd.listenTo(self.$refs.item, function (element) {
@@ -174,7 +174,7 @@
174174
},
175175
methods: {
176176
onWindowLoad: function(){
177-
var self = this;
177+
const self = this;
178178
179179
if (self.width === null) {
180180
self.onWindowResize();
@@ -185,7 +185,7 @@
185185
186186
self.updateHeight();
187187
self.$nextTick(function () {
188-
var erd = elementResizeDetectorMaker({
188+
const erd = elementResizeDetectorMaker({
189189
strategy: "scroll" //<- For ultra performance.
190190
});
191191
erd.listenTo(self.$refs.item, function (element) {
@@ -236,7 +236,7 @@
236236
});
237237
}
238238
//console.log(eventName + " id=" + id + ", x=" + x + ", y=" + y);
239-
var l = getLayoutItem(this.layout, id);
239+
let l = getLayoutItem(this.layout, id);
240240
//GetLayoutItem sometimes returns null object
241241
if (l === undefined || l === null){
242242
l = {x:0, y:0}
@@ -269,7 +269,7 @@
269269
this.isDragging = false;
270270
});
271271
}
272-
var l = getLayoutItem(this.layout, id);
272+
let l = getLayoutItem(this.layout, id);
273273
//GetLayoutItem sometimes return null object
274274
if (l === undefined || l === null){
275275
l = {h:0, w:0}

‎test/interact-test.html

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Interact TEST</title>
6+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7+
<style>
8+
.resize-drag {
9+
background-color: #29e;
10+
color: white;
11+
font-size: 20px;
12+
font-family: sans-serif;
13+
border-radius: 8px;
14+
padding: 20px;
15+
margin: 30px 20px;
16+
17+
width: 120px;
18+
19+
/* This makes things *much* easier */
20+
box-sizing: border-box;
21+
}
22+
23+
.resize-container {
24+
display: inline-block;
25+
background-color: #cccccc;
26+
width: 400px;
27+
height: 400px;
28+
}
29+
</style>
30+
</head>
31+
<body>
32+
<div class="resize-container">
33+
<div class="resize-drag">
34+
Resize from any edge or corner
35+
</div>
36+
</div>
37+
<script src="../node_modules/interactjs/dist/interact.js"></script>
38+
<script src="interact-test.js"></script>
39+
</body>
40+
</html>

‎test/interact-test.js

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
function dragMoveListener (event) {
2+
var target = event.target,
3+
// keep the dragged position in the data-x/data-y attributes
4+
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
5+
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
6+
7+
// translate the element
8+
target.style.webkitTransform =
9+
target.style.transform =
10+
'translate(' + x + 'px, ' + y + 'px)';
11+
12+
// update the posiion attributes
13+
target.setAttribute('data-x', x);
14+
target.setAttribute('data-y', y);
15+
}
16+
17+
// this is used later in the resizing and gesture demos
18+
window.dragMoveListener = dragMoveListener;
19+
20+
21+
interact('.resize-drag')
22+
.draggable({
23+
onmove: window.dragMoveListener,
24+
restrict: {
25+
restriction: 'parent',
26+
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
27+
},
28+
})
29+
.resizable({
30+
// resize from all edges and corners
31+
edges: { left: true, right: true, bottom: true, top: true },
32+
33+
// keep the edges inside the parent
34+
restrictEdges: {
35+
outer: 'parent',
36+
endOnly: true,
37+
},
38+
39+
// minimum size
40+
restrictSize: {
41+
min: { width: 100, height: 50 },
42+
},
43+
44+
inertia: true,
45+
})
46+
.on('resizemove', function (event) {
47+
var target = event.target,
48+
x = (parseFloat(target.getAttribute('data-x')) || 0),
49+
y = (parseFloat(target.getAttribute('data-y')) || 0);
50+
51+
// update the element's style
52+
target.style.width = event.rect.width + 'px';
53+
target.style.height = event.rect.height + 'px';
54+
55+
// translate when resizing from top or left edges
56+
x += event.deltaRect.left;
57+
y += event.deltaRect.top;
58+
59+
target.style.webkitTransform = target.style.transform =
60+
'translate(' + x + 'px,' + y + 'px)';
61+
62+
target.setAttribute('data-x', x);
63+
target.setAttribute('data-y', y);
64+
target.textContent = Math.round(event.rect.width) + '\u00D7' + Math.round(event.rect.height);
65+
});

0 commit comments

Comments
 (0)