Skip to content

Instantly share code, notes, and snippets.

@Gaubee

Gaubee/index.html

Last active September 26, 2016 06:46
Show Gist options
  • Save Gaubee/b3f1cb93b7fb593fd3d00a834ffd8332 to your computer and use it in GitHub Desktop.
Save Gaubee/b3f1cb93b7fb593fd3d00a834ffd8332 to your computer and use it in GitHub Desktop.
Download ZIP
[ route → selectTabs → viewPage ]Best Practices
Raw
index.html
<link rel="import" href="/bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="/bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="/bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="/bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="/bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/app-route/app-route.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-progress/paper-progress.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/iron-icons/device-icons.html">
<link rel="import" href="/bower_components/iron-icons/social-icons.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/iron-media-query/iron-media-query.html">
<link rel="import" href="/bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="/bower_components/paper-menu/paper-menu.html">
<link rel="import" href="/bower_components/paper-item/paper-item.html">
<link rel="import" href="/bower_components/neon-animation/neon-animated-pages.html">
<!-- <link rel="import" href="/bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="/bower_components/neon-animation/animations/slide-from-left-animation.html">
<link rel="import" href="/bower_components/neon-animation/animations/slide-from-right-animation.html">
<link rel="import" href="/bower_components/neon-animation/animations/slide-left-animation.html">
<link rel="import" href="/bower_components/neon-animation/animations/slide-right-animation.html">
-->
<dom-module id="kb-app">
<style>
:host{
display: flex;
--app-show-paper-progress:none;
height: 100vh;
}
.bg{
background-color: #00acbd;
}
iron-pages{
width: 80vw;
max-width: 800pt;
}
@media (max-width: 600px){
:host{
height: initial;
}
iron-pages{
width: 100vw;
}
}
paper-progress{
display: var(--app-show-paper-progress);
position: absolute;
width: 100%;
z-index: 1;
}
iron-pages{
perspective: 500px;
-webkit-perspective: 500px;
}
iron-pages > *{
perspective: 500px;
-webkit-perspective: 500px;
will-change: transform;
backface-visibility: hidden;
}
app-toolbar {
background-color: #4285f4;
color: #fff;
}
paper-tabs {
max-width: 640px;
--paper-tabs-selection-bar-color: #333;
}
paper-tab {
--paper-tab-ink: #FFF;
text-transform: uppercase;
}
paper-item{
@apply(--paper-font-common-base);
}
app-drawer {
--app-drawer-content-container: {
/*background-color: #B0BEC5;*/
box-shadow: 1px 0 2px 1px rgba(0,0,0,0.18);
};
/*--app-drawer-scrim-background: rgba(179, 157, 219, 0.5);*/
--app-drawer-scrim-background: rgba(0, 0, 0, 0.5);
}
app-drawer > paper-button{
width: 100%;
text-align: left;
margin: 0;
border-radius: 0;
}
[hidden] {
display: none !important;
}
#pages_container{
display: flex;
/*overflow-x:hidden;*/
overflow-x: auto;
}
#pages_container .animatable-page-item{
width: 100%;
flex: none;
position: static;
}
/*
neon-animated-pages > *{
position: static!important;
width: 100%;
flex: none;
}
neon-animated-pages > :not(.iron-selected):not(.neon-animating){
position: static!important;
}*/
</style>
<template>
<app-route
id="router"
route="{{route}}"
pattern="/:page"
data="{{routeData}}"></app-route>
<iron-media-query query="min-width: 600px" query-matches="{{wideLayout}}"></iron-media-query>
<app-drawer-layout force-narrow fullbleed>
<!-- 抽屉 -->
<app-drawer id="drawer" >
<app-toolbar></app-toolbar>
<paper-menu selected="{{selectedTabName}}" attr-for-selected="name">
<template is="dom-repeat" items="{{child_pages}}">
<paper-item name="[[item.name]]" on-tap="closeDrawer"><iron-icon icon=[[item.icon]] ></iron-icon>[[item.title]]</paper-item>
</template>
</paper-menu>
</app-drawer>
<app-header-layout>
<app-header fixed condenses effects="waterfall">
<!-- 窄屏：头部栏 -->
<app-toolbar>
<paper-icon-button hidden="[[wideLayout]]" icon="menu" drawer-toggle></paper-icon-button>
<div>[[selectedPageName]]</div>
</app-toolbar>
<!-- 宽屏：头部栏 -->
<app-toolbar class="tabs-bar" hidden="[[!wideLayout]]">
<!-- Nav on desktop: tabs -->
<paper-tabs selected="{{selectedTabName}}" attr-for-selected="name" bottom-item>
<template is="dom-repeat" items="{{child_pages}}">
<paper-tab name="[[item.name]]"><iron-icon icon=[[item.icon]]></iron-icon>[[item.title]]</paper-tab>
</template>
</paper-tabs>
</app-toolbar>
</app-header>
<paper-progress indeterminate></paper-progress>
<!-- 这里由路由触发器动态添加标签 -->
<neon-animated-pages
id="pages_container"
selected="{{selectedPageName}}"
attr-for-selected="name">
<template is="dom-repeat" items="{{child_pages}}">
<div class="animatable-page-item" name$='[[item.name]]'>
</div>
</template>
</neon-animated-pages>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: "kb-app",
properties: {
selectedTabName: {
type: String,
reflectToAttribute: true,
},
viewPage:{
type: String,
observer: '_switchPages'
},
wideLayout: {
type: Boolean,
value: false,
observer: 'onLayoutChange',
},
child_pages: {
type: Array,
value: function() {
return [
{name:"apps",title:"我的应用",icon:"device:widgets"},
{name:"panle",title:"监控面板",icon:"timeline"},
{name:"friends",title:"我的同僚",icon:"social:people"},
{name:"setting",title:"设置",icon:"settings"}
];
}
}
},
_routeJumpTo : function(e) {
var $app_route = this.$.router;
this._routeJumpTo = function(e) {
var href = e.target.name;
$app_route.set("route.path", href);
};
this._routeJumpTo(e);
},
observers: [
'_bind_routePage_to_selectedTabName(routeData.page)',
'_bind_selectedTabName_to_viewPage(selectedTabName)'
],
onLayoutChange: function(wide) {
var drawer = this.$.drawer;
if (wide && drawer.opened) {
drawer.opened = false;
}
},
closeDrawer:function () {
this.$.drawer.opened = false;
},
// attachedCallback:function () {
// console.log("attachedCallback");
// },
// detachedCallback:function () {
// console.log("detachedCallback");
// },
_bind_routePage_to_selectedTabName:function (routePage) {
this.selectedTabName = routePage || 'apps';
},
_bind_selectedTabName_to_viewPage:function (selectedTabName) {
this.viewPage = this.selectedTabName;
},
_switchPages: function(page,old_page) {
var self = this;
var page_url = {
"view404": "../kb-view404",
"apps":"apps",
"panle":"panle",
"friends":"friends",
"setting":"setting"
}[page];
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = self.resolveUrl(page_url + '.html');
// 显示加载进入条
self.customStyle["--app-show-paper-progress"] = "block";
self.updateStyles();
self.importHref(resolvedPageUrl, () => {
self.customStyle["--app-show-paper-progress"] = "none";
self.updateStyles();
// 渲染进程ID
var current_render_process_id = self._render_process_id = Math.random();
// 自定义动画
Polymer.RenderStatus.afterNextRender(self, function() {
if (self._render_process_id!=current_render_process_id) {
return
}
self.set("selectedPageName", self.selectedTabName);
// 动态添加节点
var $iron_pages = self.$.pages_container;
var $selected_item = $iron_pages.selectedItem;
if(!$selected_item){
return
}
var contain_tag_name = "kb-app-"+page;
if ($selected_item&&!$selected_item.querySelector(contain_tag_name)) {
var page_node = document.createElement(contain_tag_name);
$selected_item.appendChild(page_node);
}
var $pre_selected_item = $iron_pages.items.filter(function(n) {
n.classList.add("neon-animating");
return n.getAttribute("name") === old_page
})[0] || $selected_item;
// 显示动画
var diff_offsetLeft = $pre_selected_item.offsetLeft - $selected_item.offsetLeft;
var duration = Math.sqrt(Math.abs(diff_offsetLeft)) * 10;
var _ani_queue_length = 0;
$iron_pages.items.forEach(function(n) {
n._current_ani && n._current_ani.cancel();
n._current_ani = n.animate([{
transform: `translateX(${-$pre_selected_item.offsetLeft}px) translateZ(0)`
}, {
transform: `translateX(${-$selected_item.offsetLeft}px) translateZ(0)`
}], {
duration: duration,
iterations: 1,
easing: "cubic-bezier(0.165, 0.840, 0.440, 1.000)",
});
_ani_queue_length+=1;
n._current_ani.onfinish = function() {
n.classList.remove("neon-animating");
n._current_ani = null;
_ani_queue_length-=1;
if (!_ani_queue_length) {
// 所有动画完成，改变路由
self.set("routeData.page",page);
}
}
});
});
}, self._showPage404, true);
},
_showPage404: function() {
var self =this;
// 回滚到当前的选择
self.set("selectedTabName", self.routeData.page);
self.viewPage = 'view404';
// 关闭loading提示器
self.customStyle["--app-show-paper-progress"] = "none";
self.updateStyles();
}
});
</script>
</dom-module>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment