Skip to content

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also .

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also .
...
  • 3 commits
  • 2 files changed
  • 0 commit comments
  • 1 contributor
Commits on Feb 19, 2012
@jcarouth Coding standards/indentation fix. 02e53f2
@jcarouth Fixing warnings in proxy script bc49f36
Commits on Feb 20, 2012
@jcarouth Modularize the FindMyNews JavaScript.
Took all the random global functions in the JavaScript that runs
this page and put them into logal container namespaces. It's not
totally clean now, but the bulk of the disjointed code is more
readable with the naming allowed by using namespace containers.
3fad6c2
Showing with 224 additions and 164 deletions.
  1. +221 −161 index.html
  2. +3 −3 proxy.php
View
382 index.html
@@ -10,173 +10,233 @@
<script type="text/javascript" src="icanhaz.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
- <script id="story" type="text/html">
- <article>
- <h2><a href="{{url}}">{{title}}</a></h2>
- <section class="content">
- <p>{{summary}}</p>
- </section>
- <date>{{published}}</date>
- <div class="buttons-container">
- <button type="button" class="add" id="">add</button><a href="#queue" class="queue">queue</a>
- </div>
- </article>
- </script>
- <script id="queued" type="text/html">
+<!-- Mustache templates -->
+<script id="story" type="text/html">
+ <article>
+ <h2><a href="{{url}}">{{title}}</a></h2>
+ <section class="content">
+ <p>{{summary}}</p>
+ </section>
+ <date>{{published}}</date>
+ <div class="buttons-container">
+ <button type="button" class="add" id="">add</button><a href="#queue" class="queue">queue</a>
+ </div>
+ </article>
+</script>
+<script id="queued" type="text/html">
<li><a href="{{url}}">{{title}}</a><span class="delete"> delete</span></li>
</script>
+<!-- end Mustache templates -->
<script type="text/javascript">
- var stored;
-function initialize() {
- stored = JSON.parse(localStorage.getItem('stored'));
-
- if (null == stored) {
- stored = [];
- }
- $.each(stored, function(index, element) {
- $('#queue ul').append(ich.queued({
- url: element.url,
- title: element.title
- }));
- })
-
- $('.delete').click(deleteItemFromQueue)
-
-
- if (navigator.geolocation) {
- var timeoutVal = 10 * 1000 * 1000;
- navigator.geolocation.getCurrentPosition(
- success,
- error,
- { timeout: timeoutVal,
- maximumAge: 0 }
- );
- } else {
- error("Geolocation is not supported by this browser");
- }
-
-}
-
-deleteItemFromQueue = function() {
- $(this).parent().remove();
- var stored_url = $(this).parent().find("a").attr("href");
- $.each(stored, function(index, element) {
- if (element.url === stored_url) {
- stored.splice(index, 1);
- }
- });
- localStorage.setItem('stored', JSON.stringify(stored));
-}
-
-var sign = function(url) {
- var hm = 'fjts7x6va43ewxdyweasrexk' + '4tXDQSSeV6' + (Math.round(new Date().getTime() / 1000).toString());
- var sig = $.md5(hm);
- return url + "?dev_key=" + 'fjts7x6va43ewxdyweasrexk' + "&sig=" + sig;
- }
-
-function getStories(zip) {
-
- $.getJSON(sign('http://news-api.patch.com/v1.1/zipcodes/' + zip + '/stories'), function(data) {
- // Create an object containing LatLng, population.
- $.each(data.stories, function(index, story) {
- var markup = $(ich.story({
- title: story.title,
- summary: story.summary,
- url: story.story_url,
- published: story.published_at
- }));
- markup.find('.add').click(function(e) {
- e.preventDefault();
- var getter = $(this).parent().parent().find('h2 a');
- article = {
- url: getter.attr('href'),
- title: getter.html()
- };
- stored.push(article);
- $(this).fadeOut();
-
- localStorage.setItem('stored', JSON.stringify(stored));
-
- window.addEventListener("storage", displayStorageEvent, true);
- $('#queue ul').append(ich.queued(article));
- $('.delete').click(deleteItemFromQueue);
-
- });
-
- $('#list').append(markup);
- $('.loading').remove();
- });
-
- });
-}
-
-function displayStorageEvent(e) {
- var queuesection = document.getElementById('queue');
- queuesection.innerHTML = e.newValue;
-}
-
-var getZipCode = function(position){
- var position = position.coords.latitude + "," + position.coords.longitude;
- $.getJSON('proxy.php',{
- path : "http://maps.google.com/maps/api/geocode/json?latlng="+position+"&sensor=false",
- type: "application/json"
- }, function(json){
- //Find the zip code of the first result
- if(!(json.status == "OK")){
- GETZIP.error('Zip Code not Found');
- return;
- }
- var found = false;
- $(json.results[0].address_components).each(function(i, el){
- if($.inArray("postal_code", el.types) > -1){
- found = true;
- $('#site-title').append('<span> ' + el.short_name + '</span>');
- getStories(el.short_name);
- return;
- }
- });
- if(!found){
- GETZIP.error('Zip Code not Found');
- }
- });
-}
-
-function success(position) {
- getZipCode(position)
-
- var mapcanvas = document.createElement('div');
- mapcanvas.id = 'mapcanvas';
- mapcanvas.style.height = '200px';
- mapcanvas.style.width = '100%';
-
- document.getElementById('header').appendChild(mapcanvas);
-
- var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
- var myOptions = {
- zoom: 15,
- center: latlng,
- mapTypeControl: false,
- navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
- mapTypeId: google.maps.MapTypeId.ROADMAP
- };
- var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
-
- var marker = new google.maps.Marker({
- position: latlng,
- map: map,
- title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
- });
-}
-
-function error(msg) {
- alert('There was an error finding your location ');
-}
-
+
+var Locator = function() {
+ return {
+ getUserPosition: function(onSuccess) {
+ //get users location via HTML5 geolocation API
+ if (navigator.geolocation) {
+ var timeoutVal = 10 * 1000 * 1000;
+ navigator.geolocation.getCurrentPosition(
+ function(position) {
+ onSuccess(position)
+ },
+ function() {
+ alert("Geolocation failed.");
+ },
+ {
+ timeout: timeoutVal,
+ maximumAge: 0
+ }
+ );
+ } else {
+ alert("Geolocation is not supported by this browser");
+ }
+
+ },
+ getZipCode: function(position, onSuccess) {
+ var position = position.coords.latitude + "," + position.coords.longitude;
+ $.getJSON(
+ 'proxy.php',
+ {
+ path : "http://maps.google.com/maps/api/geocode/json?latlng="+position+"&sensor=false",
+ type: "application/json"
+ },
+ function(json){
+ onSuccess(json);
+ }
+ );
+
+ }
+ }
+}();
+
+var LocalStorageQueue = function($) {
+ var stored;
+
+ var _write = function() {
+ localStorage.setItem('stored', JSON.stringify(stored));
+ };
+
+ var _read = function() {
+ return JSON.parse(localStorage.getItem('stored')) || [];
+ };
+
+ return {
+ load: function() {
+ stored = _read();
+ return stored;
+ },
+ add: function(key, story) {
+ var storyIsAlreadyQueued = false;
+ $.each(stored, function(i, element) {
+ if (element.url == story.url) {
+ storyIsAlreadyQueued = true;
+ return;
+ }
+ });
+
+ if (!storyIsAlreadyQueued) {
+ stored.push(story);
+ _write();
+ }
+ },
+ remove: function(key) {
+ $.each(stored, function(i, element) {
+ if (element.url === key) {
+ stored.splice(i, 1);
+ _write();
+ }
+ });
+ }
+ };
+}(jQuery);
+
+
+var StoryApi = function($) {
+
+ var sign = function(url) {
+ var hm = 'fjts7x6va43ewxdyweasrexk' + '4tXDQSSeV6' + (Math.round(new Date().getTime() / 1000).toString());
+ var sig = $.md5(hm);
+ return url + "?dev_key=" + 'fjts7x6va43ewxdyweasrexk' + "&sig=" + sig;
+ }
+
+ return {
+ getStoriesForZip: function(postalCode, onSuccess) {
+ $.getJSON(
+ sign('http://news-api.patch.com/v1.1/zipcodes/' + postalCode + '/stories'),
+ function(data) {
+ onSuccess(data.stories);
+ }
+ );
+ }
+ };
+}(jQuery);
+
+var FindMyNews = function($, StorageQueue, StorySource, Location) {
+ var stored;
+
+ return {
+ run: function() {
+ console.log('-- FindMyNews.run() --');
+
+ var queuedStories = StorageQueue.load();
+ $.each(queuedStories, function(index, element) {
+ $('#queue ul').append(ich.queued(element));
+ })
+
+ //attach deferred click event handler to queue remove button
+ $("#queue").on("click", "span.delete", function(e) {
+ e.preventDefault();
+ console.log('-- triggered remove for queued story');
+ var queuedItemKey = $(this).parent().find("a").attr("href");
+ StorageQueue.remove(queuedItemKey);
+ $(this).parent().remove();
+ });
+
+ //attach deferred click event handler to #list 'button.add'
+ $('#list').on("click", 'button.add', function(e) {
+ e.preventDefault();
+ console.log('-- triggered add to queue');
+ var getter = $(this).parent().parent().find('h2 a');
+ var article = {
+ url: getter.attr('href'),
+ title: getter.html()
+ };
+ StorageQueue.add(getter.attr('href'), article);
+
+ $(this).fadeOut();
+
+ $('#queue ul').append(ich.queued(article));
+ });
+
+ Location.getUserPosition(function(position) {
+ Location.getZipCode(position, function(json) {
+ //Find the zip code of the first result
+ if(!(json.status == "OK")){
+ alert('Zip Code not Found');
+ return;
+ }
+ var found = false;
+ $(json.results[0].address_components).each(function(i, el){
+ if($.inArray("postal_code", el.types) > -1){
+ found = true;
+ $('#site-title').append('<span> ' + el.short_name + '</span>');
+ StorySource.getStoriesForZip(el.short_name, function(stories) {
+ $.each(stories, function(index, story) {
+ var markup = $(ich.story({
+ title: story.title,
+ summary: story.summary,
+ url: story.story_url,
+ published: story.published_at
+ }));
+
+ $('#list').append(markup);
+ $('.loading').remove();
+ });
+ });
+ return;
+ }
+ });
+
+ if(!found){
+ alert('Zip Code not Found');
+ }
+ });
+
+ var mapcanvas = document.createElement('div');
+ mapcanvas.id = 'mapcanvas';
+ mapcanvas.style.height = '200px';
+ mapcanvas.style.width = '100%';
+
+ document.getElementById('header').appendChild(mapcanvas);
+
+ var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
+ var myOptions = {
+ zoom: 15,
+ center: latlng,
+ mapTypeControl: false,
+ navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
+ mapTypeId: google.maps.MapTypeId.ROADMAP
+ };
+ var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
+
+ var marker = new google.maps.Marker({
+ position: latlng,
+ map: map,
+ title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
+ });
+ });
+ }
+ };
+}(jQuery, LocalStorageQueue, StoryApi, Locator);
+
+$(function() {
+ FindMyNews.run();
+});
</script>
</head>
-<body onload="initialize()">
+<body>
<div class="wrap">
<header id="header">
<h1 id="site-title">Find and save local news stories near</h1>
@@ -188,4 +248,4 @@ <h2 class="subtitle">Add Stories to <a href="#queue">Queue</a> to read later.</h
<div id="queue"><h1>Queue: Saved links for later</h1><ul></ul></div>
</div>
</body>
-</html>
+</html>
View
6 proxy.php
@@ -1,12 +1,12 @@
<?php
-$path = ($_POST['path']) ? $_POST['path'] : $_GET['path'];
+$path = (isset($_POST['path'])) ? $_POST['path'] : $_GET['path'];
$url = $path;
// Open the Curl session
$session = curl_init($url);
// If it's a POST, put the POST data in the body
-if ($_POST['path']) {
+if (isset($_POST['path'])) {
$postvars = '';
while ($element = current($_POST)) {
$postvars .= urlencode(key($_POST)).'='.urlencode($element).'&';
@@ -24,7 +24,7 @@
$xml = curl_exec($session);
// does the service return XML or JSON? Set the Content-Type appropriately
-$headerType = ($_POST['type']) ? $_POST['type'] : $_GET['type'];
+$headerType = (isset($_POST['type'])) ? $_POST['type'] : $_GET['type'];
// 'text/xml' or 'application/json'
$headerType = ($headerType) ? $headerType : 'text/xml';//default
header("Content-Type: " . $headerType);

No commit comments for this range

Something went wrong with that request. Please try again.