index.html | searchcode

/html5_experiments/db/index.html

https://github.com/paolochiodi/paolochiodi.github.com
HTML | 284 lines | 251 code | 33 blank | 0 comment | 0 complexity | 12d89d0105512be4778d25de8b4945ea MD5 | raw file

<!DOCTYPE html>
<html>
  <head>
    <title>Db | Paolo Chiodi html5 experiments</title>
    <meta name="description" content="Html5 Experiment Db: persistent client database in your browser with javascript (safari)" />
    <link rel="stylesheet" href="../css/layout.css" type="text/css" charset="utf-8" />
    <style type="text/css" media="screen">
      
      #msgs {
        list-style-image:none;
        list-style-position:outside;
        list-style-type:none;
      }
      
      #msgs li {
        margin: 10px 0;
      }
      
      textarea {
        width:500px;
        height:100px;
        color: #333;
        font-size: 20px;
      }
      

 	
    </style>
    <script type="text/javascript" charset="utf-8">
      
      var offline_db = {
        db:null,
        row_count:0,
        init: function(){
          try{
            if(!this.db){
              this.db = window.openDatabase('Dbdb', '1.0', 'HTML5 Database API example', 200000);
              if(this.db){
                this.create();
                return true;
              }
              else{
                return false;
              }
            }
            return true;            
          }
          catch(ex){
            return false
          }
        },
        create:function(created_callback){
          if(this.init()){
            this.db.transaction(function(tx) {
              tx.executeSql("SELECT COUNT(*) FROM Messages", [], function(result) {
                if(created_callback){
                  created_callback();
                }
              }, 
              function(tx, error) {
                tx.executeSql("CREATE TABLE Messages (id REAL UNIQUE, msg TEXT, timestamp REAL)", [], function(result) {
                  if(created_callback){
                    created_callback();
                  }
                });
              });
            });
            
          }
        },
        load_messages:function(loaded_callback){
          if(this.init()){
            this.db.transaction(function(tx){
              tx.executeSql("SELECT id, msg, timestamp FROM Messages", [], function(tx, result) {
                var ret = [];
                for (var i = 0, len = result.rows.length; i < len; ++i) {
                  var row = result.rows.item(i);

                  ret[ret.length] = {
                    msg: row['msg'], 
                    timestamp: row['timestamp']
                  }
                }
                this.row_count = ret.length;
                loaded_callback(ret);
              });
            });
          }
        },
        save_message: function(msg, saved_callback, error_callback){
          if(this.init()){
            this.db.transaction(function(tx){
              this.row_count++;
              var ts = (new Date()).getTime();
              tx.executeSql('INSERT INTO Messages (id, msg, timestamp) VALUES (?, ?, ?)', 
                            [this.row_count, msg, ts], 
                            function(tx, result){
                              saved_callback(msg, ts);
                            }, 
                            function(tx, error){
                              if(error_callback){
                                error_callback();
                              }
                            });
            });
          }
        },
        clear_messages: function(cleared_callback, error_callback){
          if(this.init()){
            var self = this;
            this.db.transaction(function(tx){
              tx.executeSql('DELETE FROM Messages', [], function(){self.row_count=0;cleared_callback()}, function(){error_callback()});
            });
          }
        },
      }
      
      var local_storage = {
        db_name:'html5_experiments',
        init:function(){
          if(typeof localStorage !== 'undefined'){
            var db_name = this.db_name,
                ls = localStorage[db_name];

            try{
              if(ls == null){
                localStorage[db_name] = JSON.stringify([]);
              }              
            }
            catch(ex){
              localStorage[db_name] = JSON.stringify([]);
            }
            return true;  
          }
          return false;
        },
        load_messages:function(loaded_callback){
          loaded_callback(JSON.parse(localStorage[this.db_name]));
        },
        save_message:function(msg, saved_callback, error_callback){
          try{
            var db_name = this.db_name,
                ts = (new Date()).getTime(),
                el = {
                  msg:msg,
                  timestamp:ts
                },
                storage = JSON.parse(localStorage[db_name]);

            storage.push(el);
            localStorage[db_name] = JSON.stringify(storage);

            saved_callback(msg, ts);            
          }
          catch(ex){
            error_callback();
          }
        },
        clear_messages:function(cleared_callback, error_callback){
          try{
            localStorage[this.db_name] = JSON.stringify([]);
            cleared_callback();
          }
          catch(ex){
            error_callback();
          }
        }
      }
      
      var db = null;
      
      window.onload = function(){
        
        if(offline_db.init()){
          db = offline_db;
        }
        else{
          if(local_storage.init()){
            db = local_storage;
          }
        }
        
        document.getElementById('store').addEventListener('click', store_click, true);
        document.getElementById('clear').addEventListener('click', clear_click, true);
        
        db.init();
        db.load_messages(messages_loaded);
      }

      function store_click(){
        db.save_message(document.getElementById('msg').value, message_saved, error_thrown);
      }
      
      function clear_click(){
        db.clear_messages(message_cleared, error_thrown);
      }
      
      function messages_loaded(m){
        
        var frag = document.createDocumentFragment();
        
        for(var i=0, len = m.length; i < len; i++){
          var el = m[i];
          append_message(el.msg, el.timestamp, frag);
        }
        
        document.getElementById('msgs').appendChild(frag);
      }
      
      function message_saved(msg, ts){
        append_message(msg, ts, document.getElementById('msgs'));
        document.getElementById('msg').value = '';
      }
      
      function message_cleared(){
        var f = document.getElementById('msgs');
        
        while(f.hasChildNodes()){
          f.removeChild(f.firstChild);
        }
        document.getElementById('msg').value = '';
      }
      
      function append_message(msg, ts, father){
        var l = document.createElement('li');
        var t = document.createTextNode(new Date(ts) + ' >> ' + msg)
        l.appendChild(t);
        
        if(father.hasChildNodes()){
          father.insertBefore(l, father.firstChild);
        }
        else{
          father.appendChild(l);
        }
      }
      
      function error_thrown(){
        alert('error');
      }
    </script>
    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-10675353-1']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
  </head>
  <body>
    <header>
      <h1>HTML5 <span>demo</span></h1>
    </header>
		<nav class="menu">
			<ul>
			  <li><a href="http://linkedin.com/paolochiodi" title="about me">About Me</a></li>
        <li><a href="../show/index.xhtml" title="video">The HTML5 Show</a></li>
        <li><a href="../jsboard/jsboard.html" title="jsboard">JSBoard</a></li>	
        <li><a href="../geo/index.html" title="Geo">Geo</a></li>
        <li class="active"><a href="../db/index.html" title="db">Db</a></li>
        <li><a href="../asciitube/index.html" title="video">AsciiTube</a></li>
        <li><a href="../video/video.xhtml" title="video">Video</a></li>
        <li><a href="../../index.html" title="home">Home</a></li>
      </ul>
    </nav>
    <section id="main">
      <h2>Storeable Messages</h2>
      <div>
        <textarea id="msg"></textarea>
        <nav class="footer">
          <input id="store" type="button" value="store" />
          <input class="last" id="clear" type="button" value="clear" />
        </nav>
      </div>
      <ul id="msgs">
      </ul>
    </section>
  </body>
</html>