Overview
Last week, we discussed a possible implementation of the direct access to renditions. This icon is drawn an a document, which das renditions at the newest version. Clicking on that icon opens a panel which lets the user select one of the renditions to download or delete.
Selecting one of the renditions will download this rendition or (if permissions allow it)( delete the rendition.
Technical
The whole thing is based on a cell renderer. This relies on the extension point node.state.icons which is (as always) declared in the extensions.json file:
"csui/controls/table/cells/node.state/node.state.icons": {
"extensions": {
"csuia": [
"csuia/cells/node.state/node.rendition/node.state.icons"
]
}
},
This declaration points direct to the appropriate node.state.icons
define(['csuia/cells/node.state/node.rendition/rendition.view'
],
function (RenditionView) {
'use strict';
return [ { sequence: 60, iconView: RenditionView } ]; });
This basically declares the required view named “rendition.view.js” as responsible to draw the icon at sequence position 60.
This is the template used for the view.
The image is drawn cia the css seen above.
Encapsulating this inside a link allows to make the svg clickable.
Enable the direct access
The first point is the decision, if the cell renderer is to be drawn or not. This is a static method at the view, returning true or false. We dont have ony clue if the nodeid does have a rendition at the newest version, so we have to implement a new REST command at the server to get the information. The REST must be called synchronously.
This is done via a simple XMLHTTPRequest. If the result is true, we return true and store the number of each rendition types at the node in the prototype for further processing.
Then lets take a look on the events:
This means, a click on the class of our link in the template will call onOpenView. Before we look at that, look at this in the templateHelpers:
Open the Panel after the click
Remember, we got the number of each rendition types from the server? We want tzo display these numbers as a tooltip over the icon, so this is the way to formet the output string. A note to the knights of the holy JS-grail: Referencing this.__proto__ instead of finding the prototype via object maybe depreciated, but at least its also in ECMA 6! So nowadays its a valid method.
When we click on the icon, we want to open a DialogView from the sdk toolkit with an embedded view (SelectView) in the method onOpenView:
Before we open this view, we call the server to get the renditionlist of this node via XMLHTTPRequest. If we get the list (status=200) we intiantiate the view (selview1) and display the DialogView containing the instantiated view at the bin_modal default EL anchor.
Then lets show this region and store a event handler (string “submit”), which is listening on the view selview1 for that string. If it receives that string, the DialogView is closed.
Next week, we’ll examine the SelectView.
Missed something in the Posts? Here are the parts already posted:
smartUI in practice: SMART TOOLS(3) – Renditions
smart UI in practice: SMART TOOLS(2) – Multilingual Metadata