├── .bowerrc
├── .gitignore
├── LICENSE
├── README.md
├── app
    ├── html
    │   ├── app-reducer.html
    │   ├── app-storage.html
    │   ├── app-store.html
    │   ├── app-ticker.html
    │   ├── reducers
    │   │   ├── graph-reducer.html
    │   │   ├── quote-reducer.html
    │   │   └── state-reducer.html
    │   ├── stock-app.html
    │   ├── stock-graph-filter.html
    │   ├── stock-view.html
    │   ├── tickers
    │   │   ├── polymer-ticker.html
    │   │   └── stock-ticker.html
    │   ├── utils
    │   │   ├── quote-transform.html
    │   │   └── symbol-url.html
    │   └── view
    │   │   ├── app-header.html
    │   │   ├── stock-details.html
    │   │   ├── stock-graph-filter.html
    │   │   ├── stock-graph.html
    │   │   └── stock-search.html
    └── scss
    │   ├── app-header.scss
    │   ├── stock-app.scss
    │   ├── stock-details.scss
    │   ├── stock-graph-filter.scss
    │   ├── stock-search.scss
    │   └── stock-view.scss
├── assets
    └── img
    │   ├── background-blur.jpg
    │   └── background.jpg
├── bower.json
├── doc
    ├── index.html
    ├── main.css
    └── polymer-logo.svg
