example.html 7.27 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="utf-8">
       <title>ListEntryInfo Plugin Demo</title>
       <style>
         body {
            background-color: #f5f3ec;
            color: #5f5a49;
         }

         ul {
            width: 80%;
            margin: auto;
         }

         ul li {
            color: #5f5a49;
            font-size: 20pt;
            overflow: hidden;
            border-bottom: 1px solid #5f5a49;
         }

Kjetil Thuen's avatar
Kjetil Thuen committed
24
         ul li.listPeekSelected {
25 26 27
            color: #eee;
         }

Kjetil Thuen's avatar
Kjetil Thuen committed
28 29 30 31 32
         /* 
            #listPeekTargetArea and #listPeakRevealArea are the default ids for
            the target and info divs. If needed, you can pass other ids in the
            arguments object
         */ 
33 34 35 36
         #listPeekTargetArea {
            background-color: rgba(0,0,0,1);
         }

Kjetil Thuen's avatar
Kjetil Thuen committed
37
         #listPeekRevealArea {
38 39 40 41 42 43 44
            background-color: rgba(0,0,0,1);
            padding: 0em 1em 1em 1em;
            color: white;
            margin-bottom: 0.5em;
            overflow: auto;
         }
       </style>
Kjetil Thuen's avatar
Kjetil Thuen committed
45
       <script src="lib/jquery/jquery.js"></script>
Kjetil Thuen's avatar
Kjetil Thuen committed
46
       <script src="dist/listentryinfo.js"></script>
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 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174
       <script>
          var philosophers = [
            "Abhinavagupta",
            "Alan Turing",
            "Alexander Bain",
            "Adi Shankaracharya",
            "Alexius Meinong",
            "Amy Kind",
            "Andy Clark",
            "Ansgar Beckermann",
            "Anthony Kenny",
            "Aristotle",
            "Arnold Geulincx",
            "Balthasar Bekker",
            "Baruch Spinoza",
            "Berit Brogaard",
            "Brian J. Mistler",
            "Brie Gertler",
            "C. D. Broad",
            "Celia Green",
            "Claude Nowell",
            "Colin McGinn",
            "Daniel Dennett",
            "Daniel N. Robinson",
            "David Chalmers",
            "David H. M. Brooks",
            "Donna Haraway",
            "David Hartley (philosopher)",
            "David Hume",
            "David Kellogg Lewis",
            "David Malet Armstrong",
            "David Papineau",
            "David Sosa",
            "Donald Davidson (philosopher)",
            "Douglas Hofstadter",
            "Edmund Husserl",
            "Edward N. Zalta",
            "Elizabeth Schechter",
            "Emil du Bois-Reymond",
            "Ernest Lepore",
            "Ernst Tugendhat",
            "Frank Cameron Jackson",
            "Franz Joseph Gall",
            "Fred Dretske",
            "Friedrich Hayek",
            "Friedrich Kambartel",
            "G. E. M. Anscombe",
            "Gareth Evans (philosopher)",
            "Georg Henrik von Wright",
            "George Edward Moore",
            "Gerhard Dorn",
            "Gilbert Harman",
            "Gilbert Ryle",
            "Gottfried Leibniz",
            "Gregory Bateson",
            "Gualtiero Piccinini",
            "Hans-Werner Bothe",
            "Harry Frankfurt",
            "Henri Bergson",
            "Hilary Putnam",
            "Horace Romano Harré",
            "J. J. C. Smart",
            "Jaegwon Kim",
            "Jerry Fodor",
            "Jiddu Krishnamurti",
            "John McDowell",
            "John Perry (philosopher)",
            "John Searle",
            "John Wisdom",
            "Jurij Moskvitin",
            "Karl Popper",
            "Kenneth Allen Taylor",
            "Louise Antony",
            "Ludwig Wittgenstein",
            "Martha Klein",
            "Mary Warnock, Baroness Warnock",
            "Maurice Merleau-Ponty",
            "Merab Mamardashvili",
            "Michael Tye (philosopher)",
            "Ned Block",
            "Nicolas Malebranche",
            "Noam Chomsky",
            "Owen Flanagan",
            "Patricia Churchland",
            "Paul Boghossian",
            "Paul Churchland",
            "Paul Ziff",
            "Peter Carruthers (philosopher)",
            "Peter Hacker",
            "Peter Unger",
            "Petrus de Ibernia",
            "René Descartes",
            "Richard Rorty",
            "Robert Anton Wilson",
            "Robert Brandom",
            "Robert Cummins",
            "Robert Maximilian de Gaynesford",
            "Ron McClamrock",
            "Ruth Millikan",
            "Samuel Guttenplan",
            "Shaun Gallagher (philosopher)",
            "Stephen Laurence",
            "Stephen Stich",
            "Stephen Yablo",
            "Steven Lehar",
            "Susan Hurley",
            "Susanna Schellenberg",
            "Susanna Siegel",
            "Sydney Shoemaker",
            "Tad Schmaltz",
            "Thomas Baldwin (philosopher)",
            "Thomas Brown (philosopher)",
            "Thomas Metzinger",
            "Thomas Nagel",
            "Þorsteinn Gylfason",
            "Timothy Leary",
            "Timothy Sprigge",
            "Timothy Williamson",
            "Tyler Burge",
            "Ullin Place",
            "Ward Jones",
            "Werner Krieglstein",
            "Wilfrid Sellars",
            "William Hirstein",
            "William James",
            "White Thomas"
         ];

