Index: skinr_ui.module =================================================================== RCS file: /cvs/drupal-contrib/contributions/modules/skinr/skinr_ui.module,v retrieving revision 1.13 diff -u -p -r1.13 skinr_ui.module --- skinr_ui.module 2 Jun 2010 13:16:58 -0000 1.13 +++ skinr_ui.module 12 Oct 2010 23:37:06 -0000 @@ -147,7 +147,7 @@ function skinr_ui_menu() { ); // Edit Skinr settings. - $items['admin/appearance/skinr/edit/%dialog_js/%/%'] = array( + $items['admin/appearance/skinr/edit/%ctools_js/%/%'] = array( 'title' => 'Edit skin', 'title callback' => 'skinr_ui_edit_title', 'title arguments' => array(5, 6), @@ -200,7 +200,7 @@ if (!function_exists('dialog_js_load')) * Implementation of hook_theme(). */ function skinr_ui_theme() { - return array( + $items = array( 'skinr_ui_filters' => array( 'render element' => 'form', 'file' => 'skinr_ui.admin.inc', @@ -226,6 +226,7 @@ function skinr_ui_theme() { 'file' => 'skinr_ui.admin.inc', ), ); + return $items; } /** @@ -327,25 +328,43 @@ function skinr_ui_edit($js = FALSE, $mod if ($js) { // Do additional ajax related stuff. + $arguments = array( + 'skinr' => array( + 'module' => $module, + 'sid' => $sid, + 'sids' => $sids, + ), + 'ajax' => TRUE, + ); + + $output = '
' . drupal_render(drupal_get_form('skinr_ui_form', $arguments)) . '
'; + $commands = array(); + $commands[] = ajax_command_replace('#skinr-editor', $output); + $page = array('#type' => 'ajax', '#commands' => $commands); + ajax_deliver($page); + } + else{ + $arguments = array( + 'skinr' => array( + 'module' => $module, + 'sid' => $sid, + 'sids' => $sids, + ), + ); + return drupal_get_form('skinr_ui_form', $arguments); } - - $arguments = array( - 'skinr' => array( - 'module' => $module, - 'sid' => $sid, - 'sids' => $sids, - ), - ); - return drupal_get_form('skinr_ui_form', $arguments); } /** * Skinr form. */ function skinr_ui_form($form, &$form_state, $arguments) { - $form = array( - '#attributes' => array('class' => 'skinr-form'), - ); + if (isset($arguments['ajax'])) { + $form['#ajax'] = TRUE; + + } + + $form['#attributes'] = array('class' => 'skinr-form'); $form['skinr']['module'] = array( '#type' => 'hidden', @@ -362,7 +381,11 @@ function skinr_ui_form($form, &$form_sta ); } - $form['submit'] = array( + $form['actions'] = array( + '#type' => 'actions', + '#attributes' => array('class' => array('container-inline')), + ); + $form['actions']['submit'] = array( '#type' => 'submit', '#value' => t('Save'), '#weight' => 50, @@ -379,7 +402,7 @@ function skinr_ui_form_alter(&$form, $fo if ($form_id == 'update_script_selection_form') { return; } - + $skinr_config = skinr_fetch_config(); $info = skinr_skin_data(); @@ -403,6 +426,7 @@ function skinr_ui_form_alter(&$form, $fo } $themes = list_themes(); + $theme_list = array(); ksort($themes); foreach ($themes as $theme) { @@ -440,23 +464,31 @@ function skinr_ui_form_alter(&$form, $fo $additional_default = $form_state['values']['_additional']; $template_default = $form_state['values']['_template']; } - + if (!isset($form['skinr_settings'][$module . '_group'])) { $form['skinr_settings'][$module . '_group'] = array( - '#type' => 'fieldset', - '#title' => t('@skinr_title @title', array('@skinr_title' => $form_settings['skinr_title'], '@title' => $form_settings['title'])), - '#description' => t($form_settings['description']) . ' ' . implode(', ', $preprocess_hooks) . '.', - '#weight' => $form_settings['weight'], - '#collapsible' => TRUE, - '#collapsed' => $form_settings['collapsed'], + + //'#type' => 'fieldset', + //'#title' => t('@skinr_title @title', array('@skinr_title' => $form_settings['skinr_title'], '@title' => $form_settings['title'])), + //'#description' => t($form_settings['description']) . ' ' . implode(', ', $preprocess_hooks) . '.', + //'#weight' => $form_settings['weight'], + //'#collapsible' => TRUE, + //'#collapsed' => $form_settings['collapsed'], ); } // Get current theme, but make sure it's not the admin theme when we're editing with AJAX. $current_theme = skinr_current_theme(TRUE); + // Had this in theme_links() but the fragment was screwed up. + $theme_list[] = '
  • ' . $theme->info['name'] . '
    • '; + $form['skinr_settings'][$module . '_group'][$theme->name] = array( - '#type' => 'fieldset', + '#type' => 'container', + '#id' => 'skinr-tab-' . drupal_html_class($theme->info['name']), + ); + $form['skinr_settings'][$module . '_group'][$theme->name]['content'] = array( + '#type' => 'vertical_tabs', '#title' => $theme->info['name'] . ($theme->name == $current_theme ? ' (' . t('enabled + default') . ')' : ''), '#collapsible' => TRUE, '#collapsed' => $theme->name == $current_theme ? FALSE : TRUE, @@ -512,20 +544,24 @@ function skinr_ui_form_alter(&$form, $fo break; } if (empty($skin['group'])) { - $form['skinr_settings'][$module . '_group'][$theme->name]['widgets'][$skin_id] = $field; + // This is wrong. With vertical tabs enabled it's causing some + // skins to show in each tab. There needs to be a "General" tab + // and any skins that are not inside a "group" need to go there. + $form['skinr_settings'][$module . '_group'][$theme->name]['content']['widgets'][$skin_id] = $field; } else { - if (!isset($form['skinr_settings'][$module . '_group'][$theme->name]['widgets'][$skin['group']])) { + if (!isset($form['skinr_settings'][$module . '_group'][$theme->name]['content']['widgets'][$skin['group']])) { $group = $info[$theme->name]->options['groups'][$skin['group']]; - $form['skinr_settings'][$module . '_group'][$theme->name]['widgets'][$skin['group']] = array( + $form['skinr_settings'][$module . '_group'][$theme->name]['content']['widgets'][$skin['group']] = array( '#type' => 'fieldset', '#title' => t($group['title']), '#description' => t($group['description']), '#collapsible' => $group['collapsible'], '#collapsed' => $group['collapsed'], + '#weight' => '', ); } - $form['skinr_settings'][$module . '_group'][$theme->name]['widgets'][$skin['group']][$skin_id] = $field; + $form['skinr_settings'][$module . '_group'][$theme->name]['content']['widgets'][$skin['group']][$skin_id] = $field; } // Prepare templates. @@ -536,14 +572,19 @@ function skinr_ui_form_alter(&$form, $fo // Check for access. if (skinr_handler('access_handler', 'access skinr classes', $form_settings['access_handler'], $form, $form_state)) { - $form['skinr_settings'][$module . '_group'][$theme->name]['_additional'] = array( + $form['skinr_settings'][$module . '_group'][$theme->name]['content']['advanced'] = array( + '#type' => 'fieldset', + '#title' => t('Advanced'), + '#group' => 'skinr', + ); + $form['skinr_settings'][$module . '_group'][$theme->name]['content']['advanced']['_additional'] = array( '#type' => 'textfield', '#title' => t('CSS classes'), '#size' => 40, '#description' => t('To add CSS classes manually, enter classes separated by a single space i.e. first-class second-class'), '#default_value' => $additional_default, ); - $form['skinr_settings'][$module . '_group'][$theme->name]['_template'] = array( + $form['skinr_settings'][$module . '_group'][$theme->name]['content']['advanced']['_template'] = array( '#type' => !empty($template_options) ? 'select' : 'hidden', '#title' => t('Template file'), '#options' => array_merge(array('' => 'Default'), $template_options), @@ -559,6 +600,11 @@ function skinr_ui_form_alter(&$form, $fo if (isset($form['buttons']['submit']['#validate']) && !in_array('skinr_ui_form_validate', $form['buttons']['submit']['#validate'])) { $form['buttons']['submit']['#validate'][] = 'skinr_ui_form_validate'; } + $form['skinr_settings'][$module . '_group'][$theme->name]['content']['information'] = array( + '#type' => 'fieldset', + '#title' => 'Information', + '#description' => t('@skinr_title @title', array('@skinr_title' => $form_settings['skinr_title'], '@title' => $form_settings['title'])) . t($form_settings['description']) . ' ' . implode(', ', $preprocess_hooks) . '.', + ); } } @@ -566,6 +612,18 @@ function skinr_ui_form_alter(&$form, $fo $form['additional_settings']['#weight'] = 39; $form['submit']['#weight'] = 40; + // Editor stuff + drupal_add_library('system', 'ui.tabs'); + + $form['#prefix'] = ' +
    + Toggle editor + Menu + +
    +
    '; + $form['#suffix'] = '
    '; + // Only add submit handler once. // Find the property to check. $attr = &$form; @@ -712,6 +770,7 @@ function _skinr_ui_set_contextual_links( $contextual_links[$hook] = $links; } } + return $contextual_links; } @@ -779,3 +838,69 @@ function skinr_ui_info_templates_filter( } return $filtered_templates; } + +function skinr_ui_display_editor() { + $skinr_args = array( + 'skinr' => array( + 'module' => 'block', + 'sid' => 'system-navigation', + ), + ); + + // The skinr-editor-inner-wrapper id is where we're going to add the new forms on ajax return + + return '
    +
    + Toggle editor + +
    +
    ' . drupal_render(drupal_get_form('skinr_ui_form', $skinr_args)) . '
    '; + +} + +function skinr_ui_display_editor_logic() { + if (arg(0) != 'admin') { + return TRUE; + } + else{ + return FALSE; + } +} + +function skinr_ui_contextual_links_view_alter(&$element, &$items) { + // Add the use-ajax class + drupal_add_js('misc/ajax.js'); + $element['#links']['skinr-block-configure']['attributes']['class'] = 'use-ajax'; +} + +/** + * Implements hook_page_alter(). + */ +function skinr_ui_page_build(&$page) { + if (skinr_ui_display_editor_logic()) { + // No idea how to get these in here automatically, and I know this is totally + // wrong, just trying to theme it. + + $page['page_bottom']['skinr']['#markup'] = skinr_ui_display_editor(); + + $page['page_bottom']['skinr']['#attached'] = array( + 'css' => array( + drupal_get_path('module', 'skinr') . '/css/skinr.editor.css', + ), + 'js' => array( + drupal_get_path('module', 'skinr') . '/js/skinr.editor.js', + ), + ); + } +} + +/** + * Implements template_preprocess_form_element(). + */ +function skinr_preprocess_form_element(&$vars) { + if (isset($vars['element']['#parents'][0])) { + if ($vars['element']['#parents'][0] == 'skinr_settings' && !empty($vars['element']['#description'])) { + $vars['element']['#description'] = '
    ' . $vars['element']['#description'] .'
    '; + } + } +} Index: css/skinr.editor.css =================================================================== RCS file: css/skinr.editor.css diff -N css/skinr.editor.css --- /dev/null 1 Jan 1970 00:00:00 -0000 +++ css/skinr.editor.css 12 Oct 2010 23:37:06 -0000 @@ -0,0 +1,305 @@ +/*$Id*/ + +/* @group jquery.ui.theme.css reset +------------------------------------------------------------------------------*/ +/* widget */ +.skinr.ui-widget, +.skinr .ui-widget-header, +.skinr .ui-widget-header a, +.skinr .ui-widget-content, +.skinr .ui-widget-content a, +.skinr .ui-widget input, +.skinr .ui-widget select, +.skinr .ui-widget textarea, +.skinr .ui-widget button, +/* tabs */ +.skinr .ui-tabs .ui-tabs-nav, +.skinr .ui-tabs .ui-tabs-nav li, +.skinr .ui-tabs .ui-tabs-nav li.ui-tabs-selected, +.skinr .ui-tabs .ui-tabs-nav li a, +.skinr .ui-tabs .ui-tabs-panel, +/* states */ +.skinr .ui-state-default, .skinr .ui-widget-content .ui-state-default, +.skinr .ui-state-hover, .skinr .ui-widget-content .ui-state-hover, +.skinr .ui-state-active, .skinr .ui-widget-content .ui-state-active, +.skinr .ui-state-focus, .skinr .ui-widget-content .ui-state-focus, +/* states - links */ +.skinr .ui-state-default a, .skinr .ui-state-default a:link, .skinr .ui-state-default a:visited, +.skinr .ui-state-hover a, .skinr .ui-state-hover a:hover, .skinr .ui-state-active a, +.skinr .ui-state-active a:link, .skinr .ui-state-active a:visited { + background: transparent; + border: none; + color: #fff; + font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, sans-serif; + font-size: 1em; + font-weight: normal; + float: none; + list-style: none; + list-style-type: none; + padding: 0; + margin: 0; + position: static; + border: none; + white-space: normal; +} +/* @end */ + +/* @group wrappers +------------------------------------------------------------------------------*/ +.skinr, +.skinr.ui-widget { + background: #444; + bottom: 40px; + color: #fff; + font: normal normal 1em/1.5 "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, sans-serif; + position: fixed; + width: 100%; + height: 350px; + min-width: 940px; +} +.skinr .container-inline.form-actions { + background: #000; + bottom: -40px; + font-size: 0.8em; + overflow: hidden; + position: absolute; + width: 100%; + margin: 0 -1em; + text-align: right; +} +.skinr-content { + height: 310px; + padding: 0 1em 1em 1em; +} +/* @end */ + + +/* @group header +------------------------------------------------------------------------------*/ +.skinr-header { + background: #000; + border: none; + font-weight: normal; + padding: 0.5em 1em 0 1em; + margin: 0; +} +.skinr-grippie { + background: #343434 url(../images/editor.png) no-repeat 50% -494px; + border: solid 1px #222; + border-width: 1px 0; + border-top-color: #000; + cursor: n-resize; + height: 12px; + overflow: hidden; +} +a.skinr-toggle { + background: transparent url('../images/editor.png') no-repeat; + background-position: 5px 2px; + display: inline-block; + width: 16px; + height: 16px; + text-indent: -999em; + padding: 0.2em 0.4em; +} +a.skinr-toggle-editor { + background-position: 5px -163px; + float: right; +} +a.skinr-toggle-menu { + float: left; + margin: 0.5em 0.6em 0 0; +} +/* @end */ + + +/* @group tabs +------------------------------------------------------------------------------*/ +#skinr-editor ul.skinr-tabs, +#skinr-editor ul.skinr-tabs li { + display: inline; +} +#skinr-editor ul.skinr-tabs li a { + float: left; + padding: 0.5em 1em; +} +#skinr-editor ul.skinr-tabs li.ui-state-active a, +#skinr-editor ul.skinr-tabs li.ui-state-hover a { + background: #444; +} +/* @end */ + + +/* @group form +------------------------------------------------------------------------------*/ +/* Reset some form elements */ +.skinr form, +.skinr fieldset, +.skinr fieldset legend, +.skinr fieldset legend span, +.skinr fieldset legend a, +.skinr fieldset .fieldset-wrapper { + background: transparent; + border: none; + color: #fff; + height: auto; + float: none; + left: auto; + margin: 0!important; + padding: 0!important; + overflow: visible; + position: static; + text-decoration: none; + top: auto; +} +.skinr .fieldset-description { + margin-bottom: 1em; +} +.skinr .form-item { + margin: 0.5em 0 1em 0; + padding: 0 0 0 12em; + position: relative; +} +.skinr .form-item:after { + content: "."; + display: inline-block; /* block is causing issues with the first select */ + height: 0; + clear: both; + visibility: hidden; +} +* html .skinr .form-item { + height: 1%; /* IE6 */ +} +*:first-child + html .skinr div.form-item { + min-height: 1%; /* IE7 */ +} + +.skinr textarea.form-textarea, .skinr textarea, +.skinr select.form-select, .skinr select, +.skinr input.form-text .skinr input[type=text] { + font-family: "Lucida Grande", "Lucida Sans Unicode", Lucida, Verdana, sans-serif; + font-size: 11px; + padding: 1px; +} + +.skinr .form-item input, +.skinr .form-item select { + float: left; + max-width: 18em; + white-space: nowrap; /* weirdness in webkit with selects */ +} +.skinr .form-item label { + left: 0; + position: absolute; + font-weight: normal; +} +/* reset positioning nested form items and labels */ +.skinr .form-item .form-item { + padding-left: 0; + position: static; + max-width: none; +} +.skinr .form-item .form-item input, +.skinr .form-item .form-item select { + float: none; + max-width: none; +} + +/* descriptions */ +.skinr-help-wrapper { + display: none; + float: left; + position: relative; +} +.skinr .description:hover .skinr-help-wrapper, +.skinr .description:focus .skinr-help-wrapper { + display: block; +} +.skinr-help-icon { + background: transparent url('../images/editor.png') no-repeat 0 -653px; + display: block; + float: left; + height: 16px; + margin: 0 1em; + width: 16px; + cursor: pointer; +} +.skinr .form-type-checkboxes .description, +.skinr .form-type-radios .description { + position: absolute; + top: 0.35em; + left: auto; +} +.skinr .form-type-checkboxes .skinr-help-icon, +.skinr .form-type-radios .skinr-help-icon { + margin-left: -2.2em; +} +.skinr .description:hover .skinr-help, +.skinr .description:focus .skinr-help { + background: #333; + color: #fff; + display: block; + font-style: normal; + padding: 1em; + margin: -1em 0 0 0; + position: absolute; + max-width: 25em; + width: 22em; + z-index: 1; +} +/* checkboxes and radios */ +.skinr .form-type-checkboxes .form-item, +.skinr .form-type-radios .form-item { + display: inline-block; + margin-right: 1em; +} +.skinr .form-item label.option { + left: auto; + position: relative; +} +/* @end */ + + +/* @group vertical tabs +------------------------------------------------------------------------------*/ +#skinr-editor div.vertical-tabs { + background: #222; + border: none; +} +#skinr-editor div.vertical-tabs-panes { + background: #222; + border: none; + padding: 1em 1.5em; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -moz-border-radius-topleft: 0; + -webkit-border-top-left-radius: 0; + border-radius-topleft: 0; +} +#skinr-editor ul.vertical-tabs-list, +#skinr-editor ul.vertical-tabs-list li { + background: transparent; + border: none; + margin-top: 0; +} +#skinr-editor ul.vertical-tabs-list li.selected { + background: #222; + border: none; +} +#skinr-editor ul.vertical-tabs-list li a, +#skinr-editor ul.vertical-tabs-list li a strong { + border: none; + color: #fff; + font-weight: normal; +} +#skinr-editor ul.vertical-tabs-list li a:focus strong, +#skinr-editor ul.vertical-tabs-list li a:active strong, +#skinr-editor ul.vertical-tabs-list li a:hover strong { + text-decoration: none; +} +#skinr-editor ul.vertical-tabs-list li a:hover strong, +#skinr-editor ul.vertical-tabs-list li a:hover { + color: #83a14d; + outline: none; +} +/* @end */ \ No newline at end of file Index: js/skinr.editor.js =================================================================== RCS file: js/skinr.editor.js diff -N js/skinr.editor.js --- /dev/null 1 Jan 1970 00:00:00 -0000 +++ js/skinr.editor.js 12 Oct 2010 23:37:06 -0000 @@ -0,0 +1,41 @@ +// $Id$ +(function ($) { + +/** + * Tabs. + */ +Drupal.behaviors.skinrEditor = { + attach: function (context, settings) { + $("#skinr-editor", context).tabs(); + } +}; + +/** + * Grippie. + */ +Drupal.behaviors.skinrGrippie = { + attach: function (context, settings) { + $('#skinr-editor', context).once('skinr-panel', function () { + var staticOffset = null; + var panel = $(this); + var header = $(this).addClass('skinr-resizable-panel').find('.skinr-header'); + var grippie = $('
    ').mousedown(startDrag); + grippie.insertBefore(header); + + function startDrag(e) { + staticOffset = panel.height() + e.pageY; + $(document).mousemove(performDrag).mouseup(endDrag); + return false; + } + function performDrag(e) { + panel.height(Math.max(32, staticOffset - e.pageY) + 'px'); + return false; + } + function endDrag(e) { + $(document).unbind('mousemove', performDrag).unbind('mousedown', endDrag); + } + }); + } +}; + +})(jQuery);