AJAX, jQuery, webtjenester, real tids kommentering, JSON etc.

[Gjest Slettet+9871234]

I den siste tid har der vært noen emner her som har tatt opp AJAX, jQuery etc.

 

For den interesserte leser klipper jeg inn noen kode snutter uten kommentarer (for dem som ikke forstår koden anbefaler jeg å kjøpe boken) fra boken: http://www.packtpub.com/drupal-6-javascript-and-jquery/book Eksemplene er hentet fra kapittel 7. Koden er som tittelen på boken antyder basert på Drupal 6. Koden burde med litt omskriving kunne benyttes på ikke drupal drevne siter. Koden er ikke fullstendig. (Mange andre filer mangler som andre .js filer .css styling etc.) Alt som skal til for å få de to nedenstående eksemplene til å fungere i Drupal 6 ligger i kapittel 7. Alt må som beskrevet i boken lastes opp til riktig mappe i Drupal systemet. Den fullstendige koden kan lastes ned umiddelbart om man kjøper boken i PDF format. Der er den også forklart i detalj. Merk at om du bruker Drupal, må koblingen til ulike filer legges i en såkalt .info fil. Det er forklart hvordan i boken.

 

1. Sanntid kommentar meldinger ved bruk av JSON - JSON view.

Koden til commentwatcher.js

 

// $Id$

/**
* Watch for new comments and display a message when a comment 
* is posted.
*
* @file
*/
var CommentWatcher = CommentWatcher || {settings: {}};

CommentWatcher.settings.path = 'newest_comment';
CommentWatcher.settings.maxLength = 128;
CommentWatcher.settings.showSeconds = 7;
CommentWatcher.settings.checkSeconds = 10;

Drupal.behaviors.commentWatcher = function () {
 if ($('#comment_watcher').length == 0) {
   $('body').append('<div id="comment_watcher"></div>');
   CommentWatcher.check();
   var checkInterval = CommentWatcher.settings.checkSeconds * 1000;
   setInterval(CommentWatcher.check, checkInterval);
 }
}

CommentWatcher.check = function () {
 var url = Drupal.settings.basePath + CommentWatcher.settings.path;

 jQuery.getJSON(url, function (data, result) {
   if (result != 'success') {
     return;
   }
   var comment = data[0];
   if (comment.cid > CommentWatcher.getLastID()) {
     CommentWatcher.setLastID(comment.cid);
     var content = Drupal.theme('commentArea', comment);
     var hideInterval = CommentWatcher.settings.showSeconds * 1000;

     $('#comment_watcher').append(content).show('slow');

     setTimeout(function () {
       $('#comment_watcher').hide('slow', function () {
         $(this).find('#' + comment.cid).remove();
       });
     }, hideInterval);
   }

 });
}

CommentWatcher.setLastID = function (lastCommentID) {
 var oneDay = 1000 * 60 * 60 * 24;
 var expireTime = (new Date()).getTime() + oneDay;
 var expire = new Date(expireTime).toGMTString();
 var myCookie = 'last_comment_id=' + lastCommentID + '; expires=' +
   expire + '; path=' + Drupal.settings.basePath;
 document.cookie = myCookie;
}

CommentWatcher.getLastID = function() {
 var found = document.cookie.match(/last_comment_id=([\d]+);/);
 if (!found || found.length < 2) {
   return 0;
 }
 return new Number(found[1]);
}

CommentWatcher.formatComment = function (text) {
 text = $(text).parent().text();//Drupal.checkPlain(text);
 if (text.length > CommentWatcher.settings.maxLength) {
   text = text.substring(0, CommentWatcher.settings.maxLength);
   var lastSpace = text.lastIndexOf(' ');
   if (lastSpace > 0) {
     text = text.substring(0, lastSpace);
   }
   text += '...';
 }
 return text;
}

Drupal.theme.prototype.commentArea = function (comment) {
 var text = CommentWatcher.formatComment(comment.comments_comment);
 var node_url = Drupal.settings.basePath + '/node/' + 
   comment.node_comments_nid;
 var title_link = 
     Drupal.checkPlain(comment.node_comments_title);
 title_link = title_link.link(node_url);
 var author = Drupal.checkPlain(comment.comments_name) +
   Drupal.t(' said...');

 var tpl = '<div class="new_comment"></div>';

 var out = $(tpl).attr('id', comment.cid)
   .append('<div class="node_title">' + title_link  + '</div>')
   .append('<span class="author">' + author +'</span>')
   .append('<blockquote>' + text + '</blockquote>')
   .parent().html();

 return out;
}

 

2. Tilfeldige Nett klipp fra egen site basert på RSS feedene til siten og vist i et område på forsiden.

 

Koden til webclips.js

 

// $Id$

/**
* Create a web clips tool for displaying random RSS items.
* @file
*/
var WebClips = WebClips || {settings:{}};
WebClips.settings.feed = '?q=rss.xml';

Drupal.behaviors.webclips = function (cxt) {

 // Return early if this has already been
 // attached.
 if ($('#main.webclips-processed').size() > 0) {
   return false;
 }

 var feedUrl = WebClips.settings.feed;
 if (
   feedUrl.indexOf('http://') != 0 
   && feedUrl.indexOf('https://') != 0
   && feedUrl.indexOf('/') != 0 
 ) {
   // The path is relative.
   feedUrl = Drupal.settings.basePath + feedUrl;
 }

 // Get the feed:
 jQuery.get(feedUrl, function (data, res) {
   if (res == 'success') {
     WebClips.items = $(data).find('item');

     var clip = Drupal.theme('webclipArea', 'webclips');

     $('#main').addClass('webclips-processed').prepend(clip);

     $('.webclip-area').css({
       "background-color":"#eef",
       "width":"100%"
     }).prepend(
       $('<span>[+]</span>').click(WebClips.showItem)
     );
     WebClips.showItem();
   }
 });
};

WebClips.showItem = function () {
 var items = WebClips.items;
 var theOne = Math.floor(Math.random() * items.length);
 var item = $(items.get(theOne));
 var theLink = Drupal.theme(
   "webclip", 
   item.find('title'), 
   item.find('link')
 );

 $('#webclips').html(theLink);
};

Drupal.theme.prototype.webclip = function (title, href) {
 return '→ ' + title.text().link(href.text());
};

Drupal.theme.prototype.webclipArea = function (id) {
 var tpl = '<div class="webclip-area"><span id="' + 
   id + 
   '"></span></div>';
 return tpl;
};

Endret 27. august 2011 av Slettet+9871234