Skip to content

Commit

Permalink
Added FlickrLinks.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ripsawridge
ripsawridge committed Jul 25, 2016
1 parent e01d8aa commit 680a49e
Show file tree
Hide file tree
Showing 9 changed files with 4,601 additions and 0 deletions.
393 changes: 393 additions & 0 deletions flickrlinks/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,393 @@
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"
type="text/javascript"></script>
<script src="javascript/flickr.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/jquery.caret.js"></script>
<script src="javascript/showdown.min.js" type="text/javascript"></script>
<style type="text/css">
html, body {font-size: 12px; }
#container {width: 810px; margin: 0 auto 0 auto;}
#notice {color: #fff; font-weight: bold; font-size: 15px; font-style: italic;}
h1 {font-size: 38px; line-height: 45px;}
h1 span {font-size: 16px; color: #ff0084;}
h1 a:hover span {color: #fff;}
#tut-info {width: 810px; margin: 0 0 20px 0;}
#tut-info a {float: left; display: block; background: #fff; font-size: 20px; padding: 20px 20px; font-weight: bold; margin: 0 15px 0 0;}
#tut-info a:hover {background: #ff0084;}
#loader {margin: 20px 0 40px 350px;}
.image-container {
height: 180px;
width: 240px;
position: relative;
float: left;
margin: 0 20px 20px 0;
background-color: #666;
background-repeat: no-repeat;
background-position: center;
border: 5px solid #000;
overflow: hidden;
}
.image-info {display: none;}
.image-info-active {height: 180px; width: 240px; background:
rgba(255,255,255,.85);}
.reporttext { width: 600px; height: 400px; }
a {cursor: pointer; text-decoration: none; color: #0063dc;}
a:hover {color: #fff; background: #0063dc;}
a.title {color: #ff0084;}
a.title:hover {color: #fff; background: #ff0084;}
.bottom {padding: 5px;}
.bottom p {margin: 0 0 5px 0; }
p.top {background: #fff; width: 240px; padding: 0 0 5px 0; margin: 0;}
a.title {font-size: 20px; font-weight: bold; display: block; line-height: 20px;}
span.author {font-size: 10px;}
.infoTitle {font-weight: bold;}
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display:inline-block;}
.clearfix {display:block;}
</style>
<script>
$(function(){
// jQuery('#a-link').remove();
// jQuery('<img />').attr('id', 'loader').attr('src', 'http://cdn.kylerush.org/kr/images/flickr-ajax-loader.gif').appendTo('#image-container');

// We need this later.
var user_nsid;

// Given the result of a flickr.photosets.getPhotos call, populate the container.
function populate_container(data) {
//loop through the results with the following function
$.each(data.photoset.photo, function(i,item){

//build the url of the photo in order to link to it
var imageURL = flickr.image_url(item, "m");

//turn the photo id into a variable
var photoID = item.id;

//use another ajax request to get the geo location data for the image
var photo_geo_promise = $.getJSON(
flickr.url("flickr.photos.geo.getLocation", "photo_id", photoID));

//use another ajax request to get the tags of the image
var tagreq = flickr.url("flickr.photos.getInfo", "photo_id", photoID);
var photo_info_promise = $.getJSON(tagreq);
$.when(photo_geo_promise, photo_info_promise).done(function(geo_data, data) {
// strip jquery cruft from response codes.
geo_data = geo_data[0];
data = data[0];

var pLocation;
if(geo_data.stat != 'fail') {
var url = flickr.map_url(geo_data.photo.location);
pLocation = '<a target="_blank" href=' + url +'>' +
geo_data.photo.location.locality._content + ', ' +
geo_data.photo.location.region._content +
' (Click for Map)</a>';
}

//if the image has tags
if(data.photo.tags.tag != '') {

//create an empty array to contain all the tags
var tagsArr = new Array();

//for each tag, run this function
$.each(data.photo.tags.tag, function(j, item){
//push each tag into the empty 'tagsArr' created above
var tag_url = flickr.tag_url(item);
tagsArr.push('<a href="' + tag_url + '">' + item.raw + '</a>');
});

//turn the tags array into a string variable
var tags = tagsArr.join(', ');
}

//create an imgCont string variable which will hold all the link
// location, title, author link, and author name into a text string
var photoURL = flickr.photo_url(data.photo);
var authorURL = flickr.author_url(data.photo.owner);
var imgCont = '<div class="image-container" style="background-image: url(';
imgCont += imageURL;
imgCont += ');">';
imgCont += '<div class="image-info"><p class="top"><a class="title" href="';
imgCont += photoURL + '">';
imgCont += data.photo.title._content;
imgCont += '</a>';
imgCont += '<span class="author">by <a href="' + authorURL + '">';
imgCont += data.photo.owner.username + '</a></span></p>';
imgCont += '<div class="bottom">';

//if there are tags associated with the image
if (typeof(tags) != 'undefined') {
//combine the tags with an html snippet and add them to the end of the 'imgCont' variable
imgCont += '<p><span class="infoTitle">Tags:</span> ' + tags + '</p>';
}

//if the image has geo location information associate with it
if(typeof(pLocation) != 'undefined'){
//combine the geo location data into an html snippet and at that to the end fo the 'imgCont' variable
imgCont += '<p><span class="infoTitle">Location:</span> ' + pLocation + '</p>';
}

//add the description & html snippet to the end of the 'imgCont' variable
imgCont += '<p><span class="infoTitle">Decription:</span> ' + data.photo.description._content + '</p></div></div>';

// Turn this photo container into a jQuery object.
var $imgCont = $(imgCont);

// Save the JSON data in it.
$imgCont.data("json_result", data.photo);

//append the 'imgCont' variable to the document
$imgCont.appendTo('#image-container');
});
});
}

$("#image-container").empty();

function get_selected_item() {
// Get selected item
var list = $("#set_list")[0];
if (list.options.length > 0) {
var selected_item = $(list.options[list.selectedIndex]);
var o = {
index: list.selectedIndex,
text: selected_item.text(),
id: selected_item.val()
};
return o;
}
return null;
}

// What to do when a different photo set is selected.
function refresh_container() {
// Get selected item
var item = get_selected_item();
if (item === null) return;
var photoset_id = item.id;
$("#image-container").empty();
var photo_set_promise = $.getJSON(
flickr.url("flickr.photosets.getPhotos", "photoset_id", photoset_id));
photo_set_promise.done(populate_container);
}


// Photo is a Flickr photo, and an html string is returned.
function format_image(photo) {
// Create an image in markdown.
var image_url = flickr.image_url(photo, "b");
var photo_url = flickr.photo_url(photo);

var markdown = "<figure><a href='" + photo_url + "'>\r\n";
markdown += "<img src='" + image_url + "'></a>\r\n";
markdown += "<figcaption>" + photo.title._content + "</figcaption>\r\n";
markdown += "</figure>\r\n";
return markdown;
}


function selected_items() {
var items = [];
$.each($(".image-container"), function(i,item){
var $item = $(item);
if ($item.data("selected") === true) {
items.push($item);
}
});
return items;
}


function update_selected_count() {
var count = selected_items().length;
$("#selected-image-count").html(count + " images selected.");
}


//assign hover actions to each image
$('.image-container').live('mouseover', function(){
$(this).children('div').attr('class', 'image-info-active');
});
$('.image-container').live('mouseout', function(){
$(this).children('div').attr('class', 'image-info');
});
$("#image-container").on("click", ".image-container", function() {
// toggle that the photo is selected for inclusion.
if ($(this).data("selected") === true) {
$(this).data("selected", false);
$(this).css("border", "5px solid #000");
update_selected_count();
return;
}

$(this).data("selected", true);
$(this).css("border", "5px solid #f00");

// Extract the data.
var photo = $(this).data("json_result");
var markdown = format_image(photo);

// Log it
console.log(markdown);

// Update the selected photo count.
update_selected_count();
});

// What to do when the username button is pressed.
function on_change_user_name(data) {
var user_name = $("#user_name").val();
// Get all the photosets from this user.
var username_promise = $.getJSON(
flickr.url("flickr.people.findByUsername", "username", user_name));
username_promise.done(function(data) {
if (data.stat === 'fail') {
$("#user_name_error").html("Bad thing!");
return;
}
$("#user_name_error").html("Good thing!");

// Are we already looking at this user?
if (user_nsid === data.user.nsid) {
return;
}

user_nsid = data.user.nsid;

// populate the select box.
var photoset_promise = $.getJSON(
flickr.url("flickr.photosets.getList", "user_id", user_nsid));
photoset_promise.done(function(data) {
var list_element = $("#set_list");

// Clear the list
list_element.empty();

$.each(data.photosets.photoset, function(i, item) {
var option = "<option value='" + item.id + "'";
if (i === 0) {
option += " selected='selected'>";
} else {
option += ">";
}
option += item.title._content + "</option>";
$(option).appendTo(list_element);
});

// Select the first item.
refresh_container();
});
});
}


function skip(p, i) {
return (p / i) | 0;
}


function insert_photos(paragraphs, items) {
var out = "";
var s = paragraphs.length;
if (items.length > 0) {
var ccount = 1;
while (skip(paragraphs.length, items.length / ccount) <= 3) {
ccount++;
}
s = skip(paragraphs.length, items.length / ccount) | 0;
}

for (var i = 0; i < paragraphs.length; i++) {
if (i % s === 0) {
// insert an image container.
for (var j = 0; j < ccount; j++) {
if (items.length > 0) {
var $item = items.shift();
var photo = $item.data("json_result");
var markdown = format_image(photo);
out += markdown;
out += "\n\n";
}
}
}
out += paragraphs[i];
out += "\n\n";
}

// Get the remaining images in.
while (items.length > 0) {
var $item = items.shift();
var photo = $item.data("json_result");
var markdown = format_image(photo);
out += markdown;
out += "\n\n";
}

return out;
}


$("#submit_user_name").click(on_change_user_name);
$("#user_name").change(on_change_user_name);
$("#set_list").change(refresh_container);
$("#submit_report").click(function() {
// Take the text.
// var o = {}.harp();
var text = $("#report_area").val();
// mix the photos in.
var paragraphs = text.split("\n\n");
console.log("there are " + paragraphs.length + " paragraphs");
var items = selected_items();
var count = items.length;
console.log("there are " + count + " selected images");

var output = insert_photos(paragraphs, items);
$("#report_area").val(output);
text = output;

// Put it in the rendered area.
var converter = new Showdown.converter();
var html = converter.makeHtml(text);
// var html = markdown.toHTML(text);
$("#rendered_report").html(html);
});

});

</script>
</head>
<body>

<div id="container">
<h1>Trip report creator</h1>

Enter the flickr username: <input id="user_name" type="text" value="">
<button id="submit_user_name">Submit username</button>
<span id="user_name_error"></span>
<br>

Choose the flickr set you want to associate with the trip report:
<select id="set_list">
</select>
<br>

<div id="image-container" class="clearfix"> </div>

<div id="selected-image-count">0 images selected</div>

Enter your report here, in html or markdown:
<button id="submit_report">Submit report</button><br>
<textarea class="reporttext" id="report_area">
A sample report.
</textarea>

<div id="rendered_report"></div>

</div>

</body>
</html>
Loading

0 comments on commit 680a49e

Please sign in to comment.