javascript in plone

JavaScript in Plone:What’s available; how to use it

Steve McMahon (SteveM)steve@dcn.org

Plone Conference 2011

JavaScript in Plone:What’s available; how to use it

Steve McMahon (SteveM)steve@dcn.org

Plone Conference 2011

Bling My CMS!

You Are:

Integrators &

Themers

You Are:

You Want:

Widgets

You Want:

WidgetsValidation

You Want:

Widgets

Popups

Validation

You Want:

Widgets

Popups

Validation

Tabs ‘nAccordions

You Want:

Widgets

Popups

DragNDrop

Validation

Tabs ‘nAccordions

You Want:

But first …

But first …

Nuts & Bolts

JS & CSS Injection

Browser Resources❦

Resource Registries

Two Ways

Add-OnPackaging

Two Ways

Themes

Add-OnPackaging

Two Ways

Themes

BrowserLayers

Add-OnPackaging

Browser Layers

BrowserLayers<?xml version="1.0"?>

<layers> <layer name="example.customization.layer" interface="…browser.interfaces.IExampleCustomization" /></layers>

zopeskel.browserlayer[buildout]parts = zopeskel

[zopeskel]recipe = zc.recipe.eggeggs = ZopeSkel zopeskel.browserlayer …

zopeskel.browserlayer[buildout]parts = zopeskel

[zopeskel]recipe = zc.recipe.eggeggs = ZopeSkel zopeskel.browserlayer …

../bin/zopeskel browserlayer

zopeskel.browserlayer[buildout]parts = zopeskel

[zopeskel]recipe = zc.recipe.eggeggs = ZopeSkel zopeskel.browserlayer …

../bin/zopeskel browserlayer

Widgets

HTML5 Widgets

Widgets

HTML5 Widgets(Without HTML5)

Widgets

HTML5 Widgets(Without HTML5)

jQuery Toolsplone.app.jquerytools

Widgets

HTML5 Widgets(Without HTML5)

jQuery Toolsplone.app.jquerytools

dateinput

Widgets

HTML5 Widgets(Without HTML5)

jQuery Toolsplone.app.jquerytools

dateinputvalidation

Activating Optionals

profiles/default/jsregistry.xml

<javascript id="++resource++plone.app.jquerytools.validator.js" enabled="True" /> <javascript id="++resource++plone.app.jquerytools.dateinput.js" enabled="True" />

profiles/default/cssregistry.xml

<stylesheet id="++resource++plone.app.jquerytools.dateinput.css" enabled="1" />

Validation

Munging Old StuffValidation

Validation

Munging Old Stuff

jQuery(function ($) {

// doc read code here; // using $ alias for jQuery

});

Validation

Validation

Munging Old Stuff

jQuery(function ($) {

$('form.fgBaseEditForm span.required') .parents('div.field') .children(':input') .attr('required','required'); });

Validation

Validation

Munging Old Stuff

jQuery(function ($) {

$('form.fgBaseEditForm span.required') .parents('div.field') .children(':input') .attr('required','required'); });

Validation

Validation

Munging Old Stuff

jQuery(function ($) {

$('form.fgBaseEditForm span.required') .parents('div.field') .children(':input') .attr('required','required'); });

Validation

Validation

Munging Old StuffValidation

Validation

Munging Old Stuff

jQuery(function ($) {

$('form.fgBaseEditForm span.required') .parents('div.field') .children(':input') .attr('required','required'); $('form.fgBaseEditForm') .validator();

});

Validation

Validation

Munging Old StuffValidation

Validation

Popups (Overlays)

Popups

Popups (Overlays)

Popups

Popups (Overlays)

Popups

Popups (Overlays)

Popups

Popups (Overlays)

Popups

Popups (Overlays)

Popups

Popups (Overlays)

Popups

Popups (Overlays)

Popups

Popups (Overlays)

Popups

<div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a></div>

Popups (Overlays)

Popups

<div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a></div>

<div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a></div>

Popups (Overlays)

Popups

<div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a></div>

<div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a></div>

<div class="photoAlbumEntry"> <a href="http://anon:8080/p1/gallery/chapel/view" title=""> <span class="photoAlbumEntryWrapper"> <img src="http://anon:8080/p1/gallery/chapel/image_thumb" alt="Chapel" title="" height="128" width="95" /> </span> <span class="photoAlbumEntryTitle">Chapel</span> </a></div>

