Aplet do generowania adresów kanałów RSS/ATOM

Spis treści

1 O skrypcie
2 HTML
3 JavaScript
4 CSS

O skrypcie

Aplet umożliwia użytkownikom samodzielne wygenerowanie kanału RSS/Atom. Składa się z trzech części: struktury HTML do wklejenia na bloga (np. na osobnej podstronie lub w stopce — warto zadbać by formularz pojawiał się na wyraźne żądanie użytkownika, ponieważ subskrybowanie kanału RSS nie jest często wykonywaną czynnością), obsługującego ją kodu JavaScript oraz odpowiadającego za wygląd CSS. Generalnie całość nadaje się do użycia w takiej postaci w jakiej jest zamieszczona tutaj, jednak do zaimplementowaniu na blogu wymagana jest przynajmniej podstawowa znajomość HTML oraz CSS.

Oczywiście nic nie stoi na przeszkodzie by pliki dostosować do swoich potrzeb.

HTML

  <head>
     ...
     <script src="/files/feedBuilder.js" type="text/javascript"></script>
     ...
  </head>
  <body>
     <fieldset id="rssgenerator" style="display: block;">
        <h2>Generator RSS</h2>
        <p>Wybierz, co chcesz otrzymywać w kanale RSS/Atom.</p>
        <form method="get" action="" id="rssOptions" style="display: block;">
           <ul>
              <li>
              <label for="rssFormat">Format</label>
                 <select id="rssFormat">
                    <option selected="selected" value="atom">Atom</option>
                    <option value="rss">RSS</option>
                 </select>
              </li>
              <li>
                 <input type="checkbox" id="rssFull"/>
                 <label for="rssFull">Pełna treść wpisów</label>
              </li>
              <li>
                 <input type="checkbox" id="rssMiniblog"/>
                 <label for="rssMiniblog">Wpisy z minibloga</label>
              </li>
              <li>
                 <input type="checkbox" id="rssHTML"/>
                 <label for="rssHTML">Formatowanie HTML we wpisach</label>
              </li>
              <!-- Odkomentuj jeżeli publikujesz na poziomach wyższych niż 2.
              <li>
                 <span id="authDesc">Posiadam dostęp do wyższych kategorii i chciałbym się autoryzować.</span>
                 <div id="authDescDiv">
                    <label for="rssAuth">Identyfikator użytkownika</label>
                    <input type="text" id="rssAuth">
                 </div>
              </li>
              -->
              <li>
                 <span>Liczba wpisów w kanale <small>(użyj suwaka poniżej)</small>: <strong id="rssCount">10</strong></span>
                 <div class="slider" id="rssSlider" style="-moz-user-select: none;">
                    <div class="grip" tabindex="1" style="position: relative; left: 145.12px; top: 0px; display: block;"/>
                 </div>
              </li>
              <li>
                 <a class="rssLink" id="rssLink" href="http://liviopl.jogger.pl/atom/content/html/20/">Kanał RSS/Atom dla Ciebie</a>
              </li>
           </ul>
        </form>
     </fieldset>

Oczywiście <fieldset> powinien być umieszczony w innym miejscu niż zaraz po otwarciu <body>.

JavaScript

