Skip to content

Commit

Permalink
First Polymer 2.x version
Browse files Browse the repository at this point in the history
Refactor Polymer 1.x version to class based element.
  • Loading branch information
timeu committed May 25, 2017
1 parent e4febbb commit af1d77f
Show file tree
Hide file tree
Showing 8 changed files with 258 additions and 258 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@
"no-console": 0
},
"env": {
"browser": true
"browser": true,
"es6": true
},
"plugins": [
"html"
Expand Down
12 changes: 7 additions & 5 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "timeu-wizard",
"version": "1.1.0",
"version": "2.0.0",
"authors": [
"Uemit Seren <[email protected]>"
],
Expand All @@ -19,12 +19,14 @@
"/test/"
],
"dependencies": {
"polymer": "Polymer/polymer#^1.9.0"
"polymer": "Polymer/polymer#^2.0.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
"web-component-tester": "Polymer/web-component-tester#^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
},
"resolutions": {
"polymer": "^2.0.0"
}
}
172 changes: 88 additions & 84 deletions demo/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,93 +21,97 @@

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="import" href="../timeu-wizard.html">
<style is="custom-style" include="demo-pages-shared-styles">
.controls {
margin-top: 20px;
display: flex;
justify-content: center;
padding: 10px;
}

.controls * {
margin: 10px;
}

.controls input {
width: 50px;
}

#css {
--timeu-wizard-line-color: yellow;
--timeu-wizard-line-size: 3px;
--timeu-wizard-circle-size: 60px;
--timeu-wizard-filling-color: red;
--timeu-wizard-anim-speed: 1s;
--timeu-wizard-active-color: blue;
--timeu-wizard-label-font-size: 20px;
--timeu-wizard-step-font-size: 30px;
--timeu-wizard-circle-border-size: 2px;
}

#icon {
--timeu-wizard-step-font-family: FontAwesome;
}
</style>
<custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
.controls {
margin-top: 20px;
display: flex;
justify-content: center;
padding: 10px;
}

.controls * {
margin: 10px;
}

.controls input {
width: 50px;
}

#css {
--timeu-wizard-line-color: yellow;
--timeu-wizard-line-size: 3px;
--timeu-wizard-circle-size: 60px;
--timeu-wizard-filling-color: red;
--timeu-wizard-anim-speed: 1s;
--timeu-wizard-active-color: blue;
--timeu-wizard-label-font-size: 20px;
--timeu-wizard-step-font-size: 30px;
--timeu-wizard-circle-border-size: 2px;
}

#icon {
--timeu-wizard-step-font-family: FontAwesome;
}
</style>
</custom-style>
</head>

<body unresolved>
<template is="dom-bind">
<p>Default styling of <code>&lt;timeu-wizard&gt;</code>:</p>
<timeu-wizard id="default" steps='["Step 1","Step 2","Step3","Step4","Step5"]' step="{{defaultWizardStep}}">
</timeu-wizard>
<div class="controls">
<button data-type="previous" data-wizard="default">Previous</button>
<button data-type="next" data-wizard="default">Next</button>
<input type="number" min="1" value="{{defaultWizardStep::input}}">
</div>

<p>Example with icons (FontAwesome) <code>&lt;timeu-wizard&gt;</code>:</p>

<timeu-wizard id="icon" steps='[{"label":"FIRST STEP","content":"&#xf007;"},{"label":"CHOOSE INTEREST","content":"&#xf132;"},{"label":"ADD FRIENDS","content":"&#xf041;"},{"label":"VIEW MAP","content":"&#xf07a;"}]'
step="{{iconWizardStep}}">
</timeu-wizard>
<div class="controls">
<button data-type="previous" data-wizard="icon">Previous</button>
<button data-type="next" data-wizard="icon">Next</button>
<input type="number" min="1" value="{{iconWizardStep::input}}">
</div>

<p>Example with custom CSS variables <code>&lt;timeu-wizard&gt;</code>:</p>
<p><code>--timeu-wizard-line-color: yellow;<br>
--timeu-wizard-line-size: 3px;<br>
--timeu-wizard-circle-size: 60px;<br>
--timeu-wizard-filling-color: red;<br>
--timeu-wizard-anim-speed: 1s;<br>
--timeu-wizard-active-color: blue;<br>
--timeu-wizard-label-font-size: 20px;<br>
--timeu-wizard-step-font-size: 30px;<br>
--timeu-wizard-circle-border-size: 2px;<br></code></p>

<timeu-wizard id="css" steps='["Step 1","Step 2","Step3","Step4"]' step="{{customcssStep}}">
</timeu-wizard>
<div class="controls">
<button data-type="previous" data-wizard="css">Previous</button>
<button data-type="next" data-wizard="css">Next</button>
<input type="number" min="1" value="{{customcssStep::input}}">
</div>

