Skip to content

Commit 6792e48

Browse files
JaJuMaJaJuMa
committed
Update Version 1.0.3
1 parent be29fc1 commit 6792e48

File tree

5 files changed

+127
-86
lines changed

5 files changed

+127
-86
lines changed

‎composer.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"description": "JaJuMa Syntax Highlighter 4 Page Builder for Magento 2",
44
"type": "magento2-module",
55
"license": "MIT",
6-
"version": "1.0.2",
6+
"version": "1.0.3",
77
"authors": [
88
{
99
"email": "[email protected]",

‎etc/adminhtml/system.xml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
<b>Syntax Highlighter for Page Builder</b> by <a href="https://www.jajuma.de/en"
3636
target="_blank"><b>JaJuMa</b></a>
3737
</div>
38-
<div class="jjme-version">Installed Version: <b>1.0.2</b></div>
38+
<div class="jjme-version">Installed Version: <b>1.0.3</b></div>
3939
</div>
4040
<div class="jjme-more-about-extension">
4141
<div class="jjme-more-info">

‎view/adminhtml/templates/init.phtml

Lines changed: 118 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,12 @@ $themeList = $helperData->getThemes();
6565
preElm.style.top = codeInputElm.offsetTop+'px';
6666
preElm.style.left = codeInputElm.offsetLeft+'px';
6767
preElm.style.height = codeInputElm.offsetHeight+'px';
68-
preElm.style.width = codeInputElm.offsetWidth+'px';
68+
preElm.style.width = (codeInputElm.offsetWidth+15)+'px';
69+
preElm.style.resize = 'both';
6970

7071
parentElm.appendChild(preElm);
7172
updateSyntax(textArea);
73+
updateTheme();
7274

7375
textArea.addEventListener('scroll', function() {
7476
syncScroll(textArea);
@@ -84,13 +86,61 @@ $themeList = $helperData->getThemes();
8486
syncScroll(textArea);
8587
});
8688

87-
textArea.addEventListener('mousemove', function () {
89+
textArea.addEventListener('mousemove', function() {
8890
hoverBraces(textArea, event);
8991
});
9092

91-
textArea.addEventListener('click', function () {
93+
textArea.addEventListener('click', function() {
9294
hoverBraces(textArea, event);
9395
});
96+
97+
//resize function
98+
let isResize = 0;
99+
preElm.addEventListener('mousedown', function() {
100+
if (event.which !== 1) {
101+
return;
102+
}
103+
104+
let elementPosition = preElm.getBoundingClientRect();
105+
let elementX = elementPosition.width + elementPosition.left;
106+
let elementY = elementPosition.height + elementPosition.top;
107+
108+
let currentPointX = event.x;
109+
let currentPointY = event.y;
110+
111+
if ((elementX-16 <= currentPointX)
112+
&& (currentPointX <= elementX)
113+
&& (elementY-16 <= currentPointY)
114+
&& (currentPointY <= elementY)
115+
) {
116+
textArea.style.display = 'none';
117+
isResize = 1;
118+
}
119+
});
120+
121+
window.addEventListener('mousemove', function() {
122+
if (!isResize) {
123+
return;
124+
}
125+
126+
codeInputElm.style.width = (preElm.offsetWidth - 15)+'px';
127+
codeInputElm.style.height = preElm.offsetHeight+'px';
128+
textArea.style.width = preElm.offsetWidth+'px';
129+
textArea.style.height = preElm.offsetHeight+'px';
130+
});
131+
132+
preElm.addEventListener('mouseup', function() {
133+
if (!isResize) {
134+
return;
135+
}
136+
137+
isResize = 0;
138+
textArea.style.display = 'block';
139+
codeInputElm.style.width = (preElm.offsetWidth - 15)+'px';
140+
codeInputElm.style.height = preElm.offsetHeight+'px';
141+
textArea.style.width = preElm.offsetWidth+'px';
142+
textArea.style.height = preElm.offsetHeight+'px';
143+
});
94144
}
95145

96146
function updateSyntax(element) {
@@ -106,8 +156,6 @@ $themeList = $helperData->getThemes();
106156
return;
107157
}
108158

109-
this.updateTheme();
110-
111159
let codes = preElement.getElementsByTagName('code');
112160
if (codes.length) {
113161
let result_element = codes[0];
@@ -120,20 +168,10 @@ $themeList = $helperData->getThemes();
120168
}
121169
}
122170

123-
function updateTheme() {
124-
let theme = window.syntaxHighlighter.theme;
125-
let links = document.querySelectorAll('link');
126-
for (let i = 0; i < links.length; i++) {
127-
let link = links[i];
128-
let href = link.href;
129-
if (href.includes('Jajuma_SyntaxHighlighter/css/themes/')) {
130-
let hrefArr = href.split('/');
131-
let currentTheme = hrefArr[hrefArr.length - 1];
132-
let newTheme = theme + '.css';
133-
link.href = href.replace('/css/themes/' + currentTheme, '/css/themes/' + newTheme);
134-
return;
135-
}
136-
}
171+
function updateSyntaxOnChange(element)
172+
{
173+
updateSyntax(element);
174+
syncScroll(element);
137175
}
138176

139177
function syncScroll(element) {
@@ -146,9 +184,12 @@ $themeList = $helperData->getThemes();
146184
if (preElement.classList.contains('jajuma-syntax-highlighter-highlighting') === false) {
147185
return;
148186
}
149-
let result_element = preElement;
150-
result_element.scrollTop = element.scrollTop;
151-
result_element.scrollLeft = element.scrollLeft;
187+
188+
if (preElement.scrollHeight <= preElement.clientHeight) {
189+
element.style.width = (preElement.offsetWidth - 15)+'px';
190+
}
191+
preElement.scrollTop = element.scrollTop;
192+
preElement.scrollLeft = element.scrollLeft;
152193
}
153194

154195
function checkTab(element, event) {
@@ -206,45 +247,6 @@ $themeList = $helperData->getThemes();
206247
updateSyntax(input_element);
207248
}
208249

209-
function changeTheme(element) {
210-
let theme = element.value;
211-
let links = document.querySelectorAll('link');
212-
for (let i = 0; i < links.length; i++) {
213-
let link = links[i];
214-
let href = link.href;
215-
if (href.includes('Jajuma_SyntaxHighlighter/css/themes/')) {
216-
let hrefArr = href.split('/');
217-
let currentTheme = hrefArr[hrefArr.length - 1];
218-
let newTheme = theme + '.css';
219-
link.href = href.replace('/css/themes/' + currentTheme, '/css/themes/' + newTheme);
220-
return;
221-
}
222-
}
223-
}
224-
225-
function addPlugin(element, plugin) {
226-
let toolbarElement = element.parentElement.parentElement;
227-
let nextElement = toolbarElement.nextElementSibling;
228-
if (nextElement.classList.contains('jajuma-highlight-editor') === false) {
229-
return;
230-
}
231-
232-
let parentElm = nextElement.parentElement;
233-
let preElement = parentElm.querySelector('pre');
234-
if (!preElement) {
235-
return;
236-
}
237-
238-
if (element.checked === false) {
239-
preElement.classList.remove(plugin);
240-
} else {
241-
if (preElement.classList.contains(plugin)) {
242-
return;
243-
}
244-
preElement.classList.add(plugin);
245-
}
246-
}
247-
248250
var curElem = null;
249251
function hoverBraces(element, event) {
250252
let x, y;
@@ -297,6 +299,61 @@ $themeList = $helperData->getThemes();
297299
element.dispatchEvent(event);
298300
}
299301

302+
function updateTheme() {
303+
let theme = window.syntaxHighlighter.theme;
304+
let links = document.querySelectorAll('link');
305+
for (let i = 0; i < links.length; i++) {
306+
let link = links[i];
307+
let href = link.href;
308+
if (href.includes('Jajuma_SyntaxHighlighter/css/themes/')) {
309+
let hrefArr = href.split('/');
310+
let currentTheme = hrefArr[hrefArr.length - 1];
311+
let newTheme = theme + '.css';
312+
link.href = href.replace('/css/themes/' + currentTheme, '/css/themes/' + newTheme);
313+
return;
314+
}
315+
}
316+
}
317+
318+
function addPlugin(element, plugin) {
319+
let toolbarElement = element.parentElement.parentElement;
320+
let nextElement = toolbarElement.nextElementSibling;
321+
if (nextElement.classList.contains('jajuma-highlight-editor') === false) {
322+
return;
323+
}
324+
325+
let parentElm = nextElement.parentElement;
326+
let preElement = parentElm.querySelector('pre');
327+
if (!preElement) {
328+
return;
329+
}
330+
331+
if (element.checked === false) {
332+
preElement.classList.remove(plugin);
333+
} else {
334+
if (preElement.classList.contains(plugin)) {
335+
return;
336+
}
337+
preElement.classList.add(plugin);
338+
}
339+
}
340+
341+
function changeTheme(element) {
342+
let theme = element.value;
343+
let links = document.querySelectorAll('link');
344+
for (let i = 0; i < links.length; i++) {
345+
let link = links[i];
346+
let href = link.href;
347+
if (href.includes('Jajuma_SyntaxHighlighter/css/themes/')) {
348+
let hrefArr = href.split('/');
349+
let currentTheme = hrefArr[hrefArr.length - 1];
350+
let newTheme = theme + '.css';
351+
link.href = href.replace('/css/themes/' + currentTheme, '/css/themes/' + newTheme);
352+
return;
353+
}
354+
}
355+
}
356+
300357
window.openThemeListModal = () => {
301358
require([
302359
"jquery",

‎view/adminhtml/web/css/custom.css

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -219,27 +219,11 @@
219219
.jajuma-highlight-editor {
220220
position: relative;
221221
display: block;
222-
width: 100%;
223-
max-width: 100%;
222+
width: calc(100% - 15px);
224223
min-height: 500px;
224+
resize: none;
225225
}
226226

227-
.jajuma-syntax-highlighter-editing,
228-
.jajuma-syntax-highlighter-highlighting {
229-
margin: 10px;
230-
padding: 10px;
231-
border: 0;
232-
width: calc(100% - 32px);
233-
height: 150px;
234-
}
235-
236-
/*.jajuma-syntax-highlighter-editing, .jajuma-syntax-highlighter-highlighting, .jajuma-syntax-highlighter-highlighting * {
237-
font-size: 15pt;
238-
font-family: monospace;
239-
line-height: 1.5;
240-
tab-size: 2;
241-
}*/
242-
243227
.jajuma-highlight-editor .jajuma-syntax-highlighter-editing {
244228
position: absolute;
245229
top: 0;
@@ -248,8 +232,8 @@
248232
background: transparent;
249233
caret-color: white;
250234
z-index: 1;
251-
resize: vertical;
252-
width: 100%;
235+
resize: none;
236+
width: calc(100% + 15px);
253237
height: 100%;
254238
margin: 0;
255239
padding-left: 50px !important;
@@ -297,7 +281,7 @@ code-input {
297281
/* Normal inline styles */
298282
padding: 8px;
299283
margin: 0!important;
300-
width: calc(100% - 16px);
284+
width: calc(100% - 15px);
301285
height: 250px;
302286
font-size: normal;
303287
font-family: monospace;

‎view/adminhtml/web/template/form/element/html-code.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
</button>
7171
</div>
7272

73-
<code-input class="jajuma-highlight-editor line-numbers code-input_registered code-input_pre-element-styled" style="resize: both;overflow: hidden;width: 100%;">
73+
<code-input class="jajuma-highlight-editor line-numbers code-input_registered code-input_pre-element-styled">
7474
<textarea class="jajuma-syntax-highlighter-editing" data-bind="
7575
value: value,
7676
valueUpdate: valueUpdate,
@@ -85,5 +85,5 @@
8585
disabled: disabled,
8686
context_show: addJajumaHighlighter($element)
8787
}"
88-
></textarea>
88+
onchange="updateSyntaxOnChange(this)"></textarea>
8989
</code-input>

0 commit comments

Comments
 (0)