import Shaco from 'shadow-component'
import HistoryManager from './history_manager'
let alreadyRender = false
let RouterLink = Shaco.ComponentFactory({
elementName: 'route-link',
template: `
<content></content>
`,
to (e) {
e.preventDefault()
HistoryManager.push(this.state.to)
},
view () {
Shaco.createElement('a', null, null, {
href: this.state.to,
onclick: this.to.bind(this)
}, this.state.child)
}
})
let RouterSelector = Shaco.ComponentFactory({
elementName: 'route-selector',
template: `
<content></content>
`,
state: {},
renderComponent () {
this.parentElement.routeIs(this.state.pattern, this.state.params)
},
const TodoForm = Shaco.ComponentFactory({
elementName: 'todo-form',
state: {
text: '',
submitHandler: function() {},
errors: []
},
template: `
<style>
:host {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0em 0;
box-shadow: 0 0 2px 0 rgba(0,0,0,0.5);
z-index: 100;
background-color: white;
}
::content form {
max-width: 500px;
margin: 0 auto;
}
::content form:before,
::content form:after {
display: block;
content: "";
clear: both;
}
::content input,
::content button {
display: block;
padding: 1em;
border: none;
background: none;
float: left;
font-size: 1.1em;
box-sizing: border-box;
}
::content input {
background-color: white;
box-shadow: 0 0 1px 0 #777;
width: 70%;
}
::content button {
width: 30%;
float: right;
background-color: #1cc9a8;
color: white;
padding: 1em 0.2em;
box-shadow: 0 0 1px 0 #16a085;
}
::content .error {
max-width: 500px;
margin: 0 auto;
width: 100%;
padding: 0.8em 0.5em;
font-size: 0.9em;
color: red;
}
</style>
<content></content>
`,
submitHandler (e) {
e.preventDefault()
if (e.target[0].value !== '') {
this.state.submitHandler(e.target[0].value)
// Remove errors and render again
this.setState({
...this.state,
errors: []
}, true) // this true to patch the component
} else {
this.setState({
...this.state,
errors: ['You must write a Task']
}, true) // for patch the element
}
e.target[0].value = ''
},
view: function() {
// Using just Shaco.createElement
Shaco.createElement('form', null, null, {
onsubmit: this.submitHandler.bind(this)
}, () => {
Shaco.createElement('input', null, null, {
type: 'text',
placeholder: 'What you have to do?'
}),
Shaco.createElement('button', null, null, {
type: 'submit'
}, 'Add todo')
})
if (this.state.errors.length > 0) {
this.state.errors.map((error, index) => {
Shaco.createElement('div', index, {}, { class: 'error'}, `${error}`)
})
}
}
})
const Todo = Shaco.ComponentFactory({
elementName: 'todo-item',
state: defaultTodoState,
template: `
<style>
::content li .content,
::content li .todo-remove {
float: left;
display: block;
}
::content li .content {
width: 92%;
}
::content li .todo-remove {
background: none;
color: #e74c3c;
border: none;
box-shadow: none;
font-size: 2.2em;
margin-top: -0.5em;
line-height: 0.8em;
width: 8%;
float: right;
position: relative;
top: 0.2em;
}
::content .ready {
color: #999;
position: relative;
}
::content .ready:before {
position: absolute;
top: 48%;
left: %5;
width: 80%;
display: block;
border-bottom: 1px solid #999;
content: "";
}
::content .not-ready {
text-decoration: none;
}
::content li {
background-color: #F3F3F3;
padding: 1em;
border-bottom: 1px solid #CCC;
border-top: 1px solid #FFF;
position: relative;
}
::content li:before,
::content li:after {
content: "";
display: block;
clear: both;
}
</style>
<div class="todo-item">
<content></content>
</div>
`,
view () {
let { id, text, toggleHandler, removeHandler, completed, child} = this.state
return (
<li class={(completed) ? 'ready':'not-ready'}>
<span class="content" onclick={() => { toggleHandler(this.state.id) }}>
{ text }
<route-link state={{to: `/task/${this.state.id}`}}>
(link)
</route-link>
</span>
<button class="todo-remove" onclick={ () => { removeHandler(this.state.id) }}>
{'\u2612'}
</button>
</li>
)
}
})