├── README.md
├── compile.html
├── index.html
├── router.html
├── test.html
├── vue.js
├── vueCpu
    ├── echarts2.js
    └── index.html
├── vuex.html
└── weather
    ├── EasePack.min.js
    ├── TweenLite.min.js
    ├── index.css
    ├── index.html
    ├── index.js
    ├── rAF.js
    ├── vue-resource.js
    └── vue.js


/README.md:
--------------------------------------------------------------------------------
  1 | # vue-demo
  2 | 非单页面组件的vue+vue router+vue validator
  3 | > :car:validator组件demo:(点这里)[ https://holidaying.github.io/vue-demo/index.html]
  4 | 
  5 | > :car:vuex demo:(点这里)[ https://holidaying.github.io/vue-demo/vuex.html]
  6 | 
  7 | > :car:vue router demo:(点这里)[ https://holidaying.github.io/vue-demo/vuex.html]
  8 | 
  9 | > :car:vue resource demo:(点这里)[ https://holidaying.github.io/vue-demo/weather/index.html]
 10 | 
 11 | > :car:vue CPU demo:(点这里)[ https://holidaying.github.io/vue-demo/vueCpu/index.html]
 12 | 
 13 | 主图
 14 | ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2604175-c5f7c3d28591c35c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 15 | ##1、首先这是单页面(cdn引入)，非单独文件组件开发（npm构建的）。
 16 | ```
 17 | <script src="https://cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
 18 | <script src="https://unpkg.com/vue-validator@2.1.7/dist/vue-validator.min.js"></script>
 19 | ```
 20 | ##2、页面布局
 21 | ```
 22 | <div id="app">
 23 |         <validator name="validation1">
 24 |             <form novalidate class="validation1">
 25 |                 <div class="username-field">
 26 |                     <label for="username">用户名:</label>
 27 |                     <input id="username" type="text" v-validate:username="['required']" v-model="username">
 28 |                 </div>
 29 |                 <div class="comment-field">
 30 |                     <label for="comment">评论:</label>
 31 |                     <input id="comment" type="text" v-validate:comment="{maxlength: 11}" v-model="comment">
 32 |                 </div>
 33 |                 <div class="errors">
 34 |                     <p v-if="$validation1.username.required">Required your name.</p>
 35 |                     <p v-if="$validation1.comment.maxlength">Your comment is too long.</p>
 36 |                 </div>
 37 |                 <input type="submit" value="提交测试" v-if="!$validation1.username.required" v-on:click="submit($validation1)">
 38 |             </form>
 39 |         </validator>
 40 |         <div class="header-bar">
 41 |             <div class="container">
 42 |                 <nav-bar :items="navBar"></nav-bar>
 43 |                 <hot-bar></hot-bar>
 44 |             </div>
 45 |         </div>
 46 |         <div class="main-content">
 47 |             <list-item v-for="item in listItems" :item="item"></list-item>
 48 |         </div>
 49 |         <footer-bar></footer-bar>
 50 | 
 51 | ```
 52 | > 对应四个组件
 53 | 
 54 | ![Paste_Image.png](http://upload-images.jianshu.io/upload_images/2604175-8a4fabe9d6e741b5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 55 | ##3、启动vue
 56 | ```
 57 | var example1 = new Vue({
 58 |     el: '#app',
 59 |     data: {
 60 |         listItems: [{
 61 |             message: 'Foo',
 62 |             name:"web前端",
 63 |             author:"aaaa",
 64 |             place:"前端",
 65 |             url:'zhuanlan.zhihu.com',
 66 |         }, {
 67 |             message: 'Foo',
 68 |             name:"web前端",
 69 |             author:"dddd",
 70 |             place:"前端",
 71 |             url:'zhuanlan.zhihu.com',
 72 |         }],
 73 |         navBar: [
 74 |             ["问答", "专栏", "头条"],
 75 |             ["前端", "后端", "iOS", "Android", "安全", "工具", "程序员"]
 76 |         ],
 77 |         username:"",
 78 |         comment:"",
 79 |     },
 80 |     methods:
 81 |     {
 82 |         submit:function (argument) {
 83 |             if(argument.valid)
 84 |             {
 85 |                 alert("用户名:"+this.username+'（评论：'+this.comment+'）');
 86 |             }
 87 |             else
 88 |             {
 89 |                 alert("无效");
 90 |             }
 91 |         }
 92 |     }
 93 |   ```
 94 | ##4、利用vue-validator校验
 95 | > 前提条件 
 96 | * 1.下载vue-validator文件
 97 | * 2.定义validator标签，并定义name属性，以便校验时使用
 98 | * 3.form中添加novalidate属性
 99 | * 4. 本章校验的逻辑是当username有值时显示提交按钮，没有值时显示错误的提示信息；当评论数超过11个字符时，错误信息出现。
100 | * 5.当点击提交按钮时，如果username有值，同时评论数小于11个字符时，调用submit函数显示成功，否则失败
101 | * 6. 主要用的是v-validate:username="['required']",v-validate:comment="{maxlength: 11}" ，argument.valid等校验语法
102 | * 7.当输入框的语法不符合规范时，$validation1.username.required取他们的值就为true；当所有的语法符合规范时$validation1.valid才为true
103 | 


--------------------------------------------------------------------------------
/compile.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |   <head></head>
 3 |   <body>
 4 |   <div id="app">
 5 |     <input type="text" id="a" v-model="text">
 6 |     {{text}}
 7 |   </div>
 8 | 　<script type="text/javascript">
 9 | 　　function Compile(node, vm) {
10 |       if(node) {this.$frag = this.nodeToFragment(node, vm);
11 |         return this.$frag;
12 |       }
13 |     }
14 |     Compile.prototype = {
15 |       nodeToFragment: function(node, vm) {
16 |         var self = this;
17 |         var frag = document.createDocumentFragment();
18 |         var child;
19 | 
20 |         while(child = node.firstChild) {
21 |           self.compileElement(child, vm);
22 |           frag.append(child); // 将所有子节点添加到fragment中，child是指向元素首个子节点的引用。将child引用指向的对象append到父对象的末尾，原来child引用的对象就跳到了frag对象的末尾，而child就指向了本来是排在第二个的元素对象。如此循环下去，链接就逐个往后跳了
23 |         }
24 |         return frag;
25 |       },
26 |       compileElement: function(node, vm) {
27 |         var reg = /\{\{(.*)\}\}/;
28 | 
29 |         //节点类型为元素
30 |         if(node.nodeType === 1) {
31 |           var attr = node.attributes;
32 |           // 解析属性
33 |           for(var i = 0; i < attr.length; i++ ) {
34 |             if(attr[i].nodeName == 'v-model') {
35 |               var name = attr[i].nodeValue; // 获取v-model绑定的属性名
36 |               node.addEventListener('input', function(e) {
37 |                 // 给相应的data属性赋值，进而触发该属性的set方法
38 |                  vm.data[name]= e.target.value;
39 |               });
40 |               node.value = vm.data[name]; // 将data的值赋给该node
41 |               node.removeAttribute('v-model');
42 |             }
43 |           };
44 |         }
45 |         //节点类型为text
46 | 　　　　if(node.nodeType === 3) {
47 |           if(reg.test(node.nodeValue)) {
48 |             var name = RegExp.$1; // 获取匹配到的字符串
49 |             name = name.trim();
50 |             node.nodeValue = vm.data[name]; // 将data的值赋给该node
51 |           }
52 |         }
53 |       },
54 |     }
55 |  　　function Vue(options) {
56 |       this.data = options.data;
57 |       var data = this.data;
58 |       var id = options.el;
59 |       var dom =new Compile(document.getElementById(id),this);
60 |       // 编译完成后，将dom返回到app中
61 |       document.getElementById(id).appendChild(dom);
62 |     }
63 |     var vm = new Vue({
64 |       el: 'app',
65 |       data: {
66 |         text: 'hello world'
67 |       }
68 |     });
69 |   </script>
70 |   </body>
71 | </html>


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>vue demo</title>
  7 | </head>
  8 | <style>
  9 | * {
 10 |     margin: 0px;
 11 |     padding: 0px;
 12 | }
 13 | 
 14 | body {
 15 |     font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, WenQuanYi Micro Hei, Microsoft Yahei, sans-serif;
 16 |     font-size: 14px;
 17 |     line-height: 1.5;
 18 |     color: #333;
 19 |     background-color: #fafafa;
 20 | }
 21 | 
 22 | .header-bar {
 23 |     background: #fff;
 24 |     border-top: 2px solid #009a61;
 25 |     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .24), inset 0 0 0 0 #009a61;
 26 | }
 27 | 
 28 | .container {
 29 |     margin: 0px auto;
 30 | }
 31 | 
 32 | ul li {
 33 |     list-style: none;
 34 |     display: inline-block;
 35 | }
 36 | 
 37 | a {
 38 |     text-decoration: none;
 39 | }
 40 | 
 41 | .nav {
 42 |     border-bottom: 1px solid rgba(0, 0, 0, .08);
 43 | }
 44 | 
 45 | .nav .nav_item a {
 46 |     display: block;
 47 |     padding: 10px;
 48 |     color: #9dccb6;
 49 |     white-space: nowrap;
 50 |     line-height: 1;
 51 | }
 52 | 
 53 | .nav .nav_item1 a {
 54 |     display: block;
 55 |     padding: 10px;
 56 |     color: #333;
 57 |     white-space: nowrap;
 58 |     line-height: 1;
 59 | }
 60 | 
 61 | .hot-logo {
 62 |     line-height: 60px;
 63 | }
 64 | 
 65 | .hot-logo h1 a {
 66 |     background: url(https://sf-static.b0.upaiyun.com/v-58aea7a0/global/img/logo.svg) no-repeat 0, url(https://sf-static.b0.upaiyun.com/v-58aea7a0/global/img/toutiao.svg) 100% no-repeat;
 67 |     background-size: 156px 30px, 40px 30px;
 68 |     width: 207px;
 69 |     float: left;
 70 |     display: block;
 71 |     white-space: nowrap;
 72 |     overflow: hidden;
 73 |     text-transform: capitalize;
 74 |     height: 60px;
 75 | }
 76 | 
 77 | .hot-logo .menu {
 78 |     margin-left: 20px;
 79 | }
 80 | 
 81 | .hot-logo .menu a {
 82 |     line-height: 60px;
 83 |     display: inline-block;
 84 |     padding: 0 13px;
 85 |     height: 30px;
 86 |     color: #666;
 87 |     border-radius: 2px;
 88 |     font-size: 16px;
 89 |     text-decoration: none;
 90 |     background: transparent!important;
 91 |     color: #666;
 92 | }
 93 | .news__item
 94 | {
 95 |     overflow: hidden;
 96 |     border-bottom: 1px solid #eee;
 97 | }
 98 | .news__item-title
 99 | {
100 |     margin-top: 10;
101 |     font-size: 16px;
102 |     margin-bottom: 8px;
103 | }
104 | @media (min-width: 1200px) {
105 |     .container,.main-content {
106 |         width: 1140px;
107 |     }
108 | }
109 | 
110 | @media (min-width: 992px) {
111 |     .container,.main-content {
112 |         width: 970px;
113 |     }
114 | }
115 | 
116 | @media (min-width: 768px) {
117 |     .container,.main-content {
118 |         width: 750px;
119 |     }
120 | }
121 | 
122 | .main-content {
123 |     background: #fff;
124 |     border: 1px solid rgba(0,0,0,.09);
125 |     box-shadow: 0 1px 4px 0 rgba(0,0,0,.04);
126 |     border-radius: 3px;
127 |     margin:30px auto;
128 | }
129 | .news__item-meta a
130 | {
131 |         color: #009a61;
132 |  margin-right: 10px!important;   
133 | }
134 | .news__item-zan {
135 |     float: left;
136 |     margin: 15px 10px 15px 20px;
137 |     width: 40px;
138 |     height: 44px;
139 |     text-align: center;
140 |     -webkit-transition: all .1s;
141 |     transition: all .1s;
142 |     border-color: transparent;
143 |     background: #f6f6f6;
144 |     box-shadow: 0 1px 2px 0 rgba(0,0,0,.24);
145 |     border-radius: 3px;
146 | }
147 | .news__item-zan span {
148 |     display: block;
149 |     color: #666;
150 | }
151 | .news__item-zan-icon {
152 |     height: 16px;
153 |     width: 100%;
154 |     background: transparent url(https://sf-static.b0.upaiyun.com/v-58aea7a0/global/img/vote-bg.svg) 0 0 no-repeat;
155 |     background-size: auto 60px;
156 | }
157 | .news__item-zan-text {
158 |     font-size: 18px;
159 |     display: none!important;
160 |     line-height: 1.3;
161 | }
162 | .news__item-comment {
163 |     position: relative;
164 |     float: right;
165 |     height: 76px;
166 |     width: 64px;
167 | }
168 | .news__item-comment .news__item-comment-inner {
169 |     font-size: 13px;
170 |     width: 100%;
171 |     color: #999;
172 |     position: absolute;
173 |     top: 50%;
174 |     -webkit-transform: translateY(-50%);
175 |     transform: translateY(-50%);
176 |     text-align: right;
177 |     right: 20px;
178 | }
179 | .news__item-comment-box-arrow {
180 |     display: block;
181 |     width: 0;
182 |     height: 0;
183 |     border: 10px solid #7fbdb8;
184 |     border-bottom-color: transparent;
185 |     border-top-color: transparent;
186 |     border-right-color: transparent;
187 |     position: absolute;
188 |     right: -10px;
189 |     top: 5px;
190 |     z-index: -1;
191 | }
192 | .news__item-comment-box {
193 |     background: #7fbdb8;
194 |     color: #fff;
195 |     height: 20px;
196 |     line-height: 20px;
197 |     display: inline-block;
198 |     border-radius: 3px;
199 |     padding: 0 6px;
200 |     position: relative;
201 |     min-width: 24px;
202 |     text-align: center;
203 | }
204 | .news__item-info {
205 |     padding: 15px 0;
206 |     padding-left: 75px;
207 |     padding-right: 64px;
208 | }
209 | .validation1
210 | {
211 |     margin: 20px auto;
212 |     width: 600px;
213 |     text-align: center;
214 | }
215 | .validation1 label
216 | {
217 |     width: 60px;
218 |     text-align: center;
219 |     display: inline-block;
220 | }
221 | </style>
222 | 
223 | <body>
224 |     <div id="app">
225 |         <validator name="validation1">
226 |             <form novalidate class="validation1">
227 |                 <div class="username-field">
228 |                     <label for="username">用户名:</label>
229 |                     <input id="username" type="text" v-validate:username="['required']" v-model="username">
230 |                 </div>
231 |                 <div class="comment-field">
232 |                     <label for="comment">评论:</label>
233 |                     <input id="comment" type="text" v-validate:comment="{maxlength: 11}" v-model="comment">
234 |                 </div>
235 |                 <div class="errors">
236 |                     <p v-if="$validation1.username.required">Required your name.</p>
237 |                     <p v-if="$validation1.comment.maxlength">Your comment is too long.</p>
238 |                 </div>
239 |                 <input type="submit" value="提交测试" v-if="!$validation1.username.required" v-on:click="submit($validation1)">
240 |             </form>
241 |         </validator>
242 |         <div class="header-bar">
243 |             <div class="container">
244 |                 <nav-bar :items="navBar"></nav-bar>
245 |                 <hot-bar></hot-bar>
246 |             </div>
247 |         </div>
248 |         <div class="main-content">
249 |             <list-item v-for="item in listItems" :item="item"></list-item>
250 |         </div>
251 |         <footer-bar></footer-bar>
252 |         <!-- 路由匹配到的组件将渲染在这里 -->
253 | </body>
254 | <script src="https://cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
255 | <script src="https://unpkg.com/vue-validator@2.1.7/dist/vue-validator.min.js"></script>
256 | <script>
257 | Vue.component('list-item', {
258 |     template:'<div class="news__item"><div class="news__item-zan"><span class="news__item-zan-icon"></span><span class="news__item-zan-number">8</span><span class="news__item-zan-text">赞</span></div><div class="news__item-comment"><a href=""><div class="news__item-comment-inner"><span class="news__item-comment-box">0</span><span class="news__item-comment-box-arrow"></span></div></a></div><div class="news__item-info-title"><h4 class="news__item-title"><a class="mr10">{{item.name}}</a></h4><p class = "news__item-meta"><span> <a class = "mr10" href=""> {{item.author}}</a>5小时前发布于</span><a class="ml10" href="">{{item.place}}</a><a href ="" class = "news__item-external-link" > {{item.url}}</a></p></div></div>',
259 |     props: ['item']
260 | })
261 | Vue.component('nav-bar', {
262 |     template: '<div class="nav"><ul><li v-for="item in items[0]" class="nav_item"><a href="">{{item}}</a></li><li v-for="item in items[1]" class="nav_item1"><a href="">{{item}}</a></li></ul></div>',
263 |     props: ['items']
264 | })
265 | Vue.component('hot-bar', {
266 |     template: '<div><div class="hot-logo"><h1><a href=""></a></h1><ul class="menu"><li class="menu_item"><a href="">热门的</a></li><li class=""><a href="">最新的</a></li></ul></div>',
267 |     props: ['cc']
268 | })
269 | Vue.component('footer-bar', {
270 |     template: '<div></div>',
271 |     props: ['cc']
272 | })
273 | var example1 = new Vue({
274 |     el: '#app',
275 |     data: {
276 |         listItems: [{
277 |             message: 'Foo',
278 |             name:"web前端",
279 |             author:"aaaa",
280 |             place:"前端",
281 |             url:'zhuanlan.zhihu.com',
282 |         }, {
283 |             message: 'Foo',
284 |             name:"web前端",
285 |             author:"dddd",
286 |             place:"前端",
287 |             url:'zhuanlan.zhihu.com',
288 |         }],
289 |         navBar: [
290 |             ["问答", "专栏", "头条"],
291 |             ["前端", "后端", "iOS", "Android", "安全", "工具", "程序员"]
292 |         ],
293 |         username:"",
294 |         comment:"",
295 |     },
296 |     methods:
297 |     {
298 |         submit:function (argument) {
299 |             if(argument.valid)
300 |             {
301 |                 alert("用户名:"+this.username+'（评论：'+this.comment+'）');
302 |             }
303 |             else
304 |             {
305 |                 alert("无效");
306 |             }
307 |         }
308 |     }
309 | })
310 | </script>
311 | 
312 | </html>
313 | 


--------------------------------------------------------------------------------
/router.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>vue router</title>
  7 | </head>
  8 | <style>
  9 | * {
 10 |     margin: 0px;
 11 |     padding: 0px;
 12 | }
 13 | 
 14 | body {
 15 |     font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, WenQuanYi Micro Hei, Microsoft Yahei, sans-serif;
 16 |     font-size: 14px;
 17 |     line-height: 1.5;
 18 |     color: #333;
 19 |     background-color: #fafafa;
 20 | }
 21 | 
 22 | .header-bar {
 23 |     background: #fff;
 24 |     border-top: 2px solid #009a61;
 25 |     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .24), inset 0 0 0 0 #009a61;
 26 | }
 27 | 
 28 | .container {
 29 |     margin: 0px auto;
 30 | }
 31 | 
 32 | ul li {
 33 |     list-style: none;
 34 |     display: inline-block;
 35 | }
 36 | 
 37 | a {
 38 |     text-decoration: none;
 39 | }
 40 | 
 41 | .nav {
 42 |     border-bottom: 1px solid rgba(0, 0, 0, .08);
 43 | }
 44 | 
 45 | .nav .nav_item a {
 46 |     display: block;
 47 |     padding: 10px;
 48 |     color: #9dccb6;
 49 |     white-space: nowrap;
 50 |     line-height: 1;
 51 | }
 52 | 
 53 | .nav .nav_item1 a {
 54 |     display: block;
 55 |     padding: 10px;
 56 |     color: #333;
 57 |     white-space: nowrap;
 58 |     line-height: 1;
 59 | }
 60 | 
 61 | .hot-logo {
 62 |     line-height: 60px;
 63 | }
 64 | 
 65 | .hot-logo h1 a {
 66 |     background: url(https://sf-static.b0.upaiyun.com/v-58aea7a0/global/img/logo.svg) no-repeat 0, url(https://sf-static.b0.upaiyun.com/v-58aea7a0/global/img/toutiao.svg) 100% no-repeat;
 67 |     background-size: 156px 30px, 40px 30px;
 68 |     width: 207px;
 69 |     float: left;
 70 |     display: block;
 71 |     white-space: nowrap;
 72 |     overflow: hidden;
 73 |     text-transform: capitalize;
 74 |     height: 60px;
 75 | }
 76 | 
 77 | .hot-logo .menu {
 78 |     margin-left: 20px;
 79 | }
 80 | 
 81 | .hot-logo .menu a {
 82 |     line-height: 60px;
 83 |     display: inline-block;
 84 |     padding: 0 13px;
 85 |     height: 30px;
 86 |     color: #666;
 87 |     border-radius: 2px;
 88 |     font-size: 16px;
 89 |     text-decoration: none;
 90 |     background: transparent!important;
 91 |     color: #666;
 92 | }
 93 | 
 94 | .news__item {
 95 |     overflow: hidden;
 96 |     border-bottom: 1px solid #eee;
 97 | }
 98 | 
 99 | .news__item-title {
100 |     margin-top: 10;
101 |     font-size: 16px;
102 |     margin-bottom: 8px;
103 | }
104 | 
105 | @media (min-width: 1200px) {
106 |     .container,
107 |     .main-content {
108 |         width: 1140px;
109 |     }
110 | }
111 | 
112 | @media (min-width: 992px) {
113 |     .container,
114 |     .main-content {
115 |         width: 970px;
116 |     }
117 | }
118 | 
119 | @media (min-width: 768px) {
120 |     .container,
121 |     .main-content {
122 |         width: 750px;
123 |     }
124 | }
125 | 
126 | .main-content {
127 |     background: #fff;
128 |     border: 1px solid rgba(0, 0, 0, .09);
129 |     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .04);
130 |     border-radius: 3px;
131 |     margin: 30px auto;
132 | }
133 | 
134 | .news__item-meta a {
135 |     color: #009a61;
136 |     margin-right: 10px!important;
137 | }
138 | 
139 | .news__item-zan {
140 |     float: left;
141 |     margin: 15px 10px 15px 20px;
142 |     width: 40px;
143 |     height: 44px;
144 |     text-align: center;
145 |     -webkit-transition: all .1s;
146 |     transition: all .1s;
147 |     border-color: transparent;
148 |     background: #f6f6f6;
149 |     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .24);
150 |     border-radius: 3px;
151 | }
152 | 
153 | .news__item-zan span {
154 |     display: block;
155 |     color: #666;
156 | }
157 | 
158 | .news__item-zan-icon {
159 |     height: 16px;
160 |     width: 100%;
161 |     background: transparent url(https://sf-static.b0.upaiyun.com/v-58aea7a0/global/img/vote-bg.svg) 0 0 no-repeat;
162 |     background-size: auto 60px;
163 | }
164 | 
165 | .news__item-zan-text {
166 |     font-size: 18px;
167 |     display: none!important;
168 |     line-height: 1.3;
169 | }
170 | 
171 | .news__item-comment {
172 |     position: relative;
173 |     float: right;
174 |     height: 76px;
175 |     width: 64px;
176 | }
177 | 
178 | .news__item-comment .news__item-comment-inner {
179 |     font-size: 13px;
180 |     width: 100%;
181 |     color: #999;
182 |     position: absolute;
183 |     top: 50%;
184 |     -webkit-transform: translateY(-50%);
185 |     transform: translateY(-50%);
186 |     text-align: right;
187 |     right: 20px;
188 | }
189 | 
190 | .news__item-comment-box-arrow {
191 |     display: block;
192 |     width: 0;
193 |     height: 0;
194 |     border: 10px solid #7fbdb8;
195 |     border-bottom-color: transparent;
196 |     border-top-color: transparent;
197 |     border-right-color: transparent;
198 |     position: absolute;
199 |     right: -10px;
200 |     top: 5px;
201 |     z-index: -1;
202 | }
203 | 
204 | .news__item-comment-box {
205 |     background: #7fbdb8;
206 |     color: #fff;
207 |     height: 20px;
208 |     line-height: 20px;
209 |     display: inline-block;
210 |     border-radius: 3px;
211 |     padding: 0 6px;
212 |     position: relative;
213 |     min-width: 24px;
214 |     text-align: center;
215 | }
216 | 
217 | .news__item-info {
218 |     padding: 15px 0;
219 |     padding-left: 75px;
220 |     padding-right: 64px;
221 | }
222 | 
223 | .validation1 {
224 |     margin: 20px auto;
225 |     width: 600px;
226 |     text-align: center;
227 | }
228 | 
229 | .validation1 label {
230 |     width: 60px;
231 |     text-align: center;
232 |     display: inline-block;
233 | }
234 | </style>
235 | 
236 | <body>
237 |     <div id="app">
238 |         <validator name="validation1">
239 |             <form novalidate class="validation1">
240 |                 <div class="username-field">
241 |                     <label for="username">用户名:</label>
242 |                     <input id="username" type="text" v-validate:username="['required']" v-model="username">
243 |                 </div>
244 |                 <div class="comment-field">
245 |                     <label for="comment">评论:</label>
246 |                     <input id="comment" type="text" v-validate:comment="{maxlength: 11}" v-model="comment">
247 |                 </div>
248 |                 <div class="errors">
249 |                     <p v-if="$validation1.username.required">Required your name.</p>
250 |                     <p v-if="$validation1.comment.maxlength">Your comment is too long.</p>
251 |                 </div>
252 |                 <input type="submit" value="提交测试" v-if="!$validation1.username.required" v-on:click="submit($validation1)">
253 |             </form>
254 |         </validator>
255 |         <div class="header-bar">
256 |             <div class="container">
257 |                 <nav-bar :items="navBar"></nav-bar>
258 |                 <hot-bar></hot-bar>
259 |             </div>
260 |         </div>
261 |         <div class="main-content">
262 |             <infor-item v-for="item in listItems" :item="item"></infor-item>
263 |         </div>
264 |         <a v-link="{path: '/foo' }">Go to Foo</a>
265 |         <a v-link="{path: '/bar' }">Go to Bar</a>
266 |         <router-view></router-view>
267 | </body>
268 | <script src="https://cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
269 | <script src="https://unpkg.com/vue-validator@2.1.7/dist/vue-validator.min.js"></script>
270 | <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/0.7.10/vue-router.min.js"></script>
271 | <script>
272 | var inforItem = Vue.extend({
273 |     template: '<div class="news__item"><div class="news__item-zan"><span class="news__item-zan-icon"></span><span class="news__item-zan-number">8</span><span class="news__item-zan-text">赞</span></div><div class="news__item-comment"><a href=""><div class="news__item-comment-inner"><span class="news__item-comment-box">0</span><span class="news__item-comment-box-arrow"></span></div></a></div><div class="news__item-info-title"><h4 class="news__item-title"><a class="mr10">{{item.name}}</a></h4><p class = "news__item-meta"><span> <a class = "mr10" href=""> {{item.author}}</a>5小时前发布于</span><a class="ml10" href="">{{item.place}}</a><a href ="" class = "news__item-external-link" > {{item.url}}</a></p></div></div>',
274 |     props: ['item']
275 | })
276 | var navBar = Vue.extend({
277 |     template: '<div class="nav"><ul><li v-for="item in items[0]" class="nav_item"><a href="">{{item}}</a></li><li v-for="item in items[1]" class="nav_item1"><a href="">{{item}}</a></li></ul></div>',
278 |     props: ['items']
279 | })
280 | var hotBar = Vue.extend({
281 |     template: '<div><div class="hot-logo"><h1><a href=""></a></h1><ul class="menu"><li class="menu_item"><a href="">热门的</a></li><li class=""><a href="">最新的</a></li></ul></div>',
282 |     props: ['cc']
283 | })
284 | var footerBar = Vue.extend({
285 |     template: '<div>hello footer</div>',
286 |     props: ['cc']
287 | })
288 | var popBar = Vue.extend({
289 |     template: '<div>hello pop</div>',
290 |     props: ['cc']
291 | })
292 | Vue.component('infor-item', inforItem);
293 | Vue.component('nav-bar', navBar);
294 | Vue.component('hot-bar', hotBar);
295 | Vue.component('footer-bar', footerBar);
296 | Vue.component('pop-bar', popBar);
297 | 
298 | var router = new VueRouter()
299 | 
300 | // 定义路由规则
301 | // 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
302 | // 创建的组件构造函数，也可以是一个组件选项对象。
303 | // 稍后我们会讲解嵌套路由
304 | router.map({
305 |     '/foo': {
306 |         component: footerBar
307 |     },
308 |     '/bar': {
309 |         component: popBar
310 |     }
311 | })
312 | 
313 | // router.start(App, '#app');
314 | var App = Vue.extend({
315 |     data() {
316 |         return {
317 |             listItems: [{
318 |                 message: 'Foo',
319 |                 name: "web前端",
320 |                 author: "aaaa",
321 |                 place: "前端",
322 |                 url: 'zhuanlan.zhihu.com',
323 |             }, {
324 |                 message: 'Foo',
325 |                 name: "web前端",
326 |                 author: "dddd",
327 |                 place: "前端",
328 |                 url: 'zhuanlan.zhihu.com',
329 |             }],
330 |             navBar: [
331 |                 ["问答", "专栏", "头条"],
332 |                 ["前端", "后端", "iOS", "Android", "安全", "工具", "程序员"]
333 |             ],
334 |             username: "",
335 |             comment: "",
336 |         }
337 |     },
338 |     methods: {
339 |         submit: function(argument) {
340 |             if (argument.valid) {
341 |                 alert("用户名:" + this.username + '（评论：' + this.comment + '）');
342 |             } else {
343 |                 alert("无效");
344 |             }
345 |         }
346 |     },
347 | })
348 | router.start(App, '#app');
349 | // router.go('/');
350 | // 现在我们可以启动应用了！
351 | </script>
352 | 
353 | </html>
354 | 


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |  <head></head>
 3 |  <body>
 4 |   <div id="app">
 5 |     <input type="text" id="a">
 6 |     <span id="b"></span>
 7 |   </div>
 8 | 
 9 |   <script type="text/javascript">
10 |    var obj = {};
11 |    Object.defineProperty(obj, 'hello', {
12 |        get: function() {
13 |            console.log('get val:'+ val);
14 |            return val;
15 |        },
16 |        set: function(newVal) {
17 |             val = newVal;
18 |             console.log('set val:'+ val);
19 |             document.getElementById('a').value = val;
20 |             document.getElementById('b').innerHTML = val;
21 |        }
22 |     });
23 |     document.addEventListener('keyup', function(e) {
24 |       obj.hello = e.target.value;
25 |     });
26 |    </script>
27 |   </body>
28 | </html>


--------------------------------------------------------------------------------
/vueCpu/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>vue demo</title>
  7 | </head>
  8 | <style>
  9 | * {
 10 |     margin: 0px;
 11 |     padding: 0px;
 12 | }
 13 | 
 14 | body {
 15 |     font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, WenQuanYi Micro Hei, Microsoft Yahei, sans-serif;
 16 |     font-size: 14px;
 17 |     line-height: 1.5;
 18 |     color: #333;
 19 |     background-color: #fafafa;
 20 | }
 21 | 
 22 | .eChart {
 23 |     height: 230px;
 24 | }
 25 | 
 26 | header {
 27 |     margin-bottom: 30px;
 28 |     height: 60px;
 29 |     background: #000;
 30 |     line-height: 60px;
 31 |     font: 14px;
 32 |     color: #fff;
 33 | }
 34 | 
 35 | header p {
 36 |     float: right;
 37 |     padding-right: 40px;
 38 | }
 39 | 
 40 | html {
 41 |     height: 100%;
 42 | }
 43 | 
 44 | body {
 45 |     margin: 0;
 46 |     padding: 0;
 47 |     height: 100%;
 48 |     background-color: #434343;
 49 |     background-image: linear-gradient(#434343, #282828);
 50 | }
 51 | 
 52 | #content {
 53 |     background-color: transparent;
 54 |     background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
 55 |     height: 100%;
 56 |     background-size: 50px 50px;
 57 |     text-align: center;
 58 | }
 59 | 
 60 | .copyright {
 61 |     width: 360px;
 62 |     display: inline-block;
 63 |     background: rgba(0, 0, 0, .3);
 64 |     border-radius: 5px;
 65 |     padding: 15px;
 66 |     margin-top: 100px;
 67 | }
 68 | 
 69 | .copyright p {
 70 |     margin: 0 0 10px;
 71 |     text-align: left;
 72 |     color: rgba(255, 255, 255, 0.6);
 73 | }
 74 | </style>
 75 | 
 76 | <body>
 77 |     <div id="app">
 78 |         <div id="content">
 79 |             <header class="text-center">
 80 |                 <p>利用VUE、ECHART做的CPU</p>
 81 |             </header>
 82 |             <div class="main-content">
 83 |                 <cup-demo></cup-demo>
 84 |             </div>
 85 |             <div class="text-center copyright">
 86 |                 <p>我能抽象出整个世界．．． </p>
 87 |                 <p>因为你在我心中是那么的具体．．．</p>
 88 |                 <p>所以我的世界并不完整．．． </p>
 89 |                 <p>我可以重载甚至覆盖这个世界里的任何一种方法．．． </p>
 90 |                 <p>但是我却不能重载对你的思念．．． </p>
 91 |                 <p>也许命中注定了 你在我的世界里永远的烙上了静态的属性．．． </p>
 92 |                 <p> 而我不慎调用了爱你这个方法．．．</p>
 93 |                 <p>当我义无返顾的把自己作为参数传进这个方法时．．． </p>
 94 |                 <p>我才发现爱上你是一个死循环．．． </p>
 95 |                 <a href="https://github.com/holidaying" target="_blank">作者|西安小哥</a></div>
 96 |         </div>
 97 |     </div>
 98 |     <!-- 路由匹配到的组件将渲染在这里 -->
 99 | </body>
100 | <script src="https://cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
101 | <script src="./echarts2.js"></script>
102 | <script>
103 | window.timeTransformHS = function(value) {
104 |     var data = new Date(value);
105 |     var hours = data.getHours() > 9 ? data.getHours().toString() : '0' + data.getHours();
106 |     var minutes = data.getMinutes() > 9 ? data.getMinutes().toString() : '0' + data.getMinutes();
107 |     var ss = data.getSeconds() > 9 ? data.getSeconds().toString() : '0' + data.getSeconds();
108 |     value = hours + ":" + minutes + ":" + ss;
109 |     return value;
110 | }; //返回的时分秒
111 | var myChart;
112 | var timeTicket = null;
113 | Vue.component('cup-demo', {
114 |     template: '<div id="eChart-container" class="eChart"></div>',
115 |     props: ['item'],
116 |     //数据对象
117 |     data: function() {
118 |         return {
119 |             nowTime: new Date().getTime(),
120 |             staticData: "",
121 |             staticName: "",
122 |             firstRequsetData: 0,
123 |             addData: 0,
124 |             initRequsetData: []
125 | 
126 |         };
127 |     },
128 |     beforeDestroy: function() {
129 |         clearInterval(timeTicket);
130 |     },
131 |     ready: function() {
132 |         //获取经典统计并初始化数据
133 |         var self = this;
134 |         timeS = 1;
135 |         self.initRequsetData = [0, '2', '1', '3', '5', '6', '10', '12', '23', '10']
136 |             // 基于准备好的dom，初始化echarts实例
137 |         myChart = echarts.init(document.getElementById('eChart-container'));
138 |         // 指定图表的配置项和数据
139 |         var option = {
140 |             title: {
141 |                 text: '卡口流量',
142 |                 left: 'left',
143 |                 show: false,
144 |             },
145 |             tooltip: {
146 |                 trigger: 'item',
147 |                 formatter: function(item) {
148 |                     var html = "";
149 |                     var Time = new Date().getHours();
150 |                     var hour = Time;
151 |                     if (item.dataIndex == 12) {
152 |                         hour = Time + 1;
153 |                     }
154 |                     var html = '时间：<span class="fc-cf9">' + item.name + '</span><br>';
155 |                     html += item.seriesName + "：" + item.value;
156 |                     return html
157 |                 },
158 |                 position: 'inside',
159 |                 // backgroundColor: "#485158",
160 |                 textStyle: {
161 |                     color: '#fff',
162 |                 }
163 |             },
164 |             grid: {
165 |                 x: '5%',
166 |                 y: '20',
167 |                 width: '90%',
168 |                 height: '190',
169 |                 borderWidth: '0px',
170 |                 borderColor: 'transparent',
171 |             },
172 |             xAxis: {
173 |                 type: 'category',
174 |                 // name: 'x',
175 |                 splitLine: {
176 |                     show: false,
177 |                 },
178 |                 boundaryGap: false,
179 |                 axisLine: {
180 |                     onZero: true,
181 |                     lineStyle: {
182 |                         color: 'rgba(39,174,96,1)',
183 |                     },
184 |                 },
185 |                 axisLabel: {
186 |                     //X轴刻度配置
187 |                     interval: 0, //0：表示全部显示不间隔；auto:表示自动根据刻度个数和宽度自动设置间隔个数,
188 |                 },
189 |                 data: (function() {
190 |                     var now = new Date().getTime();
191 |                     var res = [];
192 |                     var len = 10;
193 |                     while (len--) {
194 |                         res.push(timeTransformHS(now)); //获取当前秒数(0-59));
195 |                         now = now - 1000 * 6 * (10 - len + 1);
196 |                     }
197 |                     return res.reverse();
198 |                 })()
199 |             },
200 |             yAxis: {
201 |                 type: 'value',
202 |                 splitLine: {
203 |                     show: false,
204 |                 },
205 |                 axisLine: {
206 |                     onZero: true,
207 |                     lineStyle: {
208 |                         color: 'rgba(39,174,96,1)',
209 |                     }
210 |                 },
211 |                 axisLabel: {
212 |                     show: true,
213 |                     formatter: function(a) {
214 |                         var str;
215 |                         if (a < 10000) {
216 |                             str = a;
217 |                         } else if (a < 100000000) {
218 |                             str = (a / 10000.0).toFixed(1) + '万';
219 |                         } else {
220 |                             str = (a / 100000000.0).toFixed(1) + '亿';
221 |                         }
222 |                         return str;
223 |                     }
224 |                 },
225 |                 minInterval: 1
226 |             },
227 |             series: [{
228 |                 sampling: 'max',
229 |                 itemStyle: {
230 |                     normal: {
231 |                         color: 'rgba(39,174,96,0.8)'
232 |                     }
233 |                 },
234 |                 areaStyle: {
235 |                     normal: {
236 |                         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
237 |                             offset: 0,
238 |                             color: 'rgba(39,174,96,0.2)'
239 |                         }, {
240 |                             offset: 0,
241 |                             color: 'rgba(39,174,96,0.2)'
242 |                         }])
243 |                     }
244 |                 },
245 |                 smooth: true,
246 |                 name: "CPU",
247 |                 type: 'line',
248 |                 animationDurationUpdate: 1000,
249 |                 data: self.initRequsetData,
250 |             }]
251 |         };
252 |         // 使用刚指定的配置项和数据显示图表。
253 |         myChart.setOption(option);
254 |         self.pushData();
255 |     },
256 |     methods: {
257 |         pushData: function() {
258 |             var self = this;
259 |             clearInterval(timeTicket);
260 |             timeTicket = setInterval(function() {
261 |                 var now = new Date().getTime();
262 |                 var option = myChart.getOption();
263 |                 var data = Math.random() * 100;
264 |                 self.addData = Math.abs(data - self.firstRequsetData); //求差值
265 |                 self.initRequsetData.push(self.addData);
266 |                 option.xAxis[0].data.push(timeTransformHS(now));
267 |                 self.initRequsetData.shift();
268 |                 option.xAxis[0].data.shift();
269 |                 option.series[0].data = self.initRequsetData;
270 |                 myChart.setOption(option);
271 |                 self.firstRequsetData = data;
272 |             }, 6000);
273 |         },
274 |     }
275 | });
276 | var example1 = new Vue({
277 |     el: '#app',
278 |     data: {},
279 |     methods: {}
280 | });
281 | </script>
282 | 
283 | </html>
284 | 


--------------------------------------------------------------------------------
/vuex.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>vue vuex</title>
  7 | </head>
  8 | <style>
  9 | * {
 10 |     margin: 0px;
 11 |     padding: 0px;
 12 | }
 13 | 
 14 | body {
 15 |     font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, WenQuanYi Micro Hei, Microsoft Yahei, sans-serif;
 16 |     font-size: 14px;
 17 |     line-height: 1.5;
 18 |     color: #333;
 19 |     background-color: #fafafa;
 20 | }
 21 | 
 22 | .header-bar {
 23 |     background: #fff;
 24 |     border-top: 2px solid #009a61;
 25 |     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .24), inset 0 0 0 0 #009a61;
 26 | }
 27 | 
 28 | .container {
 29 |     margin: 0px auto;
 30 | }
 31 | 
 32 | ul li {
 33 |     list-style: none;
 34 |     display: inline-block;
 35 | }
 36 | 
 37 | a {
 38 |     text-decoration: none;
 39 | }
 40 | 
 41 | .nav {
 42 |     border-bottom: 1px solid rgba(0, 0, 0, .08);
 43 | }
 44 | 
 45 | .nav .nav_item a {
 46 |     display: block;
 47 |     padding: 10px;
 48 |     color: #9dccb6;
 49 |     white-space: nowrap;
 50 |     line-height: 1;
 51 | }
 52 | 
 53 | .nav .nav_item1 a {
 54 |     display: block;
 55 |     padding: 10px;
 56 |     color: #333;
 57 |     white-space: nowrap;
 58 |     line-height: 1;
 59 | }
 60 | 
 61 | .hot-logo {
 62 |     line-height: 60px;
 63 | }
 64 | 
 65 | .hot-logo h1 a {
 66 |     background: url(https://sf-static.b0.upaiyun.com/v-58aea7a0/global/img/logo.svg) no-repeat 0, url(https://sf-static.b0.upaiyun.com/v-58aea7a0/global/img/toutiao.svg) 100% no-repeat;
 67 |     background-size: 156px 30px, 40px 30px;
 68 |     width: 207px;
 69 |     float: left;
 70 |     display: block;
 71 |     white-space: nowrap;
 72 |     overflow: hidden;
 73 |     text-transform: capitalize;
 74 |     height: 60px;
 75 | }
 76 | 
 77 | .hot-logo .menu {
 78 |     margin-left: 20px;
 79 | }
 80 | 
 81 | .hot-logo .menu a {
 82 |     line-height: 60px;
 83 |     display: inline-block;
 84 |     padding: 0 13px;
 85 |     height: 30px;
 86 |     color: #666;
 87 |     border-radius: 2px;
 88 |     font-size: 16px;
 89 |     text-decoration: none;
 90 |     background: transparent!important;
 91 |     color: #666;
 92 | }
 93 | 
 94 | .news__item {
 95 |     overflow: hidden;
 96 |     border-bottom: 1px solid #eee;
 97 | }
 98 | 
 99 | .news__item-title {
100 |     margin-top: 10;
101 |     font-size: 16px;
102 |     margin-bottom: 8px;
103 | }
104 | 
105 | @media (min-width: 1200px) {
106 |     .container,
107 |     .main-content {
108 |         width: 1140px;
109 |     }
110 | }
111 | 
112 | @media (min-width: 992px) {
113 |     .container,
114 |     .main-content {
115 |         width: 970px;
116 |     }
117 | }
118 | 
119 | @media (min-width: 768px) {
120 |     .container,
121 |     .main-content {
122 |         width: 750px;
123 |     }
124 | }
125 | 
126 | .main-content {
127 |     background: #fff;
128 |     border: 1px solid rgba(0, 0, 0, .09);
129 |     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .04);
130 |     border-radius: 3px;
131 |     margin: 30px auto;
132 | }
133 | 
134 | .news__item-meta a {
135 |     color: #009a61;
136 |     margin-right: 10px!important;
137 | }
138 | 
139 | .news__item-zan {
140 |     float: left;
141 |     margin: 15px 10px 15px 20px;
142 |     width: 40px;
143 |     height: 44px;
144 |     text-align: center;
145 |     -webkit-transition: all .1s;
146 |     transition: all .1s;
147 |     border-color: transparent;
148 |     background: #f6f6f6;
149 |     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .24);
150 |     border-radius: 3px;
151 | }
152 | 
153 | .news__item-zan span {
154 |     display: block;
155 |     color: #666;
156 | }
157 | 
158 | .news__item-zan-icon {
159 |     height: 16px;
160 |     width: 100%;
161 |     background: transparent url(https://sf-static.b0.upaiyun.com/v-58aea7a0/global/img/vote-bg.svg) 0 0 no-repeat;
162 |     background-size: auto 60px;
163 | }
164 | 
165 | .news__item-zan-text {
166 |     font-size: 18px;
167 |     display: none!important;
168 |     line-height: 1.3;
169 | }
170 | 
171 | .news__item-comment {
172 |     position: relative;
173 |     float: right;
174 |     height: 76px;
175 |     width: 64px;
176 | }
177 | 
178 | .news__item-comment .news__item-comment-inner {
179 |     font-size: 13px;
180 |     width: 100%;
181 |     color: #999;
182 |     position: absolute;
183 |     top: 50%;
184 |     -webkit-transform: translateY(-50%);
185 |     transform: translateY(-50%);
186 |     text-align: right;
187 |     right: 20px;
188 | }
189 | 
190 | .news__item-comment-box-arrow {
191 |     display: block;
192 |     width: 0;
193 |     height: 0;
194 |     border: 10px solid #7fbdb8;
195 |     border-bottom-color: transparent;
196 |     border-top-color: transparent;
197 |     border-right-color: transparent;
198 |     position: absolute;
199 |     right: -10px;
200 |     top: 5px;
201 |     z-index: -1;
202 | }
203 | 
204 | .news__item-comment-box {
205 |     background: #7fbdb8;
206 |     color: #fff;
207 |     height: 20px;
208 |     line-height: 20px;
209 |     display: inline-block;
210 |     border-radius: 3px;
211 |     padding: 0 6px;
212 |     position: relative;
213 |     min-width: 24px;
214 |     text-align: center;
215 | }
216 | 
217 | .news__item-info {
218 |     padding: 15px 0;
219 |     padding-left: 75px;
220 |     padding-right: 64px;
221 | }
222 | 
223 | .validation1 {
224 |     margin: 20px auto;
225 |     width: 600px;
226 |     text-align: center;
227 | }
228 | 
229 | .validation1 label {
230 |     width: 60px;
231 |     text-align: center;
232 |     display: inline-block;
233 | }
234 | 
235 | .btn-increase {
236 |     height: 40px;
237 |     width: 100px;
238 |     border: 5px;
239 |     cursor: pointer;
240 |     background: #ff9d00;
241 |     color: #fff;
242 | }
243 | </style>
244 | 
245 | <body>
246 |     <div id="app">
247 |         <validator name="validation1">
248 |             <form novalidate class="validation1">
249 |                 <div class="username-field">
250 |                     <label for="username">用户名:</label>
251 |                     <input id="username" type="text" v-validate:username="['required']" v-model="username">
252 |                 </div>
253 |                 <div class="comment-field">
254 |                     <label for="comment">评论:</label>
255 |                     <input id="comment" type="text" v-validate:comment="{maxlength: 11}" v-model="comment">
256 |                 </div>
257 |                 <div class="errors">
258 |                     <p v-if="$validation1.username.required">Required your name.</p>
259 |                     <p v-if="$validation1.comment.maxlength">Your comment is too long.</p>
260 |                 </div>
261 |                 <input type="submit" value="提交测试" v-if="!$validation1.username.required" v-on:click="submit($validation1)">
262 |             </form>
263 |         </validator>
264 |         <div class="header-bar">
265 |             <div class="container">
266 |                 <nav-bar :items="navBar"></nav-bar>
267 |                 <hot-bar></hot-bar>
268 |             </div>
269 |         </div>
270 |         <div class="main-content">
271 |             <list-item v-for="item in listItems" :item="item"></list-item>
272 |         </div>
273 |         <div class="main-content">
274 |             <p>{{count}}</p>
275 |             <p>store.commit('increment');<span v-on:click="increase" class="btn-increase">点击触发</span></p>
276 |         </div>
277 |         <footer-bar></footer-bar>
278 |         <!-- 路由匹配到的组件将渲染在这里 -->
279 | </body>
280 | <script src="https://cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
281 | <script src="https://unpkg.com/vue-validator@2.1.7/dist/vue-validator.min.js"></script>
282 | <script src="https://unpkg.com/vuex"></script>
283 | <script>
284 | Vue.component('list-item', {
285 |     template: '<div class="news__item"><div class="news__item-zan"><span class="news__item-zan-icon"></span><span class="news__item-zan-number">8</span><span class="news__item-zan-text">赞</span></div><div class="news__item-comment"><a href=""><div class="news__item-comment-inner"><span class="news__item-comment-box">0</span><span class="news__item-comment-box-arrow"></span></div></a></div><div class="news__item-info-title"><h4 class="news__item-title"><a class="mr10">{{item.name}}</a></h4><p class = "news__item-meta"><span> <a class = "mr10" href=""> {{item.author}}</a>5小时前发布于</span><a class="ml10" href="">{{item.place}}</a><a href ="" class = "news__item-external-link" > {{item.url}}</a></p></div></div>',
286 |     props: ['item']
287 | })
288 | Vue.component('nav-bar', {
289 |     template: '<div class="nav"><ul><li v-for="item in items[0]" class="nav_item"><a href="">{{item}}</a></li><li v-for="item in items[1]" class="nav_item1"><a href="">{{item}}</a></li></ul></div>',
290 |     props: ['items']
291 | })
292 | Vue.component('hot-bar', {
293 |     template: '<div><div class="hot-logo"><h1><a href=""></a></h1><ul class="menu"><li class="menu_item"><a href="">热门的</a></li><li class=""><a href="">最新的</a></li></ul></div>',
294 |     props: ['cc']
295 | })
296 | Vue.component('footer-bar', {
297 |     template: '<div></div>',
298 |     props: ['cc']
299 | })
300 | const store = new Vuex.Store({
301 |         state: {
302 |             count: 0
303 |         },
304 |         mutations: {
305 |             increment(state) {
306 |                 state.count++
307 |             }
308 |         }
309 |     })
310 |     // store.commit('increment');
311 | var example1 = new Vue({
312 |     el: '#app',
313 |     data: {
314 |         listItems: [{
315 |             message: 'Foo',
316 |             name: "web前端",
317 |             author: "aaaa",
318 |             place: "前端",
319 |             url: 'zhuanlan.zhihu.com',
320 |         }, {
321 |             message: 'Foo',
322 |             name: "web前端",
323 |             author: "dddd",
324 |             place: "前端",
325 |             url: 'zhuanlan.zhihu.com',
326 |         }],
327 |         navBar: [
328 |             ["问答", "专栏", "头条"],
329 |             ["前端", "后端", "iOS", "Android", "安全", "工具", "程序员"]
330 |         ],
331 |         username: "",
332 |         comment: "",
333 |         count:"0"
334 |     },
335 |     computed: {
336 |         count() {
337 |             return store.state.count
338 |         }
339 |     },
340 |     methods: {
341 |         submit: function(argument) {
342 |             if (argument.valid) {
343 |                 alert("用户名:" + this.username + '（评论：' + this.comment + '）');
344 |             } else {
345 |                 alert("无效");
346 |             }
347 |         },
348 |         increase: function() {
349 |             store.commit('increment');
350 |         }
351 |     }
352 | })
353 | </script>
354 | 
355 | </html>
356 | 


--------------------------------------------------------------------------------
/weather/EasePack.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * VERSION: beta 1.9.4
 3 |  * DATE: 2014-07-17
 4 |  * UPDATES AND DOCS AT: http://www.greensock.com
 5 |  *
 6 |  * @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
 7 |  * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
 8 |  * Club GreenSock members, the software agreement that was issued with your membership.
 9 |  * 
10 |  * @author: Jack Doyle, jack@greensock.com
11 |  **/
12 | var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";_gsScope._gsDefine("easing.Back",["easing.Ease"],function(t){var e,i,s,r=_gsScope.GreenSockGlobals||_gsScope,n=r.com.greensock,a=2*Math.PI,o=Math.PI/2,h=n._class,l=function(e,i){var s=h("easing."+e,function(){},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,s},_=t.register||function(){},u=function(t,e,i,s){var r=h("easing."+t,{easeOut:new e,easeIn:new i,easeInOut:new s},!0);return _(r,t),r},c=function(t,e,i){this.t=t,this.v=e,i&&(this.next=i,i.prev=this,this.c=i.v-e,this.gap=i.t-t)},p=function(e,i){var s=h("easing."+e,function(t){this._p1=t||0===t?t:1.70158,this._p2=1.525*this._p1},!0),r=s.prototype=new t;return r.constructor=s,r.getRatio=i,r.config=function(t){return new s(t)},s},f=u("Back",p("BackOut",function(t){return(t-=1)*t*((this._p1+1)*t+this._p1)+1}),p("BackIn",function(t){return t*t*((this._p1+1)*t-this._p1)}),p("BackInOut",function(t){return 1>(t*=2)?.5*t*t*((this._p2+1)*t-this._p2):.5*((t-=2)*t*((this._p2+1)*t+this._p2)+2)})),m=h("easing.SlowMo",function(t,e,i){e=e||0===e?e:.7,null==t?t=.7:t>1&&(t=1),this._p=1!==t?e:0,this._p1=(1-t)/2,this._p2=t,this._p3=this._p1+this._p2,this._calcEnd=i===!0},!0),d=m.prototype=new t;return d.constructor=m,d.getRatio=function(t){var e=t+(.5-t)*this._p;return this._p1>t?this._calcEnd?1-(t=1-t/this._p1)*t:e-(t=1-t/this._p1)*t*t*t*e:t>this._p3?this._calcEnd?1-(t=(t-this._p3)/this._p1)*t:e+(t-e)*(t=(t-this._p3)/this._p1)*t*t*t:this._calcEnd?1:e},m.ease=new m(.7,.7),d.config=m.config=function(t,e,i){return new m(t,e,i)},e=h("easing.SteppedEase",function(t){t=t||1,this._p1=1/t,this._p2=t+1},!0),d=e.prototype=new t,d.constructor=e,d.getRatio=function(t){return 0>t?t=0:t>=1&&(t=.999999999),(this._p2*t>>0)*this._p1},d.config=e.config=function(t){return new e(t)},i=h("easing.RoughEase",function(e){e=e||{};for(var i,s,r,n,a,o,h=e.taper||"none",l=[],_=0,u=0|(e.points||20),p=u,f=e.randomize!==!1,m=e.clamp===!0,d=e.template instanceof t?e.template:null,g="number"==typeof e.strength?.4*e.strength:.4;--p>-1;)i=f?Math.random():1/u*p,s=d?d.getRatio(i):i,"none"===h?r=g:"out"===h?(n=1-i,r=n*n*g):"in"===h?r=i*i*g:.5>i?(n=2*i,r=.5*n*n*g):(n=2*(1-i),r=.5*n*n*g),f?s+=Math.random()*r-.5*r:p%2?s+=.5*r:s-=.5*r,m&&(s>1?s=1:0>s&&(s=0)),l[_++]={x:i,y:s};for(l.sort(function(t,e){return t.x-e.x}),o=new c(1,1,null),p=u;--p>-1;)a=l[p],o=new c(a.x,a.y,o);this._prev=new c(0,0,0!==o.t?o:o.next)},!0),d=i.prototype=new t,d.constructor=i,d.getRatio=function(t){var e=this._prev;if(t>e.t){for(;e.next&&t>=e.t;)e=e.next;e=e.prev}else for(;e.prev&&e.t>=t;)e=e.prev;return this._prev=e,e.v+(t-e.t)/e.gap*e.c},d.config=function(t){return new i(t)},i.ease=new i,u("Bounce",l("BounceOut",function(t){return 1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375}),l("BounceIn",function(t){return 1/2.75>(t=1-t)?1-7.5625*t*t:2/2.75>t?1-(7.5625*(t-=1.5/2.75)*t+.75):2.5/2.75>t?1-(7.5625*(t-=2.25/2.75)*t+.9375):1-(7.5625*(t-=2.625/2.75)*t+.984375)}),l("BounceInOut",function(t){var e=.5>t;return t=e?1-2*t:2*t-1,t=1/2.75>t?7.5625*t*t:2/2.75>t?7.5625*(t-=1.5/2.75)*t+.75:2.5/2.75>t?7.5625*(t-=2.25/2.75)*t+.9375:7.5625*(t-=2.625/2.75)*t+.984375,e?.5*(1-t):.5*t+.5})),u("Circ",l("CircOut",function(t){return Math.sqrt(1-(t-=1)*t)}),l("CircIn",function(t){return-(Math.sqrt(1-t*t)-1)}),l("CircInOut",function(t){return 1>(t*=2)?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)})),s=function(e,i,s){var r=h("easing."+e,function(t,e){this._p1=t||1,this._p2=e||s,this._p3=this._p2/a*(Math.asin(1/this._p1)||0)},!0),n=r.prototype=new t;return n.constructor=r,n.getRatio=i,n.config=function(t,e){return new r(t,e)},r},u("Elastic",s("ElasticOut",function(t){return this._p1*Math.pow(2,-10*t)*Math.sin((t-this._p3)*a/this._p2)+1},.3),s("ElasticIn",function(t){return-(this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2))},.3),s("ElasticInOut",function(t){return 1>(t*=2)?-.5*this._p1*Math.pow(2,10*(t-=1))*Math.sin((t-this._p3)*a/this._p2):.5*this._p1*Math.pow(2,-10*(t-=1))*Math.sin((t-this._p3)*a/this._p2)+1},.45)),u("Expo",l("ExpoOut",function(t){return 1-Math.pow(2,-10*t)}),l("ExpoIn",function(t){return Math.pow(2,10*(t-1))-.001}),l("ExpoInOut",function(t){return 1>(t*=2)?.5*Math.pow(2,10*(t-1)):.5*(2-Math.pow(2,-10*(t-1)))})),u("Sine",l("SineOut",function(t){return Math.sin(t*o)}),l("SineIn",function(t){return-Math.cos(t*o)+1}),l("SineInOut",function(t){return-.5*(Math.cos(Math.PI*t)-1)})),h("easing.EaseLookup",{find:function(e){return t.map[e]}},!0),_(r.SlowMo,"SlowMo","ease,"),_(i,"RoughEase","ease,"),_(e,"SteppedEase","ease,"),f},!0)}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()();


--------------------------------------------------------------------------------
/weather/TweenLite.min.js:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * VERSION: 1.13.1
 3 |  * DATE: 2014-07-22
 4 |  * UPDATES AND DOCS AT: http://www.greensock.com
 5 |  *
 6 |  * @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
 7 |  * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
 8 |  * Club GreenSock members, the software agreement that was issued with your membership.
 9 |  * 
10 |  * @author: Jack Doyle, jack@greensock.com
11 |  */
12 | (function(t,e){"use strict";var i=t.GreenSockGlobals=t.GreenSockGlobals||t;if(!i.TweenLite){var s,n,r,a,o,l=function(t){var e,s=t.split("."),n=i;for(e=0;s.length>e;e++)n[s[e]]=n=n[s[e]]||{};return n},h=l("com.greensock"),_=1e-10,u=function(t){var e,i=[],s=t.length;for(e=0;e!==s;i.push(t[e++]));return i},f=function(){},m=function(){var t=Object.prototype.toString,e=t.call([]);return function(i){return null!=i&&(i instanceof Array||"object"==typeof i&&!!i.push&&t.call(i)===e)}}(),p={},c=function(s,n,r,a){this.sc=p[s]?p[s].sc:[],p[s]=this,this.gsClass=null,this.func=r;var o=[];this.check=function(h){for(var _,u,f,m,d=n.length,v=d;--d>-1;)(_=p[n[d]]||new c(n[d],[])).gsClass?(o[d]=_.gsClass,v--):h&&_.sc.push(this);if(0===v&&r)for(u=("com.greensock."+s).split("."),f=u.pop(),m=l(u.join("."))[f]=this.gsClass=r.apply(r,o),a&&(i[f]=m,"function"==typeof define&&define.amd?define((t.GreenSockAMDPath?t.GreenSockAMDPath+"/":"")+s.split(".").pop(),[],function(){return m}):s===e&&"undefined"!=typeof module&&module.exports&&(module.exports=m)),d=0;this.sc.length>d;d++)this.sc[d].check()},this.check(!0)},d=t._gsDefine=function(t,e,i,s){return new c(t,e,i,s)},v=h._class=function(t,e,i){return e=e||function(){},d(t,[],function(){return e},i),e};d.globals=i;var g=[0,0,1,1],T=[],y=v("easing.Ease",function(t,e,i,s){this._func=t,this._type=i||0,this._power=s||0,this._params=e?g.concat(e):g},!0),w=y.map={},P=y.register=function(t,e,i,s){for(var n,r,a,o,l=e.split(","),_=l.length,u=(i||"easeIn,easeOut,easeInOut").split(",");--_>-1;)for(r=l[_],n=s?v("easing."+r,null,!0):h.easing[r]||{},a=u.length;--a>-1;)o=u[a],w[r+"."+o]=w[o+r]=n[o]=t.getRatio?t:t[o]||new t};for(r=y.prototype,r._calcEnd=!1,r.getRatio=function(t){if(this._func)return this._params[0]=t,this._func.apply(null,this._params);var e=this._type,i=this._power,s=1===e?1-t:2===e?t:.5>t?2*t:2*(1-t);return 1===i?s*=s:2===i?s*=s*s:3===i?s*=s*s*s:4===i&&(s*=s*s*s*s),1===e?1-s:2===e?s:.5>t?s/2:1-s/2},s=["Linear","Quad","Cubic","Quart","Quint,Strong"],n=s.length;--n>-1;)r=s[n]+",Power"+n,P(new y(null,null,1,n),r,"easeOut",!0),P(new y(null,null,2,n),r,"easeIn"+(0===n?",easeNone":"")),P(new y(null,null,3,n),r,"easeInOut");w.linear=h.easing.Linear.easeIn,w.swing=h.easing.Quad.easeInOut;var b=v("events.EventDispatcher",function(t){this._listeners={},this._eventTarget=t||this});r=b.prototype,r.addEventListener=function(t,e,i,s,n){n=n||0;var r,l,h=this._listeners[t],_=0;for(null==h&&(this._listeners[t]=h=[]),l=h.length;--l>-1;)r=h[l],r.c===e&&r.s===i?h.splice(l,1):0===_&&n>r.pr&&(_=l+1);h.splice(_,0,{c:e,s:i,up:s,pr:n}),this!==a||o||a.wake()},r.removeEventListener=function(t,e){var i,s=this._listeners[t];if(s)for(i=s.length;--i>-1;)if(s[i].c===e)return s.splice(i,1),void 0},r.dispatchEvent=function(t){var e,i,s,n=this._listeners[t];if(n)for(e=n.length,i=this._eventTarget;--e>-1;)s=n[e],s.up?s.c.call(s.s||i,{type:t,target:i}):s.c.call(s.s||i)};var k=t.requestAnimationFrame,A=t.cancelAnimationFrame,S=Date.now||function(){return(new Date).getTime()},x=S();for(s=["ms","moz","webkit","o"],n=s.length;--n>-1&&!k;)k=t[s[n]+"RequestAnimationFrame"],A=t[s[n]+"CancelAnimationFrame"]||t[s[n]+"CancelRequestAnimationFrame"];v("Ticker",function(t,e){var i,s,n,r,l,h=this,u=S(),m=e!==!1&&k,p=500,c=33,d=function(t){var e,a,o=S()-x;o>p&&(u+=o-c),x+=o,h.time=(x-u)/1e3,e=h.time-l,(!i||e>0||t===!0)&&(h.frame++,l+=e+(e>=r?.004:r-e),a=!0),t!==!0&&(n=s(d)),a&&h.dispatchEvent("tick")};b.call(h),h.time=h.frame=0,h.tick=function(){d(!0)},h.lagSmoothing=function(t,e){p=t||1/_,c=Math.min(e,p,0)},h.sleep=function(){null!=n&&(m&&A?A(n):clearTimeout(n),s=f,n=null,h===a&&(o=!1))},h.wake=function(){null!==n?h.sleep():h.frame>10&&(x=S()-p+5),s=0===i?f:m&&k?k:function(t){return setTimeout(t,0|1e3*(l-h.time)+1)},h===a&&(o=!0),d(2)},h.fps=function(t){return arguments.length?(i=t,r=1/(i||60),l=this.time+r,h.wake(),void 0):i},h.useRAF=function(t){return arguments.length?(h.sleep(),m=t,h.fps(i),void 0):m},h.fps(t),setTimeout(function(){m&&(!n||5>h.frame)&&h.useRAF(!1)},1500)}),r=h.Ticker.prototype=new h.events.EventDispatcher,r.constructor=h.Ticker;var C=v("core.Animation",function(t,e){if(this.vars=e=e||{},this._duration=this._totalDuration=t||0,this._delay=Number(e.delay)||0,this._timeScale=1,this._active=e.immediateRender===!0,this.data=e.data,this._reversed=e.reversed===!0,B){o||a.wake();var i=this.vars.useFrames?q:B;i.add(this,i._time),this.vars.paused&&this.paused(!0)}});a=C.ticker=new h.Ticker,r=C.prototype,r._dirty=r._gc=r._initted=r._paused=!1,r._totalTime=r._time=0,r._rawPrevTime=-1,r._next=r._last=r._onUpdate=r._timeline=r.timeline=null,r._paused=!1;var R=function(){o&&S()-x>2e3&&a.wake(),setTimeout(R,2e3)};R(),r.play=function(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},r.pause=function(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},r.resume=function(t,e){return null!=t&&this.seek(t,e),this.paused(!1)},r.seek=function(t,e){return this.totalTime(Number(t),e!==!1)},r.restart=function(t,e){return this.reversed(!1).paused(!1).totalTime(t?-this._delay:0,e!==!1,!0)},r.reverse=function(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},r.render=function(){},r.invalidate=function(){return this},r.isActive=function(){var t,e=this._timeline,i=this._startTime;return!e||!this._gc&&!this._paused&&e.isActive()&&(t=e.rawTime())>=i&&i+this.totalDuration()/this._timeScale>t},r._enabled=function(t,e){return o||a.wake(),this._gc=!t,this._active=this.isActive(),e!==!0&&(t&&!this.timeline?this._timeline.add(this,this._startTime-this._delay):!t&&this.timeline&&this._timeline._remove(this,!0)),!1},r._kill=function(){return this._enabled(!1,!1)},r.kill=function(t,e){return this._kill(t,e),this},r._uncache=function(t){for(var e=t?this:this.timeline;e;)e._dirty=!0,e=e.timeline;return this},r._swapSelfInParams=function(t){for(var e=t.length,i=t.concat();--e>-1;)"{self}"===t[e]&&(i[e]=this);return i},r.eventCallback=function(t,e,i,s){if("on"===(t||"").substr(0,2)){var n=this.vars;if(1===arguments.length)return n[t];null==e?delete n[t]:(n[t]=e,n[t+"Params"]=m(i)&&-1!==i.join("").indexOf("{self}")?this._swapSelfInParams(i):i,n[t+"Scope"]=s),"onUpdate"===t&&(this._onUpdate=e)}return this},r.delay=function(t){return arguments.length?(this._timeline.smoothChildTiming&&this.startTime(this._startTime+t-this._delay),this._delay=t,this):this._delay},r.duration=function(t){return arguments.length?(this._duration=this._totalDuration=t,this._uncache(!0),this._timeline.smoothChildTiming&&this._time>0&&this._time<this._duration&&0!==t&&this.totalTime(this._totalTime*(t/this._duration),!0),this):(this._dirty=!1,this._duration)},r.totalDuration=function(t){return this._dirty=!1,arguments.length?this.duration(t):this._totalDuration},r.time=function(t,e){return arguments.length?(this._dirty&&this.totalDuration(),this.totalTime(t>this._duration?this._duration:t,e)):this._time},r.totalTime=function(t,e,i){if(o||a.wake(),!arguments.length)return this._totalTime;if(this._timeline){if(0>t&&!i&&(t+=this.totalDuration()),this._timeline.smoothChildTiming){this._dirty&&this.totalDuration();var s=this._totalDuration,n=this._timeline;if(t>s&&!i&&(t=s),this._startTime=(this._paused?this._pauseTime:n._time)-(this._reversed?s-t:t)/this._timeScale,n._dirty||this._uncache(!1),n._timeline)for(;n._timeline;)n._timeline._time!==(n._startTime+n._totalTime)/n._timeScale&&n.totalTime(n._totalTime,!0),n=n._timeline}this._gc&&this._enabled(!0,!1),(this._totalTime!==t||0===this._duration)&&(this.render(t,e,!1),O.length&&M())}return this},r.progress=r.totalProgress=function(t,e){return arguments.length?this.totalTime(this.duration()*t,e):this._time/this.duration()},r.startTime=function(t){return arguments.length?(t!==this._startTime&&(this._startTime=t,this.timeline&&this.timeline._sortChildren&&this.timeline.add(this,t-this._delay)),this):this._startTime},r.timeScale=function(t){if(!arguments.length)return this._timeScale;if(t=t||_,this._timeline&&this._timeline.smoothChildTiming){var e=this._pauseTime,i=e||0===e?e:this._timeline.totalTime();this._startTime=i-(i-this._startTime)*this._timeScale/t}return this._timeScale=t,this._uncache(!1)},r.reversed=function(t){return arguments.length?(t!=this._reversed&&(this._reversed=t,this.totalTime(this._timeline&&!this._timeline.smoothChildTiming?this.totalDuration()-this._totalTime:this._totalTime,!0)),this):this._reversed},r.paused=function(t){if(!arguments.length)return this._paused;if(t!=this._paused&&this._timeline){o||t||a.wake();var e=this._timeline,i=e.rawTime(),s=i-this._pauseTime;!t&&e.smoothChildTiming&&(this._startTime+=s,this._uncache(!1)),this._pauseTime=t?i:null,this._paused=t,this._active=this.isActive(),!t&&0!==s&&this._initted&&this.duration()&&this.render(e.smoothChildTiming?this._totalTime:(i-this._startTime)/this._timeScale,!0,!0)}return this._gc&&!t&&this._enabled(!0,!1),this};var D=v("core.SimpleTimeline",function(t){C.call(this,0,t),this.autoRemoveChildren=this.smoothChildTiming=!0});r=D.prototype=new C,r.constructor=D,r.kill()._gc=!1,r._first=r._last=null,r._sortChildren=!1,r.add=r.insert=function(t,e){var i,s;if(t._startTime=Number(e||0)+t._delay,t._paused&&this!==t._timeline&&(t._pauseTime=t._startTime+(this.rawTime()-t._startTime)/t._timeScale),t.timeline&&t.timeline._remove(t,!0),t.timeline=t._timeline=this,t._gc&&t._enabled(!0,!0),i=this._last,this._sortChildren)for(s=t._startTime;i&&i._startTime>s;)i=i._prev;return i?(t._next=i._next,i._next=t):(t._next=this._first,this._first=t),t._next?t._next._prev=t:this._last=t,t._prev=i,this._timeline&&this._uncache(!0),this},r._remove=function(t,e){return t.timeline===this&&(e||t._enabled(!1,!0),t._prev?t._prev._next=t._next:this._first===t&&(this._first=t._next),t._next?t._next._prev=t._prev:this._last===t&&(this._last=t._prev),t._next=t._prev=t.timeline=null,this._timeline&&this._uncache(!0)),this},r.render=function(t,e,i){var s,n=this._first;for(this._totalTime=this._time=this._rawPrevTime=t;n;)s=n._next,(n._active||t>=n._startTime&&!n._paused)&&(n._reversed?n.render((n._dirty?n.totalDuration():n._totalDuration)-(t-n._startTime)*n._timeScale,e,i):n.render((t-n._startTime)*n._timeScale,e,i)),n=s},r.rawTime=function(){return o||a.wake(),this._totalTime};var I=v("TweenLite",function(e,i,s){if(C.call(this,i,s),this.render=I.prototype.render,null==e)throw"Cannot tween a null target.";this.target=e="string"!=typeof e?e:I.selector(e)||e;var n,r,a,o=e.jquery||e.length&&e!==t&&e[0]&&(e[0]===t||e[0].nodeType&&e[0].style&&!e.nodeType),l=this.vars.overwrite;if(this._overwrite=l=null==l?Q[I.defaultOverwrite]:"number"==typeof l?l>>0:Q[l],(o||e instanceof Array||e.push&&m(e))&&"number"!=typeof e[0])for(this._targets=a=u(e),this._propLookup=[],this._siblings=[],n=0;a.length>n;n++)r=a[n],r?"string"!=typeof r?r.length&&r!==t&&r[0]&&(r[0]===t||r[0].nodeType&&r[0].style&&!r.nodeType)?(a.splice(n--,1),this._targets=a=a.concat(u(r))):(this._siblings[n]=$(r,this,!1),1===l&&this._siblings[n].length>1&&K(r,this,null,1,this._siblings[n])):(r=a[n--]=I.selector(r),"string"==typeof r&&a.splice(n+1,1)):a.splice(n--,1);else this._propLookup={},this._siblings=$(e,this,!1),1===l&&this._siblings.length>1&&K(e,this,null,1,this._siblings);(this.vars.immediateRender||0===i&&0===this._delay&&this.vars.immediateRender!==!1)&&(this._time=-_,this.render(-this._delay))},!0),E=function(e){return e.length&&e!==t&&e[0]&&(e[0]===t||e[0].nodeType&&e[0].style&&!e.nodeType)},z=function(t,e){var i,s={};for(i in t)G[i]||i in e&&"transform"!==i&&"x"!==i&&"y"!==i&&"width"!==i&&"height"!==i&&"className"!==i&&"border"!==i||!(!U[i]||U[i]&&U[i]._autoCSS)||(s[i]=t[i],delete t[i]);t.css=s};r=I.prototype=new C,r.constructor=I,r.kill()._gc=!1,r.ratio=0,r._firstPT=r._targets=r._overwrittenProps=r._startAt=null,r._notifyPluginsOfEnabled=r._lazy=!1,I.version="1.13.1",I.defaultEase=r._ease=new y(null,null,1,1),I.defaultOverwrite="auto",I.ticker=a,I.autoSleep=!0,I.lagSmoothing=function(t,e){a.lagSmoothing(t,e)},I.selector=t.$||t.jQuery||function(e){var i=t.$||t.jQuery;return i?(I.selector=i,i(e)):"undefined"==typeof document?e:document.querySelectorAll?document.querySelectorAll(e):document.getElementById("#"===e.charAt(0)?e.substr(1):e)};var O=[],L={},N=I._internals={isArray:m,isSelector:E,lazyTweens:O},U=I._plugins={},F=N.tweenLookup={},j=0,G=N.reservedProps={ease:1,delay:1,overwrite:1,onComplete:1,onCompleteParams:1,onCompleteScope:1,useFrames:1,runBackwards:1,startAt:1,onUpdate:1,onUpdateParams:1,onUpdateScope:1,onStart:1,onStartParams:1,onStartScope:1,onReverseComplete:1,onReverseCompleteParams:1,onReverseCompleteScope:1,onRepeat:1,onRepeatParams:1,onRepeatScope:1,easeParams:1,yoyo:1,immediateRender:1,repeat:1,repeatDelay:1,data:1,paused:1,reversed:1,autoCSS:1,lazy:1},Q={none:0,all:1,auto:2,concurrent:3,allOnStart:4,preexisting:5,"true":1,"false":0},q=C._rootFramesTimeline=new D,B=C._rootTimeline=new D,M=N.lazyRender=function(){var t=O.length;for(L={};--t>-1;)s=O[t],s&&s._lazy!==!1&&(s.render(s._lazy,!1,!0),s._lazy=!1);O.length=0};B._startTime=a.time,q._startTime=a.frame,B._active=q._active=!0,setTimeout(M,1),C._updateRoot=I.render=function(){var t,e,i;if(O.length&&M(),B.render((a.time-B._startTime)*B._timeScale,!1,!1),q.render((a.frame-q._startTime)*q._timeScale,!1,!1),O.length&&M(),!(a.frame%120)){for(i in F){for(e=F[i].tweens,t=e.length;--t>-1;)e[t]._gc&&e.splice(t,1);0===e.length&&delete F[i]}if(i=B._first,(!i||i._paused)&&I.autoSleep&&!q._first&&1===a._listeners.tick.length){for(;i&&i._paused;)i=i._next;i||a.sleep()}}},a.addEventListener("tick",C._updateRoot);var $=function(t,e,i){var s,n,r=t._gsTweenID;if(F[r||(t._gsTweenID=r="t"+j++)]||(F[r]={target:t,tweens:[]}),e&&(s=F[r].tweens,s[n=s.length]=e,i))for(;--n>-1;)s[n]===e&&s.splice(n,1);return F[r].tweens},K=function(t,e,i,s,n){var r,a,o,l;if(1===s||s>=4){for(l=n.length,r=0;l>r;r++)if((o=n[r])!==e)o._gc||o._enabled(!1,!1)&&(a=!0);else if(5===s)break;return a}var h,u=e._startTime+_,f=[],m=0,p=0===e._duration;for(r=n.length;--r>-1;)(o=n[r])===e||o._gc||o._paused||(o._timeline!==e._timeline?(h=h||H(e,0,p),0===H(o,h,p)&&(f[m++]=o)):u>=o._startTime&&o._startTime+o.totalDuration()/o._timeScale>u&&((p||!o._initted)&&2e-10>=u-o._startTime||(f[m++]=o)));for(r=m;--r>-1;)o=f[r],2===s&&o._kill(i,t)&&(a=!0),(2!==s||!o._firstPT&&o._initted)&&o._enabled(!1,!1)&&(a=!0);return a},H=function(t,e,i){for(var s=t._timeline,n=s._timeScale,r=t._startTime;s._timeline;){if(r+=s._startTime,n*=s._timeScale,s._paused)return-100;s=s._timeline}return r/=n,r>e?r-e:i&&r===e||!t._initted&&2*_>r-e?_:(r+=t.totalDuration()/t._timeScale/n)>e+_?0:r-e-_};r._init=function(){var t,e,i,s,n,r=this.vars,a=this._overwrittenProps,o=this._duration,l=!!r.immediateRender,h=r.ease;if(r.startAt){this._startAt&&(this._startAt.render(-1,!0),this._startAt.kill()),n={};for(s in r.startAt)n[s]=r.startAt[s];if(n.overwrite=!1,n.immediateRender=!0,n.lazy=l&&r.lazy!==!1,n.startAt=n.delay=null,this._startAt=I.to(this.target,0,n),l)if(this._time>0)this._startAt=null;else if(0!==o)return}else if(r.runBackwards&&0!==o)if(this._startAt)this._startAt.render(-1,!0),this._startAt.kill(),this._startAt=null;else{i={};for(s in r)G[s]&&"autoCSS"!==s||(i[s]=r[s]);if(i.overwrite=0,i.data="isFromStart",i.lazy=l&&r.lazy!==!1,i.immediateRender=l,this._startAt=I.to(this.target,0,i),l){if(0===this._time)return}else this._startAt._init(),this._startAt._enabled(!1)}if(this._ease=h=h?h instanceof y?h:"function"==typeof h?new y(h,r.easeParams):w[h]||I.defaultEase:I.defaultEase,r.easeParams instanceof Array&&h.config&&(this._ease=h.config.apply(h,r.easeParams)),this._easeType=this._ease._type,this._easePower=this._ease._power,this._firstPT=null,this._targets)for(t=this._targets.length;--t>-1;)this._initProps(this._targets[t],this._propLookup[t]={},this._siblings[t],a?a[t]:null)&&(e=!0);else e=this._initProps(this.target,this._propLookup,this._siblings,a);if(e&&I._onPluginEvent("_onInitAllProps",this),a&&(this._firstPT||"function"!=typeof this.target&&this._enabled(!1,!1)),r.runBackwards)for(i=this._firstPT;i;)i.s+=i.c,i.c=-i.c,i=i._next;this._onUpdate=r.onUpdate,this._initted=!0},r._initProps=function(e,i,s,n){var r,a,o,l,h,_;if(null==e)return!1;L[e._gsTweenID]&&M(),this.vars.css||e.style&&e!==t&&e.nodeType&&U.css&&this.vars.autoCSS!==!1&&z(this.vars,e);for(r in this.vars){if(_=this.vars[r],G[r])_&&(_ instanceof Array||_.push&&m(_))&&-1!==_.join("").indexOf("{self}")&&(this.vars[r]=_=this._swapSelfInParams(_,this));else if(U[r]&&(l=new U[r])._onInitTween(e,this.vars[r],this)){for(this._firstPT=h={_next:this._firstPT,t:l,p:"setRatio",s:0,c:1,f:!0,n:r,pg:!0,pr:l._priority},a=l._overwriteProps.length;--a>-1;)i[l._overwriteProps[a]]=this._firstPT;(l._priority||l._onInitAllProps)&&(o=!0),(l._onDisable||l._onEnable)&&(this._notifyPluginsOfEnabled=!0)}else this._firstPT=i[r]=h={_next:this._firstPT,t:e,p:r,f:"function"==typeof e[r],n:r,pg:!1,pr:0},h.s=h.f?e[r.indexOf("set")||"function"!=typeof e["get"+r.substr(3)]?r:"get"+r.substr(3)]():parseFloat(e[r]),h.c="string"==typeof _&&"="===_.charAt(1)?parseInt(_.charAt(0)+"1",10)*Number(_.substr(2)):Number(_)-h.s||0;h&&h._next&&(h._next._prev=h)}return n&&this._kill(n,e)?this._initProps(e,i,s,n):this._overwrite>1&&this._firstPT&&s.length>1&&K(e,this,i,this._overwrite,s)?(this._kill(i,e),this._initProps(e,i,s,n)):(this._firstPT&&(this.vars.lazy!==!1&&this._duration||this.vars.lazy&&!this._duration)&&(L[e._gsTweenID]=!0),o)},r.render=function(t,e,i){var s,n,r,a,o=this._time,l=this._duration,h=this._rawPrevTime;if(t>=l)this._totalTime=this._time=l,this.ratio=this._ease._calcEnd?this._ease.getRatio(1):1,this._reversed||(s=!0,n="onComplete"),0===l&&(this._initted||!this.vars.lazy||i)&&(this._startTime===this._timeline._duration&&(t=0),(0===t||0>h||h===_)&&h!==t&&(i=!0,h>_&&(n="onReverseComplete")),this._rawPrevTime=a=!e||t||h===t?t:_);else if(1e-7>t)this._totalTime=this._time=0,this.ratio=this._ease._calcEnd?this._ease.getRatio(0):0,(0!==o||0===l&&h>0&&h!==_)&&(n="onReverseComplete",s=this._reversed),0>t?(this._active=!1,0===l&&(this._initted||!this.vars.lazy||i)&&(h>=0&&(i=!0),this._rawPrevTime=a=!e||t||h===t?t:_)):this._initted||(i=!0);else if(this._totalTime=this._time=t,this._easeType){var u=t/l,f=this._easeType,m=this._easePower;(1===f||3===f&&u>=.5)&&(u=1-u),3===f&&(u*=2),1===m?u*=u:2===m?u*=u*u:3===m?u*=u*u*u:4===m&&(u*=u*u*u*u),this.ratio=1===f?1-u:2===f?u:.5>t/l?u/2:1-u/2}else this.ratio=this._ease.getRatio(t/l);if(this._time!==o||i){if(!this._initted){if(this._init(),!this._initted||this._gc)return;if(!i&&this._firstPT&&(this.vars.lazy!==!1&&this._duration||this.vars.lazy&&!this._duration))return this._time=this._totalTime=o,this._rawPrevTime=h,O.push(this),this._lazy=t,void 0;this._time&&!s?this.ratio=this._ease.getRatio(this._time/l):s&&this._ease._calcEnd&&(this.ratio=this._ease.getRatio(0===this._time?0:1))}for(this._lazy!==!1&&(this._lazy=!1),this._active||!this._paused&&this._time!==o&&t>=0&&(this._active=!0),0===o&&(this._startAt&&(t>=0?this._startAt.render(t,e,i):n||(n="_dummyGS")),this.vars.onStart&&(0!==this._time||0===l)&&(e||this.vars.onStart.apply(this.vars.onStartScope||this,this.vars.onStartParams||T))),r=this._firstPT;r;)r.f?r.t[r.p](r.c*this.ratio+r.s):r.t[r.p]=r.c*this.ratio+r.s,r=r._next;this._onUpdate&&(0>t&&this._startAt&&this._startTime&&this._startAt.render(t,e,i),e||(this._time!==o||s)&&this._onUpdate.apply(this.vars.onUpdateScope||this,this.vars.onUpdateParams||T)),n&&(!this._gc||i)&&(0>t&&this._startAt&&!this._onUpdate&&this._startTime&&this._startAt.render(t,e,i),s&&(this._timeline.autoRemoveChildren&&this._enabled(!1,!1),this._active=!1),!e&&this.vars[n]&&this.vars[n].apply(this.vars[n+"Scope"]||this,this.vars[n+"Params"]||T),0===l&&this._rawPrevTime===_&&a!==_&&(this._rawPrevTime=0))}},r._kill=function(t,e){if("all"===t&&(t=null),null==t&&(null==e||e===this.target))return this._lazy=!1,this._enabled(!1,!1);e="string"!=typeof e?e||this._targets||this.target:I.selector(e)||e;var i,s,n,r,a,o,l,h;if((m(e)||E(e))&&"number"!=typeof e[0])for(i=e.length;--i>-1;)this._kill(t,e[i])&&(o=!0);else{if(this._targets){for(i=this._targets.length;--i>-1;)if(e===this._targets[i]){a=this._propLookup[i]||{},this._overwrittenProps=this._overwrittenProps||[],s=this._overwrittenProps[i]=t?this._overwrittenProps[i]||{}:"all";break}}else{if(e!==this.target)return!1;a=this._propLookup,s=this._overwrittenProps=t?this._overwrittenProps||{}:"all"}if(a){l=t||a,h=t!==s&&"all"!==s&&t!==a&&("object"!=typeof t||!t._tempKill);for(n in l)(r=a[n])&&(r.pg&&r.t._kill(l)&&(o=!0),r.pg&&0!==r.t._overwriteProps.length||(r._prev?r._prev._next=r._next:r===this._firstPT&&(this._firstPT=r._next),r._next&&(r._next._prev=r._prev),r._next=r._prev=null),delete a[n]),h&&(s[n]=1);!this._firstPT&&this._initted&&this._enabled(!1,!1)}}return o},r.invalidate=function(){return this._notifyPluginsOfEnabled&&I._onPluginEvent("_onDisable",this),this._firstPT=null,this._overwrittenProps=null,this._onUpdate=null,this._startAt=null,this._initted=this._active=this._notifyPluginsOfEnabled=this._lazy=!1,this._propLookup=this._targets?{}:[],this},r._enabled=function(t,e){if(o||a.wake(),t&&this._gc){var i,s=this._targets;if(s)for(i=s.length;--i>-1;)this._siblings[i]=$(s[i],this,!0);else this._siblings=$(this.target,this,!0)}return C.prototype._enabled.call(this,t,e),this._notifyPluginsOfEnabled&&this._firstPT?I._onPluginEvent(t?"_onEnable":"_onDisable",this):!1},I.to=function(t,e,i){return new I(t,e,i)},I.from=function(t,e,i){return i.runBackwards=!0,i.immediateRender=0!=i.immediateRender,new I(t,e,i)},I.fromTo=function(t,e,i,s){return s.startAt=i,s.immediateRender=0!=s.immediateRender&&0!=i.immediateRender,new I(t,e,s)},I.delayedCall=function(t,e,i,s,n){return new I(e,0,{delay:t,onComplete:e,onCompleteParams:i,onCompleteScope:s,onReverseComplete:e,onReverseCompleteParams:i,onReverseCompleteScope:s,immediateRender:!1,useFrames:n,overwrite:0})},I.set=function(t,e){return new I(t,0,e)},I.getTweensOf=function(t,e){if(null==t)return[];t="string"!=typeof t?t:I.selector(t)||t;var i,s,n,r;if((m(t)||E(t))&&"number"!=typeof t[0]){for(i=t.length,s=[];--i>-1;)s=s.concat(I.getTweensOf(t[i],e));for(i=s.length;--i>-1;)for(r=s[i],n=i;--n>-1;)r===s[n]&&s.splice(i,1)}else for(s=$(t).concat(),i=s.length;--i>-1;)(s[i]._gc||e&&!s[i].isActive())&&s.splice(i,1);return s},I.killTweensOf=I.killDelayedCallsTo=function(t,e,i){"object"==typeof e&&(i=e,e=!1);for(var s=I.getTweensOf(t,e),n=s.length;--n>-1;)s[n]._kill(i,t)};var J=v("plugins.TweenPlugin",function(t,e){this._overwriteProps=(t||"").split(","),this._propName=this._overwriteProps[0],this._priority=e||0,this._super=J.prototype},!0);if(r=J.prototype,J.version="1.10.1",J.API=2,r._firstPT=null,r._addTween=function(t,e,i,s,n,r){var a,o;return null!=s&&(a="number"==typeof s||"="!==s.charAt(1)?Number(s)-i:parseInt(s.charAt(0)+"1",10)*Number(s.substr(2)))?(this._firstPT=o={_next:this._firstPT,t:t,p:e,s:i,c:a,f:"function"==typeof t[e],n:n||e,r:r},o._next&&(o._next._prev=o),o):void 0},r.setRatio=function(t){for(var e,i=this._firstPT,s=1e-6;i;)e=i.c*t+i.s,i.r?e=Math.round(e):s>e&&e>-s&&(e=0),i.f?i.t[i.p](e):i.t[i.p]=e,i=i._next},r._kill=function(t){var e,i=this._overwriteProps,s=this._firstPT;if(null!=t[this._propName])this._overwriteProps=[];else for(e=i.length;--e>-1;)null!=t[i[e]]&&i.splice(e,1);for(;s;)null!=t[s.n]&&(s._next&&(s._next._prev=s._prev),s._prev?(s._prev._next=s._next,s._prev=null):this._firstPT===s&&(this._firstPT=s._next)),s=s._next;return!1},r._roundProps=function(t,e){for(var i=this._firstPT;i;)(t[this._propName]||null!=i.n&&t[i.n.split(this._propName+"_").join("")])&&(i.r=e),i=i._next},I._onPluginEvent=function(t,e){var i,s,n,r,a,o=e._firstPT;if("_onInitAllProps"===t){for(;o;){for(a=o._next,s=n;s&&s.pr>o.pr;)s=s._next;(o._prev=s?s._prev:r)?o._prev._next=o:n=o,(o._next=s)?s._prev=o:r=o,o=a}o=e._firstPT=n}for(;o;)o.pg&&"function"==typeof o.t[t]&&o.t[t]()&&(i=!0),o=o._next;return i},J.activate=function(t){for(var e=t.length;--e>-1;)t[e].API===J.API&&(U[(new t[e])._propName]=t[e]);return!0},d.plugin=function(t){if(!(t&&t.propName&&t.init&&t.API))throw"illegal plugin definition.";var e,i=t.propName,s=t.priority||0,n=t.overwriteProps,r={init:"_onInitTween",set:"setRatio",kill:"_kill",round:"_roundProps",initAll:"_onInitAllProps"},a=v("plugins."+i.charAt(0).toUpperCase()+i.substr(1)+"Plugin",function(){J.call(this,i,s),this._overwriteProps=n||[]},t.global===!0),o=a.prototype=new J(i);o.constructor=a,a.API=t.API;for(e in r)"function"==typeof t[e]&&(o[r[e]]=t[e]);return a.version=t.version,J.activate([a]),a},s=t._gsQueue){for(n=0;s.length>n;n++)s[n]();for(r in p)p[r].func||t.console.log("GSAP encountered missing dependency: com.greensock."+r)}o=!1}})("undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window,"TweenLite");


--------------------------------------------------------------------------------
/weather/index.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     margin: 0px;
  3 |     padding: 0px;
  4 | }
  5 | 
  6 | html,body{
  7 |     height: 100%;
  8 |     width: 100%;
  9 |     font-family: 'Roboto';
 10 |     color: #fff;
 11 |     height: 100%;
 12 |     width: 100%;
 13 |     position: relative;
 14 |     font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, WenQuanYi Micro Hei, Microsoft Yahei, sans-serif;
 15 |     font-size: 14px;
 16 |     line-height: 1.5;
 17 | }
 18 | 
 19 | #appBox {
 20 |     position: absolute;
 21 |     top: 0px;
 22 |     left: 0px;
 23 |     height: 100%;
 24 |     width: 100%;
 25 |     z-index: 2;
 26 |     text-align: center;
 27 | }
 28 | 
 29 | .status p {
 30 |     font-size: 1.8em;
 31 |     text-transform: capitalize;
 32 | }
 33 | 
 34 | header {
 35 |     margin-bottom: 30px;
 36 |     height: 60px;
 37 |     background: #000;
 38 |     line-height: 60px;
 39 |     font: 14px;
 40 |     color: #fff;
 41 | }
 42 | 
 43 | header p {
 44 |     float: right;
 45 |     padding-right: 40px;
 46 | }
 47 | 
 48 | header p i {
 49 |     margin-right: 20px;
 50 | }
 51 | 
 52 | .temp {
 53 |     cursor: pointer;
 54 |     color: #006dcc;
 55 | }
 56 | 
 57 | .temp:hover {
 58 |     color: #005096;
 59 | }
 60 | 
 61 | h1 {
 62 |     font-size: 5em;
 63 | }
 64 | 
 65 | .all-icon {
 66 |     margin-bottom: 20px;
 67 | }
 68 | 
 69 | div.hide {
 70 |     display: none;
 71 | }
 72 | 
 73 | .icon {
 74 |     color: #fff;
 75 |     position: relative;
 76 |     display: inline-block;
 77 |     width: 12rem;
 78 |     height: 10rem;
 79 | }
 80 | 
 81 | .cloud {
 82 |     position: absolute;
 83 |     z-index: 1;
 84 |     top: 50%;
 85 |     left: 50%;
 86 |     width: 3.6875rem;
 87 |     height: 3.6875rem;
 88 |     margin: -1.84375rem;
 89 |     background: currentColor;
 90 |     border-radius: 50%;
 91 |     box-shadow: -2.1875rem 0.6875rem 0 -0.6875rem, 2.0625rem 0.9375rem 0 -0.9375rem, 0 0 0 0.375rem #fff, -2.1875rem 0.6875rem 0 -0.3125rem #fff, 2.0625rem 0.9375rem 0 -0.5625rem #fff;
 92 | }
 93 | 
 94 | .cloud:after {
 95 |     content: '';
 96 |     position: absolute;
 97 |     bottom: 0;
 98 |     left: -0.5rem;
 99 |     display: block;
100 |     width: 4.5625rem;
101 |     height: 1rem;
102 |     background: currentColor;
103 |     box-shadow: 0 0.375rem #fff;
104 | }
105 | 
106 | .cloud:nth-child(2) {
107 |     z-index: 0;
108 |     background: #fff;
109 |     box-shadow: -2.1875rem 0.6875rem 0 -0.6875rem #fff, 2.0625rem 0.9375rem 0 -0.9375rem #fff, 0 0 0 0.375rem #fff, -2.1875rem 0.6875rem 0 -0.3125rem #fff, 2.0625rem 0.9375rem 0 -0.5625rem #fff;
110 |     opacity: 0.3;
111 |     -webkit-transform: scale(0.5) translate(6rem, -3rem);
112 |     -ms-transform: scale(0.5) translate(6rem, -3rem);
113 |     transform: scale(0.5) translate(6rem, -3rem);
114 |     -webkit-animation: cloud 4s linear infinite;
115 |     animation: cloud 4s linear infinite;
116 | }
117 | 
118 | .cloud:nth-child(2):after {
119 |     background: #fff;
120 | }
121 | 
122 | .sun {
123 |     position: absolute;
124 |     top: 50%;
125 |     left: 50%;
126 |     width: 2.5rem;
127 |     height: 2.5rem;
128 |     margin: -1.25rem;
129 |     background: currentColor;
130 |     border-radius: 50%;
131 |     box-shadow: 0 0 0 0.375rem #fff;
132 |     -webkit-animation: spin 12s infinite linear;
133 |     animation: spin 12s infinite linear;
134 | }
135 | 
136 | .rays {
137 |     position: absolute;
138 |     top: -2rem;
139 |     left: 50%;
140 |     display: block;
141 |     width: 0.375rem;
142 |     height: 1.125rem;
143 |     margin-left: -0.1875rem;
144 |     background: #fff;
145 |     border-radius: 0.25rem;
146 |     box-shadow: 0 5.375rem #fff;
147 | }
148 | 
149 | .rays:before,
150 | .rays:after {
151 |     content: '';
152 |     position: absolute;
153 |     top: 0rem;
154 |     left: 0rem;
155 |     display: block;
156 |     width: 0.375rem;
157 |     height: 1.125rem;
158 |     -webkit-transform: rotate(60deg);
159 |     -ms-transform: rotate(60deg);
160 |     transform: rotate(60deg);
161 |     -webkit-transform-origin: 50% 3.25rem;
162 |     -ms-transform-origin: 50% 3.25rem;
163 |     transform-origin: 50% 3.25rem;
164 |     background: #fff;
165 |     border-radius: 0.25rem;
166 |     box-shadow: 0 5.375rem #fff;
167 | }
168 | 
169 | .rays:before {
170 |     -webkit-transform: rotate(120deg);
171 |     -ms-transform: rotate(120deg);
172 |     transform: rotate(120deg);
173 | }
174 | 
175 | .cloud + .sun {
176 |     margin: -2rem 1rem;
177 | }
178 | 
179 | .rain,
180 | .lightning,
181 | .snow {
182 |     position: absolute;
183 |     z-index: 2;
184 |     top: 50%;
185 |     left: 50%;
186 |     width: 3.75rem;
187 |     height: 3.75rem;
188 |     margin: 0.375rem 0 0 -2rem;
189 |     background: currentColor;
190 | }
191 | 
192 | .rain:after {
193 |     content: '';
194 |     position: absolute;
195 |     z-index: 2;
196 |     top: 50%;
197 |     left: 50%;
198 |     width: 1.125rem;
199 |     height: 1.125rem;
200 |     margin: -1rem 0 0 -0.25rem;
201 |     background: #0cf;
202 |     border-radius: 100% 0 60% 50% / 60% 0 100% 50%;
203 |     box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);
204 |     -webkit-transform: rotate(-28deg);
205 |     -ms-transform: rotate(-28deg);
206 |     transform: rotate(-28deg);
207 |     -webkit-animation: rain 3s linear infinite;
208 |     animation: rain 3s linear infinite;
209 | }
210 | 
211 | .bolt {
212 |     position: absolute;
213 |     top: 50%;
214 |     left: 50%;
215 |     width: 1rem;
216 |     height: 0.5rem;
217 |     margin: -0.875rem 0 0 -0.5rem;
218 |     color: #fff;
219 |     background: #fff;
220 |     opacity: 0.3;
221 |     -webkit-animation: lightning 2s linear infinite;
222 |     animation: lightning 2s linear infinite;
223 | }
224 | 
225 | .bolt:nth-child(2) {
226 |     width: 0.5rem;
227 |     height: 0.25rem;
228 |     margin: -1.875rem 0 0 -1.5rem;
229 |     -webkit-transform: translate(2.5rem, 2.25rem);
230 |     -ms-transform: translate(2.5rem, 2.25rem);
231 |     transform: translate(2.5rem, 2.25rem);
232 |     opacity: 0.2;
233 |     -webkit-animation: lightning 1.5s linear infinite;
234 |     animation: lightning 1.5s linear infinite;
235 | }
236 | 
237 | .bolt:before,
238 | .bolt:after {
239 |     content: '';
240 |     position: absolute;
241 |     z-index: 2;
242 |     top: 50%;
243 |     left: 50%;
244 |     margin: -1.75rem 0 0 -1.25rem;
245 |     border-top: 1.25rem solid transparent;
246 |     border-right: 0.75rem solid;
247 |     border-bottom: 0.75rem solid;
248 |     border-left: 0.5rem solid transparent;
249 |     -webkit-transform: skewX(-10deg);
250 |     -ms-transform: skewX(-10deg);
251 |     transform: skewX(-10deg);
252 | }
253 | 
254 | .bolt:after {
255 |     margin: -0.25rem 0 0 -0.0125rem;
256 |     border-top: 0.75rem solid;
257 |     border-right: 0.5rem solid transparent;
258 |     border-bottom: 1.25rem solid transparent;
259 |     border-left: 0.75rem solid;
260 |     -webkit-transform: skewX(-10deg);
261 |     -ms-transform: skewX(-10deg);
262 |     transform: skewX(-10deg);
263 | }
264 | 
265 | .bolt:nth-child(2):before {
266 |     margin: -0.875rem 0 0 -0.75rem;
267 |     border-top: 0.625rem solid transparent;
268 |     border-right: 0.375rem solid;
269 |     border-bottom: 0.375rem solid;
270 |     border-left: 0.25rem solid transparent;
271 | }
272 | 
273 | .bolt:nth-child(2):after {
274 |     margin: -0.125rem 0 0 0;
275 |     border-top: 0.375rem solid;
276 |     border-right: 0.25rem solid transparent;
277 |     border-bottom: 0.625rem solid transparent;
278 |     border-left: 0.375rem solid;
279 | }
280 | 
281 | .flake:before,
282 | .flake:after {
283 |     position: absolute;
284 |     top: 50%;
285 |     left: 50%;
286 |     margin: -1.25rem 0 0 -1.25rem;
287 |     content: '\2744';
288 |     color: #fff;
289 |     list-height: 1em;
290 |     opacity: 0.2;
291 |     -webkit-animation: spin 8s linear infinite reverse;
292 |     animation: spin 8s linear infinite reverse;
293 | }
294 | 
295 | .flake:after {
296 |     margin: -0.125rem 0 0 -1.375rem;
297 |     font-size: 1.5rem;
298 |     opacity: 0.4;
299 |     -webkit-animation: spin 14s linear infinite;
300 |     animation: spin 14s linear infinite;
301 | }
302 | 
303 | .flake:nth-child(2):before {
304 |     margin: -0.875rem 0 0 0.25rem;
305 |     font-size: 1.25rem;
306 |     opacity: 0.2;
307 |     -webkit-animation: spin 10s linear infinite;
308 |     animation: spin 10s linear infinite;
309 | }
310 | 
311 | .flake:nth-child(2):after {
312 |     margin: 0.5rem 0 0 0.125rem;
313 |     font-size: 2rem;
314 |     opacity: 0.4;
315 |     -webkit-animation: spin 16s linear infinite reverse;
316 |     animation: spin 16s linear infinite reverse;
317 | }
318 | 
319 | 
320 | /* Animations */
321 | 
322 | @-webkit-keyframes spin {
323 |     100% {
324 |         -webkit-transform: rotate(360deg);
325 |         transform: rotate(360deg);
326 |     }
327 | }
328 | 
329 | @keyframes spin {
330 |     100% {
331 |         -webkit-transform: rotate(360deg);
332 |         transform: rotate(360deg);
333 |     }
334 | }
335 | 
336 | @-webkit-keyframes cloud {
337 |     0% {
338 |         opacity: 0;
339 |     }
340 |     50% {
341 |         opacity: 0.3;
342 |     }
343 |     100% {
344 |         opacity: 0;
345 |         -webkit-transform: scale(0.5) translate(-6rem, -3rem);
346 |         transform: scale(0.5) translate(-6rem, -3rem);
347 |     }
348 | }
349 | 
350 | @keyframes cloud {
351 |     0% {
352 |         opacity: 0;
353 |     }
354 |     50% {
355 |         opacity: 0.3;
356 |     }
357 |     100% {
358 |         opacity: 0;
359 |         -webkit-transform: scale(0.5) translate(-6rem, -3rem);
360 |         transform: scale(0.5) translate(-6rem, -3rem);
361 |     }
362 | }
363 | 
364 | @-webkit-keyframes rain {
365 |     0% {
366 |         background: #0cf;
367 |         box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf;
368 |     }
369 |     25% {
370 |         box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem #0cf, -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);
371 |     }
372 |     50% {
373 |         background: rgba(255, 255, 255, 0.3);
374 |         box-shadow: 0.625rem 0.875rem 0 -0.125rem #0cf, -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);
375 |     }
376 |     100% {
377 |         box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf;
378 |     }
379 | }
380 | 
381 | @keyframes rain {
382 |     0% {
383 |         background: #0cf;
384 |         box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf;
385 |     }
386 |     25% {
387 |         box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem #0cf, -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);
388 |     }
389 |     50% {
390 |         background: rgba(255, 255, 255, 0.3);
391 |         box-shadow: 0.625rem 0.875rem 0 -0.125rem #0cf, -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 rgba(255, 255, 255, 0.2);
392 |     }
393 |     100% {
394 |         box-shadow: 0.625rem 0.875rem 0 -0.125rem rgba(255, 255, 255, 0.2), -0.875rem 1.125rem 0 -0.125rem rgba(255, 255, 255, 0.2), -1.375rem -0.125rem 0 #0cf;
395 |     }
396 | }
397 | 
398 | @-webkit-keyframes lightning {
399 |     45% {
400 |         color: #fff;
401 |         background: #fff;
402 |         opacity: 0.2;
403 |     }
404 |     50% {
405 |         color: #0cf;
406 |         background: #0cf;
407 |         opacity: 1;
408 |     }
409 |     55% {
410 |         color: #fff;
411 |         background: #fff;
412 |         opacity: 0.2;
413 |     }
414 | }
415 | 
416 | @keyframes lightning {
417 |     45% {
418 |         color: #fff;
419 |         background: #fff;
420 |         opacity: 0.2;
421 |     }
422 |     50% {
423 |         color: #0cf;
424 |         background: #0cf;
425 |         opacity: 1;
426 |     }
427 |     55% {
428 |         color: #fff;
429 |         background: #fff;
430 |         opacity: 0.2;
431 |     }
432 | }
433 | 
434 | 
435 | /* Header */
436 | 
437 | .large-header {
438 |     position: relative;
439 |     width: 100%;
440 |     overflow: hidden;
441 |     background-position: center center;
442 |     z-index: 1;
443 |     height: 100%;
444 |     background: url("https://h5tq.moji.com/tianqi/assets/images/skin/day_1.jpg") center top no-repeat;
445 |     background-size: 100% 100%;
446 | }
447 | 
448 | .copyright {
449 |     width: 360px;
450 |     display: inline-block;
451 |     background: rgba(0, 0, 0, .3);
452 |     border-radius: 5px;
453 |     padding: 15px;
454 | }
455 | .copyright p
456 | {
457 |     margin: 0 0 10px;
458 |     color: rgba(255,255,255,0.6);
459 | }
460 | 


