Item8507:

* added livequery and rewrote all initializers to use it * added rating formfield type * updated jqGrid to latest version * improved foswiki integration and documentation of various plugins * upgraded jwplayer coming with media plugin git-svn-id: http://svn.foswiki.org/trunk@6283 0b4bb1d4-4e5a-0410-9cc4-b2b747904278
foswiki · Feb 12, 2010 · f0cbfb1 · f0cbfb1
1 parent 3ddb888
commit f0cbfb1
Show file tree

Hide file tree

Showing 259 changed files with 8,020 additions and 9,863 deletions.
diff --git a/JQueryPlugin/data/System/JQueryAutocomplete.txt b/JQueryPlugin/data/System/JQueryAutocomplete.txt
@@ -1,4 +1,4 @@
-%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1258378319" format="1.1" reprev="1.2" version="1.2"}%
+%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1265646565" format="1.1" reprev="1.3" version="1.3"}%
 %META:TOPICPARENT{name="JQueryPlugin"}%
 ---+ %TOPIC%
 %JQPLUGINS{"autocomplete"
@@ -25,48 +25,58 @@ See also [[%SYSTEMWEB%.JQueryAjaxHelper][JQueryjaxHelper]] for examples on how t
 into Foswiki.
 %ENDSECTION{"summary"}%
 
+---++ Usage
+
+Autocompletion is activated for HTML input elements whose ==autocomplete== attribute value does not equal =off=.
+It can either be list of candidate values, or an url in which case candidate values are queried from an ajax backend.
+The current input prefix is provided via the =q= urlparameter. The backend must return a list of matching values
+separated by newlines.
+
 ---++ Examples
 %JQREQUIRE{"autocomplete"}%
 
-<literal>
-<script>
-(function($) {
-  $(function(){
-    $("#example").autocomplete(
-      ["admin", 
-       "backup",
-       "bash",
-       "emulation",
-       "games",
-       "irc",
-       "linux",
-       "mercurial",
-       "patches",
-       "perl",
-       "php",
-       "python",
-       "site",
-       "surfing",
-       "tag",
-       "test",
-       "foswiki",
-       "web",
-       "wiki",
-       "windows",
-       "windsurfing",
-       "wine"
-      ], {
-        multiple: true,
-        selectFirst: false,
-        matchCase: false,
-        matchSubset: true,
-        minChars: 1
-      }
-    );
-  });
-})(jQuery);
-</script>
-</literal>
+This example queries candidate values from a simple ajax backend using the wiki application in the =data= section of this topic. Note, that you will need Foswiki:Extensions.FilterPlugin to run the example successfully.
+
+<div class="foswikiFormSteps">
+  <div class="foswikiFormStep">
+    <h3>Enter tags:</h3>
+    <input class="foswikiInputField {multiple:true, matchCase:false, matchSubset:true, minChars:1}" id="example" size='42' autocomplete="%SCRIPTURL{"view"}%/%WEB%/%TOPIC%?section=data;skin=text" />
+    <div class="foswikiFormDescription">
+      Tags are suggested as you type. Separate multiple tags using a comma (,).
+    </div>
+  </div>
+</div>
 
-*Enter tags:* 
-<input class="foswikiInputField" id="example" size='42' />
+---++ Backend Implementation
+<verbatim class="tml">
+%STARTSECTION{"data"}%%FORMATLIST{
+  "
+    admin
+    backup
+    bash
+    emulation
+    games
+    irc
+    linux
+    mercurial
+    patches
+    perl
+    php
+    python
+    site
+    surfing
+    tag
+    test
+    foswiki
+    web
+    wiki
+    windows
+    windsurfing
+    wine
+  "
+  split="\n"
+  format=" $1 "
+  separator="$n"
+  include=".*%URLPARAM{"q"}%.*"
+}%%ENDSECTION{"data"}%
+</verbatim>
diff --git a/JQueryPlugin/data/System/JQueryCodingStandards.txt b/JQueryPlugin/data/System/JQueryCodingStandards.txt
@@ -1,4 +1,4 @@
-%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1256240816" format="1.1" reprev="1.1" version="1.1"}%
+%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1265972954" format="1.1" reprev="1.2" version="1.2"}%
 %META:TOPICPARENT{name="JQueryPlugin"}%
 ---+!! %TOPIC%
 Follow [[http://drupal.org/node/172169][Drupal&#8217;s JavaScript coding standards]]
@@ -82,6 +82,7 @@ There is a set of predefined variables that can be used in your javascript code
 | foswiki.ImagePluginEnabled | %IF<nop>{"context ImagePluginEnabled" then="true" else="false"}% | 
 | foswiki.MathModePluginEnabled | %IF<nop>{"context MathModePluginEnabled" then="true" else="false"}% |
 </noautolink>
+
 ---++ Avoid Internet Explorer errors
 
    * Use an object if you need an associative array, not an array. [[http://ajaxian.com/archives/javascript-associative-arrays-considered-harmful][[source]]]
@@ -90,4 +91,34 @@ There is a set of predefined variables that can be used in your javascript code
      <verbatim class="js">var object = { foo: 'bar' }</verbatim> not 
      <verbatim class="js">var object = { foo: 'bar', }</verbatim>
 
+---++ Metadata
+
+Use JQueryMetadata to integrate jQuery plugins into Foswiki.
+
+---++ <nop>LiveQuery
+
+Use JQueryLiveQuery to initialize your plugin for all html elements of a page. Otherwise content
+that is loaded asynchronously using ajax won't be initialized. !LiveQuery will take care of that
+automatically.
+
+Instead of
+
+<verbatim class="js">
+$(".jqPluginName").each(function() {
+  // initializer
+});
+</verbatim>
+
+use
+
+<verbatim class="js">
+$(".jqPluginName").livequery(function() {
+  // initializer
+});
+</verbatim>
+
+See JQueryMetadata for a more thorough example of useing metadata and livequery
+
+
+
 %META:PREFERENCE{name="TOPICTITLE" title="TOPICTITLE" type="Local" value="JQuery Coding Standards"}%
diff --git a/JQueryPlugin/data/System/JQueryCookie.txt b/JQueryPlugin/data/System/JQueryCookie.txt
@@ -1,4 +1,4 @@
-%META:TOPICINFO{author="ProjectContributor" date="1258385507" format="1.1" version="1.2"}%
+%META:TOPICINFO{author="ProjectContributor" date="1265646639" format="1.1" version="1.3"}%
 %META:TOPICPARENT{name="JQueryPlugin"}%
 ---+ %TOPIC%
 %JQPLUGINS{"cookie"
@@ -14,14 +14,16 @@ Easy cookie handling using jQuery.
 %ENDSECTION{"summary"}%
 
 ---++ Usage
+
    * =$.cookie('the_cookie');=: return the value of the cookie
    * =$.cookie('the_cookie', 'the_value');=: set the value of a cookie
    * =$.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });=:
      create a cookie with all available options.
    * =$.cookie('the_cookie', null);=: delete a cookie by passing null as value.
       Keep in mind that you have to use the same path and domain used when the cookie was set.
 
-Options:
+---++ Options
+
    * expires: either an integer specifying the expiration date from now on in days or a Date object.
      If a negative value is specified (e.g. a date in the past), the cookie will
      be deleted.  If set to null or omitted, the cookie will be a session cookie and

diff --git a/JQueryPlugin/data/System/JQueryCorner.txt b/JQueryPlugin/data/System/JQueryCorner.txt
@@ -1,4 +1,4 @@
-%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1259855530" format="1.1" reprev="1.1" version="1.1"}%
+%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1265646658" format="1.1" reprev="1.2" version="1.2"}%
 %META:TOPICPARENT{name="JQueryPlugin"}%
 ---+ %TOPIC%
 %JQPLUGINS{"corner"
@@ -15,6 +15,9 @@ there is a fallback strategy for others.
 %ENDSECTION{"summary"}%
 
 ---++ Usage
+
+---+++ !JavaScript API
+
 The javascript API: =corner()= takes a single string argument:  
 <verbatim class="js">
 $('#myDiv').corner("effect corners width");
@@ -29,6 +32,12 @@ with
 
 Any element using the =jqCorner= class will be rounded. Options are extracted from the =data-corner= attribute of the markup.
 
+---+++ Foswiki integration
+
+Add the ==jqCorner== class to elements that should be rounded. Additional parameter are provided via
+the =data-corner= attribute of an HTML element. (Note, that this differs from other plugins where parameters
+are provided inside the =class= attribute using JQueryMetadata.)
+
 ---++ Examples
 %JQREQUIRE{"corner"}%
 

diff --git a/JQueryPlugin/data/System/JQueryCycle.txt b/JQueryPlugin/data/System/JQueryCycle.txt
@@ -1,4 +1,4 @@
-%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1258379821" format="1.1" reprev="1.2" version="1.2"}%
+%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1265646675" format="1.1" reprev="1.3" version="1.3"}%
 %META:TOPICPARENT{name="JQueryPlugin"}%
 ---+ %TOPIC%
 %JQPLUGINS{"cycle"
@@ -18,8 +18,14 @@ many transition effects. It also supports, but does not require, the Metadata
 Plugin and the Easing Plugin.
 %ENDSECTION{"summary"}%
 
+---++ Usage
+
+Add the ==jqCycle== class to the container holding the elements to be cycled. 
+
 ---++ Examples
-<div class="pics">
+%JQREQUIRE{"cycle"}%
+
+<div class="pics jqCycle {fx:'scrollLeft'}">
 <div>
   <img src="%ATTACHURLPATH%/beach1.jpg" />
 
@@ -37,16 +43,6 @@ Plugin and the Easing Plugin.
 </div>
 </div>
 
-%JQREQUIRE{"cycle"}%
-
-<literal>
-<script type="text/javascript">
-(function($) {
-  $(function() {
-    $(".pics").cycle({fx:'scrollLeft'});
-  });
-})(jQuery);
-</script>
 
 <style type="text/css">
 .pics  {  

diff --git a/JQueryPlugin/data/System/JQueryDebug.txt b/JQueryPlugin/data/System/JQueryDebug.txt
@@ -1,4 +1,4 @@
-%META:TOPICINFO{author="ProjectContributor" date="1258385452" format="1.1" version="1.2"}%
+%META:TOPICINFO{author="ProjectContributor" date="1265644624" format="1.1" version="1.3"}%
 %META:TOPICPARENT{name="JQueryPlugin"}%
 ---+ %TOPIC%
 %JQPLUGINS{"debug"
@@ -10,18 +10,10 @@
 }%
 
 %STARTSECTION{"summary"}%
-Simple jQuery logger / debugger using firebug's console or a div of its own of the form
-<verbatim class="html">
-<div id="DEBUG">
-  <ol>
-    <li>...</li>
-    ...
-  </ol>
-</div>
-</verbatim>
+Simple jQuery logger / debugger using firebug's console or a div of its own of the form. Useful for !JavaScript developers.
 %ENDSECTION{"summary"}%
 
 ---++ Usage
    * =$.log("message");=: will send the message to the console
    * =$.log(object);=: will stringify the object
-   * =$("<selector>").debug();= will stringify the found objects
+   * =$("<selector>").debug();= will stringify the found objects
diff --git a/JQueryPlugin/data/System/JQueryFarbtastic.txt b/JQueryPlugin/data/System/JQueryFarbtastic.txt
@@ -1,4 +1,4 @@
-%META:TOPICINFO{author="ProjectContributor" comment="save topic" date="1258385161" format="1.1" reprev="1.2" version="1.2"}%
+%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1265664634" format="1.1" reprev="1.4" version="1.4"}%
 %META:TOPICPARENT{name="JQueryPlugin"}%
 ---+ %TOPIC%
 %JQPLUGINS{"farbtastic"
@@ -19,6 +19,24 @@ gradient inside of a hue circle. No Flash or pixel-sized divs are used.
 There's a =color= formfield for easy integration into Foswiki DataForms.
 %ENDSECTION{"summary"}%
 
+---++ Usage
+
+Add the class ==jqFarbtastic== to an input element that you want to attach the color selector to.
+The widget can be parametrized using [[JQueryMetadata][metadata]] inside the class attribute.
+
+---++ Color Formfield
+
+With the farbtastic plugin comes a formfield type ==color= that lets you add one or more color formfields to %SYSTEMWEB%.DataForms. Try
+
+| *Name*  | *Type* | *Size* | *Values* | *Tooltip message* | *Attributes* |
+| Color1 | color | 10 | | | |
+| Color2 | color | 10 | | | |
+| Color3 | color | 10 | | | |
+| Color4 | color | 10 | | | |
+
+To define a !PaletteForm with 4 colors.
+
 ---++ Examples
 %JQREQUIRE{"farbtastic"}%
+
 <input type="text" id="color" name="color" value="#123456" class="jqFarbtastic" />
diff --git a/JQueryPlugin/data/System/JQueryFluidFont.txt b/JQueryPlugin/data/System/JQueryFluidFont.txt
@@ -1,4 +1,4 @@
-%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1259841996" format="1.1" reprev="1.1" version="1.1"}%
+%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1265649188" format="1.1" reprev="1.2" version="1.2"}%
 %META:TOPICPARENT{name="JQueryPlugin"}%
 ---+ %TOPIC%
 %JQPLUGINS{"fluidfont"
@@ -14,6 +14,8 @@ Recompute the font size of an element based on its width.
 %ENDSECTION{"summary"}%
 
 ---++ Usage
+
+---+++ !JavaScript API
 The =fluidfont()= plugin attaches to a jQuery object and recomputes its font-size based on its width.
 You can specify a width at which the original font size should be used. When the element is resized
 the ratio between width and font-size is maintained continuously.
@@ -24,7 +26,8 @@ the ratio between width and font-size is maintained continuously.
    * min: minimal font size in px 
    * max: maximal font size in px
 
-!FluidFont is activated for any html element that has got the =jqFluidFont= class. Options can be specified
+---+++ Foswiki integration
+!FluidFont is activated for any html element that has got the ==jqFluidFont== class. Options can be specified
 using JQueryMetadata.
 
 ---++ Examples
@@ -44,7 +47,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam facilisis neque i
 
 
 %IF{"$'fluidfont'='on'" 
-  then="$percntINCLUDE{\"%WEB%.%TOPIC%\" section=\"fluidfont\"}$percnt 
+  then="$percntADDTOZONE{\"body\" topic=\"%WEB%.%TOPIC%\" section=\"fluidfont\"}$percnt 
         Fluid font is activated. Try to resize the browser window."
   else="<a href='%SCRIPTURLPATH{"view"}%/%WEB%/%TOPIC%?fluidfont=on'>Click here</a> 
         to activate fluid font for all of this page."
@@ -54,12 +57,13 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam facilisis neque i
 %STARTSECTION{"fluidfont"}%
 <script type="text/javascript">
 jQuery(function($) {
+  alert("Switching on fluid font for the body element. \n Resize the browser window to see the effect.");
   $("body").fluidfont({
     width: 1024, 
     min: 11,
     max: 20
   });
 });
 </script>
-</verbatim>
-%ENDSECTION{"fluidfont"}%
+%ENDSECTION{"fluidfont"}%
+</verbatim>
diff --git a/JQueryPlugin/data/System/JQueryFocus.txt b/JQueryPlugin/data/System/JQueryFocus.txt
@@ -1,4 +1,4 @@
-%META:TOPICINFO{author="ProjectContributor" comment="reprev" date="1258385067" format="1.1" reprev="1.2" version="1.2"}%
+%META:TOPICINFO{author="ProjectContributor" date="1265649228" format="1.1" version="1.3"}%
 %META:TOPICPARENT{name="JQueryPlugin"}%
 ---+ %TOPIC%
 %JQPLUGINS{"focus"
@@ -12,10 +12,11 @@
 %STARTSECTION{"summary"}%
 This plugin sets the focus on a form input field
 or textarea of a form when the page is loaded.
+%ENDSECTION{"summary"}%
 
-Add the css class =.jqFocus= to the input field you'd like to
+---++ Usage
+Add the css class ==jqFocus== to the input field you'd like to
 focus.
-%ENDSECTION{"summary"}%
 
 ---++ Examples
 %JQREQUIRE{"focus"}%