Skopiuj poniższy kod i zapisz w pliku feedBuilder.js.

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
Make few things clear:
 * most of code below comes from
   http://www.arantius.com/article/lightweight+javascript+slider+control
 * said part is responsible for slider
 * the rest (from updateRssLink() to the end) is written by Minio
 * eRIZ ( http://eriz.pcinside.pl/weblog ) should be mentioned for writing
   original code (unfortunately, it was jQuery-dependent)
 * Livio ( http://blog.jakubrusinek.pl/ ) should be mentioned for coming
   with whole idea

Copyright (c) 2006 Anthony Lieuallen, http://www.arantius.com/
Copyleft 2008 Mirosław „Minio” Zalewski <miniopl@gmail.com> http://minio.xt.pl

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

var $ = function(ID) {
  return document.getElementById(ID);
}

function addAnEvent(el, evname, func) {
  if (el.attachEvent) { // IE
     el.attachEvent("on" + evname, func);
  } else if (el.addEventListener) { // Gecko / W3C
     el.addEventListener(evname, func, true);
  } else {
     el["on" + evname] = func;
  }
}

function setBoxValue(val, box) {
  val=Math.round(val);
  $('rssCount').firstChild.nodeValue=val;
}

function drawSliderByVal(slider) {
  var knob=slider.getElementsByTagName('div')[0];
  var p=(slider.val-slider.min)/(slider.max-slider.min);
  var x=(slider.scrollWidth-30)*p;
  knob.style.left=x+"px";
}

function setSliderByClientX(slider, clientX) {
  var p=(clientX-slider.offsetLeft-15)/(slider.scrollWidth-30);
  slider.val=(slider.max-slider.min)*p + slider.min;
  if (slider.val>slider.max) slider.val=slider.max;
  if (slider.val<slider.min) slider.val=slider.min;

  drawSliderByVal(slider);
  setBoxValue(slider.val, slider.num);
}

function sliderClick(e) {
  var el=sliderFromEvent(e);
  if (!el) return;

  setSliderByClientX(el, e.clientX);
}

function sliderMouseMove(e) {
  var el=sliderFromEvent(e);
  if (!el) return;
  if (activeSlider<0) return;

  setSliderByClientX(el, e.clientX);
  stopEvent(e);
}

function sliderFromEvent(e) {
  if (!e && window.event) e=window.event;
  if (!e) return false;

  var el;
  if (e.target) el=e.target;
  if (e.srcElement) el=e.srcElement;

  if (!el.getAttribute('id') || !el.getAttribute('id').match(/rssSlider/)) el=el.parentNode;
  if (!el) return false;
  if (!el.getAttribute('id') || !el.getAttribute('id').match(/rssSlider/)) return false;

  return el;
}

function attachSliderEvents() {
  var s = $('rssSlider');
  s.min = 10;
  s.max = 100;
  s.val = 10;
  s.num = 1;
  drawSliderByVal(s);

  addAnEvent(s, 'mousedown', function(e){
     sliderClick(e);
     var el=sliderFromEvent(e);
     if (!el) return;
     activeSlider=el.num;
     stopEvent(e);
  });

  addAnEvent(document, 'mouseup', function(e){
     activeSlider=-1;
     var el=sliderFromEvent(e);
     if (!el) return;
     stopEvent(e);
  });
}

//borrowed from prototype: http://prototype.conio.net/
function stopEvent(event) {
  if (event.preventDefault) {
     event.preventDefault();
     event.stopPropagation();
  } else {
     event.returnValue=false;
     event.cancelBubble=true;
  }
}

addAnEvent(document, 'mousemove', sliderMouseMove);
var activeSlider=-1;

function updateRssLink() {
  var link = '/';
  link += $('rssFormat').options[$('rssFormat').selectedIndex].value + '/';
  if ($('rssAuth') && $('rssAuth').value) link += 'auth/' + $('rssAuth').value + '/';
  link += $('rssFull').checked ? 'content/' : 'short/';
  if ($('rssHTML').checked) link += 'html/';
  if ($('rssMiniblog').checked) link += 'miniblog/';
  link += $('rssCount').firstChild.nodeValue;
  $('rssLink').setAttribute('href', link);
}

function initRss() {
  attachSliderEvents();
  addAnEvent($('rssOptions'), 'change', updateRssLink);
  addAnEvent(document, 'mouseup', updateRssLink);
  if ($('authDesc')) addAnEvent($('authDesc'), 'click', function() {
           $('authDesc').style.display = 'none';
           $('authDescDiv').style.display = 'block';
        });
  /*@cc_on @*/
  /*@if (@_win32)
  // IE jest po prostu zbyt tępy żeby niektóre rzeczy wykonywać dobrze...
     addAnEvent($('rssFormat').options, 'propertychange', updateRssLink);
     addAnEvent($('rssAuth'), 'propertychange', updateRssLink);
     addAnEvent($('rssFull'), 'propertychange', updateRssLink);
     addAnEvent($('rssHTML'), 'propertychange', updateRssLink);
     addAnEvent($('rssMiniblog'), 'propertychange', updateRssLink);
  /*@end @*/
}

//--------------------------------------------------
// Jeżeli wykorzystujesz już jakieś skrypty na swoim Joggu, najpewniej
// i tak masz jakąś funkcję odpowiadającą za uruchamianie czego trzeba
// z chwilą załadowania strony (zdarzenie „load”). Po prostu dopisz tam
//      initRss();
// a poniższe usuń.
//--------------------------------------------------
window.onload = initRss;

CSS

/*
 * Oryginał stworzony w 2008 przez Livio ( http://jakubrusinek.pl/ ), wykorzystany za zgodą.
 * Inspirowany fragmentami pliku resetującego CSS Wasacza ( http://blog.wasacz.net/2008/04/13/resetowanie-css-po-mojemu/ )
 * Drobnych modyfikacji dokonał Mirosław „Minio” Zalewski <miniopl@gmail.com> http://minio.xt.pl
*/

#rssgenerator h2, #rssgenerator a,
#rssgenerator p,
#rssgenerator li, #rssgenerator ul,
#rssgenerator fieldset {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-style: normal;
  font-weight: normal;
  font-size: 100%;
  line-height: normal;
  text-align: left;
  text-decoration: none;
}

#rssgenerator input, #rssgenerator option, #rssgenerator select { font-family: "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "DejaVu LGC Sans", "Liberation Sans", sans-serif; } /* customizable */
#rssgenerator input, #rssgenerator option, #rssgenerator select { font-size: 100%; }
#rssgenerator ol, #rssgenerator ul { list-style: none; }
#rssgenerator strong { font-weight: bold; }

#rssgenerator {
 background: #fbf8f1;
 display: none;
 padding: 15px;
 border-bottom: 1px solid #CDB88C;
}