├── favicon.png
├── gulpfile.js
├── index.html
└── package.json


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory": "bower"
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .tmp
3 | bower
4 | dist
5 | node_modules
6 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Jan Miksovsky
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Redux with Polymer
 2 | I've written a Stock Ticker appliciation as an experiment to see how well
 3 | Polymer and Redux work together.
 4 | 
 5 | I've written a post about this experiment [here](http://scaljeri.github.io/polymer-redux)
 6 | 
 7 | The Stock Ticker application DEMO can be found [here](http://scaljeri.github.io/polymer-redux/demo/?q=polymer)
 8 | 
 9 | ## Setup
10 | 
11 |     $> npm install
12 |     $> bower install
13 |     $> gulp
14 |     $> python -m SimpleHTTPServer # or an other webserver
15 | 
16 | 
17 | [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/scaljeri/polymer-redux/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
18 | 
19 | 


--------------------------------------------------------------------------------
/app/html/app-reducer.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../bower/polymer/polymer.html">
 2 | 
 3 | <link rel="import" href="reducers/graph-reducer.html">
 4 | <link rel="import" href="reducers/quote-reducer.html">
 5 | <link rel="import" href="reducers/state-reducer.html">
 6 | 
 7 | <dom-module id="app-reducer">
 8 |     <template>
 9 |         <graph-reducer></graph-reducer>
10 |         <quote-reducer></quote-reducer>
11 |         <state-reducer></state-reducer>
12 |     </template>
13 |     <script>
14 |         (function () {
15 |             class AppReducer {
16 |                 beforeRegister() {
17 |                     this.is = 'app-reducer';
18 |                 }
19 | 
20 |                 transform(state, action, data) {
21 |                     for( let i = 0; i < this.children.length; i++) {
22 |                         state = this.children[i].transform(state, action, data);
23 |                     };
24 | 
25 |                     return state;
26 |                 }
27 |             }
28 | 
29 |             Polymer(AppReducer);
30 |         })();
31 |     </script>
32 | </dom-module>
33 | 


--------------------------------------------------------------------------------
/app/html/app-storage.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../bower/polymer/polymer.html">
  2 | <link rel="import" href="../../bower/firebase-element/firebase-document.html">
  3 | <link rel="import" href="../../bower/firebase-element/firebase-collection.html">
  4 | <link rel="import" href="../../bower/iron-localstorage/iron-localstorage.html">
  5 | 
  6 | <link rel="import" href="app-store.html">
  7 | 
  8 | <dom-module id="app-storage">
  9 |     <template>
 10 |         <iron-localstorage name="stock-app"
 11 |                            value="{{ls}}"
 12 |                            log="false"
 13 |                            on-iron-localstorage-load-empty="initializeLocalStorage"></iron-localstorage>
 14 | 
 15 |         <!--
 16 |         <firebase-document
 17 |                 id="savedSymbols"
 18 |                 log="true"
 19 |                 location="https://polymer-redux.firebaseio.com/symbols"
 20 |                 data="{{fbSymbols}}"></firebase-document>-->
 21 | 
 22 |         <firebase-collection
 23 |                            id="savedSymbols"
 24 |                            limit-to-first="10"
 25 |                            log="true"
 26 |                            location="https://polymer-redux.firebaseio.com/symbols"
 27 |                            on-firebase-value="updatedSymbols"
 28 |                            data="{{fbSymbols}}"></firebase-collection>
 29 | 
 30 |         <!--limit-to-first="10"-->
 31 |         <!--start-at="[[queryString]]"-->
 32 | 
 33 |         <firebase-document location="https://polymer-redux.firebaseio.com/page"
 34 |                            log="false"
 35 |                            data="{{fbPage}}"></firebase-document>
 36 | 
 37 |         <firebase-document location="{{location}}"
 38 |                            log="false"
 39 |                            data="{{fbState}}"></firebase-document>
 40 | 
 41 |         <app-store id="store"></app-store>
 42 |     </template>
 43 |     <script>
 44 |         (function () {
 45 |             function guid() {
 46 |                 function s4() {
 47 |                     return Math.floor((1 + Math.random()) * 0x10000)
 48 |                     .toString(16)
 49 |                     .substring(1);
 50 |                 }
 51 |                 return `${s4()+s4()}-${s4()}-${s4()}-${s4()}-${s4()+s4()+s4()}`;
 52 |             }
 53 | 
 54 |             class AppStorage {
 55 |                 beforeRegister() {
 56 |                     this.is = 'app-storage';
 57 | 
 58 |                     this.listeners = {
 59 |                         'savedSymbols.firebase-value': 'updatedSymbols'
 60 |                     };
 61 | 
 62 |                     this.properties = {
 63 |                         state: {
 64 |                             notify: true,
 65 |                             observer: 'updatedState',
 66 |                             type: Object
 67 |                         },
 68 |                         fbState: {
 69 |                             notify: true,
 70 |                             observer: 'updatedFbState',
 71 |                             type: Object
 72 |                         },
 73 |                         fbPage: {
 74 |                             notify: true,
 75 |                             observer: 'updatedPage',
 76 |                             type: Object
 77 |                         },
 78 |                         fbSymbols: {
 79 |                             notify: true,
 80 |                             type: Array
 81 |                         },
 82 |                         ls: {
 83 |                             notify: true,
 84 |                             observer: 'handleLs',
 85 |                             type: Object
 86 |                         }
 87 |                     };
 88 |                 }
 89 | 
 90 |                 updatedSymbols(event, snapshot) {
 91 |                     if (snapshot.exists()) {
 92 |                         this.$.store.dispatch('UPDATE_SYMBOLS', {symbols: this.fbSymbols});
 93 |                     }
 94 |                 }
 95 | 
 96 |                 updatedState() {
 97 |                     if (this.state.quote && this.state.quote.Name) {
 98 |                         let newSymbol = this.state.quote.symbol;
 99 | 
100 |                         if (newSymbol !== this.currentSymbol) {
101 |                             // new symbol
102 |                             this.currentSymbol = newSymbol;
103 |                             let isPresent = this.fbSymbols.find((symbol) => {
104 |                                 return symbol.code.toLowerCase() === newSymbol.toLowerCase();
105 |                             });
106 | 
107 |                             if (!isPresent) {
108 |                                 this.$.savedSymbols.add({code: newSymbol, name: this.state.quote.Name});
109 |                             }
110 |                         }
111 |                     }
112 |                 }
113 | 
114 |                 handleLs() {
115 |                     if (this.ls) {
116 |                         this.set('location', `https://polymer-redux.firebaseio.com/${this.ls.guid}`);
117 |                     }
118 |                 }
119 | 
120 |                 initializeLocalStorage() {
121 |                     this.set('ls', {guid: guid()});
122 |                 }
123 | 
124 |                 updatedPage() {
125 |                     if (!this.pageHit) {
126 |                         this.pageHit = this.fbPage.hits + 1;
127 | 
128 |                         setTimeout(() => {
129 |                                 this.set('fbPage.hits', this.pageHit);
130 |                             }, 0);
131 |                     } else {
132 |                         this.pageHit = this.fbPage.hits;
133 |                     }
134 | 
135 |                     this.$.store.dispatch('UPDATE_PAGEHITS', {hit: this.pageHit});
136 |                 }
137 | 
138 |                 updatedFbState() {
139 |                     if (this.fbState && !this.state.quote) {
140 |                         this.$.store.dispatch('INITIALIZE_STATE', {state: this.fbState});
141 |                     }
142 | 
143 |                     this.fire('ready');
144 |                 }
145 | 
146 |                 saveState() {
147 |                     this.set('fbState', this.state);
148 |                 }
149 | 
150 |                 resetState() {
151 |                     // TODO: page???
152 |                     this.set('fbState', {filter: {}, data: [], quote: {}, page: {}});
153 |                 }
154 |             }
155 | 
156 |             Polymer(AppStorage);
157 |         })();
158 |     </script>
159 | </dom-module>
160 | 


--------------------------------------------------------------------------------
/app/html/app-store.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../bower/polymer/polymer.html">
 2 | 
 3 | <dom-module id="app-store">
 4 |     <script>
 5 |         (function () {
 6 |             let appStore = {};
 7 | 
 8 |             class AppStore {
 9 |                 beforeRegister() {
10 |                     this.is = 'app-store';
11 | 
12 |                     this.properties = {
13 |                         state: {
14 |                             notify: true,
15 |                             type:     Object,
16 |                             value:    {filter: {interval: 1000, samples: 2}}
17 |                         },
18 |                         reducer: {
19 |                             notify:   true,
20 |                             readonly: true,
21 |                             observer: 'updateReducer',
22 |                             type:     Object
23 |                         }
24 |                     };
25 |                 }
26 | 
27 |                 updateReducer(reducer) {
28 |                     if (reducer) {
29 |                         appStore = this; // Only use one store
30 |                     }
31 |                 }
32 | 
33 |                 dispatch(action, data) {
34 |                     if (appStore.reducer) {
35 |                         let newState = appStore.reducer.transform(appStore.state, action, data);
36 | 
37 |                         newState.updated = new Date();
38 |                         appStore.state = newState;
39 |                     }
40 |                 }
41 |             }
42 | 
43 |             Polymer(AppStore);
44 |         })();
45 |     </script>
46 | </dom-module>
47 | 


--------------------------------------------------------------------------------
/app/html/app-ticker.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../bower/polymer/polymer.html">
 2 | 
 3 | <link rel="import" href="./tickers/polymer-ticker.html">
 4 | <link rel="import" href="./tickers/stock-ticker.html">
 5 | 
 6 | <dom-module id="app-ticker">
 7 |     <template>
 8 |       <stock-ticker   id="yahoo" interval="[[filter.interval]]" symbol="[[filter.symbol]]"></stock-ticker>
 9 |       <polymer-ticker id="polymer" filter="[[filter]]" quote="[[quote]]"></polymer-ticker>
10 |     </template>
11 |     <script>
12 |         (function () {
13 |             let series;
14 | 
15 |             class AppTicker {
16 |                 beforeRegister() {
17 |                     this.is = 'app-ticker';
18 | 
19 |                     this.properties = {
20 |                         filter: {
21 |                             notify: true,
22 |                             observer: 'updatedFilter',
23 |                             type: Object
24 |                         },
25 |                         quote: {
26 |                             notify: true,
27 |                             type: Object
28 |                         }
29 |                     };
30 |                 }
31 | 
32 |                 updatedFilter() {
33 |                     if (this.filter.symbol && this.symbol !== this.filter.symbol) {
34 |                         this.symbol = this.filter.symbol;
35 |                         if (this.current) {
36 |                             this.current.stop();
37 |                         }
38 | 
39 |                         this.current = this.filter.symbol === 'polymer' ? this.$.polymer : this.$.yahoo;
40 |                         this.current.start();
41 |                     }
42 |                 }
43 |             }
44 | 
45 |             Polymer(AppTicker);
46 |         })();
47 |     </script>
48 | </dom-module>
49 | 


--------------------------------------------------------------------------------
/app/html/reducers/graph-reducer.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../../bower/polymer/polymer.html">
 2 | 
 3 | <dom-module id="ticker-reducer">
 4 |     <script>
 5 |         (function () {
 6 |             'use strict';
 7 | 
 8 |             class GraphReducer {
 9 |                 beforeRegister() {
10 |                     this.is = 'graph-reducer';
11 |                 }
12 | 
13 |                 transform(state, action, input) {
14 |                     let filter, data;
15 | 
16 |                     switch (action) {
17 |                         case 'ADD_DATA_ITEM':
18 |                             data = Object.assign([], state.data || []);
19 | 
20 |                             if (data.push(input.item) === state.filter.samples) {
21 |                                 data.shift();
22 |                             }
23 | 
24 |                             return Object.assign({}, state, {data});
25 |                         case 'FILTER_SYMBOL_CHANGE':
26 |                             if (state.filter.symbol !== input.symbol) {
27 |                                 filter = Object.assign({}, state.filter, {
28 |                                     symbol: input.symbol,
29 |                                     queryString: input.symbol});
30 | 
31 |                                 return Object.assign({}, state, {filter}, {data: []});
32 |                             }
33 |                             return state;
34 |                         case 'FILTER_INTERVAL_CHANGE':
35 |                             filter = Object.assign({}, state.filter, {interval: input.interval});
36 | 
37 |                             return Object.assign({}, state, {filter});
38 |                         case 'FILTER_SAMPLES_CHANGE':
39 |                             let samples = Math.min(100, input.samples);
40 |                             data = [...state.data];
41 | 
42 |                             if (data.length > samples) {
43 |                                 data = data.slice(length - samples);
44 |                             }
45 | 
46 |                             filter.samples = samples;
47 |                             return Object.assign({}, state, {filter}, {data});
48 |                         case 'FILTER_QUERYSTRING_CHANGE':
49 |                             if (input.queryString !== state.filter.queryString) {
50 |                                 let filter = Object.assign({}, state.filter, {queryString: input.queryString.replace(/\s-.*$/, '')});
51 |                                 return Object.assign({}, state, {filter});
52 |                             }
53 |                             return state;
54 |                         default:
55 |                             return state;
56 |                     }
57 |                 }
58 |             }
59 | 
60 |             Polymer(GraphReducer);
61 |         })();
62 |     </script>
63 | </dom-module>
64 | 


--------------------------------------------------------------------------------
/app/html/reducers/quote-reducer.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../../bower/polymer/polymer.html">
 2 | 
 3 | <dom-module id="stock-details-reducer">
 4 |     <script>
 5 |         (function () {
 6 |             'use strict';
 7 | 
 8 |             class QuoteReducer {
 9 |                 beforeRegister() {
10 |                     this.is = 'quote-reducer';
11 |                 }
12 | 
13 |                 transform(state, action, input) {
14 |                     switch (action) {
15 |                         case 'QUOTE_CHANGE':
16 |                             return Object.assign({}, state, {quote: input.quote});
17 |                         default:
18 |                             return state;
19 |                     }
20 |                 }
21 |             }
22 | 
23 |             Polymer(QuoteReducer);
24 |         })();
25 |     </script>
26 | </dom-module>
27 | 


--------------------------------------------------------------------------------
/app/html/reducers/state-reducer.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../../bower/polymer/polymer.html">
 2 | 
 3 | <dom-module id="ticker-reducer">
 4 |     <script>
 5 |         (function () {
 6 |             'use strict';
 7 | 
 8 |             class StateReducer {
 9 |                 beforeRegister() {
10 |                     this.is = 'state-reducer';
11 |                 }
12 | 
13 |                 transform(state, action, input) {
14 |                     let page;
15 | 
16 |                     switch (action) {
17 |                         case 'INITIALIZE_STATE':
18 |                             if (input.state.filter && !input.state.filter.queryString) {
19 |                                 state.filter.queryString = input.state.filter.symbol;
20 |                             }
21 | 
22 |                             return Object.assign({}, state, {
23 |                                 data: Object.assign([], input.state.data),
24 |                                 filter: Object.assign({}, state.filter, input.state.filter),
25 |                                 symbols: Object.assign([], state.symbols),
26 |                                 quote: Object.assign({}, input.state.quote)
27 |                             });
28 |                         case 'UPDATE_PAGEHITS':
29 |                             page = Object.assign({}, state.page, {hit: input.hit});
30 | 
31 |                             return Object.assign({}, state, {page});
32 |                         case 'UPDATE_SYMBOLS':
33 |                             let symbols = input.symbols.map((symbol) => {
34 |                                 return `${symbol.code} - ${symbol.name}`;
35 |                             });
36 | 
37 |                             return Object.assign({}, state, {symbols});
38 |                         default:
39 |                             return state;
40 |                     }
41 |                 }
42 |             }
43 | 
44 |             Polymer(StateReducer);
45 |         })();
46 |     </script>
47 | </dom-module>
48 | 


--------------------------------------------------------------------------------
/app/html/stock-app.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../bower/polymer/polymer.html">
 2 | <link rel="import" href="../../bower/paper-input/paper-input.html">
 3 | <link rel="import" href="../../bower/paper-button/paper-button.html">
 4 | 
 5 | <link rel="import" href="app-store.html">
 6 | <link rel="import" href="app-reducer.html">
 7 | <link rel="import" href="app-storage.html">
 8 | <link rel="import" href="stock-view.html">
 9 | <link rel="import" href="view/app-header.html">
10 | <link rel="import" href="view/stock-search.html">
11 | <link rel="import" href="view/stock-details.html">
12 | <link rel="import" href="utils/quote-transform.html">
13 | <link rel="import" href="utils/symbol-url.html">
14 | 
15 | <dom-module id="stock-app">
16 |     <style>
17 |         /* inject:css */
18 |     </style>
19 | 
20 |     <template>
21 |         <app-reducer id="reducer" filter="[[state.filter]]"></app-reducer>
22 |         <app-store id="store" state="{{state}}" reducer="[[reducer]]"></app-store>
23 |         <app-storage id="storage" state="[[state]]" on-ready="handleReady"></app-storage>
24 | 
25 |         <app-ticker quote="[[state.quote]]" filter="[[state.filter]]"></app-ticker>
26 |         <symbol-url id="urlSymbol" symbol="[[state.filter.symbol]]"></symbol-url>
27 | 
28 |         <app-header hits="[[state.page.hit]]">
29 |             <paper-button on-click="saveState" raised class="save">Save app-state</paper-button>
30 |             <paper-button on-click="resetState" raised class="reset">Reset app-state</paper-button>
31 |         </app-header>
32 | 
33 |         <stock-view filter="[[state.filter]]" quote="[[state.quote]]" data="[[state.data]]">
34 |             <article id="details">
35 |               <stock-search symbols="[[state.symbols]]" query-string="[[state.filter.queryString]]"></stock-search>
36 |               <stock-details quote="[[state.quote]]"></stock-details>
37 |             <article>
38 |         </stock-view>
39 | 
40 |         <footer>
41 |         </footer>
42 |     </template>
43 |     <script>
44 |         (function () {
45 |             class StockApp {
46 |                 // Element setup goes in beforeRegister instead of createdCallback.
47 |                 beforeRegister() {
48 |                     this.is = 'stock-app';
49 | 
50 |                     // Define the properties object in beforeRegister.
51 |                     this.properties = {
52 |                         reducer: {
53 |                             notify: true,
54 |                             readonly: true,
55 |                             type: Object
56 |                         },
57 |                         state: {
58 |                           notify: true,
59 |                           readonly: true,
60 |                           type: Object
61 |                         }
62 |                     };
63 |                 }
64 | 
65 |                 saveState() {
66 |                     this.$.storage.saveState();
67 |                 }
68 | 
69 |                 resetState() {
70 |                     this.$.storage.resetState();
71 |                 }
72 | 
73 |                 handleReady() {
74 |                     this.$.urlSymbol.activate();
75 |                 }
76 | 
77 |                 ready() {
78 |                     this.set('state', this.$.store.state);
79 |                     this.set('reducer', this.$.reducer);
80 |                 }
81 |             }
82 | 
83 |             // Register the element using Polymer's constructor.
84 |             Polymer(StockApp);
85 |         })();
86 |     </script>
87 | </dom-module>
88 | 


--------------------------------------------------------------------------------
/app/html/stock-graph-filter.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../bower/polymer/polymer.html">
 2 | 
 3 | <link rel="import" href="app-store.html">
 4 | 
 5 | <dom-module id="stock-graph-filter">
 6 |     <style>
 7 |         /* inject:css */
 8 |     </style>
 9 |     <template>
10 |         <app-store id="store"></app-store>
11 | 
12 |         <div class="view-settings-wrapper" on-input="_onChangeInput">
13 |             <paper-input-container type="number">
14 |                 <label>Interval (ms,  1000)</label>
15 |                 <input type="number" id="stock-name" is="iron-input" value="{{filter.interval}}">
16 |             </paper-input-container>
17 | 
18 |             <div class="slider-wrapper">
19 |                 <label>Max data points: <span>{{samples}}</label>
20 |                 <paper-slider on-change="_onChangeSlider" min="10" max="100" value="{{filter.samples}}" pin="true"></paper-slider>
21 |             <div>
22 |         </div>
23 |     </template>
24 |     <script>
25 |         (function () {
26 |             class StockGraphFilter {
27 |                 beforeRegister() {
28 |                     this.is = 'stock-graph-filter';
29 | 
30 |                     this.properties = {
31 |                         filter: {
32 |                             type: Object,
33 |                             notify: true,
34 |                         }
35 |                     };
36 |                 }
37 | 
38 |                 _onChangeInput(event) {
39 |                   this.$.store.dispatch('FILTER_INTERVAL_CHANGE', {interval: parseInt(event.target.value)})
40 |                 }
41 | 
42 |                 _onChangeSlider(event) {
43 |                   this.$.store.dispatch('FILTER_SAMPLES_CHANGE', {samples: parseInt(event.target.value)});
44 |                 }
45 |             }
46 | 
47 |             Polymer(StockGraphFilter);
48 |         })();
49 |     </script>
50 | </dom-module>
51 | 


--------------------------------------------------------------------------------
/app/html/stock-view.html:
--------------------------------------------------------------------------------
 1 | <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 2 | <script src="http://code.highcharts.com/highcharts.js"></script>
 3 | <script src="http://code.highcharts.com/modules/exporting.js"></script>
 4 | 
 5 | <link rel="import" href="../../bower/polymer/polymer.html">
 6 | <link rel="import" href="../../bower/paper-slider/paper-slider.html">
 7 | <link rel="import" href="app-ticker.html">
 8 | <link rel="import" href="view/stock-graph.html">
 9 | <link rel="import" href="view/stock-graph-filter.html">
10 | 
11 | <dom-module id="stock-view">
12 |     <style>
13 |         /* inject:css */
14 |     </style>
15 |     <template>
16 |         <content></content>
17 |         <article class=graph>
18 |               <div class="overlay"></div>
19 |               <stock-graph quote="[[quote]]" data="[[data]]" samples="[[filter.samples]]"></stock-graph>
20 |               <stock-graph-filter filter="[[filter]]"></stock-graph-filter>
21 |         </article>
22 |     </template>
23 |     <script>
24 |         (function () {
25 |             let series;
26 | 
27 |             class StockView {
28 |                 beforeRegister() {
29 |                     this.is = 'stock-view';
30 | 
31 |                     this.properties = {
32 |                         filter: {
33 |                             type: Object,
34 |                             notify: true
35 |                         },
36 |                         quote: {
37 |                             type: Object,
38 |                             notify: true
39 |                         }
40 |                     };
41 |                 }
42 |             }
43 | 
44 |             Polymer(StockView);
45 |         })();
46 |     </script>
47 | </dom-module>
48 | 


--------------------------------------------------------------------------------
/app/html/tickers/polymer-ticker.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../../bower/polymer/polymer.html">
  2 | <link rel="import" href="../app-store.html">
  3 | 
  4 | <dom-module id="polymer-ticker">
  5 |     <template>
  6 |         <app-store id="store"></app-store>
  7 |     </template>
  8 | 
  9 |     <script>
 10 |         (function () {
 11 |             'use strict';
 12 | 
 13 |             const DATE_RE = /^(\w{3}.*?\s\d{4})\s/,
 14 |                   TIME_RE = /(\d\d:\d\d:\d\d)/;
 15 | 
 16 |             class PolymerTicker {
 17 |                 beforeRegister() {
 18 |                     this.is = 'polymer-ticker';
 19 | 
 20 |                     this.properties = {
 21 |                         filter: {
 22 |                             notify: true,
 23 |                             observer: 'updatedFilter',
 24 |                             type: Object
 25 |                         },
 26 |                         quote: {
 27 |                             notify: true,
 28 |                             type: Object
 29 |                         }
 30 |                     };
 31 |                 }
 32 | 
 33 |                 getQuote() {
 34 |                     // Create new Quote object
 35 |                     return this.quote && this.quote.Symbol === 'polymer' && this.quote.LastTradePriceOnly ? this.quote :
 36 |                         {
 37 |                             LastTradePriceOnly: 10,
 38 |                             Change: 0,
 39 |                             Volume: 0,
 40 |                             DaysHigh: 10,
 41 |                             DaysLow: 10,
 42 |                             YearHigh: 20.01,
 43 |                             YearLow: 5.32
 44 |                         };
 45 |                 }
 46 | 
 47 |                 generatePriceIncr() {
 48 |                     return Math.random() * 2 - .9; // Note that our random stock increases over time :)
 49 |                 }
 50 | 
 51 |                 updatedFilter(newFilter, oldFilter) {
 52 |                     this.changeInterval = true;
 53 |                 }
 54 | 
 55 |                 start() {
 56 |                     if (!this.timer) {
 57 |                         this.timer = setInterval(() => {
 58 |                             let quote = this.getQuote(),
 59 |                                 incr = this.generatePriceIncr(),
 60 |                                 price = parseFloat(quote.LastTradePriceOnly) + incr;
 61 | 
 62 |                             this.$.store.dispatch('QUOTE_CHANGE', {quote: {
 63 |                                 LastTradePriceOnly: price.toFixed(2),
 64 |                                 Change: (price >= 10 ? '+' : '') + (price - 10).toFixed(2),
 65 |                                 DaysHigh: Math.max(quote.DaysHigh, price).toFixed(2),
 66 |                                 DaysLow: Math.min(quote.DaysLow, price).toFixed(2),
 67 |                                 LastTradeDate: new Date().toString().match(DATE_RE)[1],
 68 |                                 LastTradeTime: new Date().toString().match(TIME_RE)[1],
 69 |                                 PercentChange: `${Math.round((price/10 - 1) * 10000)/100}%`,
 70 |                                 Volume: quote.Volume + 1,
 71 |                                 Ask: (price - incr).toFixed(2),
 72 |                                 Bid: (price + incr).toFixed(2),
 73 |                                 YearHigh: Math.max(price, quote.YearHigh).toFixed(2),
 74 |                                 YearLow: Math.min(price, quote.YearLow).toFixed(2),
 75 |                                 Currency: '€',
 76 |                                 Name: 'Polymer',
 77 |                                 Symbol: 'polymer'
 78 |                             }});
 79 | 
 80 |                             if (this.changeInterval) {
 81 |                                 this.changeInterval = false;
 82 |                                 this.restart();
 83 |                             }
 84 |                         }, this.filter.interval);
 85 |                     }
 86 | 
 87 |                     return this;
 88 |                 }
 89 | 
 90 |                 stop() {
 91 |                     clearTimeout(this.timer);
 92 |                     this.timer = null;
 93 | 
 94 |                     return this;
 95 |                 }
 96 | 
 97 |                 restart() {
 98 |                     this.stop().start();
 99 |                 }
100 |             }
101 | 
102 |             Polymer(PolymerTicker);
103 |         })();
104 |     </script>
105 | </dom-module>
106 | 


--------------------------------------------------------------------------------
/app/html/tickers/stock-ticker.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../../bower/polymer/polymer.html">
 2 | <link rel="import" href="../app-store.html">
 3 | 
 4 | <dom-module id="stock-ticker">
 5 |     <template>
 6 |         <app-store id="store"></app-store>
 7 |     </template>
 8 | 
 9 |     <script>
10 |         (function () {
11 |             'use strict';
12 | 
13 |             class StockTicker {
14 |                 beforeRegister() {
15 |                     this.is = 'stock-ticker';
16 | 
17 |                     this.properties = {
18 |                         interval: {
19 |                             type: Number,
20 |                             notify: true
21 | 
22 |                         },
23 |                         symbol: {
24 |                           type: String,
25 |                           notify: true
26 |                         }
27 |                     };
28 |                 }
29 | 
30 |                 async getQuote() {
31 |                     let url = 'http://query.yahooapis.com/v1/public/yql';
32 |                     let data = encodeURIComponent(`select * from yahoo.finance.quotes where symbol in ('${this.symbol}')`);
33 |                     let requestUrl = `${url}?q=${data}&format=json&diagnostics=true&env=http://datatables.org/alltables.env`;
34 | 
35 |                     let response = await fetch(requestUrl);
36 | 
37 |                     return response.text();
38 |                 }
39 | 
40 |                 start() {
41 |                     this.timer = setTimeout(() => {
42 |                         this.getQuote().then((response) => {
43 |                             let json = JSON.parse(response);
44 | 
45 |                             this.$.store.dispatch('QUOTE_CHANGE', {quote: json.query.results.quote});
46 | 
47 |                             if (json.query.results.quote.Name) {
48 |                                 this.start();
49 |                             }
50 |                         });
51 |                     }, Math.max(1000, this.interval));
52 |                 }
53 | 
54 |                 stop() {
55 |                   clearTimeout(this.timer);
56 |                   this.timer = null;
57 |                 }
58 |             }
59 | 
60 |             // Register the element using Polymer's constructor.
61 |             Polymer(StockTicker);
62 |         })();
63 |     </script>
64 | </dom-module>
65 | 


--------------------------------------------------------------------------------
/app/html/utils/quote-transform.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../../bower/polymer/polymer.html">
 2 | 
 3 | <link rel="import" href="../app-store.html">
 4 | 
 5 | <dom-module id="quote-transform">
 6 |     <template>
 7 |         <app-store id="store"></app-store>
 8 |     </template>
 9 |     <script>
10 |         (function () {
11 |             'use strict';
12 | 
13 |             class QuoteTransform {
14 |                 beforeRegister() {
15 |                     this.is = 'quote-transform';
16 | 
17 |                     this.properties = {
18 |                         quote: {
19 |                             notify: true,
20 |                             observer: 'updateQuote',
21 |                             type: Object
22 |                         }
23 |                     };
24 |                 }
25 | 
26 |                 updateQuote() {
27 |                     if (this.quote && this.quote.LastTradePriceOnly !== undefined) {
28 |                         let x = (new Date()), // current time
29 |                             y = parseFloat(this.quote.LastTradePriceOnly);
30 | 
31 |                         // Yahoo quotes are delayed by 15 minutes
32 |                         x.setSeconds(x.getSeconds() - 900);
33 | 
34 |                         this.$.store.dispatch('ADD_DATA_ITEM', {item: [x.getTime(),y]});
35 |                     }
36 |                 }
37 |             }
38 | 
39 |             Polymer(QuoteTransform);
40 |         })();
41 |     </script>
42 | </dom-module>
43 | 


--------------------------------------------------------------------------------
/app/html/utils/symbol-url.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../../bower/polymer/polymer.html">
 2 | 
 3 | <link rel="import" href="../app-store.html">
 4 | 
 5 | <dom-module id="symbol-url">
 6 |     <template>
 7 |         <app-store id="store"></app-store>
 8 |     </template>
 9 |     <script>
10 |         (function () {
11 |             let series;
12 | 
13 |             class SymbolUrl {
14 |                 beforeRegister() {
15 |                     this.is = 'symbol-url';
16 |                     this.isReady = false;
17 | 
18 |                     this.properties = {
19 |                         symbol: {
20 |                             type: String,
21 |                             notify: true,
22 |                             observer: 'updateSymbol'
23 |                         }
24 |                     };
25 |                 }
26 |                 updateSymbol() {
27 |                     if (this.isActive && this.symbol) {
28 |                         history.replaceState(null, this.symbol, `?q=${this.symbol}`);
29 |                     }
30 |                 }
31 | 
32 |                 activate() {
33 |                     this.isActive = true;
34 | 
35 |                     if (!this.symbol) {
36 |                         let symbol = (location.search.match(/^\?q=(.*)$/) || [])[1];
37 | 
38 |                         if (symbol) {
39 |                             this.$.store.dispatch('FILTER_SYMBOL_CHANGE', {symbol: symbol || 'polymer'});
40 |                         }
41 |                     } else {
42 |                         this.updateSymbol();
43 |                     }
44 |                 }
45 |             }
46 | 
47 |             Polymer(SymbolUrl);
48 |         })();
49 |     </script>
50 | </dom-module>
51 | 


--------------------------------------------------------------------------------
/app/html/view/app-header.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../../bower/polymer/polymer.html">
 2 | 
 3 | <dom-module id="app-header">
 4 |     <style>
 5 |         /* inject:css */
 6 |     </style>
 7 |     <template>
 8 |         <header>
 9 |             <div id="box">
10 |                 <p id="flashlight">
11 |                     <span id="flash">Polymer</span>
12 |                     <span id="light">Redux</span>
13 |                 </p>
14 |             </div>
15 |             <content></content>
16 |             <div id="page-hits">
17 |                 <span>Pagehits:</span>
18 |                 <span>{{hits}}</span>
19 |             </div>
20 |         </header>
21 |     <template>
22 |     <script>
23 |         (function () {
24 |             'use strict';
25 | 
26 |             class AppHeader {
27 |                 beforeRegister() {
28 |                     this.is = 'app-header';
29 | 
30 |                     this.properties = {
31 |                         hits: {
32 |                             type: Number,
33 |                             notify: true
34 |                         }
35 |                     };
36 |                 }
37 |             }
38 | 
39 |             Polymer(AppHeader);
40 |         })();
41 |     </script>
42 | </dom-module>
43 | 


--------------------------------------------------------------------------------
/app/html/view/stock-details.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../../bower/polymer/polymer.html">
 2 | 
 3 | <dom-module id="stock-details">
 4 |     <style>
 5 |         /* inject:css */
 6 |     </style>
 7 | 
 8 |     <template>
 9 |         <ol>
10 |             <li><span class="label">Price:</span><span class="value hightlight" class$="{{status(quote.Change)}}">{{quote.LastTradePriceOnly}}</span></li>
11 |             <li><span class="label">Change:</span><span class="value hightlight">{{quote.Change}}</span></li>
12 |             <li><span class="label">Volume:</span><span class="value hightlight">{{quote.Volume}}</span></li>
13 |             <li><span class="label">Ask:</span><span class="value">{{quote.Ask}}</span></li>
14 |             <li><span class="label">Bid:</span><span class="value">{{quote.Bid}}</span></li>
15 |             <li><span class="label">Currency:</span><span class="value">{{quote.Currency}}</span></li>
16 |             <li><span class="label">DaysHigh:</span><span class="value">{{quote.DaysHigh}}</span></li>
17 |             <li><span class="label">DaysLow:</span><span class="value">{{quote.DaysLow}}</span></li>
18 |             <li><span class="label">LastTradeDate:</span><span class="value">{{quote.LastTradeDate}}</span></li>
19 |             <li><span class="label">LastTradeTime:</span><span class="value">{{quote.LastTradeTime}}</span></li>
20 |             <li><span class="label">PercentChange:</span><span class="value">{{quote.PercentChange}}</span></li>
21 |             <li><span class="label">YearHigh:</span><span class="value">{{quote.YearHigh}}</span></li>
22 |             <li><span class="label">YearLow:</span><span class="value">{{quote.YearLow}}</span></li>
23 |         </ol>
24 |     </template>
25 |     <script>
26 |         (function () {
27 |             class StockDetails {
28 |                 beforeRegister() {
29 |                     this.is = 'stock-details';
30 | 
31 |                     this.properties = {
32 |                         quote: {
33 |                             notify: true,
34 |                             type: Object
35 |                         }
36 |                     };
37 |                 }
38 | 
39 |                 status(change) {
40 |                     return change === undefined ? '' : (parseFloat(change) >= 0 ? 'up' : 'down');
41 |                 }
42 |             }
43 | 
44 |             Polymer(StockDetails);
45 |         })();
46 |     </script>
47 | </dom-module>
48 | 


--------------------------------------------------------------------------------
/app/html/view/stock-graph-filter.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../../bower/polymer/polymer.html">
 2 | 
 3 | <link rel="import" href="../app-store.html">
 4 | 
 5 | <dom-module id="stock-graph-filter">
 6 |     <style>
 7 |         /* inject:css */
 8 |         paper-input-container {
 9 |             --paper-input-container-label: {
10 |                  color: lightgray;
11 |             }
12 |             --paper-input-container-label-focus: {
13 |                 color: #000;
14 |             }
15 |             --paper-input-container-underline-focus: {
16 |                 background: green;
17 |             }
18 |         }
19 |     </style>
20 |     <template>
21 |         <app-store id="store"></app-store>
22 | 
23 |         <div class="view-settings-wrapper" on-input="_onChangeInput">
24 |             <paper-input-container type="number">
25 |                 <label>Interval (ms,  1000)</label>
26 |                 <input type="number" id="stock-name" is="iron-input" value="{{filter.interval}}">
27 |             </paper-input-container>
28 | 
29 |             <div class="slider-wrapper">
30 |                 <label>Max data points: <span>{{samples}}</label>
31 |                 <paper-slider on-change="_onChangeSlider" min="10" max="100" value="{{filter.samples}}" pin="true"></paper-slider>
32 |             <div>
33 |         </div>
34 |     </template>
35 |     <script>
36 |         (function () {
37 |             class StockGraphFilter {
38 |                 beforeRegister() {
39 |                     this.is = 'stock-graph-filter';
40 | 
41 |                     this.properties = {
42 |                         filter: {
43 |                             type: Object,
44 |                             notify: true,
45 |                         }
46 |                     };
47 |                 }
48 | 
49 |                 _onChangeInput(event) {
50 |                   this.$.store.dispatch('FILTER_INTERVAL_CHANGE', {interval: parseInt(event.target.value)})
51 |                 }
52 | 
53 |                 _onChangeSlider(event) {
54 |                   this.$.store.dispatch('FILTER_SAMPLES_CHANGE', {samples: parseInt(event.target.value)});
55 |                 }
56 |             }
57 | 
58 |             Polymer(StockGraphFilter);
59 |         })();
60 |     </script>
61 | </dom-module>
62 | 


--------------------------------------------------------------------------------
/app/html/view/stock-graph.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../../bower/polymer/polymer.html">
  2 | <link rel="import" href="../../../bower/paper-dialog/paper-dialog.html">
  3 | 
  4 | <dom-module id="stock-graph">
  5 |     <style>
  6 |         paper-button {
  7 |             --paper-button: {
  8 |                 background-color: lightgray;
  9 |             };
 10 |             float: right;
 11 |             margin-right: 24px;
 12 |         }
 13 | 
 14 |         .symbol {
 15 |             font-weight: 700;
 16 |             font-style: oblique;
 17 |         }
 18 |     </style>
 19 |     <template>
 20 |         <quote-transform quote="[[quote]]"></quote-transform>
 21 |         <div id="highcharts"></div>
 22 | 
 23 |         <paper-dialog id="ooops" entry-animation="scale-up-animation"
 24 |               modal="true"
 25 |               withBackdrop="true"
 26 |               exit-animation="fade-out-animation">
 27 |               <h2>Oooops</h2>
 28 |               <div>Ticker symbol <span class="symbol">{{quote.Symbol}}</span> is unknown!!</div>
 29 |               <paper-button dialog-dismiss>Close</paper-button>
 30 |         </paper-dialog>
 31 |     </template>
 32 |     <script>
 33 |         (function () {
 34 |             class StockGraph {
 35 | 
 36 |                 // Element setup goes in beforeRegister instead of createdCallback.
 37 |                 beforeRegister() {
 38 |                     this.is = 'stock-graph';
 39 | 
 40 |                     // Define the properties object in beforeRegister.
 41 |                     this.properties = {
 42 |                         quote: {
 43 |                             type: Object,
 44 |                             notify: true
 45 |                         },
 46 |                         data: {
 47 |                             type: Array,
 48 |                             notify: true,
 49 |                             observer: 'updateData'
 50 |                         },
 51 |                         samples: {
 52 |                             type: Number,
 53 |                             notify: true,
 54 |                             observer: 'updateSamples'
 55 |                         }
 56 |                     };
 57 |                 }
 58 | 
 59 |                 ready() {
 60 |                     let self = this;
 61 |                     Highcharts.setOptions({
 62 |                         global: {
 63 |                             useUTC: false
 64 |                         }
 65 |                     });
 66 | 
 67 |                     this.chart = $(this.$.highcharts).highcharts({
 68 |                         chart: {
 69 |                             type: 'spline',
 70 |                             animation: Highcharts.svg,
 71 |                             height: 300,
 72 |                             marginRight: 10,
 73 |                             backgroundColor: 'transparent',
 74 |                             events: {
 75 |                                 load: function () {
 76 |                                     // set up the updating of the chart each second
 77 |                                     self.series = this.series[0];
 78 |                                 }
 79 |                             }
 80 |                         },
 81 |                         title: {
 82 |                             text: this.createGraphTitle()
 83 |                         },
 84 |                         xAxis: {
 85 |                             type: 'datetime',
 86 |                             tickPixelInterval: 150
 87 |                         },
 88 |                         yAxis: {
 89 |                             title: {
 90 |                                 text: 'Value'
 91 |                             },
 92 |                             plotLines: [{
 93 |                                 value: 0,
 94 |                                 width: 1,
 95 |                                 color: '#808080'
 96 |                             }]
 97 |                         },
 98 |                         tooltip: {
 99 |                             formatter: function () {
100 |                                 return '<b>' + this.series.name + '</b><br/>' +
101 |                                         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
102 |                                         Highcharts.numberFormat(this.y, 2);
103 |                             }
104 |                         },
105 |                         legend: {
106 |                             enabled: false
107 |                         },
108 |                         exporting: {
109 |                             enabled: false
110 |                         },
111 |                         plotOptions: {
112 |                             series: {
113 |                                 marker: {
114 |                                     enabled: true
115 |                                 }
116 |                             }
117 |                         },
118 |                         series: [{
119 |                             name: 'Quote data',
120 |                             data: []
121 |                         }]
122 |                     });
123 | 
124 |                 }
125 | 
126 |                 updateSamples() {
127 |                     if (this.series.data.length > this.samples) {
128 |                         this.series.setData(this.data);
129 |                     }
130 |                 }
131 | 
132 |                 updateData() {
133 |                     if (this.data && this.quote) {
134 |                         if (this.quote.Symbol && !this.quote.Name) {
135 |                             this.$.ooops.open();
136 |                         } else {
137 |                             if (this.symbol !== this.quote.Symbol) {
138 |                                 this.symbol = this.quote.Symbol;
139 |                                 return this.series.setData(this.data)
140 |                             } else if (this.data.length > 0) {
141 | 
142 |                                 let numberOfItems = this.data.length,
143 |                                         lastItem = this.data[numberOfItems - 1];
144 | 
145 |                                 this.createGraphTitle();
146 |                                 this.series.addPoint(lastItem, true, this.series.data.length >= this.samples);
147 |                             }
148 |                         }
149 |                     }
150 |                 }
151 | 
152 |                 createGraphTitle() {
153 |                     let highcharts = $(this.$.highcharts).highcharts(),
154 |                         title = 'No data available';
155 | 
156 |                     if (this.quote) {
157 |                         title = `Live data from ${this.quote.Name}`;
158 |                     }
159 | 
160 |                     if (highcharts) {
161 |                         highcharts.setTitle({text: title});
162 |                     }
163 | 
164 |                     return title;
165 |                 }
166 |             }
167 | 
168 |             Polymer(StockGraph);
169 |         })();
170 |     </script>
171 | </dom-module>
172 | 


--------------------------------------------------------------------------------
/app/html/view/stock-search.html:
--------------------------------------------------------------------------------
 1 | <link rel="import" href="../../../bower/polymer/polymer.html">
 2 | <link rel="import" href="../../../bower/iron-a11y-keys/iron-a11y-keys.html">
 3 | <link rel="import" href="../../../bower/paper-input/paper-input.html">
 4 | <link rel="import" href="../../../bower/paper-button/paper-button.html">
 5 | 
 6 | <link rel="import" href="../app-store.html">
 7 | 
 8 | <dom-module id="stock-search">
 9 |     <style>
10 |         /* inject:css */
11 |         :host {
12 |             display: flex;
13 |             justify-content: center;
14 | 
15 |             --paper-input-container-label: {
16 |                 color: lightgray;
17 |             };
18 |             --paper-input-container-label-focus: {
19 |                 color: #000;
20 |             };
21 |             --paper-input-container-underline-focus: {
22 |                 background: green;
23 |             };
24 |         }
25 |     </style>
26 |     <template>
27 |         <app-store id="store"></app-store>
28 |         <datalist id="symbols-list">
29 |             <template is="dom-repeat" items="{{symbols}}" as="item">
30 |                 <option value="{{item}}"></option>
31 |             </template>
32 |         </datalist>
33 | 
34 |         <div class="search-wrapper">
35 |             <iron-a11y-keys keyEventTarget="stockName" keys="enter" on-keys-pressed="changedSymbol"></iron-a11y-keys>
36 |             <paper-input-container>
37 |                 <label>Ticker symbol</label>
38 |                 <input id="stockName" is="iron-input" bind-value="{{queryString}}" list="symbols-list" autocomplete="true">
39 |             </paper-input-container>
40 |             <paper-button id="tickerInput" on-click="changeSymbol" class="search">Search</paper-button>
41 |             </div>
42 |         </template>
43 |         <script>
44 |             (function () {
45 |                 'use strict';
46 | 
47 |                 class StockSearch {
48 |                     beforeRegister() {
49 |                         this.is = 'stock-search';
50 | 
51 |                         this.properties = {
52 |                             symbols: {
53 |                                 type: Array,
54 |                                 notify: true
55 |                             },
56 |                             queryString: {
57 |                                 notify: true,
58 |                                 observer: 'updatedQueryString',
59 |                                 type: String
60 |                             }
61 |                         };
62 |                     }
63 | 
64 |                     updatedQueryString() {
65 |                         this.$.store.dispatch('FILTER_QUERYSTRING_CHANGE', {queryString: this.queryString});
66 |                     }
67 | 
68 |                     changeSymbol() {
69 |                         this.$.store.dispatch('FILTER_SYMBOL_CHANGE', {symbol: this.queryString});
70 |                     }
71 |                 }
72 | 
73 |                 Polymer(StockSearch);
74 |             })();
75 |         </script>
76 |     </dom-module>
77 | 


--------------------------------------------------------------------------------
/app/scss/app-header.scss:
--------------------------------------------------------------------------------
 1 | :host header {
 2 |     background: hsl(210, 30%, 0%) radial-gradient(hsl(210, 30%, 20%), hsl(210, 30%, 0%));
 3 |     font-family: Geneva, sans-serif;
 4 |     margin-bottom: 30px;
 5 |     position: relative;
 6 | 
 7 |     #page-hits {
 8 |         font-family: Geneva, sans-serif;
 9 |         color: #fff;
10 |         position: absolute;
11 |         bottom: 10px;
12 |         left: 10px;
13 |     }
14 | 
15 |     /* box ------------------------------------------------------ */
16 |     #box {
17 |         padding: 10px;
18 |         text-align: center;
19 |         min-width: 500px;
20 |         font-size: 3em;
21 |         font-weight: bold;
22 |         -webkit-backface-visibility: hidden; /* fixes flashing */
23 |     }
24 | 
25 |     /* flashlight ------------------------------------------------------ */
26 | 
27 |     #flashlight {
28 |         color: hsla(0, 0%, 0%, 0);
29 |         perspective: 80px;
30 |         outline: none;
31 |     }
32 | 
33 |     /* flash ------------------------------------------------------ */
34 | 
35 |     #flash {
36 |         display: inline-block;
37 |         text-shadow: #bbb 0 0 1px, #fff 0 -1px 2px, #fff 0 -3px 2px, rgba(0, 0, 0, 0.8) 0 30px 25px;
38 |         transition: margin-left 0.3s cubic-bezier(0, 1, 0, 1);
39 |     }
40 | 
41 |     #box:hover #flash {
42 |         margin-left: 20px;
43 |         transition: margin-left 1s cubic-bezier(0, 0.75, 0, 1);
44 |     }
45 | 
46 |     /* light ------------------------------------------------------ */
47 |     #light {
48 |         display: inline-block;
49 |         text-shadow: #111 0 0 1px, rgba(255, 255, 255, 0.1) 0 1px 3px;
50 |     }
51 | 
52 |     #box:hover #light {
53 |         text-shadow: #fff 0 0 4px, #fcffbb 0 0 20px;
54 |         transform: rotateY(-60deg);
55 |         transition: transform 0.3s cubic-bezier(0, 0.75, 0, 1), text-shadow 0.1s ease-out;
56 |     }
57 | 
58 |     & > ::content {
59 |         & > .save {
60 |             bottom: -10px;
61 |             position: absolute;
62 |             right: 0;
63 |         }
64 | 
65 |         & > .reset {
66 |             bottom: -60px;
67 |             position: absolute;
68 |             right: 0;
69 |         }
70 |     }
71 | }
72 | 


