src/widgets/autodividers/test/test-autodividers.html

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5     <meta name="viewport" content="width=device-width, initial-scale=1">
   6
   7     <title>Baseline test</title>
   8
   9     <script src="../../../../build/tizen-web-ui-fw/0.1/js/jquery.js"></script>
  10     <script src="../../../../build/tizen-web-ui-fw/0.1/js/tizen-web-ui-fw-libs.js"></script>
  11
  12     <link rel="stylesheet" href="../../../../build/tizen-web-ui-fw/0.1/themes/default/tizen-web-ui-fw-theme.css"/>
  13
  14     <script src="../js/autodividers.js"></script>
  15 </head>
  16
  17 <body>
  18
  19 <div data-role="page" id="baseline">
  20     <div data-role="header">
  21         <h1>autodividers tests</h1>
  22     </div>
  23
  24     <div data-role="content">
  25         <p>This should get auto-dividers based on link text.</p>
  26         <ul id="link-text-dividers" data-role="listview" data-autodividers="alpha">
  27             <li><a href="#">Amy</a></li>
  28             <li><a href="#">Andrew</a></li>
  29             <li><a href="#">Astrid</a></li>
  30             <li><a href="#">Bertie</a></li>
  31             <li><a href="#">Carrie</a></li>
  32             <li><a href="#">Derek</a></li>
  33             <li><a href="#">Ian</a></li>
  34             <li><a href="#">Matthew</a></li>
  35         </ul>
  36     </div>
  37
  38     <div data-role="content">
  39         <p>This should get auto-dividers based on link text but
  40         shouldn't produce duplicate dividers on refresh. Should also
  41         add more dividers if new list elements are added.</p>
  42
  43         <p>
  44             <button id="refresh-dividers-button" data-inline="true">Refresh</button>
  45             <button id="add-gary-button" data-inline="true">Add Gary and refresh</button>
  46             <button id="remove-bertie-button" data-inline="true">Remove Bertie and refresh</button>
  47         </p>
  48
  49         <ul id="refreshable-dividers" data-role="listview" data-autodividers="alpha">
  50             <li><a href="#">Amy</a></li>
  51             <li><a href="#">Andrew</a></li>
  52             <li><a href="#">Astrid</a></li>
  53             <li><a href="#">Bertie</a></li>
  54             <li><a href="#">Carrie</a></li>
  55             <li><a href="#">Derek</a></li>
  56             <li><a href="#">Ian</a></li>
  57             <li><a href="#">Matthew</a></li>
  58         </ul>
  59     </div>
  60
  61     <div data-role="content">
  62         <p>This uses a custom selector to draw text from formatted list
  63         items.</p>
  64
  65         <ul data-role="listview" data-autodividers="alpha" data-autodividers-selector="span">
  66             <li><span>Anne</span> likes to eat sweets</li>
  67             <li><span>Beth</span> likes to eat treats</li>
  68             <li><span>Bill</span> likes to eat meats</li>
  69             <li><span>Carl</span> likes to eat beets</li>
  70         </ul>
  71     </div>
  72
  73     <div data-role="content">
  74         <p>This should get auto-dividers based on text. NB this has
  75         intentionally blank li elements to check they don't get dividers.</p>
  76         <ul id="text-dividers" data-role="listview" data-autodividers="alpha">
  77             <li>Barry</li>
  78             <li>Betty</li>
  79             <li>Carrie</li>
  80             <li>Harry</li>
  81             <li></li>
  82             <li>Hetty</li>
  83             <li>Kitty</li>
  84             <li>Larry</li>
  85             <li></li>
  86             <li>Laurie</li>
  87             <li>Mary</li>
  88         </ul>
  89     </div>
  90
  91     <div data-role="content">
  92         <p>Non-sorted list will produce duplicate auto-dividers.</p>
  93         <ul id="non-sorted" data-role="listview" data-autodividers="alpha">
  94             <li>Barry</li>
  95             <li>Carrie</li>
  96             <li>Betty</li>
  97             <li>Harry</li>
  98             <li>Carly</li>
  99             <li>Hetty</li>
 100         </ul>
 101     </div>
 102
 103     <div data-role="content">
 104         <p>This had dividers already which were replaced.</p>
 105         <ul id="has-dividers" data-role="listview" data-autodividers="alpha">
 106             <li data-role="list-divider">Any old iron</li>
 107             <li><a href="#">Amy</a></li>
 108             <li><a href="#">Andrew</a></li>
 109             <li><a href="#">Astrid</a></li>
 110             <li data-role="list-divider">Barnacles</li>
 111             <li><a href="#">Bertie</a></li>
 112             <li data-role="list-divider">Crop circle</li>
 113             <li><a href="#">Carrie</a></li>
 114             <li data-role="list-divider">Dog</li>
 115             <li><a href="#">Derek</a></li>
 116             <li data-role="list-divider">Igloos</li>
 117             <li><a href="#">Ian</a></li>
 118             <li data-role="list-divider">Massive clouds</li>
 119             <li><a href="#">Matthew</a></li>
 120         </ul>
 121     </div>
 122
 123 </div>
 124
 125 <script>
 126 $(document).bind('pagecreate', function () {
 127     $('#refresh-dividers-button').bind('click', function () {
 128         $('#refreshable-dividers').autodividers('refresh');
 129     });
 130
 131     $('#add-gary-button').bind('click', function () {
 132         var gary = $('<li><a href="#">Gary</a></li>');
 133         $('#refreshable-dividers').find('li:contains("Ian")').before(gary);
 134     });
 135
 136     $('#remove-bertie-button').bind('click', function () {
 137         $('#refreshable-dividers').find('li:contains("Bertie")').remove();
 138     });
 139
 140     $('#refreshable-dividers').bind('update', function () {
 141         console.log('dividers were updated on refreshable list');
 142     });
 143 });
 144 </script>
 145
 146 </body>
 147 </html>