---------------------------------------------------------------------- ---------------- How to use the Link Plugin in AXEL ---------------- ---------------------------------------------------------------------- COMPATIBILITY: Tested on Firefox (3.6), Safari, Chrome, IE 8 Summary =======
Link plugin syntax in templates ================================
Declaration ~~~~~~~~~~~ The link plugin shall be used to edit named hyperlinks in a template. It is declared as an element: <xt:use types="link" label="myLabel"/> The declaration above will generate an element named "myLabel". The resulting serialized XML is composed of two sub-element <linkRef> and <linkText>, containing respectively the URL and the name of the hyperlink
Parameters ~~~~~~~~~~ You can use param="key1=value1;key2=value2..." to define some lens parameters. If you omit it, the defaults are similar to <xt:use types="link" param="display=above;trigger=mouseover;padding=10px"/> Supported parameters: * display="inline|above" [default: above] Defines where the lens will appear, "inline" means that it will be inserted dynamically inside the document in place of the edited component; "above" means that it will be dispayed above like a popup window * trigger="click|mouseover" [default: mouseover] Defines the user action to trigger the lens display. With "click" the user has to click, the lens will disappear if the user clicks outside of the lens or on the closing icon within the lens if there is one. With "mouseover" the lense will appear when the mouse fly over the editor handle and disappear when the mouse leaves the lens boundaries. * padding="??px" [default: 10px] That value shifts the lense to the top left by padding pixels. The value must correspond to the padding you set on the top div (class=""xtt-lens") that contains the lens. For instance the default axel.css sets it to 10px. In the future we may deprecate this attribute and automatically compute the lensShift by calculating the computed style of the lens just before displaying it.
Styling ~~~~~~~ Link handler (link displayed within the document) : .xtt-link The "xtt-link" class attribute is set on the <span> element created by the link editor to display the link handler. The development version sets the span to look as a usual link (blue underlined text). Lens handler (link lens div container) : .xtt-lens The "xtt-lens" attribute is set on the <div> that serves as the link lens wrapper. This class is supposed to be set on all the lenses in use in a template hence the styling rule contains generic rules to all lenses.
Packaging and deployment ========================
Source files ~~~~~~~~~~~~ The link plugin editor is defined in src/plugins/link.js; it also requires two devices: src/plugins/lensdevice.js. You must include these files into the deployment version of the library (e.g. xtf.js) such as the one generated by the ant script build.xml in the scripts folder. If you include these 2 javascript files individually into your application, you must do it in the following order: <script type="text/javascript" src="src/plugins/lensdevice.js"></script> <script type="text/javascript" src="src/plugins/link.js"></script> The link plugin editor also needs different resources at runtime which are in the bundles/link folder. These are icons used by the library.
Resources ~~~~~~~~~ The photo plugin uses a bundled image stored in /axel/bundles/link. This image is used as a button for browsing to the hyperlinks location.
Pending Issues (ANY HELP WELCOME) ============== Opera's lens positioning