Improved UI performance

app/views/console/comps/header.phtml

@@ -1,15 +1,8 @@
-<div
-    data-service="projects.getProject"
-    data-event="project-load,platform-create,platform-update,platform-delete"
-    data-name="console-project"
-    data-param-project-id="{{router.params.project}}"
-    data-scope="console"></div>
-
 <header class="clear">
     &nbsp;&nbsp;&nbsp;
     <div class="list pull-start project-only">
         <label>
-            <select data-ls-bind="{{console-project.$uid}}" data-switch data-ls-loop="projects" data-ls-as="option">
+            <select data-ls-bind="{{router.params.project}}" 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>
@@ -44,7 +37,7 @@
 
             <ul class="links">
                 <li>
-                    <a data-ls-attrs="href=/console/home?project={{console-project.$uid}}">
+                    <a data-ls-attrs="href=/console/home?project={{router.params.project}}">
                         <i class="icon-home"></i>
                         Home
                     </a>
@@ -55,19 +48,19 @@
 
             <ul class="links">
                 <li>
-                    <a data-ls-attrs="href=/console/database?project={{console-project.$uid}}">
+                    <a data-ls-attrs="href=/console/database?project={{router.params.project}}">
                         <i class="icon-database"></i>
                         Database
                     </a>
                 </li>
                 <li>
-                    <a data-ls-attrs="href=/console/storage?project={{console-project.$uid}}">
+                    <a data-ls-attrs="href=/console/storage?project={{router.params.project}}">
                         <i class="icon-folder"></i>
                         Storage
                     </a>
                 </li>
                 <li>
-                    <a data-ls-attrs="href=/console/users?project={{console-project.$uid}}">
+                    <a data-ls-attrs="href=/console/users?project={{router.params.project}}">
                         <i class="icon-users"></i>
                         Users
                     </a>
@@ -78,19 +71,19 @@
 
             <ul class="links">
                 <li>
-                    <a data-ls-attrs="href=/console/keys?project={{console-project.$uid}}">
+                    <a data-ls-attrs="href=/console/keys?project={{router.params.project}}">
                         <i class="icon-key-inv"></i>
                         API Keys
                     </a>
                 </li>
                 <li>
-                    <a data-ls-attrs="href=/console/webhooks?project={{console-project.$uid}}">
+                    <a data-ls-attrs="href=/console/webhooks?project={{router.params.project}}">
                         <i class="icon-link"></i>
                         Webhooks
                     </a>
                 </li>
                 <li>
-                    <a data-ls-attrs="href=/console/tasks?project={{console-project.$uid}}">
+                    <a data-ls-attrs="href=/console/tasks?project={{router.params.project}}">
                         <i class="icon-clock"></i>
                         Tasks
                     </a>
@@ -100,7 +93,7 @@
 
         <ul class="links bottom project-only">
             <li>
-                <a data-ls-attrs="href=/console/settings?project={{console-project.$uid}}"><i class="icon-cog"></i> Settings</a>
+                <a data-ls-attrs="href=/console/settings?project={{router.params.project}}"><i class="icon-cog"></i> Settings</a>
             </li>
         </ul>
     </nav>

app/views/console/home/index.phtml

@@ -4,7 +4,12 @@ $graph = $this->getParam('graph', false);
 
 <div class="cover margin-bottom-small">
     <div class="zone xl margin-bottom-large margin-top-small">
-        <h1 class="margin-bottom-small">
+        <h1 class="margin-bottom-small"
+            data-service="projects.getProject"
+            data-event="load,platform-create,platform-update,platform-delete"
+            data-name="console-project"
+            data-param-project-id="{{router.params.project}}"
+            data-scope="console">
             <span class="title" data-ls-bind="{{console-project.name}}">&nbsp;</span>&nbsp;&nbsp;
         </h1>
 

public/dist/scripts/app-all.js

@@ -2113,9 +2113,9 @@ while(match=REGEX_PARAMETERS_VALUES.exec(functionAsString)){params.push(match[1]
 return params;}
 let args=getParams(target);return target.apply(target,args.map(function(value){return self.get(value.trim());}));};let path=function(path,value,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');path=((path.indexOf('.')>-1)?path.replace(as+'.',prefix+'.'):path.replace(as,prefix)).split('.');let name=path.shift();let object=this.get(name);let result=null;while(path.length>1){if(!object){return null;}
 object=object[path.shift()];}