--------------------------------------------------------------------------------
/app/scss/stock-app.scss:
--------------------------------------------------------------------------------
 1 | :host {
 2 |     display: block;
 3 | }
 4 | 
 5 | #details {
 6 |     border: 2px solid #fff;
 7 |     border-radius: 3px;
 8 |     display: flex;
 9 |     flex-direction: column;
10 |     justify-content: center;
11 |     background-image: url(../img/background-blur.jpg);
12 |     width: 400px;
13 |     height: 400px;
14 | }
15 | paper-button {
16 |     background: #035177;
17 |     opacity: .9;
18 |     color: #fff;
19 |     width: 170px;
20 |     z-index: 10;
21 | }
22 | 


--------------------------------------------------------------------------------
/app/scss/stock-details.scss:
--------------------------------------------------------------------------------
 1 | ol {
 2 |     color: #fff;
 3 |     list-style-type: none;
 4 |     margin: 0;
 5 |     padding: 0;
 6 | }
 7 | 
 8 | .label {
 9 |     display: inline-block;
10 |     margin: 3px;
11 |     text-align: right;
12 |     width: 120px;
13 | }
14 | .hightlight {
15 |     font-weight: 700;
16 | }
17 | .up {
18 |     color: green;
19 |     font-weight: 700;
20 |     padding-left: 10px;
21 |     text-shadow: 0px 0px 20px #fff;
22 | }
23 | .down {
24 |     color: red;
25 |     font-weight: 700;
26 |     padding-left: 10px;
27 |     text-shadow: 0px 0px 20px #fff;
28 | }
29 | .value {
30 |     padding-left: 10px;
31 | }
32 | 


