Keep galleria compatibility

.jshintignore

@@ -2,3 +2,4 @@ src/collective/cover/static/bootstrap.min.js
 src/collective/cover/static/jquery.*
 src/collective/cover/static/jss.js
 src/collective/cover/static/jss.min.js
+src/collective/cover/static/cycle2-theme/jquery.cycle2*.min.js

README.rst

@@ -155,13 +155,35 @@ To enable this package in a buildout-based installation:
     plone.app.z3cform = 0.6.3
     plone.directives.form = 1.1
 
+#. The carousel slide now defaults to use Cycle2 rather than Galleria, but if 
+   you (still) want to use Galleria, then use::
+
+    [buildout]
+    ...
+    eggs =
+        collective.cover[galleria]
+
+    [versions]
+    ...
+    (as above)
+
 After updating the configuration you need to run ''bin/buildout'', which will
 take care of updating your system.
 
 Go to the 'Site Setup' page in a Plone site and click on the 'Add-ons' link.
 
 Check the box next to ``collective.cover`` and click the 'Activate' button.
 
+If you want to use Galleria slides, then load the Generic Setup profile as follows:
+
+#. Go to the ZMI (Zope Management Interface) 
+#. Go to portal_setup 
+#. Click the Import tab
+#. Select "collective.cover: using deprecated galleria carousel tile" in the
+   drop down field
+#. At the bottom of the page uncheck "Include dependencies", then click "Import
+   all steps"
+
 .. Note::
     You may have to empty your browser cache and save your resource registries
     in order to see the effects of the product installation.

buildout.cfg

@@ -6,7 +6,7 @@ extends =
     versions-4.3.x.cfg
 
 package-name = collective.cover
-package-extras = [test]
+package-extras = [test, galleria]
 eggs +=
     iw.debug
     plone.reload

setup.py

@@ -46,7 +46,7 @@
           'AccessControl',
           'Acquisition',
           'collective.js.bootstrap',
-          'collective.js.galleria',
+          'collective.js.cycle2',
           'collective.js.jqueryui',
           'five.grok',
           'Missing',
@@ -96,6 +96,9 @@
           'zope.schema',
       ],
       extras_require={
+          'galleria': [
+              'collective.js.galleria',
+          ],
           'test': [
               'mock',
               'plone.app.robotframework',
@@ -104,6 +107,7 @@
               'plone.cachepurging',
               'plone.testing',
               'Products.PloneFormGen',
+              'collective.js.galleria',
           ],
       },
       entry_points="""

src/collective/cover/interfaces.py

@@ -9,6 +9,11 @@ class ICoverLayer(Interface):
     """
 
 
+class IGalleriaCarouselsLayer(ICoverLayer):
+    """ A layer indicating that Galleria Carousels are to be used in this add-on.
+    """
+
+
 class ICover(form.Schema):
 
     """A composable page."""

src/collective/cover/profiles.zcml

@@ -2,6 +2,7 @@
     xmlns="http://namespaces.zope.org/zope"
     xmlns:genericsetup="http://namespaces.zope.org/genericsetup"
     xmlns:i18n="http://namespaces.zope.org/i18n"
+    xmlns:zcml="http://namespaces.zope.org/zcml"
     i18n_domain="collective.cover"
     >
 
@@ -13,6 +14,15 @@
       provides="Products.GenericSetup.interfaces.EXTENSION"
       />
 
+  <genericsetup:registerProfile
+      zcml:condition="installed collective.js.galleria"
+      name="galleriacarousel"
+      title="collective.cover: using deprecated galleria carousel tile"
+      directory="profiles/galleriacarousel"
+      description="Enable Cycle2 Carousel Tiles in collective.cover"
+      provides="Products.GenericSetup.interfaces.EXTENSION"
+      />
+
   <genericsetup:registerProfile
       name="uninstall"
       title="collective.cover uninstall"
@@ -111,4 +121,6 @@
         />
   </genericsetup:upgradeSteps>
 
+  <include package=".upgrades" />
+
 </configure>

