Skip to content
Permalink
Browse files

WIP: Upgrade

  • Loading branch information...
m-mujica committed Sep 20, 2019
1 parent 7c75757 commit 47c5499f27a5b64dcacccf8ed5dbf814848bced5
@@ -1,80 +1,93 @@
import { Component, DefineMap, stache } from "can";
import { StacheElement } from "can";

const style = document.createElement("style");
style.innerHTML = `
mock-url {display: block;}
mock-url {
display: block;
}
mock-url .location {
display: flex;
margin-bottom: 20px;
display: flex;
margin-bottom: 20px;
}
mock-url .url {
display: inline-block;
border: solid 1px;
padding: 2px;
flex-grow: 1;
display: inline-block;
border: solid 1px;
padding: 2px;
flex-grow: 1;
}
mock-url .back, mock-url .forward, mock-url .reload {
font-size: 16px;
font-family: Verdana,sans-serif;
border: solid 1px black;
padding: 2px;
line-height: 20px;
flex-grow: 0;
cursor: pointer;
mock-url .back,
mock-url .forward,
mock-url .reload {
font-size: 16px;
font-family: Verdana, sans-serif;
border: solid 1px black;
padding: 2px;
line-height: 20px;
flex-grow: 0;
cursor: pointer;
}
mock-url input {
border: none;
font-size: 16;
border: none;
font-size: 16;
}
`;

document.body.appendChild(style);

Component.extend({
tag: "mock-url",
view: `
<div class='location'>
<span class='back' on:click='back()'>&#x21E6;</span>
<span class='forward' on:click='forward()'>&#x21E8;</span>
<span class='reload' on:click='reload()'>&#8635;</span>
<div class="url">URL: {{ page }}<input value:bind="url"/></div>
</div>`,
class MockUrl extends StacheElement {
static get view() {
return `
<div class="location">
<span class="back" on:click="this.back()">&#x21E6;</span>
<span class="forward" on:click="this.forward()">&#x21E8;</span>
<span class="reload" on:click="this.reload()">&#8635;</span>
<div class="url">URL: {{ this.page }}<input value:bind="this.url"></div>
</div>
`;
}

static get props() {
return {
page: {
default: "/my-app.html"
},
url: {
value(prop) {
// When the property is set, update the hash.
prop.listenTo(prop.lastSet, function(newVal) {
window.location.hash = newVal;
});

// When the hash changes, update the property
function updateWithHash() {
prop.resolve(window.location.hash);
}
window.addEventListener("hashchange", updateWithHash);

ViewModel: DefineMap.extend("MockUrl",{
page: {
default: "/my-app.html"
},
url: {
value(prop) {
// When the property is set, update the hash.
prop.listenTo(prop.lastSet, function(newVal){
window.location.hash = newVal;
});
// Set the property value right away
prop.resolve(window.location.hash);

// When the hash changes, update the property
function updateWithHash(){
prop.resolve(window.location.hash);
}
window.addEventListener("hashchange", updateWithHash);
// teardown
return function() {
window.removeEventListener("hashchange", updateWithHash);
};
}
}
};
}

// Set the property value right away
prop.resolve(window.location.hash);
back() {
history.back();
}

forward() {
history.forward();
}

reload() {
location.reload();
}
}

// teardown
return function(){
window.removeEventListener("hashchange", updateWithHash);
}
}
},
back(){
history.back();
},
forward(){
history.forward();
},
reload(){
location.reload();
}
})
});
customElements.define("mock-url", MockUrl);
@@ -1,20 +1,26 @@
import { Component, stacheRouteHelpers } from "can";
import { StacheElement, stacheRouteHelpers } from "can";