--------------------------------------------------------------------------------
/app/scss/stock-graph-filter.scss:
--------------------------------------------------------------------------------
 1 | paper-slider {
 2 |     width: 100%;
 3 |     --paper-slider-active-color: green;
 4 | }
 5 | 
 6 | paper-input-container {
 7 |     width: 200px;
 8 | }
 9 | 
10 | .view-settings-wrapper {
11 |     display: flex;
12 |     margin: 0 20px;
13 | }
14 | 
15 | .slider-wrapper {
16 |     flex: 1;
17 | }
18 | 
19 | .slider-wrapper label {
20 |     font-family: 'Roboto', 'Noto', sans-serif;
21 |     -webkit-font-smoothing: antialiased;
22 |     text-rendering: optimizeLegibility;
23 |     font-size: 12px;
24 |     font-weight: 400;
25 |     line-height: 24px;
26 |     color: lightgray;
27 | 
28 |     display: block;
29 |     margin-top: -4px;
30 |     padding: 10px 0 6px 15px;
31 |     height: 24px;
32 | }


--------------------------------------------------------------------------------
/app/scss/stock-search.scss:
--------------------------------------------------------------------------------
1 | :host {
2 |     display: flex;
3 |     justify-content: center;
4 | }


--------------------------------------------------------------------------------
/app/scss/stock-view.scss:
--------------------------------------------------------------------------------
 1 | :host {
 2 |   display: flex;
 3 |   justify-content: center;
 4 | 
 5 |   --paper-input-container-input-color: #fff;
 6 | 
 7 |   & > article {
 8 |     margin-left: 30px;
 9 |   }
10 | }
11 | .graph {
12 |   border: 2px solid #fff;
13 |   border-radius: 3px;
14 |   position: relative;
15 |   width: 600px;
16 |   height: 400px;
17 |   background-image: url(../img/background-blur.jpg);
18 | }
19 | .overlay {
20 |   background-color: #fff;
21 |   opacity: .3;
22 |   top: 0;
23 |   bottom: 0;
24 |   left: 0;
25 |   height: 0;
26 |   position: absolute;
27 |   width: 100%;
28 |   height: 100%;
29 | }
30 | 
31 | #highcharts {
32 |   border: 2px solid #fff;
33 |   border-radius: 3px;
34 | }
35 | 


