Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Console works. Styling. Added todos & change to README.
- Loading branch information
Arnaud Brousseau
committed
Mar 7, 2011
1 parent
6421ac2
commit 09e4997
Showing
4 changed files
with
162 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| Changelog: | ||
| ---------- | ||
|
|
||
| - Moved initial comment below the Doctype | ||
| - Created separate script "nose.js" file to clear the HTML | ||
| - Moved script to the end of the file -- just before the closing </body> tag | ||
| - Modified the log() function to work and added some styling to it | ||
|
|
||
| ToDoS : | ||
| ------- | ||
|
|
||
| - Implementation for a simple use case -- the one described in the chapter, i.e: | ||
| Fetching from Freebase for a movie entity > Searching for the Soundtrack > requesting MusicBrainz to retrieve the Soundtrack info | ||
| - Explore different nose-following paths... | ||
| - Find a good & reliable source of information. | ||
| It seems it's kind of a unicorn at the moment. Solution: use YQL to aggregate several sources of information? | ||
| + idea: use the YQL Jquery plugin? () |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
|
|
||
| /* ---------------------------- */ | ||
| /* Styling, just a bit, for fun */ | ||
| /* ---------------------------- */ | ||
|
|
||
| body{ | ||
| width: 960px; | ||
| margin: 50px auto; | ||
| color: #444; | ||
| position: relative; | ||
| } | ||
| h1{ text-align: center; font-family: Arial, sans-serif; padding-bottom: 0.2em; border-bottom: 1px #999 solid;} | ||
| label{ display: block;} | ||
| input{ width: 390px; margin-top: 5px;} | ||
| form{ | ||
| width: 400px; | ||
| margin: 50px auto; | ||
| background-color: #dedede; | ||
| border-radius: 5px; | ||
| box-shadow: 0px 0px 7px #333; | ||
| -webkit-box-shadow: 0px 0px 7px #333; | ||
| -moz-box-shadow: 0px 0px 7px #333; | ||
| border: 1px #999 solid; | ||
| padding: 15px; | ||
| } | ||
|
|
||
| #log{ | ||
| background-color: #000; color: #fff; font-family: Courier, mono; | ||
| padding: 5px; | ||
| width: 100%; | ||
| max-height: 220px; | ||
| overflow-y:scroll; | ||
| position: fixed; | ||
| bottom: 0; | ||
| left:0; | ||
| border-top: 2px #999 solid; | ||
| opacity: 0.7; | ||
|
|
||
| } | ||
| #log h2 {margin-bottom: 0.5em; font-size: 14px; text-align: center;} | ||
| #log div{padding: 4px 10px; border-bottom: 1px #fff solid; font-size: 11px;} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,100 +1,24 @@ | ||
| <!DOCTYPE html> | ||
| <!-- Heavily influenced by http://jqueryui.com/demos/autocomplete/remote-jsonp.html --> | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Linked Data For the Web Developer - Movie Soundtrack Explorer</title> | ||
| <link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css" /> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> | ||
| <script> | ||
| $(function() { | ||
| function log( message ) { | ||
| $('<div/>').text(message).append('#log'); | ||
| } | ||
|
|
||
| function getRelease(url) { | ||
| $.ajax({ | ||
| url: url, | ||
| dataType: 'jsonp', | ||
| success: function(data) { | ||
| if (data.result.url) { | ||
| var id = data.result.url; | ||
| log(id); | ||
|
|
||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| function getSoundtrack(url) { | ||
| $.ajax({ | ||
| url: url, | ||
| dataType: 'jsonp', | ||
| success: function(data) { | ||
| if (data.result.properties['/film/film/soundtrack'].values[0]) { | ||
| var id = data.result.properties['/film/film/soundtrack'].values[0].id; | ||
| log(id); | ||
| getRelease('http://www.freebase.com/experimental/topic/standard' + id); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| function getSoundtrackUrl(url) { | ||
| $.ajax({ | ||
| url: url, | ||
| dataType: 'jsonp', | ||
| success: function(data) { | ||
| if (data.result.properties['/film/film/soundtrack'].values[0]) { | ||
| var id = data.result.properties['/film/film/soundtrack'].values[0].id; | ||
| log(id); | ||
| getSoundtrack('http://www.freebase.com/experimental/topic/standard' + id); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| $('#movie').autocomplete({ | ||
| source: function(request, response) { | ||
| $.ajax({ | ||
| url: 'http://freebase.com/api/service/search?', | ||
| dataType: 'jsonp', | ||
| data: { | ||
| query: request.term, | ||
| typ: '/film/film', | ||
| type_strict: 'all', | ||
| limit: 3 | ||
| }, | ||
| success: function(data) { | ||
| response($.map(data.result, function(item) { | ||
| return { | ||
| label: item.name + ' http://freebase.com' + item.id, | ||
| value: 'http://www.freebase.com/experimental/topic/standard' + item.id | ||
| } | ||
| })); | ||
| } | ||
| }); | ||
| }, | ||
| minLength: 2, | ||
| select: function(event, ui) { | ||
| if (ui.item) { | ||
| var url = ui.item.value; | ||
| var name = ui.item.label; | ||
| log(name); | ||
| log(url); | ||
| getSoundtrackUrl(url); | ||
| } | ||
| }, | ||
| }); | ||
| }); | ||
| </script> | ||
| <link rel="stylesheet" href="css/woo.css" /> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div class="ui-widget"> | ||
| <body> | ||
| <h1>Nose follower with Linked data</h1> | ||
| <form class="ui-widget"> | ||
| <label for="movie">Movie title: </label> | ||
| <input id="movie" /> | ||
| </div> | ||
| <div id="log"></div> | ||
| <input type="text" id="movie" /> | ||
| </form> | ||
| <div id="log"> | ||
| <h2>Nose follower console<h2> | ||
| </div> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> | ||
| <script src="js/nose.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| /* | ||
| Script to implement the "Follow your nose" behaviour | ||
| */ | ||
|
|
||
| $(function() { | ||
| function log( message ) { | ||
| var ourMessage = $('<div/>').html(message); | ||
| $('#log').prepend(ourMessage); | ||
| } | ||
|
|
||
| function getRelease(url) { | ||
| $.ajax({ | ||
| url: url, | ||
| dataType: 'jsonp', | ||
| success: function(data) { | ||
| if (data.result.url) { | ||
| var id = data.result.url; | ||
| log(id); | ||
|
|
||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| function getSoundtrack(url) { | ||
| $.ajax({ | ||
| url: url, | ||
| dataType: 'jsonp', | ||
| success: function(data) { | ||
| if (data.result.webpage) { | ||
| var text = data.result.webpage[0].text; | ||
| var soundtrackUrl = data.result.webpage[0].url; | ||
| log("soundtrack found @"+ text +": " + soundtrackUrl); | ||
| alert("getSoundtrack finished"); | ||
| //getRelease('http://www.freebase.com/experimental/topic/standard' + id); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| function getSoundtrackUrl(url) { | ||
| $.ajax({ | ||
| url: url, | ||
| dataType: 'jsonp', | ||
| success: function(data) { | ||
| if (data.result.properties['/film/film/soundtrack'].values[0]) { | ||
| var id = data.result.properties['/film/film/soundtrack'].values[0].id; | ||
| log("performing getSoundTrack('http://www.freebase.com/experimental/topic/standard" + id + "')") | ||
| getSoundtrack('http://www.freebase.com/experimental/topic/standard' + id); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
| $('#movie').autocomplete({ | ||
| //Thanks to the JQuery UI, let's implement autocompletion | ||
| source: function(request, response) { | ||
| $.ajax({ | ||
| //base URL for the Freebase API | ||
| url: 'http://freebase.com/api/service/search?', | ||
| //We want JSON data returned | ||
| dataType: 'jsonp', | ||
| //We force a request stricly restricted to films | ||
| data: { query: request.term, type: '/film/film', type_strict: 'all', limit: 3 }, | ||
| success: function(data) { | ||
| response($.map(data.result, function(item) { | ||
| return { | ||
| label: item.name + ' http://freebase.com' + item.id, | ||
| value: 'http://www.freebase.com/experimental/topic/standard' + item.id | ||
| } | ||
| })); | ||
| } | ||
| }); | ||
| }, | ||
| minLength: 2, | ||
| select: function(event, ui) { | ||
| //When a option of the list is selected | ||
| if (ui.item) { | ||
| var url = ui.item.value; | ||
| var name = ui.item.label; | ||
| log("You selected" + name); | ||
| log("Will now try to fetch data about" + url); | ||
| getSoundtrackUrl(url); | ||
| } | ||
| }, | ||
| }); | ||
|
|
||
| //functions are defined. DOM is loaded. Let's go. | ||
| log("hello, it seems I'm ready to use. Welcome folks!"); | ||
|
|
||
| }); |