RenderCategoryTiles

alternative appearance of a category

Documentation

renders a set of tiles for webs

Parameters

• THEWEB, default BASEWEB
• SHOWTOPICS: switch on/off display of topics in this category; defaults to on
• COLS: number of columns, defaults to CLASSIFICATIONPLUGIN_NRCOLS which itself defaults to 3

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' data-source='h3 a' data-target='.jqIcon' data-property='color' data-lightness='50'>
            <h3>
               $percntIF{ 
                  \"'$5'>'0'\" then=\"<span class='clsCategoryCount'>($5)</span>\" 
               }$percnt<!-- -->
               $4
               <a href='$3'>$1</a>
            </h3>
            $percntCATINFO{ 
               cat=\"$2\" 
               web=\"%THEWEB{default="%BASEWEB%"}%\" 
               maxchildren=\"5\" 
               sortchildren=\"on\" 
               morechildren=\"<li><a href='$dollarurl' class='clsCategoryMore'>...</a></li>\" 
               format=\"$dollarpercntFORMATLIST{\\"$children\\"
                           split=\\",\\"
                           header=\\"<ul>\\"
                           format=\\"<li>$dollardollar1</li>\\"
                           footer=\\"$more</ul>\\"
                           separator=\\"$dollarn\\"
                       }$dollarpercnt\"
            }$percnt<!-- -->
      </div>" 
}%
%ADDTOZONE{"script"
   id="WEBLIST::TILEJS"
   requires="JQUERYPLUGIN::LIVEQUERY"
   text="<script src='%PUBURLPATH%/%WEB%/%TOPIC%/tilefixer.js' type='text/javascript'></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.RenderCategory\" 
      section=\"topicindex\"
      TAG=\"%TAG%\"
      KEYWORDS=\"%KEYWORDS%\"
   }$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:-15px;
  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 15px 15px 0;
   text-decoration:none; 
   box-sizing:border-box;
   padding:20px 20px 0 20px;
   border:0;
   background-color:#f6f6f6;
   border:1px solid #dddddd;
   border-radius:3px;
}
.clsCategoryTile.empty {
   background:transparent;
   border:0;
}
.clsCategoryTile h3 { 
   margin:-20px -20px 0 !important;
   font-weight:normal;
   color:inherit;
}
.clsCategoryTile h3 a {
   text-decoration:none;
   padding:15px 15px 10px;
}
.clsCategoryTile h3 .clsCategoryCount {
   font-size:90%;
   color:#818181;
   float:right;
   margin:15px 15px 0 5px;
}
.clsCategoryTile h3 .jqIcon {
   float:left;
   font-size:100%;
   line-height:1.5em;
   margin:16px 5px 0 15px;
}
.clsCategoryTile a {
   display:block;
   font-weight:normal;
   color:inherit;
}
.clsCategoryTile h3 a:hover {
   text-decoration:underline;
}
.clsCategoryTile ul {
   margin:5px 0 15px;
   padding:0 0 0 25px;
}
.clsCategoryTile li {
   padding-left:0;
}
.clsCategoryTile li a:hover {
   text-decoration:underline;
}

Test