Skip to content

Commit

Permalink
Add tagcloud.jquery.min.js to display the sphere tag cloud in the hom…
Browse files Browse the repository at this point in the history
…e section;

Remove tick in dropdowns;
Ask for Facebook login only once;
  • Loading branch information
barriosnahuel committed Sep 20, 2013
1 parent 8a0469d commit 2341203
Show file tree
Hide file tree
Showing 5 changed files with 208 additions and 20 deletions.
5 changes: 5 additions & 0 deletions css/spoken-today.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,11 @@ footer a:hover {

/***********************************************************************************/
/*************************** Own classes and definitions ***************************/
#tagcloud {
margin-left: auto;
margin-right: auto;
}

.st-closeable span {
cursor: pointer;
}
Expand Down
20 changes: 14 additions & 6 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,12 @@

<ul class="nav navbar-nav">
<li class="active st-topNews-menuItem">
<a href="#top" data-toggle="tab">
<a href="#home" data-toggle="tab">
<span class="glyphicon glyphicon-home"></span>
</a>
</li>
<li class="st-topNews-menuItem">
<a href="#top" data-toggle="tab">
<span class="glyphicon glyphicon-star"></span>Top
</a>
</li>
Expand Down Expand Up @@ -128,8 +133,13 @@
<div class="row">
<div class="col-md-12">
<div class="tab-content">
<section class="row tab-pane fade in active" id="top">
<div id="instagramPopularPhotos">
<section class="row tab-pane fade in active" id="home">
<div id="tagcloud">
<ul></ul>
</div>
</section>
<section class="row tab-pane fade in" id="top">
<div id="instagramPopularPhotos">
<h3>
<a href="http://instagram.com/" target="_blank" title="Navigate to Instagram official site">Instagram</a>
popular photos
Expand Down Expand Up @@ -257,6 +267,7 @@ <h4 class="modal-title">Facebook login</h4>
<script type="text/javascript" src="js/lib/codebird-js-2.4.1/codebird.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/lib/jsrender.js"></script>
<script type="text/javascript" src="js/lib/tagcloud.jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("feeds", "1");</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/1.5.25/jquery.isotope.min.js"></script>
Expand All @@ -280,9 +291,6 @@ <h4 class="modal-title">Facebook login</h4>
<script id="menuItemTemplate" type="text/x-jsrender">
<li {{if closeable}}class="st-closeable"{{/if}}>
<a href="#{{:topicId}}" data-toggle="tab">
{{if !closeable}}
<span class="glyphicon glyphicon-ok"></span>
{{/if}}
{{:topicName}}
</a>
{{if closeable}}
Expand Down
2 changes: 2 additions & 0 deletions js/app/service/socialNetworks.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,8 @@ app.service.socialNetworks.facebook = (function () {
var myModal = $(modalSelector);
myModal.modal();

app.properties.facebook.displayed = true;

FB.Event.subscribe('auth.login', function (response) {
if (response.status === 'connected') {
app.properties.facebook.enabled = true;
Expand Down
84 changes: 70 additions & 14 deletions js/app/ui/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ var app = app || {};
app.properties = app.properties || {};
app.properties.facebook = app.properties.facebook || {};
app.properties.facebook.enabled = false;
app.properties.facebook.displayed = false;

app.ui = app.ui || {};

Expand Down Expand Up @@ -292,17 +293,22 @@ app.ui.index = (function () {
entry.find('>span').on('click', function (event) {
entry.remove();
$('section[id=' + templateData.topicId + ']').remove();
showSection('top');
showSection('home');
});
}

var cloudList = home.$tagCloud.find('>ul');
cloudList.append('<li><a href="' + topicNameElementSelector + '">' + topicName + '</a></li>');

$(cloudList.find('>li>a[href=' + topicNameElementSelector + ']')).on('click', {containerSelector: containerSelector}, onMenuItemSelected);

$(containerSelector + ' a[href=' + topicNameElementSelector + ']').on('click', {containerSelector: containerSelector},
onMenuItemSelected);

function onMenuItemSelected(event) {
event.preventDefault();

if (!app.properties.facebook.enabled) {
if (!app.properties.facebook.enabled && !app.properties.facebook.displayed) {
app.service.socialNetworks.facebook.showLogin('#myModal');
}

Expand Down Expand Up @@ -362,7 +368,7 @@ app.ui.index = (function () {
var onSubmit = function (event) {
event.preventDefault();

if (!app.properties.facebook.enabled) {
if (!app.properties.facebook.enabled && !app.properties.facebook.displayed) {
app.service.socialNetworks.facebook.showLogin('#myModal');
}
// TODO : Functionality : Check what to do if the custom query contains only meta characters.
Expand All @@ -381,7 +387,7 @@ app.ui.index = (function () {
};
}());

var init = function () {
var init = function (callback) {

var findLocalTrends = function () {

Expand All @@ -402,6 +408,8 @@ app.ui.index = (function () {
createEntry('#localTrends', localTrends[index].name, false);
}

home.init(undefined);

$localTrendsLIParent = $('#localTrends').parent();
$dropdownLabel = $localTrendsLIParent.find('>a');
$dropdownLabel.html(countryName + $dropdownLabel.html());
Expand Down Expand Up @@ -451,6 +459,8 @@ app.ui.index = (function () {
createEntry('#globalTrends', globalTrends[relativeGlobalTrendsIndex].name, false);
}

home.init(undefined);

$('#globalTrends').parent().show();
};

Expand All @@ -465,6 +475,8 @@ app.ui.index = (function () {
for (relativeGlobalTrendsIndex; relativeGlobalTrendsIndex < globalTrends.length; relativeGlobalTrendsIndex++) {
createEntry('#globalTrends', globalTrends[relativeGlobalTrendsIndex].name, false);
}

home.init(undefined);
};

// End method definitions
Expand All @@ -474,6 +486,8 @@ app.ui.index = (function () {
findLocalTrends();
$.when(app.service.socialNetworks.twitter.findGlobalTrends()).done(onSuccessTwitterGlobalSearch);
$.when(app.service.google.search.findTrends(undefined)).done(onSuccessGoogleGlobalSearch);

callback();
};

return {
Expand All @@ -483,6 +497,54 @@ app.ui.index = (function () {
}());

var home = (function () {
var $tagCloud = $('#tagcloud');

var init = function (callback) {
var settings = {
//height of sphere container
height: 400,
//width of sphere container
width: 400,
//radius of sphere
radius: 150,
//rotation speed
speed: 0.5,
//sphere rotations slower
slower: 0.9,
//delay between update position
timer: 10,
//dependence of a font size on axis Z
fontMultiplier: 15,
//tag css stylies on mouse over
hoverStyle: {
border: 'none',
color: '#0b2e6f'
},
//tag css stylies on mouse out
mouseOutStyle: {
border: '',
color: ''
}
};
$tagCloud.tagoSphere(settings);

if (callback) {
callback();
}
};

var show = function () {
showSection('home');
};

return {
$tagCloud: $tagCloud,
init: init,
show: show
};
}());

var top = (function () {
var init = function () {
app.service.socialNetworks.instagram.findTrends(function (data) {
var instagramDiv = $('#instagramPopularPhotos'), index, templateData;
Expand All @@ -500,20 +562,14 @@ app.ui.index = (function () {
});
};

var show = function () {
showSection('top');
};

return {
init: init,
show: show
};
init: init
}
}());

var init = function () {
menu.init();
home.init();
home.show();
menu.init(home.init.bind(null, home.show));
top.init();
};

return {
Expand Down
117 changes: 117 additions & 0 deletions js/lib/tagcloud.jquery.min.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
(function (h) {
var l;
var k = {halfHeight: null, halfWidth: null, hwratio: null, dtr: null, diameter: null, speedX: null, speedY: null, tLength: null};
var e = {height: 400, width: 400, radius: 150, speed: 3, slower: 0.9, timer: 5, fontMultiplier: 15, hoverStyle: {border: "1px solid #935C26", color: "#935C26"}, mouseOutStyle: {border: "none", color: "red"}};
var i = {mouseOver: null, lastFy: null, lastFx: null, sy: null, cy: null, sx: null, cx: null, mouseX: null, mouseY: null};
var m = {};
jQuery.fn.tagoSphere = function (n) {
m = jQuery.extend(e, n);
f(this);
g(this);
b();
a();
setInterval(c, m.timer);
return this
};
function b() {
k.halfHeight = m.height / 2;
k.halfWidth = m.width / 2;
k.speedX = m.speed / k.halfWidth;
k.speedY = m.speed / k.halfHeight;
k.dtr = Math.PI / 180;
k.diameter = m.radius * 2;
k.hwratio = m.height / m.width;
k.whratio = m.width / m.height;
k.tLength = l.length - 1;
i.mouseOver = false;
i.lastFx = m.speed;
i.lastFy = m.speed
}

function f(n) {
n.height(m.height);
n.width(m.width);
n.css({overflow: "hidden", position: "relative"});
n.mousemove(function (o) {
i.mouseX = o.pageX - this.offsetLeft;
i.mouseY = o.pageY - this.offsetTop
});
n.hover(function () {
i.mouseOver = true
}, function () {
i.mouseOver = false
})
}

function g(p) {
l = p.children("ul").children();
l.css({position: "absolute", "list-style-type": "none", "list-style-position": "outside", "list-style-image": "none"});
for (var n = 0; n < l.length; n++) {
var q = jQuery(l[n]);
var o = jQuery(q.children()[0]);
l[n] = q;
q.hover(function () {
jQuery(this).css(m.hoverStyle)
}, function () {
jQuery(this).css(m.mouseOutStyle)
})
}
}

function a() {
var q = 0;
var p = 0;
var n = k.tLength + 1;
var o = 0;
while (o++ < n) {
q = Math.acos(-1 + (2 * o - 1) / n);
p = Math.sqrt(n * Math.PI) * q;
l[o - 1].cx = m.radius * Math.cos(p) * Math.sin(q);
l[o - 1].cy = m.radius * Math.sin(p) * Math.sin(q);
l[o - 1].cz = m.radius * Math.cos(q);
l[o - 1].h = jQuery(l[o - 1]).height() / 4;
l[o - 1].w = jQuery(l[o - 1]).width() / 4
}
}

function d(n, o) {
i.sy = Math.sin(n * k.dtr);
i.cy = Math.cos(n * k.dtr);
i.sx = Math.sin(o * k.dtr);
i.cx = Math.cos(o * k.dtr)
}

function c() {
var o;
var p;
if (i.mouseOver) {
o = m.speed - k.speedY * i.mouseY;
p = k.speedX * i.mouseX - m.speed
} else {
o = i.lastFy * m.slower;
p = i.lastFx * m.slower
}
if (i.lastFy != o || i.lastFx != p) {
d(o, p);
i.lastFy = o;
i.lastFx = p
}
if (Math.abs(o) > 0.01 || Math.abs(p) > 0.01) {
j = -1;
while (j++ < k.tLength) {
rx1 = l[j].cx;
ry1 = l[j].cy * i.cy + l[j].cz * -i.sy;
rz1 = l[j].cy * i.sy + l[j].cz * i.cy;
l[j].cx = rx1 * i.cx + rz1 * i.sx;
l[j].cy = l[j].cy * i.cy + l[j].cz * -i.sy;
l[j].cz = rx1 * -i.sx + rz1 * i.cx;
var n = k.diameter / (k.diameter + l[j].cz);
l[j].x = l[j].cx * n;
l[j].y = l[j].cy * n;
l[j].alpha = n / 2;
l[j].css({left: k.whratio * (l[j].x - l[j].w * n) + k.halfWidth, top: k.hwratio * (l[j].y - l[j].h * n)
+ k.halfHeight, opacity: l[j].alpha, "font-size": m.fontMultiplier * l[j].alpha + "px", "z-index": Math.round(-l[j].cz)})
}
}
}
})(jQuery);

0 comments on commit 2341203

Please sign in to comment.