Kupu - one touch full screen (zoom) editing

Version and browser info

Plone v2.5

Kupu v1.3.7

Firefox & MSIE

I suspect this how-to will work on all p2.1+ installations.

Introduction

This usability enhancement adds a new action to the Document (Page) type.  Selecting this new action will open an existing Document for editing in Zoom mode when using Kupu. 

Also a Save and Cancel button will be added to the Kupu toolbar.  This will allow the user to save (or cancel) the update without the need to "unzoom" the editor and scroll down to the standard buttons.

The adding of the buttons to the tool bar is trivial to implement and IMO makes a greater contribution towards usuability so let's start with this task first.

Adding the Save and Cancel Button to the Kupu bar.

The hardest thing about this was discovering where to make the change.  The file that needs to be changed (customized..whatever) is ...kupu/plone/kupu_plone_layer/kupu_wysiwyg_support.html. 

Insert the following code:

<input class="context" style="margin-bottom:8px" type="submit"  name="form_submit" value="Save" />
<input class="standalone" type="submit" name="form.button.cancel" value="Cancel" style="margin-bottom:7px" />

    <select class="kupu-tb-styles">
      <option value="p" i18n:translate="">Normal</option>
      <tal:block condition="here/kupu_library_tool/getParagraphStyles|nothing" repeat="style here/kupu_library_tool/getParagraphStyles">
        <option i18n:translate="" tal:define="parts python:style.split('|',1)+['','']" tal:attributes="value python:parts[1]" tal:content="python:parts[0]"/>
      </tal:block>
      <tal:block tal:condition="field/widget/parastyles|nothing">
        <option i18n:translate="" tal:condition="field/widget/parastyles" tal:repeat="style field/widget/parastyles" tal:attributes="value python:style[0]" tal:content="python:style[1]"/>
      </tal:block>
    </select>

<input class="context" style="margin-bottom:8px" type="submit"  name="form_submit" value="Save" />
<input class="standalone" type="submit"  name="form.button.cancel"  value="Cancel" style="margin-bottom:7px" />     

</span>
  
    <select id="kupu-ulstyles" class="kupu-ulstyles">
      <option value="disc" i18n:translate="list-disc">&#9679;</option>
      <option value="square" i18n:translate="list-square">&#9632;</option>
      <option value="circle" i18n:translate="list-circle">&#9675;</option>
      <option value="none" i18n:translate="list-nobullet">no bullet</option>
    </select>

Even if you are not in zoom mode, these added buttons will save you from scrolling down to the standard buttons to execute a save.

One touch access to full screen editing mode

This modification will add an edit zoom action which will open your kupu screen in zoom mode (without clicking the zoom button).

The high-level steps are:

• Copy the exiting editing python script and add code to the end of it to simlulate a zoom button click.
• Add a new action to the Document (Page) type to call the new script.  (If you have users who are not using Kupu, you will need to hide the new action from them).

Copying and editing the script

  (in same directory)

(in same directory)

To the end of atct_edit_zoom.cpt, add the code below:

<script>
KupuEditor.prototype.afterInit = function() {
   var btnZoom = getFromSelector("kupu-zoom-button");
   btnZoom.click()
}
</script>

(Thanks to Ducan Booth for enlightening me to the existence of the afterInit hook.)

Adding the Edit Zoom Action to the Document Type

Pretty standard stuff here:

• Open the ZMI and navigate to the portal_types tool. 
• Select the Document (Page) type.
• Click the Aliases Tab.
• Add a new entry....Alias: edit_zoom | Method: atct_edit_zoom
• Click on the Actions tab.
• Add a new Action with the values below.

Bounce your Plone / Zope Process (to make the zoom python scripts available.)

Enjoy!

gr

http://www.gerryrodman.com/