Skip to content

Commit cf9b27f

Browse files
fehmifehmi
committed
update
1 parent 1b038ac commit cf9b27f

File tree

4 files changed

+190
-16
lines changed

4 files changed

+190
-16
lines changed

‎simply-designer/index.html

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<html>
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<style>
6+
.sd-selected {
7+
outline: 1px solid red;
8+
user-select: none;
9+
}
10+
11+
#sd-placeholder {
12+
display: block;
13+
width: 100%;
14+
height: 0px;
15+
outline: 2px solid red;
16+
}
17+
</style>
18+
</head>
19+
20+
<body>
21+
<div>
22+
div
23+
<p>p in a div</p>
24+
</div>
25+
<p>paragraph</p>
26+
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
27+
28+
<div>drop here</div>
29+
30+
<script>
31+
var mousePositionX, mousePositionY, dragging;
32+
document.addEventListener("mousedown", function (e) {
33+
try {
34+
document.querySelector(".sd-selected").classList.remove("sd-selected");
35+
} catch (e) { }
36+
37+
e.target.classList.add("sd-selected");
38+
e.target.setAttribute("draggable", true);
39+
});
40+
41+
document.addEventListener("mouseup", function (e) {
42+
console.log("mouseup");
43+
dragging = false;
44+
e.target.setAttribute("draggable", false);
45+
});
46+
47+
document.addEventListener("dragstart", dragstartHandler);
48+
49+
function dragstartHandler(ev) {
50+
var id = "id" + Math.random().toString(16).slice(2)
51+
ev.target.setAttribute("id", id);
52+
ev.dataTransfer.setData("text/plain", "#" + id);
53+
ev.dataTransfer.dropEffect = "move";
54+
dragging = true;
55+
}
56+
57+
document.addEventListener('drag', function (e) {
58+
// mouse'un konumu bir önceki konumdan farklıysa, yani gerçekten hareket ettiyse
59+
if (e.clientX !== mousePositionX || e.clientY !== mousePositionY) {
60+
// karşılaştırma için son mouse konumunu kaydet
61+
mousePositionX = e.clientX;
62+
mousePositionY = e.clientY;
63+
// mouse'un hangi element üzerinde olduğunu bul
64+
hoveredElement = document.elementFromPoint(e.clientX, e.clientY);
65+
// sürüklenen element kendi üzerinde değilse
66+
if (!hoveredElement.classList.contains('sd-selected')) {
67+
// a div cannot move to its children
68+
/*
69+
aşağıdaki taglar içine taşınamaz
70+
<area> <base> <br> <col> <embed> <hr> <img> <input> <link> <meta> <param> <source> <track> <wbr>
71+
*/
72+
73+
// body ise
74+
if (hoveredElement.tagName.toLowerCase() == "body") {
75+
console.log("drag, dört bir yanı tara", countElementsInsideOf(hoveredElement));
76+
}
77+
else {
78+
if (!hoveredElement.classList.contains('sd-dragover')) {
79+
try {
80+
document.querySelector('#sd-placeholder').remove();
81+
}
82+
catch(e) {}
83+
try {
84+
document.querySelector('.sd-dragover').classList.remove('sd-dragover');
85+
}
86+
catch(e) {}
87+
88+
hoveredElement.classList.add("sd-dragover");
89+
// hover element'e dragover ve drop eventlerini ekliyoruz
90+
// daha önce başka elemente atanmışsa onları siliyoruz
91+
previousDropEl = document.querySelector("[ondrop^=canvasD]");
92+
if (previousDropEl && previousDropEl !== hoveredElement) {
93+
previousDropEl.removeAttribute("ondrop")
94+
previousDropEl.removeAttribute("ondragover");
95+
}
96+
hoveredElement.setAttribute("ondrop", "canvasDropHandler(event)");
97+
hoveredElement.setAttribute("ondragover", "canvasDragoverHandler(event)");
98+
const placeholder = document.createElement("div");
99+
placeholder.id = "sd-placeholder";
100+
hoveredElement.append(placeholder);
101+
102+
console.log("drag", e.clientX, e.clientY, hoveredElement);
103+
}
104+
}
105+
}
106+
}
107+
});
108+
109+
function canvasDragoverHandler(ev) {
110+
ev.preventDefault();
111+
ev.stopPropagation();
112+
113+
//const placeholder = document.createElement("div")
114+
//placeholder.id = "placeholder"
115+
//ev.target.appendChild(placeholder)
116+
console.log("dragover", ev.target)
117+
}
118+
function canvasDropHandler(ev) {
119+
console.log("drop", ev.target);
120+
ev.preventDefault();
121+
const id = ev.dataTransfer.getData("text/plain");
122+
const el = document.querySelector(id);
123+
const placeholder = document.querySelector("#sd-placeholder");
124+
console.log(id, document.querySelector(id))
125+
// ev.target.appendChild(document.querySelector(id));
126+
127+
placeholder.parentElement.insertBefore(el, placeholder);
128+
}
129+
130+
function countElementsInsideOf(el) {
131+
const elementCount = Array.from(el.children).filter(element => {
132+
return (
133+
element.tagName.toLowerCase() !== 'script' &&
134+
element.tagName.toLowerCase() !== 'iframe'
135+
);
136+
}).length;
137+
return elementCount;
138+
}
139+
</script>
140+
</body>
141+
142+
</html>

