Wiki source for InlineCommentFormatter


Show raw source

=====Inline comment formatter=====
{{lastedit}}
<<See also: FormattingRules<<

I've modified ##formatters/wakka.php## so as to recognize a new formatter for **inline comments**.
When adding inline comments, we used to adopt a combination of indents and ''note markup'', which produces hardly readable discussions and frequent inconsistencies.

==Syntax==
The new InlineCommentFormatter introduces a simple syntax, similar to that of unordered lists.
To produce an inline comment use **&** preceded by one or more **tabs** (or **~**).
To append a subcomment to an existing comment use the above syntax with an **extra tab** (or an extra **~**) - much as you append a subitem to an existing list item.

""~& Comment""
""~~& Subcomment""
""~~~& Subsubcomment""

gives:

~& Comment
~~& Subcomment
~~~& Subsubcomment


==Example==

__Note:__
To correctly display the following example you need to revert to the default wikka skin (TestSkin). Otherwise, you will just see an ordinary list.

Here's how it looks like:

~& This is the father of all comments -- DarTar
~~& Well, I don't agree with your point of view -- DarTar
~~~& Could you please explain why? -- DarTar
~~& I'm not sure I feel like giving any explanation -- DarTar
~~~& And I'm not sure I feel like listening to YOU -- DarTar
~& Well, it looks like we've found an agreement -- DarTar


----
=== Installation ===
//This feature is part of WikkaWiki as of version 1.1.6.0. If you wish to apply it to an older version without upgrading to the latest version, follow these instructions://

==1. Modify ##formatters/wakka.php##==

You first need to modify the wakka formatter in three different places.

**A) original**

%%(php)
// indented text
elseif (preg_match("/\n([\t,~]+)(-|([0-9,a-z,A-Z,ÄÖÜ,ßäöü]+)\))?(\n|$)/s", $thing, $matches))
%%

**A) modified**
%%(php)
// indented text
elseif (preg_match("/\n([\t~]+)(-|&|([0-9a-zA-ZÄÖÜßäöü]+)\))?(\n|$)/s", $thing, $matches))
%%

**B) original**
%%(php)
elseif ($newIndentType == "-") { $opener = "<ul><li>"; $closer = "</li></ul>"; $li = 1; }
else { $opener = "<ol type=\"". substr($newIndentType, 0, 1)."\"><li>"; $closer = "</li></ol>"; $li = 1; }
%%


**B) modified**
%%(php)
elseif ($newIndentType == "-") { $opener = "<ul><li>"; $closer = "</li></ul>"; $li = 1; }
elseif ($newIndentType == "&") { $opener = "<ul class=\"thread\"><li>"; $closer = "</li></ul>"; $li = 1; } #inline comments
else { $opener = "<ol type=\"". substr($newIndentType, 0, 1)."\"><li>"; $closer = "</li></ol>"; $li = 1; }
%%


**C) original**

%%(php)
"======|=====|====|===|==|".
"\n([\t,~]+)(-|[0-9,a-z,A-Z]+\))?|".
"\{\{.*?\}\}|".
%%

**C) modified**

%%(php)
"======|=====|====|===|==|". # headings
"\n([\t~]+)(-|&|[0-9a-zA-Z]+\))?|". # indents and lists
"\{\{.*?\}\}|". # actions
%%


==2 Add a new class to your stylesheet (default: ##css/wikka.css##)==

%%(css)
ul.thread {
list-style-type: none;
border-left: 2px #666 solid;
padding-left: 10px;
margin: 5px 0px;
}

ul.thread li {
color: #333;
font-size: 11px;
}
%%

Suggestions for improving the inline comments style are welcome :)

----

=== Alternate styles ===
Here's a couple of ideas...

==1. thin borders==

%%(css)
ul.thread {
list-style-type: none;
border-left: 1px #666 solid;
padding: 0px 5px;
margin: 5px 0px;
}

ul.thread li {
color: #333;
font-size: 11px;
}
%%

gives

""<ul style='list-style-type: none;border-left: 1px #666 solid;padding: 0px 5px;margin: 5px 0px;'><li style='color: #333;font-size: 11px;'> Comment
<ul style='list-style-type: none;border-left: 1px #666 solid;padding: 0px 5px;margin: 5px 0px;'><li style='color: #333;font-size: 11px;'> Subcomment
<ul style='list-style-type: none;border-left: 1px #666 solid;padding: 0px 5px;margin: 5px 0px;'><li style='color: #333;font-size: 11px;'> Subsubcomment</li></ul></li></ul></li></ul>""

==2. graded thick borders==

%%(css)

/* darker border for main comments */
ul.thread {
list-style-type: none;
border-left: 10px #BBB solid;
padding: 0px 5px;
margin: 5px 0px;
}

ul.thread li {
color: #333;
font-size: 11px;
}

/* lighter border for subcomments, subsubcomments etc. */
li ul.thread {
border-left: 10px #DDD solid;
}

%%

gives

""<ul style='list-style-type: none;border-left: 10px #BBB solid;padding: 0px 5px;margin: 5px 0px;'><li style='color: #333;font-size: 11px;'> Comment
<ul style='list-style-type: none;border-left: 10px #DDD solid;padding: 0px 5px;margin: 5px 0px;'><li style='color: #333;font-size: 11px;'> Subcomment
<ul style='list-style-type: none;border-left: 10px #DDD solid;padding: 0px 5px;margin: 5px 0px;'><li style='color: #333;font-size: 11px;'> Subsubcomment</li></ul></li></ul></li></ul>""


==3. layered sheets==

%%(css)
ul.thread {
list-style-type: none;
border-left: 2px #666 solid;
border-top: 2px #666 solid;
padding: 0px 5px;
margin: 5px 0px;
}

ul.thread li {
color: #333;
font-size: 11px;
}
%%

gives

""<ul style='list-style-type: none;border-left: 2px #666 solid;border-top: 2px #666 solid;padding: 0px 5px;margin: 5px 0px;'><li style='color: #333;font-size: 11px;'> Comment
<ul style='list-style-type: none;border-left: 2px #666 solid;border-top: 2px #666 solid;padding: 0px 5px;margin: 5px 0px;'><li style='color: #333;font-size: 11px;'> Subcomment
<ul style='list-style-type: none;border-left: 2px #666 solid;border-top: 2px #666 solid;padding: 0px 5px;margin: 5px 0px;'><li style='color: #333;font-size: 11px;'> Subsubcomment</li></ul></li></ul></li></ul>""

==4. boxes ==

%%(css)
ul.thread {
list-style-type: none;
border: 2px #666 solid;
padding: 0px 5px;
margin: 5px 0px;
}

ul.thread li {
color: #333;
font-size: 11px;
}
%%

gives

""<ul style='list-style-type: none;border: 2px #666 solid;padding: 0px 5px;margin: 5px 0px;'><li style='color: #333;font-size: 11px;'> Comment
<ul style='list-style-type: none;border: 2px #666 solid;padding: 0px 5px;margin: 5px 0px;'><li style='color: #333;font-size: 11px;'> Subcomment
<ul style='list-style-type: none;border: 2px #666 solid;padding: 0px 5px;margin: 5px 0px;'><li style='color: #333;font-size: 11px;'> Subsubcomment</li></ul></li></ul></li></ul>""

----
CategoryDevelopmentFormatters CategoryLayout
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki