RenderImageSelector < Applications

You are here: Foswiki>Applications Web>TopicType>TopicFunction>RenderImageSelectorEditAttach

%TOC{depth="2"}%

---++ Documentation
%STARTSECTION{"documentation"}%
Select an image attached to a SOURCE topic

---+++++ Parameters
   * SELECTED
   * SOURCE
   * DEFAULT
   * FIELDNAME

%ENDSECTION{"documentation"}%

---++ Implementation
<verbatim class="tml">
%STARTINCLUDE%<!-- -->
<div class="fwbImageSelector">
  <div class='fwbImage %IF{"'%SELECTED%'='%DEFAULT%' or not defined SELECTED" then=" selected orig"}%' id='fwbImage0'>
    <label>
      <input type='radio' name='%FIELDNAME%' value='%DEFAULT%' %IF{"'%SELECTED%'='%DEFAULT%' or not defined SELECTED" then=" checked='checked'"}%/>
      <img src='%DEFAULT%' alt='default' height='100px' />
    </label>
  </div>
  %ATTACHMENTS{
    topic="%SOURCE%"
    name=".*\.(jpe?g|JPE?G|gif|GIF|png|PNG)$"
    exclude="%DEFAULT%"
    sort="name"
    format="<div class='fwbImage $percntIF{\"'%SELECTED%'='$urlpath'\" then=\" selected orig\"}$percnt' id='fwbImage$index'>
      <label>
        <input type='radio' name='%FIELDNAME%' value='$urlpath' $percntIF{\"'%SELECTED%'='$urlpath'\" then=\" checked='checked'\"}$percnt />
        <img src='$urlpath' alt='$name' height='100px' />
      </label></div>"
  }%
  %CLEAR%
</div>
<div class="fwbImageButtons">
  %BUTTON{"%MAKETEXT{"Clear"}%" icon="application" id="fwbImageButtonClear"}%
  %BUTTON{"%MAKETEXT{"Undo"}%" icon="arrow_undo" id="fwbImageButtonUndo"}%
  %CLEAR%
</div>
%ADDTOZONE{"script" section="js" requires="JQUERYPLUGIN"}%
%ADDTOZONE{"head" section="css"}%
<!-- -->%STOPINCLUDE%
</verbatim>

---++ Css
<verbatim class="css">
%STARTSECTION{"css"}%<literal>
<style>
.fwbImageSelector input {
  display:none;
}
.fwbImageSelector .fwbImage {
  float:left;
  border:1px solid #fff;
  margin:0 5px 5px 0;
  padding:1px;
}
.fwbImageSelector .selected {
  border:1px solid red;
}
.fwbImageSelector .fwbImage img {
  float:left;
}
</style>
</literal>%ENDSECTION{"css"}%
</verbatim>

---++ Javascript
<verbatim class="js">
%STARTSECTION{"js"}%<literal>
<script>
jQuery(function($) {
   $("#fwbImageButtonClear").click(function() {
     var $this = $(this);
     $this.blur();
     $('.fwbImage').removeClass('selected');
     $('.fwbImageSelector input').removeAttr('checked');
     $('#fwbImage0 label').trigger('click');
     return false;
  });
  $("#fwbImageButtonUndo").click(function() {
    var $this = (this);
    $this.blur();
    $('.fwbImage').removeClass('selected');
    $('.fwbImageSelector input').removeAttr('checked');
    $('.orig').parent().attr('checked', 'checked');
    $('.orig').addClass('selected');
    return false;
  });
  $(".fwbImageSelector label").click(function() {
    var $this = $(this);
    $('.fwbImage').removeClass('selected');
    $('.fwbImageSelector input').removeAttr('checked');
    $this.parent().addClass('selected');
    $this.parent().find("input").attr("checked", "checked");
    return false;
  });
});
</script>
</literal>%ENDSECTION{"js"}%
</verbatim>

---++ Test
%DBCALL{"%TOPIC%"
  SOURCE="%WEB%.%TOPIC%" 
  DEFAULT="%PUBURLPATH%/Applications/RenderImageSelector/nobody.jpeg" 
  FIELDNAME="Photo"
}%

%DBCALL{"Applications.RenderFunctionCallers"}%

---++ Copyright
&copy; 2006 - 2013 Michael Daum http://michaeldaumconsulting.com

%DBCALL{"Applications.GnuGeneralPublicLicense" section="notice"}%

ApplicationTopic edit

TopicType	DocuTopic, TopicFunction
TopicTitle
Summary	Renders a widget to select an image attached to a topic
WikiApplication	WikiWorkbench

Topic attachments
I	Attachment	Action	Size	Date	Who	Comment
jpeg	nobody.jpeg	manage	3.3 K	02 Oct 2012 - 09:41	ProjectContributor

Topic revision: r1 - 23 Dec 2012, ProjectContributor

Applications

Tools

Das Urheberrecht © liegt bei den mitwirkenden Autoren. Alle Inhalte dieser Kollaborations-Plattform sind Eigentum der Autoren.