Skip to content

Commit

Permalink
Release of version 1.1.0
Browse files Browse the repository at this point in the history
Upgraded Polymer dependency to 1.9.
timeu committed May 25, 2017
1 parent 0af900d commit e4febbb
Showing 10 changed files with 160 additions and 126 deletions.
18 changes: 18 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
{
"extends": "eslint:recommended",
"rules": {
"no-console": 0
},
"env": {
"browser": true
},
"plugins": [
"html"
],
"globals": {
"CustomElements": false,
"HTMLImports": false,
"Polymer": false,
"WeakMap": false
}
}
2 changes: 1 addition & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
bower_components
.yo-rc.json
.vscode
21 changes: 11 additions & 10 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,21 +1,22 @@
language: node_js
sudo: required
node_js: stable
dist: trusty
before_script:
- npm install -g bower polylint web-component-tester eslint eslint-plugin-html
- bower install
- polylint
- eslint *.html test/*.html
node_js: '6'
addons:
firefox: latest
apt:
sources:
- google-chrome
- google-chrome
packages:
- google-chrome-stable
before_script:
- npm install -g bower polylint web-component-tester
- bower install
- polylint
- google-chrome-stable
script:
- xvfb-run wct --skip-plugin sauce
- if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct --skip-plugin local; fi
- xvfb-run wct
- 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi'
dist: trusty
env:
global:
- secure: QrF9OBBaC4NMJy5YoHzlldFlSnwTjEJtTEC/5DgLf7KD+p5K6rY6224bOWwE5UPsPnkNkKGCl8rJ+P/CHqSqH8/2+zMnDrSI+owvZiYxXMdCpencnn2m2F3p2VDmYdVXlKRxXjWO/DyKOjGf3Zf12LB9I/tVEG2RwF9FTpZEzmSZXiiHyZfjY2/I5Ib0MGhNudunrp9OprrOJAliumvOhNYJzFhFSzSfzgpoo+vVFpv+K5WhlhkZ0WoctRWZQ4EUGLOo/ifpSNOFs2weHRL7di15w4blGiA7jGfKk4i+jEAQVQUV0XeDjkhX6LCnKUIkTJr9UzDjsffe/nJrusmQw8gD4SwlTTWjNtWiiKyRezjlMzq/nAvGIEzVjVrWDouznfNt/3tVQLSOXoqzJIrDWeLp3fwtdOUDGPcrp8CkHUxLEqkwtON8Xny5FG0bl5uqt88yfhmetscx512PQjZH/+aTrKJwrYz06i30qB8B//5PfN0/amrE/n/4ewWbYqmsjVfc9zBlDc0tNbJ7z3db7KxtjBPc3BHq3QrvfFxowlGmqTNVRur3MwD2wVmOo7GtyTy8/ZFT7f0hw8W49fML1BPreY25lzQf2lqR5J+XYtbyTt6H3GTUmWIoq0CfmFzTXToIVZkR2ETqDZXzxDKU+QU4Pf+veS6SkWCjjM/9ZMY=
26 changes: 17 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,35 @@
[![Build Status](https://travis-ci.org/timeu/timeu-wizard.svg)](https://travis-ci.org/timeu/timeu-wizard)
[![Build Status](https://travis-ci.org/timeu/timeu-wizard.svg)](https://travis-ci.org/timeu/timeu-wizard) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/timeu/timeu-wizard)

_[Demo and API Docs](https://timeu.github.io/timeu-wizard/)_
_[Demo and API Docs](https://www.webcomponents.org/element/timeu/canvas-piechart)_


## <timeu-wizard>


The `timeu-wizard` element displaying the progress of a wizard as a series of connected circles.
By default the step number is displayed inside the circle and if provided a label below.
The `timeu-wizard` element displaying the progress of a wizard as a series of connected circles.
By default the step number is displayed inside the circle and if provided a label below.
The available steps are provided by either as an `array` of `Objects` or an `array` of `Strings`.


**This branch (master) works only with Polymer 2.x. For a Polymer 1.x version check out the 1.x branch**

## Versions (Polymer 2.x vs Polymer 1.x)
The *master* branch and all *2.x.x* releases require `Polymer 2.x`.
For `Polymer 1.x` support use *1.x.x* releases and the [1.x branch](https://github.com/timeu/timeu-wizard/tree/1.x).

## How to use

Simple example:



<!--
```
<custom-element-demo>
<template>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="timeu-wizard.html">
<next-code-block></next-code-block>
</template>
</template>
</custom-element-demo>
```
-->
@@ -35,9 +43,9 @@ Example with custom circle content:
```html
<timeu-wizard steps='[{"label:Step1","content":"A"},{label:"Step2","content":"B"}]'></timeu-wizard>
```
It is also possible to display a vertical progress by adding the `vertical` attribute:
It is also possible to display a vertical progress by adding the `vertical` attribute:
```html
<timeu-wizard vertical steps='["Step1","Step2","Step3"]' step="2"></timeu-wizard>
<timeu-wizard vertical steps='["Step1","Step2","Step3"]' step="2"></timeu-wizard>
```
### Styling

8 changes: 5 additions & 3 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "timeu-wizard",
"version": "1.0.1",
"version": "1.1.0",
"authors": [
"Uemit Seren <[email protected]>"
],
@@ -19,10 +19,12 @@
"/test/"
],
"dependencies": {
"polymer": "Polymer/polymer#^1.2.0"
"polymer": "Polymer/polymer#^1.9.0"
},
"devDependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"web-component-tester": "^3.4.0"
"iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
"web-component-tester": "Polymer/web-component-tester#^6.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}
139 changes: 73 additions & 66 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -9,67 +9,74 @@
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, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>timeu-wizard Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<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>
.controls {
margin-top: 20px;
display: flex;
justify-content: center;
padding:10px;
}
.controls * {
margin: 10px;
}
.controls input {
width:50px;
}
</style>
<style is="custom-style">
#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>
</head>
<body unresolved>
<template is="dom-bind">

<p>Default styling of <code>&lt;timeu-wizard&gt;</code>:</p>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>timeu-wizard Demo</title>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>

<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">

<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>
</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 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>
@@ -80,50 +87,50 @@
--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}}">
</timeu-wizard>

<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>
<script>
window.addEventListener('WebComponentsReady', function(e) {
var nextBtns = document.querySelectorAll('button[data-type=next]');

</template>
<script>
window.addEventListener('WebComponentsReady', function (e) {
var nextBtns = document.querySelectorAll('button[data-type=next]');
var previousBtns = document.querySelectorAll('button[data-type=previous]');
for(i = 0; i < nextBtns.length;i++) {
for (i = 0; i < nextBtns.length; i++) {
nextBtns[i].addEventListener('click', onNext);
}
for(i = 0; i < previousBtns.length;i++) {
for (i = 0; i < previousBtns.length; i++) {
previousBtns[i].addEventListener('click', onPrevious);
}
function onNext(event) {
var wzrd = document.querySelector('#'+event.srcElement.dataset.wizard);
var wzrd = document.querySelector('#' + event.srcElement.dataset.wizard);
wzrd.increment();
};
function onPrevious(event) {
var wzrd = document.querySelector('#'+event.srcElement.dataset.wizard);
var wzrd = document.querySelector('#' + event.srcElement.dataset.wizard);
wzrd.decrement();
};
var defaultWizard = document.querySelector('#default');
defaultWizard.step=2;
});

</script>
defaultWizard.step = 2;
});
</script>

</body>

</body>
</html>
</html>
7 changes: 7 additions & 0 deletions polymer.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"lint": {
"rules": [
"polymer-1"
]
}
}
13 changes: 13 additions & 0 deletions test/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"env": {
"mocha": true
},
"globals": {
"assert": true,
"WCT": true,
"fixture": true,
"Polymer": true,
"async": true,
"expect": true
}
}
31 changes: 15 additions & 16 deletions timeu-wizard.html
Original file line number Diff line number Diff line change
@@ -10,8 +10,8 @@
<link rel="import" href="../polymer/polymer.html">

<!--
An element for displaying the progress of a wizard as a series of connected circles.
By default the step number is displayed inside the circle and if provided a label below.
An element for displaying the progress of a wizard as a series of connected circles.
By default the step number is displayed inside the circle and if provided a label below.
The available steps are provided by either as an `array` of `Objects` or an `array` of `Strings`.
Simple example:
@@ -24,9 +24,9 @@
<timeu-wizard steps='[{"label:Step1","content":"A"},{label:"Step2","content":"B"}]'></timeu-wizard>
It is also possible to display a vertical progress by adding the `vertical` attribute:
It is also possible to display a vertical progress by adding the `vertical` attribute:
<timeu-wizard vertical steps='["Step1","Step2","Step3"]' step="2"></timeu-wizard>
<timeu-wizard vertical steps='["Step1","Step2","Step3"]' step="2"></timeu-wizard>
### Styling
@@ -67,8 +67,7 @@
box-sizing: border-box;
width:100%;
height:100%;

@apply(--timeu-wizard);
@apply --timeu-wizard ;
}

:host([horizotnal]) ul {
@@ -92,7 +91,7 @@
padding:0;
margin:0;

@apply(--timeu-wizard-list);
@apply --timeu-wizard-list;
}

#line{
@@ -145,7 +144,7 @@
height:100%;
position:relative;

@apply(--timeu-wizard-container);
@apply --timeu-wizard-container;
}

#wizard {
@@ -160,7 +159,7 @@
text-align: center;
color: var(--timeu-wizard-filling-color,#dfdfdf);

@apply(--timeu-wizard-list-item);
@apply --timeu-wizard-list-item;
}

#wizard li[data-content]:before {
@@ -185,16 +184,16 @@
transition: background-colorvar(--timeu-wizard-anim-speed,0.5s), border-color var(--timeu-wizard-anim-speed,0.5s);
font-size:var(--timeu-wizard-step-font-size,25px);

@apply(--timeu-wizard-list-item-icon);
@apply --timeu-wizard-list-item-icon;
}

#wizard li.active, #wizard li.done {
color: var(--timeu-wizard-active-color,#2db36f);
@apply(--timeu-wizard-list-item-active);
@apply --timeu-wizard-list-item-active;
}

#wizard li.done {
@apply(--timeu-wizard-list-item-done);
@apply --timeu-wizard-list-item-done;
}

#wizard li.done:before {
@@ -221,7 +220,7 @@
transition: all var(--timeu-wizard-anim-speed,0.5s);
-webkit-transition: all var(--timeu-wizard-anim-speed,0.5s);

@apply(--timeu-wizard-list-item-checkicon);
@apply --timeu-wizard-list-item-checkicon;
}

#wizard li.done .checkicon {
@@ -306,7 +305,7 @@
// Element Behavior

/**
* Increment the current step
* Increment the current step
*
* Use this function for moving to the next step in the wizard
*/
@@ -319,7 +318,7 @@
/**
* Decrement the current step
*
* Use this function for moving to the previous step in the wizard
* Use this function for moving to the previous step in the wizard
*/
decrement: function() {
if (this.step > 1) {
@@ -366,7 +365,7 @@
},

_calculateFilling: function(steps,step,vertical) {
var ratio = this._caclulateRatio(steps,step);
var ratio = this._caclulateRatio(steps,step);
var scaleX = (vertical ? 1 : ratio);
var scaleY = (vertical ? ratio : 1);
return scaleX+","+scaleY;
21 changes: 0 additions & 21 deletions wct.conf.json

This file was deleted.

0 comments on commit e4febbb

Please sign in to comment.