can
Version:
MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.
87 lines (77 loc) • 1.72 kB
HTML
<body>
<div id='demo-html'>
<task-editor></task-editor>
</div>
<script src="../../node_modules/steal/steal.js" dev-bundle main="@empty" id="demo-source">
import { ObservableObject, stache, StacheElement } from "can";
import "can/demos/technology-overview/component-slider";
const Integer = {
[Symbol.for("can.new")](val) {
return parseInt(val);
},
[Symbol.for("can.isMember")](val) {
return Number.isInteger(val);
}
};
class TaskEditor extends StacheElement {
static view = `
<h2>Task Editor</h2>
<form on:submit='this.save(scope.event)'>
Name: {{ this.name }}
<p>
<input bind='this.name'/>
</p>
Progress: {{ this.progress }}
<p>
<percent-slider value:bind='this.progress'/>
</p>
<button disabled:from="this.isSaving">
{{# if(this.isSaving) }}Saving{{ else }}Save{{/ if }}
</button>
</form>
`;
static props = {
taskId: Number,
name: {
get() {
return "Task "+this.taskId;
}
},
progress: {
// makes progress an integer
type: Integer,
default: 0
},
isSaving: false
};
save(event) {
event.preventDefault();
this.isSaving = true;
// fake ajax request
setTimeout(() => {
this.isSaving = false;
},2000);
}
};
customElements.define("task-editor", TaskEditor);
document.querySelector("task-editor").taskId = 44;
</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>
</body>