Skip to content

Commit fe040dc

Browse files
givanzgivanz
committed
Hover state, inline css switch, removed adjustListsHeight(), enabled drag and drop for sections, moved font list update code to Vvveb.FontsManager.addFontList
1 parent 2f2718f commit fe040dc

File tree

3 files changed

+113
-54
lines changed

3 files changed

+113
-54
lines changed

‎public/js/vvvebjs/builder.js

+94-8
Original file line numberDiff line numberDiff line change
@@ -788,6 +788,16 @@ Vvveb.WysiwygEditor = {
788788
e.preventDefault();
789789
return false;
790790
});
791+
792+
doc.addEventListener('keydown', event => {
793+
if (event.key === 'Enter') {
794+
let target = event.target.closest("[contenteditable]");
795+
if (target) {
796+
doc.execCommand('insertLineBreak');
797+
event.preventDefault();
798+
}
799+
}
800+
})
791801
},
792802

793803
undo: function(element) {
@@ -949,7 +959,7 @@ Vvveb.Builder = {
949959
section = Vvveb.Sections.get(sectionType);
950960

951961
if (section) {
952-
item = generateElements(`<li data-section="${group}" data-type="${sectionType}" data-search="${section.name.toLowerCase()}">
962+
item = generateElements(`<li data-section="${group}" data-drag-type="section" data-type="${sectionType}" data-search="${section.name.toLowerCase()}">
953963
<span class="name">${section.name}</span>
954964
<div class="add-section-btn" title="Add section"><i class="la la-plus"></i></div>
955965
<img class="preview" src="" loading="lazy">
@@ -1215,9 +1225,14 @@ Vvveb.Builder = {
12151225

12161226
Vvveb.component = Vvveb.Components.get(component);
12171227
Vvveb.Components.render(component);
1228+
this.selectedComponent = component;
12181229

12191230
},
12201231

1232+
reloadComponent: function() {
1233+
Vvveb.Components.render(this.selectedComponent);
1234+
},
1235+
12211236
moveNodeUp: function(node) {
12221237
if (!node) {
12231238
node = Vvveb.Builder.selectedEl;
@@ -1440,9 +1455,6 @@ Vvveb.Builder = {
14401455
SelectBox.style.display = "block";
14411456

14421457
} else if (self.isDragging) {
1443-
let parent = self.highlightEl;
1444-
let parentTagName = parent.tagName.toLowerCase();
1445-
14461458
let noChildren = {
14471459
input: true,
14481460
textarea: true,
@@ -1457,6 +1469,16 @@ Vvveb.Builder = {
14571469
wbr: true
14581470
};
14591471

1472+
let parent = self.highlightEl;
1473+
1474+
if (self.dragType == "section") {
1475+
parent = parent.closest("section, header, footer");
1476+
noChildren.section = true;
1477+
}
1478+
1479+
let parentTagName = parent.tagName.toLowerCase();
1480+
1481+
14601482
try {
14611483
if ((pos.top < (y - halfHeight)) || (pos.left < (x - halfWidth))) {
14621484
if (noChildren[parentTagName]) {
@@ -1568,6 +1590,10 @@ Vvveb.Builder = {
15681590
bsTab.show();
15691591
}
15701592

1593+
if (self.dragType == "section") {
1594+
node.scrollIntoView({behavior: "smooth", block: "center", inline: "center"});
1595+
}
1596+
15711597
if (self.dragMoveMutation === false) {
15721598
Vvveb.Undo.addMutation({type: 'childList',
15731599
target: node.parentNode,
@@ -1937,15 +1963,16 @@ Vvveb.Builder = {
19371963

19381964
if (element && event.which == 1) {//left click
19391965
document.getElementById("component-clone")?.remove();
1940-
document.querySelector("#section-actions, #highlight-name, #select-box").style.display = "none";
1966+
document.querySelectorAll("#section-actions, #highlight-name, #select-box").forEach(e => e.style.display = "none");
19411967

1942-
if (element.dataset.dragType == "component") {
1968+
self.dragType = element.dataset.dragType;
1969+
if (self.dragType == "component") {
19431970
self.component = Vvveb.Components.get(element.dataset.type);
19441971
}
1945-
else if (element.dataset.dragType == "section") {
1972+
else if (self.dragType == "section") {
19461973
self.component = Vvveb.Sections.get(element.dataset.type);
19471974
}
1948-
else if (element.dataset.dragType == "block") {
1975+
else if (self.dragType == "block") {
19491976
self.component = Vvveb.Blocks.get(element.dataset.type);
19501977
}
19511978

@@ -2670,6 +2697,11 @@ Vvveb.Gui = {
26702697
}
26712698
wrapper.style.transform = scale;
26722699
wrapper.style.height = height;
2700+
},
2701+
2702+
setState: function () {
2703+
Vvveb.StyleManager.setState(this.value);
2704+
Vvveb.Builder.reloadComponent();
26732705
}
26742706
}
26752707

@@ -2681,6 +2713,9 @@ Vvveb.StyleManager = {
26812713
tabletWidth: '768px',
26822714
doc:false,
26832715
inlineCSS:false,
2716+
currentElement:null,
2717+
currentSelector:null,
2718+
state:"",//hover, active etc
26842719

26852720
init: function(doc) {
26862721
if (doc) {
@@ -2788,6 +2823,14 @@ Vvveb.StyleManager = {
27882823
return selector.reverse().join(" > ");
27892824
},
27902825

2826+
setState: function(state) {
2827+
this.state = state;
2828+
},
2829+
2830+
addSelectorState: function(selector) {
2831+
return selector + (this.state ? ":" + this.state : "");
2832+
},
2833+
27912834
setStyle: function(element, styleProp, value) {
27922835
if (typeof(element) == "string") {
27932836
selector = element;
@@ -2809,6 +2852,8 @@ Vvveb.StyleManager = {
28092852
return element;
28102853
}
28112854

2855+
selector = this.addSelectorState(selector);
2856+
28122857
media = document.getElementById("canvas").classList.contains("tablet") ? "tablet" : document.getElementById("canvas").classList.contains("mobile") ? "mobile" : "desktop";
28132858

28142859
//styles[media][selector][styleProp] = value
@@ -2884,7 +2929,14 @@ Vvveb.StyleManager = {
28842929
let el;
28852930

28862931
el = element;
2932+
if (el != this.currentElement) {
28872933
selector = this.getSelectorForElement(el);
2934+
this.currentElement = el;
2935+
this.currentSelector = selector
2936+
} else {
2937+
selector = this.currentSelector;
2938+
}
2939+
selector = this.addSelectorState(selector);
28882940

28892941
media = document.getElementById("canvas").classList.contains("tablet") ? "tablet" : document.getElementById("canvas").classList.contains("mobile") ? "mobile" : "desktop";
28902942

@@ -3999,6 +4051,38 @@ Vvveb.FontsManager = {
39994051
activeFonts:[],
40004052
providers: {},//{"google":GoogleFontsManager};
40014053

4054+
addFontList: function(provider, groupName, fontList) {
4055+
let fonts = {};
4056+
let fontNames = [];
4057+
4058+
let fontSelect = generateElements("<optgroup label='" + groupName + "'></optgroup>")[0];
4059+
for (font in fontList) {
4060+
fontNames.push({"text":font, "value":font, "data-provider": provider});
4061+
let option = new Option(font, font);
4062+
option.dataset.provider = provider;
4063+
//option.style.setProperty("font-family", font);//font preview if the fonts are loaded in editor
4064+
fontSelect.append(option);
4065+
}
4066+
document.getElementById("font-family").append(fontSelect);
4067+
4068+
let list = Vvveb.Components.getProperty("_base", "font-family");
4069+
if (list) {
4070+
list.onChange = function (node,value, input, component) {
4071+
let option = input.options[input.selectedIndex];
4072+
Vvveb.FontsManager.addFont(option.dataset.provider, value, node);
4073+
return node;
4074+
};
4075+
4076+
list.data.options.push({optgroup:groupName});
4077+
list.data.options = list.data.options.concat(fontNames);
4078+
4079+
Vvveb.Components.updateProperty("_base", "font-family", {data:list.data});
4080+
4081+
//update default font list
4082+
fontList = list.data.options;
4083+
}
4084+
},
4085+
40024086
addProvider: function(provider, Obj) {
40034087
this.providers[provider] = Obj;
40044088
},
@@ -4015,6 +4099,8 @@ Vvveb.FontsManager = {
40154099
},
40164100

40174101
removeFont: function(provider, fontFamily) {
4102+
if (!provider) return;
4103+
40184104
let providerObj = this.providers[provider];
40194105
if (provider!= "default" && providerObj) {
40204106
providerObj.removeFont(fontFamily);

‎public/js/vvvebjs/components-common.js

+17-16
Original file line numberDiff line numberDiff line change
@@ -97,17 +97,31 @@ Vvveb.Components.add("_base", {
9797
col:6,
9898
inputtype: TextInput
9999

100-
}/*, {
100+
}
101+
]
102+
});
103+
104+
//display
105+
Vvveb.Components.extend("_base", "_base", {
106+
properties: [{
107+
key: "display_header",
108+
inputtype: SectionInput,
109+
name:false,
110+
sort: base_sort++,
111+
section: style_section,
112+
data: {header:"Display"},
113+
}, {
101114
name: "State",
102115
key: "state",
103116
sort: base_sort++,
117+
section: style_section,
104118
inline:true,
105119
col:12,
106120
inputtype: SelectInput,
107121
data: {
108122
options: [{
109123
value: "",
110-
text: ""
124+
text: "- none -"
111125
},{
112126
value: "hover",
113127
text: "Hover"
@@ -119,19 +133,6 @@ Vvveb.Components.add("_base", {
119133
text: "Focus"
120134
}]
121135
}
122-
} */
123-
]
124-
});
125-
126-
//display
127-
Vvveb.Components.extend("_base", "_base", {
128-
properties: [{
129-
key: "display_header",
130-
inputtype: SectionInput,
131-
name:false,
132-
sort: base_sort++,
133-
section: style_section,
134-
data: {header:"Display"},
135136
},{
136137
//linked styles notice message
137138
name:"",
@@ -144,7 +145,7 @@ Vvveb.Components.extend("_base", "_base", {
144145
data: {
145146
type:'warning',
146147
title:'Linked styles',
147-
text:'This element shares styles with other <a class="linked-elements-hover" href="#"><b class="elements-count">4</b> elements</a>, to apply styles <b>only for this element</b> enter a <b>unique id</b> eg: <i>marketing-heading</i> in in <br/><a class="id-input" href="#content-tab" role="tab" aria-controls="components" aria-selected="false" href="#content-tab">Content > General > Id</a>.<br/><span class="text-muted small"></span>',
148+
text:'This element shares styles with other <a class="linked-elements-hover" href="javascript:void()"><b class="elements-count">4</b> elements</a>, to apply styles <b>only for this element</b> enter a <b>unique id</b> eg: <i>marketing-heading</i> in in <br/><a class="id-input" href="#content-tab" role="tab" aria-controls="components" aria-selected="false" href="#content-tab">Content > General > Id</a>.<br/><span class="text-muted small"></span>',
148149
},
149150
afterInit:function(node, inputElement) {
150151
let selector = Vvveb.StyleManager.getSelectorForElement(node);

‎public/js/vvvebjs/plugin-google-fonts.js

+2-30
Original file line numberDiff line numberDiff line change
@@ -42,37 +42,9 @@ fetch(Vvveb.baseUrl + "../../resources/google-fonts.json")
4242
return response.json()
4343
})
4444
.then((data) => {
45-
//let json = JSON.parse(data);
46-
googleFonts = data ;
47-
48-
let fontSelect = generateElements("<optgroup label='Google Fonts'></optgroup>")[0];
49-
for (font in googleFonts) {
50-
googlefontNames.push({"text":font, "value":font, "data-provider": "google"});
51-
let option = new Option(font, font);
52-
option.dataset.provider = "google";
53-
//option.style.setProperty("font-family", font);
54-
fontSelect.append(option);
55-
}
56-
document.getElementById("font-family").append(fontSelect);
57-
58-
let list = Vvveb.Components.getProperty("_base", "font-family");
59-
if (list) {
60-
list.onChange = function (node,value, input, component) {
61-
let option = input.options[input.selectedIndex];
62-
Vvveb.FontsManager.addFont(option.dataset.provider, value, node);
63-
return node;
64-
};
65-
66-
list.data.options.push({optgroup:"Google Fonts"});
67-
list.data.options = list.data.options.concat(googlefontNames);
68-
69-
Vvveb.Components.updateProperty("_base", "font-family", {data:list.data});
70-
71-
//update default font list
72-
fontList = list.data.options;
73-
}
45+
Vvveb.FontsManager.addFontList("google", "Google Fonts", data);
7446
})
7547
.catch(error => {
7648
console.log(error.statusText);
7749
displayToast("bg-danger", "Error", "Error loading google fonts!");
78-
});
50+
});

0 commit comments

Comments
 (0)