The original tango style is now included, the adapted style is now called tango_panel...
authorWim Leers
Sat, 11 Aug 2007 12:31:56 +0000 (12:31 +0000)
committerWim Leers
Sat, 11 Aug 2007 12:31:56 +0000 (12:31 +0000)
jcarousel.module
skins/tango/skin.css
skins/tango_panels/credits.txt [new file with mode: 0644]
skins/tango_panels/next-horizontal.png [new file with mode: 0644]
skins/tango_panels/next-vertical.png [new file with mode: 0644]
skins/tango_panels/prev-horizontal.png [new file with mode: 0644]
skins/tango_panels/prev-vertical.png [new file with mode: 0644]
skins/tango_panels/skin.css [new file with mode: 0644]

index d291b82..493a512 100644 (file)
 // $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;
 }
index 0f40b38..c9cc361 100644 (file)
@@ -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;
 .jcarousel-skin-tango .jcarousel-next-vertical {
     position: absolute;
     bottom: 5px;
-    left: 5px;
+    left: 43px;
     width: 32px;
     height: 32px;
     cursor: pointer;
 .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 (file)
index 0000000..e5ec8c2
--- /dev/null
@@ -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 (file)
index 0000000..6fcd3d9
Binary files /dev/null and b/skins/tango_panels/next-horizontal.png differ
diff --git a/skins/tango_panels/next-vertical.png b/skins/tango_panels/next-vertical.png
new file mode 100644 (file)
index 0000000..066a3e0
Binary files /dev/null and b/skins/tango_panels/next-vertical.png differ
diff --git a/skins/tango_panels/prev-horizontal.png b/skins/tango_panels/prev-horizontal.png
new file mode 100644 (file)
index 0000000..36472c0
Binary files /dev/null and b/skins/tango_panels/prev-horizontal.png differ
diff --git a/skins/tango_panels/prev-vertical.png b/skins/tango_panels/prev-vertical.png
new file mode 100644 (file)
index 0000000..bb30f85
Binary files /dev/null and b/skins/tango_panels/prev-vertical.png differ
diff --git a/skins/tango_panels/skin.css b/skins/tango_panels/skin.css
new file mode 100644 (file)
index 0000000..67ec400
--- /dev/null
@@ -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;
+}