Kjetil Thuen's avatar
Kjetil Thuen committed
175 176 177 178 179 180 181
         /*
            This function will be called with the id of the selected list
            element (name), and the default function for populating a DOM element with
            the computed information (displayFunc).
         */
         var display_philosopher_article = function (name, displayFunc) {
            var article;
182

Kjetil Thuen's avatar
Kjetil Thuen committed
183
            $.getJSON("http://en.wikipedia.org/w/api.php?action=query&prop=extracts&format=json&exintro=1&callback=?", {titles:name}, function(data) {
184

Kjetil Thuen's avatar
Kjetil Thuen committed
185 186
               if (data && data.query && data.query.pages) {
                  var pages = data.query.pages;
187

Kjetil Thuen's avatar
Kjetil Thuen committed
188 189 190 191 192 193 194 195
                  for (var id in pages) {
                     // There should be only one page, so we just overwrite if
                     // there is more
                     article = pages[id].extract;
                  }
               } else {
                  article="<p>No article found on " + name + "</p>";
               }
196

Kjetil Thuen's avatar
Kjetil Thuen committed
197 198 199
               displayFunc(article);
            });
         }
200

Kjetil Thuen's avatar
Kjetil Thuen committed
201 202 203 204 205 206 207 208 209
         /*
           Populates the list with the phiosophers from the philosophers array defined above
         */
         var build_philosopher_list = function (philosopherlist) {
            var philosopherListElem = $("#philosopherList");
            philosopherlist.forEach(function (philosopher) {
               philosopherListElem.append("<li id='" + philosopher +"'>" + philosopher + "</li>");
            });
         }
210

Kjetil Thuen's avatar
Kjetil Thuen committed
211 212 213 214 215 216 217 218 219
         if (typeof $ === 'undefined') {
            alert("Cannot find jQuery. Have you read the Readme?");
         } else {
            $(document).ready(function() {
                  build_philosopher_list(philosophers);
                  // Apply the plugin and pass it the callback to be called for selected elements
                  $('#philosopherList').listEntryInfo({ extendedInfoFunc: display_philosopher_article });
            });
         }
220 221 222 223 224 225 226
       </script>
   </head>
   <body>
      <div class="container">
         <h1>ListEntryInfo Demo</h1>
         <p>
           This demo displays a static list of philosophers of mind, and
Kjetil Thuen's avatar
Kjetil Thuen committed
227 228
           fetches their articles from Wikipedia when their list entry
           gains focus.
229 230 231 232 233
         </p>
         <ul id="philosopherList"></ul>
      </div>
   </body>
</html>