SidenoteActions:Wikka

Sidenote Actions

This set of actions allows the user to create sidenotes similar to post-it notes. You can also find a version that integrates into wikka.css and combines the actions into a single action in SidenoteActionsTormodHaugen. However, this version keeps the actions seperate so that the user can choose not to include some of them.

Syntax

{{note text="This is a note." width="250"}}
{{tip text="This is a tip." width="250"}}
{{warn text="This is a warning." width="250"}}

text is a required field. width is optional and defaults to 200 pixels.

Screenshot

Installation

First, put the following code in a file called css/sidenote.css:

/* sidenote.css */
/* Contains css for tip, note and warn actions. */

/* postit note-style information box */
#note {
clear: both;
font-size: 10pt;
float: left;
width: 200px;
border: 1px solid #AAAAAA;
margin: 15px 10px 0px 0px;
padding: 0px;
background-color: #FFF900;
text-align: justify;
vertical-align: top;
}

#note hr {
height: 1px;
border: 1px solid #AAAAAA;
width: 100%;
}

#note .title {
text-align: center;
font-weight: bold;
background-color: #EEE800;
border-bottom: 1px solid #AAAAAA;
color: #000000;
}

#note #text {
padding: 4px;
color: #000000;
}

/* tip information box */
#tip {
clear: both;
font-size: 10pt;
float: left;
width: 200px;
border: 1px solid #AAAAAA;
margin: 15px 10px 0px 0px;
padding: 0px;
background-color: #FFFFFF;
text-align: justify;
vertical-align: top;
}

#tip hr {
height: 1px;
border: 1px solid #AAAAAA;
width: 100%;
}

#tip .title {
text-align: center;
font-weight: bold;
background-color: #EFEFEF;
border-bottom: 1px solid #AAAAAA;
color: #000000;
}

#tip #text {
padding: 4px;
color: #000000;
}

/* warning information box */
#warn {
clear: both;
font-size: 10pt;
float: left;
width: 200px;
border: 1px solid #AAAAAA;
margin: 15px 10px 0px 0px;
padding: 0px;
background-color: #FFAAAA;
text-align: justify;
vertical-align: top;
}

#warn hr {
height: 1px;
border: 1px solid #AAAAAA;
width: 100%;
}

#warn .title {
color: #FFFFFF;
text-align: center;
font-weight: bold;
background-color: #FF0000;
border-bottom: 1px solid #AAAAAA;
}

#warn #text {
padding: 4px;
color: #000000;
}

This file should be saved in actions/note.php:

<?php
/*
note action
Displays a sidebar note (like a post-it)
Syntax: {{note text="text" width="width_in_pixels"}}
*/

$text = htmlspecialchars($vars['text']);
$width = htmlspecialchars($vars['width']);

if (is_numeric($width) ? intval($width) == $width : false) {
$width = "200";
}

?>

<DIV ID="note" STYLE="width: <?php echo $width; ?>px">
<DIV ID="text">
<?php echo $this->Format($text); ?>
</DIV>
</DIV>

This file should be saved in actions/tip.php:

<?php
/*
tip action
Displays a sidebar tip (like a post-it)
Syntax: {{tip text="text" width="width_in_pixels"}}
*/

$text = htmlspecialchars($vars['text']);
$width = htmlspecialchars($vars['width']);

if (is_numeric($width) ? intval($width) == $width : false) {
$width = "200";
}

?>

<DIV ID="tip" STYLE="width: <?php echo $width; ?>px">
<DIV CLASS="title">TIP</DIV>
<DIV ID="text">
<?php echo $this->Format($text); ?>
</DIV>
</DIV>

And this file should be saved in actions/warn.php:

<?php
/*
warn action
Displays a sidebar warning (like a post-it)
Syntax: {{warn text="text" width="width_in_pixels"}}
*/

$text = htmlspecialchars($vars['text']);
$width = htmlspecialchars($vars['width']);

if (is_numeric($width) ? intval($width) == $width : false) {
$width = "200";
}

?>

<DIV ID="warn" STYLE="width: <?php echo $width; ?>px">
<DIV CLASS="title">WARNING</DIV>
<DIV ID="text">
<?php echo $this->Format($text); ?>
</DIV>
</DIV>

Finally, you need to add the stylesheet to actions/header.php. Find this line:

	<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />

add this line after it:

	<link rel="stylesheet" type="text/css" href="css/sidenote.css" />

If you find this action useful, post a comment and let me know! Also, feel free to comment with requests for feature enhancements. --JasonHuebel

Please make sure that the server has write access to a folder named uploads.

CategoryUserContributions

Comments

Comment by BogdEscu

2008-01-15 05:26:20

Thanks for this useful action! Unfortunately it places gibberish instead of polish (ćśń, and so on) letters, making notes unusable for us at this time (although the rest of the wikka system works fine). Any chance to fix this?

Comment by BrianKoontz

2008-01-15 15:20:43

Perhaps you need to modify the output headers to use the UTF-8 charset? (see
http://wikkawiki.org/WikkaLocalization).

Comment by BogdEscu

2008-01-18 18:17:54

Thanks for the reply, Brian. I read the localisation pages before I started actually working on our pages (http://imedia.asp.krakow.pl/wikka - we are a department in a Fine Art academy), as I thought we will need utf8 - it's what we typically use for static pages. However, from I thought I understand that the usage of UTF8 is not quite completely mature yet (it's called a "hack" on the WikkaLocalisation page and discussed, somewhat beyond my powers of understanding, at HandlingUTF8) and is expected to be rolled out in a future version of Wikka, hence my sticking with the defaults (which work fine for the body text).

Comment by BogdEscu

2008-01-22 07:17:36

What I actually wanted to ask: is there a way to make the sidenotes compatible encoding-wise with the rest of the wiki? We use the default encoding (iso-8859-1) and it works fine.

Comment by NilsLindenberg

2008-01-24 07:03:23

First, which version of the action did you use? The original one from JasonHuebel or the modification by TormodHaugen? And what is your PHP version? And does using htmlspecialchars_ent( instead of htmlspecialchars( change something (just a wild guess)?

Comment by JasonHuebel

2008-01-24 20:18:31

I modified the code to allow WikkaWiki formatting in the sidenotes. I modified my original code, since I still prefer the separate action files. They were intentionally separate so that users could select which actions they wanted to include. I suppose that could also be made a wikka configuration option, but the KISS method would dictate that simply not including the actions you don't want is easier. ;-) I prefer not to over-engineer things.

I also added better integer checking of the $width parameter, since it was simply checking to see if $width was an empty string before.

TormodHaugen's version was not changed.

Comment by SeB7777

2008-02-22 08:23:08

I suggest :
- html code in lower case for XHTML compliance
- replace
if (is_numeric($width) ? intval($width) == $width : false)
with
if (!is_numeric($width))

(that way it works for me else it doesn't)

Wikka : SidenoteActions