2009/dap/docs/battery-status battery-status.html,NONE,1.1 battery-status.css,NONE,1.1 battery-status.js,NONE,1.1

Update of /sources/public/2009/dap/docs/battery-status
In directory hutz:/tmp/cvs-serv11441

Added Files:
	battery-status.html battery-status.css battery-status.js 
Log Message:
Battery Status Events Playground

--- NEW FILE: battery-status.js ---
window.onload = function () {
  if (!isInputTypeRangeSupported()) {
    $('warning').innerHTML =
      'Your browser does not support <input type="range">, ' +
      'which means this demo will be crippled.';
    $('warning').style.display = 'block';
  }
  onIsPluggedChange(false);
};

var _BATTERYLOW_THRESHOLD = 20,
    _BATTERYCRITICAL_THRESHOLD = 10,
    _BATTERY_CHARGING_INTERVAL = 1000,
    _BATTERY_DEPLETING_INTERVAL = 500;

function BatteryStatusEventSource() {
  // _battery is a singleton
  if (typeof _battery === 'undefined') {
    _battery = this;
  }
  return _battery;
}

BatteryStatusEventSource.prototype = {
  // should isPlugged be nullable or should the default be true?
  e: { type: '', isPlugged: true, level: null, status: null },
  onbatterystatus: null,
  onbatterylow: null,
  onbatterycritical: null,
  onbatteryok: null,
  // we cheat a bit and do not implement event capture
  addEventListener: function (type, listener, capture) {
    if (listener === null) {
        return;
    }
    _battery['on' + type] = function () { listener(_battery.e); };
  },
  removeEventListener: function (type, listener, capture) {
    _battery['on' + type] = null;
  }
};

//---------------------------------------------------------------------------//

function fire(status) {
  _battery.e.type = 'battery' + status;
  
  if (status !== 'ok' && status === _battery.e.status) {
    return;
  }
  
  if (status === 'low' || status === 'critical' || status === 'ok') {
    _battery.e.status = status;
  }
  
  try {
    _battery['onbattery' + status](_battery.e);
  } catch (ex) {
    console.log('onbattery' + status + ' event handler is null');
  }
}

function onLevelChange(level) {
  _battery.e.level = level; 
  $('levelmeter').innerHTML = level;
  
  if (!_battery.e.isPlugged) {
    if (level < _BATTERYCRITICAL_THRESHOLD) {
      fire('critical');
    } else if (level < _BATTERYLOW_THRESHOLD) {
      fire('low');
    }
  }
  fire('status');
}

function onIsPluggedChange(isPlugged) {
  _battery.e.isPlugged = isPlugged;
  
  if (isPlugged) {
    // simulate charging
    fire('ok');

    _battery_charging = setInterval(function () {
      if (typeof _battery_depleting !== 'undefined') {
        clearTimeout(_battery_depleting);
      }
      
      var level = $('level');
      try {
        level.stepUp(1);
      } catch (ex) { }
      onLevelChange(level.value);
    }, _BATTERY_CHARGING_INTERVAL);
  } else {
    // simulate depleting
    if (typeof _battery_charging !== 'undefined') {
      clearTimeout(_battery_charging);
    }
    
    _battery_depleting = setInterval(function () {
      var level = $('level');
      try {
        level.stepDown(1);
      } catch (ex) { }
      onLevelChange(level.value);
    }, _BATTERY_DEPLETING_INTERVAL);
  }
  
  fire('status');
}

//---------------------------------------------------------------------------//

function $(id) {
  return document.getElementById(id);
}

function isInputTypeRangeSupported() {
  var i = document.createElement('input');
  i.setAttribute('type', 'range');
  return i.type !== 'text';
}
--- NEW FILE: battery-status.html ---
<!DOCTYPE html>
<html>
<head>
<title>Battery Status Events Playground</title>
<link href="battery-status.css" rel="stylesheet"/>
<script src="battery-status.js"></script>
<script>

// instantiate a new BatteryStatusEventSource object

var battery = new BatteryStatusEventSource();

// then use addEventListener() ...

battery.addEventListener('batterystatus', function (e) {
  log('status', e);
  blink('status', 'gray');
});

// ... or onbattery* event handlers

battery.onbatterylow = function (e) {
  log('low', e);
  blink('low', 'salmon');
};

battery.onbatterycritical = function (e) {
  log('critical', e);
  blink('critical', 'red');
};

battery.onbatteryok = function (e) {
  log('ok', e);
  blink('ok', 'green');
};

// for logging debug output to console.log

function log(type, e) {
  console.log('onbattery' + type + '(' + JSON.stringify(e) + ');');
}

// <blink> is back!

function blink(id, color) {
  $(id).style.backgroundColor = color;
  setTimeout(function() {
    $(id).style.backgroundColor = '';
  }, 300);
}

</script>
</head>
<body>
  <h1>Battery Status Events Playground</h1>
  <p id="warning"></p>
  <p>This demo implements the
    <a href="http://dev.w3.org/2009/dap/system-info/battery-status.html">
    Battery Status Events</a> specification and
    simulates battery-powered user agent behavior. You can adjust the battery
    level and whether the device is plugged in from the controls below.
    A blink of an event name indicates the event has been fired.
  </p>
  <div class="controls">
    <div class="blink">event:
      <span id="status">batterystatus</span>
      <span id="low">batterylow</span>
      <span id="critical">batterycritical</span>
      <span id="ok">batteryok</span>
    </div>
    <br>
    <div>level: <span id="levelmeter"></span>
      <br>
      <input id="level" type="range" min="0" max="100" step="1" value="30"
             onchange="onLevelChange(this.value)">
    </div>
    <div>isPlugged:
      <input id="isplugged" type="checkbox" onchange="onIsPluggedChange(this.checked)">
    </div>
  </div>
  <p>
    See console.log() for debug information.
  </p>
  <div id="footer">by <a href="http://twitter.com/anssik">Anssi Kostiainen</a></div>
</body>
</html>
--- NEW FILE: battery-status.css ---
body {
    margin-top: 0;
    padding-top: 0;
    font: 100% sans-serif;
    top: 0px;
    margin-left: auto;
    margin-right: auto;
    max-width: 50em;
}

h1, h2, h3 {
    color: #005a9c;
}

h1 {
    font: 170% sans-serif;
    margin-top: 30px;
}

h2 {
    font: 140% sans-serif;
}

h3 {
    font: 110% sans-serif;
}

.blink > span {
  border-radius: 5px;
  padding: 0 10px 0 10px;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -transition: all 0.2s ease-in;
}
#level {
  width: 500px;
}
#levelmeter {
  width: 30px;
}

.controls {
    border: dotted 1px gray;
    padding: 5px;
    margin-bottom: 10px;
    background-color: #f0f0f0;
}

#warning {
    display: none;
    background-color: #ff6a6a;
    border: solid 1px red;
    padding: 10px;
    margin-top: 15px;
}

#footer {
    border-top: dotted 1px gray;
    color: gray;
    font: 75% sans-serif;
    padding: 10px;
}

Received on Thursday, 8 September 2011 16:37:08 UTC