====== embedover Plugin ======

---- plugin ----
description: Display an external URL in a popup over DokuWiki page
author     : Rémi Peyronnet
email      : remi+dokuwiki@via.ecp.fr
type       : syntax
lastupdate : 2016-02-07
compatible : Lemming, Anteater, Rincewind, Angua, Adora Belle, Weatherwax, Binky, Ponder Stibbons, Hrun, Detritus, Elenor of Tsort, Frusterick Manners, Greebo
depends    : 
conflicts  : 
similar    : 
tags       : links, embed, javascript, popup

downloadurl: https://github.com/rpeyron/plugin-embedover/archive/master.zip
bugtracker: https://github.com/rpeyron/plugin-embedover/issues
----

===== Download and Installation =====

Search and install the plugin using the [[plugin:extension|Extension Manager]]. Refer to [[:Plugins]] on how to install plugins manually.

  * https://github.com/rpeyron/plugin-embedover/archive/master.zip


===== Usage =====

Embedover uses these delimiters **%%{(%%** and **%%)}%%**. You must first define the URL which will be used when clicking on the keywords by using **%%{(url:http://your.url.here/the/page.html?query=)}%%**. Then you can use it in keywords %%{(keyword)}%% : a click on the keyword will display a popup with the url %%http://your.url.here/the/page.html?query=keyword%%.

In addition, you may want to mix several URLs. You can do that with modes. The syntax is **%%mode!%%**. So to define a URL for the mode 'modetest', **%%{(url:modetest!yoururlhere)}%%** and to use it in a keyword : **%%{(modetest!keyword)}%%**. Note that the URL definition **must** take place before its first utilisation.

If you want to display another text than the keyword, you can use **%%|%%** as in regular DokuWiki link syntax : **%%{(keyword|displayed text)}%%**.

You can also specify the style of the popup displayed, as its width, or any valid CSS style, by using **%%{(style: width: 400px; )}%%**.

Example :
<code>
{(url:http://fr.wiktionary.org/w/index.php?title=)}
{(url:en!http://en.wiktionary.org/w/index.php?title=)}
{(style:width:700px;height:500px;overflow:scroll;)}
{(style:en!width:700px;height:500px;overflow:scroll;)}
{(click|Click)} on a {(en!word)} to have its {(definition)}.
</code>

Note : if the page you link is on the same domain, the height will be automatically set according to the real height of the included content. This is not allowed by JavaScript for other domains, for security reasons.


===== Feature Requests =====

What about an icon to close the window? 13/04/2016 by Ejetorix. --> Sorry I am seeing just today (10/01/2019) your feature request. Basic behavior is to click again on the item that opened the window to close it, but if a close button is still useful to you, please report to https://github.com/rpeyron/plugin-embedover/issues (I will then be notified)