JSPopupPlugin < System

---+ JSPopupPlugin Foswiki Plugin

JSPopupPlugin allows you to show dynamic content in a virtual popup dialog.
Good for status messages, or to show detailed information without causing the
web browser's context to switch from the page that they requested.

*Uses Foswiki:Extensions.YahooUserInterfaceContrib*

It uses javascript to create a popup window containing either a hidden pre-rendered
part of a topic, or a Foswiki request that is dynamically requested and served.
Popups are activated either on a mouse click, when the mouse passes over the anchor, or when the page is loaded.

To make it easy for [[%SYSTEMWEB%.Skins]] developers, any html link with the css  =foswikiPopupLink= class will get a popup dialog.
If the Javascript fails, or this plugin is disabled, the link will gracefully fall back to going to the link in the main browser window.

use the =foswikiPopupLink= class to get popup dialog elements on urls that can degrade gracefully for users without javascript.
   * =&lt;a class="foswikiPopupLink" href="%<nop>SCRIPTURL{attach}%/%<nop>WEB%/%<nop>TOPIC%"&gt;Attach&lt;/a&gt;=

This will allow you to create a popup Comment Edit box (don't forget to create the #<nop>Comments anchor):
<verbatim>
%POPUP{
anchor="<button class='foswikiButton'>add comment</button>"
popuptext="$percntCOMMENT{target=\"#Comments\"}$percnt"
popuptexttype="tml"
}%
</verbatim>

or a popup menu of webs
<verbatim>
%POPUP{
anchor=" *listofwebs* "
anchortype="onmouseover"
popuptext="%WEBLIST{"| [[$name.WebHome][$name]] |"}%"
popuptexttype="tml"
popuplocation="below"
border="off"
}%
</verbatim>

or a popup that quickly shows the topic source
<verbatim>
%POPUP{
anchor="<button class='foswikiButton'>view topic Source</button>"
popuptitle="%TOPIC%"
popuptext="%SCRIPTURL{view}%/%WEB%/%TOPIC%?raw=on;skin=print"
popuptexttype="rest"
}%
</verbatim>

or a popup that can quickly show you the last change made to the topic.
<verbatim>
%POPUPLINK{
"Last edit"
url="%SCRIPTURL{rdiff}%/%WEB%/%TOPIC%?type=last"
}%
</verbatim>

there is only one popup window at a time, so if the clicks on an anchor while another popup is up, it will be replaced by the new one.

---++ Syntax Rules

---+++ css =foswikiPopupLink= class
Any element with the =foswikiPopupLink= will get an onClick handler that will popup a YUI dialog. This dialog will be filled with content from the server (using the href attribute), requested dynamically.

---+++ !%POPUP{}%

parameters are
   * anchor="" - the text that is the click target that causes the POPUP to come up
      * (if this is not set, or an empty string, then the popup is shown on page load *REMEMBER*, only one popup open at a time)
   * anchortype="" - type of anchor trigger - [onclick,onmouseover,popuplink]  ('onclick' is default)
      * onclick - surrounds anchor with a html span, with an onclick action
      * onmouseover - surrounds anchor with a html span, with an onmouseover action
      * popuplink - makes an ajax popup with non-javascript fallback eg: &lt;a href="fallbackurl" onclick="return foswiki.jspopupOpen("popuptext")" &gt; anchor &lt; /a &gt;
   * fallbackurl="" - the href url to use for non-javascript browsers  (defaults to popuptext
   * popuptitle="" - what will be displayed in the popup title (not shown if border="off")
   * popuptext="" - what will be displayed in the popup
   * popuptexttype ="" - tml, rest
   * popuplocation="" - general location relative to the anchor (center, below) - center is default
   * border="" - show the border & close button (defaults to 'on') - if you select not to show the border and close button then there is an onmouseleave that closes the window
   * delay=200 - used as the delay in mS if the anchortype='mouseover'

---+++ !%POPUPLINK%
=POPUPLINK= is useful for creating popup alternatives (with fallback) to enquiry or action pages, such as Raw topic view. Instead of leaving the foswiki topic to see what the markup is
the user is able to _quickly_ see the WikiMarkup, and then cancel back to the normal topic view.
!%POPUPLINK{"Attach" url="" }%
   * DEFAULT - the text the user sees on the page as a link
   * url - the url the link goes to.
      * if the browser has javascript, and the YahooUserInterface components work, this will a popup dialog will contain the output of that url (using foswiki's =?cover=popup=)
      * if the popup does not work, the clicking the link will goto that page in the browser

---++ Plugin Settings

Plugin settings are stored as preferences variables. To reference
a plugin setting write ==%<nop>&lt;plugin&gt;_&lt;setting&gt;%==, i.e. ==%<nop>JSPOPUPPLUGIN_SHORTDESCRIPTION%==

   * One line description, is shown in the %SYSTEMWEB%.TextFormattingRules topic:
      * Set SHORTDESCRIPTION = Creates a dynamic popup windows using Javascript

   * Debug plugin: (See output in =data/debug.txt=)
      * Set DEBUG = 0

---++ Plugin Installation Instructions

__Note:__ You do not need to install anything on the browser to use this plugin.
The following instructions are for the administrator who installs the plugin on the server where Foswiki is running.

   * Download the ZIP file from the Plugin web (see below)
   * Unzip ==%TOPIC%.zip== in your foswiki installation directory. Content: <table cellspacing="1" cellpadding="0" border="1">       *File:*  *Description:*        ==data/System/%TOPIC%.txt==  Plugin topic        ==data/System/%TOPIC%.txt,v==  Plugin topic repository        ==lib/Foswiki/Plugins/%TOPIC%.pm==  Plugin Perl module  </table>
   * use the configure script to enable
   * Test if the installation was successful:
%POPUP{anchor="<button class='foswikiButton'>Clicking here should popup some text</button>" popuptitle="testing" popuptext="This is a popup text" popuptexttype="tml"}%

 %POPUPLINK{
"View Raw"
url="%SCRIPTURL{view}%/%WEB%/%TOPIC%?raw=on"
}%

---++ Plugin Info

|  Plugin Author: | Foswiki:Main.SvenDowideit - SvenDowideit@fosiki.com - <img src="%ATTACHURLPATH%/wikiringlogo20x20.png" /> [[http://www.wikiring.com][WikiRing.com]] |
|  Copyright: | &copy; 2001-2009, SvenDowideit@fosiki.com |
|  License: | GPL ([[http://www.gnu.org/copyleft/gpl.html][GNU General Public License]]) |
|  Change History: | <!-- versions below in reverse order -->&nbsp; |
|  6 Jan 2009 | port to Foswiki and update for YUI 2.6.0 |
|  16 Aug 2008 | update for YUI 2.5.2 |
|  9 Sept 2007 | fixed it to use the yui event handling, rather than the moved addLoadEvent |
|  12 Feb 2007 | added POPUPLINK tag |
|  23 Oct 2006 | added delay by Foswiki:Main.OliverKrueger, and added use of Foswiki:Extensions.YahooUserInterfaceContrib |
|  01 May 2006 | Initial version |
|  CPAN Dependencies: | %$DEPENDANCIES% |
|  Other Dependencies: | Foswiki:Extensions.YahooUserInterfaceContrib |
|  Plugin Home: | http://foswiki.org/Extensions/%TOPIC% |

__Related Topics:__ [[%SYSTEMWEB%.Plugins][Plugins]], %SYSTEMWEB%.DeveloperDocumentationCategory, %SYSTEMWEB%.AdminDocumentationCategory, %SYSTEMWEB%.DefaultPreferences, %USERSWEB%.SitePreferences

-- SvenDowideit@wikiring.com - [[http://www.wikiring.com][WikiRing.com]]
This topic: System > JSPopupPlugin
Topic revision: 27 Mar 2005, ProjectContributor (raw view)
Copyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding Foswiki? Send feedback