Tags:
ajax1Add my vote for this tag user_interface1Add my vote for this tag create new tag
, view all tags

JSPopupPlugin

Creates a dynamic popup windows using Javascript

Introduction

The 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.

Note: This plugin uses TWiki:Plugins.YahooUserInterfaceContrib

It uses Javascript to create a popup window containing either a hidden pre-rendered part of a topic, or a TWiki 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 TWikiSkins developers, any html link with the css twikiPopupLink 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 twikiPopupLink class to get popup dialog elements on urls that can degrade gracefully for users without Javascript.

  • <a class="twikiPopupLink" href="%SCRIPTURL{attach}%/%WEB%/%TOPIC%">Attach</a>

This will allow you to create a popup Comment Edit box (don't forget to create the #Comments anchor):

%POPUP{
anchor="<button class='twikiButton'>add comment</button>" 
popuptext="$percntCOMMENT{target=\"#Comments\"}$percnt" 
popuptexttype="tml"
}%

or a popup menu of webs

%POPUP{
anchor=" *listofwebs* " 
anchortype="onmouseover" 
popuptext="%WEBLIST{"| [[$name.WebHome][$name]] |"}%" 
popuptexttype="tml" 
popuplocation="below"
border="off"
}%

or a popup that quickly shows the topic source

%POPUP{
anchor="<button class='twikiButton'>view topic Source</button>"
popuptitle="%TOPIC%"
popuptext="%SCRIPTURL{view}%/%WEB%/%TOPIC%?raw=on;skin=print"
popuptexttype="rest"
}%

or a popup that can quickly show you the last change made to the topic.

%POPUPLINK{
"Last edit" 
url="%SCRIPTURL{rdiff}%/%WEB%/%TOPIC%?type=last" 
}%

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 twikiPopupLink class

Any element with the twikiPopupLink 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: <a href="fallbackurl" onclick="return twiki.jspopupOpen("popuptext")" > anchor < /a >
  • 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 inquiry or action pages, such as Raw topic view. For example, instead of leaving the twiki topic to see what the markup is the user is able to quickly see the TWiki markup, 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 popup a dialog that contains the output of that url (using TWiki's ?cover=popup)
    • if the popup does not work, clicking the link will go to that page in the browser

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 TWiki is running.

  • Download the ZIP file from the Plugin web (see below)
  • Unzip JSPopupPlugin.zip in your twiki installation directory. Content:
    File: Description:
    data/TWiki/JSPopupPlugin.txt Plugin topic
    lib/TWiki/Plugins/JSPopupPlugin.pm Plugin Perl module
    pub/TWiki/JSPopupPlugin/json.js Javascript code
    pub/TWiki/JSPopupPlugin/JSPopupPlugin.js Javascript code
  • Enable the plugin in configure
  • Test if the installation was successful:
%POPUP{anchor="" popuptitle="testing" popuptext="This is a popup text" popuptexttype="tml"}%

%POPUPLINK{ "View Raw" url="http://twiki.org/cgi-bin/view/Plugins/JSPopupPlugin?raw=on" }%

Plugin Info

Plugin Author: TWiki:Main.SvenDowideit - SvenDowideit@wikiringPLEASENOSPAM.com - WikiRing.com
Copyright: © 2006-2008, SvenDowideit@wikiringPLEASENOSPAM.com;
© 2006-2010, TWiki:TWiki/TWikiContributor
License: GPL (GNU General Public License)
Plugin Version: 2010-05-01
Change History:  
2010-05-01: TWikibug:Item6433 - doc improvements
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 TWiki:Main.OliverKrueger, and added use of TWiki:Plugins.YahooUserInterfaceContrib
01 May 2006 Initial version
TWiki Dependency: $TWiki::Plugins::VERSION 1.1
CPAN Dependencies:  
Other Dependencies: TWiki:Plugins.YahooUserInterfaceContrib
Perl Version: 5.005
Plugin Home: http://TWiki.org/cgi-bin/view/Plugins/JSPopupPlugin
Feedback: http://TWiki.org/cgi-bin/view/Plugins/JSPopupPluginDev
Appraisal: http://TWiki.org/cgi-bin/view/Plugins/JSPopupPluginAppraisal

Related Topics: TWikiPlugins, DeveloperDocumentationCategory, AdminDocumentationCategory, TWikiPreferences

Topic attachments
I Attachment History Action Size Date Who Comment
Unknown file formatmd5 JSPopupPlugin.md5 r14 r13 r12 r11 r10 manage 0.2 K 2010-05-01 - 22:09 PeterThoeny  
Compressed Zip archivetgz JSPopupPlugin.tgz r14 r13 r12 r11 r10 manage 11.5 K 2010-05-01 - 22:09 PeterThoeny  
Compressed Zip archivezip JSPopupPlugin.zip r15 r14 r13 r12 r11 manage 15.0 K 2010-05-01 - 22:09 PeterThoeny  
Unknown file formatEXT JSPopupPlugin_installer r9 r8 r7 r6 r5 manage 3.7 K 2010-05-01 - 22:09 PeterThoeny  
Edit | Attach | Watch | Print version | History: r23 < r22 < r21 < r20 < r19 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r23 - 2013-10-16 - PeterThoeny
 
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2015 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.