Skip to content

Commit

Permalink
fixing todo demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@eavichay
eavichay committed Dec 12, 2016
1 parent 3d9be95 commit 6029eaa
Show file tree
Hide file tree
Showing 9 changed files with 61 additions and 133 deletions.
3 changes: 2 additions & 1 deletion SlimElement.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -415,6 +415,7 @@
}

update() {
if (!this.virtual) this.beforeRender()
for (let i = this.actual.children.length; i > 0; i--) {
let child = this.actual.children[i - 1];
if (child.getAttribute('in-state') !== this.currentState) {
Expand All @@ -426,7 +427,7 @@
let child = this.virtual.children[i - 1];
if (child.getAttribute('in-state') === this.currentState) {
this.actual.appendChild(child)
if (child.isSlim) child.update()
if (child.isSlim) child.render(true)
}
}
}
Expand Down
73 changes: 18 additions & 55 deletions example/Todo/TodoDemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@
<meta charset="UTF-8">
<title>Todo Demo - SlimJS</title>

<link rel="import" href="../../SlimElement.js"/>
<script src="../../SlimElement.js"></script>
<script src="TodoModel.js"></script>

<link rel="import" href="../../components/s-repeat.js">
<script src="../../components/s-container.js"></script>
<script src="./todo-new-task-input.js"></script>
<script src="./todo-task-list.js"></script>
<script src="./todo-task-item.js"></script>
Expand Down Expand Up @@ -60,8 +58,15 @@
padding: 2em;
}

s-container {
align-items: center;
div.wrapper {
margin: 0 auto;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
width: 40em;
align-self: center;
text-align: center;
}

s-container.code {
Expand Down Expand Up @@ -108,6 +113,7 @@
width: 100%;
flex-direction: column;
padding-top: 2em;
text-align: left;
}

s-repeat todo-task-item #container{
Expand Down Expand Up @@ -138,56 +144,13 @@
</head>
<body>

<s-container>
<s-container layout="vertical">
<h1>SlimJS TodoMVC</h1>
<h2>What would you like to do?</h2>
<todo-new-task-input model="{model}"></todo-new-task-input>
<todo-task-list model="{model}"></todo-task-list>
</s-container>
</s-container>

<s-container class="code" layout="vertical" style="margin-top: 3em;">
<h1>SlimJS is for the lazy coder</h1>
<h2>It's Web Components, on steroids</h2>
<p>SlimJS Provides fun and easy-to-use data-binding and injection mechanism for <strong>native web-components</strong> without the hassle of heavyweight frameworks.</p>
<h4>It's not a framework, it's your enemy's enemy</h4>
<p>Write your code without any forced code-conventions or patterns from a 3rd party library.</p>
<h4>Data-Binding</h4>
<p>One-way properties and method bindings using brackets. Every change in "user" property on the parent, will propogate to the bound nodes</p>
<pre><code class="javascript">
&lt;login-screen>
&lt;login-form user="[user]"
user-details="[getDetails(user)]" />
&lt;/login-screen>
</code>
</pre>
<h4>Text-to-Data-Binding</h4>
<p>Inject property values into your text with a simple annotation. Have no fear from performance issues: you choose where and when your bindings happen!</p>
<pre><code class="javascript">
&lt;my-element user="{UserModel}"}>
&lt;span bind>
Hello, [[user.name]]! Welcome to [[location]]
&lt;/span>
&lt;/my-element>
</code>
</pre>
<h4>Dependency Injection</h4>
<p>Dependency injection using curly braces</p>
<pre><code class="javascript">
const instance = new TodoModel()

SlimInjector.define('LoginModel', function() {
"use strict";
return instance
})

...

&lt;login-details model="{LoginModel}" />
</code>
</pre>
</s-container>
<div class="wrapper">
<h1><img src="slim3.png" /></h1>
<h1>TodoMVC Demo</h1>
<h2>What would you like to do with slim.js?</h2>
<todo-new-task-input model="{model}"></todo-new-task-input>
<todo-task-list model="{model}"></todo-task-list>
</div>

<span class="license">© 2016 Avichay Eyal. All code provided is open source under the MIT License</span>

Expand Down
Binary file added example/Todo/slim3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 10 additions & 11 deletions example/Todo/todo-task-item.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,29 @@
return `
<div id="container">
<span id="number" bind>[[data.todoId]]</span>
<input type="checkbox" done="[done]"/>
<input slim-id="checkbox" type="checkbox" done="[done]"/>
<span id="title" text="[name]" bind>[[data.name]]</span>
<input type="button" value="X">
<input slim-id="delButton" type="button" value="X">
</div>`
}