‎simply.js

Lines changed: 39 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -912,7 +912,7 @@ simply = {
912912
mutations.forEach(function (mutation) {
913913
if (mutation.type === 'attributes') {
914914
var newVal = mutation.target.getAttribute(mutation.attributeName);
915-
console.log(mutation.attributeName, "attribute changed to", newVal);
915+
//console.log(mutation.attributeName, "attribute changed to", newVal);
916916
callback(mutation.attributeName, newVal);
917917

918918
}
@@ -990,29 +990,59 @@ simply = {
990990

991991
}
992992

993+
var proxies = new WeakMap();
994+
993995
if (this.data) {
994996
let handler = {
995-
get: function (obj, prop, r) {
997+
get: function (obj, prop, r) {
998+
996999
// If the property is an array or object
997-
if (typeof obj[prop] === 'object' && !obj[prop]._isProxy) {
998-
return new Proxy(obj[prop], handler);
1000+
if (typeof obj[prop] === 'object') {
1001+
//console.log(proxies, obj[prop], r);
1002+
if (proxies.has(obj[prop])) {
1003+
//console.log("uyy proxy daaa", obj[prop]);
1004+
return proxies.get(obj[prop]);
1005+
}
1006+
else {
1007+
//console.log("obje proxy'e dönüştürüldü", obj, prop);
1008+
let proxy = new Proxy(obj[prop], handler);
1009+
//proxies.add(proxy);
1010+
proxies.set(obj[prop], proxy);
1011+
return proxy;
1012+
}
1013+
9991014
}
10001015
else {
1016+
//console.log("normal get", obj, prop);
10011017
return obj[prop];
10021018
}
10031019
},
10041020
set: function (target, prop, value, receiver) {
1021+
/*
1022+
if (window.ttt && !window.count) {
1023+
window.count = 1;
1024+
console.log(name);
1025+
}
1026+
else if (window.ttt && window.count) {
1027+
window.tt = performance.now();
1028+
alert(`Call to doSomething took ${window.tt - window.ttt} milliseconds.`);
1029+
}
1030+
*/
1031+
if (target[prop] !== value) {
1032+
let old = target[prop];
1033+
//console.log(prop, "changed from ", target[prop], "to", value);
10051034
for (const [key, cb] of Object.entries(self.cb.data)) {
1006-
cb(prop, value);
1035+
cb(prop, value, old);
10071036
//console.log(`${key}: ${value}`);
10081037
}
1038+
}
10091039

10101040
return Reflect.set(...arguments); // Pass through the operation
10111041
},
10121042
deleteProperty: function (target, prop) {
10131043
if (prop in target) {
10141044
delete target[prop];
1015-
console.log(`property removed: ${prop}`);
1045+
//console.log(`property removed: ${prop}`);
10161046
return true;
10171047
// Expected output: "property removed: texture"
10181048
}
@@ -1052,7 +1082,7 @@ simply = {
10521082
deleteProperty: function (target, prop) {
10531083
if (prop in target) {
10541084
delete target[prop];
1055-
console.log(`property removed: ${prop}`);
1085+
//console.log(`property removed: ${prop}`);
10561086
// Expected output: "property removed: texture"
10571087
}
10581088
for (const [key, cb] of Object.entries(self.cb.props)) {
@@ -1089,7 +1119,7 @@ simply = {
10891119
deleteProperty: function (target, prop) {
10901120
if (prop in target) {
10911121
delete target[prop];
1092-
console.log(`property removed: ${prop}`);
1122+
//console.log(`property removed: ${prop}`);
10931123
// Expected output: "property removed: texture"
10941124
}
10951125
for (const [key, cb] of Object.entries(self.cb.state)) {
@@ -1348,7 +1378,6 @@ simply = {
13481378
}
13491379

13501380

1351-
13521381
function morphIt(dom) {
13531382
simply.morphdom(dom, newDomAsString, {
13541383
childrenOnly: true,
@@ -2967,7 +2996,6 @@ simply = {
29672996
};
29682997

29692998
function animate(elem, className) {
2970-
console.log(className);
29712999
elem.classList.add(className);
29723000
return new Promise(function (resolve) {
29733001
if (willAnimate(elem)) {
@@ -4944,7 +4972,7 @@ simply = {
49444972
request.onload = function () {
49454973
if (this.status >= 200 && this.status < 400) {
49464974
string = this.responseText;
4947-
console.log({ string });
4975+
//console.log({ string });
49484976
}
49494977
};
49504978
request.send();

‎simply.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎simply.min.js.map

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

0 commit comments

Comments
 (0)