Permalink
Browse files

sharer

  • Loading branch information...
timdream committed Oct 12, 2011
1 parent 1e9d64c commit f32304063913ae52fa9d43f7dc84ccd90fceb835
Showing with 182 additions and 89 deletions.
  1. +11 −4 en/index.html
  2. +45 −57 wordcloud.css
  3. +78 −0 wordcloud.js
  4. +35 −23 wordcloud.scss
  5. +13 −5 zh/index.html
View
@@ -38,14 +38,18 @@
<a id="ready" href="#" class="toggleUI ready center_btn">Ready</a>
<div id="controls" class="toggleUI left_tool">
<ul>
- <li><a href="#" class="changetheme"><span class="famfamfam_sprite color_wheel"></span>Change color scheme</a></li>
+ <li><a href="#" class="changetheme"><span class="famfamfam_sprite color_wheel"></span>Theme</a></li>
<li><a href="#" class="larger"><span class="famfamfam_sprite comment"></span>Larger Text</a></li>
<li><a href="#" class="smaller"><span class="famfamfam_sprite comments"></span>Smaller Text</a></li>
- <!-- disable to novice user
<li><a href="#" class="thicker"><span class="famfamfam_sprite arrow_out"></span>Bigger Gap</a></li>
<li><a href="#" class="thiner"><span class="famfamfam_sprite arrow_in"></span>Smaller Gap</a></li>
- -->
<li><a href="#" class="ready"><span class="famfamfam_sprite arrow_refresh"></span>Regenerate</a></li>
+ </ul>
+</div>
+<div id="interactive" class="toggleUI left_tool">
+ <ul>
+ <li><a href="#" class="facebook"><span class="famfamfam_sprite facebook"></span>Facebook</a></li>
+ <li><a href="#" class="twitter"><span class="famfamfam_sprite twitter"></span>Twitter</a></li>
<li><a href="#" class="save"><span class="famfamfam_sprite disk"></span>Save</a></li>
</ul>
</div>
@@ -180,7 +184,10 @@ <h2>About</h2>
readyList_3: 'Maximum count $2 times',
readyList_3C: 20,
readyList_4: 'Click to start',
- readyList_4C: 17
+ readyList_4C: 17,
+ listHeading: 'Most frequent terms: ',
+ listComma: ', ',
+ listEllipsis: ''
};
</script>
</body>
View
@@ -103,6 +103,9 @@ a {
opacity: 1; }
.left_tool#help {
top: 33px; }
+ .left_tool#interactive {
+ display: none;
+ top: 200px; }
.left_tool#controls {
display: none;
top: 80px; }
@@ -259,60 +262,45 @@ a {
float: right;
width: 16px;
height: 16px; }
-
-.disk {
- background-position: 0 0; }
-
-.award_star_bronze_1 {
- background-position: -18px 0; }
-
-.feed {
- background-position: -36px 0; }
-
-.page_world {
- background-position: -54px 0; }
-
-.drive {
- background-position: -72px 0; }
-
-.arrow_undo {
- background-position: 0 -18px; }
-
-.arrow_refresh {
- background-position: -18px -18px; }
-
-.application_double {
- background-position: -36px -18px; }
-
-.accept {
- background-position: -54px -18px; }
-
-.stop {
- background-position: -72px -18px; }
-
-.cross {
- background-position: 0 -36px; }
-
-.arrow_out {
- background-position: -18px -36px; }
-
-.arrow_in {
- background-position: -36px -36px; }
-
-.comment {
- background-position: -54px -36px; }
-
-.comments {
- background-position: -72px -36px; }
-
-.help {
- background-position: 0 -54px; }
-
-.color_wheel {
- background-position: -18px -54px; }
-
-.facebook {
- background: transparent url("http://wwww.facebook.com/favicon.ico") center center no-repeat; }
-
-.googleplus {
- background: transparent url("https://plus.google.com/favicon.ico") center center no-repeat; }
+ .famfamfam_sprite.disk {
+ background-position: 0 0; }
+ .famfamfam_sprite.award_star_bronze_1 {
+ background-position: -18px 0; }
+ .famfamfam_sprite.feed {
+ background-position: -36px 0; }
+ .famfamfam_sprite.page_world {
+ background-position: -54px 0; }
+ .famfamfam_sprite.drive {
+ background-position: -72px 0; }
+ .famfamfam_sprite.arrow_undo {
+ background-position: 0 -18px; }
+ .famfamfam_sprite.arrow_refresh {
+ background-position: -18px -18px; }
+ .famfamfam_sprite.application_double {
+ background-position: -36px -18px; }
+ .famfamfam_sprite.accept {
+ background-position: -54px -18px; }
+ .famfamfam_sprite.stop {
+ background-position: -72px -18px; }
+ .famfamfam_sprite.cross {
+ background-position: 0 -36px; }
+ .famfamfam_sprite.arrow_out {
+ background-position: -18px -36px; }
+ .famfamfam_sprite.arrow_in {
+ background-position: -36px -36px; }
+ .famfamfam_sprite.comment {
+ background-position: -54px -36px; }
+ .famfamfam_sprite.comments {
+ background-position: -72px -36px; }
+ .famfamfam_sprite.help {
+ background-position: 0 -54px; }
+ .famfamfam_sprite.color_wheel {
+ background-position: -18px -54px; }
+ .famfamfam_sprite.facebook {
+ background: transparent url("http://www.facebook.com/favicon.ico") center center no-repeat; }
+ .famfamfam_sprite.googleplus {
+ background: transparent url("https://plus.google.com/favicon.ico") center center no-repeat; }
+ .famfamfam_sprite.twitter {
+ background: transparent url("https://twitter.com/favicon.ico") center center no-repeat; }
+ .famfamfam_sprite.plurk {
+ background: transparent url("http://www.plurk.com/favicon.ico") center center no-repeat; }
View
@@ -137,6 +137,7 @@ jQuery(function ($) {
resetCanvasSize();
$('#title').show();
$('#controls').show();
+ $('#interactive').show();
$c.show();
setTimeout(
function () {
@@ -352,7 +353,84 @@ jQuery(function ($) {
$('#help_panel').hide();
}
);
+
+ // sharer
+
+ $('#interactive .facebook').bind(
+ 'click',
+ function (ev) {
+ ev.preventDefault();
+ FB.login( // call login no matter connected or not, make sure we logged in.
+ function(response) {
+ if (response.session) {
+ FB.ui(
+ {
+ method: 'feed',
+ link: window.location.href,
+ //picture: '', $c[0].toDataURL(), // won't work, always defaults to og image
+ name: $('#title').text(),
+ caption: document.title,
+ description: (function () {
+ var i = 0, s = [], n = 20;
+ do {
+ s[i] = list[i][0];
+ } while (++i < n);
+
+ return T.listHeading + s.slice(0,n).join(T.listComma) + ((list.length > n)?T.listEllipsis:'')
+ }())
+ },
+ $.noop
+ );
+ }
+ }
+ );
+ }
+ );
+ $('#interactive .twitter').bind(
+ 'click',
+ function (ev) {
+ ev.preventDefault();
+ window.open(
+ 'https://twitter.com/home/?status='
+ + encodeURIComponent(
+ window.location.href + ' '
+ + $('#title').text() + ' '
+ + (function () {
+ var i = 0, s = [], n = 10;
+ do {
+ s[i] = list[i][0];
+ } while (++i < n);
+
+ return T.listHeading + s.slice(0,n).join(T.listComma) + ((list.length > n)?T.listEllipsis:'')
+ }())
+ + ' #HTML5WordCloud'
+ )
+ );
+ }
+ );
+
+ $('#interactive .plurk').bind(
+ 'click',
+ function (ev) {
+ ev.preventDefault();
+ window.open(
+ 'http://plurk.com/?status='
+ + encodeURIComponent(
+ window.location.href
+ + ' ('+ $('#title').text() + ') '
+ + (function () {
+ var i = 0, s = [], n = 10;
+ do {
+ s[i] = list[i][0];
+ } while (++i < n);
+
+ return T.listHeading + s.slice(0,n).join(T.listComma) + ((list.length > n)?T.listEllipsis:'')
+ }())
+ )
+ );
+ }
+ );
// interaction within source panel
var $s = $('input[name=source]');
View
@@ -131,6 +131,10 @@ a {
&#help {
top: 33px;
}
+ &#interactive {
+ display: none;
+ top: 200px;
+ }
&#controls {
display: none;
top: 80px;
@@ -305,28 +309,36 @@ a {
right: 20px;
}
-.famfamfam_sprite {display: block; background: transparent url('famfamfam_sprites.png') no-repeat; text-indent: -10000px; float: right; width: 16px; height: 16px;}
-.disk { background-position: 0 0; }
-.award_star_bronze_1 { background-position: -18px 0; }
-.feed { background-position: -36px 0; }
-.page_world { background-position: -54px 0; }
-.drive { background-position: -72px 0; }
-.arrow_undo { background-position: 0 -18px; }
-.arrow_refresh { background-position: -18px -18px; }
-.application_double { background-position: -36px -18px; }
-.accept { background-position: -54px -18px; }
-.stop { background-position: -72px -18px; }
-.cross { background-position: 0 -36px; }
-.arrow_out { background-position: -18px -36px; }
-.arrow_in { background-position: -36px -36px; }
-.comment { background-position: -54px -36px; }
-.comments { background-position: -72px -36px; }
-.help { background-position: 0 -54px; }
-.color_wheel { background-position: -18px -54px; }
-.facebook {
- background: transparent url('http://wwww.facebook.com/favicon.ico') center center no-repeat;
-}
+.famfamfam_sprite {
+ display: block; background: transparent url('famfamfam_sprites.png') no-repeat; text-indent: -10000px; float: right; width: 16px; height: 16px;
-.googleplus {
- background: transparent url('https://plus.google.com/favicon.ico') center center no-repeat;
+ &.disk { background-position: 0 0; }
+ &.award_star_bronze_1 { background-position: -18px 0; }
+ &.feed { background-position: -36px 0; }
+ &.page_world { background-position: -54px 0; }
+ &.drive { background-position: -72px 0; }
+ &.arrow_undo { background-position: 0 -18px; }
+ &.arrow_refresh { background-position: -18px -18px; }
+ &.application_double { background-position: -36px -18px; }
+ &.accept { background-position: -54px -18px; }
+ &.stop { background-position: -72px -18px; }
+ &.cross { background-position: 0 -36px; }
+ &.arrow_out { background-position: -18px -36px; }
+ &.arrow_in { background-position: -36px -36px; }
+ &.comment { background-position: -54px -36px; }
+ &.comments { background-position: -72px -36px; }
+ &.help { background-position: 0 -54px; }
+ &.color_wheel { background-position: -18px -54px; }
+ &.facebook {
+ background: transparent url('http://www.facebook.com/favicon.ico') center center no-repeat;
+ }
+ &.googleplus {
+ background: transparent url('https://plus.google.com/favicon.ico') center center no-repeat;
+ }
+ &.twitter {
+ background: transparent url('https://twitter.com/favicon.ico') center center no-repeat;
+ }
+ &.plurk {
+ background: transparent url('http://www.plurk.com/favicon.ico') center center no-repeat;
+ }
}
View
@@ -38,14 +38,19 @@
<a id="ready" href="#" class="toggleUI ready center_btn">準備完成</a>
<div id="controls" class="toggleUI left_tool">
<ul>
- <li><a href="#" class="changetheme"><span class="famfamfam_sprite color_wheel"></span>切換色系</a></li>
+ <li><a href="#" class="changetheme"><span class="famfamfam_sprite color_wheel"></span>主題</a></li>
<li><a href="#" class="larger"><span class="famfamfam_sprite comment"></span>放大文字</a></li>
<li><a href="#" class="smaller"><span class="famfamfam_sprite comments"></span>縮小文字</a></li>
- <!-- disable to novice user
- <li><a href="#" class="thicker"><span class="famfamfam_sprite arrow_out"></span>增大間距</a></li>
+ <li><a href="#" class="thicker"><span class="famfamfam_sprite arrow_out"></span>增大間距</a></li>
<li><a href="#" class="thiner"><span class="famfamfam_sprite arrow_in"></span>縮小間距</a></li>
- -->
<li><a href="#" class="ready"><span class="famfamfam_sprite arrow_refresh"></span>重新排列</a></li>
+ </ul>
+</div>
+<div id="interactive" class="toggleUI left_tool">
+ <ul>
+ <li><a href="#" class="facebook"><span class="famfamfam_sprite facebook"></span>Facebook</a></li>
+ <li><a href="#" class="twitter"><span class="famfamfam_sprite twitter"></span>Twitter</a></li>
+ <li><a href="#" class="plurk"><span class="famfamfam_sprite plurk"></span>噗浪分享</a></li>
<li><a href="#" class="save"><span class="famfamfam_sprite disk"></span>儲存圖片</a></li>
</ul>
</div>
@@ -184,7 +189,10 @@ <h2>關於</h2>
readyList_3: '最多重複 $2 次',
readyList_3C: 20,
readyList_4: '點選後開始',
- readyList_4C: 17
+ readyList_4C: 17,
+ listHeading: '最常出現的詞彙:',
+ listComma: '',
+ listEllipsis: ''
};
</script>
</body>

0 comments on commit f323040

Please sign in to comment.