1010 < script src ="../polyfill/spatnav-heuristic.js "> </ script >
1111 < script type ="text/javascript ">
1212 window . addEventListener ( "load" , function ( ) {
13-
14- let iframes = document . getElementsByTagName ( " iframe" ) ;
15- let iframesDescriptions = document . getElementsByClassName ( " iframe-description" ) ;
13+
14+ let iframes = document . getElementsByTagName ( ' iframe' ) ;
15+ let iframesDescriptions = document . getElementsByClassName ( ' iframe-description' ) ;
1616 for ( let i = 0 ; i < iframes . length ; i ++ ) {
17- const iframe = iframes [ i ] ;
18- const description = iframesDescriptions [ i ] ;
19- var innerDoc = iframe . contentDocument || iframe . contentWindow . document ;
20- innerDoc . body . style . background = "#e4e4e4AA" ;
17+ // Get Inner Doc and set background color
18+ let innerDoc = iframes [ i ] . contentDocument || iframes [ i ] . contentWindow . document ;
19+ innerDoc . children [ 0 ] . style . background = '#e4e4e4' ;
2120
2221 // remove description button in iframe
23- let info_panel = innerDoc . getElementById ( " info_panel" ) ;
22+ let info_panel = innerDoc . getElementById ( ' info_panel' ) ;
2423 if ( info_panel )
25- ( info_panel . style . display = "none" ) ;
26-
27- let folder_btn = innerDoc . getElementById ( "folder_btn" ) ;
24+ ( info_panel . style . display = 'none' ) ;
25+ let folder_btn = innerDoc . getElementById ( 'folder_btn' ) ;
2826 if ( folder_btn )
29- ( folder_btn . style . display = " none" ) ;
27+ ( folder_btn . style . display = ' none' ) ;
3028
3129 // Add description
32- let description_panel = innerDoc . getElementById ( "description_panel" ) ;
33- if ( description_panel ) {
34- let info_panel = innerDoc . getElementById ( "info_panel" ) ;
35- document . getElementsByClassName ( "api-description" ) ;
36- description . textContent = description_panel . textContent ;
30+ let descriptionPanel = innerDoc . getElementById ( 'description_panel' ) ;
31+ if ( descriptionPanel ) {
32+ iframesDescriptions [ i ] . innerHTML = descriptionPanel . innerHTML ;
3733 }
3834 }
3935 } ) ;
4036
37+ window . addEventListener ( 'keydown' , function ( e ) {
38+ if ( e . keyCode == 8 ) { // backspace button
39+ let polyfilEnableSwitch = document . getElementById ( 'polyfill-enable-switch' ) ;
40+ polyfilEnableSwitch . checked = ! polyfilEnableSwitch . checked ;
41+ polyfilEnableChanged ( ) ;
42+ e . preventDefault ( ) ;
43+ }
44+ } ) ;
45+
4146 function polyfilEnableChanged ( ) {
4247 let polyfilEnableSwitch = document . getElementById ( 'polyfill-enable-switch' ) ;
4348 let polyfilStateDiv = document . getElementById ( 'polyfill-state' ) ;
4449 window . spatnavPolyfillOff = ! polyfilEnableSwitch . checked ;
4550
4651 if ( polyfilEnableSwitch . checked ) {
47- polyfilStateDiv . classList . remove ( " deactivate" ) ;
52+ polyfilStateDiv . classList . remove ( ' deactivate' ) ;
4853 } else {
49- polyfilStateDiv . classList . add ( " deactivate" ) ;
54+ polyfilStateDiv . classList . add ( ' deactivate' ) ;
5055 }
5156 }
5257 </ script >
5358</ head >
5459
5560< body >
5661 < header >
57- < h1 class ="basic-padding "> Spatial Navigation Laboratory</ h1 >
62+ < div class ="title ">
63+ < img id ="icon-image " src ="./mark.png " width ="50px "/>
64+ Spatial Navigation Laboratory
65+ </ div >
66+
5867 < div id ="polyfill-state ">
5968 < span class ="activate-description ">
6069 All demo pages support spatial navigation. Please use arrow keys for moving the focus.
@@ -70,21 +79,22 @@ <h1 class="basic-padding">Spatial Navigation Laboratory</h1>
7079 </ header >
7180 < div class ="flex-box ">
7281 < nav id ="side-nav " aria-labelledby ="menu-label ">
73- < a href ="#intro " target ="_self "> Introduction</ a >
74- < a href ="#processing-model " target ="_self "> Processing Model</ a >
75- < a href ="#default-focus-moving " class ="submenu " target ="_self "> Default focus moving</ a >
76- < a href ="#overflow-regions " class ="submenu " target ="_self "> Overflow regions</ a >
77- < a href ="#scrollable-region " class ="submenu " target ="_self "> Scrollable region</ a >
78- < a href ="#iframe-element " class ="submenu " target ="_self "> <iframe> element</ a >
79- < a href ="#input-elements " class ="submenu " target ="_self "> <input> elements</ a >
80- < a href ="#spatnav-container " class ="submenu " target ="_self "> Spatnav container</ a >
81- < a href ="#api " target ="_self "> API Function</ a >
82- < a href ="#getSpatnavContainer " class ="submenu " target ="_self "> getSpatnavContainer</ a >
83- < a href ="#focusableAreas " class ="submenu " target ="_self "> focusableAreas</ a >
84- < a href ="#spatNavSearch " class ="submenu " target ="_self "> spatNavSearch</ a >
85- < a href ="#navigate " class ="submenu " target ="_self "> navigate</ a >
86- < a href ="#demo " target ="_self "> Web Applications</ a >
87- < a href ="#wpt " target ="_self "> WPT test Case</ a >
82+ < div class ="menu ">
83+ < a href ="#intro " target ="_self "> Introduction</ a >
84+ < a href ="#processing-model " target ="_self "> Processing model</ a >
85+ < a href ="#default-focus-moving " class ="submenu " target ="_self "> Default focus moving</ a >
86+ < a href ="#overflow-regions " class ="submenu " target ="_self "> Overflow regions</ a >
87+ < a href ="#scrollable-region " class ="submenu " target ="_self "> Scrollable region</ a >
88+ < a href ="#iframe-element " class ="submenu " target ="_self "> <iframe> element</ a >
89+ < a href ="#input-elements " class ="submenu " target ="_self "> <input> elements</ a >
90+ < a href ="#spatnav-container " class ="submenu " target ="_self "> Spatnav container</ a >
91+ < a href ="#api " target ="_self "> API Function</ a >
92+ < a href ="#getSpatnavContainer " class ="submenu " target ="_self "> getSpatnavContainer</ a >
93+ < a href ="#focusableAreas " class ="submenu " target ="_self "> focusableAreas</ a >
94+ < a href ="#spatNavSearch " class ="submenu " target ="_self "> spatNavSearch</ a >
95+ < a href ="#navigate " class ="submenu " target ="_self "> navigate</ a >
96+ < a href ="#demo " target ="_self "> Web applications</ a >
97+ < div >
8898 </ nav >
8999 < main >
90100 < div class ="basic-padding ">
@@ -93,66 +103,62 @@ <h1 class="basic-padding">Spatial Navigation Laboratory</h1>
93103 < p > Submit bug reports, requests and comments on < a href ="https://github.com/WICG/spatial-navigation/issues " title ="github issues "> github issues</ a > .</ p >
94104
95105 < div class ="card-view gold ">
96- < h2 tabIndex ="0 " id ="intro "> 1. Why Spatial Navigation ?</ h2 >
106+ < h2 tabIndex ="0 " id ="intro "> 1. Why spatial navigation ?</ h2 >
97107 < a href ="https://github.com/WICG/spatial-navigation/blob/master/README.md " title ="why spatial navigation "> Introduction of spatial navigation</ a >
98108 </ div >
99109
100110 < div class ="card-view ">
101- < h2 tabIndex ="0 " id ="processing-model "> 2. Processing Model </ h2 >
111+ < h2 tabIndex ="0 " id ="processing-model "> 2. Processing model < a href =" https://wicg.github.io/spatial-navigation/#processing-model " target =" _blank " > < img src =" link.png " width =" 20px " /> </ a > </ h2 >
102112 < h3 id ="default-focus-moving "> * Default focus moving behavior</ h3 >
103113 < p class ="iframe-description "> </ p >
104114 < iframe src ="sample/heuristic_default_move.html "> </ iframe >
105115
106- < h3 id ="overflow-regions "> * Various Overflow Regions </ h3 >
116+ < h3 id ="overflow-regions "> * Various overflow regions </ h3 >
107117 < p class ="iframe-description "> </ p >
108118 < iframe src ="sample/heuristic_overflow_regions.html "> </ iframe >
109119
110120 < h3 id ="scrollable-region "> * Scrollable region</ h3 >
111121 < p class ="iframe-description "> </ p >
112122 < iframe src ="sample/heuristic_scrollable.html "> </ iframe >
113123
114- < h3 id ="iframe-element "> * <iframe> Element </ h3 >
124+ < h3 id ="iframe-element "> * <iframe> element </ h3 >
115125 < p class ="iframe-description "> </ p >
116126 < iframe src ="sample/heuristic_iframe.html "> </ iframe >
117127
118- < h3 id ="input-elements "> * <input> Elements </ h3 >
128+ < h3 id ="input-elements "> * <input> elements </ h3 >
119129 < p class ="iframe-description "> </ p >
120130 < iframe src ="sample/heuristic_input_elements.html "> </ iframe >
121131
122- < h3 id ="spatnav-container "> * Spatial Navigation Container </ h3 >
132+ < h3 id ="spatnav-container "> * Spatial navigation container </ h3 >
123133 < p class ="iframe-description "> </ p >
124134 < iframe src ="sample/api_spatnav_contain.html "> </ iframe >
125135 </ div >
126136
127137 < div class ="card-view ">
128138 < h2 tabIndex ="0 " id ="api "> 3. API</ h2 >
129- < h3 id ="getSpatnavContainer "> * getSpatnavContainer()</ h3 >
139+ < h3 id ="getSpatnavContainer "> * getSpatnavContainer() < a href =" https://wicg.github.io/spatial-navigation/#dom-element-getspatnavcontainer " target =" _blank " > < img src =" link.png " width =" 20px " /> </ a > </ h3 >
130140 < p class ="iframe-description "> </ p >
131141 < iframe src ="sample/api_getSpatnavContainer.html "> </ iframe >
132142
133- < h3 id ="focusableAreas "> * focusableAreas(optional FocusableAreasOptions) </ h3 >
143+ < h3 id ="focusableAreas "> * focusableAreas(optional focusableAreasOptions) < a href =" https://wicg.github.io/spatial-navigation/#dom-element-focusableareas " target =" _blank " > < img src =" link.png " width =" 20px " /> </ a > </ h3 >
134144 < p class ="iframe-description "> </ p >
135145 < iframe src ="sample/api_focusableAreas.html "> </ iframe >
136146
137- < h3 id ="spatNavSearch "> * spatNavSearch(arg)</ h3 >
147+ < h3 id ="spatNavSearch "> * spatNavSearch(arg) < a href =" https://wicg.github.io/spatial-navigation/#dom-element-spatnavsearch " target =" _blank " > < img src =" link.png " width =" 20px " /> </ a > </ h3 >
138148 < p class ="iframe-description "> </ p >
139149 < iframe class ="api-sample " src ="sample/api_spatNavSearch.html "> </ iframe >
140150
141- < h3 id ="navigate "> * navigate(dir)</ h3 >
151+ < h3 id ="navigate "> * navigate(dir) < a href =" https://wicg.github.io/spatial-navigation/#dom-window-navigate " target =" _blank " > < img src =" link.png " width =" 20px " /> </ a > </ h3 >
142152 < p class ="iframe-description "> </ p >
143153 < iframe class ="api-sample " src ="sample/api_navigate.html "> </ iframe >
144154 </ div >
145155
146156 < div class ="card-view ">
147- < h2 tabIndex ="0 " id ="demo "> 4. Web Applications Demo </ h2 >
148- < h3 id =" navigate " > < a href ="blog/index.html " > * Blog App </ a > </ h3 >
149- < h3 id =" navigate " > < a href ="calendar/index.html " > * Calender App </ a > </ h3 >
157+ < h2 tabIndex ="0 " id ="demo "> 4. Web applications demo </ h2 >
158+ < a href =" blog/index.html " class =" demo-thumbnail " style =" margin-right: 30px; " > < img src ="blog/thumbnail.png " width =" 380px " /> < br > * Blog app </ a >
159+ < a href =" calendar/index.html " class =" demo-thumbnail " > < img src ="calendar/thumbnail.png " width =" 380px " /> < br > * Calender app </ a >
150160 </ div >
151161
152- < div class ="card-view ">
153- < h2 tabIndex ="0 " id ="wpt "> 5.WPT test Case</ h2 >
154- < h3 id ="navigate "> < a class ="inline_link " href =""> * wpt test case</ a > </ h3 >
155- </ div >
156162 </ div >
157163 </ main >
158164 </ div >
0 commit comments