summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--jcarousel.module190
-rw-r--r--skins/tango/skin.css44
-rw-r--r--skins/tango_panels/credits.txt1
-rw-r--r--skins/tango_panels/next-horizontal.pngbin0 -> 4375 bytes
-rw-r--r--skins/tango_panels/next-vertical.pngbin0 -> 3817 bytes
-rw-r--r--skins/tango_panels/prev-horizontal.pngbin0 -> 4322 bytes
-rw-r--r--skins/tango_panels/prev-vertical.pngbin0 -> 3962 bytes
-rw-r--r--skins/tango_panels/skin.css158
8 files changed, 362 insertions, 31 deletions
diff --git a/jcarousel.module b/jcarousel.module
index d291b82..493a512 100644
--- a/jcarousel.module
+++ b/jcarousel.module
@@ -2,20 +2,198 @@
// $Id$
/**
- * All this module does, is providing a central function for adding the
- * jCarousel plugin for jQuery. It ensures that the jCarousel will be added
- * only once per page.
+ * @file
+ * This module provides a central function for adding the jCarousel jQuery
+ * plugin and makes sure it's added only once per page.
+ *
+ * Additionally, it also provides a configurable "carousel" style for use by
+ * the Mini Panels module.
*/
+/**
+ * Add the JS, basic CSS and skin CSS files to the current page, if they
+ * aren't added already.
+ *
+ * @param $skin
+ * The name of the skin that should be loaded. Set to NULL to load your own.
+ */
function jcarousel_add($skin = 'tango') {
static $added;
+ static $skins_added;
if (!isset($added)) {
drupal_add_js(drupal_get_path('module', 'jcarousel') .'/jcarousel.js');
drupal_add_css(drupal_get_path('module', 'jcarousel') .'/jcarousel.css');
- if ($skin) {
- drupal_add_css(drupal_get_path('module', 'jcarousel') ."/skins/$skin/skin.css");
- }
$added = TRUE;
}
+ if (isset($skin) && (!isset($skins_added) || !in_array($skin, $skins_added))) {
+ drupal_add_css(drupal_get_path('module', 'jcarousel') ."/skins/$skin/skin.css");
+ }
+}
+
+
+//----------------------------------------------------------------------------
+// Panels hooks.
+
+/**
+ * Implementation of hook_panels_panel_style_info().
+ */
+function jcarousel_panels_panel_style_info() {
+ return array(
+ 'carousel' => array(
+ 'label' => t('Carousel'),
+ 'panels implementations' => array('panels_mini'),
+ ),
+ );
+}
+
+/**
+ * Implementation of hook_panels_panel_style_settings().
+ */
+function jcarousel_panels_panel_style_settings($style, $op, $panel_settings) {
+ switch ($style) {
+ case 'carousel':
+ switch ($op) {
+ case 'form':
+ $style_settings = $panel_settings['style_settings'];
+
+ $form = array();
+ $form['orientation'] = array(
+ '#type' => 'select',
+ '#title' => t('Orientation'),
+ '#options' => array('horizontal' => t('Horizontal'), 'vertical' => t('Vertical')),
+ '#description' => t(
+ 'Specifies wether the carousel appears in horizontal or vertical
+ orientation. Changes the carousel from a left/right style to a
+ up/down style carousel.'
+ ),
+ '#default_value' => (isset($style_settings['orientation'])) ? $style_settings['orientation'] : 'horizontal',
+ );
+ $form['visible'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Visible items'),
+ '#description' => t('The number of items that will be visible.'),
+ '#size' => 5,
+ '#default_value' => (isset($style_settings['visible'])) ? $style_settings['visible'] : 1,
+ );
+ $form['scroll'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Scrolled items'),
+ '#description' => t('The number of items to scroll by.'),
+ '#size' => 5,
+ '#default_value' => (isset($style_settings['scroll'])) ? $style_settings['scroll'] : 1,
+ );
+ $form['auto'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Autoscroll'),
+ '#size' => 5,
+ '#description' => t(
+ 'Specifies how many seconds to periodically autoscroll the
+ content. If set to 0 (default) then autoscrolling is turned
+ off.'
+ ),
+ '#default_value' => (isset($style_settings['auto'])) ? $style_settings['auto'] : 0,
+ );
+ $form['animation'] = array(
+ '#type' => 'textfield',
+ '#title' => t('Animation speed'),
+ '#size' => 10,
+ '#description' => t(
+ 'The speed of the scroll animation in milliseconds. If set to 0,
+ animation is turned off.'
+ ),
+ '#default_value' => (isset($style_settings['animation'])) ? $style_settings['animation'] : 750,
+ );
+ $form['wrap'] = array(
+ '#type' => 'select',
+ '#title' => t('Wrap style'),
+ '#description' => t(
+ 'Specifies whether to wrap at the first/last item (or both) and
+ jump back to the start/end. Options are "first", "last" or
+ "both" as string. For a circular carousel, choose "circular".'
+ ),
+ '#options' => array(
+ 'none' => t('None'),
+ 'first' => t('First'),
+ 'last' => t('Last'),
+ 'both' => t('Both'),
+ 'circular' => t('Circular'),
+ ),
+ '#default_value' => (isset($style_settings['wrap'])) ? $style_settings['wrap'] : 'none',
+ );
+ return $form;
+
+ case 'validate':
+ // Extremely ugly, yet necessary, because the style settings form
+ // is embedded in another form.
+ $name_prefix = 'panel_settings][style_settings][';
+
+ $style_settings = $panel_settings['style_settings'];
+ if (!is_numeric($style_settings['animation']) || $style_settings['animation'] < 0) {
+ form_set_error($name_prefix .'animation', t('The speed animation setting must be numeric and cannot be negative.'));
+ }
+ if (!is_numeric($style_settings['auto']) || $style_settings['auto'] < 0) {
+ form_set_error($name_prefix .'auto', t('The autoscroll setting must be numeric and cannot be negative.'));
+ }
+ if (!in_array($style_settings['orientation'], array('horizontal', 'vertical'))) {
+ form_set_error($name_prefix .'orientation', t('The orientation is invalid, it must be either <em>horizontal</em> or <em>vertical</em>.'));
+ }
+ if (!is_numeric($style_settings['scroll']) || $style_settings['scroll'] < 1) {
+ form_set_error($name_prefix .'scroll', t('The number of items to scroll by must be numeric and at least 1.'));
+ }
+ if (!is_numeric($style_settings['visible'] || $style_settings['visible']) < 1) {
+ form_set_error($name_prefix .'visible', t('The number of visible items must be numeric and at least 1.'));
+ }
+ break;
+
+ }
+ }
+}
+
+/**
+ * Implementation of hook_panels_panel_style_render().
+ */
+function jcarousel_panels_panel_style_render($style, $panel_id, $panes, $display) {
+ $output = '';
+
+ $panel_settings = unserialize($display->panel_settings);
+ $style_settings = $panel_settings['style_settings'];
+
+ // Add the JavaScript to make jCarousel do its thing!
+ jcarousel_add('tango_panels');
+ drupal_add_js(drupal_get_path('module', 'jcarousel') .'/jcarousel_panels.js');
+
+ switch ($style) {
+ case 'carousel':
+ drupal_add_js(
+ array(
+ 'jcarousel' => array(
+ $panel_id => array(
+ 'selector' => "#panel_mini_$panel_id",
+ 'settings' => array(
+ 'animation' => (isset($style_settings['animation'])) ? intval($style_settings['animation']) : 750,
+ 'auto' => (isset($style_settings['auto'])) ? intval($style_settings['auto']) : 0,
+ 'easing' => 'QuartEaseOut',
+ 'scroll' => (isset($style_settings['scroll'])) ? intval($style_settings['scroll']) : 1,
+ 'vertical' => ($style_settings['orientation'] == 'vertical'),
+ 'visible' => (isset($style_settings['visible'])) ? intval($style_settings['visible']) : 1,
+ 'wrap' => ($style_settings['wrap'] != 'none') ? $style_settings['wrap'] : NULL,
+ ),
+ ),
+ ),
+ ),
+ 'setting'
+ );
+
+ $items = array();
+
+ // Render the items of the carousel.
+ foreach ($panes as $pane_id => $pane) {
+ $items[] = theme('panels_pane', $pane, $display);
+ }
+ $output .= theme('item_list', $items, NULL, 'ul', array('id' => "panel_mini_$panel_id", 'class' => 'jcarousel jcarousel-skin-tango_panels'));
+ break;
+ }
+
+ return $output;
}
diff --git a/skins/tango/skin.css b/skins/tango/skin.css
index 0f40b38..c9cc361 100644
--- a/skins/tango/skin.css
+++ b/skins/tango/skin.css
@@ -1,47 +1,41 @@
-/**
- * Based on the default jCarousel Tango skin. Adapted for use with the
- * panels_mini module in specific and Drupal in general by Wim Leers.
- */
-
.jcarousel-skin-tango.jcarousel-container {
- -moz-border-radius: 20px;
+ -moz-border-radius: 10px;
background: #F0F6F9;
border: 1px solid #346F97;
}
.jcarousel-skin-tango.jcarousel-container-horizontal {
- width: 16em;
- padding: 40px 0;
- padding-bottom: 0;
+ width: 245px;
+ padding: 20px 40px;
}
.jcarousel-skin-tango.jcarousel-container-vertical {
- width: 16em;
- height: 100%;
- padding: 40px 0;
+ width: 75px;
+ height: 245px;
+ padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
- width: 16em;
- height: 100%;
+ width: 245px;
+ height: 75px;
}
.jcarousel-skin-tango .jcarousel-clip-vertical {
- width: 16em;
- height: 18em;
+ width: 75px;
+ height: 245px;
}
.jcarousel-skin-tango .jcarousel-item {
- width: 100%;
- height: 100%;
- padding: 0;
+ width: 75px;
+ height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
+ margin-right: 10px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
- margin: 0;
+ margin-bottom: 10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
@@ -54,8 +48,8 @@
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
- top: 5px;
- left: 37px;
+ top: 43px;
+ right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
@@ -79,7 +73,7 @@
.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
- top: 5px;
+ top: 43px;
left: 5px;
width: 32px;
height: 32px;
@@ -108,7 +102,7 @@
.jcarousel-skin-tango .jcarousel-next-vertical {
position: absolute;
bottom: 5px;
- left: 5px;
+ left: 43px;
width: 32px;
height: 32px;
cursor: pointer;
@@ -133,7 +127,7 @@
.jcarousel-skin-tango .jcarousel-prev-vertical {
position: absolute;
top: 5px;
- left: 5px;
+ left: 43px;
width: 32px;
height: 32px;
cursor: pointer;
diff --git a/skins/tango_panels/credits.txt b/skins/tango_panels/credits.txt
new file mode 100644
index 0000000..e5ec8c2
--- /dev/null
+++ b/skins/tango_panels/credits.txt
@@ -0,0 +1 @@
+Button images copyright by Tango Icon Library Team (http://tango.freedesktop.org/Tango_Icon_Library) \ No newline at end of file
diff --git a/skins/tango_panels/next-horizontal.png b/skins/tango_panels/next-horizontal.png
new file mode 100644
index 0000000..6fcd3d9
--- /dev/null
+++ b/skins/tango_panels/next-horizontal.png
Binary files differ
diff --git a/skins/tango_panels/next-vertical.png b/skins/tango_panels/next-vertical.png
new file mode 100644
index 0000000..066a3e0
--- /dev/null
+++ b/skins/tango_panels/next-vertical.png
Binary files differ
diff --git a/skins/tango_panels/prev-horizontal.png b/skins/tango_panels/prev-horizontal.png
new file mode 100644
index 0000000..36472c0
--- /dev/null
+++ b/skins/tango_panels/prev-horizontal.png
Binary files differ
diff --git a/skins/tango_panels/prev-vertical.png b/skins/tango_panels/prev-vertical.png
new file mode 100644
index 0000000..bb30f85
--- /dev/null
+++ b/skins/tango_panels/prev-vertical.png
Binary files differ
diff --git a/skins/tango_panels/skin.css b/skins/tango_panels/skin.css
new file mode 100644
index 0000000..67ec400
--- /dev/null
+++ b/skins/tango_panels/skin.css
@@ -0,0 +1,158 @@
+/**
+ * Based on the default jCarousel tango_panels skin. Adapted for use with the
+ * panels_mini module by Wim Leers.
+ */
+
+.jcarousel-skin-tango_panels.jcarousel-container {
+ -moz-border-radius: 20px;
+ -webkit-border-radius: 20px;
+ border-radius: 20px;
+ background: #F0F6F9;
+ border: 1px solid #346F97;
+}
+
+.jcarousel-skin-tango_panels.jcarousel-container-horizontal {
+ width: 16em;
+ padding: 40px 0;
+ padding-bottom: 0;
+}
+
+.jcarousel-skin-tango_panels.jcarousel-container-vertical {
+ width: 16em;
+ height: 100%;
+ padding: 40px 0;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-clip-horizontal {
+ width: 16em;
+ height: 100%;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-clip-vertical {
+ width: 16em;
+ height: 18em;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-item {
+ width: 100%;
+ height: 100%;
+ padding: 0;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-item-horizontal {
+}
+
+.jcarousel-skin-tango_panels .jcarousel-item-vertical {
+ margin: 0;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-item-placeholder {
+ background: #fff;
+ color: #000;
+}
+
+/**
+ * Horizontal Buttons
+ */
+.jcarousel-skin-tango_panels .jcarousel-next-horizontal {
+ position: absolute;
+ top: 5px;
+ left: 37px;
+ width: 32px;
+ height: 32px;
+ cursor: pointer;
+ background: transparent url(next-horizontal.png) no-repeat 0 0;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-next-horizontal:hover {
+ background-position: -32px 0;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-next-horizontal:active {
+ background-position: -64px 0;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-next-disabled-horizontal,
+.jcarousel-skin-tango_panels .jcarousel-next-disabled-horizontal:hover,
+.jcarousel-skin-tango_panels .jcarousel-next-disabled-horizontal:active {
+ cursor: default;
+ background-position: -96px 0;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-prev-horizontal {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ width: 32px;
+ height: 32px;
+ cursor: pointer;
+ background: transparent url(prev-horizontal.png) no-repeat 0 0;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-prev-horizontal:hover {
+ background-position: -32px 0;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-prev-horizontal:active {
+ background-position: -64px 0;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-prev-disabled-horizontal,
+.jcarousel-skin-tango_panels .jcarousel-prev-disabled-horizontal:hover,
+.jcarousel-skin-tango_panels .jcarousel-prev-disabled-horizontal:active {
+ cursor: default;
+ background-position: -96px 0;
+}
+
+/**
+ * Vertical Buttons
+ */
+.jcarousel-skin-tango_panels .jcarousel-next-vertical {
+ position: absolute;
+ bottom: 5px;
+ left: 5px;
+ width: 32px;
+ height: 32px;
+ cursor: pointer;
+ background: transparent url(next-vertical.png) no-repeat 0 0;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-next-vertical:hover {
+ background-position: 0 -32px;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-next-vertical:active {
+ background-position: 0 -64px;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-next-disabled-vertical,
+.jcarousel-skin-tango_panels .jcarousel-next-disabled-vertical:hover,
+.jcarousel-skin-tango_panels .jcarousel-next-disabled-vertical:active {
+ cursor: default;
+ background-position: 0 -96px;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-prev-vertical {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ width: 32px;
+ height: 32px;
+ cursor: pointer;
+ background: transparent url(prev-vertical.png) no-repeat 0 0;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-prev-vertical:hover {
+ background-position: 0 -32px;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-prev-vertical:active {
+ background-position: 0 -64px;
+}
+
+.jcarousel-skin-tango_panels .jcarousel-prev-disabled-vertical,
+.jcarousel-skin-tango_panels .jcarousel-prev-disabled-vertical:hover,
+.jcarousel-skin-tango_panels .jcarousel-prev-disabled-vertical:active {
+ cursor: default;
+ background-position: 0 -96px;
+}