-if(value!==null&&value!==undefined){object[path.shift()]=value;return true;}
+let shift=path.shift();if(value!==null&&value!==undefined&&object&&shift&&object[shift]){object[shift]=value;return true;}
 if(!object){return null;}
-let shift=path.shift();if(!shift){result=object;}
+if(!shift){result=object;}
 else{return object[shift];}
 return result;};let bind=function(element,path,callback,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');let event=((path.indexOf('.')>-1)?path.replace(as+'.',prefix+'.'):path.replace(as,prefix))+'.changed';let service=event.split('.').slice(0,1).pop();listeners[service]=listeners[service]||{};listeners[service][event]=true;let printer=()=>{if(!document.body.contains(element)){element=null;document.removeEventListener(event,printer,false);return false;}
 callback();};document.addEventListener(event,printer);};let container={set:set,get:get,resolve:resolve,path:path,bind:bind,stock:stock,listeners:listeners,};set('container',container,true,false);return container;}();window.ls.container.set('http',function(document){let globalParams=[],globalHeaders=[];let addParam=function(url,param,value){param=encodeURIComponent(param);let a=document.createElement('a');param+=(value?"="+encodeURIComponent(value):"");a.href=url;a.search+=(a.search?"&":"")+param;return a.href;};let request=function(method,url,headers,payload,progress){let i;if(-1===['GET','POST','PUT','DELETE','TRACE','HEAD','OPTIONS','CONNECT','PATCH'].indexOf(method)){throw new Error('var method must contain a valid HTTP method name');}
@@ -2448,12 +2448,7 @@ 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){let debug=(element.dataset['debug']);let project=router.params.project||null;if(project){if(debug){console.log('project-load-start-init');}
-document.dispatchEvent(new CustomEvent('project-load'));}
-document.addEventListener('state-changed',function(){if(router.params.project&&project!==router.params.project){if(debug){console.log('project-load-init');}
-document.dispatchEvent(new CustomEvent('project-load'));project=router.params.project;}});element.addEventListener('change',function(){if(debug){console.log('change init',element.value);}
-if(element.value&&element.value!==project){if(debug){console.log('Changed: selected project from list');}
-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(){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

@@ -20,9 +20,9 @@ while(match=REGEX_PARAMETERS_VALUES.exec(functionAsString)){params.push(match[1]
 return params;}
 let args=getParams(target);return target.apply(target,args.map(function(value){return self.get(value.trim());}));};let path=function(path,value,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');path=((path.indexOf('.')>-1)?path.replace(as+'.',prefix+'.'):path.replace(as,prefix)).split('.');let name=path.shift();let object=this.get(name);let result=null;while(path.length>1){if(!object){return null;}
 object=object[path.shift()];}
-if(value!==null&&value!==undefined){object[path.shift()]=value;return true;}
+let shift=path.shift();if(value!==null&&value!==undefined&&object&&shift&&object[shift]){object[shift]=value;return true;}
 if(!object){return null;}
-let shift=path.shift();if(!shift){result=object;}
+if(!shift){result=object;}
 else{return object[shift];}
 return result;};let bind=function(element,path,callback,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');let event=((path.indexOf('.')>-1)?path.replace(as+'.',prefix+'.'):path.replace(as,prefix))+'.changed';let service=event.split('.').slice(0,1).pop();listeners[service]=listeners[service]||{};listeners[service][event]=true;let printer=()=>{if(!document.body.contains(element)){element=null;document.removeEventListener(event,printer,false);return false;}
 callback();};document.addEventListener(event,printer);};let container={set:set,get:get,resolve:resolve,path:path,bind:bind,stock:stock,listeners:listeners,};set('container',container,true,false);return container;}();window.ls.container.set('http',function(document){let globalParams=[],globalHeaders=[];let addParam=function(url,param,value){param=encodeURIComponent(param);let a=document.createElement('a');param+=(value?"="+encodeURIComponent(value):"");a.href=url;a.search+=(a.search?"&":"")+param;return a.href;};let request=function(method,url,headers,payload,progress){let i;if(-1===['GET','POST','PUT','DELETE','TRACE','HEAD','OPTIONS','CONNECT','PATCH'].indexOf(method)){throw new Error('var method must contain a valid HTTP method name');}
@@ -355,12 +355,7 @@ 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){let debug=(element.dataset['debug']);let project=router.params.project||null;if(project){if(debug){console.log('project-load-start-init');}
-document.dispatchEvent(new CustomEvent('project-load'));}
-document.addEventListener('state-changed',function(){if(router.params.project&&project!==router.params.project){if(debug){console.log('project-load-init');}
-document.dispatchEvent(new CustomEvent('project-load'));project=router.params.project;}});element.addEventListener('change',function(){if(debug){console.log('change init',element.value);}
-if(element.value&&element.value!==project){if(debug){console.log('Changed: selected project from list');}
-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(){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

@@ -20,9 +20,9 @@ while(match=REGEX_PARAMETERS_VALUES.exec(functionAsString)){params.push(match[1]
 return params;}
 let args=getParams(target);return target.apply(target,args.map(function(value){return self.get(value.trim());}));};let path=function(path,value,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');path=((path.indexOf('.')>-1)?path.replace(as+'.',prefix+'.'):path.replace(as,prefix)).split('.');let name=path.shift();let object=this.get(name);let result=null;while(path.length>1){if(!object){return null;}
 object=object[path.shift()];}
-if(value!==null&&value!==undefined){object[path.shift()]=value;return true;}
+let shift=path.shift();if(value!==null&&value!==undefined&&object&&shift&&object[shift]){object[shift]=value;return true;}
 if(!object){return null;}
-let shift=path.shift();if(!shift){result=object;}
+if(!shift){result=object;}
 else{return object[shift];}
 return result;};let bind=function(element,path,callback,as,prefix){as=(as)?as:container.get('$as');prefix=(prefix)?prefix:container.get('$prefix');let event=((path.indexOf('.')>-1)?path.replace(as+'.',prefix+'.'):path.replace(as,prefix))+'.changed';let service=event.split('.').slice(0,1).pop();listeners[service]=listeners[service]||{};listeners[service][event]=true;let printer=()=>{if(!document.body.contains(element)){element=null;document.removeEventListener(event,printer,false);return false;}
 callback();};document.addEventListener(event,printer);};let container={set:set,get:get,resolve:resolve,path:path,bind:bind,stock:stock,listeners:listeners,};set('container',container,true,false);return container;}();window.ls.container.set('http',function(document){let globalParams=[],globalHeaders=[];let addParam=function(url,param,value){param=encodeURIComponent(param);let a=document.createElement('a');param+=(value?"="+encodeURIComponent(value):"");a.href=url;a.search+=(a.search?"&":"")+param;return a.href;};let request=function(method,url,headers,payload,progress){let i;if(-1===['GET','POST','PUT','DELETE','TRACE','HEAD','OPTIONS','CONNECT','PATCH'].indexOf(method)){throw new Error('var method must contain a valid HTTP method name');}

public/scripts/views/general/switch.js

@@ -2,31 +2,8 @@
     window.ls.container.get('view').add({
         selector: 'data-switch',
         controller: function(element, router, document) {
-            let debug = (element.dataset['debug']);
-
-            let project = router.params.project || null;
-
-            if(project) {
-                if(debug) { console.log('project-load-start-init'); }
-                document.dispatchEvent(new CustomEvent('project-load'));
-            }
-
-            document.addEventListener('state-changed', function () {
-               if(router.params.project && project !== router.params.project) {
-                   if(debug) { console.log('project-load-init'); }
-                   document.dispatchEvent(new CustomEvent('project-load'));
-                   project = router.params.project;
-               }
-            });
-
             element.addEventListener('change', function () {
-                if (debug) { console.log('change init', element.value); }
-
-                if(element.value && element.value !== project) {
-                    if (debug) { console.log('Changed: selected project from list');}
-
-                    return router.change('/console/home?project=' + element.value);
-                }
+                return router.change('/console/home?project=' + element.value);
             });
         }
     });

public/styles/comps/database.less

@@ -8,7 +8,7 @@
 
                 &:after {
                     width: 2px;
-                    right: 20px;
+                    .func-end(20px);
                 }
             }
         }