--------------------------------------------------------------------------------
/weather/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <title>Vue,Vue-resource Weather App</title>
  7 |     <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,700,400' rel='stylesheet' type='text/css'>
  8 |     <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.min.css'>
  9 |     <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
 10 |     <link rel='stylesheet' href='./index.css'>
 11 | </head>
 12 | <body>
 13 |     <div id="large-header" class="large-header">
 14 |         <canvas id="demo-canvas"></canvas>
 15 |     </div>
 16 |     <div id="appBox">
 17 |         <div id="app">
 18 |             <header class="text-center">
 19 |                 <p><i class="wi wi-hail"></i>利用VUE、VUE-RESOURCE做的天气预报</p>
 20 |             </header>
 21 |             <div class="main-content">
 22 |                 <weather-show :weather="weatherData"></weather-show>
 23 |             </div>
 24 |             <div class="text-center all-icon">
 25 |                 <div class="icon sun-shower " v-if="status=='dizzle'">
 26 |                     <div class="cloud"></div>
 27 |                     <div class="sun">
 28 |                         <div class="rays"></div>
 29 |                     </div>
 30 |                     <div class="rain"></div>
 31 |                 </div>
 32 |                 <div class="icon thunder-storm thunderstom" v-if="status=='thunderstom'">
 33 |                     <div class="cloud"></div>
 34 |                     <div class="lightning">
 35 |                         <div class="bolt"></div>
 36 |                         <div class="bolt"></div>
 37 |                     </div>
 38 |                 </div>
 39 |                 <div class="icon cloudy clouds" v-if="status=='clouds'">
 40 |                     <div class="cloud"></div>
 41 |                     <div class="cloud"></div>
 42 |                 </div>
 43 |                 <div class="icon flurries snow" v-if="status=='snow'">
 44 |                     <div class="cloud"></div>
 45 |                     <div class="snow">
 46 |                         <div class="flake"></div>
 47 |                         <div class="flake"></div>
 48 |                     </div>
 49 |                 </div>
 50 |                 <div class="icon sunny clear" v-if="status=='clear'">
 51 |                     <div class="sun">
 52 |                         <div class="rays"></div>
 53 |                     </div>
 54 |                 </div>
 55 |                 <div class="icon rainy rain" v-if="status=='rain'">
 56 |                     <div class="cloud"></div>
 57 |                     <div class="rain"></div>
 58 |                 </div>
 59 |             </div>
 60 |             <div class="text-center copyright">
 61 |                 <p>打春雨惊田，春分清谷连。</p>
 62 |                 <p>立夏满芒种，夏至二暑还。</p>
 63 |                 <p>立秋暑白露，秋分寒露降。</p>
 64 |                 <p>立冬两场雪，冬至寒又寒。</p>
 65 |                 <a href="https://github.com/holidaying" target="_blank">作者|西安小哥</a></div>
 66 |         </div>
 67 | </body>
 68 | <script src="https://cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
 69 | <!-- <script src="vue-resource.js" type="text/javascript" charset="utf-8"></script> -->
 70 | <script src="https://cdn.bootcss.com/vue-resource/1.2.1/vue-resource.js"></script>
 71 | <script src='./EasePack.min.js'></script>
 72 | <script src='./rAF.js'></script>
 73 | <script src='./TweenLite.min.js'></script>
 74 | <script src='./index.js'></script>
 75 | <script>
 76 | 
 77 | Vue.component('weather-show', {
 78 |     template: '<div class="text-center status"><p>{{weather.city}}, {{weather.country}}</p><p>{{weather.temp}} &#176;<span class="temp" @click="sysWeather">{{weather.unit}}</span></p><p>{{weather.des}}</p></div>',
 79 |     props: ['weather'],
 80 |     methods: {
 81 |         sysWeather: function() {
 82 |             var self = this;
 83 |             if (self.weather.sysChange) {
 84 |                 self.weather.unit = 'C';
 85 |                 self.weather.temp = self.weather.Cel;
 86 |                 self.weather.sysChange = false;
 87 |             } else {
 88 |                 self.weather.unit = 'F';
 89 |                 self.weather.temp = self.weather.Fah;
 90 |                 self.weather.sysChange = true;
 91 |             }
 92 | 
 93 |         }
 94 |     }
 95 | })
 96 | var example1 = new Vue({
 97 |     el: '#app',
 98 |     data() {
 99 |         return {
100 |             weatherData: {
101 |                 city: "",
102 |                 country: "",
103 |                 des: "",
104 |                 unit: "C",
105 |                 temp: "",
106 |                 Fah: "",
107 |                 Cel: "",
108 |             },
109 |             status: "clouds",
110 |         }
111 |     },
112 |     methods: {
113 |         submit: function(argument) {
114 | 
115 |         },
116 |         getWeather: function() {
117 |             var self = this;
118 |             var object = {
119 | 
120 |                 getLoc: function() {
121 |                     var that = this;
122 |                     Vue.http.jsonp('https://ipinfo.io/json').then(function(data) {
123 |                         self.weatherData.city = data.data.city;
124 |                         self.weatherData.country = data.data.country;
125 |                         that.getCurrent(data.data);
126 |                     });
127 |                 },
128 |                 getCurrent: function(data) {
129 |                     var that = this;
130 |                     var api = "https://api.openweathermap.org/data/2.5/weather?q=";
131 |                     var units = "&units=metric";
132 |                     var appid = "&APPID=061f24cf3cde2f60644a8240302983f2"
133 |                     var cb = "&callback=JSON_CALLBACK";
134 |                     var city = data.city + ',' + data.country;
135 | 
136 |                     Vue.http.jsonp(api + city + units + appid).then(function(data) {
137 |                         that.weatherShow(data);
138 |                     });
139 |                 },
140 |                 weatherShow: function(data) {
141 |                     self.weatherData.des = data.data.weather[0].main;
142 |                     self.weatherData.temp = Math.round(data.data.main.temp);
143 |                     self.weatherData.Cel = Math.round(data.data.main.temp);
144 |                     self.weatherData.Fah = Math.round((self.weatherData.temp * 9) / 5 + 32);
145 |                     self.iconGen(self.weatherData.des);
146 |                 },
147 |             };
148 |             object.getLoc();
149 |         },
150 |         iconGen: function(city) {
151 |             var self = this;
152 |             var city = city.toLowerCase();
153 |             self.status = city;
154 |         },
155 |     },
156 |     ready: function() {
157 |         var getWeather = this.getWeather();
158 |     }
159 | })
160 | </script>
161 | 
162 | </html>
163 | 


