src/cobalt/demos/content/hybrid-navigation/hybrid-navigation-grid.html - cobalt - Git at Google

 <!DOCTYPE html>
 <!--
  | Hybrid navigation (SbUiNavigation) demo web page.
  |
  | This demonstrates basic use of focus items and scroll containers. On
  | platforms which implement SbUiNavGetInterface, the user can change focus
  | with a platform-appropriate input device.
  |
  | HTMLElements using "overflow: auto" or "overflow: scroll" are treated as
  | scroll containers.
  |
  | HTMLElements with "tabindex" <= -2 are treated as focus items.
  |
  | "-cobalt-ui-nav-focus-transform()" is a Cobalt-specific transform function
  | for hybrid navigation which tracks interaction with the navigation item when
  | it is focused. This function queries the closest hybrid navigation focus item
  | (i.e. this element or an ancestor element with tabindex set appropriately).
  | If that navigation item does not have focus, or the system does not provide
  | interaction animations, then this transform function will evaluate to
  | identity. If no ancestor is a hybrid navigation focus item, then the
  | currently-focused item (which may be in a different subtree) is used.
  |
  | "-cobalt-ui-nav-spotlight-transform()" is a Cobalt-specific transform
  | function for hybrid navigation which tracks the direction in which focus is
  | moving. This can be used to provide feedback about user input that is too
  | small to result in a focus change. The transform function queries the closest
  | hybrid navigation focus item (i.e. this element or an ancestor element with
  | tabindex set appropriately). If the closest hybrid navigation focus item does
  | not have focus, or the platform does not provide focus movement information,
  | then this transform function will evaluate to the zero scale. Otherwise the
  | transform will evaluate to a translation ranging from -50% to +50% in the X
  | and Y directions. If no ancestor is a hybrid navigation focus item, then the
  | currently-focused item (which may be in a different subtree) is queried.
  -->
 <html>
   <head>
     <style>
       body {
         background-color: rgb(25,25,25);
         color: rgb(200,200,200);
         width: 1280px;
         height: 720px;
       }

       .vscroll {
         overflow: auto;
         position: absolute;
         transform: translate(100px,100px);
         background-color: rgb(50,50,50);
         width: 1080px;
         height: 520px;
       }

       .hscroll {
         overflow: auto;
         position: relative;
         background-color: rgb(75, 75, 75);
         /*
          * Leave a slight margin on the right for vscroll's scrollbar (only
          * needed for non-Cobalt browsers). Cobalt does not show scrollbars,
          * so this can be the same width as vscroll.
          */
         width: 1060px;
         /*
          * Also make the height big enough to show a horizontal scrollbar
          * (for non-Cobalt browsers) in addition to the contents.
          */
         height: 320px;
       }

       /*
        * focusItem is used as the actual focusable item. Its dimensions are
        * static so that the underlying SbUiNavigation system knows how much to
        * scroll to ensure it is fully visible. The scroll animation is usually
        * calculated to bring the to-be-focused item into view, but if that item
        * is resized after the animation starts, then the animation may no
        * longer end with the larger item in full view.
        */
       .focusItem {
         overflow: hidden;
         position: absolute;
         width: 300px;
         height: 300px;
         outline: none;
       }

       /*
        * focusContent will react to focus changes. Its size will grow when
        * its parent receives focus.
        */
       .focusContent {
         overflow: hidden;
         margin: 20px;
         border: 5px solid rgb(0,0,0);
         width: 250px;
         height: 250px;
         line-height: 250px;
         text-align: center;
         vertical-align: middle;
         font-size: 100px;

         /*
          * The user may be scrolling through items quickly. Use a transition
          * delay so that the transition is shown once the user settles on a
          * focus item.
          */
         transition: transform 0.5s;
         transition-delay: 0.1s;
       }

       /*
        * Update focusContent when the parent is focused.
        */
       .focusItem:focus .focusContent {
         background-color: rgb(240,240,240);
         color: rgb(0,0,0);
         transform: -cobalt-ui-nav-focus-transform() scale(1.1);
       }

       /*
        * Add a spotlight to focusContent when the parent is focused.
        */
       .focusItem:focus .focusContent::after {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: radial-gradient(rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 30%);
         transform: -cobalt-ui-nav-spotlight-transform();
       }
     </style>
   </head>

   <body class="body">
     <div class="vscroll">
       <div class="hscroll">
         <div id="start" class="focusItem" tabindex="-2" style="transform: translateX(0px)">
           <div class="focusContent">A0</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(300px)">
           <div class="focusContent">A1</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(600px)">
           <div class="focusContent">A2</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(900px)">
           <div class="focusContent">A3</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(1200px)">
           <div class="focusContent">A4</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(1500px)">
           <div class="focusContent">A5</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(1800px)">
           <div class="focusContent">A6</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(2100px)">
           <div class="focusContent">A7</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(2400px)">
           <div class="focusContent">A8</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(2700px)">
           <div class="focusContent">A9</div>
         </div>
       </div>
       <div class="hscroll">
         <div class="focusItem" tabindex="-2" style="transform: translateX(0px)">
           <div class="focusContent">B0</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(300px)">
           <div class="focusContent">B1</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(600px)">
           <div class="focusContent">B2</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(900px)">
           <div class="focusContent">B3</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(1200px)">
           <div class="focusContent">B4</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(1500px)">
           <div class="focusContent">B5</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(1800px)">
           <div class="focusContent">B6</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(2100px)">
           <div class="focusContent">B7</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(2400px)">
           <div class="focusContent">B8</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(2700px)">
           <div class="focusContent">B9</div>
         </div>
       </div>
       <div class="hscroll">
         <div class="focusItem" tabindex="-2" style="transform: translateX(0px)">
           <div class="focusContent">C0</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(300px)">
           <div class="focusContent">C1</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(600px)">
           <div class="focusContent">C2</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(900px)">
           <div class="focusContent">C3</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(1200px)">
           <div class="focusContent">C4</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(1500px)">
           <div class="focusContent">C5</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(1800px)">
           <div class="focusContent">C6</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(2100px)">
           <div class="focusContent">C7</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(2400px)">
           <div class="focusContent">C8</div>
         </div>
         <div class="focusItem" tabindex="-2" style="transform: translateX(2700px)">
           <div class="focusContent">C9</div>
         </div>
       </div>
     </div>
   </body>
   <script>
     window.onload = function() {
       document.getElementById("start").focus();
     }
   </script>
 </html>
	<!DOCTYPE html>
	<!--
	\| Hybrid navigation (SbUiNavigation) demo web page.
	\|
	\| This demonstrates basic use of focus items and scroll containers. On
	\| platforms which implement SbUiNavGetInterface, the user can change focus
	\| with a platform-appropriate input device.
	\|
	\| HTMLElements using "overflow: auto" or "overflow: scroll" are treated as
	\| scroll containers.
	\|
	\| HTMLElements with "tabindex" <= -2 are treated as focus items.
	\|
	\| "-cobalt-ui-nav-focus-transform()" is a Cobalt-specific transform function
	\| for hybrid navigation which tracks interaction with the navigation item when
	\| it is focused. This function queries the closest hybrid navigation focus item
	\| (i.e. this element or an ancestor element with tabindex set appropriately).
	\| If that navigation item does not have focus, or the system does not provide
	\| interaction animations, then this transform function will evaluate to
	\| identity. If no ancestor is a hybrid navigation focus item, then the
	\| currently-focused item (which may be in a different subtree) is used.
	\|
	\| "-cobalt-ui-nav-spotlight-transform()" is a Cobalt-specific transform
	\| function for hybrid navigation which tracks the direction in which focus is
	\| moving. This can be used to provide feedback about user input that is too
	\| small to result in a focus change. The transform function queries the closest
	\| hybrid navigation focus item (i.e. this element or an ancestor element with
	\| tabindex set appropriately). If the closest hybrid navigation focus item does
	\| not have focus, or the platform does not provide focus movement information,
	\| then this transform function will evaluate to the zero scale. Otherwise the
	\| transform will evaluate to a translation ranging from -50% to +50% in the X
	\| and Y directions. If no ancestor is a hybrid navigation focus item, then the
	\| currently-focused item (which may be in a different subtree) is queried.
	-->
	<html>
	<head>
	<style>
	body {
	background-color: rgb(25,25,25);
	color: rgb(200,200,200);
	width: 1280px;
	height: 720px;
	}

	.vscroll {
	overflow: auto;
	position: absolute;
	transform: translate(100px,100px);
	background-color: rgb(50,50,50);
	width: 1080px;
	height: 520px;
	}

	.hscroll {
	overflow: auto;
	position: relative;
	background-color: rgb(75, 75, 75);
	/*
	* Leave a slight margin on the right for vscroll's scrollbar (only
	* needed for non-Cobalt browsers). Cobalt does not show scrollbars,
	* so this can be the same width as vscroll.
	*/
	width: 1060px;
	/*
	* Also make the height big enough to show a horizontal scrollbar
	* (for non-Cobalt browsers) in addition to the contents.
	*/
	height: 320px;
	}

	/*
	* focusItem is used as the actual focusable item. Its dimensions are
	* static so that the underlying SbUiNavigation system knows how much to
	* scroll to ensure it is fully visible. The scroll animation is usually
	* calculated to bring the to-be-focused item into view, but if that item
	* is resized after the animation starts, then the animation may no
	* longer end with the larger item in full view.
	*/
	.focusItem {
	overflow: hidden;
	position: absolute;
	width: 300px;
	height: 300px;
	outline: none;
	}

	/*
	* focusContent will react to focus changes. Its size will grow when
	* its parent receives focus.
	*/
	.focusContent {
	overflow: hidden;
	margin: 20px;
	border: 5px solid rgb(0,0,0);
	width: 250px;
	height: 250px;
	line-height: 250px;
	text-align: center;
	vertical-align: middle;
	font-size: 100px;

	/*
	* The user may be scrolling through items quickly. Use a transition
	* delay so that the transition is shown once the user settles on a
	* focus item.
	*/
	transition: transform 0.5s;
	transition-delay: 0.1s;
	}

	/*
	* Update focusContent when the parent is focused.
	*/
	.focusItem:focus .focusContent {
	background-color: rgb(240,240,240);
	color: rgb(0,0,0);
	transform: -cobalt-ui-nav-focus-transform() scale(1.1);
	}

	/*
	* Add a spotlight to focusContent when the parent is focused.
	*/
	.focusItem:focus .focusContent::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: radial-gradient(rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 30%);
	transform: -cobalt-ui-nav-spotlight-transform();
	}
	</style>
	</head>

	<body class="body">
	<div class="vscroll">
	<div class="hscroll">
	<div id="start" class="focusItem" tabindex="-2" style="transform: translateX(0px)">
	<div class="focusContent">A0</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(300px)">
	<div class="focusContent">A1</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(600px)">
	<div class="focusContent">A2</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(900px)">
	<div class="focusContent">A3</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(1200px)">
	<div class="focusContent">A4</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(1500px)">
	<div class="focusContent">A5</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(1800px)">
	<div class="focusContent">A6</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(2100px)">
	<div class="focusContent">A7</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(2400px)">
	<div class="focusContent">A8</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(2700px)">
	<div class="focusContent">A9</div>
	</div>
	</div>
	<div class="hscroll">
	<div class="focusItem" tabindex="-2" style="transform: translateX(0px)">
	<div class="focusContent">B0</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(300px)">
	<div class="focusContent">B1</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(600px)">
	<div class="focusContent">B2</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(900px)">
	<div class="focusContent">B3</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(1200px)">
	<div class="focusContent">B4</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(1500px)">
	<div class="focusContent">B5</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(1800px)">
	<div class="focusContent">B6</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(2100px)">
	<div class="focusContent">B7</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(2400px)">
	<div class="focusContent">B8</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(2700px)">
	<div class="focusContent">B9</div>
	</div>
	</div>
	<div class="hscroll">
	<div class="focusItem" tabindex="-2" style="transform: translateX(0px)">
	<div class="focusContent">C0</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(300px)">
	<div class="focusContent">C1</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(600px)">
	<div class="focusContent">C2</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(900px)">
	<div class="focusContent">C3</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(1200px)">
	<div class="focusContent">C4</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(1500px)">
	<div class="focusContent">C5</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(1800px)">
	<div class="focusContent">C6</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(2100px)">
	<div class="focusContent">C7</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(2400px)">
	<div class="focusContent">C8</div>
	</div>
	<div class="focusItem" tabindex="-2" style="transform: translateX(2700px)">
	<div class="focusContent">C9</div>
	</div>
	</div>
	</div>
	</body>
	<script>
	window.onload = function() {
	document.getElementById("start").focus();
	}
	</script>
	</html>