Fix Plone 4.3 with p.a.widgets 1.x edit modals

.travis.yml

@@ -18,14 +18,18 @@ env:
     - PLONE_VERSION=4.3
     - PLONE_VERSION=4.3 DEXTERITY_ONLY=true
     - PLONE_VERSION=4.3 VERSIONS=versions:plone.app.jquery=1.9.2
+    - PLONE_VERSION=4.3 WIDGETS=true BOOTSTRAP_PARAMS="--buildout-version=1.7.1 --setuptools-version=20.1.1"
     - PLONE_VERSION=5.0
     - PLONE_VERSION=5.1
 matrix:
   fast_finish: true
+  allow_failures:
+    - env: PLONE_VERSION=4.3 WIDGETS=true BOOTSTRAP_PARAMS="--buildout-version=1.7.1 --setuptools-version=20.1.1"
 install:
 - sed -ie "s#test-4.3#test-$PLONE_VERSION#" buildout.cfg
 - sed -ie "s#versions-4.3#versions-$PLONE_VERSION#" buildout.cfg
-- python bootstrap.py
+- test $WIDGETS && sed -ie "s#versions-4.3.x.cfg#versions-4.3.x-widgets.cfg#" buildout.cfg || true
+- python bootstrap.py $BOOTSTRAP_PARAMS
 - bin/buildout $VERSIONS annotate
 - bin/buildout $VERSIONS
 before_script:
@@ -55,5 +59,6 @@ notifications:
       - "Robot Test Report for Plone 4.3: http://s3-sa-east-1.amazonaws.com/collective-cover/collective/collective.cover/%{build_number}/%{build_number}.1/parts/test/robot_log.html"
       - "Robot Test Report for plone.app.contenttypes: http://s3-sa-east-1.amazonaws.com/collective-cover/collective/collective.cover/%{build_number}/%{build_number}.2/parts/test/robot_log.html"
       - "Robot Test Report for jQuery 1.9: http://s3-sa-east-1.amazonaws.com/collective-cover/collective/collective.cover/%{build_number}/%{build_number}.3/parts/test/robot_log.html"
-      - "Robot Test Report for Plone 5.0: http://s3-sa-east-1.amazonaws.com/collective-cover/collective/collective.cover/%{build_number}/%{build_number}.4/parts/test/robot_log.html"
-      - "Robot Test Report for Plone 5.1: http://s3-sa-east-1.amazonaws.com/collective-cover/collective/collective.cover/%{build_number}/%{build_number}.5/parts/test/robot_log.html"
+      - "Robot Test Report for plone.app.widgets 1.x: http://s3-sa-east-1.amazonaws.com/collective-cover/collective/collective.cover/%{build_number}/%{build_number}.4/parts/test/robot_log.html"
+      - "Robot Test Report for Plone 5.0: http://s3-sa-east-1.amazonaws.com/collective-cover/collective/collective.cover/%{build_number}/%{build_number}.5/parts/test/robot_log.html"
+      - "Robot Test Report for Plone 5.1: http://s3-sa-east-1.amazonaws.com/collective-cover/collective/collective.cover/%{build_number}/%{build_number}.6/parts/test/robot_log.html"

CHANGES.rst

@@ -6,7 +6,9 @@ There's a frood who really knows where his towel is.
 1.6b2 (unreleased)
 ^^^^^^^^^^^^^^^^^^
 
-- Nothing changed yet.
+- Fix Plone 4.3 with plone.app.widgets 1.x installed. The tile-edit forms are now opened
+  with .pat-plone-modal (fixes `#719`_)
+  [petschki]
 
 
 1.6b1 (2017-06-23)
@@ -232,5 +234,6 @@ Previous entries can be found in the HISTORY.rst file.
 .. _`#686`: https://github.com/collective/collective.cover/issues/686
 .. _`#710`: https://github.com/collective/collective.cover/issues/710
 .. _`#713`: https://github.com/collective/collective.cover/issues/713