--------------------------------------------------------------------------------
/assets/img/background-blur.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scaljeri/polymer-redux/c81e28597a4b57305dd8a26cd7aaad6d42006aa2/assets/img/background-blur.jpg


--------------------------------------------------------------------------------
/assets/img/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scaljeri/polymer-redux/c81e28597a4b57305dd8a26cd7aaad6d42006aa2/assets/img/background.jpg


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "polymerClasses",
 3 |   "dependencies": {
 4 |     "polymer": "Polymer/polymer#^1.2",
 5 |     "paper-input": "PolymerElements/paper-input#~1.0.18",
 6 |     "paper-button": "PolymerElements/paper-button#~1.0.8",
 7 |     "iron-icon": "PolymerElements/iron-icon#~1.0.7",
 8 |     "iron-iconset-svg": "PolymerElements/iron-iconset-svg#~1.0.9",
 9 |     "paper-radio-button": "PolymerElements/paper-radio-button#~1.0.11",
10 |     "paper-radio-group": "PolymerElements/paper-radio-group#~1.0.6",
11 |     "paper-slider": "PolymerElements/paper-slider#~1.0.7",
12 |     "firebase-element": "GoogleWebComponents/firebase-element#~1.0.8",
13 |     "paper-behaviors": "PolymerElements/paper-behaviors#~1.0.9",
14 |     "iron-localstorage": "PolymerElements/iron-localstorage#~1.0.4",
15 |     "iron-a11y-keys": "PolymerElements/iron-a11y-keys#~1.0.3",
16 |     "paper-dialog": "PolymerElements/paper-dialog#~1.0.2"
17 |   },
18 |   "devDependencies": {
19 |     "es6-module-loader": "~0.17.8"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/doc/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | 
  3 | <html>
  4 | <head>
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <link rel="stylesheet" href="main.css">
  7 |     <link href='https://fonts.googleapis.com/css?family=Antic' rel='stylesheet' type='text/css'>
  8 | </head>
  9 | 
 10 | <body>
 11 | <section>
 12 |     <header>
 13 |         <img src="polymer-logo.svg">
 14 | 
 15 |         <h1>Polymer - Redux</h1>
 16 |     </header>
 17 | 
 18 |     <article>
 19 | 
 20 |         <div class="content-container">
 21 |             <p>
 22 |                 Web Applications have changed over the years from being a simple static page to complex single page
 23 |                 application (<a href="https://en.wikipedia.org/wiki/Single-page_application">SPA</a>).
 24 |                 With the increase of complexity, the problems to solve are much harder too. If you get some random
 25 |                 weirdness in you SPA, you can easily bug-hunt for days.
 26 |                 <br><br>
 27 |                 Luckily, there are two projects out there that aim at simplification
 28 | 
 29 |                     <ol>
 30 |                         <li> <a href="https://github.com/rackt/redux">Redux</a> - a brilliant architecture which simplifies
 31 |                                 state maintenance</li>
 32 |                         <li> <a href="https://www.polymer-project.org">Polymer</a> -
 33 |                             a back-to-nature approach that puts elements back at the center of the universe</li>
 34 |                     </ol>
 35 | 
 36 | 
 37 |                 Of course frameworks like <a href="https://facebook.github.io/react/">React</a> and <a
 38 |                 href="https://angularjs.org/">Angular</a> help you to build complex SPAs too, but why invent whole new concepts,
 39 |                 while the DOM itself has a lot of framework type concepts just built into it:
 40 | 
 41 |                 <ol>
 42 |                     <li>Component model (custom element)</li>
 43 |                     <li>Concept of data flow (attributes/properties and events)
 44 |                     <li>declarative syntax (HTML)</li>
 45 |                 </ol>
 46 | 
 47 |                 Anyway, below I'll explain how I've used a single store, no two-way data-binding, actions and reducers in
 48 |                 Polymer. You can visit the DEMO <a href="./demo">here</a> and find the code on
 49 |                 <a href="https://github.com/scaljeri/polymer-redux">github</a>
 50 |             </p>
 51 | 
 52 |             <h2>Demo site</h2>
 53 |             <p class="first-dark-blue">
 54 |                 For the purpose of this exercise I've written a <a href="./demo">Stock ticker application</a>. As you can
 55 |                 see in the demo you can search for ticker symbols. Here are some symbols to get you started
 56 | 
 57 |                 <ol>
 58 |                     <li><a href="./demo/?q=polymer">polymer</a> - random generated data</li>
 59 |                     <li><a href="./demo/?q=aapl">Apple - aapl</a></li>
 60 |                     <li><a href="./demo/?q=goog">Google - goog</a></li>
 61 |                     <li><a href="./demo/?q=fb">Facebook - fb</a></li>
 62 |                     <li><a href="./demo/?q=rdsa.as">Shell - rdsa.as</a></li>
 63 |                 </ol>
 64 | 
 65 |                 At any time you can save the current state and hit reload without losing any data.
 66 |                 The application will save a unique key to
 67 |                 <a href="https://elements.polymer-project.org/elements/iron-localstorage">LocalStorage</a> which is used
 68 |                 to restore the state from
 69 |                 <a href="https://elements.polymer-project.org/elements/firebase-element?active=firebase-document">Firebase</a>
 70 |                 With Redux you almost get this functionality for free :)<br>
 71 |                 <br>
 72 |                 NOTE: If the demo doesn't work, make sure you're using an up<span class="up2date">2</span>date browser,
 73 |                 like <a href="https://www.google.com/chrome/browser/canary.html">Chrome Canary</a>!!
 74 |             </p>
 75 | 
 76 |             <h2>Single source of truth</h2>
 77 | 
 78 |             <p class="first-dark-red">
 79 |                 In Polymer everything is an element, for example, an
 80 |                 <a href="https://elements.polymer-project.org/elements/iron-ajax">AJAX call</a> can be expressed in HTML.
 81 |                 There is an <a href="https://elements.polymer-project.org/">element</a> for everything.
 82 |                 <br>
 83 | 
 84 |                 So, in the main component of the demo app
 85 |                 (<a href="https://github.com/scaljeri/polymer-redux/blob/master/app/html/stock-app.html">stock-app.html</a>)
 86 |                 I connect the reducers with the store
 87 | 
 88 |                 <pre class="demo-code"><span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>app-store</span> id=<span style='color:#2a00ff; '>"store"</span>
 89 |            state=<span style='color:#2a00ff; '>"{{state}}"</span>
 90 |            reducer=<span style='color:#2a00ff; '>"[[reducer]]"</span><span style='color:#7f0055; '>></span><span style='color:#7f0055; '>&lt;/</span><span style='color:#7f0055; '>app-store</span><span style='color:#7f0055; '>></span></pre>
 91 | 
 92 |                 I pass the <b>reducers</b> to the store and bind the state (child-to-host) <pre>{{state}}</pre>.
 93 |                 From there on I pass state properties to child elements by one-way data-binding only.
 94 | 
 95 |                 <pre class="demo-code"><span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>app-header</span> hits=<span style='color:#2a00ff; '>"[[state.page.hit]]"</span><span style='color:#7f0055; '>></span>
 96 |     ...
 97 | <span style='color:#7f0055; '>&lt;/</span><span style='color:#7f0055; '>app-header</span><span style='color:#7f0055; '>></span>
 98 | </pre>
 99 |             </p>
