diff --git a/css/collapsible-div.css b/css/collapsible-div.css new file mode 100644 index 0000000..d66b083 --- /dev/null +++ b/css/collapsible-div.css @@ -0,0 +1,26 @@ + +.views-collapsible-container .views-toggle { + float: left; + width: 21px; + height: 21px; + cursor: pointer; + background-position: 7px 7px; + background-repeat: no-repeat; + background-image: url(../images/collapsible-expanded.png); +} + +.views-collapsible-container .views-collapsible-handle { + display: none; +} + +html.js .views-collapsible-container .views-collapsible-handle { + display: block; +} + +.views-collapsible-container .views-collapsible-handle { + cursor: pointer; +} + +.views-collapsible-container .views-toggle-collapsed { + background-image: url(../images/collapsible-collapsed.png); +} diff --git a/css/views-admin.ctools-rtl.css b/css/views-admin.ctools-rtl.css index dcdd4ff..a986113 100644 --- a/css/views-admin.ctools-rtl.css +++ b/css/views-admin.ctools-rtl.css @@ -30,38 +30,6 @@ /* @end */ -/* @group Collapsible */ - -.ctools-toggle { - float: right; - margin-left: 2px; - margin-right: 0; -} - -.ctools-toggle.ctools-toggle-collapsed { - border-left: 0; - border-right: 4px solid; - border-left-color: transparent; - border-width: 5px 5px 5px 0; - margin-left: 5px; - margin-right: 2px; -} - -.ctools-export-ui-row label { - float: right; -} - -.views-display-column > .ctools-toggle { - margin-left: 3px; - margin-right: 6px; -} -.views-display-column > .ctools-toggle.ctools-toggle-collapsed { - margin-left: 5px; - margin-right: 9px; -} - -/* @end */ - /* @group Dependent */ .dependent-options { diff --git a/css/views-admin.ctools.css b/css/views-admin.ctools.css index 91a1b80..203be25 100644 --- a/css/views-admin.ctools.css +++ b/css/views-admin.ctools.css @@ -121,63 +121,7 @@ /* @group Collapsible */ -.ctools-toggle { - border-bottom-color: transparent; - border-left-color: transparent; - border-right-color: transparent; - border-style: solid; - border-width: 5px 5px 0; - display: inline-block; - float: left; - height: 0; - margin-right: 2px; - margin-top: 0.4545em; - width: 0; -} - -.ctools-toggle.ctools-toggle-collapsed { - border-bottom-color: transparent; - border-left: 4px solid; - border-right-color: transparent; - border-top-color: transparent; - border-width: 5px 0 5px 5px; - margin-left: 2px; - margin-right: 5px; - margin-top: 0.3333em; -} - -.ctools-toggle:hover, -.ctools-collapsible-handle:hover { - cursor: pointer; -} - -.ctools-export-ui-row { - margin-bottom: 0; - padding-top: 0; -} - -.ctools-export-ui-row label { - display: block; - float: left; - width: 55px; -} - -.views-display-settings .ctools-toggle { - color: #000000; -} - -.views-display-column > .ctools-toggle { - margin-left: 6px; - margin-right: 3px; - margin-top: 10px; -} -.views-display-column > .ctools-toggle.ctools-toggle-collapsed { - margin-left: 9px; - margin-right: 5px; - margin-top: 8px; -} - -.views-display-column > .ctools-collapsible-handle { +.views-display-column > .views-collapsible-handle { border-color: #F3F3F3; border-style: solid; border-width: 1px 1px 0; @@ -187,15 +131,15 @@ padding: 6px 3px; } -.views-display-column > .ctools-toggle.ctools-toggle-collapsed + .ctools-collapsible-handle { +.views-display-column > .views-toggle.views-toggle-collapsed + .views-collapsible-handle { border-width: 1px; } -.views-display-column > .ctools-collapsible-content > .views-ui-display-tab-bucket:first-child { +.views-display-column > .views-collapsible-content > .views-ui-display-tab-bucket:first-child { border-top: medium none; } -h2.ctools-collapsible-handle { +h2.views-collapsible-handle { display: inline; clear: both; } diff --git a/includes/admin.inc b/includes/admin.inc index a768557..cfed1f0 100644 --- a/includes/admin.inc +++ b/includes/admin.inc @@ -24,6 +24,7 @@ function views_ui_get_admin_css() { $list = array(); $list[$module_path . '/css/views-admin.css'] = array(); $list[$module_path . '/css/views-admin.theme.css'] = array(); + $list[$module_path . '/css/collapsible-div.css'] = array(); // Add in any theme specific CSS files we have $themes = list_themes(); @@ -932,7 +933,7 @@ function views_ui_edit_form($form, &$form_state, $view, $display_id = NULL) { $view->fixMissingRelationships(); } - $form['#attached']['js'][] = drupal_get_path('module', 'ctools') . '/js/collapsible-div.js'; + $form['#attached']['js'][] = drupal_get_path('module', 'views') . '/js/collapsible-div.js'; $form['#tree'] = TRUE; // @todo When more functionality is added to this form, cloning here may be @@ -1040,21 +1041,21 @@ function views_ui_edit_form($form, &$form_state, $view, $display_id = NULL) { $form_state['display_id'] = $display_id; // The part of the page where editing will take place. - // This element is the ctools collapsible-div container for the display edit elements. + // This element is the views collapsible-div container for the display edit elements. $form['displays']['settings'] = array( '#theme_wrappers' => array('container'), '#attributes' => array( 'class' => array( 'views-display-settings', 'box-margin', - 'ctools-collapsible-container', + 'views-collapsible-container', ), ), '#id' => 'edit-display-settings', ); $display_title = views_ui_get_display_label($view, $display_id, FALSE); - // Add a handle for the ctools collapsible-div. The handle is the title of the display - $form['displays']['settings']['tab_title']['#markup'] = '

' . t('@display_title details', array('@display_title' => ucwords($display_title))) . '

'; + // Add a handle for the views collapsible-div. The handle is the title of the display + $form['displays']['settings']['tab_title']['#markup'] = '

' . t('@display_title details', array('@display_title' => ucwords($display_title))) . '

'; // Add a text that the display is disabled. if (!empty($view->display[$display_id]->handler)) { $enabled = $view->display[$display_id]->handler->getOption('enabled'); @@ -1062,13 +1063,13 @@ function views_ui_edit_form($form, &$form_state, $view, $display_id = NULL) { $form['displays']['settings']['disabled']['#markup'] = t('This display is disabled.'); } } - // The ctools collapsible-div content + // The views collapsible-div content $form['displays']['settings']['settings_content']= array( '#theme_wrappers' => array('container'), '#id' => 'edit-display-settings-content', '#attributes' => array( 'class' => array( - 'ctools-collapsible-content', + 'views-collapsible-content', ), ), ); @@ -1619,9 +1620,9 @@ function views_ui_get_display_tab_details($view, $display) { $build['columns']['second']['footer'] = array(); $build['columns']['second']['pager'] = array(); - // The third column buckets are wrapped in a CTools collapsible div + // The third column buckets are wrapped in a views collapsible div $build['columns']['third']['#theme_wrappers'] = array('container'); - $build['columns']['third']['#attributes'] = array('class' => array('views-display-column', 'third', 'ctools-collapsible-container', 'ctools-collapsible-remember')); + $build['columns']['third']['#attributes'] = array('class' => array('views-display-column', 'third', 'views-collapsible-container')); // Specify an id that won't change after AJAX requests, so ctools can keep // track of the user's preferred collapsible state. Use the same id across // different displays of the same view, so changing displays doesn't @@ -1629,11 +1630,11 @@ function views_ui_get_display_tab_details($view, $display) { $build['columns']['third']['#attributes']['id'] = 'views-ui-advanced-column-' . $view->name; // Collapse the div by default. if (!config('views.settings')->get('ui.show.advanced_column')) { - $build['columns']['third']['#attributes']['class'][] = 'ctools-collapsed'; + $build['columns']['third']['#attributes']['class'][] = 'views-collapsed'; } - $build['columns']['third']['advanced'] = array('#markup' => '

' . t('Advanced') . '

'); + $build['columns']['third']['advanced'] = array('#markup' => '

' . t('Advanced') . '

'); $build['columns']['third']['collapse']['#theme_wrappers'] = array('container'); - $build['columns']['third']['collapse']['#attributes'] = array('class' => array('ctools-collapsible-content')); + $build['columns']['third']['collapse']['#attributes'] = array('class' => array('views-collapsible-content')); // Each option (e.g. title, access, display as grid/table/list) fits into one // of several "buckets," or boxes (Format, Fields, Sort, and so on). @@ -1661,7 +1662,7 @@ function views_ui_get_display_tab_details($view, $display) { $column = 'third'; } if (isset($bucket['build']) && is_array($bucket['build'])) { - // The third column is a CTools collapsible div, so + // The third column is a views collapsible div, so // the structure of the form is a little different for this column if ($column === 'third') { $build['columns'][$column]['collapse'][$id] = $bucket['build']; diff --git a/js/collapsible-div.js b/js/collapsible-div.js new file mode 100644 index 0000000..55801ae --- /dev/null +++ b/js/collapsible-div.js @@ -0,0 +1,84 @@ +/** + * @file + * Javascript required for a simple collapsible div. + * + * Creating a collapsible div with this doesn't take too much. There are + * three classes necessary: + * + * - views-collapsible-container: This is the overall container that will be + * collapsible. This must be a div. + * - views-collapsible-handle: This is the title area, and is what will be + * visible when it is collapsed. This can be any block element, such as div + * or h2. + * - views-collapsible-content: This is the ocntent area and will only be + * visible when expanded. This must be a div. + * + * If the class 'views-no-container' is placed on the container, the container + * will be the handle. The content will be found by appending '-content' to the + * id of the handle. The views-collapsible-handle and + * views-collapsible-content classes will not be required in that case, and no + * restrictions on what of data the container is are placed. Like + * views-collapsible-remember this requires an id to eist. + * + * The content will be 'open' unless the container class has 'views-collapsed' + * as a class, which will cause the container to draw collapsed. + */ + +(function ($) { + // All views tools begin with this if they need to use the views namespace. + if (!Drupal.views) { + Drupal.views = {}; + } + + /** + * Bind collapsible behavior to a given container. + */ + Drupal.views.bindCollapsible = function () { + var $container = $(this); + + // Allow the specification of the 'no container' class, which means the + // handle and the container can be completely independent. + if ($container.hasClass('views-no-container') && $container.attr('id')) { + // In this case, the container *is* the handle and the content is found + // by adding '-content' to the id. Obviously, an id is required. + var handle = $container; + var content = $('#' + $container.attr('id') + '-content'); + } + else { + var handle = $container.children('.views-collapsible-handle'); + var content = $container.children('div.views-collapsible-content'); + } + + if (content.length) { + // Create the toggle item and place it in front of the toggle. + var toggle = $(''); + handle.before(toggle); + + // If we should start collapsed, do so: + if ($container.hasClass('views-collapsed')) { + toggle.toggleClass('views-toggle-collapsed'); + content.hide(); + } + + var clickMe = function () { + content.slideToggle(100); + toggle.toggleClass('views-toggle-collapsed'); + + return false; + } + + // Let both the toggle and the handle be clickable. + toggle.click(clickMe); + handle.click(clickMe); + } + }; + + /** + * Support Drupal's 'behaviors' system for binding. + */ + Drupal.behaviors.ViewsCollapsible = { + attach: function(context) { + $('.views-collapsible-container', context).once('views-collapsible', Drupal.views.bindCollapsible); + } + } +})(jQuery); diff --git a/theme/theme.inc b/theme/theme.inc index 8f0c034..1251472 100644 --- a/theme/theme.inc +++ b/theme/theme.inc @@ -8,6 +8,30 @@ use Drupal\Core\Template\Attribute; /** + * Render a collapsible div. + * + * @param $handle + * Text to put in the handle/title area of the div. + * @param $content + * Text to put in the content area of the div, this is what will get + * collapsed + * @param $collapsed = FALSE + * If true, this div will start out collapsed. + */ +function theme_views_collapsible($vars) { + views_add_js('collapsible-div'); + views_add_css('collapsible-div'); + + $class = $vars['collapsed'] ? ' views-collapsed' : ''; + $output = '
'; + $output .= '
' . $vars['handle'] . '
'; + $output .= '
' . $vars['content'] . '
'; + $output .= '
'; + + return $output; +} + +/** * Provide a full array of possible themes to try for a given hook. * * @param $hook diff --git a/views.module b/views.module index fb49705..ef1eea5 100644 --- a/views.module +++ b/views.module @@ -247,6 +247,10 @@ function views_theme($existing, $type, $theme, $path) { 'variables' => array('more_url' => NULL, 'link_text' => 'more', 'view' => NULL), ); + $hooks['views_collapsible'] = $base + array( + 'variables' => array('handle' => NULL, 'content' => NULL, 'collapsed' => FALSE), + ); + return $hooks; }