Popups (Overlays)

Popups

jQuery(function ($) {

$('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' });

});

Popups (Overlays)

Popups

jQuery(function ($) {

$('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' });

});

Popups (Overlays)

Popups

jQuery(function ($) {

$('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' });

});

Popups (Overlays)

Popups

jQuery(function ($) {

$('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' });

});

Popups (Overlays)

Popups

jQuery(function ($) {

$('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' });

});

Popups (Overlays)

Popups

jQuery(function ($) {

$('.photoAlbumEntry a').prepOverlay({ subtype: 'image', urlmatch: '/view$', urlreplace: '/image_large' });

});

Popups (Overlays)

Popups

Popups (Overlays)

Popups

Popups (Overlays)

Popups

Popups (Overlays)

Popups

Subtypes: Images AJAX iframeExtensive Form Support!

Tabs ’N Accordions

Tabs ‘nAccordions

Tabs and Accordions:Pretty much the same thing!

Tabs ’N Accordions

Tabs ‘nAccordions

Tabs and Accordions:Pretty much the same thing!

jQuery Tools .tab()handles both.

Tabs ’N Accordions

Tabs ‘nAccordions

Tabs and Accordions:Pretty much the same thing!

jQuery Tools .tab()handles both.

http://flowplayer.org/tools/

Tabs ’N Accordions

Tabs ‘nAccordions

$(‘container).tabs(‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’});

Tabs ’N Accordions

Tabs ‘nAccordions

$(‘container’).tabs(‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’});

Tabs ’N Accordions

Tabs ‘nAccordions

$(‘container).tabs(‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’});

Tabs ’N Accordions

Tabs ‘nAccordions

$(‘container).tabs(‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’});

Tabs ’N Accordions

Tabs ‘nAccordions

$(‘container).tabs(‘pane selector’, { tabs : ‘tab selector’, effect: ‘slide’});

Tabs ’N Accordions

Tabs ‘nAccordions

Tabs ’N Accordions

Tabs ‘nAccordions

Tabs ’N Accordions

Tabs ‘nAccordions

$('#portal-column-two dl.portlet') .each(function() { $(this) .children('dd') .wrapAll( '<dd class="portletContent"><dl /></dd>' );});

Fixing a Typical Gotcha

Tabs ’N Accordions

Tabs ‘nAccordions

$('#portal-column-two') .tabs( '#portal-column-two dd.portletContent', { tabs: 'dl.portlet dt.portletHeader a', effect: 'slide' } );

Activating the Accordion

Drag ’N Drop

DragNDrop

Drag ’N Drop

DragNDrop

Drag ’N Drop

DragNDrop

jQuery UI• draggable• droppable• sortable

Drag ’N Drop

DragNDrop collective.js.jqueryui

jQuery UI• draggable• droppable• sortable

Credits

bling_guy: by-nc-sa/2.0 http://www.flickr.com/photos/prawnpie/

bling_camera: by-nc-sa/2.0 http://www.flickr.com/photos/eleven/

bling_calculator: by-nc-sa/2.0 http://www.flickr.com/photos/mundoo/

bling_tshirt: by-nc-sa/2.0 http://www.flickr.com/photos/thewavingcat/

bling_dog: by-nc-sa/2.0 http://www.flickr.com/photos/splat/

bling_sunglasses: by-nc/2.0 http://www.flickr.com/photos/red-bubble/

bling_beer: by-nc-sa/2.0 http://www.flickr.com/photos/johnandchristina/

bling_dummy: by-nc-sa/2.0 http://www.flickr.com/photos/mark_w/

bling_cycle: by/2.0 http://www.flickr.com/photos/ketaiblogger/

bling_vespa: by-nc-sa/2.0 http://www.flickr.com/photos/lorena-david/

bling_mouse: by-nc-sa/2.0 kelly onassis

bling_desktop: by-nc-sa/2.0 http://www.flickr.com/photos/marblegravy/

bling_cat: by-nc-sa/2.0 http://www.flickr.com/photos/nicora/

bling_engine: by-nc-sa/2.0 http://www.flickr.com/photos/rpt/