100 | 
101 |             <h2>Actions</h2>
102 | 
103 |             <p>
104 |                 Through attributes components receive parts of the state. In order to change the state
105 |                 each component includes the store and can dispatches actions
106 | 
107 |                 <pre class="demo-code"><span style='color:#7f0055; '>&lt;</span><span style='color:#7f0055; '>app-store</span> id=<span style='color:#2a00ff; '>"store"</span><span style='color:#7f0055; '>></span><span style='color:#7f0055; '>&lt;/</span><span style='color:#7f0055; '>app-store</span><span style='color:#7f0055; '>></span>
108 | ...
109 | this.$.store.dispatch('CHANGE_QUERYSTRING',
110 |            {queryString: this.queryString});
111 | </pre>
112 |             However, everytime you include the store a new instance is created. So I've turned
113 |             the <a href="https://github.com/scaljeri/polymer-redux/blob/master/app/html/app-store.html">app-store.html</a>
114 |             into a singleton.
115 | 
116 |             </p>
117 | 
118 |             <h2>Reducers</h2>
119 | 
120 |             <p class="first-dark-blue">
121 |                 Reducers are pure function (wrapped in an element of course). They don't change the state
122 |                 object, but return a complete new state object
123 |                 <br>
124 |                 <pre class="demo-code"><span style='color:#7f0055; font-weight:bold; '>class</span> QuoteReducer {
125 |   transform(state, action, input) {
126 |     <span style='color:#7f0055; font-weight:bold; '>switch</span> (action) {
127 |       <span style='color:#7f0055; font-weight:bold; '>case</span> <span style='color:#2a00ff; '>'</span><span style='color:#2a00ff; '>QUOTE_CHANGE</span><span style='color:#2a00ff; '>'</span>:
128 |         <span style='color:#7f0055; font-weight:bold; '>return</span> Object.assign({}, state,
129 |                  {quote: input.quote});
130 |       <span style='color:#7f0055; font-weight:bold; '>default</span>:
131 |         <span style='color:#7f0055; font-weight:bold; '>return</span> state;
132 |     }
133 |   }
134 | }
135 | </pre>
136 |             I've tried to simplify the reducers even more by using
137 |             <a href="https://facebook.github.io/immutable-js/">Immutable.js</a>, but that didn't
138 |             work very well, because it breaks Polymer's data-binding.<br>
139 |             <br>
140 |             So finally, when the reducers are ready, the store updates its state and Polymer makes sure
141 |             that the changes flow (from top to bottom) through the application.
142 |             </p>
143 | 
144 |             <h2>Conclusion</h2>
145 | 
146 |             <p class="first-dark-red">
147 |                 It turns out that these two great project work very well together. Unfortunately
148 |                 at the moment you need to do some additional work to create a Singleton and you
149 |                 cannot use Immutable.js.
150 |             </p>
151 |         </div>
152 |     </article>
153 | </section>
154 |     <script>
155 |         var header = document.querySelector('header'), isMinified = false;
156 | 
157 |         window.onscroll = function(event) {
158 |             if (window.pageYOffset > 100) {
159 |                 if (!isMinified) {
160 |                     header.classList.add('minified');
161 |                     isMinified = true;
162 |                 }
163 |             } else if (isMinified) {
164 |                 header.classList.remove('minified');
165 |                 isMinified = false;
166 |             }
167 |         }
168 |     </script>
169 | </body>
170 | </html>
171 | 


