Skip to content

Commit

Permalink
Item10302: syncing trunk
Browse files Browse the repository at this point in the history 
git-svn-id: http://svn.foswiki.org/branches/Release01x01@12658 0b4bb1d4-4e5a-0410-9cc4-b2b747904278
  • Loading branch information
MichaelDaum authored and MichaelDaum committed Sep 30, 2011
1 parent c471fb2 commit 27d5720
Show file tree
Hide file tree
Showing 233 changed files with 42,997 additions and 9,736 deletions.
156 changes: 84 additions & 72 deletions JQueryPlugin/data/System/JQueryAjaxHelper.txt
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,16 @@
%META:TOPICINFO{author="ProjectContributor" comment="save topic" date="1283353795" format="1.1" reprev="9" version="9"}%
%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1308932234" format="1.1" reprev="10" version="10"}%
%META:TOPICPARENT{name="JQueryPlugin"}%
<!--
Hidden form definition
|*Name* |*Type* |*Size* |*Values* |*Tooltip message* |*Attributes* |
| Example | text | 40 | | | |
-->
<literal>
%JQREQUIRE{"chili"}%
%JQREQUIRE{"autocomplete"}%
</literal>
%JQREQUIRE{"chili, ui"}%
---+!! %TOPIC%

This page contains is a set of example JQueryPlugin helpers that can be used in
This page contains a set of example JQueryPlugin helpers that can be used in
wiki applications. The examples demonstrate how you can
dynamically populate =jquery.autocomplete= enabled input boxes.
dynamically populate autocomplete enabled input boxes using JQueryUIAutocomplete.

Examples are in two parts; a *Client* section and a *Server* section.
The *Client* section is designed to be included into your topics using
Expand Down Expand Up @@ -43,7 +40,7 @@ these sections when building up your own library of input types. Some
examples of the use of these plugins are given at the end of this topic.

---++ Topic selector
Select a topic in the current web. =jquery.autocomplete= is given a url that
Select a topic in the current web. JQueryUIAutocomplete is given a url that
loads the =topic= section of this topic, which expands to the topic list.

