TagMeCloudInterface

Tool to render a tag cloud based interface to add and remove tags.

Test

%INCLUDE{"TagMeCloudInterface" section="tagcloud" ALLTAGS="%TAGME{tpaction="showalltags" format="$tag:$order" separator=" "}%" MYTAGS="%TAGME{tpaction="showalltags" by="me" format="$tag" topic="TagMeCloudInterface" separator=" "}%" TAGS="%TAGME{tpaction="showalltags" format="$tag" topic="TagMeCloudInterface" separator=" "}%" FADE="124,164,204,40,102,204" }%

Implementation

%STARTINCLUDE%<dirtyarea>
<!--
%TAGME{tpaction="%URLPARAM{"tpaction" default="nop"}%" tag="%URLPARAM{tag}%" }%
-->
<div class="tagMeCloud">
<div class="tagMeLed">
%IFDEFINEDTHEN{"%URLPARAM{"edittags"}%" as="on"}%
<a href="%SCRIPTURL{"viewaut"}%/%BASEWEB%/%BASETOPIC%" title="search mode">%ICON{led-box-red}%</a>
%ELSEDEFINED%
<a href="%SCRIPTURL{"viewaut"}%/%BASEWEB%/%BASETOPIC%?edittags=on" title="edit mode">%ICON{led-box-gray}%</a>
%FIDEFINED%
</div>
%INCLUDE{"%TOPIC%" section="tagcloud"
  ALLTAGS="%TAGME{tpaction="showalltags" format="$tag:$order" separator=" "}%"
  MYTAGS="%TAGME{tpaction="showalltags" by="me" format="$tag" topic="%BASETOPIC%" separator=" "}%" 
  TAGS="%TAGME{tpaction="showalltags" format="$tag" topic="%BASETOPIC%" separator=" "}%" 
  FADE="124,164,204,40,102,204"
}%</div>
%IFDEFINEDTHEN{"%URLPARAM{"edittags"}%" as="on"}%
<div class="twikiPageForm tagMeNewTag">
<form name="newtag" action="%SCRIPTURL{viewauth}%/%BASEWEB%/%BASETOPIC%" method="post">
<b>New</b>: 
<input type="text" class="twikiInputField" name="tag" id="newtag" size="20"/> 
<input type="hidden" name="tpaction" value="newtagandadd" />
<input type="hidden" name="refresh" value="on" />
<!-- input type="submit" class="twikiButton" value="%MAKETEXT{"Create"}%" /-->
</form>
</div>
%FIDEFINED%
</dirtyarea>
<style type="text/css">
.tagMeCloud,
.tagMeNewTag {
  /*
  border:1px solid #eee;
  padding:5px;
  */
}
.tagMeCloud {
  /*
  text-align:center;
  */
}
.tagMeCloud a {
  padding:0px 2px;
}
.tagMeCloud a.taggedByMe {
  background:rgb(40,102,204);
  color:white!important;
}
.tagMeCloud a.tagged {
  background:rgb(124,164,204);
  color:white!important;
}
.tagMeNewTag {
  margin-top:1.0em;
}
.tagMeNewTag form {
  margin:0px;
}
.tagMeLed {
  float:right;
  margin:5px 0px 5px 5px;
}
</style>
%STOPINCLUDE%

%STARTSECTION{"tagcloud"}%
~~~
%~~ TAGCLOUD{
~~~   "%ALLTAGS%" 
~~~   warn="off"
~~~   offset="12"
~~~   buckets="10"
~~~   format="<span style=\"font-size:$weightpx;line-height:100%;margin:0px;padding:0;\">
~~~     <a rel=\"nofollow\" id=\"$term\"
~~~       $percntIFDEFINEDTHEN{\"%URLPARAM{"edittags"}%\" as=\"on\" glue=\"off\"}$percnt
~~~         href=\"%SCRIPTURLPATH{"viewauth"}%/%BASEWEB%/%BASETOPIC%?edittags=on;
*~~         $percntIFDEFINEDTHEN{\"%MYTAGS%\" as=\".*\b$term\b.*\" glue=\"off\"}$percnt
*~~           tpaction=remove;tag=$term\"
~~~           class=\"taggedByMe\"
~~~           title=\"remove my vote\"
~~~         $percntELSEDEFINED$percnt
*~~           tpaction=add;tag=$term\"
*~~           $percntIFDEFINEDTHEN{\"%TAGS%\" as=\".*\b$term\b.*\" glue=\"off\"}$percnt
~~~             class=\"tagged\"
~~~           $percntFIDEFINED$percnt
~~~           title=\"add my vote\"
~~~         $percntFIDEFINED$percnt
~~~       $percntELSEDEFINED$percnt
~~~         href=\"%SCRIPTURLPATH{"view"}%/%TWIKIWEB%/TagMeSearch?tag=$term\"
~~~         $percntIFDEFINEDTHEN{\"%MYTAGS%\" as=\".*\b$term\b.*\" glue=\"off\"}$percnt
~~~           class=\"taggedByMe\"
~~~         $percntELSEDEFINED$percnt
*~~           $percntIFDEFINEDTHEN{\"%TAGS%\" as=\".*\b$term\b.*\" glue=\"off\"}$percnt
~~~             class=\"tagged\"
~~~           $percntFIDEFINED$percnt
~~~         $percntFIDEFINED$percnt
~~~       $percntFIDEFINED$percnt
~~~       style=\"color:$fadeRGB(%FADE%);\"
~~~     >$term</a></span>"
~~~ }%
%ENDSECTION{"tagcloud"}%