--------------------------------------------------------------------------------
/doc/main.css:
--------------------------------------------------------------------------------
  1 | body {
  2 | 	font-family: 'Antic', sans-serif;
  3 | 	font-size: 16px;
  4 | 	margin: 0;
  5 | 	padding: 0;
  6 | }
  7 | 
  8 | header {
  9 | 	display: flex;
 10 | 	justify-content: center;
 11 | 	width: 100%;
 12 | 	height: 120px;
 13 | 	position: fixed;
 14 | 	background-color: #235653;
 15 | 	transition: all 0.4s ease-in-out;
 16 | }
 17 | 
 18 | img {
 19 | 	height: 100px;
 20 | 	margin: 10px 0;
 21 | 	transition: all 0.4s ease-in-out;
 22 | }
 23 | 
 24 | h1 {
 25 | 	padding: 0;
 26 | 	margin:0;
 27 | 	color: #fff;
 28 | 	font-weight: 700;
 29 | 	font-size: 50px;
 30 | 	margin-left: 10px;
 31 | 	line-height: 120px;
 32 | 	transition: all 0.4s ease-in-out;
 33 | }
 34 | 
 35 | header.minified {
 36 | 	height: 30px;
 37 | }
 38 | 
 39 | header.minified h1 {
 40 | 	font-size: 15px;
 41 | 	line-height: 30px;
 42 | }
 43 | 
 44 | header.minified img {
 45 | 	height: 20px;
 46 | 	margin: 6px 0;
 47 | }
 48 | 
 49 | article {
 50 | 	display: flex;
 51 | 	justify-content: center;
 52 | 	margin-bottom: 50px;
 53 | 	padding-top: 150px;
 54 | }
 55 | 
 56 | div.content-container {
 57 | 	max-width: 600px;
 58 | 	overflow: hidden;
 59 | }
 60 | 
 61 | h2 {
 62 | 	color: #e63a74;
 63 | 	font-size: 2rem;
 64 | }
 65 | 
 66 | p {
 67 | 	font-size: 1rem; /* 12px */
 68 | 	line-height: 1.5000rem; /* 18px */
 69 | 	margin: 0 0 1.5000rem 0;
 70 | }
 71 | 
 72 | .up2date {
 73 | 	display: inline-block;
 74 | 	position: relative;
 75 | 	top: -2px;
 76 | }
 77 | 
 78 | ol {
 79 | 	margin-left: 50px;
 80 | }
 81 | 
 82 | @media screen and (min-width: 650px) {
 83 | 	/* Drop Caps */
 84 | 	p::first-letter {
 85 | 		float: left;
 86 | 		color: #758afe;
 87 | 		font-size: 5rem;
 88 | 		line-height: 60px;
 89 | 		padding-top: 4px;
 90 | 		padding-right: 8px;
 91 | 		padding-left: 3px;
 92 | 		font-family: Georgia;
 93 | 	}
 94 | 
 95 | 	p.first-dark-blue::first-letter {
 96 | 		color: #273380;
 97 | 	}
 98 | 
 99 | 	p.first-dark-red::first-letter {
100 | 		color: #802041 !important;
101 | 	}
102 | }
103 | 
104 | pre {
105 | 	display: inline;
106 | 	background-color: lightgray;
107 | 	margin-right: 5px;
108 | }
109 | pre.demo-code {
110 | 	background-color: #fff;
111 | 	color:#000000;
112 | 	display: block;
113 | 	margin-left: 50px;
114 | }
115 | 
116 | @media screen and (max-width: 650px) {
117 | 	header {
118 | 		height: 30px;
119 | 	}
120 | 
121 | 	h1 {
122 | 		font-size: 15px;
123 | 		line-height: 30px;
124 | 	}
125 | 
126 | 	img {
127 | 		height: 20px;
128 | 		margin: 6px 0;
129 | 	}
130 | 
131 | 	article {
132 | 		display: flex;
133 | 		justify-content: center;
134 | 		margin-bottom: 50px;
135 | 		padding-top: 50px;
136 | 	}
137 | 
138 | 	div {
139 | 		margin-left: 10px;
140 | 		margin-right: 10px;
141 | 	}
142 | 
143 | 	pre.demo-code {
144 | 		margin-left: 0;
145 | 		margin-right: 0;
146 | 	}
147 | }
148 | 
149 | @media screen and (max-width: 451px) {
150 | 	header, section, div {
151 | 		position: relative;
152 | 		width: 450px;
153 | 		overflow: scroll!important;
154 | 	}
155 | 
156 | 	article {
157 | 		padding-top: 10px;
158 | 	}
159 | }
160 | 


--------------------------------------------------------------------------------
/doc/polymer-logo.svg:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="utf-8"?>
  2 | <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
  3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4 | <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  5 | 	 width="416px" height="286px" viewBox="0 0 416 286" enable-background="new 0 0 416 286" xml:space="preserve">
  6 | <g>
  7 | 	<g>
  8 | 		<polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 125.436,214.5 		"/>
  9 | 		<polygon fill="#3F51B5" points="331.842,0 290.561,71.5 331.842,143 373.121,71.5 		"/>
 10 | 		<polygon fill="#7986CB" points="373.121,71.5 249.278,286 331.842,286 414.4,143 		"/>
 11 | 		<polygon fill="#FF4081" points="249.278,0 84.157,286 166.721,286 331.842,0 		"/>
 12 | 		<polygon fill="#536DFE" points="84.157,0 1.596,143 42.878,214.5 166.721,0 		"/>
 13 | 		<polygon fill="#FFFFFF" fill-opacity="0.2" points="249.278,0 290.561,71.5 331.842,0 		"/>
 14 | 		<polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.278,0 290.561,71.5 		"/>
 15 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.278,143 290.561,71.5 		"/>
 16 | 		<polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.278,143 		"/>
 17 | 		<polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.278,143 		"/>
 18 | 		<polygon fill-opacity="0.3" points="125.438,214.5 166.721,143 208,214.5 		"/>
 19 | 		<polygon fill-opacity="0.4" points="125.438,214.5 166.721,286 208,214.5 		"/>
 20 | 		<polygon fill-opacity="0.5" points="84.157,286 125.438,214.5 166.721,286 		"/>
 21 | 		<polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.438,71.5 166.721,0 		"/>
 22 | 		<polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.438,71.5 		"/>
 23 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.438,71.5 		"/>
 24 | 		<polygon fill-opacity="0.1" points="1.598,143 42.878,71.5 84.157,143 		"/>
 25 | 		<polygon fill-opacity="0.2" points="1.598,143 42.878,214.5 84.157,143 		"/>
 26 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="125.438,214.5 84.157,143 42.878,214.5 		"/>
 27 | 		<polygon fill-opacity="0.2" points="125.438,214.5 84.157,286 42.878,214.5 		"/>
 28 | 		<polygon fill-opacity="0.2" points="373.121,71.5 331.842,0 290.561,71.5 		"/>
 29 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.842,143 290.561,71.5 		"/>
 30 | 		<g>
 31 | 			<polygon fill="#FFFFFF" fill-opacity="0.2" points="331.842,143 373.121,71.5 414.4,143 			"/>
 32 | 			<polygon fill="#FFFFFF" fill-opacity="0.1" points="331.842,143 373.121,214.5 414.4,143 			"/>
 33 | 			<polygon fill="#FFFFFF" fill-opacity="0" points="290.561,214.5 331.842,143 373.121,214.5 			"/>
 34 | 			<polygon fill-opacity="0.1" points="290.561,214.5 331.842,286 373.121,214.5 			"/>
 35 | 			<polygon fill-opacity="0.2" points="249.278,286 290.561,214.5 331.842,286 			"/>
 36 | 		</g>
 37 | 	</g>
 38 | 	<rect y="-65" fill="none" width="416" height="416"/>
 39 | </g>
 40 | <g display="none">
 41 | 	<g display="inline">
 42 | 		<polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 166.721,286 		"/>
 43 | 		<polygon fill="#3F51B5" points="331.842,0 249.278,0 331.842,143 373.121,71.5 		"/>
 44 | 		<polygon fill="#7986CB" points="373.121,71.5 249.278,286 331.842,286 414.4,143 		"/>
 45 | 		<polygon fill="#536DFE" points="84.157,0 1.596,143 42.878,214.5 166.721,0 		"/>
 46 | 		<polygon fill-opacity="0.5" points="249.278,0 290.561,71.5 331.842,0 		"/>
 47 | 		<polygon fill-opacity="0.5" points="84.157,286 125.438,214.5 166.721,286 		"/>
 48 | 		<polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.438,71.5 166.721,0 		"/>
 49 | 		<polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.438,71.5 		"/>
 50 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.438,71.5 		"/>
 51 | 		<polygon fill-opacity="0.1" points="1.598,143 42.878,71.5 84.157,143 		"/>
 52 | 		<polygon fill-opacity="0.2" points="1.598,143 42.878,214.5 84.157,143 		"/>
 53 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="125.438,214.5 84.157,143 42.878,214.5 		"/>
 54 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.842,143 290.561,71.5 		"/>
 55 | 		<g>
 56 | 			<polygon fill="#FFFFFF" fill-opacity="0.2" points="331.842,143 373.121,71.5 414.4,143 			"/>
 57 | 			<polygon fill="#FFFFFF" fill-opacity="0.1" points="331.842,143 373.121,214.5 414.4,143 			"/>
 58 | 			<polygon fill="#FFFFFF" fill-opacity="0" points="290.561,214.5 331.842,143 373.121,214.5 			"/>
 59 | 			<polygon fill-opacity="0.1" points="290.561,214.5 331.842,286 373.121,214.5 			"/>
 60 | 			<polygon fill-opacity="0.2" points="249.278,286 290.561,214.5 331.842,286 			"/>
 61 | 		</g>
 62 | 		<polygon fill-opacity="0.2" points="125.438,214.5 84.157,286 42.878,214.5 		"/>
 63 | 		<polygon fill-opacity="0.2" points="373.121,71.5 331.842,0 290.561,71.5 		"/>
 64 | 	</g>
 65 | 	<rect y="-65" display="inline" fill="none" width="416" height="416"/>
 66 | </g>
 67 | <g display="none">
 68 | 	<g display="inline">
 69 | 		<polygon fill="#FF4081" points="249.279,0 84.157,286 166.721,286 331.843,0 		"/>
 70 | 		<polygon fill="#FFFFFF" fill-opacity="0.2" points="249.279,0 290.558,71.5 331.843,0 		"/>
 71 | 		<polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.279,0 290.558,71.5 		"/>
 72 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.279,143 290.558,71.5 		"/>
 73 | 		<polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.279,143 		"/>
 74 | 		<polygon fill-opacity="0.3" points="125.439,214.5 166.721,143 208,214.5 		"/>
 75 | 		<polygon fill-opacity="0.4" points="125.439,214.5 166.721,286 208,214.5 		"/>
 76 | 		<polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 		"/>
 77 | 		<polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.279,143 		"/>
 78 | 	</g>
 79 | 	<g display="inline">
 80 | 		<polygon fill="#FF4081" points="331.84,0 166.718,286 249.279,286 373.121,71.5 		"/>
 81 | 		<polygon fill="#FFFFFF" fill-opacity="0.1" points="290.558,71.5 331.84,0 373.121,71.5 		"/>
 82 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="290.558,71.5 331.84,143 373.121,71.5 		"/>
 83 | 		<polygon fill-opacity="0.2" points="249.279,143 290.558,214.5 331.84,143 		"/>
 84 | 		<polygon fill-opacity="0.3" points="208,214.5 249.279,143 290.558,214.5 		"/>
 85 | 		<polygon fill-opacity="0.4" points="208,214.5 249.279,286 290.558,214.5 		"/>
 86 | 		<polygon fill-opacity="0.5" points="166.718,286 208,214.5 249.279,286 		"/>
 87 | 		<polygon fill-opacity="0.1" points="249.279,143 290.558,71.5 331.84,143 		"/>
 88 | 	</g>
 89 | 	<g display="inline">
 90 | 		<polygon fill="#FF4081" points="166.718,0 42.878,214.5 84.16,286 249.279,0 		"/>
 91 | 		<polygon fill="#FFFFFF" fill-opacity="0.2" points="166.718,0 208,71.5 249.279,0 		"/>
 92 | 		<polygon fill="#FFFFFF" fill-opacity="0.1" points="125.439,71.5 166.718,0 208,71.5 		"/>
 93 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="125.439,71.5 166.718,143 208,71.5 		"/>
 94 | 		<polygon fill-opacity="0.2" points="84.16,143 125.439,214.5 166.718,143 		"/>
 95 | 		<polygon fill-opacity="0.3" points="42.878,214.5 84.16,143 125.439,214.5 		"/>
 96 | 		<polygon fill-opacity="0.4" points="42.878,214.5 84.16,286 125.439,214.5 		"/>
 97 | 		<polygon fill-opacity="0.1" points="84.16,143 125.439,71.5 166.718,143 		"/>
 98 | 	</g>
 99 | 	<rect y="-65" display="inline" fill="none" width="416" height="416"/>
