diff -uprN ../panels/css/color.css panels/css/color.css --- ../panels/css/color.css 1969-12-31 19:00:00.000000000 -0500 +++ panels/css/color.css 2009-05-07 17:15:04.000000000 -0400 @@ -0,0 +1,79 @@ +/* $Id: color.css,v 1.4 2007/05/27 17:57:48 goba Exp $ */ + +/* Farbtastic placement */ +.color-form { + max-width: 50em; + position: relative; +} +#placeholder { + position: absolute; + top: 0; + right: 0; /* LTR */ +} + +/* Palette */ +.color-form .form-item { + height: 2em; + line-height: 2em; + padding-left: 1em; /* LTR */ + margin: 0.5em 0; +} +.color-form label { + float: left; /* LTR */ + clear: left; /* LTR */ + width: 10em; +} +.color-form .form-text, .color-form .form-select { + float: left; /* LTR */ +} +.color-form .form-text { + text-align: center; + margin-right: 5px; /* LTR */ + cursor: pointer; +} + +#palette .hook { + float: left; /* LTR */ + margin-top: 3px; + width: 16px; + height: 16px; +} +#palette .down, #palette .up, #palette .both { + background: url(images/hook.png) no-repeat 100% 0; /* LTR */ +} +#palette .up { + background-position: 100% -27px; /* LTR */ +} +#palette .both { + background-position: 100% -54px; /* LTR */ +} + +#palette .lock { + float: left; /* LTR */ + position: relative; + top: -1.4em; + left: -10px; /* LTR */ + width: 20px; + height: 25px; + background: url(images/lock.png) no-repeat 50% 2px; + cursor: pointer; +} +#palette .unlocked { + background-position: 50% -22px; +} +#palette .form-item { + width: 30em; +} +#palette .item-selected { + background: #eee; +} + +/* Preview */ +#preview { + display: none; +} +html.js #preview { + display: block; + position: relative; + float: left; /* LTR */ +} diff -uprN ../panels/includes/display-edit.inc panels/includes/display-edit.inc --- ../panels/includes/display-edit.inc 2009-04-30 16:09:57.000000000 -0400 +++ panels/includes/display-edit.inc 2009-05-07 17:14:58.000000000 -0400 @@ -129,8 +129,12 @@ function panels_edit_display_form(&$form drupal_add_js(panels_get_path('js/panels-base.js')); drupal_add_js(panels_get_path('js/display_editor.js')); + drupal_add_js(panels_get_path('js/color.js')); + drupal_add_js('misc/farbtastic/farbtastic.js'); + drupal_add_css('misc/farbtastic/farbtastic.css'); drupal_add_css(panels_get_path('css/panels_dnd.css')); drupal_add_css(panels_get_path('css/panels_admin.css')); + drupal_add_css(panels_get_path('css/color.css')); $css = array(); $js = array(drupal_get_path('module', 'ctools') . '/js/dependent.js' => TRUE); @@ -204,7 +208,8 @@ function panels_edit_display_get_links(& 'href' => 'panels/ajax/style-type/display/' . $display->did, 'attributes' => array('class' => 'ctools-use-modal'), ); - if (panels_plugin_get_function('style', $style, 'settings form')) { + if (panels_plugin_get_function('style', $style, 'settings form') || + isset($style['color palette'])) { $links[] = array( 'title' => ' -- ' . t('Style settings'), 'href' => 'panels/ajax/style-settings/display/' . $display->did, @@ -308,7 +313,8 @@ function panels_edit_panel_get_links($di 'href' => 'panels/ajax/style-type/panel/' . $display->did . '/' . $panel_id, 'attributes' => array('class' => 'ctools-use-modal'), ); - if (panels_plugin_get_function('style', $style, 'settings form')) { + if (panels_plugin_get_function('style', $style, 'settings form') || + isset($style['color palette'])) { $links[] = array( 'title' => ' -- ' . t('Style settings'), 'href' => 'panels/ajax/style-settings/panel/' . $display->did . '/' . $panel_id, @@ -423,7 +429,8 @@ function panels_show_pane($display, $pan 'attributes' => array('class' => 'ctools-use-modal'), ); - if (panels_plugin_get_function('style', $style, 'pane settings form')) { + if (panels_plugin_get_function('style', $style, 'pane settings form') || + isset($style['color palette'])) { $links[] = array( 'title' => ' -- ' . t('Style settings'), 'href' => 'panels/ajax/style-settings/pane/' . $display->did . '/' . $pane->pid, @@ -1247,7 +1254,8 @@ function panels_ajax_style_type($type = // have saved the form. $style = panels_get_style($form_state['style']); $function = panels_plugin_get_function('style', $style, ($type == 'pane') ? 'pane settings form' : 'settings form'); - if (!$function) { + + if (!$function && !isset($style['color palette'])) { // If there's no settings form, just change the style and exit. switch($type) { case 'display': @@ -1496,8 +1504,15 @@ function panels_edit_style_settings_form ); $function = panels_plugin_get_function('cache', $style, ($type == 'pane') ? 'pane settings form' : 'settings form'); + + if($function) { + $form['settings'] = $function($conf, $display, $pid, $type); + } + + if(!empty($style['color palette'])) { + $form['settings']['color'] = panels_edit_style_settings_color_form($conf, $display, $pid, $type, $style); + } - $form['settings'] = $function($conf, $display, $pid, $type); $form['settings']['#tree'] = TRUE; $form['submit'] = array( @@ -1899,6 +1914,57 @@ function panels_content_configure_access } } +function panels_edit_style_settings_color_form($style_settings, $display, $pid, $type, $style) { + /* partially imported from color.module */ + $form['color'] = array( + '#type' => 'fieldset', + '#title' => t('Color scheme'), + '#weight' => -1, + '#attributes' => array('id' => 'color_scheme_form'), + '#theme' => 'panels_color_scheme_form', + /* This prefix/suffix hack below can't be the best way to do this... Should + * I be using a CTools AJAX respond command? I wasn't sure how to set this + * up + */ + '#prefix' => '
', + '#suffix' => '
', + ); + + $base = drupal_get_path('module', 'color'); + + // Add palette fields + if($type == 'pane') { + $set_palette = $display->content[$pid]->style['settings']['color']['palette']; + /* This is used if the parent panel has defaults set */ + if(!empty($display->panel_settings['style_settings']['default']['color'])) { + $panel_settings = $display->panel_settings['style_settings']['default']['color']['palette']; + } + } else { + $set_palette = $style_settings['color']['palette']; + } + + $form['color']['palette']['#tree'] = true; + + foreach ($style['color palette'] as $color_id => $value) { + if(isset($panel_settings)) { + $default = $panel_settings[$color_id] ? $panel_settings[$color_id] : $value['default_value']; + } else { + $default = $value['default_value']; + } + + $form['color']['palette'][$color_id] = array( + '#type' => 'textfield', + '#title' => $value['label'], + '#default_value' => isset($set_palette[$color_id]) ? $set_palette[$color_id] : $default, + '#size' => 8, + ); + } + + $form['color']['info'] = array('#type' => 'value', '#value' => $info); + + return $form['color']; +} + /** * }@ End of 'defgroup panels_ajax' */ @@ -1945,3 +2011,40 @@ function theme_panels_pane_collapsible($ $output .= '
' . filter_xss_admin($block->content) . '
'; return $output; } + + +/** + * Theme color form. + * + * @ingroup @themeable + */ +function theme_panels_color_scheme_form($form) { + // Include stylesheet +// $theme = $form['theme']['#value']; +// $info = $form['info']['#value']; +// $path = drupal_get_path('theme', $theme) .'/'; +// drupal_add_css($path . $info['preview_css']); + $output = ''; + // Wrapper + $output .= '
'; + + // Color schemes + $output .= drupal_render($form['scheme']); + + // Palette + $output .= '
'; + foreach (element_children($form['palette']) as $name) { + $output .= drupal_render($form['palette'][$name]); + } + $output .= '
'; + +/* // Preview + $output .= drupal_render($form); + $output .= '