---+++ Client section
Expand All @@ -67,11 +64,13 @@ loads the =topic= section of this topic, which expands to the topic list.
* =exclude=: exclude expression to filter out unwanted topics
<verbatim class="tml">
%STARTSECTION{"topic"}%%SEARCH{
"^%URLPARAM{"q" default="does not exist"}%.*"
"^%URLPARAM{"term" default="does not exist"}%.*"
type="regex"
scope="topic"
format="<nop>%URLPARAM{"format" default="$topic"}%"
separator="$n"
header="["
format="<nop>%URLPARAM{"format" default="\\"$topic\\""}%"
separator=","
footer="]"
limit="%URLPARAM{"limit" default="10"}%"
nonoise="on"
excludetopic="%URLPARAM{"exclude"}%"
Expand All @@ -90,7 +89,7 @@ loads the =topic= section of this topic, which expands to the topic list.
</form>

---++ Web selector
Select from a list of webs, using =jquery.autocomplete=.
Select from a list of webs, using autocomplete

__Note:__ there is currently no way to filter a list of webs in the
default Foswiki core. To use this example you will have to install
Expand All @@ -102,7 +101,7 @@ Foswiki:Extensions.FlexWebListPlugin.
* =INPUT_VALUE=: preselected value
<verbatim class="tml">
%STARTSECTION{"webselector"}%<!-- webselector -->
<input type="text" class="foswikiInputField {matchCase:true}" name="%INPUT_NAME%" id="%INPUT_NAME%" autocomplete="%SCRIPTURL{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?section=web;skin=text;%IF{"defined EXCLUDE" then="exclude=%EXCLUDE%"}%" size="60" value="%IF{"defined INPUT_VALUE" then="%INPUT_VALUE%"}%" />
<input type="text" class="foswikiInputField" name="%INPUT_NAME%" id="%INPUT_NAME%" autocomplete="%SCRIPTURL{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?section=web;skin=text;%IF{"defined EXCLUDE" then="exclude=%EXCLUDE%"}%" size="60" value="%IF{"defined INPUT_VALUE" then="%INPUT_VALUE%"}%" />
<!-- //webselector -->%ENDSECTION{"webselector"}%
</verbatim>

Expand All @@ -112,12 +111,15 @@ Foswiki:Extensions.FlexWebListPlugin.
* =limit=: number of search results to return, defaults to 10
<verbatim class="tml">
%STARTSECTION{"web"}%%FLEXWEBLIST{
include="^%URLPARAM{"q" default="does not exist"}%.*"
include="^%URLPARAM{"term" default="does not exist"}%.*"
ignorecase="on"
limit="%URLPARAM{"limit" default="10"}%"
format="<nop>$web"
separator="$n"
subheader="$n"
header="["
format="\"<nop>$web\""
footer="]"
separator=", "
subheader=", "
subfooter=""
}%%ENDSECTION{"web"}%
</verbatim>

Expand All @@ -136,15 +138,14 @@ Jump to specific topics.

---+++ Client section
*INCLUDE Parameters*
* =INPUT_NAME=: name of text input field, defaults to jumpbox
* =GLOBAL=: toggle search for topics in all webs on/off, defaults to off
<verbatim class="tml">
%STARTSECTION{"jumpbox"}%<!-- jumpbox -->
<input type="text" class="foswikiInputField jqJumpBox {%IF{
"$GLOBAL = 'on'"
then="global: true, baseweb:'all', format:'$web.$topic'"
else="global: false, baseweb:'%BASEWEB%', format:'$topic'"
}%}" name="%IF{"defined INPUT_NAME" then="%INPUT_NAME%" else="jumpbox"}%" autocomplete="off" size="60" />
}%}" name="topic" autocomplete="off" size="60" />
%ADDTOZONE{"script"
tag="jumpbox::js"
section="jumpbox::js"
Expand All @@ -158,14 +159,12 @@ The following section is used by the section above; it adds a special Javascript
<script type="text/javascript">
jQuery(function($){
$(".jqJumpBox").each(function() {
var $this = $(this);
var opts = $.extend({}, $this.metadata());
$this.autocomplete(
"%SCRIPTURL{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?section=topic;skin=text"+
";baseweb="+opts.baseweb+
";format="+opts.format
).result(function(event, item) {
window.location.href="%SCRIPTURLPATH{"view"}%/"+(opts.global?'':opts.baseweb+'/')+item;
var $this = $(this),
opts = $.extend({}, $this.metadata());
$this.autocomplete({
source: "%SCRIPTURL{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?section=topic;skin=text"+
";baseweb="+opts.baseweb+
";format="+opts.format
});
});
});
Expand All @@ -190,7 +189,7 @@ Uses the =[[#Topic_selector][topic]]= server section, defined above.
<div class="foswikiFormSteps">
<div class="foswikiFormStep">
<h3 >Global Jump:</h3>
%INCLUDE{"%TOPIC%" section="jumpbox" GLOBAL="on" INPUT_NAME="globaljumpbox"}%
%INCLUDE{"%TOPIC%" section="jumpbox" GLOBAL="on"}%
</div>
</div>
</form>
Expand All @@ -202,11 +201,11 @@ Uses the =[[#Topic_selector][topic]]= server section, defined above.
* =INPUT_VALUE=: preselected user
<verbatim class="tml">
%STARTSECTION{"userselector"}%<!-- userselector -->
<input type="text" class="foswikiInputField jqUserSelector" name="%INPUT_NAME%" id="%INPUT_NAME%" autocomplete="off" size="60" value="%IF{"defined INPUT_VALUE" then="%INPUT_VALUE%"}%" />
<input type="text" class="foswikiInputField jqUserSelector" name="%INPUT_NAME%" id="%INPUT_NAME%" autocomplete="%SCRIPTURL{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?section=user;skin=text" size="60" value="%IF{"defined INPUT_VALUE" then="%INPUT_VALUE%"}%" />
%ADDTOZONE{"script"
tag="userselector::js"
section="userselector::js"
requires="JQUERYPLUGIN::AUTOCOMPLETE"
requires="JQUERYPLUGIN::UI::AUTOCOMPLETE"
}%
<!-- //userselector -->%ENDSECTION{"userselector"}%
</verbatim>
Expand All @@ -215,21 +214,14 @@ The following section is used by the section above; it adds a special Javascript
%STARTSECTION{"userselector::js"}%<literal>
<script type="text/javascript">
jQuery(function($){
$(".jqUserSelector").each(function() {
var $this = $(this);
var opts = $.extend({
autoFill:false,
selectFirst:false,
scrollHeight:250,
formatItem: function(row, index, max, search) {
return "<table width='100%'><tr><td width='60px'><img width='50' src='"+row[2]+"' /></td><td>"+row[0]+"<br />"+row[1]+"</td></tr></table>";
}
}, $this.metadata());
$this.autocomplete(
"%SCRIPTURL{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?section=user;skin=text",
opts
);
});
$(".jqUserSelector").data("autocomplete")._renderItem = function(ul, item) {
if (typeof(item.label) !== 'undefined') {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a><table width='100%'><tr><td width='60px'><img width='50' src='"+item.img+"' /></td><td>"+item.label+"<br />"+item.email+"</td></tr></table></a>")
.appendTo(ul);
}
};
});
</script>
</literal>%ENDSECTION{"userselector::js"}%
Expand All @@ -239,16 +231,27 @@ jQuery(function($){
* =q=: search term substring typed so far
* =limit=: number of search results to return, defaults to 10
<verbatim class="tml">
%STARTSECTION{"user"}%%SEARCH{
"^%URLPARAM{"q" default="does not exist"}%.*"
type="regex"
scope="topic"
format="$percntUSERINFO{\"$topic\" format=\"<nop>$dollarwikiname|$dollaremails|$percntFORMFIELD{\"Photo\" topic=\"$web.$topic\" default=\"%PUBURLPATH%/%SYSTEMWEB%/JQueryPlugin/images/nobody.gif\" alttext=\"%PUBURLPATH%/%SYSTEMWEB%/JQueryPlugin/images/nobody.gif\"}$percnt$n\"}$percnt"
separator=""
limit="%URLPARAM{"limit" default="10"}%"
nonoise="on"
web="%USERSWEB%"
}%%ENDSECTION{"user"}%
%STARTSECTION{"user"}%<literal>%FORMAT{
"%SEARCH{
"^%URLPARAM{"term" default="does not exist"}%.*"
type="regex"
scope="topic"
format="$percntUSERINFO{\"$topic\" format=\"$dollarwikiusername, \"}$percnt"
separator=""
limit="%URLPARAM{"limit" default="10"}%"
nonoise="on"
web="%USERSWEB%"
}%"
type="string"
header="["
format="$percntUSERINFO{
\"$item\"
format=\"{\\"label\\":\\"<nop>$dollarwikiname\\", \\"email\\":\\"$dollaremails\\", \\"img\\":\\"$percntFORMFIELD{\"Photo\" topic=\"$item\" default=\"%PUBURLPATH%/%SYSTEMWEB%/JQueryPlugin/images/nobody.gif\" alttext=\"%PUBURLPATH%/%SYSTEMWEB%/JQueryPlugin/images/nobody.gif\" }$percnt\\"}\"
}$percnt"
separator=",$n"
footer="]"
}%
</literal>%ENDSECTION{"user"}%
</verbatim>

---+++ Example
Expand All @@ -271,42 +274,40 @@ or later).
* =SOURCE=: topic to get the field from
* =QUERY=: query to perform
<verbatim class="tml">
%STARTSECTION{"queryfetcher"}%<literal>
%ADDTOZONE{"script"
%STARTSECTION{"queryfetcher"}%%ADDTOZONE{"script"
tag="query::js"
requires="JQUERYPLUGIN"
text ="
text ="<literal>
<script type=\"text/javascript\">
jQuery(function($){
$(\"#%ID%\").click(function() {
$.get(\"%SCRIPTURL{"view"}%/%SYSTEMWEB%/JQueryAjaxHelper?section=query;source=%SOURCE%;query=%QUERY%;skin=text\",
function(data) {
// This is the function that will be executed when the
// data is fetched
alert(\"Value is '\" + eval(data) + \"'\");
alert(\"Value is '\" + data + \"'\");
});
});
});
</script>
"}%
</literal>%ENDSECTION{"queryfetcher"}%
</script></literal>
"}%%ENDSECTION{"queryfetcher"}%
</verbatim>

---+++ Server section
*URL parameters*
* =source=: source topic
* =query=: query to perform
<verbatim class="tml">
%STARTSECTION{"query"}%%QUERY{
%STARTSECTION{"query"}%<noautolink>%QUERY{
"%URLPARAM{"query" default="query missing"}%"
topic="%URLPARAM{"source" default="source missing"
style="json"}%"
}%%ENDSECTION{"query"}%
}%</noautolink>%ENDSECTION{"query"}%
</verbatim>

---+++ Example
%INCLUDE{"%TOPIC%" section="queryfetcher" ID="jqQueryExample" SOURCE="%TOPIC%" QUERY="parent.name"}%
<input type="button" id="jqQueryExample" value="Click here" /> to get the parent of this topic asynchronously (should be '%QUERY{"parent.name"}%')
<input type="button" class="foswikiButton id="jqQueryExample" value="Click here" /> to get the parent of this topic asynchronously (should be '%QUERY{"parent.name"}%')

---++ Other selectors
Server sections for some other selectors that are common in wiki applications.
Expand Down Expand Up @@ -358,13 +359,24 @@ installation of optional extensions.
---+++ =user_fast=
Foswiki:Extensions.DBCachePlugin implementation of the [[#User_selector][user selector]] server section.
<verbatim class="tml">
%STARTSECTION{"user_fast"}%%DBQUERY{
"uc(topic) =~ uc('^%URLPARAM{"q" default="does not exist"}%')"
format="$percntUSERINFO{\"$topic\" format=\"<nop>$dollarwikiname|$dollaremails|$expand(Photo or '%PUBURLPATH%/%SYSTEMWEB%/JQueryPlugin/images/nobody.gif')$n\"}$percnt"
separator=""
limit="%URLPARAM{"limit" default="10"}%"
web="%USERSWEB%"
}%%ENDSECTION{"user_fast"}%
%STARTSECTION{"user_fast"}%<literal>%FORMAT{
"%DBQUERY{
"uc(topic) =~ uc('^%URLPARAM{"term" default="does not exist"}%')"
format="$percntUSERINFO{\"$topic\" format=\"$dollarwikiusername, \"}$percnt"
separator=""
limit="%URLPARAM{"limit" default="10"}%"
nonoise="on"
web="%USERSWEB%"
}%"
type="string"
header="["
format="$percntUSERINFO{
\"$item\"
format=\"{\\"label\\":\\"<nop>$dollarwikiname\\", \\"email\\":\\"$dollaremails\\", \\"img\\":\\"$percntFORMFIELD{\"Photo\" topic=\"$item\" default=\"%PUBURLPATH%/%SYSTEMWEB%/JQueryPlugin/images/nobody.gif\" alttext=\"%PUBURLPATH%/%SYSTEMWEB%/JQueryPlugin/images/nobody.gif\" }$percnt\\"}\"
}$percnt"
separator=",$n"
footer="]"
}%</literal>%ENDSECTION{"user_fast"}%
</verbatim>

%META:FORM{name="JQueryAjaxHelper"}%
Expand Down
9 changes: 8 additions & 1 deletion JQueryPlugin/data/System/JQueryAutocomplete.txt
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1292242485" format="1.1" reprev="3" version="5"}%
%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1306500349" format="1.1" reprev="6" version="6"}%
%META:TOPICPARENT{name="JQueryPlugin"}%
---+ %TOPIC%
%JQPLUGINS{"autocomplete"
Expand All @@ -10,6 +10,10 @@
}%

%STARTSECTION{"summary"}%
<div class="foswikiWarningMessage">
Warning: This plugin is deprecated. Please use the autocomplete library as part of JQueryUI.
</div>

Autocomplete an input field to enable users quickly finding and selecting some
value from a set provided by the server.
By giving an autocompleted field focus or entering something into it, the
Expand All @@ -22,6 +26,9 @@ addresses from an addressbook.

See also [[%SYSTEMWEB%.JQueryAjaxHelper][JQueryjaxHelper]] for examples on how to integrate autocompletion
into Foswiki.

%X% *Caution*: the original author of this plugin discontinued to support this plugin. A replacement has been added to
the JQueryUI package. Here is a [[http://www.learningjquery.com/2010/06/autocomplete-migration-guide][Migration Guide]] for the autocompletion plugin.
%ENDSECTION{"summary"}%

---++ Usage
Expand Down
55 changes: 54 additions & 1 deletion JQueryPlugin/data/System/JQueryBlockUI.txt
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
%META:TOPICINFO{author="ProjectContributor" date="1258385639" format="1.1" version="1.2"}%
%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1306419241" format="1.1" reprev="3" version="3"}%
%META:TOPICPARENT{name="JQueryPlugin"}%
---+ %TOPIC%
%JQPLUGINS{"blockui"
Expand All @@ -17,3 +17,56 @@ adds elements to the DOM to give it both the appearance and behavior of
blocking user interaction.
%ENDSECTION{"summary"}%

---++ Demo
%JQREQUIRE{"blockui"}%

<a href="#" id="demo1">Click here</a>
%CLEAR%

<div id="loginForm" style="display:none; text-align:left;">
<h2 >Hey there ... </h2>
<input type="text" name="username" class="foswikiInputField" size="20" placeholder="username" />
<input type="password" name="password" class="foswikiInputField" size="20" placeholder="password" />

%BUTTON{"Sign in" icon="tick" id="signin" class="center"}%
%CLEAR%
</div>

<literal>
<script>
jQuery(function($) {
$('#demo1').click(function() {

$.blockUI({
message: $('#loginForm'),
css: { width:'auto' },
//timeout: 20000,
focusInput: false,
onBlock: function() {
//alert('Page is now blocked.');
}
});

$('.blockOverlay').click(function() {
$.unblockUI({
onUnblock: function(){ alert('Aborted.'); }
});
return false;
});

return false;
});

$("#signin").click(function() {
$.unblockUI({
onUnblock: function() { alert('Welcome to Foswiki.'); }
});
});
});
</script>

<style>
.blockUI { background:#fff; font-size:110%; }
.blockUI h2 { color:#9C3063; margin-top:0; }
</style>
</literal>
Loading

0 comments on commit 27d5720

Please sign in to comment.