100 | 	<g display="inline">
101 | 		<polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 166.721,286 		"/>
102 | 		<polygon fill="#3F51B5" points="331.843,0 249.279,0 331.843,143 373.121,71.5 		"/>
103 | 		<polygon fill="#7986CB" points="373.121,71.5 249.279,286 331.843,286 414.4,143 		"/>
104 | 		<polygon fill="#536DFE" points="84.157,0 1.597,143 42.878,214.5 166.721,0 		"/>
105 | 		<polygon fill-opacity="0.5" points="249.279,0 290.558,71.5 331.843,0 		"/>
106 | 		<polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 		"/>
107 | 		<polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.439,71.5 166.721,0 		"/>
108 | 		<polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.439,71.5 		"/>
109 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.439,71.5 		"/>
110 | 		<polygon fill-opacity="0.1" points="1.6,143 42.878,71.5 84.157,143 		"/>
111 | 		<polygon fill-opacity="0.2" points="1.6,143 42.878,214.5 84.157,143 		"/>
112 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="125.439,214.5 84.157,143 42.878,214.5 		"/>
113 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.843,143 290.558,71.5 		"/>
114 | 		<g>
115 | 			<polygon fill="#FFFFFF" fill-opacity="0.2" points="331.843,143 373.121,71.5 414.4,143 			"/>
116 | 			<polygon fill="#FFFFFF" fill-opacity="0.1" points="331.843,143 373.121,214.5 414.4,143 			"/>
117 | 			<polygon fill="#FFFFFF" fill-opacity="0" points="290.558,214.5 331.843,143 373.121,214.5 			"/>
118 | 			<polygon fill-opacity="0.1" points="290.558,214.5 331.843,286 373.121,214.5 			"/>
119 | 			<polygon fill-opacity="0.2" points="249.279,286 290.558,214.5 331.843,286 			"/>
120 | 		</g>
121 | 		<polygon fill-opacity="0.2" points="125.439,214.5 84.157,286 42.878,214.5 		"/>
122 | 		<polygon fill-opacity="0.2" points="373.121,71.5 331.843,0 290.558,71.5 		"/>
123 | 	</g>
124 | </g>
125 | <g display="none">
126 | 	<g display="inline">
127 | 		<polygon fill="#9F499B" points="249.279,0 84.157,286 166.721,286 331.843,0 		"/>
128 | 		<polygon fill="#FFFFFF" fill-opacity="0.2" points="249.279,0 290.558,71.5 331.843,0 		"/>
129 | 		<polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.279,0 290.558,71.5 		"/>
130 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.279,143 290.558,71.5 		"/>
131 | 		<polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.279,143 		"/>
132 | 		<polygon fill-opacity="0.3" points="125.439,214.5 166.721,143 208,214.5 		"/>
133 | 		<polygon fill-opacity="0.4" points="125.439,214.5 166.721,286 208,214.5 		"/>
134 | 		<polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 		"/>
135 | 		<polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.279,143 		"/>
136 | 	</g>
137 | 	<g display="inline">
138 | 		<polygon fill="#9F499B" points="331.84,0 166.718,286 249.279,286 373.121,71.5 		"/>
139 | 		<polygon fill="#FFFFFF" fill-opacity="0.1" points="290.558,71.5 331.84,0 373.121,71.5 		"/>
140 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="290.558,71.5 331.84,143 373.121,71.5 		"/>
141 | 		<polygon fill-opacity="0.2" points="249.279,143 290.558,214.5 331.84,143 		"/>
142 | 		<polygon fill-opacity="0.3" points="208,214.5 249.279,143 290.558,214.5 		"/>
143 | 		<polygon fill-opacity="0.4" points="208,214.5 249.279,286 290.558,214.5 		"/>
144 | 		<polygon fill-opacity="0.5" points="166.718,286 208,214.5 249.279,286 		"/>
145 | 		<polygon fill-opacity="0.1" points="249.279,143 290.558,71.5 331.84,143 		"/>
146 | 	</g>
147 | 	<g display="inline">
148 | 		<polygon fill="#9F499B" points="373.121,71.5 249.279,286 331.843,286 414.4,143 		"/>
149 | 		<polygon fill-opacity="0.2" points="331.843,143 373.121,214.5 414.4,143 		"/>
150 | 		<polygon fill-opacity="0.3" points="290.558,214.5 331.843,143 373.121,214.5 		"/>
151 | 		<polygon fill-opacity="0.4" points="290.558,214.5 331.843,286 373.121,214.5 		"/>
152 | 		<polygon fill-opacity="0.5" points="249.279,286 290.558,214.5 331.843,286 		"/>
153 | 		<polygon fill-opacity="0.1" points="331.843,143 373.121,71.5 414.4,143 		"/>
154 | 	</g>
155 | 	<g display="inline">
156 | 		<polygon fill="#9F499B" points="166.718,0 42.878,214.5 84.16,286 249.279,0 		"/>
157 | 		<polygon fill="#FFFFFF" fill-opacity="0.2" points="166.718,0 208,71.5 249.279,0 		"/>
158 | 		<polygon fill="#FFFFFF" fill-opacity="0.1" points="125.439,71.5 166.718,0 208,71.5 		"/>
159 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="125.439,71.5 166.718,143 208,71.5 		"/>
160 | 		<polygon fill-opacity="0.2" points="84.16,143 125.439,214.5 166.718,143 		"/>
161 | 		<polygon fill-opacity="0.3" points="42.878,214.5 84.16,143 125.439,214.5 		"/>
162 | 		<polygon fill-opacity="0.4" points="42.878,214.5 84.16,286 125.439,214.5 		"/>
163 | 		<polygon fill-opacity="0.1" points="84.16,143 125.439,71.5 166.718,143 		"/>
164 | 	</g>
165 | 	<g display="inline">
166 | 		<polygon fill="#9F499B" points="84.157,0 1.6,143 42.878,214.5 166.721,0 		"/>
167 | 		<polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.439,71.5 166.721,0 		"/>
168 | 		<polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.439,71.5 		"/>
169 | 		<polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.439,71.5 		"/>
170 | 		<polygon fill-opacity="0.2" points="1.6,143 42.878,214.5 84.157,143 		"/>
171 | 		<polygon fill-opacity="0.1" points="1.6,143 42.878,71.5 84.157,143 		"/>
172 | 	</g>
173 | 	<rect y="-65" display="inline" fill="none" width="416" height="416"/>
174 | </g>
175 | </svg>
176 | 


--------------------------------------------------------------------------------
/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/scaljeri/polymer-redux/c81e28597a4b57305dd8a26cd7aaad6d42006aa2/favicon.png


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var $,
 2 |     fs = require('fs'),
 3 |     del = require('del'),
 4 |     gulp = require('gulp'),
 5 |     path = require('path'),
 6 |     clean = require('gulp-clean'),
 7 |     runSequence = require('run-sequence'),
 8 |     gulpLoadPlugins = require('gulp-load-plugins');
 9 | 
10 | $ = gulpLoadPlugins();
11 | 
12 | gulp.task('default', ['clean'], function () {
13 |     runSequence('copy', 'js', 'inject-css');
14 | });
15 | 
16 | gulp.task('clean', function () {
17 |     del.sync('./dist/');
18 | });
19 | 
20 | gulp.task('watch', ['clean'], function() {
21 |     runSequence('copy', 'js', 'inject-css', function () {
22 |         return gulp.watch(['app/**/*.{js,html,scss}'], function () {
23 |             runSequence('clean', 'copy', 'js', 'inject-css');
24 |         });
25 |     });
26 | });
27 | 
28 | gulp.task('copy', function() {
29 |     return gulp.src('assets/img/*.*')
30 |         .pipe(gulp.dest('./dist/img'));
31 | });
32 | 
33 | gulp.task('js', function() {
34 |     return gulp.src(['app/**/*.{js,html}'])
35 |         .pipe($.sourcemaps.init())
36 |         .pipe($.if('*.html', $.crisper())) // Extract JS from .html files
37 |         .pipe($.if('*.js', $.babel()))
38 |         .pipe($.sourcemaps.write('.'))
39 |         .pipe(gulp.dest('.tmp/'))
40 |         .pipe(gulp.dest('dist/'));
41 | });
42 | 
43 | gulp.task('sass', function() {
44 |     return gulp.src('./app/scss/**/*.scss')
45 |         .pipe($.sass().on('error', $.sass.logError))
46 |         .pipe(gulp.dest('./dist/css'));
47 | });
48 | 
49 | 
50 | gulp.task('inject-css', ['sass'], function() {
51 |     return gulp.src('./dist/html/**/*.html', {base: './dist/html'})
52 |         .pipe($.tap(function(file, t) {
53 |             var filename = path.basename(file.path).replace(/html$/, 'css');
54 | 
55 |             return gulp.src(file.path, {base: './dist/html'})
56 |                 .pipe($.replace(/\/\* inject:css \*\//,
57 |                     function() {
58 |                         var style = fs.readFileSync('./dist/css/' + filename, 'utf8');
59 |                         return style;
60 |                     }))
61 |                 .pipe(clean())
62 |                 .pipe(gulp.dest('./dist/html'));
63 |         }));
64 | });
65 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
 7 |     <title>Polymer classes in ES6</title>
 8 |     <link rel=icon href="favicon.png">
 9 |     <link rel="import" href="bower/polymer/polymer.html">
10 | 
11 |     <script src="./node_modules/gulp-babel/node_modules/babel-core/browser-polyfill.js"></script>
12 | 
13 |     <link rel="import" href="dist/html/stock-app.html">
14 |     <style>
15 |         body {
16 |             background-image: url(dist/img/background.jpg);
17 |         }
18 |         main {
19 |             align-items: center;
20 |             display: flex;
21 |             flex-direction: column;
22 |         }
23 | 
24 |         .title {
25 |             font-size: 35px;
26 |         }
27 | 
28 |         .search-wrapper {
29 |             align-items: center;
30 |             display: flex;
31 |         }
32 | 
33 |         .stock-input {
34 |             width: 200px;
35 |         }
36 | 
37 |         .search {
38 |             border: 2px solid lightgray;
39 |             height: 40px;
40 |         }
41 |     </style>
42 | </head>
43 | 
44 | <body>
45 |     <stock-app></stock-app>
46 | </body>
47 | 
48 | </html>
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "app",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "gulp": "^3.9.0",
13 |     "run-sequence": "^1.1.4"
14 |   },
15 |   "devDependencies": {
16 |     "del": "^2.0.2",
17 |     "gulp-babel": "^5.2.1",
18 |     "gulp-clean": "^0.3.1",
19 |     "gulp-crisper": "0.0.6",
20 |     "gulp-if": "^2.0.0",
21 |     "gulp-inject": "^3.0.0",
22 |     "gulp-load-plugins": "^1.0.0-rc.1",
23 |     "gulp-replace": "^0.5.4",
24 |     "gulp-sass": "^2.0.4",
25 |     "gulp-sourcemaps": "^1.6.0",
26 |     "gulp-tap": "^0.1.3",
27 |     "vinyl-paths": "^2.0.0"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------