TheTinyNote/sortNote.html at master · znbbz/TheTinyNote · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>The Tiny Note</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/agency.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
</head>

<body id="page-top" class="index" onload="displayResult('A')">

    <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="index.html">The Tiny Note</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="hidden">
                        <a href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="addNote.php">Add a Note</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="browseNote.html">Browse Notes</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="sortNote.html">Sort Notes</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

<script type="text/javascript">
function loadXMLDoc(url)
{
  if (window.XMLHttpRequest)
  {
    xhttp=new XMLHttpRequest();
  }
  else
  {
      xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

  xhttp.open("GET",url,false);
  xhttp.send("");
  return xhttp.responseXML;
}

function displayResult(flag)
{
  xml=loadXMLDoc("note.xml");
  switch (flag)
  {
    case 'N' : xsl=loadXMLDoc("newNotes.xsl"); break;
    case 'C' : xsl=loadXMLDoc("currentNotes.xsl"); break;
    case 'AR' : xsl=loadXMLDoc("historicNotes.xsl"); break;
    case 'A' :  xsl=loadXMLDoc("allNotes.xsl"); break;
  }

  if (window.ActiveXObject)
  { //IE
    ex = xml.transformNode(xsl);
    document.getElementById("notes").innerHTML=ex;
  }
  else if (document.implementation && document.implementation.createDocument)
  { // others
      xsltProcessor=new XSLTProcessor();
      xsltProcessor.importStylesheet(xsl);
      resultDocument = xsltProcessor.transformToFragment(xml,document);
      document.getElementById("notes").innerHTML="";
      document.getElementById("notes").appendChild(resultDocument);
  }
}
</script>
	<section id="displayNote">

		<div class="container">
			<button onclick="displayResult('A')">All Notes</button>
			<button onclick="displayResult('N')">New Notes</button>
			<button onclick="displayResult('C')">Current Notes</button>
			<button onclick="displayResult('AR')">Historic Notes</button>
		</div>

		<div id="notes"></div>
	</section>
</body>
</html>