+.. _`#719`: https://github.com/collective/collective.cover/issues/719
 .. _`#721`: https://github.com/collective/collective.cover/issues/721
 .. _`#727`: https://github.com/collective/collective.cover/issues/727

src/collective/cover/browser/layout.py

@@ -137,8 +137,10 @@ def render_section(self, section, mode):
         elif section['type'] == u'group':
             return self.group(section=section, mode=mode)
         elif section['type'] == u'tile':
-            tile_url = '@@{0}/{1}'.format(section.get('tile-type'),
-                                          section.get('id'))
+            tile_url = '{0}/@@{1}/{2}'.format(
+                '/'.join(self.context.getPhysicalPath()),
+                section.get('tile-type'),
+                section.get('id'))
             tile = self.context.restrictedTraverse(tile_url.encode(), None)
             if tile is None:
                 return '<div class="tileNotFound">Could not find tile</div>'

src/collective/cover/browser/templates/groupselect.pt

@@ -7,7 +7,7 @@
       tal:omit-tag="">
 <body tal:omit-tag="">
 
-  <div id="group-select-list" class="modal hide">
+  <div id="group-select-list" class="modal">
 
     <tal:groupselect repeat="group view/groups">
       <input class="group-select-input" name="groups" type="checkbox" value="o1"

src/collective/cover/browser/templates/layoutedit.pt

@@ -64,9 +64,9 @@
                         </select>
                     </div>
                 </div>
-                <div id="group-select-list" class="modal hide" tal:replace="structure context/@@group_select"></div>
-                <div id="tile-configure" class="modal hide"></div>
-                <div id="export-layout" class="modal hide" tal:condition="can_export_layout">
+                <div id="group-select-list" class="modal" tal:replace="structure context/@@group_select"></div>
+                <div id="tile-configure" class="modal"></div>
+                <div id="export-layout" class="modal" tal:condition="can_export_layout">
                     <h1 class="documentFirstHeading">Export Layout</h1>
                     <p class="discreen">Save a copy of this layout under a new name</p>
                     <form action="." tal:attributes="action request/URL" method="post"

src/collective/cover/browser/templates/tile.pt

@@ -58,7 +58,7 @@
                         </div>
                     </div>
                     <a href="#" class="edit-tile-link pat-plone-modal"
-                       data-pat-plone-modal="content: .tile-content"
+                       data-pat-plone-modal='{"actionOptions": {"displayInModal": false}, "content": ".tile-content", "position": "center top"}'
                        tal:condition="python:view.tile_is_editable(tile_type)"
                        tal:attributes="href string:${context/absolute_url}/@@edit-tile/${tile_type}/${tile_id}"
                        i18n:translate="">Edit</a>

src/collective/cover/browser/templates/tileselect.pt

@@ -7,11 +7,11 @@
       tal:omit-tag="">
 <body tal:omit-tag="">
 
-    <div id="tile-select-list" class="modal hide">
+    <div id="tile-select-list" class="modal">
       <tal:tiles repeat="tile view/tiles">
         <div class="tile-select-button" tal:content="tile/tile_type" />
       </tal:tiles>
     </div>
 
 </body>
-</html>
+</html>

src/collective/cover/configure.zcml

@@ -5,6 +5,7 @@
     xmlns:genericsetup="http://namespaces.zope.org/genericsetup"
     xmlns:i18n="http://namespaces.zope.org/i18n"
     xmlns:plone="http://namespaces.plone.org/plone"
+    xmlns:zcml="http://namespaces.zope.org/zcml"
     i18n_domain="collective.cover">
 
   <i18n:registerTranslations directory="locales" />
@@ -43,6 +44,12 @@
         />
   </class>
 
+  <configure zcml:condition="not-have plone-5">
+    <configure zcml:condition="installed plone.app.widgets">
+        <adapter factory=".widgets.richtext.TileRichTextFieldWidget" />
+    </configure>
+  </configure>
+
   <adapter name="SearchableText" factory=".content.searchableText" />
 
 </configure>

