Updated code preview option
This commit is contained in:
parent
1b4a527b70
commit
7d9c0e7619
3 changed files with 19 additions and 7 deletions
6
public/dist/scripts/app-all.js
vendored
6
public/dist/scripts/app-all.js
vendored
|
@ -2404,9 +2404,11 @@ if(target){target=document.getElementById(target);}
|
|||
button.addEventListener('click',function(){var clone=document.createElement(element.tagName);if(element.name){clone.name=element.name;}
|
||||
clone.innerHTML=template;clone.className=element.className;view.render(clone);if(target){target.appendChild(clone);}
|
||||
else{button.parentNode.insertBefore(clone,button);}
|
||||
clone.querySelector('input').focus();Array.prototype.slice.call(clone.querySelectorAll('[data-remove]')).map(function(obj){obj.addEventListener('click',function(){clone.parentNode.removeChild(clone);obj.scrollIntoView({behavior:'smooth'});});});Array.prototype.slice.call(clone.querySelectorAll('[data-up]')).map(function(obj){obj.addEventListener('click',function(){if(clone.previousElementSibling){clone.parentNode.insertBefore(clone,clone.previousElementSibling);obj.scrollIntoView({behavior:'smooth'});}});});Array.prototype.slice.call(clone.querySelectorAll('[data-down]')).map(function(obj){obj.addEventListener('click',function(){if(clone.nextElementSibling){clone.parentNode.insertBefore(clone.nextElementSibling,clone);obj.scrollIntoView({behavior:'smooth'});}});});});element.parentNode.insertBefore(button,element.nextSibling);element.parentNode.removeChild(element);if(first){button.click();}}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-code',controller:function(element){let div=document.createElement('div');let pre=document.createElement('pre');let code=document.createElement('code');let copy=document.createElement('i');div.appendChild(pre);pre.appendChild(code);element.parentNode.appendChild(div);element.parentNode.appendChild(copy);div.className='ide';pre.className='line-numbers';code.className='prism language-json';copy.className='icon-docs copy';copy.title='Copy to Clipboard';copy.addEventListener('click',function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(element);window.getSelection().addRange(range);try{document.execCommand('copy');alerts.add({text:'Copied to clipboard',class:''},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:'error'},3000);}
|
||||
clone.querySelector('input').focus();Array.prototype.slice.call(clone.querySelectorAll('[data-remove]')).map(function(obj){obj.addEventListener('click',function(){clone.parentNode.removeChild(clone);obj.scrollIntoView({behavior:'smooth'});});});Array.prototype.slice.call(clone.querySelectorAll('[data-up]')).map(function(obj){obj.addEventListener('click',function(){if(clone.previousElementSibling){clone.parentNode.insertBefore(clone,clone.previousElementSibling);obj.scrollIntoView({behavior:'smooth'});}});});Array.prototype.slice.call(clone.querySelectorAll('[data-down]')).map(function(obj){obj.addEventListener('click',function(){if(clone.nextElementSibling){clone.parentNode.insertBefore(clone.nextElementSibling,clone);obj.scrollIntoView({behavior:'smooth'});}});});});element.parentNode.insertBefore(button,element.nextSibling);element.parentNode.removeChild(element);if(first){button.click();}}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-code',controller:function(element){let lang=element.dataset['formsCode']||'json';let div=document.createElement('div');let pre=document.createElement('pre');let code=document.createElement('code');let copy=document.createElement('i');div.appendChild(pre);pre.appendChild(code);element.parentNode.appendChild(div);element.parentNode.appendChild(copy);div.className='ide';pre.className='line-numbers';code.className='prism language-'+lang;copy.className='icon-docs copy';copy.title='Copy to Clipboard';copy.addEventListener('click',function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(element);window.getSelection().addRange(range);try{document.execCommand('copy');alerts.add({text:'Copied to clipboard',class:''},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:'error'},3000);}
|
||||
window.getSelection().removeAllRanges();});let check=function(){if(!element.value){return;}
|
||||
let value=JSON.stringify(JSON.parse(element.value),null,4);code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;}
|
||||
let value=null;try{value=JSON.stringify(JSON.parse(element.value),null,4);}
|
||||
catch(error){value=element.value;}
|
||||
code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;}
|
||||
element.addEventListener('change',check);check();}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-color',controller:function(element){var preview=document.createElement('div');var picker=document.createElement('input');picker.type='color';preview.className='color-preview';preview.appendChild(picker);picker.addEventListener('change',syncA);picker.addEventListener('input',syncA);element.addEventListener('input',update);element.addEventListener('change',update);function update(){if(element.validity.valid){preview.style.background=element.value;syncB();}}
|
||||
function syncA(){element.value=picker.value;update();}
|
||||
function syncB(){picker.value=element.value;}
|
||||
|
|
6
public/dist/scripts/app.js
vendored
6
public/dist/scripts/app.js
vendored
|
@ -318,9 +318,11 @@ if(target){target=document.getElementById(target);}
|
|||
button.addEventListener('click',function(){var clone=document.createElement(element.tagName);if(element.name){clone.name=element.name;}
|
||||
clone.innerHTML=template;clone.className=element.className;view.render(clone);if(target){target.appendChild(clone);}
|
||||
else{button.parentNode.insertBefore(clone,button);}
|
||||
clone.querySelector('input').focus();Array.prototype.slice.call(clone.querySelectorAll('[data-remove]')).map(function(obj){obj.addEventListener('click',function(){clone.parentNode.removeChild(clone);obj.scrollIntoView({behavior:'smooth'});});});Array.prototype.slice.call(clone.querySelectorAll('[data-up]')).map(function(obj){obj.addEventListener('click',function(){if(clone.previousElementSibling){clone.parentNode.insertBefore(clone,clone.previousElementSibling);obj.scrollIntoView({behavior:'smooth'});}});});Array.prototype.slice.call(clone.querySelectorAll('[data-down]')).map(function(obj){obj.addEventListener('click',function(){if(clone.nextElementSibling){clone.parentNode.insertBefore(clone.nextElementSibling,clone);obj.scrollIntoView({behavior:'smooth'});}});});});element.parentNode.insertBefore(button,element.nextSibling);element.parentNode.removeChild(element);if(first){button.click();}}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-code',controller:function(element){let div=document.createElement('div');let pre=document.createElement('pre');let code=document.createElement('code');let copy=document.createElement('i');div.appendChild(pre);pre.appendChild(code);element.parentNode.appendChild(div);element.parentNode.appendChild(copy);div.className='ide';pre.className='line-numbers';code.className='prism language-json';copy.className='icon-docs copy';copy.title='Copy to Clipboard';copy.addEventListener('click',function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(element);window.getSelection().addRange(range);try{document.execCommand('copy');alerts.add({text:'Copied to clipboard',class:''},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:'error'},3000);}
|
||||
clone.querySelector('input').focus();Array.prototype.slice.call(clone.querySelectorAll('[data-remove]')).map(function(obj){obj.addEventListener('click',function(){clone.parentNode.removeChild(clone);obj.scrollIntoView({behavior:'smooth'});});});Array.prototype.slice.call(clone.querySelectorAll('[data-up]')).map(function(obj){obj.addEventListener('click',function(){if(clone.previousElementSibling){clone.parentNode.insertBefore(clone,clone.previousElementSibling);obj.scrollIntoView({behavior:'smooth'});}});});Array.prototype.slice.call(clone.querySelectorAll('[data-down]')).map(function(obj){obj.addEventListener('click',function(){if(clone.nextElementSibling){clone.parentNode.insertBefore(clone.nextElementSibling,clone);obj.scrollIntoView({behavior:'smooth'});}});});});element.parentNode.insertBefore(button,element.nextSibling);element.parentNode.removeChild(element);if(first){button.click();}}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-code',controller:function(element){let lang=element.dataset['formsCode']||'json';let div=document.createElement('div');let pre=document.createElement('pre');let code=document.createElement('code');let copy=document.createElement('i');div.appendChild(pre);pre.appendChild(code);element.parentNode.appendChild(div);element.parentNode.appendChild(copy);div.className='ide';pre.className='line-numbers';code.className='prism language-'+lang;copy.className='icon-docs copy';copy.title='Copy to Clipboard';copy.addEventListener('click',function(){window.getSelection().removeAllRanges();let range=document.createRange();range.selectNode(element);window.getSelection().addRange(range);try{document.execCommand('copy');alerts.add({text:'Copied to clipboard',class:''},3000);}catch(err){alerts.add({text:"Failed to copy text ",class:'error'},3000);}
|
||||
window.getSelection().removeAllRanges();});let check=function(){if(!element.value){return;}
|
||||
let value=JSON.stringify(JSON.parse(element.value),null,4);code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;}
|
||||
let value=null;try{value=JSON.stringify(JSON.parse(element.value),null,4);}
|
||||
catch(error){value=element.value;}
|
||||
code.innerHTML=value;Prism.highlightElement(code);div.scrollTop=0;}
|
||||
element.addEventListener('change',check);check();}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-color',controller:function(element){var preview=document.createElement('div');var picker=document.createElement('input');picker.type='color';preview.className='color-preview';preview.appendChild(picker);picker.addEventListener('change',syncA);picker.addEventListener('input',syncA);element.addEventListener('input',update);element.addEventListener('change',update);function update(){if(element.validity.valid){preview.style.background=element.value;syncB();}}
|
||||
function syncA(){element.value=picker.value;update();}
|
||||
function syncB(){picker.value=element.value;}
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
{
|
||||
selector: 'data-forms-code',
|
||||
controller: function(element) {
|
||||
let lang = element.dataset['formsCode'] || 'json';
|
||||
let div = document.createElement('div');
|
||||
let pre = document.createElement('pre');
|
||||
let code = document.createElement('code');
|
||||
|
@ -18,7 +19,7 @@
|
|||
|
||||
div.className = 'ide';
|
||||
pre.className = 'line-numbers';
|
||||
code.className = 'prism language-json';
|
||||
code.className = 'prism language-' + lang;
|
||||
copy.className = 'icon-docs copy';
|
||||
|
||||
copy.title = 'Copy to Clipboard';
|
||||
|
@ -47,8 +48,15 @@
|
|||
return;
|
||||
}
|
||||
|
||||
let value = JSON.stringify(JSON.parse(element.value), null, 4);
|
||||
|
||||
let value = null;
|
||||
|
||||
try {
|
||||
value = JSON.stringify(JSON.parse(element.value), null, 4);
|
||||
}
|
||||
catch(error) {
|
||||
value = element.value;
|
||||
}
|
||||
|
||||
code.innerHTML = value;
|
||||
|
||||
Prism.highlightElement(code);
|
||||
|
|
Loading…
Reference in a new issue