#rssgenerator h2 {
 font-weight: bold;
 font-size: 1.25em;
 padding: 10px;
 border-bottom: 1px solid #E2D4B2;
}

#rssgenerator li {
 font-size: 0.75em;
}

#rssgenerator p {
 padding: 5px;
 padding-top: 15px;
}

#rssgenerator ul {
 padding: 5px 0;
}

#rssgenerator li {
 padding: 5px 15px;
}

#rssgenerator #authDesc {
  cursor: pointer;
}

#rssgenerator #authDescDiv {
  display: none;
}

 #rssgenerator .slider {
 margin: 10px;
 z-index: 1;

 /* zakomentuj poniższe, a odkomentuj background, jeżeli chcesz użyć
  * obrazków do tworzenia suwaka */
 background-color: #d6d6d6;
 border: 1px #c6c6c6 solid;

/*--------------------------------------------------
*  background: center url('/files/slider.png') repeat-x;
*--------------------------------------------------*/

 height: 13px;
 cursor: pointer;
}

#rssgenerator .grip {
 z-index: 2;
 overflow: hidden;
 width: 29px;
 height: 11px; /* Jeżeli zdecydujesz się na wybranie obrazka tła, zwiększ tę wielkość (najpewniej do 13px) */

 background-color: white;
 border: 1px #9c9c9c solid;

/*--------------------------------------------------
*  background: center url('/files/grip.png') repeat-x;
*--------------------------------------------------*/

 cursor: move;
}

#rssgenerator input[type=checkbox], #rssgenerator label[for=rssFull], #rssgenerator label[for=rssMiniblog], #rssgenerator label[for=rssHTML] {
 cursor: pointer;
}

#rssgenerator input[type=checkbox] {
 vertical-align: middle;
 margin: 0;
 padding: 2.5px;
}

#rssgenerator .rssLink {
 padding: 15px 0 15px 26px;
 font-size: 1.em;
 text-decoration: underline;
 color: blue;
 background: 5px center no-repeat url('/files/rss-full.png');
}

Pliki grip.png oraz slider.png są dostępne u Livia (po otworzeniu wybierz Plik -> Zapisz jako... aby zapisać plik na dysku).

Aplet do generowania adresów kanałów RSS/ATOM

Spis treści

O skrypcie

HTML

JavaScript

CSS

Menu nawigacyjne

Osobiste

Przestrzenie nazw

Warianty

Widok

Więcej

Szukaj

Nawigacja

Narzędzia