src/collective/cover/profiles/default/browserlayer.xml

@@ -2,4 +2,9 @@
 <layers>
  <layer name="collective.cover"
     interface="collective.cover.interfaces.ICoverLayer" />
+
+ <!-- Reinstalling the product should revert to Cycle2 carousels -->
+ <layer name="collective.cover.galleriacarousels"
+    interface="collective.cover.interfaces.IGalleriaCarouselsLayer" 
+    remove="True"/>
 </layers>

src/collective/cover/profiles/default/jsregistry.xml

@@ -9,4 +9,4 @@
   <javascript id="++resource++collective.cover/jquery.endless-scroll.js"
       cacheable="True" compression="none" cookable="True" enabled="True"
       expression="" inline="False" authenticated="True" />
-</object>
+</object>

src/collective/cover/profiles/default/metadata.xml

@@ -1,8 +1,8 @@
 <?xml version="1.0"?>
 <metadata>
-  <version>9</version>
+  <version>10</version>
   <dependencies>
-    <dependency>profile-collective.js.galleria:default</dependency>
+    <dependency>profile-collective.js.cycle2:default</dependency>
     <dependency>profile-collective.js.jqueryui:default</dependency>
     <dependency>profile-plone.app.blocks:default</dependency>
     <dependency>profile-plone.app.dexterity:default</dependency>

src/collective/cover/profiles/galleriacarousel/browserlayer.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<layers>
+ <layer name="collective.cover.galleriacarousels"
+    interface="collective.cover.interfaces.IGalleriaCarouselsLayer" />
+</layers>

src/collective/cover/profiles/galleriacarousel/jsregistry.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<object name="portal_javascripts">
+  <!-- These are not required if we are using Galleria for carousels -->
+  <javascript id="++resource++collective.cover/cycle2-theme/jquery.cycle2.js"
+      remove="True" />
+  <javascript id="++resource++collective.cover/cycle2-theme/jquery.cycle2.swipe.min.js"
+      remove="True" />
+</object>

src/collective/cover/profiles/galleriacarousel/metadata.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<metadata>
+  <version>1</version>
+  <dependencies>
+    <dependency>profile-collective.cover:default</dependency>
+    <dependency>profile-collective.js.galleria:default</dependency>
+  </dependencies>
+</metadata>

src/collective/cover/profiles/uninstall/browserlayer.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0"?>
+<layers>
+ <layer name="collective.cover"
+    interface="collective.cover.interfaces.ICoverLayer" 
+           remove="True" />
+
+ <layer name="collective.cover.galleriacarousels"
+    interface="collective.cover.interfaces.IGalleriaCarouselsLayer" 
+           remove="True" />
+</layers>

src/collective/cover/static/cover.css

@@ -19,7 +19,7 @@
     background-color:#000;
     opacity: 0.6 !important;
     display: none;
-    z-index: 99;
+    z-index: 120;
 }
 .loading-mask.show {
     display:block;

src/collective/cover/static/cycle2-theme/cycle2.cover_theme.css

@@ -0,0 +1,62 @@
+/* Prev/Next arrows */
+.cycle-prev, .cycle-next {
+  cursor: pointer;
+  height: 100%;
+  opacity: 0.7;
+  position: absolute;
+  top: 0;
+  width: 8%;
+  z-index: 110;
+}
+.cycle-prev {
+    background: url("++resource++collective.cover/cycle2-theme/prev-arrow.png") no-repeat scroll 10% 50% rgba(0, 0, 0, 0);
+    left: 0;
+    padding-right: 17%;
+}
+.cycle-next {
+    background: url("++resource++collective.cover/cycle2-theme/next-arrow.png") no-repeat scroll 90% 50% rgba(0, 0, 0, 0);
+    right: 0;
+    padding-left: 17%;
+}
+.cycle-prev:hover, .cycle-next:hover {
+    opacity: 1;
+}
+
+.cycle-pager-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  z-index: 110;
+  text-align: center;
+}
+.cycle-pager {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 8px;
+}
+.cycle-pager span {
+  background: url("++resource++collective.cover/cycle2-theme/dot.png") no-repeat;
+  display: inline-block;
+  font-size: 0;
+  height: 16px;
+  opacity: 0.6;
+  width: 16px;
+}
+.cycle-pager > span {
+  cursor: pointer;
+}
+.cycle-pager .cycle-pager-active {
+  opacity: 1;
+}
+.contentActions {
+  z-index: 130;
+}
+
+/* Stop Flash of unstyled content */
+.cycle2-carousel .slide { 
+  display: none;
+}
+
+.cycle2-carousel .cycle-pager + .slide { 
+  display: block;
+}

