Site Map for Blogger

ဒီနေ့ JavaScript ဖြင့် Myanmar Java User မှာသုံးဖို့ အတွက် Blogger သုံး မာတိကာတစ်ခု ရေးသားခဲ့ပါတယ်။ ကျွှန်တော်ရေးနေတဲ့ Myanmar Java User က ပိုစ်တွေဟာ ခေါင်းစဉ်တစ်ခုတည်းသာ အသုံးပြု၍ ရေးသားထားပါသဖြင့် ဤတစ်ခေါက်တွင် ခေါင်းစဉ်တစ်ခုကိုသာသုံးတဲ့ Plugin တစ်ခုကို ရေးသားခဲ့ခြင်းဖြစ်ပါတယ်။

Blogger ဟာ Atom API ကို ပံ့ပိုးထားပါသဖြင့် feed တွေကို json အနေဖြင့်ရယူနိုင်ပါတယ်။

<script src="http://[your-domain]/feeds/posts/default?redirect=false&max-results=9999&alt=json-in-script&callback=loadtoc">  
</script>

အထက်ပါအတိုင်း [your-domain] နေရာမှာ သင့်ဘလောဂ်၏ ဒိုမိန်းကို ဖြည့်စွက်ပြီး၊ နောက်ဆုံး callback မှာ ခေါ်ယူ အသုံးပြုလိုတဲ့ ဖန်ရှင်ကို ရေးရုံပါပဲ။ ကျွှန်တော်ဒီနေရာမှာတော့ အကော်ဒီယံ မယ်နျူးပုံစံကို ရေးလိုပါသဖြင့် ဖန်ရှင်အမည်ကို loadtoc ဆိုပြီးရေးထားလိုက်တယ်။ လောလောဆယ်တော့ ပိုစ်တွေလည်းနည်းသေးတော့ ဒီအတိုင်း အရင်ဖြန့်ပေါ်အောင်ပဲ အရင်လုပ်ပါဦးမယ်။ ပိုစ်တွေအတော်များလာတော့မှ အကော်ဒီယံကို CSS နဲ့ပဲရေးမလား၊ js နဲ့ ကိုယ့်ဟာကိုယ်ရေးမလား၊ ဒါမှမဟုတ် jquery လို အခြား လိုင်ဘရီကို သုံးပြီးရေးရင်ကောင်းမလား စဉ်းစားရပါဦးမယ်။

ဒီနေရာမှာရေးမှာက အောက်ပါအတိုင်းဖြစ်ပါတယ်။

1. ရလာတဲ့ ဒေတာထဲကနေ Category တွေကို ရှာပြီး Sort လုပ်ပါတယ်။
2. အဲ့ဒီ Category တစ်ခုချင်းရဲ့ အောက်မှာရေသားထားတဲ့ ပိုစ်တွေကို လစ်ထဲကို ထည့်ပါတယ်။
3. အဲ့ဒီ လစ်တစ်ခုချင်းကို ပိုစ်လုပ်တဲ့နေ့နဲ့ Sort လုပ်ပါတယ်။
4. အဲ့ဒီနောက်မှာ ပိုစ်တစ်ခုချင်းကို အဲ့ဒီ Category ရဲ့အောက်မှာ လင့်ခ်ကို ရေးသားစေပါတယ်။
5. အဲ့ဒီလိုရေးသားတဲ့အခါမှာ အဲ့ဒီပိုစ်ဟာ နောက်ဆုံး ၁၀ခုအတွင်းမှာပါရင် New !! ဆိုပြီး ရေးသားစေပါတယ်။

တကယ်တမ်း ချရေးကြည့်တဲ့အရာကတော့ အောက်ကလိုဖြစ်ပါတယ်။

var dateRef;

function loadtoc(a) {
 var catagories = a.feed.category;

 // Sort Catagories
 catagories.sort(function (x, y) {
   return ((x.term == y.term) ? 0 : ((x.term > y.term) ? 1 : -1 ));
 });

 for (var i=0; i<catagories.length; i++) {
  $("<strong>" + catagories[i].term + "</strong>");
  var c = 0;
  var list = new Array();
  var dateList = new Array();

  for (var j=0; j < a.feed.entry.length; j++) {
   if(isInCat(catagories[i].term, a.feed.entry[j].category)) {
    list[c ++] = a.feed.entry[j];
   }

   if (i==0) {
    dateList[j] = a.feed.entry[j].published.$t;
   }
  }
  
  // set refdate
  if(i == 0) {
   dateList.sort();
   dateList.reverse();
   dateRef = dateList[10];
  }
  writeList(list);
 }
}

function isInCat(cat, cats) {
 for (var i=0; i<cats.length; i++) {
  if(cat == cats[i].term) {
   return true;
  }
 }
 return false;
}

function writeList(list) {
 
 list.sort(function(x, y) {
  return ((x.published.$t == y.published.$t) ? 0 : ((x.published.$t > y.published.$t) ? 1 : -1 ));
 });
 
 $("<ol>");
 for(var i=0; i<list.length; i++) {
  writePostLink(list[i]);
 }
 $("</ol>");
}

function writePostLink(p) {
 var isNew = p.published.$t > dateRef;
 var href;
 for (var i = 0; i < p.link.length; i++) {
  if (p.link[i].rel == "alternate") {
   href = p.link[i].href;
   break
  }
 }

 var title = p.title.$t;
 $("<li><a href='" + href + "'/>" + title + "</a>");
 if (isNew) {
  $(' - <strong><em><span style="color: rgb(255, 0, 0);">New !!</span> </em></strong></li>');
 }
}

function $(s) {
 document.write(s);
}

ဒီ js ကို Dropbox အပေါ်တင်ထားပြီး၊ addGadget ကနေပြီး HTML/JavaScriptကိုရွေးပြီး၊ အထက်ပါ js ဖိုင်များကို ခေါ်သွင်းလိုက်တာနဲ့ အလုပ်လုပ်မှာဖြစ်ပါတယ်။

<script src="http://dl.dropbox.com/u/13831873/blogger/js/sidebar.js">  
</script>   
<script src="http://myanmar-java-user.blogspot.com/feeds/posts/default?redirect=false&max-results=9999&alt=json-in-script&callback=loadtoc">  
</script>

ရေးသားထားသည်ကို Myanmar Java User တွင် လက်တွေ့ကြည့်နိုင်ပါတယ်။ myanmar-java-user နေရာမှာတော့ သင်၏ ဘလောဂ်အမည်ကို ရေးသားလိုက်မယ်ဆိုရင် အသုံးပြုနိုင်မှာ ဖြစ်ပါတယ်။