<p>Example for vertical <code>&lt;timeu-wizard vertical&gt;</code>:</p>
<div style="height:500px;width:50px;">
<timeu-wizard id="vertical" steps='["Step 1","Step 2","Step3","Step4"]' vertical step="{{verticalStep}}">
<body>
<dom-bind>
<template>
<p>Default styling of <code>&lt;timeu-wizard&gt;</code>:</p>
<timeu-wizard id="default" steps='["Step 1","Step 2","Step3","Step4","Step5"]' step="{{defaultWizardStep}}">
</timeu-wizard>
<div class="controls">
<button data-type="previous" data-wizard="default">Previous</button>
<button data-type="next" data-wizard="default">Next</button>
<input type="number" min="1" value="{{defaultWizardStep::input}}">
</div>

<p>Example with icons (FontAwesome) <code>&lt;timeu-wizard&gt;</code>:</p>

<timeu-wizard id="icon" steps='[{"label":"FIRST STEP","content":"&#xf007;"},{"label":"CHOOSE INTEREST","content":"&#xf132;"},{"label":"ADD FRIENDS","content":"&#xf041;"},{"label":"VIEW MAP","content":"&#xf07a;"}]'
step="{{iconWizardStep}}">
</timeu-wizard>
<div class="controls">
<button data-type="previous" data-wizard="icon">Previous</button>
<button data-type="next" data-wizard="icon">Next</button>
<input type="number" min="1" value="{{iconWizardStep::input}}">
</div>

<p>Example with custom CSS variables <code>&lt;timeu-wizard&gt;</code>:</p>
<p><code>--timeu-wizard-line-color: yellow;<br>
--timeu-wizard-line-size: 3px;<br>
--timeu-wizard-circle-size: 60px;<br>
--timeu-wizard-filling-color: red;<br>
--timeu-wizard-anim-speed: 1s;<br>
--timeu-wizard-active-color: blue;<br>
--timeu-wizard-label-font-size: 20px;<br>
--timeu-wizard-step-font-size: 30px;<br>
--timeu-wizard-circle-border-size: 2px;<br></code></p>

<timeu-wizard id="css" steps='["Step 1","Step 2","Step3","Step4"]' step="{{customcssStep}}">
</timeu-wizard>
</div>
<div class="controls">
<button data-type="previous" data-wizard="vertical">Previous</button>
<button data-type="next" data-wizard="vertical">Next</button>
<input type="number" min="1" value="{{verticalStep::input}}">
</div>

</template>
<div class="controls">
<button data-type="previous" data-wizard="css">Previous</button>
<button data-type="next" data-wizard="css">Next</button>
<input type="number" min="1" value="{{customcssStep::input}}">
</div>

<p>Example for vertical <code>&lt;timeu-wizard vertical&gt;</code>:</p>
<div style="height:500px;width:50px;">
<timeu-wizard id="vertical" steps='["Step 1","Step 2","Step3","Step4"]' vertical step="{{verticalStep}}">
</timeu-wizard>
</div>
<div class="controls">
<button data-type="previous" data-wizard="vertical">Previous</button>
<button data-type="next" data-wizard="vertical">Next</button>
<input type="number" min="1" value="{{verticalStep::input}}">
</div>

</template>
</dom-bind>
<script>
window.addEventListener('WebComponentsReady', function (e) {
var nextBtns = document.querySelectorAll('button[data-type=next]');
Expand Down
39 changes: 13 additions & 26 deletions index.html
Original file line number Diff line number Diff line change
@@ -1,29 +1,16 @@
<!doctype html>
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">

</head>
<body unresolved>
<!-- Note: if the main element for this repository doesn't
match the folder name, add a src="&lt;main-component&gt;.html" attribute,
where &lt;main-component&gt;.html" is a file that imports all of the
components you want documented. -->
<iron-component-page></iron-component-page>

</body>
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="0;url=demo/" />
<title>timeu-wizard</title>
</head>
<body>
<!--
ELEMENT API DOCUMENTATION SUPPORT COMING SOON
Visit demo/index.html to see live examples of your element running.
This page will automatically redirect you there when run in the browser
with `polymer serve`.
-->
</body>
</html>
2 changes: 1 addition & 1 deletion polymer.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"lint": {
"rules": [
"polymer-1"
"polymer-2"
]
}
}
3 changes: 2 additions & 1 deletion test/.eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
"fixture": true,
"Polymer": true,
"async": true,
"expect": true
"expect": true,
"flush": true
}
}
Loading

0 comments on commit af1d77f

Please sign in to comment.