--------------------------------------------------------------------------------
/weather/index.js:
--------------------------------------------------------------------------------
  1 | (function() {
  2 | 
  3 |     var width, height, largeHeader, canvas, ctx, points, target, animateHeader = true;
  4 | 
  5 |     // Main
  6 |     initHeader();
  7 |     initAnimation();
  8 |     addListeners();
  9 | 
 10 |     function initHeader() {
 11 |         width = window.innerWidth;
 12 |         height = window.innerHeight;
 13 |         target = {
 14 |             x: width / 2,
 15 |             y: height / 2
 16 |         };
 17 | 
 18 |         largeHeader = document.getElementById('large-header');
 19 |         largeHeader.style.height = height + 'px';
 20 | 
 21 |         canvas = document.getElementById('demo-canvas');
 22 |         canvas.width = width;
 23 |         canvas.height = height;
 24 |         ctx = canvas.getContext('2d');
 25 | 
 26 |         // create points
 27 |         points = [];
 28 |         for (var x = 0; x < width; x = x + width / 20) {
 29 |             for (var y = 0; y < height; y = y + height / 20) {
 30 |                 var px = x + Math.random() * width / 20;
 31 |                 var py = y + Math.random() * height / 20;
 32 |                 var p = {
 33 |                     x: px,
 34 |                     originX: px,
 35 |                     y: py,
 36 |                     originY: py
 37 |                 };
 38 |                 points.push(p);
 39 |             }
 40 |         }
 41 | 
 42 |         // for each point find the 5 closest points
 43 |         for (var i = 0; i < points.length; i++) {
 44 |             var closest = [];
 45 |             var p1 = points[i];
 46 |             for (var j = 0; j < points.length; j++) {
 47 |                 var p2 = points[j]
 48 |                 if (!(p1 == p2)) {
 49 |                     var placed = false;
 50 |                     for (var k = 0; k < 5; k++) {
 51 |                         if (!placed) {
 52 |                             if (closest[k] == undefined) {
 53 |                                 closest[k] = p2;
 54 |                                 placed = true;
 55 |                             }
 56 |                         }
 57 |                     }
 58 | 
 59 |                     for (var k = 0; k < 5; k++) {
 60 |                         if (!placed) {
 61 |                             if (getDistance(p1, p2) < getDistance(p1, closest[k])) {
 62 |                                 closest[k] = p2;
 63 |                                 placed = true;
 64 |                             }
 65 |                         }
 66 |                     }
 67 |                 }
 68 |             }
 69 |             p1.closest = closest;
 70 |         }
 71 | 
 72 |         // assign a circle to each point
 73 |         for (var i in points) {
 74 |             var c = new Circle(points[i], 2 + Math.random() * 2, 'rgba(255,255,255,0.3)');
 75 |             points[i].circle = c;
 76 |         }
 77 |     }
 78 | 
 79 |     // Event handling
 80 |     function addListeners() {
 81 |         if (!('ontouchstart' in window)) {
 82 |             window.addEventListener('mousemove', mouseMove);
 83 |         }
 84 |         window.addEventListener('scroll', scrollCheck);
 85 |         window.addEventListener('resize', resize);
 86 |     }
 87 | 
 88 |     function mouseMove(e) {
 89 |         var posx = posy = 0;
 90 |         if (e.pageX || e.pageY) {
 91 |             posx = e.pageX;
 92 |             posy = e.pageY;
 93 |         } else if (e.clientX || e.clientY) {
 94 |             posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
 95 |             posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
 96 |         }
 97 |         target.x = posx;
 98 |         target.y = posy;
 99 |     }
100 | 
101 |     function scrollCheck() {
102 |         if (document.body.scrollTop > height) animateHeader = false;
103 |         else animateHeader = true;
104 |     }
105 | 
106 |     function resize() {
107 |         width = window.innerWidth;
108 |         height = window.innerHeight;
109 |         largeHeader.style.height = height + 'px';
110 |         canvas.width = width;
111 |         canvas.height = height;
112 |     }
113 | 
114 |     // animation
115 |     function initAnimation() {
116 |         animate();
117 |         for (var i in points) {
118 |             shiftPoint(points[i]);
119 |         }
120 |     }
121 | 
122 |     function animate() {
123 |         if (animateHeader) {
124 |             ctx.clearRect(0, 0, width, height);
125 |             for (var i in points) {
126 |                 // detect points in range
127 |                 if (Math.abs(getDistance(target, points[i])) < 4000) {
128 |                     points[i].active = 0.3;
129 |                     points[i].circle.active = 0.6;
130 |                 } else if (Math.abs(getDistance(target, points[i])) < 20000) {
131 |                     points[i].active = 0.1;
132 |                     points[i].circle.active = 0.3;
133 |                 } else if (Math.abs(getDistance(target, points[i])) < 40000) {
134 |                     points[i].active = 0.02;
135 |                     points[i].circle.active = 0.1;
136 |                 } else {
137 |                     points[i].active = 0;
138 |                     points[i].circle.active = 0;
139 |                 }
140 | 
141 |                 drawLines(points[i]);
142 |                 points[i].circle.draw();
143 |             }
144 |         }
145 |         requestAnimationFrame(animate);
146 |     }
147 | 
148 |     function shiftPoint(p) {
149 |         TweenLite.to(p, 1 + 1 * Math.random(), {
150 |             x: p.originX - 50 + Math.random() * 100,
151 |             y: p.originY - 50 + Math.random() * 100,
152 |             ease: Circ.easeInOut,
153 |             onComplete: function() {
154 |                 shiftPoint(p);
155 |             }
156 |         });
157 |     }
158 | 
159 |     // Canvas manipulation
160 |     function drawLines(p) {
161 |         if (!p.active) return;
162 |         for (var i in p.closest) {
163 |             ctx.beginPath();
164 |             ctx.moveTo(p.x, p.y);
165 |             ctx.lineTo(p.closest[i].x, p.closest[i].y);
166 |             ctx.strokeStyle = 'rgba(156,217,249,' + p.active + ')';
167 |             ctx.stroke();
168 |         }
169 |     }
170 | 
171 |     function Circle(pos, rad, color) {
172 |         var _this = this;
173 | 
174 |         // constructor
175 |         (function() {
176 |             _this.pos = pos || null;
177 |             _this.radius = rad || null;
178 |             _this.color = color || null;
179 |         })();
180 | 
181 |         this.draw = function() {
182 |             if (!_this.active) return;
183 |             ctx.beginPath();
184 |             ctx.arc(_this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false);
185 |             ctx.fillStyle = 'rgba(156,217,249,' + _this.active + ')';
186 |             ctx.fill();
187 |         };
188 |     }
189 | 
190 |     // Util
191 |     function getDistance(p1, p2) {
192 |         return Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2);
193 |     }
194 | 
195 | })();


