From fd36c9e63b8f123e287d3d9b12d49c17d8369b77 Mon Sep 17 00:00:00 2001 From: Kristiaan Van den Eynde Date: Fri, 23 Aug 2013 14:32:24 +0200 Subject: [PATCH] Issue #1880252 by pfrenssen, FreekyMage, kristiaanvandeneynde: Added Allow to show/hide events by clicking on the legends. --- .../css/fullcalendar_legend.theme.css | 5 + fullcalendar_legend/fullcalendar_legend.install | 1 + fullcalendar_legend/fullcalendar_legend.module | 11 ++ fullcalendar_legend/js/fullcalendar_legend.js | 109 ++++++++++++++++++++ .../plugins/content_types/fullcalendar_legend.inc | 12 ++- 5 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 fullcalendar_legend/js/fullcalendar_legend.js diff --git a/fullcalendar_legend/css/fullcalendar_legend.theme.css b/fullcalendar_legend/css/fullcalendar_legend.theme.css index 79ebf79..66859a8 100644 --- a/fullcalendar_legend/css/fullcalendar_legend.theme.css +++ b/fullcalendar_legend/css/fullcalendar_legend.theme.css @@ -8,6 +8,11 @@ padding: 0.1em 0.5em; } +.fullcalendar-legend .fc-event-default input { + float: left; + margin: 0.1em 0.4em 0 0.2em; +} + .fullcalendar-legend .fc-event-default a { border: none; display: block; diff --git a/fullcalendar_legend/fullcalendar_legend.install b/fullcalendar_legend/fullcalendar_legend.install index 60c17c7..a4175b7 100644 --- a/fullcalendar_legend/fullcalendar_legend.install +++ b/fullcalendar_legend/fullcalendar_legend.install @@ -10,4 +10,5 @@ */ function fullcalendar_legend_uninstall() { variable_del('fullcalendar_legend_type'); + variable_del('fullcalendar_legend_filter'); } diff --git a/fullcalendar_legend/fullcalendar_legend.module b/fullcalendar_legend/fullcalendar_legend.module index 26518b0..2cd5953 100644 --- a/fullcalendar_legend/fullcalendar_legend.module +++ b/fullcalendar_legend/fullcalendar_legend.module @@ -48,6 +48,11 @@ function fullcalendar_legend_block_configure($delta = '') { '#default_value' => variable_get('fullcalendar_legend_type', 'bundle'), '#description' => t('Select the type of legend to display.'), ); + $form['fullcalendar_legend_filter'] = array( + '#type' => 'checkbox', + '#title' => t('Allow to filter events by clicking on the legends.'), + '#default_value' => variable_get('fullcalendar_legend_filter', 0), + ); } return $form; @@ -59,6 +64,7 @@ function fullcalendar_legend_block_configure($delta = '') { function fullcalendar_legend_block_save($delta = '', $edit = array()) { if ($delta == 'fullcalendar_legend') { variable_set('fullcalendar_legend_type', $edit['fullcalendar_legend_type']); + variable_set('fullcalendar_legend_filter', $edit['fullcalendar_legend_filter']); } } @@ -79,6 +85,11 @@ function fullcalendar_legend_block_view($delta = '') { // Build the block structure. $block['content'] = fullcalendar_legend_build_legend($view, variable_get('fullcalendar_legend_type', 'bundle')); + + // Load the javascript for filtering by legend if needed. + if (variable_get('fullcalendar_legend_filter', 0)) { + drupal_add_js(drupal_get_path('module', 'fullcalendar_legend') . '/js/fullcalendar_legend.js'); + } } return $block; diff --git a/fullcalendar_legend/js/fullcalendar_legend.js b/fullcalendar_legend/js/fullcalendar_legend.js new file mode 100644 index 0000000..75b3982 --- /dev/null +++ b/fullcalendar_legend/js/fullcalendar_legend.js @@ -0,0 +1,109 @@ +/** + * @file + * Javascript functionality for FullCalendar Legend. Filters events by legend. + */ +(function ($, Drupal) { + Drupal.fullcalendarLegend = Drupal.fullcalendarLegend || {} + Drupal.fullcalendarLegend.state = Drupal.fullcalendarLegend.state || {} + + /** + * Javascript behavior, called on every ajax request. + */ + Drupal.behaviors.fullcalendarLegend = { + attach: function (context, settings) { + // Make sure we update the calendar on every ajax request. + Drupal.fullcalendarLegend.update(settings); + + // Toggle event visibility when clicking on a legend. + $('.fullcalendar-legend .fc-event-default a', context).click(function(event) { + event.preventDefault(); + Drupal.fullcalendarLegend.filterByLegend(this, settings); + }); + + // Check event visibility by searching the url for a legend. + $('.fullcalendar-legend', context).once('filter-by-url-done', function() { + var $legendLinks = $(this).find('a'), + currentLegend = location.pathname.split('/')[1], + $legendToNotFilter = false; + + // Loop over all legends to find a valid filter. + for (var i = $legendLinks.length - 1; i >= 0; i--) { + var $legendLink = $($legendLinks[i]); + if ($legendLink.attr('href').split('/')[1] === currentLegend) { + $legendToNotFilter = $legendLink; + }; + }; + + // Only filter if a valid legend has been found. + if ($legendToNotFilter) { + $legendLinksToFilter = $legendLinks.not($legendToNotFilter); + Drupal.fullcalendarLegend.filterByLegends($legendLinksToFilter, settings); + }; + }); + } + }; + + /** + * Toggle event visibility depending on multiple legends. + */ + Drupal.fullcalendarLegend.filterByLegends = function(links, settings) { + for (var i = links.length - 1; i >= 0; i--) { + Drupal.fullcalendarLegend.filterByLegend(links[i], settings); + }; + } + + /** + * Toggle event visibility depending on a legend. + */ + Drupal.fullcalendarLegend.filterByLegend = function(link, settings) { + // Retrieve the class defined by the Colors module. + var colorClass = $(link).parent().attr('class').match(/colors-[^\s]+/); + + // Toggle the state and update the calendar. + Drupal.fullcalendarLegend.state[colorClass[0]] = !Drupal.fullcalendarLegend.state[colorClass[0]]; + Drupal.fullcalendarLegend.update(settings); + } + + /** + * Update the calendar event visibility and legend checkboxes. + */ + Drupal.fullcalendarLegend.update = function(settings) { + $('.fullcalendar-legend .fc-event-default').each(function() { + // Retrieve the class defined by the Colors module. + var $legend = $(this), + colorClass = $legend.attr('class').match(/colors-[^\s]+/); + if (colorClass) { + // Hide or show events and checkboxes according to the state. + // Events are hidden by placing an inline style declaration in the HTML + // head, this makes sure the events are not momentarily visible during + // ajax page loads. + if (typeof Drupal.fullcalendarLegend.state[colorClass[0]] == 'undefined' || Drupal.fullcalendarLegend.state[colorClass[0]] == 0) { + // Toggle classes on the legends to aid in theming. + $legend + .addClass('fc-event-visible') + .removeClass('fc-event-hidden'); + + // Show events. + $('#fullcalendar-legend-' + colorClass[0]).remove(); + } + else { + // Toggle classes on the legends to aid in theming. + $legend + .addClass('fc-event-hidden') + .removeClass('fc-event-visible'); + + // Hide events by inserting a style declaration, if it is not already + // hidden. + if ($('#fullcalendar-legend-' + colorClass[0]).length === 0) { + $('').appendTo('head'); + } + } + } + }); + + // Refresh the calendar. + for (var dom_id in settings.fullcalendar) { + $(dom_id).find('.fullcalendar').fullCalendar('rerenderEvents'); + } + } +})(jQuery, Drupal); diff --git a/fullcalendar_legend/plugins/content_types/fullcalendar_legend.inc b/fullcalendar_legend/plugins/content_types/fullcalendar_legend.inc index 6063990..a508880 100644 --- a/fullcalendar_legend/plugins/content_types/fullcalendar_legend.inc +++ b/fullcalendar_legend/plugins/content_types/fullcalendar_legend.inc @@ -28,6 +28,11 @@ function fullcalendar_legend_content_type_render($subtype, $conf, $panel_args, $ } $view->set_display($display); + // Load the javascript for filtering by legend if needed. + if (!empty($conf['filter'])) { + drupal_add_js(drupal_get_path('module', 'fullcalendar_legend') . '/js/fullcalendar_legend.js'); + } + return (object) array( 'module' => 'fullcalendar_legend', 'delta' => 'fullcalendar_legend', @@ -54,6 +59,11 @@ function fullcalendar_legend_content_type_edit_form($form, &$form_state) { '#default_value' => isset($conf['legend_type']) ? $conf['legend_type'] : '', '#description' => t('Select the type of legend to display.'), ); + $form['filter'] = array( + '#type' => 'checkbox', + '#title' => t('Allow to filter events by clicking on the legends.'), + '#default_value' => isset($conf['filter']) ? $conf['filter'] : 0, + ); $form['view'] = array( '#type' => 'select', '#title' => t('FullCalendar view'), @@ -68,7 +78,7 @@ function fullcalendar_legend_content_type_edit_form($form, &$form_state) { * Form submission handler for fullcalendar_legend_content_type_edit_form(). */ function fullcalendar_legend_content_type_edit_form_submit($form, &$form_state) { - foreach (array('view', 'legend_type') as $key) { + foreach (array('view', 'legend_type', 'filter') as $key) { $form_state['conf'][$key] = $form_state['values'][$key]; } } -- 1.7.9.4