'. t('Preview') .'

'; + $output .= '

Lorem ipsum dolor

Sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

'; + + // Close wrapper + $output .= '
'; +*/ + return $output; +} diff -uprN ../panels/includes/display-render.inc panels/includes/display-render.inc --- ../panels/includes/display-render.inc 2009-04-28 23:19:07.000000000 -0400 +++ panels/includes/display-render.inc 2009-05-07 16:17:21.000000000 -0400 @@ -218,6 +218,10 @@ function panels_render_pane_content(&$di * The display. */ function panels_render_pane($content, $pane, $display) { + if(!empty($pane->style['settings']['color']['palette'])) { + panels_render_add_color_css($pane, $display); + } + if (!empty($pane->style['style'])) { $style = panels_get_style($pane->style['style']); @@ -318,7 +322,9 @@ function theme_panels_pane($content, $pa $classstr = ' ' . $content->css_class; } - $output = "
\n"; + $pane_idstr = 'pane-'.$pane->did . '-' . $pane->pid; + + $output = "
\n"; if (user_access('view pane admin links') && !empty($content->admin_links)) { $output .= "
" . theme('links', $content->admin_links) . "
\n"; } @@ -344,7 +350,51 @@ function theme_panels_pane($content, $pa $output .= "
" . l($content->more['title'], $content->more['href']) . "
\n"; } - $output .= "
\n"; + $output .= "
\n"; return $output; } } + +/* Adds color pane specific css to the head of the document */ +function panels_render_add_color_css($pane, $display) { + $where = 'pane'; + $style = $pane->style; + $idstr = '.pane-'.$pane->did . '-' . $pane->pid; + static $displays_used = array(); + + if (empty($displays_used[$idstr])) { + panels_render_print_color_css($style, $display, $idstr, $where); + $displays_used[$idstr] = TRUE; + } +} + +function panels_render_print_color_css($style, $display, $idstr, $where) { + ctools_include('css'); + $css_id = 'color_panels:' . $idstr; + + $css = _panels_render_print_color_css($style, $idstr); + /* Unfortunately for now we're doing this the older/uglier way + * Otherwise proper cache files will have to be flushed when settings + * are changed */ + drupal_set_html_head("\n"); +} + +function _panels_render_print_color_css($style, $idstr) { + $css = ''; + + $palette = $style['settings']['color']['palette']; + + $pstyle = panels_get_style($style['style']); + + foreach($palette as $name => $value) { + $settings = $pstyle['color palette'][$name]; + $attr = $settings['attr']; + $sel = $settings['selector']; + $additional = !empty($settings['additional']) ? $settings['additional'] : ''; + $css .= "$idstr $sel { $attr : $value $additional }"; + } + + return $css; +} + + diff -uprN ../panels/js/color.js panels/js/color.js --- ../panels/js/color.js 1969-12-31 19:00:00.000000000 -0500 +++ panels/js/color.js 2009-05-07 17:04:07.000000000 -0400 @@ -0,0 +1,252 @@ +// $Id: color.js,v 1.6 2007/09/12 18:29:32 goba Exp $ + +Drupal.Panels.Color = {} + +Drupal.Panels.Color.addFarbtastic = function(context) { + // This behavior attaches by ID, so is only valid once on a page. + if ($('#color_scheme_form .color-form.color-processed').size()) { + return; + } + var form = $('#color_scheme_form .color-form', context); + var inputs = []; + var hooks = []; + var locks = []; + var focused = null; + + // Add Farbtastic + $(form).prepend('
').addClass('color-processed'); + var farb = $.farbtastic('#placeholder'); + + // Decode reference colors to HSL +/*var reference = Drupal.settings.color.reference.clone(); + for (i in reference) { + reference[i] = farb.RGBToHSL(farb.unpack(reference[i])); + } */ + // Build preview + $('#preview:not(.color-processed)') + .append('
') + .addClass('color-processed'); + var gradient = $('#preview #gradient'); + var h = parseInt(gradient.css('height')) / 10; + for (i = 0; i < h; ++i) { + gradient.append('
'); + } + + // Fix preview background in IE6 + if (navigator.appVersion.match(/MSIE [0-6]\./)) { + var e = $('#preview #img')[0]; + var image = e.currentStyle.backgroundImage; + e.style.backgroundImage = 'none'; + e.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image.substring(5, image.length - 2) + "')"; + } + + // Set up colorscheme selector + $('#edit-scheme', form).change(function () { + var colors = this.options[this.selectedIndex].value; + if (colors != '') { + colors = colors.split(','); + for (i in colors) { + callback(inputs[i], colors[i], false, true); + } + preview(); + } + }); + + /** + * Render the preview. + */ + function preview() { + // Solid background + $('#preview', form).css('backgroundColor', inputs[0].value); + + // Text preview + $('#text', form).css('color', inputs[4].value); + $('#text a, #text h2', form).css('color', inputs[1].value); + + // Set up gradient + var top = farb.unpack(inputs[2].value); + var bottom = farb.unpack(inputs[3].value); + if (top && bottom) { + var delta = []; + for (i in top) { + delta[i] = (bottom[i] - top[i]) / h; + } + var accum = top; + + // Render gradient lines + $('#gradient > div', form).each(function () { + for (i in accum) { + accum[i] += delta[i]; + } + this.style.backgroundColor = farb.pack(accum); + }); + } + } + + /** + * Shift a given color, using a reference pair (ref in HSL). + * + * This algorithm ensures relative ordering on the saturation and luminance + * axes is preserved, and performs a simple hue shift. + * + * It is also symmetrical. If: shift_color(c, a, b) == d, + * then shift_color(d, b, a) == c. + */ + function shift_color(given, ref1, ref2) { + // Convert to HSL + given = farb.RGBToHSL(farb.unpack(given)); + + // Hue: apply delta + given[0] += ref2[0] - ref1[0]; + + // Saturation: interpolate + if (ref1[1] == 0 || ref2[1] == 0) { + given[1] = ref2[1]; + } + else { + var d = ref1[1] / ref2[1]; + if (d > 1) { + given[1] /= d; + } + else { + given[1] = 1 - (1 - given[1]) * d; + } + } + + // Luminance: interpolate + if (ref1[2] == 0 || ref2[2] == 0) { + given[2] = ref2[2]; + } + else { + var d = ref1[2] / ref2[2]; + if (d > 1) { + given[2] /= d; + } + else { + given[2] = 1 - (1 - given[2]) * d; + } + } + + return farb.pack(farb.HSLToRGB(given)); + } + + /** + * Callback for Farbtastic when a new color is chosen. + */ + function callback(input, color, propagate, colorscheme) { + // Set background/foreground color + $(input).css({ + backgroundColor: color, + 'color': farb.RGBToHSL(farb.unpack(color))[2] > 0.5 ? '#000' : '#fff' + }); + + // Change input value + if (input.value && input.value != color) { + input.value = color; + + // Update locked values + if (propagate) { + var i = input.i; + for (j = i + 1; ; ++j) { + if (!locks[j - 1] || $(locks[j - 1]).is('.unlocked')) break; + var matched = shift_color(color, reference[input.key], reference[inputs[j].key]); + callback(inputs[j], matched, false); + } + for (j = i - 1; ; --j) { + if (!locks[j] || $(locks[j]).is('.unlocked')) break; + var matched = shift_color(color, reference[input.key], reference[inputs[j].key]); + callback(inputs[j], matched, false); + } + + // Update preview + preview(); + } + + // Reset colorscheme selector + if (!colorscheme) { + resetScheme(); + } + } + + } + + /** + * Reset the color scheme selector. + */ + function resetScheme() { + $('#edit-scheme', form).each(function () { + this.selectedIndex = this.options.length - 1; + }); + } + + // Focus the Farbtastic on a particular field. + function focus() { + var input = this; + // Remove old bindings + focused && $(focused).unbind('keyup', farb.updateValue) + .unbind('keyup', preview).unbind('keyup', resetScheme) + .parent().removeClass('item-selected'); + + // Add new bindings + focused = this; + farb.linkTo(function (color) { callback(input, color, true, false); }); + farb.setColor(this.value); + $(focused).keyup(farb.updateValue).keyup(preview).keyup(resetScheme) + .parent().addClass('item-selected'); + } + + // Initialize color fields + $('#palette input.form-text', form) + .each(function () { + // Extract palette field name + this.key = this.id.substring(13); + + // Link to color picker temporarily to initialize. + farb.linkTo(function () {}).setColor('#000').linkTo(this); + + // Add lock + var i = inputs.length; + if (inputs.length) { + var lock = $('
').toggle( + function () { + $(this).addClass('unlocked'); + $(hooks[i - 1]).attr('class', + locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook up' : 'hook' + ); + $(hooks[i]).attr('class', + locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook down' : 'hook' + ); + }, + function () { + $(this).removeClass('unlocked'); + $(hooks[i - 1]).attr('class', + locks[i - 2] && $(locks[i - 2]).is(':not(.unlocked)') ? 'hook both' : 'hook down' + ); + $(hooks[i]).attr('class', + locks[i] && $(locks[i]).is(':not(.unlocked)') ? 'hook both' : 'hook up' + ); + } + ); + $(this).after(lock); + locks.push(lock); + }; + + // Add hook + var hook = $('
'); + $(this).after(hook); + hooks.push(hook); + + $(this).parent().find('.lock').click(); + this.i = i; + inputs.push(this); + }) + .focus(focus); + + $('#palette label', form); + + // Focus first color + focus.call(inputs[0]); + + // Render preview + preview(); +}; diff -uprN ../panels/panels.module panels/panels.module --- ../panels/panels.module 2009-04-30 18:12:08.000000000 -0400 +++ panels/panels.module 2009-05-07 16:17:21.000000000 -0400 @@ -77,7 +77,13 @@ function panels_theme() { 'file' => '../includes/callbacks.inc', 'template' => 'panels-dashboard', ); - + + $theme['panels_color_scheme_form'] = array( + 'arguments' => array('form' => NULL), + 'file' => 'includes/display-edit.inc', + ); + + // Register layout and style themes on behalf of all of these items. panels_load_include('plugins'); @@ -124,6 +130,7 @@ function panels_theme() { } } + return $theme; } diff -uprN ../panels/plugins/styles/color_panels/color_panels.css panels/plugins/styles/color_panels/color_panels.css --- ../panels/plugins/styles/color_panels/color_panels.css 1969-12-31 19:00:00.000000000 -0500 +++ panels/plugins/styles/color_panels/color_panels.css 2009-05-07 17:27:22.000000000 -0400 @@ -0,0 +1,14 @@ +.color-panel h2.title, .color-panel .content { + padding-left: 5px; + padding-right: 5px; + padding-top: 5px; +} + +/* Maybe more for demo purposes than anything else + * This makes nodes in color panes look better in Garland + */ +.color-panel .node { + border-bottom: 0; + padding-top: 5px; + padding-bottom: 5px; +} diff -uprN ../panels/plugins/styles/color_panels/color_panels.inc panels/plugins/styles/color_panels/color_panels.inc --- ../panels/plugins/styles/color_panels/color_panels.inc 1969-12-31 19:00:00.000000000 -0500 +++ panels/plugins/styles/color_panels/color_panels.inc 2009-05-07 17:13:28.000000000 -0400 @@ -0,0 +1,68 @@ + array( + 'title' => t('Color Panes'), + 'description' => t('Presents the panes or panels in a square style with user configurable colors'), + 'render pane' => 'panels_color_panels_style_render_pane', + 'pane settings form' => 'panels_color_panels_style_pane_settings_form', + 'color palette' => array( + array(label => 'Border Color', default_value => '#78BAE3', + selector => '.inner-pane', attr => 'border', + additional => '1px solid'), + array(label => 'Background', default_value => '#FFFFFF', + selector => '', attr => 'background-color'), + array(label => 'Header Background', default_value => '#3D9CD7', + selector => 'h2.title', attr => 'background-color'), + array(label => 'Header Text Color', default_value => '#FFFFFF', + selector => 'h2.title', attr => 'color'), + array(label => 'Text Color', default_value => '#000000', + selector => '', attr => 'color'), + ), + 'hook theme' => array( + 'panels_color_panels_box' => array( + 'arguments' => array('content' => NULL), + 'path' => panels_get_path('plugins/styles/color_panels'), + 'template' => 'panels-color-panels-box', + ), + ), + ), + ); +} + +// --------------------------------------------------------------------------- +// Panels style plugin callbacks. + +function panels_add_color_panels_css($display) { + $base = drupal_get_path('module', 'panels'); + + drupal_add_css($base .'/plugins/styles/color_panels/color_panels.css', 'module', 'all', FALSE); +} + +/** + * Render callback for a single pane. + */ +function theme_panels_color_panels_style_render_pane($content, $pane, $display) { + $output = theme('panels_pane', $content, $pane, $display); + + if (!$output) { + return; + } + + $output = '
' . $output . '
'; + panels_add_color_panels_css($display, 'pane'); + return $output; +}