Make samples keyboard accessible

Close#169

docs/_css/samples.less

@@ -153,6 +153,15 @@ label.fieldlabel {
     display: inline-block;
 }
 
+.noTextSelection {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
 /* ************************************ */
 /* Clock sample */
 

docs/samples/clickhandler/clickhandler.hsp

@@ -1,7 +1,7 @@
 var msg={text:""}, count=-1;
 
 {template message(msg)}
-    <div title="click me!" onclick="{changeMessage()}" onselectstart="return false">
+    <div title="click me!" onclick="{changeMessage()}" class="noTextSelection">
         {if msg.isWarning}<div class="warning">WARNING:&nbsp;</div>{/if}
         {msg.text}
     </div>

docs/samples/component3/pagination.hsp

@@ -46,15 +46,15 @@ var Pagination=klass({
 {template pagination using p:Pagination}
     <ul class="pagination">
         <li class="{'disabled':p.activepage===0}">
-            <a onclick="{p.selectPage(p.activepage-1)}">Previous</a>
+            <a href="javascript:void(0)" onclick="{p.selectPage(p.activepage-1)}">Previous</a>
         </li>
         {foreach page in p.pages}
             <li class="{'active':page==p.activepage}">
-                <a onclick="{p.selectPage(page)}">{page + 1}</a>
+                <a href="javascript:void(0)" onclick="{p.selectPage(page)}">{page + 1}</a>
             </li>
         {/foreach}
         <li class="{'disabled':p.activepage>=p.noOfPages-1}">
-            <a onclick="{p.selectPage(p.activepage+1)}">Next</a>
+            <a href="javascript:void(0)" onclick="{p.selectPage(p.activepage+1)}">Next</a>
         </li>
     </ul>
 {/template}

docs/samples/conditions/conditions.hsp

@@ -2,24 +2,24 @@ var klass=require("hsp/klass");
 
 // nt is an instance of NumberTester
 {template test(nt)}
-	<div>
-		Number: <span class="textvalue">{nt.number}</span> &nbsp;
-	    {if nt.number==0}
-	    	(Number equals zero)
-	    {else if nt.number>0}
-	    	(Number is greater than zero)
-	    {else}
-	    	(Number is less than zero)
-	    {/if}
-	    <br/>
-	    Condition using ternary operator: Number is
-	    <span class="textvalue">
-	    	{nt.number>0? "strictly positive" : "negative or null"}
-    	</span>
-	</div>
+    <div>
+        Number: <span class="textvalue">{nt.number}</span>
+        {if nt.number==0}
+            (Number equals zero)
+        {else if nt.number>0}
+            (Number is greater than zero)
+        {else}
+            (Number is less than zero)
+        {/if}
+        <br/>
+        Condition using ternary operator: Number is
+        <span class="textvalue">
+            {nt.number>0? "strictly positive" : "negative or null"}
+        </span>
+    </div>
     <div class="section2">
-	    <a onclick="{nt.increment(1)}">Increment Number</a> -
-	    <a onclick="{nt.increment(-1)}">Decrement Number</a>
+        <a href="javascript:void(0)" onclick="{nt.increment(1)}">Increment Number</a> -
+        <a href="javascript:void(0)" onclick="{nt.increment(-1)}">Decrement Number</a>
     </div>
 {/template}
 

docs/samples/cssclass/cssclass.hsp

@@ -1,9 +1,9 @@
 {template message(msg)}
     // onselectstart: prevent double-click selection on a elements
     <div onselectstart="return false">
-        <a onclick="{toggleUrgency()}">Change Urgency</a> -
-        <a onclick="{setCategory('personal')}">Set "Personal"</a> -
-        <a onclick="{setCategory('professional')}">Set "Professional"</a>
+        <a href="javascript:void(0)" onclick="{toggleUrgency()}">Change Urgency</a> -
+        <a href="javascript:void(0)" onclick="{setCategory('personal')}">Set "Personal"</a> -
+        <a href="javascript:void(0)" onclick="{setCategory('professional')}">Set "Professional"</a>
         <div class="{'msg', 'urgent':msg.urgency, msg.category}">
             Message: {msg.text}
         </div>

docs/samples/dynpath/dynpath.hsp

@@ -13,9 +13,9 @@
             </div>
         {/foreach}
     </div>
-    <a onclick="{update()}">Update columns B&C</a>
+    <a href="javascript:void(0)" onclick="{update()}">Update columns B&C</a>
     &nbsp;-&nbsp;
-    <a onclick="{swapC()}">Show/Hide columns C</a>
+    <a href="javascript:void(0)" onclick="{swapC()}">Show/Hide columns C</a>
 {/template}
 
 // create dummy data

docs/samples/dyntemplates/dyntemplates.hsp

@@ -1,5 +1,5 @@
 {template test(ctxt)}
-  <div><a onclick="{swapTemplate()}">Change template</a></div>
+  <div><a href="javascript:void(0)" onclick="{swapTemplate()}">Change template</a></div>
   <#ctxt.view ctxt="{ctxt}"/>
 {/template}
 

docs/samples/let/let.hsp

@@ -10,7 +10,7 @@
       p11 is of course not visible in the 2nd element scope
     {/if}
   </div>
-  <a onclick="{updateModel()}">Change Model</a>
+  <a href="javascript:void(0)" onclick="{updateModel()}">Change Model</a>
 {/template}
 
 var model={

docs/samples/list1/list.hsp

@@ -23,7 +23,7 @@ var ListController = klass({
     {if !lc.content}
         <span class="nodata">Empty list</span>
     {else}
-        <ul class="">
+        <ul class="noTextSelection">
             {foreach idx,itm in lc.content}
                 {if itm.tagName==="@option"}
                     <li class="opt"><#itm/></li>
@@ -46,9 +46,9 @@ var ListController = klass({
   <#list class="listcpt">
     <@head>
       Dynamic list:
-      <a onclick="{toggle()}">Toggle favourite</a> -
-      <a onclick="{empty()}">Empty</a> -
-      <a onclick="{update()}">Update list</a>
+      <a href="javascript:void(0)" onclick="{toggle()}">Toggle favourite</a> -
+      <a href="javascript:void(0)" onclick="{empty()}">Empty</a> -
+      <a href="javascript:void(0)" onclick="{update()}">Update list</a>
     </@head>
     {if d.preferredOption}
       <@option>{d.preferredOption} (!)</@option>

docs/samples/list2/list.hsp

@@ -45,7 +45,7 @@ var ListCtrl = klass({
     {if !lc.content}
       <span class="nodata">Empty list</span>
     {else}
-      <ul class="">
+      <ul class="noTextSelection">
         {foreach idx,itm in lc.content}
           {if itm.tagName==="@option"}
             <li class="opt" onclick="{lc.select(itm.value)}">
@@ -72,8 +72,8 @@ var ListCtrl = klass({
   <#list class="listcpt" onselect="{showSelection(event.value)}">
     <@head>
       Dynamic list:
-      <a onclick="{empty()}">Empty</a> -
-      <a onclick="{update()}">Update list</a>
+      <a href="javascript:void(0)" onclick="{empty()}">Empty</a> -
+      <a href="javascript:void(0)" onclick="{update()}">Update list</a>
     </@head>
     {foreach idx,itm in d.items}
       <@option value="K{idx}">{idx+1}. {itm}</@option>

docs/samples/listupdate/list.hsp

@@ -1,14 +1,13 @@
 {template list(persons)}
-    // onselectstart: prevents double-click selection on elements
-    <div onselectstart="return false">
+    <div> 
         <div class="msg">
-        	<a onclick="{addElement()}">Add element</a> -
-        	<a onclick="{deleteElement()}">Delete element</a> -
-        	<a onclick="{changeAll()}">Change all elements</a>
+            <a href="javascript:void(0)" onclick="{addElement()}">Add element</a> -
+            <a href="javascript:void(0)" onclick="{deleteElement()}">Delete element</a> -
+            <a href="javascript:void(0)" onclick="{changeAll()}">Change all elements</a>
         </div>
         <ol>
             {foreach p in persons}
-            	<li>
+                <li>
                     {p.firstName} {p.lastName}
                     {if p_isfirst}<span class="info">(first)</span>{/if}
                     {if p_islast}<span class="info">(last)</span>{/if}
@@ -22,35 +21,35 @@
 {/template}
 
 var persons=[
-	{firstName:"Homer",lastName:"Simpsons"},
-	{firstName:"Marge",lastName:"Simpsons"},
-	{firstName:"Bart"},
-	{firstName:"Lisa"},
-	{firstName:"Maggy"}
+    {firstName:"Homer",lastName:"Simpsons"},
+    {firstName:"Marge",lastName:"Simpsons"},
+    {firstName:"Bart"},
+    {firstName:"Lisa"},
+    {firstName:"Maggy"}
 ]
 
 var count=0;
 
 function addElement() {
-	count++;
-	// add one element without removing any at position 1
+    count++;
+    // add one element without removing any at position 1
     persons.splice(1,0,{firstName:"John",lastName:'Doe'+count});
 }
 
 function deleteElement() {
-	// remove one element at position 0
+    // remove one element at position 0
     persons.shift(); // same as persons.splice(0,1);
 }
 
 function changeAll() {
-	// replace all elements (from 0 to persons.length-1) with the array provided as last argument
-	persons.splice2(0,persons.length,[
-		{firstName:"Charlie", lastName:"Parker"},
-		{firstName:"Sonny", lastName:"Stitt"},
-		{firstName:"Cannonball", lastName:"Adderley"},
-		{firstName:"Stefano", lastName:"Di Battista"},
-		{firstName:"Kenny", lastName:"Garrett"}
-	]);
+    // replace all elements (from 0 to persons.length-1) with the array provided as last argument
+    persons.splice2(0,persons.length,[
+        {firstName:"Charlie", lastName:"Parker"},
+        {firstName:"Sonny", lastName:"Stitt"},
+        {firstName:"Cannonball", lastName:"Adderley"},
+        {firstName:"Stefano", lastName:"Di Battista"},
+        {firstName:"Kenny", lastName:"Garrett"}
+    ]);
 }
 
 

docs/samples/logs/logs.hsp

@@ -2,9 +2,9 @@ var log=require("hsp/rt/log");
 
 {template test(cities, logs)}
   {log "top-level:",scope}
-  <a onclick="{increaseList()}">Increase list</a> -
-  <a onclick="{decreaseList()}">Decrease list</a> -
-  <a onclick="{clearLogs()}">Clear logs</a>
+  <a href="javascript:void(0)" onclick="{increaseList()}">Increase list</a> -
+  <a href="javascript:void(0)" onclick="{decreaseList()}">Decrease list</a> -
+  <a href="javascript:void(0)" onclick="{clearLogs()}">Clear logs</a>
   <ul>
     {foreach idx,city in cities}
       {log "item #"+idx+":", city}

docs/samples/panel/panel.hsp

@@ -23,12 +23,12 @@ var PanelController = klass({
   <#panel body="Panel A (headless): {m.text}"/>
 
   <#panel head="Panel B ({m.text}!)">
-    {m.text}! <a onclick="{update(1)}">Update model</a>
+    {m.text}! <a href="javascript:void(0)" onclick="{update(1)}">Update model</a>
   </#panel>
 
   <#panel>
-    <@head>Panel C: <a onclick="{update(10)}">Update model</a></@head>
-    <@body>{m.text}! <a onclick="{update(100)}">Update model</a></@body>
+    <@head>Panel C: <a href="javascript:void(0)" onclick="{update(10)}">Update model</a></@head>
+    <@body>{m.text}! <a href="javascript:void(0)" onclick="{update(100)}">Update model</a></@body>
   </#panel>
 {/template}
 

docs/samples/simplelist/simplelist.hsp

@@ -1,6 +1,6 @@
 {template people(d)}
     <div class="msg">Click on a person to see more details:</div>
-    <ul>
+    <ul class="noTextSelection">
     {foreach p in d.people}
         <li class="{'details':p.showdetails, 'special':p.name==='Bart'}"
             onclick="{toggleDetails(p)}">

docs/samples/tabbar/tabbar.hsp

@@ -52,7 +52,7 @@ var TabBarCtrl = klass({
                     <#tab.label/>
                 </span>
             {else}
-                <a class="x-tab" onclick="{ctrl.select(idx)}">
+                <a class="x-tab" href="javascript:void(0)" onclick="{ctrl.select(idx)}">
                     <#tab.label/>
                 </a>
             {/if}

docs/samples/textarea/textarea.hsp

@@ -8,7 +8,7 @@
         <div>Text #2:</div>
         <textarea rows="4" cols="40"  model="{data.text}"/>
     </div>
-    <a onclick="{changeText(data)}">Change text</a>
+    <a href="javascript:void(0)" onclick="{changeText(data)}">Change text</a>
 {/template}
 
 var d={