Added project files
This commit is contained in:
parent
e6a5153416
commit
b151e56e91
0
.gitignore
vendored
Normal file
0
.gitignore
vendored
Normal file
12
README.md
12
README.md
|
@ -1,4 +1,10 @@
|
||||||
avatar-banner
|
#Interim specification
|
||||||
=============
|
|
||||||
|
Something that automatically creates a grid of images, that links them to relevant Facebook profiles. Need to be able to export html using inline styling.
|
||||||
|
|
||||||
|
#TODO
|
||||||
|
|
||||||
|
1. Better control of grid
|
||||||
|
2. Use jquery to allow for click-drag-adjustments
|
||||||
|
3. Ability to save out a screenshot.
|
||||||
|
|
||||||
Create a configurable banner that uses Facebook profile images.
|
|
28
index.html
Normal file
28
index.html
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<head>
|
||||||
|
<title>Banner bilde for InfoMedia</title>
|
||||||
|
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
|
||||||
|
<script src="scripts/coffee-script.js"></script>
|
||||||
|
<script src="scripts/jquery-1.9.1.min.js"></script>
|
||||||
|
<script type="text/coffeescript">
|
||||||
|
###
|
||||||
|
Create javascript object containing names and usernames from facebook like so
|
||||||
|
www.facebook.com/USERNAME
|
||||||
|
alternatively
|
||||||
|
www.facebook.com/USERID
|
||||||
|
###
|
||||||
|
</script>
|
||||||
|
<script src="scripts/bannerMaker.js"></script>
|
||||||
|
<style type="text/css">
|
||||||
|
#banner, #bannerSource {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Simple Facebook image banner creator</p>
|
||||||
|
<div id='banner'>Inside banner</div>
|
||||||
|
<div id='bannerSource'>Banner source</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
42
scripts/bannerMaker.coffee
Normal file
42
scripts/bannerMaker.coffee
Normal file
|
@ -0,0 +1,42 @@
|
||||||
|
fbImageOptions = "?width=100&height=100"
|
||||||
|
|
||||||
|
fbuserNameObj =
|
||||||
|
'Sindre Skrede': 'sindre.skrede.9'
|
||||||
|
'Nils Norman Haukås': 'nhaukas'
|
||||||
|
'Marie Havnen': 'marie.havnen'
|
||||||
|
'Marie Fonnes': 'mfonnes'
|
||||||
|
'Marianne Monstad': 'mariannemonstad'
|
||||||
|
'Malin D. Øvrebø': 'malin.d.ovrebo'
|
||||||
|
'Lisa Halvorsen': 'lisa.halvorsen1'
|
||||||
|
'Marius Seim': 'marius.seim'
|
||||||
|
'Maiken Beate Fjellanger': 'maiken.b.fjellanger'
|
||||||
|
'Bjørnar Fjeldstad': '739398715'
|
||||||
|
'Hedvig Elisabeth Andersland': 'hedvig.andersland'
|
||||||
|
'Ida Maria Dahr': 'ida.m.nygaard'
|
||||||
|
'Torjus Nafstad': 'torjus.nafstad'
|
||||||
|
|
||||||
|
cssOptionsObj =
|
||||||
|
'margin-bottom': '-5px'
|
||||||
|
###
|
||||||
|
img:hover {
|
||||||
|
margin:-5px 5px 0px -5px;
|
||||||
|
}
|
||||||
|
###
|
||||||
|
|
||||||
|
createImageGridHtml = (userNameObj) ->
|
||||||
|
graphFBAddress = 'https://graph.facebook.com/'
|
||||||
|
imageArray = []
|
||||||
|
for fullName, username of userNameObj
|
||||||
|
imageArray.push "<img src='#{graphFBAddress}#{username}/picture#{fbImageOptions}' title='#{fullName}'>"
|
||||||
|
resultStr = imageArray.join('')
|
||||||
|
resultStr = "<div id='banner'>#{resultStr}</div>"
|
||||||
|
|
||||||
|
styleBanner = (divId) ->
|
||||||
|
$("#{divId}").css 'width', '600px'
|
||||||
|
|
||||||
|
$(document).ready ->
|
||||||
|
console.log 'Starting script'
|
||||||
|
console.log fbuserNameObj
|
||||||
|
$('#banner').replaceWith(createImageGridHtml(fbuserNameObj))
|
||||||
|
styleBanner('#banner')
|
||||||
|
$('#bannerSource').text(createImageGridHtml(fbuserNameObj))
|
55
scripts/bannerMaker.js
Normal file
55
scripts/bannerMaker.js
Normal file
|
@ -0,0 +1,55 @@
|
||||||
|
(function() {
|
||||||
|
var createImageGridHtml, cssOptionsObj, fbImageOptions, fbuserNameObj, styleBanner;
|
||||||
|
|
||||||
|
fbImageOptions = "?width=100&height=100";
|
||||||
|
|
||||||
|
fbuserNameObj = {
|
||||||
|
'Sindre Skrede': 'sindre.skrede.9',
|
||||||
|
'Nils Norman Haukås': 'nhaukas',
|
||||||
|
'Marie Havnen': 'marie.havnen',
|
||||||
|
'Marie Fonnes': 'mfonnes',
|
||||||
|
'Marianne Monstad': 'mariannemonstad',
|
||||||
|
'Malin D. Øvrebø': 'malin.d.ovrebo',
|
||||||
|
'Lisa Halvorsen': 'lisa.halvorsen1',
|
||||||
|
'Marius Seim': 'marius.seim',
|
||||||
|
'Maiken Beate Fjellanger': 'maiken.b.fjellanger',
|
||||||
|
'Bjørnar Fjeldstad': '739398715',
|
||||||
|
'Hedvig Elisabeth Andersland': 'hedvig.andersland',
|
||||||
|
'Ida Maria Dahr': 'ida.m.nygaard',
|
||||||
|
'Torjus Nafstad': 'torjus.nafstad'
|
||||||
|
};
|
||||||
|
|
||||||
|
cssOptionsObj = {
|
||||||
|
'margin-bottom': '-5px'
|
||||||
|
/*
|
||||||
|
img:hover {
|
||||||
|
margin:-5px 5px 0px -5px;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
};
|
||||||
|
|
||||||
|
createImageGridHtml = function(userNameObj) {
|
||||||
|
var fullName, graphFBAddress, imageArray, resultStr, username;
|
||||||
|
graphFBAddress = 'https://graph.facebook.com/';
|
||||||
|
imageArray = [];
|
||||||
|
for (fullName in userNameObj) {
|
||||||
|
username = userNameObj[fullName];
|
||||||
|
imageArray.push("<img src='" + graphFBAddress + username + "/picture" + fbImageOptions + "' title='" + fullName + "'>");
|
||||||
|
}
|
||||||
|
resultStr = imageArray.join('');
|
||||||
|
return resultStr = "<div id='banner'>" + resultStr + "</div>";
|
||||||
|
};
|
||||||
|
|
||||||
|
styleBanner = function(divId) {
|
||||||
|
return $("" + divId).css('width', '600px');
|
||||||
|
};
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
console.log('Starting script');
|
||||||
|
console.log(fbuserNameObj);
|
||||||
|
$('#banner').replaceWith(createImageGridHtml(fbuserNameObj));
|
||||||
|
styleBanner('#banner');
|
||||||
|
return $('#bannerSource').text(createImageGridHtml(fbuserNameObj));
|
||||||
|
});
|
||||||
|
|
||||||
|
}).call(this);
|
8
scripts/coffee-script.js
Normal file
8
scripts/coffee-script.js
Normal file
File diff suppressed because one or more lines are too long
5
scripts/jquery-1.9.1.min.js
vendored
Normal file
5
scripts/jquery-1.9.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
48
style-reset.css
Normal file
48
style-reset.css
Normal file
|
@ -0,0 +1,48 @@
|
||||||
|
/* http://meyerweb.com/eric/tools/css/reset/
|
||||||
|
v2.0 | 20110126
|
||||||
|
License: none (public domain)
|
||||||
|
*/
|
||||||
|
|
||||||
|
html, body, div, span, applet, object, iframe,
|
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||||
|
a, abbr, acronym, address, big, cite, code,
|
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||||
|
small, strike, strong, sub, sup, tt, var,
|
||||||
|
b, u, i, center,
|
||||||
|
dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend,
|
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||||
|
article, aside, canvas, details, embed,
|
||||||
|
figure, figcaption, footer, header, hgroup,
|
||||||
|
menu, nav, output, ruby, section, summary,
|
||||||
|
time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
/* HTML5 display-role reset for older browsers */
|
||||||
|
article, aside, details, figcaption, figure,
|
||||||
|
footer, header, hgroup, menu, nav, section {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
blockquote, q {
|
||||||
|
quotes: none;
|
||||||
|
}
|
||||||
|
blockquote:before, blockquote:after,
|
||||||
|
q:before, q:after {
|
||||||
|
content: '';
|
||||||
|
content: none;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
Loading…
Reference in a new issue