Fixed database preview pane

app/views/console/comps/header.phtml

@@ -2,7 +2,7 @@
        
     <div class="list pull-start project-only">
         <label>
-            <select data-ls-bind="{{router.params.project}}" data-switch data-ls-loop="projects" data-ls-as="option">
+            <select data-ls-bind="{{console-project.$uid}}" data-switch data-ls-loop="projects" data-ls-as="option">
                 <option data-ls-attrs="value={{option.$uid}}" data-ls-bind="{{option.name}}"></option>
             </select>
         </label>

app/views/console/database/index.phtml

@@ -248,9 +248,7 @@ use Utopia\Locale\Locale;
                     </div>
                     
                     <div class="code">
-                        <div class="ide margin-bottom-no">
-                            <pre class="line-numbers"><code class="prism language-javascript" data-ls-bind="{{project-document}}" data-prism></code></pre>
-                        </div>
+                        <input type="hidden" data-forms-code data-ls-bind="{{project-document}}" />
                     </div>
                 </div>
             </div>

app/views/console/home/index.phtml

@@ -28,8 +28,7 @@ $graph = $this->getParam('graph', false);
             data-service="projects.getProjectUsage"
             data-event="load"
             data-name="usage"
-            data-param-project-id="{{router.params.project}}"
-            xdata-scope="console">
+            data-param-project-id="{{router.params.project}}">
 
             <?php if (!$graph) : ?>
                 <div class="row responsive">

gulpfile.js

@@ -35,6 +35,7 @@ const configApp  = {
         'public/scripts/views/analytics/pageview.js',
 
         'public/scripts/views/forms/clone.js',
+        'public/scripts/views/forms/code.js',
         'public/scripts/views/forms/color.js',
         'public/scripts/views/forms/copy.js',
         'public/scripts/views/forms/filter.js',

public/dist/scripts/app-all.js

@@ -2200,7 +2200,7 @@ if(bind){element.addEventListener('change',()=>{for(let i=0;i<paths.length;i++){
 if(!element.checked&&index>-1){value.splice(index,1);}
 container.path(paths[i],value,$as,$prefix);}});}
 return;}
