Documentation

renders a set of tiles for webs

See also

• RenderCategory
• RenderTopicsOfCategory

Parameters

• THEWEB, default BASEWEB
• SHOWTOPICS: switch on/off display of topics in this category; defaults to on
• SHOWSUMMARY: switch on/off display of the category summary, defaults to off
• COLS: number of columns, defaults to CLASSIFICATIONPLUGIN_NRCOLS which itself defaults to 3
• MAXCHILDREN: number of subcategories to display, default is 5
• CAT: category to render, defaults to URLPARAM{catname} which in itself defaults to BASETOPIC
• EXCLUDE
• SHOWFILTER: switch on/off the input field to filter the list items, defaults to off

Implementation

%STARTINCLUDE%<noautolink>
%FORMATLIST{ 
   "%HIERARCHY{ 
     web="%THEWEB{default="%BASEWEB%"}%" 
     top="%CAT{default="%URLPARAM{"catname" default="%BASETOPIC%"}%"}%" 
     exclude="%CAT{default="%URLPARAM{"catname" default="%BASETOPIC%"}%"}%%IF{"defined EXCLUDE" then="|%EXCLUDE%"}%" 
     depth="2" 
     sort="%SORT{default="on"}%" 
     format="($title);$topic;$url;$icon;$count$n" 
   }%" 
   split="\n" 
   pattern="\((.*)\);(.*);(.*);(.*);(.*)" 
   separator="$n"
   header="<div class='clsCategoryContainer cols%COLS{default="%CLASSIFICATIONPLUGIN_NRCOLS{default="3"}%"}%'>"
   footer="</div>"
   format="<div class='clsCategoryTile clearfix hyphenate' data-source='h4 a' data-target='.jqIcon' data-property='color' data-lightness='50'>
            <h4>
               $percntIF{ 
                  \"'$5'>'0'\" then=\"<span class='clsCategoryCount'>$5</span>\" 
               }$percnt<!-- -->
               $4
               <a href='$3'>$1</a>
            </h4>
            $percntCATINFO{ 
               cat=\"$2\" 
               web=\"%THEWEB{default="%BASEWEB%"}%\" 
               maxchildren=\"%MAXCHILDREN{default="5"}%\" 
               sortchildren=\"on\"
               separator=\"§\"
               morechildren=\"<li><a href='$dollarurl' class='clsCategoryMore'>...</a></li>\" 
               format=\"$dollarpercntIF{\\"'%SHOWSUMMARY{default="off"}%'='on'\\" then=\\"<div class='foswikiTopicInfo'>$dollarsummary</div>\\"}$dollarpercnt $dollarpercntFORMATLIST{\\"$children\\"
                           split=\\"\s*§\s*\\"
                           header=\\"<ul>\\"
                           format=\\"<li>$dollardollar1</li>\\"
                           footer=\\"$more</ul>\\"
                           separator=\\"$dollarn\\"
                       }$dollarpercnt\"
            }$percnt<!-- -->
      </div>" 
}%%ADDTOZONE{"script"
   id="WEBLIST::TILEJS"
   requires="JQUERYPLUGIN"
   text="<script src='%PUBURLPATH%/%WEB%/%TOPIC%/tilefixer.js'></script>"
}%%ADDTOZONE{"head" 
   id="WEBLIST::CSS" 
   text="<link rel='stylesheet' href='%PUBURLPATH%/%WEB%/%TOPIC%/styles.css' type='text/css' media='all' />"
}%%IF{"'%SHOWTOPICS{default="%IF{"'%CAT{default="%URLPARAM{"catname" default="%BASETOPIC%"}%"}%'='TopCategory'" then="off" else="on"}%"}%'='on'"
   then="$percntDBCALL{\"Applications.ClassificationApp.RenderTopicsOfCategory\" 
      cat=\"%CAT%\"
      web=\"%THEWEB%\"
      showfilter=\"%SHOWFILTER{default="%CLASSIFICATIONPLUGIN_SHOWFILTER{default="off"}%"}%\"
   }$percnt"
}%<!-- -->
</noautolink>%STOPINCLUDE% 

JS

jQuery(function($) {
   $(".clsCategoryContainer").livequery(function() {
      var $this = $(this),
          c, n = $this.find(".clsCategoryTile").length;
      if ($this.is(".cols2")) {
         c = 2;
      } else if ($this.is(".cols3")) {
         c = 3;
      } else if ($this.is(".cols4")) {
         c = 4;
      } else if ($this.is(".cols5")) {
         c = 5;
      }
      while (n % c) {
         $this.append("<div class='clsCategoryTile empty'></div>");
         n++;
      }
      /*$this.css("visibility", "visible");*/
   });
});

CSS

.clsCategoryContainer {
  display:flex;
  flex-wrap:wrap;
  margin-right:calc(var(--margin-half) * -1);
  /*visibility:hidden;*/
}
.clsCategoryContainer.cols2 .clsCategoryTile {
   flex-basis:47%;
}
.clsCategoryContainer.cols3 .clsCategoryTile {
   flex-basis:31%;
}
.clsCategoryContainer.cols4 .clsCategoryTile {
   flex-basis:22%;
}
.clsCategoryContainer.cols5 .clsCategoryTile {
   flex-basis:17%;
}
.clsCategoryTile {  
   min-width:230px;
   flex-shrink: 1;
   flex-grow: 1;
   margin:0 var(--margin-half) var(--margin-half) 0;
   text-decoration:none; 
   box-sizing:border-box;
   padding:20px !important;
   border:0;
   color: var(--alt-foreground, #333);
   background-color: var(--alt-background, #f6f6f6);
   border: 1px solid var(--alt-border, #ddd);
   border-radius:3px;
}
.clsCategoryTile .foswikiTopicInfo {
   margin-bottom:0;
}
.clsCategoryTile.empty {
   background:transparent;
   border:0;
}
.clsCategoryTile h4 { 
   margin:-20px -20px 0 !important;
   font-weight:normal;
   color:inherit;
}
.clsCategoryTile h4 a {
   text-decoration:none;
   padding:20px 20px 0;
}
.clsCategoryTile h4 .clsCategoryCount {
   font-size:90%;
   color:#818181;
   float:right;
   margin:20px var(--margin-half) 0 5px;
}
.clsCategoryTile h4 .jqIcon {
   float:left;
   margin:20px 5px 0 var(--margin-half);
}
.clsCategoryTile a {
   display:block;
   font-weight:normal;
   color:inherit;
}
.clsCategoryTile h4 a:hover {
   text-decoration:underline;
}
.clsCategoryTile ul {
   margin:5px 0 20px;
   padding:0 0 0 25px;
}
.clsCategoryTile li {
   padding-left:0;
}
.clsCategoryTile li a:hover {
   text-decoration:underline;
}

Test

Calls to 'RenderCategoryTiles'

• RenderCategory
• WebPreferences

Copyright

© 2006-2019 Michael Daum http://michaeldaumconsulting.com

This file is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. For more details read the LICENSE.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY, to the extent permitted by law; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.