RenderIconSelector

Renders a widget to select a photo

Documentation

This function renders a selection widget to chose an icon

Parameters

• VALUE: which icon is preselected
• SOURCE: topic that has got a set of icons attached to it, defaults to IconSet

Implementation

%STARTINCLUDE%<!-- render photo selector -->
<div class="clsIconSelector">
<input type="hidden" class="clsIconInput" name="Icon" value="%IF{"defined VALUE" then="%VALUE%"}%" />
%ATTACHMENTS{
   topic="%IF{"defined SOURCE" then="%SOURCE%" else="Applications.ClassificationApp.IconSet"}%"
   name=".*\.(jpe?g|JPE?G|gif|GIF|png|PNG)$"
   sort="name"
   format="<div class='clsIconContainer'><img class='clsIcon' src='$url' alt='$name' title='$name' height='16px' /></div>"
}%
%CLEAR%
</div>
<literal>
<script>
jQuery(function($) {
  $(".clsIconSelector").each(function() {
    var $selector = $(this), 
    $input = $selector.find(".clsIconInput");

    function updateSelection(name) {
      $selector.find(".clsIconContainer").removeClass("selected")

      if (typeof(name) === 'undefined') {
        name = $(".clsIconInput").val();
      }

      if (name) {
        $selector.find("img[alt='"+name+"']").parent().addClass("selected");
      }
      $input.val(name);
    }

    $selector.find(".clsIcon").click(function(e) {
      var $this = $(this),
          $container = $this.parent(),
          name = $this.attr("alt");

      if ($container.is(".selected")) {
        updateSelection("");
      } else {
        updateSelection(name);
      }
      e.preventDefault();
      return false;
    });

    updateSelection()
  });
});
</script>
</literal>
%STOPINCLUDE%

Test