<app-location route="{{route}}" url-space-regex="^[[rootPath]]">
</app-location>
<app-route route="{{route}}" pattern="[[rootPath]]:page" data="{{routeData}}" tail="{{subRoute}}">
</app-route>
<app-header-layout fullbleed slot="header" fixed condenses effects="waterfall">
<section class="layout horizontal">
<aside class$="[[asideToggle]]">
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation" on-click="_clickLink">
<a name="pg1" href="[[rootPath]]pg1" index="0">NNNNNN</a>
<a name="pg2" href="[[rootPath]]pg2" index="1">NNNNNN</a>
<a name="pg3" href="[[rootPath]]pg3" index="2">NNNNNN</a>
<a name="pg4" href="[[rootPath]]pg4" index="3">NNNNNN</a>
<a name="pg5" href="[[rootPath]]pg5" index="4">NNNNNN</a>
<a name="pg6" href="[[rootPath]]pg6" index="5">NNNNNN</a>
<a name="pg7" href="[[rootPath]]pg7" index="6">NNNNNN</a>
<a name="pg7" href="[[rootPath]]pg7" index="6">NNNNNN</a>
<a name="pg8" href="[[rootPath]]pg8" index="7">NNNNNN</a>
<a name="pg9" href="[[rootPath]]pg9" index="8">NNNNNN-1</a>
<a name="pg10" href="[[rootPath]]pg10" index="9">NNNNNN-2</a>
<a name="pg11" href="[[rootPath]]pg11" index="10">NNNNNN-3</a>
<a name="pg12" href="[[rootPath]]pg12" index="11">NNNNNN</a>
<a name="pg13" href="[[rootPath]]pg13" index="12">NNNNNN</a>
<a name="pg14" href="[[rootPath]]pg14" index="13">NNNNNN</a>
<a name="pg15" href="[[rootPath]]pg15" index="14">NNNNNN-1</a>
<a name="pg16" href="[[rootPath]]pg16" index="15">NNNNNN-2</a>
<a name="pg17" href="[[rootPath]]pg17" index="16">NNNNNN</a>
<a name="pg18" href="[[rootPath]]pg18" index="17">NNNNNN</a>
<a name="pg19" href="[[rootPath]]pg19" index="18">NNNNNN</a>
<a name="pg20" href="[[rootPath]]pg20" index="19">NNNNNN</a>
<a name="pg21" href="[[rootPath]]pg21" index="20">NNNNNN</a>
<a name="pg22" href="[[rootPath]]pg22" index="21">NNNNNN</a>
<a name="pg23" href="[[rootPath]]pg23" index="22">NNNNNN</a>
<a name="pg24" href="[[rootPath]]pg24" index="23">NNNNNN</a>
<a name="grain-detection" href="[[rootPath]]grain-detection" index="24">NNNNNN</a>
<a name="pg26" href="[[rootPath]]pg26" index="25">NNNNNN</a>
<a name="pg27" href="[[rootPath]]pg27" index="24">NNNNNN-动画</a>
<a name="pg28" href="[[rootPath]]pg28" index="26">NNNNNN</a>
<a name="pg29" href="[[rootPath]]pg29" index="27">NNNNNN</a>
<a name="pg30" href="[[rootPath]]pg30" index="28">NNNNNN-统计图</a>
<a name="pg31" href="[[rootPath]]pg31" index="29">NNNNNN</a>
<a name="pg32" href="[[rootPath]]pg32" index="30">NNNNNN</a>
<a name="pg33" href="[[rootPath]]pg33" index="31">NNNNNN</a>
<a name="pg34" href="[[rootPath]]pg34" index="32">NNNNNN</a>
<a name="pg35" href="[[rootPath]]pg35" index="33">NNNNNN-1</a>
<a name="pg36" href="[[rootPath]]pg36" index="34">NNNNNN-2</a>
<a name="pg37" href="[[rootPath]]pg37" index="35">NNNNNN-3</a>
<a name="pg38" href="[[rootPath]]pg38" index="36">NNNNNN</a>
<a name="pg39" href="[[rootPath]]pg39" index="37">NNNNNN-NNNNNN</a>
<a name="pg39" href="[[rootPath]]pg39" index="37">NNNNNN</a>
<a name="pg40" href="[[rootPath]]pg40" index="38">NNNNNNNNNN</a>
<a name="pg41" href="[[rootPath]]pg41" index="39">NNNNNN-NNNNNN</a>
<a name="pg42" href="[[rootPath]]pg42" index="40">NNNNNN-NNNNNN</a>
<a name="pg43" href="[[rootPath]]pg43" index="41">NNNNNN-1</a>
<a name="pg44" href="[[rootPath]]pg44" index="42">NNNNNN-2</a>
<a name="pg45" href="[[rootPath]]pg45" index="43">NNNNNN</a>
</iron-selector>
</aside>
<article >
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" fallback-selection="view404" on-track="_trackEvent" on-down="_fingerDown" on-up="_fingerUp">
<my-pg1 name="pg1" ></my-pg1>
<my-pg2 name="pg2"></my-pg2>
<my-pg3 name="pg3"></my-pg3>
<my-pg4 name="pg4" ></my-pg4>
<my-pg5 name="pg5"></my-pg5>
<my-pg6 name="pg6"></my-pg6>
<my-pg7 name="pg7" video-ended="{{videoEnded}}" current-index="{{play.currentPlay}}" ></my-pg7>
<my-pg8 name="pg8" class="animated fadeIn"></my-pg8>
<my-pg9 name="pg9"></my-pg9>
<my-pg10 name="pg10" ></my-pg10>
<my-pg11 name="pg11"></my-pg11>
<my-pg12 name="pg12" current-index="{{play.currentPlay}}" ></my-pg12>
<my-pg13 name="pg13" ></my-pg13>
<my-pg14 name="pg14" ></my-pg14>
<my-pg15 name="pg15" current-index="{{play.currentPlay}}" key-control="{{keyControl}}" current-step="{{currentStep}}" ></my-pg15>
<my-pg16 name="pg16" current-index="{{play.currentPlay}}" key-control="{{keyControl}}" current-step="{{currentStep}}"></my-pg16>
<my-pg17 name="pg17" ></my-pg17>
<my-pg18 name="pg18" ></my-pg18>
<my-pg19 name="pg19" current-index="{{play.currentPlay}}"></my-pg19>
<my-pg20 name="pg20" ></my-pg20>
<my-pg21 name="pg21" current-index="{{play.currentPlay}}" ></my-pg21>
<my-pg22 name="pg22"></my-pg22>
<my-pg23 name="pg23" current-index="{{play.currentPlay}}"></my-pg23>
<my-pg24 name="pg24"></my-pg24>
<!--<my-pg25 name="pg25"></my-pg25>-->
<my-grain-detection name="grain-detection" current-index="{{play.currentPlay}}" key-control="{{keyControl}}" current-step="{{currentStep}}" ratio="{{ratio}}"></my-grain-detection>
<my-pg26 name="pg26" ></my-pg26>
<my-pg27 name="pg27" current-index="{{play.currentPlay}}" ></my-pg27>
<my-pg28 name="pg28" ></my-pg28>
<my-pg29 name="pg29"></my-pg29>
<my-pg30 name="pg30" current-index="{{play.currentPlay}}"></my-pg30>
<my-pg31 name="pg31"></my-pg31>
<my-pg32 name="pg32"></my-pg32>
<my-pg33 name="pg33"></my-pg33>
<my-pg34 name="pg34"></my-pg34>
<my-pg35 name="pg35"></my-pg35>
<my-pg36 name="pg36" ></my-pg36>
<my-pg37 name="pg37" ></my-pg37>
<my-pg38 name="pg38"></my-pg38>
<my-pg39 name="pg39" ></my-pg39>
<my-pg40 name="pg40"></my-pg40>
<my-pg41 name="pg41" ></my-pg41>
<my-pg42 name="pg42" current-index="{{play.currentPlay}}" key-control="{{keyControl}}" current-step="{{currentStep}}"></my-pg42>
<my-pg43 name="pg43"></my-pg43>
<my-pg44 name="pg44"></my-pg44>
<my-pg45 name="pg45"></my-pg45>
<my-view404 name="view404"></my-view404>
</iron-pages>
</article>
</section>
<div class="range" on-mouseover="_rangeBarShow" on-mouseleave="_rangeBarHidden">
1<input type="range" min="1" max="5" value="{{ratio::input}}" >5
</div>
</app-header-layout>
</template>
<script >
class MyApp extends Polymer.GestureEventListeners(Polymer.Element) {
static get is() { return 'my-app'; }
static get properties() {
return {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},
routeData: Object,
subRoute: String,
rootPath: String,
play: {
type: Object,
value: {
run: false,
times: [ 10000,10000,10000,10000,10000,10000,17700,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,110000,10000,43000,10000,10000,10000,40000,10000,43000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000,10000],
pages: ['pg1','pg2','pg3','pg4','pg5','pg6','pg7','pg8','pg9','pg10','pg11','pg12','pg13','pg14','pg15','pg16','pg17','pg18','pg19','pg20','pg21','pg22','pg23','pg24','grain-detection','pg26','pg27','pg28','pg29','pg30','pg31','pg32','pg33','pg34','pg35','pg36','pg37','pg38','pg39','pg40','pg41','pg42','pg43','pg44','pg45'],
currentPlay: 0,
pause: false,
loop: false
}
},
asideToggle: String,
articleWidth: Number,
currentStep: {
type: Number,
value: 0
},
videoAutoplay:{
type: Boolean,
notify: true,
reflectToAttribute: true,
},
videoEnded: {
type: Boolean,
observer: '_isVideoEnded'
},
playState:{
type: String,
observer: '_playState'
},
keyControl:{
type: Boolean,
value: false
},
fingerDownTime: Number,
fingerUpTime: Number,
longPressDown: {
type: Boolean,
observer: '_isLongPressDown'
},
tap: {
type: Boolean,
value: false,
observer: '_isTap'
},
timer: {
type: Number,
value: null,
},
ratio: {
type: Number,
value: 2,
}
};
}
static get observers() {
return [
'_routePageChanged(routeData.page)',
'_currentPlayChanged(play.currentPlay)',
'_playPause(play.pause)',
];
}
connectedCallback() {
super.connectedCallback();
this._init();
}
_playState(state){
switch(state){
case 'loopAutoplay':
this.set('play.pause', false);
this.set('play.loop', true);
break;
case 'onceAutoplay':
this.set('play.pause', false);
this.set('play.loop', false);
break;
case 'manuPlay':
this.set('play.pause', true);
this.set('play.loop', false);
break;
default:
break;
}
}
_init() {
this.asideToggle = 'aside-close';
let doc = document.body;
doc.onkeydown = (e) => {
switch (e.which) {
case 32:
this._stopPlay();
this._activeSteps();
break;
case 13:
this._stopPlay();
this._asideToggle();
break;
case 37:
this._stopPlay();
if (this.play.currentPlay < 1) {
this.play.currentPlay = 1;
}
this.play.currentPlay--;
this.notifyPath('play.currentPlay');
break;
case 39:
this._stopPlay();
if (this.play.currentPlay > this.play.pages.length - 2) {
this.play.currentPlay = this.play.pages.length - 2;
}
this.play.currentPlay++;
this.notifyPath('play.currentPlay');
break;
case 38:
this._stopPlay();
if (this.play.currentPlay < 1) {
this.play.currentPlay = 1;
}
this.play.currentPlay--;
this.notifyPath('play.currentPlay');
break;
case 40:
this._stopPlay();
if (this.play.currentPlay > this.play.pages.length - 2) {
this.play.currentPlay = this.play.pages.length - 2;
}
this.play.currentPlay++;
this.notifyPath('play.currentPlay');
break;
default:
break;
}
}
}
_asideToggle() {
if (!this.asideToggle || this.asideToggle == 'aside-close') {
this.asideToggle = 'aside-open';
} else {
this.asideToggle = 'aside-close'
}
let asideWidth = this.shadowRoot.querySelector('aside').offsetWidth;
this._stopPlay();
this.articleWidth = this._articleWidth(asideWidth);
}
_pageChanged(page) {
let resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
Polymer.importHref(
resolvedPageUrl,
null,
this._showPage404.bind(this),
true
);
this.set('currentStep', 0);
this._resolveScreenFlashing();
}
_showPage404() {
this.page = 'view404';
}
_routePageChanged(page, old) {
if(page)
this.page = page || 'pg1';
}
_stopPlay() {
if(this.playState == 'loopAutoplay' || this.playState == 'onceAutoplay'){
this.tap = true;
}
this.play.pause = true;
this.notifyPath('play.pause');
}
_trackEvent(event, state){
this.keyControl = false;
this._stopPlay();
switch (event.detail.state){
case 'end':
if(state.dx > state.ddx){
if(this.play.currentPlay <= 0) this.play.currentPlay = this.play.pages.length;
this.play.currentPlay--;
}else{
if(this.play.currentPlay >= this.play.pages.length - 1) this.play.currentPlay = -1;
this.play.currentPlay++;
}
this.notifyPath('play.currentPlay');
break;
}
}
_playPause(pause) {
if (!pause) {
function getCurrentPage() {
if(this.play.currentPlay == 6) this.play.times[6] *= this.ratio;
else this.play.times[6] = 17700;
setTimeout(() => {
if (this.play.pause) {
return;
}
if (this.play.currentPlay >= this.play.pages.length) {
if(this.play.loop){
this.play.currentPlay = 0;
getCurrentPage.call(this);
}else{
this.play.pause = true;
return;
}
} else {
getCurrentPage.call(this);
}
this.notifyPath('play.currentPlay');
this.play.currentPlay++;
}, this.play.times[this.play.currentPlay] / this.ratio);
};
getCurrentPage.call(this);
}
}
_currentPlayChanged(index) {
this.page = this.play.pages[index];
this.route.path = '/' + this.page;
this.notifyPath('route.path');
}
_activeSteps() {
this.keyControl = true;
let currentPage = this.shadowRoot.querySelector('iron-pages').selectedItem;
let steps = currentPage.steps;
if (steps == undefined) {
this.play.currentPlay++;
if (this.play.currentPlay >= this.play.pages.length - 1) {
this.play.currentPlay = this.play.pages.length - 1;
}
} else {
if (this.currentStep >= steps) {
this.play.currentPlay++;
if (this.play.currentPlay > this.play.pages.length - 1) {
this.play.currentPlay = this.play.pages.length - 1;
}
}
this.currentStep ++;
}
this.notifyPath('play.currentPlay');
}
_resolveScreenFlashing(){
this.style.opacity = 0;
setTimeout( () => {this.style.opacity = 1;}, 100);
}
//Dynamic calculation of the width value of 'article'
_articleWidth(width) {
if (width) {
return this.offsetWidth - width;
} else {
return this.offsetWidth;
}
}
_isVideoEnded(end){
console.log(end);
if(end){
this.set('play.currentPlay', this.play.currentPlay+1) ;
}
}
_clickLink(e){
this.keyControl = false;
this._stopPlay();
this.set('play.currentPlay', e.target.getAttribute('index'));
}
_fingerDown(e){
this.fingerDownTime = +new Date();
}
_fingerUp(e){
this.fingerUpTime = +new Date();
this.longPressDown = this.fingerUpTime - this.fingerDownTime > 300;
}
_isLongPressDown(long){
if(long){
this._stopPlay();
}
}
_isTap(tap){// 20min后重新开启自动播放
if(!tap){
this.set('play.pause', false);
}else {
if(this.timer) clearTimeout(this.timer);
this.timer = setTimeout( () => {
this.tap = false;
if(this.playState != 'manuPlay') this.keyControl = false;
},5000);
}
}
_rangeBarShow(e){
if(e.target.nodeName == 'DIV') e.target.children[0].style.visibility = 'visible';
}
_rangeBarHidden(e){
if(e.target.nodeName == 'DIV') e.target.children[0].style.visibility = 'hidden';
}
}
window.customElements.define(MyApp.is, MyApp);
</script>
本文详细介绍了如何通过模板、脚本和组件实现网页上的导航栏、页面切换、页面显示和交互功能，包括动态计算文章宽度、视频播放控制、长按和点击事件处理等关键功能。
扫一扫
2246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
