Skip to content

Commit

Permalink
Update Version 1.0.3
Browse files Browse the repository at this point in the history
  • Loading branch information
@JaJuMa
JaJuMa committed Feb 6, 2024
1 parent be29fc1 commit 6792e48
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 86 deletions.
2 changes: 1 addition & 1 deletion composer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"description": "JaJuMa Syntax Highlighter 4 Page Builder for Magento 2",
"type": "magento2-module",
"license": "MIT",
"version": "1.0.2",
"version": "1.0.3",
"authors": [
{
"email": "info@jajuma.de",
Expand Down
2 changes: 1 addition & 1 deletion etc/adminhtml/system.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<b>Syntax Highlighter for Page Builder</b> by <a href="https://www.jajuma.de/en"
target="_blank"><b>JaJuMa</b></a>
</div>
<div class="jjme-version">Installed Version: <b>1.0.2</b></div>
<div class="jjme-version">Installed Version: <b>1.0.3</b></div>
</div>
<div class="jjme-more-about-extension">
<div class="jjme-more-info">
Expand Down
179 changes: 118 additions & 61 deletions view/adminhtml/templates/init.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,12 @@ $themeList = $helperData->getThemes();
preElm.style.top = codeInputElm.offsetTop+'px';
preElm.style.left = codeInputElm.offsetLeft+'px';
preElm.style.height = codeInputElm.offsetHeight+'px';
preElm.style.width = codeInputElm.offsetWidth+'px';
preElm.style.width = (codeInputElm.offsetWidth+15)+'px';
preElm.style.resize = 'both';

parentElm.appendChild(preElm);
updateSyntax(textArea);
updateTheme();

textArea.addEventListener('scroll', function() {
syncScroll(textArea);
Expand All @@ -84,13 +86,61 @@ $themeList = $helperData->getThemes();
syncScroll(textArea);
});

textArea.addEventListener('mousemove', function () {
textArea.addEventListener('mousemove', function() {
hoverBraces(textArea, event);
});

textArea.addEventListener('click', function () {
textArea.addEventListener('click', function() {
hoverBraces(textArea, event);
});

//resize function
let isResize = 0;
preElm.addEventListener('mousedown', function() {
if (event.which !== 1) {
return;
}

let elementPosition = preElm.getBoundingClientRect();
let elementX = elementPosition.width + elementPosition.left;
let elementY = elementPosition.height + elementPosition.top;

let currentPointX = event.x;
let currentPointY = event.y;

if ((elementX-16 <= currentPointX)
&& (currentPointX <= elementX)
&& (elementY-16 <= currentPointY)
&& (currentPointY <= elementY)
) {
textArea.style.display = 'none';
isResize = 1;
}
});

window.addEventListener('mousemove', function() {
if (!isResize) {
return;
}

codeInputElm.style.width = (preElm.offsetWidth - 15)+'px';
codeInputElm.style.height = preElm.offsetHeight+'px';
textArea.style.width = preElm.offsetWidth+'px';
textArea.style.height = preElm.offsetHeight+'px';
});

preElm.addEventListener('mouseup', function() {
if (!isResize) {
return;
}

isResize = 0;
textArea.style.display = 'block';
codeInputElm.style.width = (preElm.offsetWidth - 15)+'px';
codeInputElm.style.height = preElm.offsetHeight+'px';
textArea.style.width = preElm.offsetWidth+'px';
textArea.style.height = preElm.offsetHeight+'px';
});
}

function updateSyntax(element) {
Expand All @@ -106,8 +156,6 @@ $themeList = $helperData->getThemes();
return;
}

this.updateTheme();

let codes = preElement.getElementsByTagName('code');
if (codes.length) {
let result_element = codes[0];
Expand All @@ -120,20 +168,10 @@ $themeList = $helperData->getThemes();
}
}

function updateTheme() {
let theme = window.syntaxHighlighter.theme;
let links = document.querySelectorAll('link');
for (let i = 0; i < links.length; i++) {
let link = links[i];
let href = link.href;
if (href.includes('Jajuma_SyntaxHighlighter/css/themes/')) {
let hrefArr = href.split('/');
let currentTheme = hrefArr[hrefArr.length - 1];
let newTheme = theme + '.css';
link.href = href.replace('/css/themes/' + currentTheme, '/css/themes/' + newTheme);
return;
}
}
function updateSyntaxOnChange(element)
{
updateSyntax(element);
syncScroll(element);
}

function syncScroll(element) {
Expand All @@ -146,9 +184,12 @@ $themeList = $helperData->getThemes();
if (preElement.classList.contains('jajuma-syntax-highlighter-highlighting') === false) {
return;
}
let result_element = preElement;
result_element.scrollTop = element.scrollTop;
result_element.scrollLeft = element.scrollLeft;

if (preElement.scrollHeight <= preElement.clientHeight) {
element.style.width = (preElement.offsetWidth - 15)+'px';
}
preElement.scrollTop = element.scrollTop;
preElement.scrollLeft = element.scrollLeft;
}

function checkTab(element, event) {
Expand Down Expand Up @@ -206,45 +247,6 @@ $themeList = $helperData->getThemes();
updateSyntax(input_element);
}

function changeTheme(element) {
let theme = element.value;
let links = document.querySelectorAll('link');
for (let i = 0; i < links.length; i++) {
let link = links[i];
let href = link.href;
if (href.includes('Jajuma_SyntaxHighlighter/css/themes/')) {
let hrefArr = href.split('/');
let currentTheme = hrefArr[hrefArr.length - 1];
let newTheme = theme + '.css';
link.href = href.replace('/css/themes/' + currentTheme, '/css/themes/' + newTheme);
return;
}
}
}

function addPlugin(element, plugin) {
let toolbarElement = element.parentElement.parentElement;
let nextElement = toolbarElement.nextElementSibling;
if (nextElement.classList.contains('jajuma-highlight-editor') === false) {
return;
}

let parentElm = nextElement.parentElement;
let preElement = parentElm.querySelector('pre');
if (!preElement) {
return;
}

if (element.checked === false) {
preElement.classList.remove(plugin);
} else {
if (preElement.classList.contains(plugin)) {
return;
}
preElement.classList.add(plugin);
}
}

var curElem = null;
function hoverBraces(element, event) {
let x, y;
Expand Down Expand Up @@ -297,6 +299,61 @@ $themeList = $helperData->getThemes();
element.dispatchEvent(event);
}

function updateTheme() {
let theme = window.syntaxHighlighter.theme;
let links = document.querySelectorAll('link');
for (let i = 0; i < links.length; i++) {
let link = links[i];
let href = link.href;
if (href.includes('Jajuma_SyntaxHighlighter/css/themes/')) {
let hrefArr = href.split('/');
let currentTheme = hrefArr[hrefArr.length - 1];
let newTheme = theme + '.css';
link.href = href.replace('/css/themes/' + currentTheme, '/css/themes/' + newTheme);
return;
}
}
}

function addPlugin(element, plugin) {
let toolbarElement = element.parentElement.parentElement;
let nextElement = toolbarElement.nextElementSibling;
if (nextElement.classList.contains('jajuma-highlight-editor') === false) {
return;
}

let parentElm = nextElement.parentElement;
let preElement = parentElm.querySelector('pre');
if (!preElement) {
return;
}

if (element.checked === false) {
preElement.classList.remove(plugin);
} else {
if (preElement.classList.contains(plugin)) {
return;
}
preElement.classList.add(plugin);
}
}

function changeTheme(element) {
let theme = element.value;
let links = document.querySelectorAll('link');
for (let i = 0; i < links.length; i++) {
let link = links[i];
let href = link.href;
if (href.includes('Jajuma_SyntaxHighlighter/css/themes/')) {
let hrefArr = href.split('/');
let currentTheme = hrefArr[hrefArr.length - 1];
let newTheme = theme + '.css';
link.href = href.replace('/css/themes/' + currentTheme, '/css/themes/' + newTheme);
return;
}
}
}

window.openThemeListModal = () => {
require([
"jquery",
Expand Down
26 changes: 5 additions & 21 deletions view/adminhtml/web/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,27 +219,11 @@
.jajuma-highlight-editor {
position: relative;
display: block;
width: 100%;
max-width: 100%;
width: calc(100% - 15px);
min-height: 500px;
resize: none;
}

.jajuma-syntax-highlighter-editing,
.jajuma-syntax-highlighter-highlighting {
margin: 10px;
padding: 10px;
border: 0;
width: calc(100% - 32px);
height: 150px;
}

/*.jajuma-syntax-highlighter-editing, .jajuma-syntax-highlighter-highlighting, .jajuma-syntax-highlighter-highlighting * {
font-size: 15pt;
font-family: monospace;
line-height: 1.5;
tab-size: 2;
}*/

.jajuma-highlight-editor .jajuma-syntax-highlighter-editing {
position: absolute;
top: 0;
Expand All @@ -248,8 +232,8 @@
background: transparent;
caret-color: white;
z-index: 1;
resize: vertical;
width: 100%;
resize: none;
width: calc(100% + 15px);
height: 100%;
margin: 0;
padding-left: 50px !important;
Expand Down Expand Up @@ -297,7 +281,7 @@ code-input {
/* Normal inline styles */
padding: 8px;
margin: 0!important;
width: calc(100% - 16px);
width: calc(100% - 15px);
height: 250px;
font-size: normal;
font-family: monospace;
Expand Down
4 changes: 2 additions & 2 deletions view/adminhtml/web/template/form/element/html-code.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@
</button>
</div>

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

0 comments on commit 6792e48

Please sign in to comment.