can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
99 lines (92 loc) • 2.02 kB
HTML
<body>
<mock-url></mock-url>
<my-app></my-app>
<script id="demo-source" main="@empty" src="../../node_modules/steal/steal.js" dev-bundle>
import {
ObservableObject,
route,
StacheElement,
stacheRouteHelpers,
type,
value
} from "can";
import "can/demos/technology-overview/mock-url";
class MyApp extends StacheElement {
static get view() {
return `
{{# if(this.componentToShow.isResolved) }}
{{ this.componentToShow.value }}
{{/ if }}
`;
}
static get props() {
return {
routeData: {
get default() {
route.register("{page}", { page: "home" });
route.register("tasks/{taskId}", { page: "tasks" });
route.start();
return route.data;
}
},
get componentToShow() {
if (!this.isLoggedIn) {
return steal
.import("can/demos/technology-overview/page-login")
.then(module => {
return new module.default().bindings({
isLoggedIn: value.bind(this, "isLoggedIn")
});
});
}
return steal
.import(`can/demos/technology-overview/page-${this.routeData.page}`)
.then(module => {
switch (this.routeData.page) {
case "home":
return new module.default().bindings({
logout: this.logout.bind(this)
});
case "tasks":
return new module.default().bindings({
id: value.from(this.routeData, "taskId"),
logout: this.logout.bind(this)
});
default:
const page404 = document.createElement("h2");
page404.innerHTML = "Page Missing";
return page404;
}
});
},
isLoggedIn: false
};
}
logout() {
this.isLoggedIn = false;
}
}
customElements.define("my-app", MyApp);
</script>
<style>
.slider {
border: solid 1px blue;
background-color: red;
height: 20px;
width: 20px;
cursor: ew-resize;
position: relative;
}
percent-slider {
border: solid 1px black;
padding: 2px;
display: block;
}
p {
margin: 0px 0px 20px 0px;
}
</style>
<style>
body { margin: 0px; padding: 0px; }
</style>
</body>