@ionic/lab
Version:
Ionic Lab utility for developing Ionic apps, used by Ionic CLI
1 lines • 13.8 kB
JavaScript
import{r as i,h as s,H as t,c as e}from"./p-1d0c795d.js";const o=["ios","android","windows"];function r(i){return"ios"===i?"iOS":"android"===i?"Android":"windows"===i?"Windows":"Unknown"}function c(i){let s=i;return"ios"===i&&(s="apple"),`ion-social-${s}`}const l=class{constructor(s){i(this,s),this.sidebarVisible=!0,this.activeDevices=["ios","android"],this.details={}}componentWillLoad(){this.loadAppDetails(),this.loadLocalStorageState()}componentWillUpdate(){this.saveLocalStorageState()}loadAppDetails(){const i=this,s=new XMLHttpRequest;s.addEventListener("load",(function(){try{i.details=JSON.parse(this.responseText)}catch(s){console.error("Error loading app details from Ionic Lab API!"),console.error("Response was:",this.responseText)}})),s.addEventListener("error",i=>{console.error("Error loading app details from Ionic Lab API!"),console.error("Error was:",i)}),s.open("GET","/api/app"),s.send()}loadLocalStorageState(){const i=localStorage.getItem("ionic-lab-platforms");i&&(this.activeDevices=JSON.parse(i));const s=localStorage.getItem("ionic-lab-sidebar-open");s&&(this.sidebarVisible=JSON.parse(s))}saveLocalStorageState(){localStorage.setItem("ionic-lab-platforms",JSON.stringify(this.activeDevices)),localStorage.setItem("ionic-lab-sidebar-open",JSON.stringify(this.sidebarVisible))}sidebarCloseClickedHander(i){this.sidebarVisible=!1}ionlabPlatformToggledHandler(i){this.togglePlatform(i.detail)}togglePlatform(i){const s=this.activeDevices.indexOf(i),t=[...this.activeDevices];s>=0?t.splice(s,1):t.push(i),this.activeDevices=t}render(){return[s("header",null,s("div",{id:"header-left"},s("i",{class:"menu-icon icon ion-navicon-round",onClick:()=>this.sidebarVisible=!this.sidebarVisible}),s("div",{id:"logo"})),s("div",{id:"header-right"},s("a",{href:this.details.url},s("button",{type:"button"},"Open fullscreen",s("i",{class:"fullscreen-icon icon ion-share"}))),s("ionlab-platform-dropdown",{activePlatforms:this.activeDevices}))),s("main",null,s("ionlab-sidebar",{visible:this.sidebarVisible}),s("ionlab-preview",{projectType:this.details.projectType,url:this.details.url,activeDevices:this.activeDevices})),s("footer",null,s("div",{id:"footer-left"},s("div",{id:"app-info"},[this.details.name,this.details.version].filter(i=>i).join(" - "))),s("div",{id:"footer-right"},s("a",{href:"https://twitter.com/ionicframework"},"Twitter"),s("a",{href:"https://ionicframework.com/docs"},"Documentation"),s("a",{href:"https://forum.ionicframework.com/"},"Forum"),s("a",{href:"https://github.com/ionic-team/ionic"},"GitHub")))]}},a=class{constructor(s){i(this,s),this.error=!1,this.loaded=!1}componentDidLoad(){this.interval=window.setInterval(()=>{this.error=!this.url},2e4)}loadedHandler(i){this.loaded=!0,this.error=!1,window.clearInterval(this.interval)}hostData(){return{id:`device-${this.platform}`}}__stencil_render(){return[s("h2",null,s("i",{class:["icon",this.icon].join(" ")}),this.platformName),s("div",{class:"frame-container"},s("div",{class:"statusbar"},s("svg",{class:"statusbar-ios",viewBox:"0 0 219 31"},s("path",{d:"M0 1V0h219v1a5 5 0 0 0-5 5v3c0 12.15-9.85 22-22 22H27C14.85 31 5 21.15 5 9V6a5 5 0 0 0-5-5z","fill-rule":"evenodd"})),s("svg",{class:"statusbar-md",viewBox:"0 0 1384.3 40.3"},s("path",{class:"st0",d:"M1343 5l18.8 32.3c.8 1.3 2.7 1.3 3.5 0L1384 5c.8-1.3-.2-3-1.7-3h-37.6c-1.5 0-2.5 1.7-1.7 3z"}),s("circle",{class:"st0",cx:"1299",cy:"20.2",r:"20"}),s("path",{class:"st0",d:"M1213 1.2h30c2.2 0 4 1.8 4 4v30c0 2.2-1.8 4-4 4h-30c-2.2 0-4-1.8-4-4v-30c0-2.3 1.8-4 4-4zM16 4.2h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H16c-8.8 0-16-7.2-16-16s7.2-16 16-16z"}))),this.loaded||this.error?null:s("sk-fading-circle",null),this.error?s("div",{class:"load-error"},s("h3",null,"Load Timeout"),s("p",null,"Still trying...")):null,s("iframe",{src:this.url,onLoad:i=>this.loadedHandler(i),allow:"geolocation; microphone; camera; midi; encrypted-media"}))]}render(){return s(t,this.hostData(),this.__stencil_render())}static get style(){return"ionlab-device-frame{display:block;margin:0 20px;vertical-align:middle}ionlab-device-frame h2{font-size:var(--font-size-base);margin:1em 0;vertical-align:middle;text-align:left;font-weight:var(--font-weight-bold);vertical-align:top;color:#727a87}ionlab-device-frame h2 .icon{display:inline-block;margin-right:7px;font-size:var(--font-size-lg)}ionlab-device-frame .frame-container{position:relative;width:var(--frame-width);height:var(--frame-height);border-radius:3px;-webkit-box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.16);box-shadow:0 8px 24px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.16);overflow:hidden;margin:0;background-size:contain;background-repeat:no-repeat;z-index:1}ionlab-device-frame .frame-container .statusbar{position:absolute;top:0;width:var(--frame-width);height:20px;background-size:100%;background-repeat:no-repeat;background-position:50%;border-radius:3px 3px 0 0}ionlab-device-frame .frame-container .load-error,ionlab-device-frame .frame-container sk-fading-circle{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}ionlab-device-frame .frame-container .load-error{background:var(--section-bg);padding:10px 20px}ionlab-device-frame .frame-container .load-error p{margin:0}ionlab-device-frame .frame-container iframe{background:#000;width:100%;height:100%;position:absolute;top:0;left:0;margin:var(--device-frame-width);width:calc(100% - var(--device-frame-width) * 2);height:calc(100% - var(--device-frame-width) * 2);border:none;overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);z-index:1}.statusbar-ios,.statusbar-md{display:none}#device-ios .statusbar-ios{display:block;fill:#090a0d;left:50%;position:absolute;top:12px;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:165px;z-index:2}#device-android .statusbar-md{display:block;fill:hsla(0,0%,49%,.3);padding:.5rem 2.2rem;position:relative;width:100%;z-index:2;top:12px}#device-ios .frame-container{background-image:url(/assets/android-device-skin.png);border-radius:44px}#device-ios .frame-container iframe{border-radius:32px}#device-android .frame-container{background-image:url(/assets/iphone-device-skin.png);border-radius:54px}#device-android .frame-container iframe{border-radius:38px}\@media only screen and (max-height:850px){ionlab-device-frame h2{display:none}#device-ios .statusbar-ios{top:10px}}"}},n=class{constructor(s){i(this,s),this.visible=!1,this.ionlabPlatformToggled=e(this,"ionlabPlatformToggled",7)}platformActive(i){return this.activePlatforms.indexOf(i)>=0}renderPlatformCheckbox(i){return s("li",{onClick:()=>this.ionlabPlatformToggled.emit(i)},s("input",{type:"checkbox",name:i,checked:this.platformActive(i)}),s("label",null,r(i)))}render(){const i=["dropdown-menu"];return this.visible||i.push("hidden"),s("div",{class:"dropdown",onMouseOver:()=>this.visible=!0,onMouseOut:()=>this.visible=!1},s("button",{class:"dropdown-toggle",type:"button"},"Platforms",s("span",{class:"dropdown-caret"})),s("ul",{class:i.join(" ")},o.map(i=>this.renderPlatformCheckbox(i))))}static get style(){return"#header-right .dropdown{position:relative;height:100%;display:inline-block;margin-right:10px}#header-right .dropdown-caret{display:inline-block;width:0;height:0;border-top:5px solid var(--icon-color);border-left:5px solid transparent;border-right:5px solid transparent}#header-right .dropdown-menu{display:block;position:absolute;z-index:999;width:150px;right:-10px;background-color:#fff;-webkit-box-shadow:0 6px 10px rgba(0,0,0,.08),0 0 6px rgba(0,0,0,.05);box-shadow:0 6px 10px rgba(0,0,0,.08),0 0 6px rgba(0,0,0,.05);line-height:1em;font-weight:400;margin:0;padding:5px 0}#header-right .dropdown-menu.hidden{display:none}#header-right li{cursor:pointer;list-style:none;padding:6px 5px}#header-right input,#header-right label{cursor:pointer;margin:0 5px}#header-right .dropdown-caret{margin-left:5px}"}},d=class{constructor(s){i(this,s)}platformUrl(i){if(!this.url)return;const s={};return"angular"===this.projectType?(s["ionic:mode"]=function(i){return"android"===i?"md":i}(i),s["ionic:persistConfig"]="true",s["ionic:_forceStatusbarPadding"]="true"):"ionic-angular"===this.projectType&&(s.ionicplatform=i,s.ionicstatusbarpadding="true"),`${this.url}?${Object.keys(s).map(i=>`${encodeURIComponent(i)}=${encodeURIComponent(s[i])}`).join("&")}`}render(){return s("div",null,this.activeDevices.map(i=>s("ionlab-device-frame",{platform:i,platformName:r(i),url:this.platformUrl(i),icon:c(i)})))}static get style(){return"ionlab-preview{text-align:center;-ms-flex:1;flex:1;overflow:scroll;--frame-width:var(--frame-default-width);--frame-height:var(--frame-default-height)}ionlab-preview>div{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;vertical-align:middle;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;padding-bottom:60px;min-height:100%}\@media only screen and (max-height:850px){ionlab-preview{overflow:hidden;--frame-width:300px;--frame-height:calc(var(--frame-width) / var(--frame-ratio))}ionlab-preview>div{padding-bottom:0}}"}},h=class{constructor(s){i(this,s),this.ionlabSidebarCloseClicked=e(this,"ionlabSidebarCloseClicked",7)}hostData(){const i=[];return this.visible||i.push("hidden"),{class:i.join(" ")}}__stencil_render(){return[s("h3",null,"Quick reference",s("i",{class:"icon ion-close-circled",onClick:()=>this.ionlabSidebarCloseClicked.emit()})),s("ul",{class:"menu"},s("li",null,s("a",{href:"https://ionicframework.com/docs/components"},"Components")),s("li",null,s("a",{href:"https://ionicframework.com/docs/api"},"API Reference")),s("li",null,s("a",{href:"https://ionicframework.com/docs/native"},"Ionic Native")),s("li",null,s("a",{href:"https://ionicframework.com/docs/"},"All Documentation")))]}render(){return s(t,this.hostData(),this.__stencil_render())}static get style(){return"ionlab-sidebar{position:relative;z-index:1;background-color:var(--section-bg);height:100%;width:300px;overflow:auto;padding:15px}ionlab-sidebar.hidden{display:none}ionlab-sidebar h3{color:#fff}ionlab-sidebar h3 .icon{float:right;font-size:24px;color:var(--font-color);margin-top:-5px;cursor:pointer}ionlab-sidebar .menu{list-style:none;margin:0;padding:0}ionlab-sidebar .menu li{margin:10px 0}"}},u=class{constructor(s){i(this,s)}render(){return[s("div",{class:"sk-circle1 sk-circle"}),s("div",{class:"sk-circle2 sk-circle"}),s("div",{class:"sk-circle3 sk-circle"}),s("div",{class:"sk-circle4 sk-circle"}),s("div",{class:"sk-circle5 sk-circle"}),s("div",{class:"sk-circle6 sk-circle"}),s("div",{class:"sk-circle7 sk-circle"}),s("div",{class:"sk-circle8 sk-circle"}),s("div",{class:"sk-circle9 sk-circle"}),s("div",{class:"sk-circle10 sk-circle"}),s("div",{class:"sk-circle11 sk-circle"}),s("div",{class:"sk-circle12 sk-circle"})]}static get style(){return"sk-fading-circle{display:block;width:40px;height:40px;position:relative}sk-fading-circle .sk-circle{width:100%;height:100%;position:absolute;left:0;top:0}sk-fading-circle .sk-circle:before{content:\"\";display:block;margin:0 auto;width:15%;height:15%;background-color:#fff;border-radius:100%;-webkit-animation:sk-circleFadeDelay 1.2s ease-in-out infinite both;animation:sk-circleFadeDelay 1.2s ease-in-out infinite both}sk-fading-circle .sk-circle2{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}sk-fading-circle .sk-circle3{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg)}sk-fading-circle .sk-circle4{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}sk-fading-circle .sk-circle5{-webkit-transform:rotate(120deg);-ms-transform:rotate(120deg);transform:rotate(120deg)}sk-fading-circle .sk-circle6{-webkit-transform:rotate(150deg);-ms-transform:rotate(150deg);transform:rotate(150deg)}sk-fading-circle .sk-circle7{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}sk-fading-circle .sk-circle8{-webkit-transform:rotate(210deg);-ms-transform:rotate(210deg);transform:rotate(210deg)}sk-fading-circle .sk-circle9{-webkit-transform:rotate(240deg);-ms-transform:rotate(240deg);transform:rotate(240deg)}sk-fading-circle .sk-circle10{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}sk-fading-circle .sk-circle11{-webkit-transform:rotate(300deg);-ms-transform:rotate(300deg);transform:rotate(300deg)}sk-fading-circle .sk-circle12{-webkit-transform:rotate(330deg);-ms-transform:rotate(330deg);transform:rotate(330deg)}sk-fading-circle .sk-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}sk-fading-circle .sk-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}sk-fading-circle .sk-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}sk-fading-circle .sk-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}sk-fading-circle .sk-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}sk-fading-circle .sk-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}sk-fading-circle .sk-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}sk-fading-circle .sk-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}sk-fading-circle .sk-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}sk-fading-circle .sk-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}sk-fading-circle .sk-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}\@-webkit-keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}\@keyframes sk-circleFadeDelay{0%,39%,to{opacity:0}40%{opacity:1}}"}};export{l as ionlab_app,a as ionlab_device_frame,n as ionlab_platform_dropdown,d as ionlab_preview,h as ionlab_sidebar,u as sk_fading_circle};