Skip to content

Commit

Permalink
conversion to js files
Browse files Browse the repository at this point in the history
  • Loading branch information
eavichay committed Dec 7, 2016
1 parent 1855215 commit 7d2eb98
Show file tree
Hide file tree
Showing 11 changed files with 47 additions and 27 deletions.
9 changes: 3 additions & 6 deletions components/s-button.html → components/s-button.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
<script>

document.registerElement('s-button', class extends SlimBaseElement {
+(function() {
Slim('s-button', class extends SlimBaseElement {

get updateOnAttributes() {
return ['onclick', 'text']
Expand All @@ -25,6 +24,4 @@


})


</script>
}())
2 changes: 1 addition & 1 deletion components/s-container.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
+(function() {

document.registerElement('s-container', class extends SlimBaseElement {
Slim('s-container', class extends SlimBaseElement {

onAttributeChanged(attribute, oldVal, newVal) {
switch (attribute) {
Expand Down
6 changes: 3 additions & 3 deletions components/s-input.html → components/s-input.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script>
document.registerElement('s-input', class extends SlimBaseElement {
;(function(){
Slim('s-input', class extends SlimBaseElement {

get updateOnAttributes() {
return ['onchange',
Expand Down Expand Up @@ -49,4 +49,4 @@
}

})
</script>
})()
9 changes: 3 additions & 6 deletions components/s-repeat.html → components/s-repeat.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<script type="text/javascript">
+(function() {

+(function() {

document.registerElement('s-repeat', class SlimRepeat extends SlimBaseElement {
Slim('s-repeat', class SlimRepeat extends SlimBaseElement {

afterRender() {
this.update()
Expand Down Expand Up @@ -39,5 +37,4 @@
}
}
})
})()
</script>
})()
2 changes: 1 addition & 1 deletion components/s-states.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

const template = `<div currentState=""></div>`

document.registerElement('s-states', class extends SlimBaseElement {
Slim('s-states', class extends SlimBaseElement {

get updateOnAttributes() {
return ['current-state']
Expand Down
2 changes: 1 addition & 1 deletion example/Components/button-demo.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<link rel="import" href="../../components/s-button.html"/>
<link rel="import" href="../../components/s-button.js"/>
<script>


Expand Down
36 changes: 31 additions & 5 deletions example/Components/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents.min.js"></script>

<script src="../../SlimElement.js"></script>
<link rel="import" href="../../components/s-button.html" />
<link rel="import" href="../../components/s-input.html" />
<link rel="import" href="../../components/s-repeat.html" />
<link rel="import" href="../../components/s-button.js" />
<link rel="import" href="../../components/s-input.js" />
<link rel="import" href="../../components/s-repeat.js" />
<link rel="import" href="./button-demo.html" />
<link rel="import" href="./repeat-demo.html" />
<link rel="import" href="./repeat-item.html" />
Expand All @@ -27,8 +27,9 @@

body {
padding: 0;
margin: 0;
margin-bottom: 5em;
font-size: 1.5em;
padding-top: 6em;
background-color: #5aa99e;
font-family: "Roboto Slab", Sans-serif;
}
Expand All @@ -44,6 +45,17 @@
align-items: center;
justify-content: space-around;
padding: 2em;
margin: 0em;
margin-bottom: 4em;
}

h6 p {
text-align: left;
padding-left: 1.6em;
}

h6 img {
margin-left: 5em;
}

h2, h3, h4, h5 {
Expand Down Expand Up @@ -79,20 +91,34 @@
letter-spacing: 0.015em;
background-color: lightblue;
}

span.license {
font-family: Sans-serif;
position: fixed;
bottom: 0;
text-align: center;
width: 100%;
display: inline-block;
background-color: white;
padding: 0.5em;
font-size: 0.8em;
}
</style>

</head>
<body>
<span class="license">© 2016 Avichay Eyal. All code provided is open source under the MIT License</span>
<a href="https://github.com/eavichay/slim-web-components" target="_blank"><img style="position: fixed; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png"></a>

<s-container id="main-container" layout="vertical">

<h6>
<img src="./slim.js.logo.png" width="168px" height="56px"/>
<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>
</h6>
<h1>SLIM is your PRODUCTIVE way</h1>
<h1>for writing NATIVE web components</h1>
<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>Featuring</h2>
<ul>
<li>Lightweight and fast (~1KB minified)</li>
Expand Down
2 changes: 1 addition & 1 deletion example/Components/repeat-demo.html
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<script>

document.registerElement('repeat-demo', class extends SlimBaseElement {
Slim('repeat-demo', class extends SlimBaseElement {

get myItems() {
return this._myItems;
Expand Down
2 changes: 1 addition & 1 deletion example/Kanban/KanbanDemo.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<title>Kanban Demo - SlimJS</title>

<link rel="import" href="../../SlimElement.js" />
<link rel="import" href="../../components/s-repeat.html" />
<link rel="import" href="../../components/s-repeat.js" />
<script src="../../components/s-container.js"></script>

<script src="KanbanModel.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion example/States/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@


</s-states>
<button onclick="nextState()" value="next..."></button>
<input type="button" onclick="nextState()" value="next..."></input>

<script>

Expand Down
2 changes: 1 addition & 1 deletion example/Todo/TodoDemo.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<link rel="import" href="../../SlimElement.js"/>
<script src="TodoModel.js"></script>

<link rel="import" href="../../components/s-repeat.html">
<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>
Expand Down

0 comments on commit 7d2eb98

Please sign in to comment.