update () {
afterRender () {
super.update()
var checkbox = this.find('input[type=checkbox]')
var delButton = this.find('input[value="X"]')

checkbox.dataItem = this.data
this.checkbox.dataItem = this.data
if (this.data.done) {
checkbox.setAttribute('checked', 'checked')
this.checkbox.setAttribute('checked', 'checked')
} else {
checkbox.removeAttribute('checked')
this.checkbox.removeAttribute('checked')
}

checkbox.onchange = () => {
checkbox.dataItem.done = checkbox.checked
this.checkbox.onchange = () => {
this.checkbox.dataItem.done = this.checkbox.checked
}

delButton.onclick = () => {
checkbox.dataItem.delete()
this.delButton.onclick = () => {
this.checkbox.dataItem.delete()
}
}

Expand Down
2 changes: 1 addition & 1 deletion example/Todo/todo-task-list.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@


get template() {
return `<s-repeat source="items"><todo-task-item></todo-task-item></s-repeat>`
return `<todo-task-item slim-repeat="items"></todo-task-item>`
}

get items() {
Expand Down
95 changes: 30 additions & 65 deletions example/Tutorial/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,53 +17,47 @@
}
catch (err) {}
</script>
<link href="https://fonts.googleapis.com/css?family=Muli|Source+Sans+Pro" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville|Nixie+One|Ubuntu+Mono" rel="stylesheet">

<script src="../../SlimElement.js"></script>
<link rel="import" href="demo-binding.html" />

<style type="text/css">
html, body {
font-size: 16px;
font-family: "Georgia", Serif;
background: #fff8e5;
font-family: "Libre Baskerville", Serif;
background: #ffe3ad;
box-sizing: content-box;
padding-bottom: 5em;
}

body {
border: 0.5em solid #400300;
height: 100%;
max-width: 45em;
}

html {
background: midnightblue;
background-position: 25% -50%;
max-width: 55em;
}

html {
padding-left: 150px;
padding-top: 3em;

margin: 0;
}

h1 {
background: #400300;
color: white;
padding: 0.3em;
font-family: "Georgia", Serif;
font-weight: normal;
letter-spacing: -0.03em;
font-size: 1.2em;
width 100%;
max-width: 45em;
left: 0em;
pre {
background-color: #f7ead6;
margin: 0;
display: block;
line-height: 1.5em;
min-height: 3em;
padding: 1em;
}

code {
font-family: "Ubuntu Mono", monospace;
}

h1, h2 {
font-family: "Nixie One", Sans-serif
}

h1 {
font-size: 2.4em;
}

h1 strong {
Expand All @@ -75,37 +69,24 @@
color: #00408f;
word-spacing: -0.125em;
letter-spacing: -0.03em;
padding: 0 0.6em;
font-size: 2em;
}

p {
font-family: "Libre Baskerville", "Georgia", Serif;
word-spacing: 0.025em;
padding: 0 1em;
line-height: 1.4em;
text-align: left;
text-justify: inter-character;
}

code {
font-family: "Source Sans Pro", monospace;
width: 100%;
display: block;
padding-left: 5em;
padding-top: 1em;
padding-bottom: 1em;
}

pre {
display: inline-block;
margin: 0 auto;
width: 100%;
background: bisque;
li {
cursor: pointer;
font-style: italic;
}

header {
position: relative;
top: 0;
left: 0;
width: 100%;
li:hover {
text-decoration: underline;
}

footer {
Expand All @@ -120,22 +101,6 @@
line-height: 2em;
}

#menu li {
cursor: pointer;
}

#menu li:hover {
text-decoration: underline;
}

#logo {
background: fff8e5;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
padding: 0.3em;
}

code strong {
background-color: darkorange;
Expand All @@ -151,7 +116,7 @@


<header>
<div id="logo"><img src="slim.js.logo.png" width="168" height="56"></div><h1>SLIM <strong>is your</strong> PRODUCTIVE way for <strong>building your own</strong> NATIVE web components</h1>
<div id="logo"><img src="slim3.png" width="460" height="183"></div><h1>SLIM <strong>is your</strong> PRODUCTIVE way for <strong>building your own</strong> NATIVE web components</h1>
</header>
<p>With es6 and slim you could write native web components double-time with no hassle of using external libraries that affect your workflow</p>
<h2>Meet SlimJS</h2>
Expand All @@ -177,7 +142,7 @@ <h2>Meet SlimJS</h2>
</div>
</slim-states>

<p>This is all possible thanks to SlimJS, and without effort as seen in the code. SlimJS is not a framework!
<p>This is all possible thanks to SlimJS, and look at the code - without effort!<br/>SlimJS is not a framework,
it's a series of es6 classes and base-classes
the are here for you to build your own native web components, without the sweat.
No need to comply to a 3rd party library's conventions anymore. Fear not of performance issues, it's native, it's easy and it's light.</p>
Expand Down
Binary file added example/Tutorial/slim1.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/Tutorial/slim2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added example/Tutorial/slim3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 6029eaa

Please sign in to comment.