bachir
/
performance-art.fr


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
							<html>
  <head>
    <title>Timeline demo</title>

    <style>
		  body {font: 10pt arial;}
		</style>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="../timeline.js"></script>
    <link rel="stylesheet" type="text/css" href="../timeline.css">
    
    <script type="text/javascript">
      var timeline = undefined;
      var data = undefined;
    
      google.load("visualization", "1");
      
      // Set callback to run when API is loaded
      google.setOnLoadCallback(drawVisualization); 
      
      function getSelectedRow() {
        var row = undefined
        var sel = timeline.getSelection();
        if (sel.length) {
          if (sel[0].row != undefined) {
            var row = sel[0].row;
          }
        }     
        return row;       
      }      
      
      // Called when the Visualization API is loaded.
      function drawVisualization() {
        // Create and populate a data table.
        data = new google.visualization.DataTable();
        data.addColumn('datetime', 'start');
        data.addColumn('datetime', 'end');
        data.addColumn('string', 'content');

        data.addRows([
          [new Date(2010,07,23), , '<div>Conversation</div><img src="img/comments-icon.png" style="width:32px; height:32px;">'],
          [new Date(2010,07,23,23,00,00), , '<div>Mail from boss</div><img src="img/mail-icon.png" style="width:32px; height:32px;">'],
          [new Date(2010,07,24,16,00,00), , 'Report'],
          [new Date(2010,07,26), new Date(2010,08,02), 'Traject A'],     
          [new Date(2010,07,28), , '<div>Memo</div><img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'],
          [new Date(2010,07,29), , '<div>Phone call</div><img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'],
          [new Date(2010,07,31), new Date(2010,08,03), 'Traject B'],     
          [new Date(2010,08,04,12,00,00), , '<div>Report</div><img src="img/attachment-icon.png" style="width:32px; height:32px;">']
        ]);

        // specify options
        options = {
          width:  "100%", 
          height: "300px", 
          editable: true // make the events dragable
        };

        // Instantiate our timeline object.
        timeline = new links.Timeline(document.getElementById('mytimeline'));

        // Make a callback function for the select event
        var onselect = function (event) {
          var row = getSelectedRow();
          document.getElementById("info").innerHTML += "event " + row + " selected<br>";            
          // Note: you can retrieve the contents of the selected row with
          //       data.getValue(row, 2);
        }

        // callback function for the change event
        var onchange = function (event) {
          // retrieve the changed row 
          var row = getSelectedRow();

          if (row != undefined) {
            // request approval from the user. 
            // You can choose your own approval mechanism here, for example 
            // send data to a server which responds with approved/denied
            var approve = confirm("Are you sure you want to move the event?");
            
            if (approve)  {
              document.getElementById("info").innerHTML += "event " + row + " changed<br>";
            } else {
              // new date NOT approved. cancel the change
              timeline.cancelChange();

              document.getElementById("info").innerHTML += "change of event " + row + " cancelled<br>";
            }
          }
        }

        // callback function for the delete event
        var ondelete = function (event) {
          // retrieve the row to be deleted 
          var row = getSelectedRow();

          if (row != undefined) {
            // request approval from the user. 
            // You can choose your own approval mechanism here, for example 
            // send data to a server which responds with approved/denied
            var approve = confirm("Are you sure you want to delete the event?");
            
            if (approve)  {
              document.getElementById("info").innerHTML += "event " + row + " deleted<br>";
            } else {
              // new date NOT approved. cancel the change
              timeline.cancelDelete();

              document.getElementById("info").innerHTML += "deleting event " + row + " cancelled<br>";
            }
          }
        }


        // callback function for adding an event
        var onadd = function (event) {
          // retrieve the row to be deleted 
          var row = getSelectedRow();

          if (row != undefined) {
            // request approval from the user. 
            // You can choose your own approval mechanism here, for example 
            // send data to a server which responds with approved/denied
            var title = prompt("Enter a title for the new event", "New event");
            
            if (title != undefined)  {
              data.setValue(row, 2, title);
              document.getElementById("info").innerHTML += "event " + row + " created<br>";
              timeline.redraw();
            } else {
              // cancel adding a new event
              timeline.cancelAdd();

              document.getElementById("info").innerHTML += "creating event " + row + " cancelled<br>";
            }
          }
        }

        // Add event listeners
        google.visualization.events.addListener(timeline, 'select', onselect);
        google.visualization.events.addListener(timeline, 'change', onchange);
        google.visualization.events.addListener(timeline, 'delete', ondelete);
        google.visualization.events.addListener(timeline, 'add', onadd);

        // Draw our timeline with the created data and options 
        timeline.draw(data, options);
      }
   </script>
  </head>

  <body>
    <p>This page demonstrates the timeline visualization.</p>
    <p>Click and drag to move the timeline, scroll to zoom the timeline. 
    Click and drag events to change there date. 
    You will be asked for confirmation before changes are actually applied.</p>
    <div id="mytimeline"></div>

    <!-- Information about where the used icons come from -->
    <p style="color:gray; font-size:10px; font-style:italic;">
      Icons by <a href="http://dryicons.com" target="_blank" title="Aesthetica 2 Icons by DryIcons" style="color:gray;" >DryIcons</a>
      and <a href="http://www.tpdkdesign.net" target="_blank" title="Refresh Cl Icons by TpdkDesign.net" style="color:gray;" >TpdkDesign.net</a>
    </p>
  
    <div id="info"></div>
  </body>
</html>