--------------------------------------------------------------------------------
/weather/rAF.js:
--------------------------------------------------------------------------------
 1 | // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 2 | // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
 3 | 
 4 | // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
 5 | 
 6 | // MIT license
 7 | 
 8 | (function() {
 9 |     var lastTime = 0;
10 |     var vendors = ['ms', 'moz', 'webkit', 'o'];
11 |     for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
12 |         window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
13 |         window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
14 |             || window[vendors[x]+'CancelRequestAnimationFrame'];
15 |     }
16 | 
17 |     if (!window.requestAnimationFrame)
18 |         window.requestAnimationFrame = function(callback, element) {
19 |             var currTime = new Date().getTime();
20 |             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
21 |             var id = window.setTimeout(function() { callback(currTime + timeToCall); },
22 |                 timeToCall);
23 |             lastTime = currTime + timeToCall;
24 |             return id;
25 |         };
26 | 
27 |     if (!window.cancelAnimationFrame)
28 |         window.cancelAnimationFrame = function(id) {
29 |             clearTimeout(id);
30 |         };
31 | }());


--------------------------------------------------------------------------------
/weather/vue-resource.js:
--------------------------------------------------------------------------------
   1 | /*!
   2 |  * vue-resource v0.9.3
   3 |  * https://github.com/vuejs/vue-resource
   4 |  * Released under the MIT License.
   5 |  */
   6 | 
   7 | (function (global, factory) {
   8 |   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   9 |   typeof define === 'function' && define.amd ? define(factory) :
  10 |   (global.VueResource = factory());
  11 | }(this, function () { 'use strict';
  12 | 
  13 |   /**
  14 |    * Promises/A+ polyfill v1.1.4 (https://github.com/bramstein/promis)
  15 |    */
  16 | 
  17 |   var RESOLVED = 0;
  18 |   var REJECTED = 1;
  19 |   var PENDING = 2;
  20 | 
  21 |   function Promise$2(executor) {
  22 | 
  23 |       this.state = PENDING;
  24 |       this.value = undefined;
  25 |       this.deferred = [];
  26 | 
  27 |       var promise = this;
  28 | 
  29 |       try {
  30 |           executor(function (x) {
  31 |               promise.resolve(x);
  32 |           }, function (r) {
  33 |               promise.reject(r);
  34 |           });
  35 |       } catch (e) {
  36 |           promise.reject(e);
  37 |       }
  38 |   }
  39 | 
  40 |   Promise$2.reject = function (r) {
  41 |       return new Promise$2(function (resolve, reject) {
  42 |           reject(r);
  43 |       });
  44 |   };
  45 | 
  46 |   Promise$2.resolve = function (x) {
  47 |       return new Promise$2(function (resolve, reject) {
  48 |           resolve(x);
  49 |       });
  50 |   };
  51 | 
  52 |   Promise$2.all = function all(iterable) {
  53 |       return new Promise$2(function (resolve, reject) {
  54 |           var count = 0,
  55 |               result = [];
  56 | 
  57 |           if (iterable.length === 0) {
  58 |               resolve(result);
  59 |           }
  60 | 
  61 |           function resolver(i) {
  62 |               return function (x) {
  63 |                   result[i] = x;
  64 |                   count += 1;
  65 | 
  66 |                   if (count === iterable.length) {
  67 |                       resolve(result);
  68 |                   }
  69 |               };
  70 |           }
  71 | 
  72 |           for (var i = 0; i < iterable.length; i += 1) {
  73 |               Promise$2.resolve(iterable[i]).then(resolver(i), reject);
  74 |           }
  75 |       });
  76 |   };
  77 | 
  78 |   Promise$2.race = function race(iterable) {
  79 |       return new Promise$2(function (resolve, reject) {
  80 |           for (var i = 0; i < iterable.length; i += 1) {
  81 |               Promise$2.resolve(iterable[i]).then(resolve, reject);
  82 |           }
  83 |       });
  84 |   };
  85 | 
  86 |   var p$1 = Promise$2.prototype;
  87 | 
  88 |   p$1.resolve = function resolve(x) {
  89 |       var promise = this;
  90 | 
  91 |       if (promise.state === PENDING) {
  92 |           if (x === promise) {
  93 |               throw new TypeError('Promise settled with itself.');
  94 |           }
  95 | 
  96 |           var called = false;
  97 | 
  98 |           try {
  99 |               var then = x && x['then'];
 100 | 
 101 |               if (x !== null && typeof x === 'object' && typeof then === 'function') {
 102 |                   then.call(x, function (x) {
 103 |                       if (!called) {
 104 |                           promise.resolve(x);
 105 |                       }
 106 |                       called = true;
 107 |                   }, function (r) {
 108 |                       if (!called) {
 109 |                           promise.reject(r);
 110 |                       }
 111 |                       called = true;
 112 |                   });
 113 |                   return;
 114 |               }
 115 |           } catch (e) {
 116 |               if (!called) {
 117 |                   promise.reject(e);
 118 |               }
 119 |               return;
 120 |           }
 121 | 
 122 |           promise.state = RESOLVED;
 123 |           promise.value = x;
 124 |           promise.notify();
 125 |       }
 126 |   };
 127 | 
 128 |   p$1.reject = function reject(reason) {
 129 |       var promise = this;
 130 | 
 131 |       if (promise.state === PENDING) {
 132 |           if (reason === promise) {
 133 |               throw new TypeError('Promise settled with itself.');
 134 |           }
 135 | 
 136 |           promise.state = REJECTED;
 137 |           promise.value = reason;
 138 |           promise.notify();
 139 |       }
 140 |   };
 141 | 
 142 |   p$1.notify = function notify() {
 143 |       var promise = this;
 144 | 
 145 |       nextTick(function () {
 146 |           if (promise.state !== PENDING) {
 147 |               while (promise.deferred.length) {
 148 |                   var deferred = promise.deferred.shift(),
 149 |                       onResolved = deferred[0],
 150 |                       onRejected = deferred[1],
 151 |                       resolve = deferred[2],
 152 |                       reject = deferred[3];
 153 | 
 154 |                   try {
 155 |                       if (promise.state === RESOLVED) {
 156 |                           if (typeof onResolved === 'function') {
 157 |                               resolve(onResolved.call(undefined, promise.value));
 158 |                           } else {
 159 |                               resolve(promise.value);
 160 |                           }
 161 |                       } else if (promise.state === REJECTED) {
 162 |                           if (typeof onRejected === 'function') {
 163 |                               resolve(onRejected.call(undefined, promise.value));
 164 |                           } else {
 165 |                               reject(promise.value);
 166 |                           }
 167 |                       }
 168 |                   } catch (e) {
 169 |                       reject(e);
 170 |                   }
 171 |               }
 172 |           }
 173 |       });
 174 |   };
 175 | 
 176 |   p$1.then = function then(onResolved, onRejected) {
 177 |       var promise = this;
 178 | 
 179 |       return new Promise$2(function (resolve, reject) {
 180 |           promise.deferred.push([onResolved, onRejected, resolve, reject]);
 181 |           promise.notify();
 182 |       });
 183 |   };
 184 | 
 185 |   p$1.catch = function (onRejected) {
 186 |       return this.then(undefined, onRejected);
 187 |   };
 188 | 
 189 |   var PromiseObj = window.Promise || Promise$2;
 190 | 
 191 |   function Promise$1(executor, context) {
 192 | 
 193 |       if (executor instanceof PromiseObj) {
 194 |           this.promise = executor;
 195 |       } else {
 196 |           this.promise = new PromiseObj(executor.bind(context));
 197 |       }
 198 | 
 199 |       this.context = context;
 200 |   }
 201 | 
 202 |   Promise$1.all = function (iterable, context) {
 203 |       return new Promise$1(PromiseObj.all(iterable), context);
 204 |   };
 205 | 
 206 |   Promise$1.resolve = function (value, context) {
 207 |       return new Promise$1(PromiseObj.resolve(value), context);
 208 |   };
 209 | 
 210 |   Promise$1.reject = function (reason, context) {
 211 |       return new Promise$1(PromiseObj.reject(reason), context);
 212 |   };
 213 | 
 214 |   Promise$1.race = function (iterable, context) {
 215 |       return new Promise$1(PromiseObj.race(iterable), context);
 216 |   };
 217 | 
 218 |   var p = Promise$1.prototype;
 219 | 
 220 |   p.bind = function (context) {
 221 |       this.context = context;
 222 |       return this;
 223 |   };
 224 | 
 225 |   p.then = function (fulfilled, rejected) {
 226 | 
 227 |       if (fulfilled && fulfilled.bind && this.context) {
 228 |           fulfilled = fulfilled.bind(this.context);
 229 |       }
 230 | 
 231 |       if (rejected && rejected.bind && this.context) {
 232 |           rejected = rejected.bind(this.context);
 233 |       }
 234 | 
 235 |       return new Promise$1(this.promise.then(fulfilled, rejected), this.context);
 236 |   };
 237 | 
 238 |   p.catch = function (rejected) {
 239 | 
 240 |       if (rejected && rejected.bind && this.context) {
 241 |           rejected = rejected.bind(this.context);
 242 |       }
 243 | 
 244 |       return new Promise$1(this.promise.catch(rejected), this.context);
 245 |   };
 246 | 
 247 |   p.finally = function (callback) {
 248 | 
 249 |       return this.then(function (value) {
 250 |           callback.call(this);
 251 |           return value;
 252 |       }, function (reason) {
 253 |           callback.call(this);
 254 |           return PromiseObj.reject(reason);
 255 |       });
 256 |   };
 257 | 
 258 |   var debug = false;
 259 |   var util = {};
 260 |   var array = [];
 261 |   function Util (Vue) {
 262 |       util = Vue.util;
 263 |       debug = Vue.config.debug || !Vue.config.silent;
 264 |   }
 265 | 
 266 |   function warn(msg) {
 267 |       if (typeof console !== 'undefined' && debug) {
 268 |           console.warn('[VueResource warn]: ' + msg);
 269 |       }
 270 |   }
 271 | 
 272 |   function error(msg) {
 273 |       if (typeof console !== 'undefined') {
 274 |           console.error(msg);
 275 |       }
 276 |   }
 277 | 
 278 |   function nextTick(cb, ctx) {
 279 |       return util.nextTick(cb, ctx);
 280 |   }
 281 | 
 282 |   function trim(str) {
 283 |       return str.replace(/^\s*|\s*$/g, '');
 284 |   }
 285 | 
 286 |   var isArray = Array.isArray;
 287 | 
 288 |   function isString(val) {
 289 |       return typeof val === 'string';
 290 |   }
 291 | 
 292 |   function isBoolean(val) {
 293 |       return val === true || val === false;
 294 |   }
 295 | 
 296 |   function isFunction(val) {
 297 |       return typeof val === 'function';
 298 |   }
 299 | 
 300 |   function isObject(obj) {
 301 |       return obj !== null && typeof obj === 'object';
 302 |   }
 303 | 
 304 |   function isPlainObject(obj) {
 305 |       return isObject(obj) && Object.getPrototypeOf(obj) == Object.prototype;
 306 |   }
 307 | 
 308 |   function isFormData(obj) {
 309 |       return typeof FormData !== 'undefined' && obj instanceof FormData;
 310 |   }
 311 | 
 312 |   function when(value, fulfilled, rejected) {
 313 | 
 314 |       var promise = Promise$1.resolve(value);
 315 | 
 316 |       if (arguments.length < 2) {
 317 |           return promise;
 318 |       }
 319 | 
 320 |       return promise.then(fulfilled, rejected);
 321 |   }
 322 | 
 323 |   function options(fn, obj, opts) {
 324 | 
 325 |       opts = opts || {};
 326 | 
 327 |       if (isFunction(opts)) {
 328 |           opts = opts.call(obj);
 329 |       }
 330 | 
 331 |       return merge(fn.bind({ $vm: obj, $options: opts }), fn, { $options: opts });
 332 |   }
 333 | 
 334 |   function each(obj, iterator) {
 335 | 
 336 |       var i, key;
 337 | 
 338 |       if (typeof obj.length == 'number') {
 339 |           for (i = 0; i < obj.length; i++) {
 340 |               iterator.call(obj[i], obj[i], i);
 341 |           }
 342 |       } else if (isObject(obj)) {
 343 |           for (key in obj) {
 344 |               if (obj.hasOwnProperty(key)) {
 345 |                   iterator.call(obj[key], obj[key], key);
 346 |               }
 347 |           }
 348 |       }
 349 | 
 350 |       return obj;
 351 |   }
 352 | 
 353 |   var assign = Object.assign || _assign;
 354 | 
 355 |   function merge(target) {
 356 | 
 357 |       var args = array.slice.call(arguments, 1);
 358 | 
 359 |       args.forEach(function (source) {
 360 |           _merge(target, source, true);
 361 |       });
 362 | 
 363 |       return target;
 364 |   }
 365 | 
 366 |   function defaults(target) {
 367 | 
 368 |       var args = array.slice.call(arguments, 1);
 369 | 
 370 |       args.forEach(function (source) {
 371 | 
 372 |           for (var key in source) {
 373 |               if (target[key] === undefined) {
 374 |                   target[key] = source[key];
 375 |               }
 376 |           }
 377 |       });
 378 | 
 379 |       return target;
 380 |   }
 381 | 
 382 |   function _assign(target) {
 383 | 
 384 |       var args = array.slice.call(arguments, 1);
 385 | 
 386 |       args.forEach(function (source) {
 387 |           _merge(target, source);
 388 |       });
 389 | 
 390 |       return target;
 391 |   }
 392 | 
 393 |   function _merge(target, source, deep) {
 394 |       for (var key in source) {
 395 |           if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
 396 |               if (isPlainObject(source[key]) && !isPlainObject(target[key])) {
 397 |                   target[key] = {};
 398 |               }
 399 |               if (isArray(source[key]) && !isArray(target[key])) {
 400 |                   target[key] = [];
 401 |               }
 402 |               _merge(target[key], source[key], deep);
 403 |           } else if (source[key] !== undefined) {
 404 |               target[key] = source[key];
 405 |           }
 406 |       }
 407 |   }
 408 | 
 409 |   function root (options, next) {
 410 | 
 411 |       var url = next(options);
 412 | 
 413 |       if (isString(options.root) && !url.match(/^(https?:)?\//)) {
 414 |           url = options.root + '/' + url;
 415 |       }
 416 | 
 417 |       return url;
 418 |   }
 419 | 
 420 |   function query (options, next) {
 421 | 
 422 |       var urlParams = Object.keys(Url.options.params),
 423 |           query = {},
 424 |           url = next(options);
 425 | 
 426 |       each(options.params, function (value, key) {
 427 |           if (urlParams.indexOf(key) === -1) {
 428 |               query[key] = value;
 429 |           }
 430 |       });
 431 | 
 432 |       query = Url.params(query);
 433 | 
 434 |       if (query) {
 435 |           url += (url.indexOf('?') == -1 ? '?' : '&') + query;
 436 |       }
 437 | 
 438 |       return url;
 439 |   }
 440 | 
 441 |   /**
 442 |    * URL Template v2.0.6 (https://github.com/bramstein/url-template)
 443 |    */
 444 | 
 445 |   function expand(url, params, variables) {
 446 | 
 447 |       var tmpl = parse(url),
 448 |           expanded = tmpl.expand(params);
 449 | 
 450 |       if (variables) {
 451 |           variables.push.apply(variables, tmpl.vars);
 452 |       }
 453 | 
 454 |       return expanded;
 455 |   }
 456 | 
 457 |   function parse(template) {
 458 | 
 459 |       var operators = ['+', '#', '.', '/', ';', '?', '&'],
 460 |           variables = [];
 461 | 
 462 |       return {
 463 |           vars: variables,
 464 |           expand: function (context) {
 465 |               return template.replace(/\{([^\{\}]+)\}|([^\{\}]+)/g, function (_, expression, literal) {
 466 |                   if (expression) {
 467 | 
 468 |                       var operator = null,
 469 |                           values = [];
 470 | 
 471 |                       if (operators.indexOf(expression.charAt(0)) !== -1) {
 472 |                           operator = expression.charAt(0);
 473 |                           expression = expression.substr(1);
 474 |                       }
 475 | 
 476 |                       expression.split(/,/g).forEach(function (variable) {
 477 |                           var tmp = /([^:\*]*)(?::(\d+)|(\*))?/.exec(variable);
 478 |                           values.push.apply(values, getValues(context, operator, tmp[1], tmp[2] || tmp[3]));
 479 |                           variables.push(tmp[1]);
 480 |                       });
 481 | 
 482 |                       if (operator && operator !== '+') {
 483 | 
 484 |                           var separator = ',';
 485 | 
 486 |                           if (operator === '?') {
 487 |                               separator = '&';
 488 |                           } else if (operator !== '#') {
 489 |                               separator = operator;
 490 |                           }
 491 | 
 492 |                           return (values.length !== 0 ? operator : '') + values.join(separator);
 493 |                       } else {
 494 |                           return values.join(',');
 495 |                       }
 496 |                   } else {
 497 |                       return encodeReserved(literal);
 498 |                   }
 499 |               });
 500 |           }
 501 |       };
 502 |   }
 503 | 
 504 |   function getValues(context, operator, key, modifier) {
 505 | 
 506 |       var value = context[key],
 507 |           result = [];
 508 | 
 509 |       if (isDefined(value) && value !== '') {
 510 |           if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
 511 |               value = value.toString();
 512 | 
 513 |               if (modifier && modifier !== '*') {
 514 |                   value = value.substring(0, parseInt(modifier, 10));
 515 |               }
 516 | 
 517 |               result.push(encodeValue(operator, value, isKeyOperator(operator) ? key : null));
 518 |           } else {
 519 |               if (modifier === '*') {
 520 |                   if (Array.isArray(value)) {
 521 |                       value.filter(isDefined).forEach(function (value) {
 522 |                           result.push(encodeValue(operator, value, isKeyOperator(operator) ? key : null));
 523 |                       });
 524 |                   } else {
 525 |                       Object.keys(value).forEach(function (k) {
 526 |                           if (isDefined(value[k])) {
 527 |                               result.push(encodeValue(operator, value[k], k));
 528 |                           }
 529 |                       });
 530 |                   }
 531 |               } else {
 532 |                   var tmp = [];
 533 | 
 534 |                   if (Array.isArray(value)) {
 535 |                       value.filter(isDefined).forEach(function (value) {
 536 |                           tmp.push(encodeValue(operator, value));
 537 |                       });
 538 |                   } else {
 539 |                       Object.keys(value).forEach(function (k) {
 540 |                           if (isDefined(value[k])) {
 541 |                               tmp.push(encodeURIComponent(k));
 542 |                               tmp.push(encodeValue(operator, value[k].toString()));
 543 |                           }
 544 |                       });
 545 |                   }
 546 | 
 547 |                   if (isKeyOperator(operator)) {
 548 |                       result.push(encodeURIComponent(key) + '=' + tmp.join(','));
 549 |                   } else if (tmp.length !== 0) {
 550 |                       result.push(tmp.join(','));
 551 |                   }
 552 |               }
 553 |           }
 554 |       } else {
 555 |           if (operator === ';') {
 556 |               result.push(encodeURIComponent(key));
 557 |           } else if (value === '' && (operator === '&' || operator === '?')) {
 558 |               result.push(encodeURIComponent(key) + '=');
 559 |           } else if (value === '') {
 560 |               result.push('');
 561 |           }
 562 |       }
 563 | 
 564 |       return result;
 565 |   }
 566 | 
 567 |   function isDefined(value) {
 568 |       return value !== undefined && value !== null;
 569 |   }
 570 | 
 571 |   function isKeyOperator(operator) {
 572 |       return operator === ';' || operator === '&' || operator === '?';
 573 |   }
 574 | 
 575 |   function encodeValue(operator, value, key) {
 576 | 
 577 |       value = operator === '+' || operator === '#' ? encodeReserved(value) : encodeURIComponent(value);
 578 | 
 579 |       if (key) {
 580 |           return encodeURIComponent(key) + '=' + value;
 581 |       } else {
 582 |           return value;
 583 |       }
 584 |   }
 585 | 
 586 |   function encodeReserved(str) {
 587 |       return str.split(/(%[0-9A-Fa-f]{2})/g).map(function (part) {
 588 |           if (!/%[0-9A-Fa-f]/.test(part)) {
 589 |               part = encodeURI(part);
 590 |           }
 591 |           return part;
 592 |       }).join('');
 593 |   }
 594 | 
 595 |   function template (options) {
 596 | 
 597 |       var variables = [],
 598 |           url = expand(options.url, options.params, variables);
 599 | 
 600 |       variables.forEach(function (key) {
 601 |           delete options.params[key];
 602 |       });
 603 | 
 604 |       return url;
 605 |   }
 606 | 
 607 |   /**
 608 |    * Service for URL templating.
 609 |    */
 610 | 
 611 |   var ie = document.documentMode;
 612 |   var el = document.createElement('a');
 613 | 
 614 |   function Url(url, params) {
 615 | 
 616 |       var self = this || {},
 617 |           options = url,
 618 |           transform;
 619 | 
 620 |       if (isString(url)) {
 621 |           options = { url: url, params: params };
 622 |       }
 623 | 
 624 |       options = merge({}, Url.options, self.$options, options);
 625 | 
 626 |       Url.transforms.forEach(function (handler) {
 627 |           transform = factory(handler, transform, self.$vm);
 628 |       });
 629 | 
 630 |       return transform(options);
 631 |   }
 632 | 
 633 |   /**
 634 |    * Url options.
 635 |    */
 636 | 
 637 |   Url.options = {
 638 |       url: '',
 639 |       root: null,
 640 |       params: {}
 641 |   };
 642 | 
 643 |   /**
 644 |    * Url transforms.
 645 |    */
 646 | 
 647 |   Url.transforms = [template, query, root];
 648 | 
 649 |   /**
 650 |    * Encodes a Url parameter string.
 651 |    *
 652 |    * @param {Object} obj
 653 |    */
 654 | 
 655 |   Url.params = function (obj) {
 656 | 
 657 |       var params = [],
 658 |           escape = encodeURIComponent;
 659 | 
 660 |       params.add = function (key, value) {
 661 | 
 662 |           if (isFunction(value)) {
 663 |               value = value();
 664 |           }
 665 | 
 666 |           if (value === null) {
 667 |               value = '';
 668 |           }
 669 | 
 670 |           this.push(escape(key) + '=' + escape(value));
 671 |       };
 672 | 
 673 |       serialize(params, obj);
 674 | 
 675 |       return params.join('&').replace(/%20/g, '+');
 676 |   };
 677 | 
 678 |   /**
 679 |    * Parse a URL and return its components.
 680 |    *
 681 |    * @param {String} url
 682 |    */
 683 | 
 684 |   Url.parse = function (url) {
 685 | 
 686 |       if (ie) {
 687 |           el.href = url;
 688 |           url = el.href;
 689 |       }
 690 | 
 691 |       el.href = url;
 692 | 
 693 |       return {
 694 |           href: el.href,
 695 |           protocol: el.protocol ? el.protocol.replace(/:$/, '') : '',
 696 |           port: el.port,
 697 |           host: el.host,
 698 |           hostname: el.hostname,
 699 |           pathname: el.pathname.charAt(0) === '/' ? el.pathname : '/' + el.pathname,
 700 |           search: el.search ? el.search.replace(/^\?/, '') : '',
 701 |           hash: el.hash ? el.hash.replace(/^#/, '') : ''
 702 |       };
 703 |   };
 704 | 
 705 |   function factory(handler, next, vm) {
 706 |       return function (options) {
 707 |           return handler.call(vm, options, next);
 708 |       };
 709 |   }
 710 | 
 711 |   function serialize(params, obj, scope) {
 712 | 
 713 |       var array = isArray(obj),
 714 |           plain = isPlainObject(obj),
 715 |           hash;
 716 | 
 717 |       each(obj, function (value, key) {
 718 | 
 719 |           hash = isObject(value) || isArray(value);
 720 | 
 721 |           if (scope) {
 722 |               key = scope + '[' + (plain || hash ? key : '') + ']';
 723 |           }
 724 | 
 725 |           if (!scope && array) {
 726 |               params.add(value.name, value.value);
 727 |           } else if (hash) {
 728 |               serialize(params, value, key);
 729 |           } else {
 730 |               params.add(key, value);
 731 |           }
 732 |       });
 733 |   }
 734 | 
 735 |   function xdrClient (request) {
 736 |       return new Promise$1(function (resolve) {
 737 | 
 738 |           var xdr = new XDomainRequest(),
 739 |               handler = function (event) {
 740 | 
 741 |               var response = request.respondWith(xdr.responseText, {
 742 |                   status: xdr.status,
 743 |                   statusText: xdr.statusText
 744 |               });
 745 | 
 746 |               resolve(response);
 747 |           };
 748 | 
 749 |           request.abort = function () {
 750 |               return xdr.abort();
 751 |           };
 752 | 
 753 |           xdr.open(request.method, request.getUrl(), true);
 754 |           xdr.timeout = 0;
 755 |           xdr.onload = handler;
 756 |           xdr.onerror = handler;
 757 |           xdr.ontimeout = function () {};
 758 |           xdr.onprogress = function () {};
 759 |           xdr.send(request.getBody());
 760 |       });
 761 |   }
 762 | 
 763 |   var ORIGIN_URL = Url.parse(location.href);
 764 |   var SUPPORTS_CORS = 'withCredentials' in new XMLHttpRequest();
 765 | 
 766 |   function cors (request, next) {
 767 | 
 768 |       if (!isBoolean(request.crossOrigin) && crossOrigin(request)) {
 769 |           request.crossOrigin = true;
 770 |       }
 771 | 
 772 |       if (request.crossOrigin) {
 773 | 
 774 |           if (!SUPPORTS_CORS) {
 775 |               request.client = xdrClient;
 776 |           }
 777 | 
 778 |           delete request.emulateHTTP;
 779 |       }
 780 | 
 781 |       next();
 782 |   }
 783 | 
 784 |   function crossOrigin(request) {
 785 | 
 786 |       var requestUrl = Url.parse(Url(request));
 787 | 
 788 |       return requestUrl.protocol !== ORIGIN_URL.protocol || requestUrl.host !== ORIGIN_URL.host;
 789 |   }
 790 | 
 791 |   function body (request, next) {
 792 | 
 793 |       if (request.emulateJSON && isPlainObject(request.body)) {
 794 |           request.body = Url.params(request.body);
 795 |           request.headers['Content-Type'] = 'application/x-www-form-urlencoded';
 796 |       }
 797 | 
 798 |       if (isFormData(request.body)) {
 799 |           delete request.headers['Content-Type'];
 800 |       }
 801 | 
 802 |       if (isPlainObject(request.body)) {
 803 |           request.body = JSON.stringify(request.body);
 804 |       }
 805 | 
 806 |       next(function (response) {
 807 | 
 808 |           var contentType = response.headers['Content-Type'];
 809 | 
 810 |           if (isString(contentType) && contentType.indexOf('application/json') === 0) {
 811 | 
 812 |               try {
 813 |                   response.data = response.json();
 814 |               } catch (e) {
 815 |                   response.data = null;
 816 |               }
 817 |           } else {
 818 |               response.data = response.text();
 819 |           }
 820 |       });
 821 |   }
 822 | 
 823 |   function jsonpClient (request) {
 824 |       return new Promise$1(function (resolve) {
 825 | 
 826 |           var name = request.jsonp || 'callback',
 827 |               callback = '_jsonp' + Math.random().toString(36).substr(2),
 828 |               body = null,
 829 |               handler,
 830 |               script;
 831 | 
 832 |           handler = function (event) {
 833 | 
 834 |               var status = 0;
 835 | 
 836 |               if (event.type === 'load' && body !== null) {
 837 |                   status = 200;
 838 |               } else if (event.type === 'error') {
 839 |                   status = 404;
 840 |               }
 841 | 
 842 |               resolve(request.respondWith(body, { status: status }));
 843 | 
 844 |               delete window[callback];
 845 |               document.body.removeChild(script);
 846 |           };
 847 | 
 848 |           request.params[name] = callback;
 849 | 
 850 |           window[callback] = function (result) {
 851 |               body = JSON.stringify(result);
 852 |           };
 853 | 
 854 |           script = document.createElement('script');
 855 |           script.src = request.getUrl();
 856 |           script.type = 'text/javascript';
 857 |           script.async = true;
 858 |           script.onload = handler;
 859 |           script.onerror = handler;
 860 | 
 861 |           document.body.appendChild(script);
 862 |       });
 863 |   }
 864 | 
 865 |   function jsonp (request, next) {
 866 | 
 867 |       if (request.method == 'JSONP') {
 868 |           request.client = jsonpClient;
 869 |       }
 870 | 
 871 |       next(function (response) {
 872 | 
 873 |           if (request.method == 'JSONP') {
 874 |               response.data = response.json();
 875 |           }
 876 |       });
 877 |   }
 878 | 
 879 |   function before (request, next) {
 880 | 
 881 |       if (isFunction(request.before)) {
 882 |           request.before.call(this, request);
 883 |       }
 884 | 
 885 |       next();
 886 |   }
 887 | 
 888 |   /**
 889 |    * HTTP method override Interceptor.
 890 |    */
 891 | 
 892 |   function method (request, next) {
 893 | 
 894 |       if (request.emulateHTTP && /^(PUT|PATCH|DELETE)$/i.test(request.method)) {
 895 |           request.headers['X-HTTP-Method-Override'] = request.method;
 896 |           request.method = 'POST';
 897 |       }
 898 | 
 899 |       next();
 900 |   }
 901 | 
 902 |   function header (request, next) {
 903 | 
 904 |       request.method = request.method.toUpperCase();
 905 |       request.headers = assign({}, Http.headers.common, !request.crossOrigin ? Http.headers.custom : {}, Http.headers[request.method.toLowerCase()], request.headers);
 906 | 
 907 |       next();
 908 |   }
 909 | 
 910 |   /**
 911 |    * Timeout Interceptor.
 912 |    */
 913 | 
 914 |   function timeout (request, next) {
 915 | 
 916 |       var timeout;
 917 | 
 918 |       if (request.timeout) {
 919 |           timeout = setTimeout(function () {
 920 |               request.abort();
 921 |           }, request.timeout);
 922 |       }
 923 | 
 924 |       next(function (response) {
 925 | 
 926 |           clearTimeout(timeout);
 927 |       });
 928 |   }
 929 | 
 930 |   function xhrClient (request) {
 931 |       return new Promise$1(function (resolve) {
 932 | 
 933 |           var xhr = new XMLHttpRequest(),
 934 |               handler = function (event) {
 935 | 
 936 |               var response = request.respondWith('response' in xhr ? xhr.response : xhr.responseText, {
 937 |                   status: xhr.status === 1223 ? 204 : xhr.status, // IE9 status bug
 938 |                   statusText: xhr.status === 1223 ? 'No Content' : trim(xhr.statusText),
 939 |                   headers: parseHeaders(xhr.getAllResponseHeaders())
 940 |               });
 941 | 
 942 |               resolve(response);
 943 |           };
 944 | 
 945 |           request.abort = function () {
 946 |               return xhr.abort();
 947 |           };
 948 | 
 949 |           xhr.open(request.method, request.getUrl(), true);
 950 |           xhr.timeout = 0;
 951 |           xhr.onload = handler;
 952 |           xhr.onerror = handler;
 953 | 
 954 |           if (request.progress) {
 955 |               if (request.method === 'GET') {
 956 |                   xhr.addEventListener('progress', request.progress);
 957 |               } else if (/^(POST|PUT)$/i.test(request.method)) {
 958 |                   xhr.upload.addEventListener('progress', request.progress);
 959 |               }
 960 |           }
 961 | 
 962 |           if (request.credentials === true) {
 963 |               xhr.withCredentials = true;
 964 |           }
 965 | 
 966 |           each(request.headers || {}, function (value, header) {
 967 |               xhr.setRequestHeader(header, value);
 968 |           });
 969 | 
 970 |           xhr.send(request.getBody());
 971 |       });
 972 |   }
 973 | 
 974 |   function parseHeaders(str) {
 975 | 
 976 |       var headers = {},
 977 |           value,
 978 |           name,
 979 |           i;
 980 | 
 981 |       each(trim(str).split('\n'), function (row) {
 982 | 
 983 |           i = row.indexOf(':');
 984 |           name = trim(row.slice(0, i));
 985 |           value = trim(row.slice(i + 1));
 986 | 
 987 |           if (headers[name]) {
 988 | 
 989 |               if (isArray(headers[name])) {
 990 |                   headers[name].push(value);
 991 |               } else {
 992 |                   headers[name] = [headers[name], value];
 993 |               }
 994 |           } else {
 995 | 
 996 |               headers[name] = value;
 997 |           }
 998 |       });
 999 | 
1000 |       return headers;
1001 |   }
1002 | 
1003 |   function Client (context) {
1004 | 
1005 |       var reqHandlers = [sendRequest],
1006 |           resHandlers = [],
1007 |           handler;
1008 | 
1009 |       if (!isObject(context)) {
1010 |           context = null;
1011 |       }
1012 | 
1013 |       function Client(request) {
1014 |           return new Promise$1(function (resolve) {
1015 | 
1016 |               function exec() {
1017 | 
1018 |                   handler = reqHandlers.pop();
1019 | 
1020 |                   if (isFunction(handler)) {
1021 |                       handler.call(context, request, next);
1022 |                   } else {
1023 |                       warn('Invalid interceptor of type ' + typeof handler + ', must be a function');
1024 |                       next();
1025 |                   }
1026 |               }
1027 | 
1028 |               function next(response) {
1029 | 
1030 |                   if (isFunction(response)) {
1031 | 
1032 |                       resHandlers.unshift(response);
1033 |                   } else if (isObject(response)) {
1034 | 
1035 |                       resHandlers.forEach(function (handler) {
1036 |                           response = when(response, function (response) {
1037 |                               return handler.call(context, response) || response;
1038 |                           });
1039 |                       });
1040 | 
1041 |                       when(response, resolve);
1042 | 
1043 |                       return;
1044 |                   }
1045 | 
1046 |                   exec();
1047 |               }
1048 | 
1049 |               exec();
1050 |           }, context);
1051 |       }
1052 | 
1053 |       Client.use = function (handler) {
1054 |           reqHandlers.push(handler);
1055 |       };
1056 | 
1057 |       return Client;
1058 |   }
1059 | 
1060 |   function sendRequest(request, resolve) {
1061 | 
1062 |       var client = request.client || xhrClient;
1063 | 
1064 |       resolve(client(request));
1065 |   }
1066 | 
1067 |   var classCallCheck = function (instance, Constructor) {
1068 |     if (!(instance instanceof Constructor)) {
1069 |       throw new TypeError("Cannot call a class as a function");
1070 |     }
1071 |   };
1072 | 
1073 |   /**
1074 |    * HTTP Response.
1075 |    */
1076 | 
1077 |   var Response = function () {
1078 |       function Response(body, _ref) {
1079 |           var url = _ref.url;
1080 |           var headers = _ref.headers;
1081 |           var status = _ref.status;
1082 |           var statusText = _ref.statusText;
1083 |           classCallCheck(this, Response);
1084 | 
1085 | 
1086 |           this.url = url;
1087 |           this.body = body;
1088 |           this.headers = headers || {};
1089 |           this.status = status || 0;
1090 |           this.statusText = statusText || '';
1091 |           this.ok = status >= 200 && status < 300;
1092 |       }
1093 | 
1094 |       Response.prototype.text = function text() {
1095 |           return this.body;
1096 |       };
1097 | 
1098 |       Response.prototype.blob = function blob() {
1099 |           return new Blob([this.body]);
1100 |       };
1101 | 
1102 |       Response.prototype.json = function json() {
1103 |           return JSON.parse(this.body);
1104 |       };
1105 | 
1106 |       return Response;
1107 |   }();
1108 | 
1109 |   var Request = function () {
1110 |       function Request(options) {
1111 |           classCallCheck(this, Request);
1112 | 
1113 | 
1114 |           this.method = 'GET';
1115 |           this.body = null;
1116 |           this.params = {};
1117 |           this.headers = {};
1118 | 
1119 |           assign(this, options);
1120 |       }
1121 | 
1122 |       Request.prototype.getUrl = function getUrl() {
1123 |           return Url(this);
1124 |       };
1125 | 
1126 |       Request.prototype.getBody = function getBody() {
1127 |           return this.body;
1128 |       };
1129 | 
1130 |       Request.prototype.respondWith = function respondWith(body, options) {
1131 |           return new Response(body, assign(options || {}, { url: this.getUrl() }));
1132 |       };
1133 | 
1134 |       return Request;
1135 |   }();
1136 | 
1137 |   /**
1138 |    * Service for sending network requests.
1139 |    */
1140 | 
1141 |   var CUSTOM_HEADERS = { 'X-Requested-With': 'XMLHttpRequest' };
1142 |   var COMMON_HEADERS = { 'Accept': 'application/json, text/plain, */*' };
1143 |   var JSON_CONTENT_TYPE = { 'Content-Type': 'application/json;charset=utf-8' };
1144 | 
1145 |   function Http(options) {
1146 | 
1147 |       var self = this || {},
1148 |           client = Client(self.$vm);
1149 | 
1150 |       defaults(options || {}, self.$options, Http.options);
1151 | 
1152 |       Http.interceptors.forEach(function (handler) {
1153 |           client.use(handler);
1154 |       });
1155 | 
1156 |       return client(new Request(options)).then(function (response) {
1157 | 
1158 |           return response.ok ? response : Promise$1.reject(response);
1159 |       }, function (response) {
1160 | 
1161 |           if (response instanceof Error) {
1162 |               error(response);
1163 |           }
1164 | 
1165 |           return Promise$1.reject(response);
1166 |       });
1167 |   }
1168 | 
1169 |   Http.options = {};
1170 | 
1171 |   Http.headers = {
1172 |       put: JSON_CONTENT_TYPE,
1173 |       post: JSON_CONTENT_TYPE,
1174 |       patch: JSON_CONTENT_TYPE,
1175 |       delete: JSON_CONTENT_TYPE,
1176 |       custom: CUSTOM_HEADERS,
1177 |       common: COMMON_HEADERS
1178 |   };
1179 | 
1180 |   Http.interceptors = [before, timeout, method, body, jsonp, header, cors];
1181 | 
1182 |   ['get', 'delete', 'head', 'jsonp'].forEach(function (method) {
1183 | 
1184 |       Http[method] = function (url, options) {
1185 |           return this(assign(options || {}, { url: url, method: method }));
1186 |       };
1187 |   });
1188 | 
1189 |   ['post', 'put', 'patch'].forEach(function (method) {
1190 | 
1191 |       Http[method] = function (url, body, options) {
1192 |           return this(assign(options || {}, { url: url, method: method, body: body }));
1193 |       };
1194 |   });
1195 | 
1196 |   function Resource(url, params, actions, options) {
1197 | 
1198 |       var self = this || {},
1199 |           resource = {};
1200 | 
1201 |       actions = assign({}, Resource.actions, actions);
1202 | 
1203 |       each(actions, function (action, name) {
1204 | 
1205 |           action = merge({ url: url, params: params || {} }, options, action);
1206 | 
1207 |           resource[name] = function () {
1208 |               return (self.$http || Http)(opts(action, arguments));
1209 |           };
1210 |       });
1211 | 
1212 |       return resource;
1213 |   }
1214 | 
1215 |   function opts(action, args) {
1216 | 
1217 |       var options = assign({}, action),
1218 |           params = {},
1219 |           body;
1220 | 
1221 |       switch (args.length) {
1222 | 
1223 |           case 2:
1224 | 
1225 |               params = args[0];
1226 |               body = args[1];
1227 | 
1228 |               break;
1229 | 
1230 |           case 1:
1231 | 
1232 |               if (/^(POST|PUT|PATCH)$/i.test(options.method)) {
1233 |                   body = args[0];
1234 |               } else {
1235 |                   params = args[0];
1236 |               }
1237 | 
1238 |               break;
1239 | 
1240 |           case 0:
1241 | 
1242 |               break;
1243 | 
1244 |           default:
1245 | 
1246 |               throw 'Expected up to 4 arguments [params, body], got ' + args.length + ' arguments';
1247 |       }
1248 | 
1249 |       options.body = body;
1250 |       options.params = assign({}, options.params, params);
1251 | 
1252 |       return options;
1253 |   }
1254 | 
1255 |   Resource.actions = {
1256 | 
1257 |       get: { method: 'GET' },
1258 |       save: { method: 'POST' },
1259 |       query: { method: 'GET' },
1260 |       update: { method: 'PUT' },
1261 |       remove: { method: 'DELETE' },
1262 |       delete: { method: 'DELETE' }
1263 | 
1264 |   };
1265 | 
1266 |   function plugin(Vue) {
1267 | 
1268 |       if (plugin.installed) {
1269 |           return;
1270 |       }
1271 | 
1272 |       Util(Vue);
1273 | 
1274 |       Vue.url = Url;
1275 |       Vue.http = Http;
1276 |       Vue.resource = Resource;
1277 |       Vue.Promise = Promise$1;
1278 | 
1279 |       Object.defineProperties(Vue.prototype, {
1280 | 
1281 |           $url: {
1282 |               get: function () {
1283 |                   return options(Vue.url, this, this.$options.url);
1284 |               }
1285 |           },
1286 | 
1287 |           $http: {
1288 |               get: function () {
1289 |                   return options(Vue.http, this, this.$options.http);
1290 |               }
1291 |           },
1292 | 
1293 |           $resource: {
1294 |               get: function () {
1295 |                   return Vue.resource.bind(this);
1296 |               }
1297 |           },
1298 | 
1299 |           $promise: {
1300 |               get: function () {
1301 |                   var _this = this;
1302 | 
1303 |                   return function (executor) {
1304 |                       return new Vue.Promise(executor, _this);
1305 |                   };
1306 |               }
1307 |           }
1308 | 
1309 |       });
1310 |   }
1311 | 
1312 |   if (typeof window !== 'undefined' && window.Vue) {
1313 |       window.Vue.use(plugin);
1314 |   }
1315 | 
1316 |   return plugin;
1317 | 
1318 | }));


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