Documentation

renders a set of tiles for webs

See also RenderCategory

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

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.