src/collective/cover/static/css/cover.css

@@ -276,3 +276,11 @@ table.invisible
 {
     float: right;
 }
+
+/* XXX: temporary pat-plone-modal z-index Fix for TEXTING ONLY - in real life, the hidden elements are accessible */
+.plone-modal {
+    z-index: 1050;
+}
+.plone-modal-footer {
+    z-index: 1051;
+}

src/collective/cover/static/css/layout_edit.css

@@ -87,6 +87,7 @@ button.close
 }
 .modal
 {
+    display:none;
     position: fixed;
     z-index: 1050;
     top: 10%;
@@ -116,10 +117,6 @@ button.close
     *border: 1px solid #999;
 }
 
-.hide
-{
-    display: none;
-}
 .show
 {
     display: block;
@@ -615,6 +612,10 @@ input[type='submit'].btn::-moz-focus-inner
 {
     display: none;
 }
+#tile-configure .config-sortable:before {
+    content: "\28FF";
+    float: left;
+}
 
 #collective-cover-list-uuids-size
 {
@@ -707,7 +708,7 @@ input[type='submit'].btn::-moz-focus-inner
 }
 .visibility-box
 {
-    position: absolute; top: 0; left: 0;
+    position: absolute; top: 0; left: 10px;
 }
 .visibility-box > span
 {

src/collective/cover/static/js/compose.js

@@ -96,8 +96,18 @@ $(document).ready(function() {
 
   TitleMarkupSetup();
 
-  if ($.fn.prepOverlay !== undefined) {
-    $('a.edit-tile-link').prepOverlay({
+  $('body').on('click', 'a.edit-tile-link', function(e) {
+
+    // XXX: need to check for body class here, because it might not been set when document.ready() :(
+    if($("body").hasClass("pat-plone-widgets")) {
+      // XXX: reload tile content asynchronously here when destroying the modal
+      //      need to find the right event where to hook in
+      return;  // exit here
+    }
+
+    e.preventDefault();
+    // prepare overlayhelper
+    $(e.currentTarget).prepOverlay({
       subtype: 'ajax',
       filter: '.tile-content',
       formselector: '#edit_tile',
@@ -140,26 +150,7 @@ $(document).ready(function() {
       },
       config: {
         onLoad: function() {
-          // With plone.app.widgets and Plone 4.3
-          if (typeof require !== 'undefined' && require.defined('pat-registry')) {
-            // Remove old editors references to work with ajax
-            if (typeof tinyMCE !== 'undefined' && tinyMCE !== null) {
-              if (tinyMCE.EditorManager != null) {
-                tinyMCE.EditorManager.editors = [];
-              }
-            }
-            // Add tinymce
-            $('.overlay textarea.mce_editable').addClass('pat-tinymce');
-            require('pat-registry').scan($('.overlay'), ['tinymce']);
-            // Wire save buttom to save tinymce
-            $( '.overlay input#buttons-save').on('click', function() {
-              tinyMCE.triggerSave();
-            });
-            // Hack to make overlay work over overlay
-            $('.overlay').on('mouseover', function() {
-              $('div.plone-modal-wrapper').css('z-index', '10050');
-            });
-          } else if (typeof initTinyMCE !== 'undefined') { // Plone 4.3
+          if (typeof initTinyMCE !== 'undefined') { // Plone 4.3
             // Remove old editors references to work with ajax
             if (typeof tinyMCE !== 'undefined' && tinyMCE !== null) {
               if (tinyMCE.EditorManager != null) {
@@ -203,5 +194,7 @@ $(document).ready(function() {
         }
       }
     });
-  }
+    // and open the overlay
+    $(e.currentTarget).click();
+  });
 });

src/collective/cover/testing.py

@@ -34,6 +34,13 @@
     # this environment variable is set in .travis.yml test matrix
     DEXTERITY_ONLY = os.environ.get('DEXTERITY_ONLY') is not None
 
+try:
+    pkg_resources.get_distribution('plone.app.widgets')
+except pkg_resources.DistributionNotFound:
+    HAS_WIDGETS = False
+else:
+    HAS_WIDGETS = True
+
 try:
     pkg_resources.get_distribution('Products.PloneFormGen')
 except pkg_resources.DistributionNotFound:
@@ -133,6 +140,12 @@ def setUpZope(self, app, configurationContext):
                 self.loadZCML(package=plone.app.contenttypes)
                 z2.installProduct(app, 'Products.DateRecurringIndex')
 
+            if HAS_WIDGETS:
+                import plone.app.widgets
+                self.loadZCML(package=plone.app.widgets)
+                import plone.formwidget.querystring
+                self.loadZCML(package=plone.formwidget.querystring)
+
             if HAS_PFG:
                 import Products.PloneFormGen
                 self.loadZCML(package=Products.PloneFormGen)
@@ -155,6 +168,10 @@ def setUpPloneSite(self, portal):
             if DEXTERITY_ONLY:
                 self.applyProfile(portal, 'plone.app.contenttypes:default')
 
+            if HAS_WIDGETS:
+                self.applyProfile(portal, 'plone.app.widgets:default')
+                self.applyProfile(portal, 'plone.formwidget.querystring:default')  # noqa
+
             if HAS_PFG:
                 self.applyProfile(portal, 'Products.PloneFormGen:default')
 

src/collective/cover/tiles/templates/tileformlayout.pt

@@ -1,5 +1,9 @@
-<div class="cover-tileformlayout-tile tile-content">
-    <h1 class="documentFirstHeading" tal:content="view/form_instance/label | nothing" />
+<html>
+  <body>
+    <div class="cover-tileformlayout-tile tile-content">
+        <h1 class="documentFirstHeading" tal:content="view/form_instance/label | nothing">Title</h1>
 
-    <span tal:replace="structure view/contents" />
-</div>
+        <span tal:replace="structure view/contents" />
+    </div>
+  </body>
+</html>

src/collective/cover/tiles/templates/tilesconfigurationlayout.pt

@@ -1,5 +1,9 @@
+<html>
+<body>
 <div class="tiles-configuration">
     <h1 class="documentFirstHeading" tal:content="view/form_instance/label | nothing" />
 
     <span tal:replace="structure view/contents" />
 </div>
+</body>
+</html>

src/collective/cover/widgets/richtext.py

@@ -0,0 +1,16 @@
+# -*- coding: utf-8 -*-
+
+from collective.cover.tiles.richtext import IRichTextTile
+from plone.app.widgets.dx import RichTextWidget
+from z3c.form.interfaces import IFieldWidget
+from z3c.form.interfaces import IFormLayer
+from z3c.form.util import getSpecification
+from z3c.form.widget import FieldWidget
+from zope.component import adapter
+from zope.interface import implementer
+
+
+@adapter(getSpecification(IRichTextTile['text']), IFormLayer)
+@implementer(IFieldWidget)
+def TileRichTextFieldWidget(field, request):
+    return FieldWidget(field, RichTextWidget(request))

versions-4.3.x-widgets.cfg

@@ -0,0 +1,23 @@
+[buildout]
+# XXX: https://github.com/plone/plone.app.testing/issues/39
+extends =
+    versions-4.3.x.cfg
+
+test-eggs +=
+    plone.app.widgets
+
+extensions += mr.developer
+
+sources-dir = external
+sources = sources
+auto-checkout = *
+
+[sources]
+plone.app.widgets = git https://github.com/plone/plone.app.widgets.git branch=1.x
+
+[versions]
+plone.app.z3cform = 1.0.1
+
+# XXX: https://github.com/collective/collective.cover/pull/720#issuecomment-311383938
+setuptools = 20.1.1
+zc.buildout = 1.7.1