%META:TOPICINFO{author="ProjectContributor" date="1763756981" format="1.1" version="1"}%
%META:TOPICPARENT{name="JQueryPlugin"}%
---+ %TOPIC%
%JQPLUGINS{"wikiword"
  format="
    Homepage: $homepage <br />
    Author(s): $author <br />
    Version: $version
  "
}%

%STARTSECTION{"summary"}%
This plugin allows to create a <nop>WikiWord on the base of a set of
input elements. The value of these are concatenated and the result is
normalized to be a valid <nop>WikiWord. For example, this can be used
to derive a topic name from a free-form topic title text.
%ENDSECTION{"summary"}%

---++ Foswiki integration

Add the =jqWikiWord= to an html input field and specify the source from which
to derive the !WikiWord using HTML5 meta data:
<verbatim class="js">
{
  source:'selector', /* e.g. '#projectTitle' */
  initial:'initial value', /* e.g. 'Project...' */
  prefix:'string to be prefixed to the wiki word', /* e.g. 'Project' */
  suffix:'string to be appended to the wiki word', /* e.g. 'AUTOINC0' */
  transliterate: true,
  allowedRegex:'characters that are allowed in a wiki word', /* e.g. 'a-zA-Z\\d' */
  forbiddenRegex:'characters that are not allowed in a wiki word' /* e.g. '[^a-zA-Z\\d]' */
}
</verbatim>

---++ Examples
<div class="foswikiFormSteps">
  <h2>New Project</h2>
  <form action="%SCRIPTURLPATH{"edit"}%/%WEB%" />
  <div class="foswikiFormStep">
    <h3>Title:</h3>
    <input type="text" id="prjTitle" size="60" name="TopicTitle" class="foswikiInputField" />
  </div>
  <div class="foswikiFormStep">
    <h3>Year:</h3>
    <select class="foswikiSelect" id="prjYear" name="prjYear">
      <option></option>
      <option>2005</option>
      <option>2006</option>
      <option>2007</option>
      <option>2008</option>
      <option>2009</option>
      <option>2010</option>
      <option>2011</option>
    </select>
  </div>
  <div class="foswikiFormStep">
    <h3>Project topic:</h3>
    <input type="text" id="prjTopic" size="60" name="topic" class="foswikiInputField jqWikiWord" data-source="#prjTitle, #prjYear" data-prefix="Project" data-initial="Project..." data-suffix="AUTOINC0" data-transliterate="true" />
  </div>
  <div class="foswikiFormStep foswikiFormLast">
    %BUTTON{"Submit" icon="fa-check" type="submit"}%
    %CLEAR%
  </div>
</div>

%JQREQUIRE{"wikiword"}%
