RenderCategoryTiles

alternative appearance of a category

Documentation

renders a set of tiles for webs

• 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