const PageHome = Component.extend({
tag: "page-home",
view: `
<h1><code>&lt;page-home&gt;</code></h1>
<p>This content is provided by the <code>&lt;page-home&gt;</code> component.
Please click one of the tasks below to be directed to one of their pages
or click <i>Logout</i> to log out.
</p>
<ul>
<li><a href="{{ routeUrl(page='tasks' taskId='0') }}">Task 0</a></li>
<li><a href="{{ routeUrl(page='tasks' taskId='1') }}">Task 1</a></li>
</ul>
<button on:click="logout()">Logout</button>
`,
ViewModel: {}
});
class PageHome extends StacheElement {
static get view() {
return `
<h1><code>&lt;page-home&gt;</code></h1>
<p>This content is provided by the <code>&lt;page-home&gt;</code> component.
Please click one of the tasks below to be directed to one of their pages
or click <i>Logout</i> to log out.
</p>
<ul>
<li><a href="{{ routeUrl(page='tasks' taskId='0') }}">Task 0</a></li>
<li><a href="{{ routeUrl(page='tasks' taskId='1') }}">Task 1</a></li>
</ul>
<button on:click="this.logout()">Logout</button>
`;
}

static get props() {
return {};
}
}

customElements.define("page-home", PageHome);

export default PageHome;
@@ -1,19 +1,26 @@
import { Component } from "can";
import { StacheElement } from "can";

const PageLogin = Component.extend({
tag: "page-login",
view: `
<h1><code>&lt;page-login&gt;</code></h1>
<p>This content is provided by the <code>&lt;page-login&gt;</code> component.</p>
<p>Please click the <i>Login</i> button below to access your page.</p>
<button on:click="login()">Login</button>
`,
ViewModel: {
isLoggedIn: "boolean",
login: function(){
this.isLoggedIn = true;
}
}
});
class PageLogin extends StacheElement {
static get view() {
return `
<h1><code>&lt;page-login&gt;</code></h1>
<p>This content is provided by the <code>&lt;page-login&gt;</code> component.</p>
<p>Please click the <i>Login</i> button below to access your page.</p>
<button on:click="this.login()">Login</button>
`;
}

static get props() {
return {
isLoggedIn: Boolean
};
}

login() {
this.isLoggedIn = true;
}
}

customElements.define("page-login", PageLogin);

export default PageLogin;
@@ -1,58 +1,68 @@
import { Component } from "can";
import { StacheElement, type } from "can";
import "./percent-slider";

const TaskEditor = Component.extend({
tag: "task-editor",
view: `
{{# if logout }}
<h1><code>&lt;task-editor&gt;</code></h1>
<p>
This content is provided by the <code>&lt;task-editor&gt;</code> component.
Click <a href="{{ routeUrl(page='home') }}">Home</a> to return to the homepage, or
<button on:click="logout()">Logout</button> to log out. Edit the task below:
</p>
{{/ else }}
<h2>Task Editor</h2>
{{/ if }}
<form on:submit="save(scope.event)">
Name: {{ name }}
<p>
<input value:bind="name"/>
</p>
Progress: {{ progress }}
<p>
<percent-slider value:bind="progress"/>
</p>
<button disabled:from="isSaving">
{{# if(isSaving) }}Saving{{ else }}Save{{/ if }}
</button>
</form>
`,
ViewModel: {
id: "number",
name: {
default: function(){
return "Task " + this.id;
}
},
progress: {
// makes progress an integer
type(num){
return parseInt(num);
},
default: 0
},
isSaving: { default: false },
save(event){
event.preventDefault();
this.isSaving = true;
// fake ajax request
setTimeout(() => {
this.isSaving = false;
},2000);
}
}
});
class TaskEditor extends StacheElement {
static get view() {
return `
{{# if(this.logout) }}
<h1><code>&lt;task-editor&gt;</code></h1>
<p>
This content is provided by the <code>&lt;task-editor&gt;</code> component.
Click <a href="{{ routeUrl(page='home') }}">Home</a> to return to the homepage, or
<button on:click="this.logout()">Logout</button> to log out. Edit the task below:
</p>
{{ else }}
<h2>Task Editor</h2>
{{/ if }}
<form on:submit="this.save(scope.event)">
Name: {{ this.name }}
<p>
<input value: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 get props() {
return {
id: type.convert(Number),

name: {
get default() {
return "Task " + this.id;
}
},

progress: {
// makes progress an integer
type(num) {
return parseInt(num, 10);
},
default: 0
},

isSaving: { default: false }
};
}

save(event) {
event.preventDefault();
this.isSaving = true;
// fake ajax request
setTimeout(() => {
this.isSaving = false;
}, 2000);
}
}

customElements.define("task-editor", TaskEditor);

export default TaskEditor;

0 comments on commit 47c5499

Please sign in to comment.
You can’t perform that action at this time.