21 March, 2010

Разработка макроса для TiddlyWiki

Summary: Пример разработки плагина для TiddlyWiki

Вступление

TiddlyWiki - это вики-движок, полностью написанный на JavaScript и хранящийся в одном файле (как сам движок, так и содержимое). Создатели позиционируют его как "переиспользуемую нелинейную персональную веб записную книжку".

Я давно использую TiddlyWiki в различных целях:

  1. По прямому назначению.
  2. Как систему GTD.
  3. Как домашнюю страницу на компьютере.

Моя домашняя страница на компьютере - это, если говорить терминами TiddlyWiki, тиддлер, содержащий ссылки на страницы, которые я часто посещаю.

Для удобства использования я разработал пару стилей CSS, так что ссылки были крупными.

Исходный код плагина

После длительного использования tiddlywiki в качестве домашней страницы я понял, что мне хочется, чтобы с каждой ссылкой была иконка сайта. Вручную вставлять картинки мне не хотелось, поэтому было решено написать собственный плагин.

/*{{{*/
version.extensions.faviconLinkMacro = {major: 0, minor: 1, revision: 0, date: new Date(2010,3,21)};
// Author: Oleg Atamanenko
config.macros.faviconLink = {}
config.macros.faviconLink.handler = function(place, macroName,  params, wikifier, paramString) {
  var linkBox = createTiddlyElement(place, "span", null, "favIcon", "");

  var args = paramString.parseParams("list",null,true);
  var link = getParam(args, "link", 'false');
  
  if (link != 'false'){
    urlParts = link.split('/');
    imgLink = urlParts[0] + "//" + urlParts[2] + "/favicon.ico";

    var imgElement = createTiddlyElement(linkBox, "img", null, "faviconImage", "");
    imgElement.src = imgLink;
    imgElement.width = 16;
    imgElement.height = 16;

    var linkTitle = getParam(args, "title", 'false');

    if(linkTitle == 'false'){
      linkTitle = link;
    }
    var linkElement = createTiddlyElement(linkBox, "a", null, "faviconLink", linkTitle);
    linkElement.href = link;
    linkElement.target = '_blank';
  }
}

/*}}}*/

Установка плагина

  1. Создаём новый тиддлер, называем его faviconLinkMacro
  2. Помечаем тиддлер тегом systemConfig, тогда TiddlyWiki при открытии страницы его подгрузит.

Использование плагина

  1. Плагин создаёт новый макрос, faviconLink, с двумя параметрами link и title.
  2. Вызов <<faviconLink link:'https://mail.google.com/mail' title:'mail'>> создаёт ссылку с картинкой с GMail

Настройка визульных стилей плагина

Макрос создаёт следующие классы:

  1. span.favIcon
  2. img.faviconImage
  3. a.faviconLink

Пример стилей

.links span {
  display: block;
  position: relative;
  padding: 0.7em;
  margin: 0.3em;
  min-width: 6em;
  float:left;
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
  font-family: "Gill Sans MT", "Candara", "Arial"; 
  border: 2px solid [[ColorPalette::SecondaryLight]];
  background-color: [[ColorPalette::SecondaryPale]];
}

.links span:hover {
  border: 2px solid [[ColorPalette::SecondaryMid]];
  background-color: [[ColorPalette::SecondaryLight]];
  color: [[ColorPalette::PrimaryMid]];
}

.links img.faviconImage {
  position: relative;
  padding-right: 10px;
}

Данный CSS необходимо добавить в тиддлер с именем StyleSheet

Пример тиддлера со ссылками

{{links{
<<faviconLink link:'http://delicious.com/dark.schakal/2read' title:'2read'>> <<faviconLink link:'https://mail.google.com/mail' title:'mail'>> <<faviconLink link:'http://www.google.com/reader/view' title:'rss'>> <<faviconLink link:'http://atamanenko.blogspot.com/' title:'blog'>> <<faviconLink link:'http://feedburner.google.com/fb/a/myfeeds' title:'feedburner'>> <<faviconLink link:'https://www.google.com/analytics/settings/' title:'analytics'>> <<faviconLink link:'http://wave.google.com' title:'wave'>> <<faviconLink link:'http://www.blogger.com/home' title:'blogger'>> <<faviconLink link:'http://twitter.com/' title:'twitter'>> <<faviconLink link:'https://www.dropbox.com/home#/' title:'dropbox'>> <<faviconLink link:'http://translate.google.com/toolkit/' title:'translator'>> <<faviconLink link:'http://sibir.megafon.ru/sendsms/' title:'SendSMS'>>
}}}
Вышеприведённый код тиддлера создаёт следующую страницу:

3 comments:

  1. Спасибо за пример, сегодня же в свою вики встрою )

    ReplyDelete
  2. выложи архив своего tiddywiki c плагинами, а я поделюсь своим

    ReplyDelete
  3. Хорошо, выложу. :) Почистить только нужно.

    ReplyDelete