]> git.mxchange.org Git - friendica.git/commitdiff
diabook-themes: add "last tweets"-box to right_aside, that searches for #friendica...
authortommy tomson <thomas.bierey@gmx.de>
Tue, 1 May 2012 00:33:55 +0000 (02:33 +0200)
committertommy tomson <thomas.bierey@gmx.de>
Tue, 1 May 2012 00:33:55 +0000 (02:33 +0200)
view/theme/diabook/communityhome.tpl
view/theme/diabook/js/README
view/theme/diabook/js/jquery.twitter.search.js [new file with mode: 0644]
view/theme/diabook/style-network.css
view/theme/diabook/theme.php

index 66f93c32d825a0ef08ea82909e0541c2379a21f9..5fb6eb5e2e42ac8a5df76b9a9cf9692c0c108f45 100755 (executable)
@@ -42,6 +42,9 @@ $nv.search
 {{ endif }}
 </div>
 
+<div id="twitter">
+</div>
+
 <div id="close_lastusers">
 {{ if $lastusers_title }}
 <h3>$lastusers_title<a id="close_lastusers_icon" onClick="close_lastusers()" class="icon close_box" title="close"></a></h3>
index 57ca16d020c4b65395dfe8c669021104c2edd00c..12447afc9819d383dc649f7adbc58abbca61decb 100644 (file)
@@ -24,3 +24,8 @@ $(function() {
 _______________________________________________________________________________________________
 
 http://javascriptly.com/examples/jquery-grab-bag/autogrow-textarea.html
+
+_______________________________________________________________________________________________
+
+http://jquery.malsup.com/
+http://jquery.malsup.com/twitter/
diff --git a/view/theme/diabook/js/jquery.twitter.search.js b/view/theme/diabook/js/jquery.twitter.search.js
new file mode 100644 (file)
index 0000000..18d2e09
--- /dev/null
@@ -0,0 +1,289 @@
+/*!
+ * jQuery Twitter Search Plugin
+ * Examples and documentation at: http://jquery.malsup.com/twitter/
+ * Copyright (c) 2010 M. Alsup
+ * Version: 1.04 (15-SEP-2011)
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ * Requires: jQuery v1.3.2 or later
+ */
+;(function($) {
+       $.fn.twitterSearch = function(options) {
+               if (typeof options == 'string')
+                       options = { term: options };
+               return this.each(function() {
+                       var grabFlag = false,
+                               grabbing = false,
+                               $frame = $(this), text, $text, $title, $bird, $cont, height, paused = false,
+                               opts = $.extend(true, {}, $.fn.twitterSearch.defaults, options || {}, $.metadata ? $frame.metadata() : {});
+                               
+                       opts.formatter = opts.formatter || $.fn.twitterSearch.formatter; 
+                       opts.filter = opts.filter || $.fn.twitterSearch.filter;
+                       
+                       if (!opts.applyStyles) { // throw away all style defs
+                               for (var css in opts.css)
+                                       opts.css[css] = {};
+                       }
+                       
+                       if (opts.title === null) // user can set to '' to suppress title
+                               opts.title = opts.term;
+
+                       opts.title = opts.title || '';
+                       text = opts.titleLink ? ('<a href="'+ opts.titleLink +'">'+ opts.title + '</a>') : ('<span>' + opts.title +'<a id="close_friends_icon" onClick="close_twitter()"  class="icon close_box" title="close"></a>'+ '</span>');
+                       $text = $(text);
+                       if (opts.titleLink)
+                               $text.css(opts.css['titleLink']);
+                       $title = $('<div class="twitterSearchTitle"></div>').append($text).appendTo($frame).css(opts.css['title']);
+                       if (opts.bird) {
+                               $bird = $('<img class="twitterSearchBird" src="'+opts.birdSrc+'" />').appendTo($title).css(opts.css['bird']);
+                               if (opts.birdLink)
+                                       $bird.wrap('<a href="'+ opts.birdLink +'"></a>');
+                       }
+                       $cont = $('<div class="twitterSearchContainter"></div>').appendTo($frame).css(opts.css['container']);
+                       cont = $cont[0];
+                       if (opts.colorExterior)
+                               $title.css('background-color',opts.colorExterior);
+                       if (opts.colorInterior)
+                               $cont.css('background-color',opts.colorInterior);
+                       
+                       $frame.css(opts.css['frame']);
+                       if (opts.colorExterior)
+                               $frame.css('border-color',opts.colorExterior);
+                       
+                       height = $frame.innerHeight() - $title.outerHeight();
+                       $cont.height(height);
+                       
+                       if (opts.pause)
+                               $cont.hover(function(){paused = true;},function(){paused = false;});
+                       
+                       $('<div class="twitterSearchLoading">Loading tweets..</div>').css(opts.css['loading']).appendTo($cont);
+                       
+                       grabTweets();
+                       
+                       function grabTweets() {
+                               var url = opts.url + opts.term;
+                               grabFlag = false;
+                               grabbing = true;
+                               // grab twitter stream
+                               $.getJSONP({
+                                       url: url,
+                                       timeout: 30000,
+                                       error: function(xhr, status, e) {
+                                               failWhale(e);
+                                       },
+                                       complete: function() {
+                                               grabbing = false;
+                                               if (opts.refreshSeconds)
+                                                       setTimeout(regrab, opts.refreshSeconds * 1000);
+                                       },
+                                       success: function(json) {
+                                               if (json.error) {
+                                                       failWhale(json.error);
+                                                       return;
+                                               }
+                                               $cont.fadeOut('fast',function() {
+                                                       $cont.empty();
+                                                       
+                                                       // iterate twitter results 
+                                                       $.each(json.results, function(i) {
+                                                               if (!opts.filter.call(opts, this))
+                                                                       return; // skip this tweet
+                                                               var $img, $text, w,
+                                                                       tweet = opts.formatter(this, opts), 
+                                                                       $tweet = $(tweet);
+                                                               $tweet.css(opts.css['tweet']);
+                                                               $img = $tweet.find('.twitterSearchProfileImg').css(opts.css['img']);
+                                                               $tweet.find('.twitterSearchUser').css(opts.css['user']);
+                                                               $tweet.find('.twitterSearchTime').css(opts.css['time']);
+                                                               $tweet.find('a').css(opts.css['a']);
+                                                               $tweet.appendTo($cont);
+                                                               $text = $tweet.find('.twitterSearchText').css(opts.css['text']);
+                                                               if (opts.avatar) {
+                                                                       w = $img.outerWidth() + parseInt($tweet.css('paddingLeft'));
+                                                                       $text.css('paddingLeft', w);
+                                                               }
+                                                       });
+                                                       
+                                                       $cont.fadeIn('fast');
+                                               
+                                                       if (json.results.length < 2) {
+                                                               if (opts.refreshSeconds)
+                                                                       setTimeout(grabTweets, opts.refreshSeconds * 1000);
+                                                               return;
+                                                       }
+
+                                                       // stage first animation
+                                                       setTimeout(go, opts.timeout);
+                                               });
+                                       }
+                               });
+                       };
+                       
+                       function regrab() {
+                               grabFlag = true;
+                       }
+                       
+                       function failWhale(msg) {
+                               var $fail = $('<div class="twitterSearchFail">' + msg + '</div>').css(opts.css['fail']);
+                               $cont.empty().append($fail);
+                       };
+                       
+                       function go() {
+                               if (paused || grabbing) {
+                                       setTimeout(go, 500);
+                                       return;
+                               }
+                               var h, $el = $cont.children(':first'), el = $el[0];
+                               $el.animate(opts.animOut, opts.animOutSpeed, function() {
+                                       h = $el.outerHeight();
+                                       $el.animate({ marginTop: -h }, opts.animInSpeed, function() {
+                                               $el.css({ marginTop: 0, opacity: 1 });
+                                               /*@cc_on
+                                               try { el.style.removeAttribute('filter'); } // ie cleartype fix
+                                               catch(smother) {}
+                                               @*/
+                                               $el.css(opts.css['tweet']).show().appendTo($cont);
+                                               
+                                               setTimeout(grabFlag ? grabTweets : go, opts.timeout);                                   
+                                       });
+                               });
+                       }
+               });
+       };
+       
+       $.fn.twitterSearch.filter = function(tweet) {
+               return true;
+       };
+
+       $.fn.twitterSearch.formatter = function(json, opts) {
+               var str, pretty,
+                       text = json.text;
+               if (opts.anchors) {
+                       text = json.text.replace(/(http:\/\/\S+)/g, '<a href="$1">$1</a>');
+                       text = text.replace(/\@(\w+)/g, '<a href="http://twitter.com/$1">@$1</a>');
+               }
+               str = '<div class="twitterSearchTweet">';
+               if (opts.avatar)
+                       str += '<img class="twitterSearchProfileImg" src="' + json.profile_image_url + '" />';
+               str += '<div><span class="twitterSearchUser"><a href="http://www.twitter.com/'+ json.from_user+'/status/'+ json.id_str +'">' 
+                 + json.from_user + '</a></span>';
+               pretty = prettyDate(json.created_at);
+               if (opts.time && pretty)
+                       str += ' <span class="twitterSearchTime">('+ pretty +')</span>'
+                str += '<div class="twitterSearchText">' + text + '</div></div></div>';
+                return str;
+       };
+       
+       $.fn.twitterSearch.defaults = {
+               url: 'http://search.twitter.com/search.json?callback=?&q=',
+               anchors: true,                          // true or false (enable embedded links in tweets)
+               animOutSpeed: 500,                      // speed of animation for top tweet when removed
+               animInSpeed: 500,                       // speed of scroll animation for moving tweets up
+               animOut: { opacity: 0 },        // animation of top tweet when it is removed
+               applyStyles: true,                      // true or false (apply default css styling or not)
+               avatar: true,                           // true or false (show or hide twitter profile images)
+               bird: true,                                     // true or false (show or hide twitter bird image)
+               birdLink: false,                        // url that twitter bird image should like to
+               birdSrc: 'http://cloud.github.com/downloads/malsup/twitter/tweet.gif', // twitter bird image
+               colorExterior: null,        // css override of frame border-color and title background-color
+               colorInterior: null,        // css override of container background-color
+               filter: null,               // callback fn to filter tweets:  fn(tweetJson) { /* return false to skip tweet */ }
+               formatter: null,                        // callback fn to build tweet markup
+               pause: false,                           // true or false (pause on hover)
+               refreshSeconds: 0,          // number of seconds to wait before polling for newer tweets
+               term: '',                                       // twitter search term
+               time: true,                                     // true or false (show or hide the time that the tweet was sent)
+               timeout: 4000,                          // delay betweet tweet scroll
+               title: null,                            // title text to display when frame option is true (default = 'term' text)
+               titleLink: null,                        // url for title link
+               css: {
+                       // default styling
+                       a:     { textDecoration: 'none', color: '#3B5998' },
+                       bird:  { width: '50px', height: '20px', position: 'absolute', left: '-30px', top: '-20px', border: 'none' },
+                       container: { overflow: 'hidden', backgroundColor: '', height: '360px' },
+                       fail:  { background: '#6cc5c3 url(http://cloud.github.com/downloads/malsup/twitter/failwhale.png) no-repeat 50% 50%', height: '100%', padding: '10px' },
+                       frame: { border: '0px solid #C2CFF1', borderRadius: '0px', '-moz-border-radius': '0px', '-webkit-border-radius': '0px' },
+                       tweet: { padding: '5px 10px', clear: 'left' },
+                       img:   { 'float': 'left', margin: '5px', width: '48px', height: '48px' },
+                       loading: { padding: '20px', textAlign: 'center', color: '#888' },
+                       text:  {},
+                       time:  { fontSize: 'smaller', color: '#888' },
+                       title: { 'border-bottom': '1px solid #D2D2D2', 'padding-top': '5px', 'padding-bottom': '0px', 'padding-left': '9px', 'margin-bottom': '0px', 'margin-top': '30px' , 'display': 'block', 'font-size': '1.17em', 'font-weight': 'bold'},
+                       titleLink: { textDecoration: 'none', color: '#3B5998' },
+                       user:  { fontWeight: 'bold' }
+               }
+       };
+
+    // fn to handle jsonp with timeouts and errors
+    // hat tip to Ricardo Tomasi for the timeout logic
+    $.getJSONP = function(s) {
+        s.dataType = 'jsonp';
+        $.ajax(s);
+
+        // figure out what the callback fn is
+        var $script = $(document.getElementsByTagName('head')[0].firstChild);
+        var url = $script.attr('src') || '';
+        var cb = (url.match(/callback=(\w+)/)||[])[1];
+        if (!cb)
+            return; // bail
+        var t = 0, cbFn = window[cb];
+
+        $script[0].onerror = function(e) {
+            $script.remove();
+            handleError(s, {}, "error", e);
+            clearTimeout(t);
+        };
+
+        if (!s.timeout)
+            return;
+
+        window[cb] = function(json) {
+            clearTimeout(t);
+            cbFn(json);
+            cbFn = null;
+        };
+
+        t = setTimeout(function() {
+            $script.remove();
+            handleError(s, {}, "timeout");
+            if (cbFn)
+                window[cb] = function(){};
+        }, s.timeout);
+        
+        function handleError(s, xhr, msg, e) {
+                       s.error && s.error.call(s.context, xhr, msg, e);
+                       s.global && $.event.trigger("ajaxError", [xhr, s, e || msg]);
+                       s.complete && s.complete.call(s.context, xhr, e || msg);
+        }
+    };
+       
+       /*
+        * JavaScript Pretty Date
+        * Copyright (c) 2008 John Resig (jquery.com)
+        * Licensed under the MIT license.
+        */
+       // converts ISO time to casual time
+       function prettyDate(time){
+               var date = new Date((time || "").replace(/-/g,"/").replace(/TZ/g," ")),
+                       diff = (((new Date()).getTime() - date.getTime()) / 1000),
+                       day_diff = Math.floor(diff / 86400);
+                               
+               if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
+                       return;
+               var v = day_diff == 0 && (
+                               diff < 60 && "just now" ||
+                               diff < 120 && "1 minute ago" ||
+                               diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
+                               diff < 7200 && "1 hour ago" ||
+                               diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
+                       day_diff == 1 && "Yesterday" ||
+                       day_diff < 7 && day_diff + " days ago" ||
+                       day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
+               if (!v)
+                       window.console && console.log(time);
+               return v ? v : '';
+       }
+
+})(jQuery);
index a8ed1e9a2544dd3aba1800fc0604fcf7a03b887d..2ba8d1b074ca26d5f729e12793cf93de8aca7b50 100644 (file)
@@ -1252,6 +1252,7 @@ right_aside .icon {width: 10px; height: 10px;}
 transition: all 0.2s ease-in-out;
                }
 
+
 /* wall item */
 .tread-wrapper {
   border-bottom: 1px solid #D2D2D2;
index 9a1ac0f68a85b8db582453feea533806291f9efe..ffa480f3bcd62dabac623eb4372c5b3460e009d7 100755 (executable)
@@ -3,13 +3,13 @@
 /*
  * Name: Diabook
  * Description: Diabook: report bugs and request here: http://pad.toktan.org/p/diabook or contact me : thomas_bierey@friendica.eu
- * Version: (Version: 1.023)
+ * Version: (Version: 1.024)
  * Author: 
  */
 
 
 //print diabook-version for debugging
-$diabook_version = "Diabook (Version: 1.023)";
+$diabook_version = "Diabook (Version: 1.024)";
 $a->page['htmlhead'] .= sprintf('<script "%s" ></script>', $diabook_version);
 
 //change css on network and profilepages
@@ -266,9 +266,9 @@ if ($a->argv[0] === "network" && local_user()){
 
        }
        
-       $ccCookie = $_COOKIE['close_pages'] + $_COOKIE['close_helpers'] + $_COOKIE['close_services'] + $_COOKIE['close_friends'] + $_COOKIE['close_lastusers'] + $_COOKIE['close_lastphotos'] + $_COOKIE['close_lastlikes'];
+       $ccCookie = $_COOKIE['close_pages'] + $_COOKIE['close_helpers'] + $_COOKIE['close_services'] + $_COOKIE['close_friends'] + $_COOKIE['close_twitter'] + $_COOKIE['close_lastusers'] + $_COOKIE['close_lastphotos'] + $_COOKIE['close_lastlikes'];
        
-       if($ccCookie != "7") {
+       if($ccCookie != "8") {
        // COMMUNITY
        diabook_community_info();
 
@@ -282,7 +282,7 @@ if ($a->argv[0] === "network" && local_user()){
 
 //right_aside at profile pages
 if ($a->argv[0].$a->argv[1] === "profile".$a->user['nickname']){
-       if($ccCookie != "7") {
+       if($ccCookie != "8") {
        // COMMUNITY
        diabook_community_info();
        
@@ -312,6 +312,10 @@ $a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></scrip
 $autogrowJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.autogrow.textarea.js";
 $a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $autogrowJS);
 
+//load jquery.twitter.search.js
+$twitterJS = $a->get_baseurl($ssl_state)."/view/theme/diabook/js/jquery.twitter.search.js";
+$a->page['htmlhead'] .= sprintf('<script language="JavaScript" src="%s" ></script>', $twitterJS);
+
 //js scripts
 
 //check if community_home-plugin is activated and change css
@@ -343,8 +347,17 @@ $a->page['htmlhead'] .= '
 $a->page['htmlhead'] .= '
 
 <script>
+
  $(function() {
        $("a.lightbox").fancybox(); // Select all links with lightbox class
+       $("#twitter").twitterSearch({               
+       term: "friendica",
+       animInSpeed: 250,
+       bird:    false, 
+       avatar:  false, 
+       colorExterior: "#fff",
+       title: "Last tweets",
+       timeout: 10000          });
  });
    
 $(window).load(function() {
@@ -431,6 +444,7 @@ function restore_boxes(){
        $.cookie("close_helpers","2", { expires: 365, path: "/" });
        $.cookie("close_services","2", { expires: 365, path: "/" });
        $.cookie("close_friends","2", { expires: 365, path: "/" });
+       $.cookie("close_twitter","2", { expires: 365, path: "/" });
        $.cookie("close_lastusers","2", { expires: 365, path: "/" });
        $.cookie("close_lastphotos","2", { expires: 365, path: "/" });
        $.cookie("close_lastlikes","2", { expires: 365, path: "/" });
@@ -450,7 +464,7 @@ $a->page['htmlhead'] .= '
 </script>';
 
 
-       if($ccCookie != "7") {
+       if($ccCookie != "8") {
 $a->page['htmlhead'] .= '
 <script>
 $("right_aside").ready(function(){
@@ -475,6 +489,10 @@ $("right_aside").ready(function(){
                document.getElementById( "close_friends" ).style.display = "none";
                        };
        
+       if($.cookie("close_twitter") == "1") 
+               {
+               document.getElementById( "twitter" ).style.display = "none";
+                       };      
                        
        if($.cookie("close_lastusers") == "1") 
                {
@@ -512,7 +530,11 @@ function close_friends(){
  document.getElementById( "close_friends" ).style.display = "none";
  $.cookie("close_friends","1", { expires: 365, path: "/" });
  };
-
+function close_twitter(){
+ document.getElementById( "twitter" ).style.display = "none";
+ $.cookie("close_twitter","1", { expires: 365, path: "/" });
+ };
  
 function close_lastusers(){
  document.getElementById( "close_lastusers" ).style.display = "none";