Oleg Atamanenko

thoughts about programming

Разработка макроса для 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: &quot;Gill Sans MT&quot;, &quot;Candara&quot;, &quot;Arial&quot;;
  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

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

```html {{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'>> }}} ``` Вышеприведённый код тиддлера создаёт следующую страницу:

<img style=“display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 157px;” src=“http://1.bp.blogspot.com/_y8p0_dtMJ38/S6Y0qOLAO4I/AAAAAAAAA84/DFkORdMO8gE/s400/favicon-sample-big.png" border=“0” alt=““id=“BLOGGER_PHOTO_ID_5451102298941963138” />