-if(element.value!==value){element.value=value;}
+if(element.value!==value){element.value=value;element.dispatchEvent(new Event('change'));}
 if(bind){element.addEventListener('input',sync);element.addEventListener('change',sync);}}
 else{if(element.innerText!==value){element.innerHTML=value;}}};let sync=((as,prefix)=>{return()=>{for(let i=0;i<paths.length;i++){container.path(paths[i],element.value,as,prefix);}}})($as,$prefix);let syntax=element.getAttribute('data-ls-bind');let result=expression.parse(syntax,null,$as,$prefix);let paths=expression.getPaths();echo(result,true);element.addEventListener('looped',function(){echo(expression.parse(syntax,null,$as,$prefix),false);});for(let i=0;i<paths.length;i++){let path=paths[i].split('.');while(path.length){container.bind(element,path.join('.'),()=>{echo(expression.parse(syntax,null,$as,$prefix),false);});path.pop();}}}});window.ls.container.get('view').add({selector:'data-ls-if',controller:function(element,expression,container,view,$as,$prefix){let result='';let syntax=element.getAttribute('data-ls-if')||'';let debug=element.getAttribute('data-debug')||false;let paths=[];let check=()=>{if(debug){console.info('debug-ls-if',expression.parse(syntax.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true));}
 try{result=(eval(expression.parse(syntax.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true)));}
@@ -2410,7 +2410,10 @@ 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-color',repeat:false,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();}}
+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-javascript';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;}
+element.addEventListener('change',check);check();}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-color',repeat:false,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;}
 element.parentNode.insertBefore(preview,element);update();syncB();}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-copy',controller:function(element,alerts,document,window){var button=window.document.createElement('i');button.type='button';button.className='icon-docs note copy';button.style.cursor='pointer';element.parentNode.insertBefore(button,element.nextSibling);var copy=function(event){window.getSelection().removeAllRanges();var 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);}
@@ -2448,7 +2451,9 @@ output[output.length]=obj['$uid'];});onComplete(message);render(output);},functi
 output=(multiple)?JSON.parse(element.value):[element.value];render(output);});upload.addEventListener('keypress',function(){input.click();});element.parentNode.insertBefore(wrapper,element);wrapper.appendChild(preview);wrapper.appendChild(progress);wrapper.appendChild(upload);if(multiple){wrapper.appendChild(count);}
 upload.appendChild(input);render(output);}});})(window);(function(window){"use strict";window.ls.view.add({selector:'data-general-oauth',repeat:false,controller:function(element,env,expression){let provider=expression.parse(element.dataset['authOauth']||'');let success=expression.parse(element.dataset['success']||'');let failure=expression.parse(element.dataset['failure']||'');element.href=env.API+'/oauth/'+provider+'?project='+env.PROJECT
 +'&success='+encodeURIComponent(success)
-+'&failure='+encodeURIComponent(failure);}});})(window);(function(window){window.ls.container.get('view').add({'selector':'data-page-title','repeat':true,'controller':function(element,document,expression){document.title=expression.parse(element.getAttribute('data-page-title'))||document.title;}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-setup',controller:function(element,console,form){element.addEventListener('submit',function(event){event.preventDefault();let formData=form.toJson(element);formData['name']=formData['name']||(element.dataset['defaultName']||'');console.teams.createTeam(formData['name']||'').then(function(data){let team=data['$uid'];formData=JSON.parse(JSON.stringify(formData).replace(new RegExp('{{teamId}}','g'),team));console.projects.createProject(formData['name'],team).then(function(project){window.location.href='/console?project='+project['$uid'];},function(){throw new Error('Failed to setup project');});},function(){throw new Error('Setup failed creating project team');});})}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-switch',controller:function(element,router,document){element.addEventListener('change',function(){return router.change('/console/home?project='+element.value);});}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-paging-back',controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset['offset'])||'0');paths=paths.concat(expression.getPaths());if((offset-limit)<0){element.disabled=true;}
++'&failure='+encodeURIComponent(failure);}});})(window);(function(window){window.ls.container.get('view').add({'selector':'data-page-title','repeat':true,'controller':function(element,document,expression){document.title=expression.parse(element.getAttribute('data-page-title'))||document.title;}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-setup',controller:function(element,console,form){element.addEventListener('submit',function(event){event.preventDefault();let formData=form.toJson(element);formData['name']=formData['name']||(element.dataset['defaultName']||'');console.teams.createTeam(formData['name']||'').then(function(data){let team=data['$uid'];formData=JSON.parse(JSON.stringify(formData).replace(new RegExp('{{teamId}}','g'),team));console.projects.createProject(formData['name'],team).then(function(project){window.location.href='/console?project='+project['$uid'];},function(){throw new Error('Failed to setup project');});},function(){throw new Error('Setup failed creating project team');});})}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-switch',controller:function(element,router,document){element.addEventListener('change',function(){if(!element.value){return;}
+console.log('change route',element.value);if(element.value===router.params.project){return;}
+return router.change('/console/home?project='+element.value);});}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-paging-back',controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset['offset'])||'0');paths=paths.concat(expression.getPaths());if((offset-limit)<0){element.disabled=true;}
 else{element.disabled=false;element.value=offset-limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split('.');while(path.length){container.bind(element,path.join('.'),check);path.pop();}}}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-paging-next',controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset['offset'])||'0');paths=paths.concat(expression.getPaths());let sum=parseInt(expression.parse(element.dataset['sum'])||'0');paths=paths.concat(expression.getPaths());if((offset+limit)>=sum){element.disabled=true;}
 else{element.disabled=false;element.value=offset+limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split('.');while(path.length){container.bind(element,path.join('.'),check);path.pop();}}}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-highlight',controller:function(element,expression,document){let check=function(){let links=element.getElementsByTagName('a');let selected=null;let list=[];for(let i=0;i<links.length;i++){links[i].href=links[i].href||expression.parse(links[i].dataset['lsHref']||'');list.push(links[i]);}
 list.sort(function(a,b){return a.pathname.length-b.pathname.length;});for(let i=0;i<list.length;i++){if(list[i].pathname===window.location.pathname.substring(0,list[i].pathname.length)){list[i].classList.add('selected');if(selected!==null){list[selected].classList.remove('selected');}

public/dist/scripts/app.js

@@ -107,7 +107,7 @@ if(bind){element.addEventListener('change',()=>{for(let i=0;i<paths.length;i++){
 if(!element.checked&&index>-1){value.splice(index,1);}
 container.path(paths[i],value,$as,$prefix);}});}
 return;}
-if(element.value!==value){element.value=value;}
+if(element.value!==value){element.value=value;element.dispatchEvent(new Event('change'));}
 if(bind){element.addEventListener('input',sync);element.addEventListener('change',sync);}}
 else{if(element.innerText!==value){element.innerHTML=value;}}};let sync=((as,prefix)=>{return()=>{for(let i=0;i<paths.length;i++){container.path(paths[i],element.value,as,prefix);}}})($as,$prefix);let syntax=element.getAttribute('data-ls-bind');let result=expression.parse(syntax,null,$as,$prefix);let paths=expression.getPaths();echo(result,true);element.addEventListener('looped',function(){echo(expression.parse(syntax,null,$as,$prefix),false);});for(let i=0;i<paths.length;i++){let path=paths[i].split('.');while(path.length){container.bind(element,path.join('.'),()=>{echo(expression.parse(syntax,null,$as,$prefix),false);});path.pop();}}}});window.ls.container.get('view').add({selector:'data-ls-if',controller:function(element,expression,container,view,$as,$prefix){let result='';let syntax=element.getAttribute('data-ls-if')||'';let debug=element.getAttribute('data-debug')||false;let paths=[];let check=()=>{if(debug){console.info('debug-ls-if',expression.parse(syntax.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true));}
 try{result=(eval(expression.parse(syntax.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true)));}
@@ -317,7 +317,10 @@ 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-color',repeat:false,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();}}
+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-javascript';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;}
+element.addEventListener('change',check);check();}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-color',repeat:false,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;}
 element.parentNode.insertBefore(preview,element);update();syncB();}});})(window);(function(window){"use strict";window.ls.container.get('view').add({selector:'data-forms-copy',controller:function(element,alerts,document,window){var button=window.document.createElement('i');button.type='button';button.className='icon-docs note copy';button.style.cursor='pointer';element.parentNode.insertBefore(button,element.nextSibling);var copy=function(event){window.getSelection().removeAllRanges();var 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);}
@@ -355,7 +358,9 @@ output[output.length]=obj['$uid'];});onComplete(message);render(output);},functi
 output=(multiple)?JSON.parse(element.value):[element.value];render(output);});upload.addEventListener('keypress',function(){input.click();});element.parentNode.insertBefore(wrapper,element);wrapper.appendChild(preview);wrapper.appendChild(progress);wrapper.appendChild(upload);if(multiple){wrapper.appendChild(count);}
 upload.appendChild(input);render(output);}});})(window);(function(window){"use strict";window.ls.view.add({selector:'data-general-oauth',repeat:false,controller:function(element,env,expression){let provider=expression.parse(element.dataset['authOauth']||'');let success=expression.parse(element.dataset['success']||'');let failure=expression.parse(element.dataset['failure']||'');element.href=env.API+'/oauth/'+provider+'?project='+env.PROJECT
 +'&success='+encodeURIComponent(success)
-+'&failure='+encodeURIComponent(failure);}});})(window);(function(window){window.ls.container.get('view').add({'selector':'data-page-title','repeat':true,'controller':function(element,document,expression){document.title=expression.parse(element.getAttribute('data-page-title'))||document.title;}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-setup',controller:function(element,console,form){element.addEventListener('submit',function(event){event.preventDefault();let formData=form.toJson(element);formData['name']=formData['name']||(element.dataset['defaultName']||'');console.teams.createTeam(formData['name']||'').then(function(data){let team=data['$uid'];formData=JSON.parse(JSON.stringify(formData).replace(new RegExp('{{teamId}}','g'),team));console.projects.createProject(formData['name'],team).then(function(project){window.location.href='/console?project='+project['$uid'];},function(){throw new Error('Failed to setup project');});},function(){throw new Error('Setup failed creating project team');});})}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-switch',controller:function(element,router,document){element.addEventListener('change',function(){return router.change('/console/home?project='+element.value);});}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-paging-back',controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset['offset'])||'0');paths=paths.concat(expression.getPaths());if((offset-limit)<0){element.disabled=true;}
++'&failure='+encodeURIComponent(failure);}});})(window);(function(window){window.ls.container.get('view').add({'selector':'data-page-title','repeat':true,'controller':function(element,document,expression){document.title=expression.parse(element.getAttribute('data-page-title'))||document.title;}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-setup',controller:function(element,console,form){element.addEventListener('submit',function(event){event.preventDefault();let formData=form.toJson(element);formData['name']=formData['name']||(element.dataset['defaultName']||'');console.teams.createTeam(formData['name']||'').then(function(data){let team=data['$uid'];formData=JSON.parse(JSON.stringify(formData).replace(new RegExp('{{teamId}}','g'),team));console.projects.createProject(formData['name'],team).then(function(project){window.location.href='/console?project='+project['$uid'];},function(){throw new Error('Failed to setup project');});},function(){throw new Error('Setup failed creating project team');});})}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-switch',controller:function(element,router,document){element.addEventListener('change',function(){if(!element.value){return;}
+console.log('change route',element.value);if(element.value===router.params.project){return;}
+return router.change('/console/home?project='+element.value);});}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-paging-back',controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset['offset'])||'0');paths=paths.concat(expression.getPaths());if((offset-limit)<0){element.disabled=true;}
 else{element.disabled=false;element.value=offset-limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split('.');while(path.length){container.bind(element,path.join('.'),check);path.pop();}}}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-paging-next',controller:function(element,container,expression,env){let paths=[];let limit=env.PAGING_LIMIT;let check=function(){let offset=parseInt(expression.parse(element.dataset['offset'])||'0');paths=paths.concat(expression.getPaths());let sum=parseInt(expression.parse(element.dataset['sum'])||'0');paths=paths.concat(expression.getPaths());if((offset+limit)>=sum){element.disabled=true;}
 else{element.disabled=false;element.value=offset+limit;}};check();for(let i=0;i<paths.length;i++){let path=paths[i].split('.');while(path.length){container.bind(element,path.join('.'),check);path.pop();}}}});})(window);(function(window){window.ls.container.get('view').add({selector:'data-ui-highlight',controller:function(element,expression,document){let check=function(){let links=element.getElementsByTagName('a');let selected=null;let list=[];for(let i=0;i<links.length;i++){links[i].href=links[i].href||expression.parse(links[i].dataset['lsHref']||'');list.push(links[i]);}
 list.sort(function(a,b){return a.pathname.length-b.pathname.length;});for(let i=0;i<list.length;i++){if(list[i].pathname===window.location.pathname.substring(0,list[i].pathname.length)){list[i].classList.add('selected');if(selected!==null){list[selected].classList.remove('selected');}

public/scripts/dependencies/litespeed.js

@@ -107,7 +107,7 @@ if(bind){element.addEventListener('change',()=>{for(let i=0;i<paths.length;i++){
 if(!element.checked&&index>-1){value.splice(index,1);}
 container.path(paths[i],value,$as,$prefix);}});}
 return;}
-if(element.value!==value){element.value=value;}
+if(element.value!==value){element.value=value;element.dispatchEvent(new Event('change'));}
 if(bind){element.addEventListener('input',sync);element.addEventListener('change',sync);}}
 else{if(element.innerText!==value){element.innerHTML=value;}}};let sync=((as,prefix)=>{return()=>{for(let i=0;i<paths.length;i++){container.path(paths[i],element.value,as,prefix);}}})($as,$prefix);let syntax=element.getAttribute('data-ls-bind');let result=expression.parse(syntax,null,$as,$prefix);let paths=expression.getPaths();echo(result,true);element.addEventListener('looped',function(){echo(expression.parse(syntax,null,$as,$prefix),false);});for(let i=0;i<paths.length;i++){let path=paths[i].split('.');while(path.length){container.bind(element,path.join('.'),()=>{echo(expression.parse(syntax,null,$as,$prefix),false);});path.pop();}}}});window.ls.container.get('view').add({selector:'data-ls-if',controller:function(element,expression,container,view,$as,$prefix){let result='';let syntax=element.getAttribute('data-ls-if')||'';let debug=element.getAttribute('data-debug')||false;let paths=[];let check=()=>{if(debug){console.info('debug-ls-if',expression.parse(syntax.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true));}
 try{result=(eval(expression.parse(syntax.replace(/(\r\n|\n|\r)/gm,' '),'undefined',$as,$prefix,true)));}

public/scripts/views/forms/code.js

@@ -0,0 +1,65 @@
+(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-javascript';
+                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;
+                }
+
+                element.addEventListener('change', check);
+
+                check();
+            }
+        }
+    );
+})(window);

public/scripts/views/general/switch.js

@@ -3,6 +3,16 @@
         selector: 'data-switch',
         controller: function(element, router, document) {
             element.addEventListener('change', function () {
+                if(!element.value) {
+                    return;
+                }
+
+                console.log('change route', element.value);
+
+                if(element.value === router.params.project) {
+                    return;
+                }
+
                 return router.change('/console/home?project=' + element.value);
             });
         }

public/styles/forms.less

@@ -1017,7 +1017,7 @@ ol {
     position: absolute;
     bottom: ~"calc(100% + 10px)";
     z-index: 2;
-    padding: 0 10px;
+    padding: 0;
     .func-start(-10px);
     max-width: 280px;
     min-width: 240px;
@@ -1036,7 +1036,7 @@ ol {
 
     li {
       border-bottom: solid 1px @config-color-fade-super;
-      margin: 0 -10px;
+      margin: 0;
       padding: 0;
       .clear;
 
@@ -1046,7 +1046,7 @@ ol {
         height: 30px;
         line-height: 30px;
         display: block;
-        padding: 10px 15px;
+        padding: 10px 25px;
         color: inherit;
         font-size: 14px;
         border: none;