slider.html

   1 <?xml version="1.0" encoding="UTF-8" ?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   4 <head>
   5     <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   6     <link rel="stylesheet" href="style/pixelless.css" type="text/css" />
   7     <script type="text/javascript" src="../script/canvas.js" ></script>
   8     <title>Slider</title>
   9     <style type="text/css">
  10
  11     </style>
  12 </head>
  13 <body>
  14     <div id="container">
  15         <div class="content header">
  16             <h1>Slider</h1>
  17         </div>
  18         <div class="content">
  19             <div id="slider">50 of 0 to 100</div>
  20             <div class="empty_footer">
  21             </div>
  22         </div>
  23     </div>
  24     <div id="footer">
  25         <div class="content">
  26             &copy; 2010 Vynogradov
  27         </div>
  28     </div>
  29     <script type="text/javascript" language="JavaScript">
  30         var sliderElt = document.getElementById('slider');
  31         var slider = new Slider(sliderElt);
  32
  33         function Slider(slider) {
  34             function parseValue(str)
  35             {
  36                 var [val, res] = str.split(' of ');
  37                 var [min, max] = res.split(' to ');
  38                 return [parseInt(min, 10), parseInt(max, 10), parseInt(val, 10)];
  39             }
  40
  41             var w = parseInt(slider.clientWidth, 10);
  42             var h = parseInt(slider.clientHeight, 10) * 2;
  43             var v = slider.innerHTML;
  44             var [min, max, val] = parseValue(v);
  45
  46             var can = document.createElement('canvas')
  47             can.setAttribute('width', w + 'px');
  48             can.setAttribute('height', h + 'px');
  49             slider.parentNode.replaceChild(can, slider);
  50
  51             var ctx = can.getContext('2d');
  52             var color = '#0493e1';
  53             var color2 = 'rgba(0, 0, 0, .4)';
  54             var pad = 4;
  55             var thick = 3;
  56
  57             function draw() {
  58                 var end = (w - pad*2) * val / (max - min);
  59                 var hei = Math.floor((h-thick)/2);
  60
  61
  62                 ctx.fillStyle = color2;
  63                 ctx.fillRect(pad, hei, w-pad*2, thick);
  64                 ctx.fillStyle = color;
  65                 ctx.fillRect(pad, hei, end, thick);
  66                 ctx.fillRect(end + pad - pad/2, hei - 5, pad, 4);
  67                 ctx.fillRect(end + pad - pad/2, hei + 4, pad, 4);
  68                 ctx.fillStyle = 'rgba(255, 255, 255, .4444)';
  69                 ctx.fillRect(end + pad - pad/2, hei - 1, pad, 5);
  70             }
  71
  72             this.__defineGetter__('value', function(){
  73                 return val;
  74             });
  75
  76             this.__defineSetter__('value', function(value){
  77                 if(value >= min && value <= max)    {
  78                     val = value;
  79                     draw();
  80                 }
  81             })
  82
  83             draw();
  84         }
  85     </script>
  86 </body>
  87 </html>