Products.pipbox 0.2dev

Introduction

PIP = Picture in Picture

pipbox = picture boxes in Plone

Products.pipbox provides JQuery Tools support in Plone. This allows lightbox-style popups that may be loaded as images, AJAX html, or iframes.

The goal is that this support will be available via methods that wrap the Javascript implementation (currently JQuery Tools) so that it can change if necessary.

pipbox currently does two things:

1. loads JQuery Tools and its supporting images;

2. provides a framework for connecting JQuery Tools bling to CSS selectors without JavaScript.

Site setup for pipbox is table-driven, with settings in the table allowing you to specify DOM elements via jquery selectors. These are usually going to be <a href… /> or <img src… /> elements. You specify how the URL should be loaded (as an image, ajax or iframe). You may also optionally supply a regular expression search/replace pair for the URL and additional arguments for the JS engine. Options are specified with JSON object notation. I anticipate that this will become GS profile driven.

Let’s say, for example, that you want to make clicking on news-item photos open a lightbox-style larger version of the image. To do this, you’ll need to specify:

• A jquery style selector for a Plone element, e.g., “.newsImageContainer a”

• “image” for the load method (“ajax” and “iframe” are other alternatives)

• A regular expression search/replace to transform the href or src URL. In this example, we’re changing the URL to point to the preview-sized image. So, our search/replace pair is “/image_view_fullscreen” and “_preview”.

• You could also specify additional overlay configuration parameters.

Site setup for pipbox is table-driven, with a lines field in portal_properties.pipbox_properties. In this table, each line is a JSON object specification, So, all of the above will need to be a line like:

{type:'overlay',subtype:'image',selector:'.newsImageContainer a',urlmatch:'/image_view_fullscreen$',urlreplace:'_preview'}

Another quick example, one that provides full-image popups for images placed via kupu:

{type:'overlay',subtype:'image',selector:'img.image-right,img.image-left,img.image-inline',urlmatch:'/image_.+$',urlreplace:''}

What’s different? We’re targeting <img … /> tags, which don’t have href attributes. pipbox picks up the target URL from the src attribute, so that we can have a popup view of image elements that aren’t linked to that view. Note also that we’re using a real regular expression in the search/replace so that we can strip off image_preview, image_mini, etc.

And, a configuration to put the site map in an iframe popup with expose settings, picking up the target from an href:

{type:'overlay',subtype:'iframe',selector:'#siteaction-sitemap a',config:{expose:{color:'#00f'}}}

The complete options list:

• type: ‘overlay’ (other JQuery Tools effects coming)

• subtype: ‘image’ | ‘iframe’ | ‘ajax’

• selector: the JQuery selector to find your elements

• urlmatch: Regular expression for a portion of the target URL

• urlreplace: Replacement expression for the matched expression

• config: JQuery Tools configuration options in a dictionary

>>> from zope.component import getMultiAdapter
>>> from Products.Five.testbrowser import Browser
>>> browser = Browser()
>>> portal_url = 'http://nohost/plone'

>>> from Products import pipbox

>>> portal.portal_quickinstaller.isProductInstalled('pipbox')
True

>>> 'pipbox_properties' in portal.portal_properties.objectIds()
True

>>> my_props = portal.portal_properties.pipbox_properties
>>> my_props.selector_specs
("{type:'overlay',subtype:'image',selector:'.newsImageContainer a',urlmatch:'/image_view_fullscreen$',urlreplace:''}",)

>>> view = getMultiAdapter((portal, app.REQUEST), name=u'pipbox.css')
>>> mycss = view()
>>> mycss.find('PIPBox Stylesheet') > 0
True

>>> mycss.find('<dtml') == -1
True

>>> 'pipbox.css' in portal.portal_css.getResourceIds()
True

>>> jsreg = portal.portal_javascripts
>>> ids = jsreg.getResourceIds()
>>> '++resource++pipbox.js' in ids and 'pipboxinit.js' in ids
True

>>> browser.open(portal_url+'/++resource++pipbox.js')

>>> print browser.contents
/*****************
<BLANKLINE>
   PIPbox tools for attaching JQuery Tools bling to CSS with option
   parameter strings.
<BLANKLINE>
*****************/
...

>>> view = getMultiAdapter((portal, app.REQUEST), name=u'pipboxinit.js')

>>> print view()
<BLANKLINE>
pb.doSetup({type:'overlay',subtype:'image',selector:'.newsImageContainer a',urlmatch:'/image_view_fullscreen$',urlreplace:''});

Changelog