src/collective/cover/testing.py

@@ -117,7 +117,8 @@ def setUpZope(self, app, configurationContext):
         import collective.cover
         self.loadZCML(package=collective.cover)
 
-        if 'virtual_hosting' not in app.objectIds():
+        if ('virtual_hosting' not in app.objectIds() and
+                'VHM' not in app.objectIds()):
             # If ZopeLite was imported, we have no default virtual
             # host monster
             from Products.SiteAccess.VirtualHostMonster \
@@ -160,6 +161,27 @@ def setUpZope(self, app, configurationContext):
         sm.registerUtility(newgrid, name='bootstrap3')
 
 
+class GalleriaFixture(Fixture):
+
+    defaultBases = (FIXTURE,)
+
+    def setUpZope(self, app, configurationContext):
+
+        # Load ZCML
+        pkg_resources.get_distribution('collective.js.galleria')
+        import collective.js.galleria
+        self.loadZCML(package=collective.js.galleria)
+        z2.installProduct(app, 'collective.js.galleria')
+
+        super(GalleriaFixture, self).setUpZope(app, configurationContext)
+
+    def setUpPloneSite(self, portal):
+
+        super(GalleriaFixture, self).setUpPloneSite(portal)
+        # Install extra Generic Setup profile
+        self.applyProfile(portal, 'collective.cover:galleriacarousel')
+
+
 INTEGRATION_TESTING = IntegrationTesting(
     bases=(FIXTURE,),
     name='collective.cover:Integration',
@@ -179,3 +201,8 @@ def setUpZope(self, app, configurationContext):
 ROBOT_TESTING = FunctionalTesting(
     bases=(FIXTURE, AUTOLOGIN_LIBRARY_FIXTURE, z2.ZSERVER_FIXTURE),
     name='collective.cover:Robot')
+
+GALLERIA_FIXTURE = GalleriaFixture()
+GALLERIA_FUNCTIONAL_TESTING = FunctionalTesting(
+    bases=(GALLERIA_FIXTURE, AUTOLOGIN_LIBRARY_FIXTURE, z2.ZSERVER_FIXTURE),
+    name='collective.cover:GalleriaFunctional')

src/collective/cover/tests/test_carousel_tile.robot

@@ -10,8 +10,8 @@ Suite Teardown  Close all browsers
 
 ${carousel_tile_location}  "collective.cover.carousel"
 ${document_selector}  //div[@id="content-trees"]//li[@class="ui-draggable"]/a[@data-ct-type="Document"]/span[text()='My document']/..
-${image_selector}  //div[@id="content-trees"]//li[@class="ui-draggable"]/a[@data-ct-type="Image"]/span[text()='my-image']/..
-${image_selector2}  //div[@id="content-trees"]//li[@class="ui-draggable"]/a[@data-ct-type="Image"]/span[text()='my-image1']/..
+${image_selector1}  //div[@id="content-trees"]//li[@class="ui-draggable"]/a[@data-ct-type="Image"]/span[text()='my-image1']/..
+${image_selector2}  //div[@id="content-trees"]//li[@class="ui-draggable"]/a[@data-ct-type="Image"]/span[text()='my-image2']/..
 ${tile_selector}  div.tile-container div.tile
 ${autoplay_id}  collective-cover-carousel-autoplay-0
 ${edit_link_selector}  a.edit-tile-link
@@ -21,7 +21,8 @@ ${edit_link_selector}  a.edit-tile-link
 Get Total Carousel Images
     [Documentation]  Total number of images in carousel is stored in this
     ...              element
-    ${return} =  Get Matching XPath Count  //div[@class="galleria-stage"]//div[@class="galleria-image"]/img
+    # Note: we are a bit lazy about adding concat here, but then how long do you want this line to be?
+    ${return} =  Get Matching XPath Count  //div[contains(@class,"cycle2-carousel")]//div[contains(concat(" ", @class," "), " slide ") and not(contains(@class, "sentinel"))]
     [Return]  ${return}
 
 *** Test cases ***
@@ -45,19 +46,18 @@ Test Carousel Tile
     # drag&drop an Image
     Open Content Chooser
     Click Element  link=Content tree
-    Drag And Drop  xpath=${image_selector}  css=${tile_selector}
-    # The carousel was previously empty, so autoplay=false, so we might not see the carousel updated
-    # Wait Until Page Contains  Test image
-    # Page Should Contain  This image was created for testing purposes
-
-    # move to the default view and check tile persisted
-    Click Link  link=View
-    Wait Until Page Contains  Test image
-    Page Should Contain  This image was created for testing purposes
+    Drag And Drop  xpath=${image_selector1}  css=${tile_selector}
+    Wait Until Page Contains  Test image #1
+    Page Should Contain  This image #1 was created for testing purposes
     # we have 1 image in the carousel
     ${images} =  Get Total Carousel Images
     Should Be Equal  '${images}'  '1'
 
+    # move to the default view and check tile persisted
+    Click Link  link=View
+    Wait Until Page Contains  Test image #1
+    Page Should Contain  This image #1 was created for testing purposes
+
     # drag&drop another Image
     Compose Cover
     Sleep  1s  Wait for carousel to load
@@ -70,8 +70,8 @@ Test Carousel Tile
     # move to the default view and check tile persisted
     Click Link  link=View
     Sleep  5s  Wait for carousel to load
-    Wait Until Page Contains  Test image #1
-    Page Should Contain  This image #1 was created for testing purposes
+    Wait Until Page Contains  Test image #2
+    Page Should Contain  This image #2 was created for testing purposes
     # we now have 2 images in the carousel
     ${images} =  Get Total Carousel Images
     Should Be Equal  '${images}'  '2'
@@ -84,14 +84,13 @@ Test Carousel Tile
 
     Drag And Drop  xpath=${document_selector}  css=${tile_selector}
 
-    # No point to test Documents - they are not used in carousel
-    # see: https://github.com/collective/collective.cover/commit/8df37e04d7299a0cb1a90e9f0a8ace746859c49c
+    # Documents are (at least slightly) revived in Carousel thanks to Cycle2
     Click Link  link=View
-    #Wait Until Page Contains  My document
-    #Page Should Contain  This document was created for testing purposes
+    Wait Until Page Contains  My document
+    Page Should Contain  This document was created for testing purposes
 
     # carousel autoplay is enabled
-    Page Should Contain  options.autoplay = true;
+    Page Should Contain Element  xpath=//div[contains(@class,"cycle2-carousel") and @data-cycle-paused="false"]
 
     # edit the tile
     Compose Cover
@@ -100,12 +99,12 @@ Test Carousel Tile
     # disable carousel autoplay
     Unselect Checkbox  ${autoplay_id}
     Click Button  Save
-    Wait Until Page Contains  Test image
-    Page Should Contain  This image was created for testing purposes
+    Wait Until Page Contains  Test image #1
+    Page Should Contain  This image #1 was created for testing purposes
 
     # carousel autoplay is now disabled. Sometimes we need to reload the page.
-    Compose Cover
-    Page Should Contain  options.autoplay = false;
+    Reload Page
+    Page Should Contain Element  xpath=//div[contains(@class,"cycle2-carousel") and @data-cycle-paused="true"]
 
     # delete the tile
     Edit Cover Layout