From 5ad682d7fbcc1364186178b4b4ec240bf21080dd Mon Sep 17 00:00:00 2001 From: laryn Date: Tue, 17 Dec 2024 16:41:16 -0600 Subject: [PATCH] Issue #1: Clean up and basic functionality. --- README.md | 29 ++-- config.rb | 24 ---- css/expanding_formatter.css | 36 ++--- css/expanding_formatter.scss | 110 +++++++++++++++ expanding_formatter.module | 192 ++------------------------ js/expanding_formatter.js | 246 ++++++++-------------------------- sass/expanding_formatter.scss | 99 -------------- 7 files changed, 207 insertions(+), 529 deletions(-) delete mode 100644 config.rb create mode 100644 css/expanding_formatter.scss delete mode 100644 sass/expanding_formatter.scss diff --git a/README.md b/README.md index e9511ca..1da428a 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,50 @@ # Expanding Formatter -This module provides a formatter for existing text, long text and text with -summary widget types. This module allows you to change how the content is being +This module provides a formatter for existing text, long text and text with +summary widget types. This module allows you to change how the content is being displayed (formatted) by providing new format types: - Trimmed (expandable) - Summary or Trimmed (expandable) - + ![Expanding Formatter](https://github.com/backdrop-contrib/expanding_formatter/blob/1.x-1.x/images/expanding_formatter.gif "Expanding formatter demo") ## Features -- CSS3 Transition effects (with jQuery fallback if disabled): +- CSS Transition effects: - None (just toggle visibility immediately) - Fade - Slide - Customizable/themable ellipsis - Customizable labels for trigger (collapsible, if you need to create a toggle) -- Customizable classes on trigger +- Customizable classes on trigger ## How to use this module: -Enable the module and go to your content type's display -(e.g. `admin/structure/types/manage/page/display`). You will see fields -(like `Body`) that allow you to adjust the `Format` – you can now choose -"Trimmed (expandable)". Once you've selected this format, you will have +Enable the module and go to your content type's display +(e.g. `admin/structure/types/manage/page/display`). You will see fields +(like `Body`) that allow you to adjust the `Format` – you can now choose +"Trimmed (expandable)". Once you've selected this format, you will have additional configuration options. ![Expanding Formatter Display Settings](https://github.com/backdrop-contrib/expanding_formatter/blob/1.x-1.x/images/expanding_formatter_display.png "Expanding formatter display settings") ## Issues -Bugs and Feature requests should be reported in the +Bugs and Feature requests should be reported in the [Issue Queue](https://github.com/backdrop-contrib/expanding_formatter/issues) ## Current Maintainers - - [Laryn Kragt Bakker](https://github.com/laryn) - [CEDC.org](https://cedc.org) + - [Laryn Kragt Bakker](https://github.com/laryn). ## Credits -- Ported to Backdrop CMS by [Laryn Kragt Bakker](https://github.com/laryn) - [CEDC.org](https://cedc.org). +- Ported to Backdrop CMS by [Laryn Kragt Bakker](https://github.com/laryn). +- Initial port to Backdrop sponsored by [CEDC.org](https://cedc.org). - Maintainer for the Drupal module: [Mark Carver](https://github.com/markcarver). ## License -This project is GPL v2 software. See the [LICENSE.txt](https://github.com/backdrop-contrib/expanding_formatter/blob/1.x-1.x/LICENSE.txt) -file in this directory for complete text. \ No newline at end of file +This project is GPL v2 software. See the [LICENSE.txt](https://github.com/backdrop-contrib/expanding_formatter/blob/1.x-1.x/LICENSE.txt) +file in this directory for complete text. diff --git a/config.rb b/config.rb deleted file mode 100644 index 50b2762..0000000 --- a/config.rb +++ /dev/null @@ -1,24 +0,0 @@ -# Require any additional compass plugins here. - -# Set this to the root of your project when deployed: -http_path = "/" -css_dir = "css" -sass_dir = "sass" -images_dir = "images" -javascripts_dir = "js" - -# You can select your preferred output style here (can be overridden via the command line): -# output_style = :expanded or :nested or :compact or :compressed - -# To enable relative paths to assets via compass helper functions. Uncomment: -# relative_assets = true - -# To disable debugging comments that display the original location of your selectors. Uncomment: -line_comments = false - - -# If you prefer the indented syntax, you might want to regenerate this -# project again passing --syntax sass, or you can uncomment this: -# preferred_syntax = :sass -# and then run: -# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass diff --git a/css/expanding_formatter.css b/css/expanding_formatter.css index b6a4e45..07af858 100644 --- a/css/expanding_formatter.css +++ b/css/expanding_formatter.css @@ -27,42 +27,30 @@ .expanding-formatter .expanding-formatter-ellipsis { margin-right: .25em; } -.expanding-formatter[data-css3="1"].collapsed.sliding .expanding-formatter-ellipsis, .expanding-formatter[data-css3="1"].collapsed[data-effect="slide"]:not(.sliding) .expanding-formatter-content { +.expanding-formatter.collapsed.sliding .expanding-formatter-ellipsis, .expanding-formatter.collapsed[data-effect="slide"]:not(.sliding) .expanding-formatter-content { display: none; } -.expanding-formatter[data-css3="1"].collapsed .trigger { +.expanding-formatter.collapsed .trigger { display: inline; } -.expanding-formatter[data-css3="1"][data-effect="slide"] { - -webkit-transition: height 500ms ease; - -moz-transition: height 500ms ease; - -o-transition: height 500ms ease; +.expanding-formatter[data-effect="slide"] { transition: height 500ms ease; } -.expanding-formatter[data-css3="1"][data-effect="fade"] .expanding-formatter-content { - -webkit-transition: opacity 500ms ease; - -moz-transition: opacity 500ms ease; - -o-transition: opacity 500ms ease; +.expanding-formatter[data-effect="fade"] .expanding-formatter-content { transition: opacity 500ms ease; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; overflow: hidden; } -.expanding-formatter[data-css3="1"][data-effect="fade"] .expanding-formatter-trigger { - -webkit-transition: opacity 500ms ease; - -moz-transition: opacity 500ms ease; - -o-transition: opacity 500ms ease; +.expanding-formatter[data-effect="fade"] .expanding-formatter-trigger { transition: opacity 500ms ease; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } -.expanding-formatter[data-css3="1"][data-effect="fade"].fading .expanding-formatter-trigger { - -webkit-transition: none; - -moz-transition: none; - -o-transition: none; +.expanding-formatter[data-effect="fade"].fading .expanding-formatter-trigger { transition: none; } -.expanding-formatter[data-css3="1"][data-effect="fade"].collapsed .expanding-formatter-content { +.expanding-formatter[data-effect="fade"].collapsed .expanding-formatter-content { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); height: 1px; @@ -70,20 +58,20 @@ position: absolute !important; width: 1px; } -.expanding-formatter[data-css3="1"][data-effect="fade"].collapsed .expanding-formatter-trigger { +.expanding-formatter[data-effect="fade"].collapsed .expanding-formatter-trigger { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } -.expanding-formatter[data-css3="1"][data-effect="fade"].collapsed.fading .expanding-formatter-content, .expanding-formatter[data-css3="1"][data-effect="fade"].collapsed.fading .expanding-formatter-trigger { +.expanding-formatter[data-effect="fade"].collapsed.fading .expanding-formatter-content, .expanding-formatter[data-effect="fade"].collapsed.fading .expanding-formatter-trigger { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } -.expanding-formatter[data-css3="1"][data-effect="fade"].expanded .expanding-formatter-content, -.expanding-formatter[data-css3="1"][data-effect="fade"].expanded .expanding-formatter-trigger { +.expanding-formatter[data-effect="fade"].expanded .expanding-formatter-content, +.expanding-formatter[data-effect="fade"].expanded .expanding-formatter-trigger { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } -.expanding-formatter[data-css3="1"][data-effect="fade"].expanded.fading .expanding-formatter-content, .expanding-formatter[data-css3="1"][data-effect="fade"].expanded.fading .expanding-formatter-trigger { +.expanding-formatter[data-effect="fade"].expanded.fading .expanding-formatter-content, .expanding-formatter[data-effect="fade"].expanded.fading .expanding-formatter-trigger { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } diff --git a/css/expanding_formatter.scss b/css/expanding_formatter.scss new file mode 100644 index 0000000..eb21362 --- /dev/null +++ b/css/expanding_formatter.scss @@ -0,0 +1,110 @@ +// Defaults +.expanding-formatter { + overflow: hidden; + position: relative; + + &.expanded .expanding-formatter-ellipsis { + display: none; + } + + // Inline summary/expanded content. + &[data-inline="1"] { + p { + margin: 0 0 1.2em; + } + + p:nth-child(2) { + margin-top: 1.2em; + } + + p:first-child, + p:last-child { + display: inline; + margin-bottom: 0; + } + + .expanding-formatter-summary, + .expanding-formatter-content { + display: inline; + } + + .expanding-formatter-trigger { + display: inline-block; + margin-bottom: 5px; + } + } + + // Margin for ellipsis. + .expanding-formatter-ellipsis { + margin-right: .25em; + } + + // Collapsed + &.collapsed { + + &.sliding .expanding-formatter-ellipsis, + &[data-effect="slide"]:not(.sliding) .expanding-formatter-content { + display: none; + } + + .trigger { + display: inline; + } + } + + // Slide effect + &[data-effect="slide"] { + @include transition(height 500ms ease); + } + + // Fade effect + &[data-effect="fade"] { + .expanding-formatter-content { + @include transition(opacity 500ms ease); + @include opacity(0); + overflow: hidden; + } + + .expanding-formatter-trigger { + @include transition(opacity 500ms ease); + @include opacity(0); + } + + &.fading .expanding-formatter-trigger { + @include transition(none); + } + + &.collapsed { + .expanding-formatter-content { + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); + height: 1px; + overflow: hidden; + position: absolute !important; + width: 1px; + } + + .expanding-formatter-trigger { + @include opacity(1); + } + + &.fading .expanding-formatter-content, + &.fading .expanding-formatter-trigger { + @include opacity(0); + } + } + + &.expanded { + + .expanding-formatter-content, + .expanding-formatter-trigger { + @include opacity(1); + } + + &.fading .expanding-formatter-content, + &.fading .expanding-formatter-trigger { + @include opacity(0); + } + } + } +} diff --git a/expanding_formatter.module b/expanding_formatter.module index aee81f1..5d62f93 100644 --- a/expanding_formatter.module +++ b/expanding_formatter.module @@ -48,8 +48,6 @@ function expanding_formatter_default_settings() { 'trigger_collapsed_label' => t('Collapse'), 'trigger_classes' => 'button', 'inline' => TRUE, - 'css3' => TRUE, - 'js_duration' => 500, ); } @@ -139,19 +137,6 @@ function expanding_formatter_field_formatter_settings_form($field, $instance, $v 'slide' => t('Slide'), ), ); - $element['css3'] = array( - '#title' => t('Use CSS3 !transitions for animation effects', array( - '!transitions' => l(t('Transitions'), 'http://www.w3.org/TR/css3-transitions/'), - )), - '#type' => 'checkbox', - '#description' => t('If you require support for IE 7/8, this option will need to be disabled to fallback to jQuery animations.'), - '#default_value' => $settings['css3'], - '#states' => array( - 'invisible' => array( - ':input[name*="effect"]' => array('value' => ''), - ), - ), - ); $element['trigger_expanded_label'] = array( '#type' => 'textfield', '#title' => t('Trigger expanded label'), @@ -176,18 +161,6 @@ function expanding_formatter_field_formatter_settings_form($field, $instance, $v '#description' => t('If enabled, all elements inside the formatted display will appear as inline. Disable if needed or desired.'), '#default_value' => $settings['inline'], ); - $element['js_duration'] = array( - '#title' => t('jQuery animation duration'), - '#type' => 'textfield', - '#description' => t('Milliseconds'), - '#size' => 5, - '#default_value' => $settings['js_duration'], - '#states' => array( - 'invisible' => array( - ':input[name*="css3"]' => array('checked' => TRUE), - ), - ), - ); } return $element; } @@ -202,7 +175,7 @@ function expanding_formatter_field_formatter_settings_summary($field, $instance, $summary = array(); if (strpos($display['type'], '_trimmed') !== FALSE) { $summary[t('Trim length')] = $settings['trim_length'] . ($settings['trim_ellipsis'] ? ' (' . t('with ellipsis') . ')' : ''); - $summary[t('Animation effect')] = (!empty($settings['effect']) ? $settings['effect'] : t('None')) . ' (' . (!empty($settings['css3']) ? t('CSS3') : t('jQuery')) . ')'; + $summary[t('CSS animation effect')] = (!empty($settings['effect']) ? $settings['effect'] : t('None')); if (!empty($settings['trigger_collapsed_label'])) { $summary[t('Trigger expanded label')] = $settings['trigger_expanded_label']; } @@ -233,15 +206,6 @@ function expanding_formatter_field_formatter_view($entity_type, $entity, $field, $settings = $display['settings']; $settings += expanding_formatter_default_settings(); - // Attach the necessary resources. - $module_path = backdrop_get_path('module', 'expanding_formatter'); - $element = array( - '#attached' => array( - 'css' => array($module_path . '/css/expanding_formatter.css'), - 'js' => array($module_path . '/js/expanding_formatter.js'), - ), - ); - // Create a link for the toggle. $trigger_classes = array(); if (!empty($settings['trigger_classes'])) { @@ -257,7 +221,7 @@ function expanding_formatter_field_formatter_view($entity_type, $entity, $field, 'link' => array( '#theme' => 'link', '#text' => t($settings['trigger_expanded_label']), - '#path' => 'javascript:void(0)', + '#path' => '#', '#options' => array( 'external' => TRUE, 'html' => FALSE, @@ -274,9 +238,6 @@ function expanding_formatter_field_formatter_view($entity_type, $entity, $field, if (!empty($settings['inline'])) { $attributes['data-inline'] = $settings['inline']; } - if (!empty($settings['css3'])) { - $attributes['data-css3'] = $settings['css3']; - } if (!empty($settings['effect'])) { $attributes['data-effect'] = $settings['effect']; } @@ -284,16 +245,21 @@ function expanding_formatter_field_formatter_view($entity_type, $entity, $field, $attributes['data-expanded-label'] = t($settings['trigger_expanded_label']); $attributes['data-collapsed-label'] = t($settings['trigger_collapsed_label']); } - if (empty($settings['css3'])) { - $attributes['data-js-duration'] = $settings['js_duration']; - } + + // Attach the necessary resources. + $module_path = backdrop_get_path('module', 'expanding_formatter'); foreach ($items as $delta => $item) { $element[$delta] = array( '#theme_wrappers' => array('container'), '#expanding_formatter' => TRUE, '#attributes' => $attributes, + '#attached' => array( + 'css' => array($module_path . '/css/expanding_formatter.css'), + 'js' => array($module_path . '/js/expanding_formatter.js'), + ), ); $original = _text_sanitize($instance, $langcode, $item, 'value'); + $original = str_replace(array("\r", "\n"), '', $original); if ($display['type'] === 'expanding_formatter_text_summary_or_trimmed' && !empty($item['summary'])) { $element[$delta]['summary'] = array( '#theme_wrappers' => array('container'), @@ -312,12 +278,13 @@ function expanding_formatter_field_formatter_view($entity_type, $entity, $field, 'class' => array('expanding-formatter-summary'), ), 'value' => array( - '#markup' => expanding_formatter_text_summary($original, $instance['settings']['text_processing'] ? $item['format'] : NULL, $settings['trim_length']), + '#markup' => text_summary($original, $instance['settings']['text_processing'] ? $item['format'] : NULL, $settings['trim_length']), ), ); } if ($instance['settings']['text_processing']) { - $filters = filter_list_format($item['format']); + $format = filter_format_load($item['format']); + $filters = $format->filters; } // Strip tags if HTML corrector filter is used. if (!empty($filters['filter_htmlcorrector']->status)) { @@ -358,136 +325,3 @@ function expanding_formatter_field_formatter_view($entity_type, $entity, $field, return $element; } } - -/** - * Fix for text_summary(). - * @see https://drupal.org/node/1235062 - * @todo remove once committed to core. - * - * Generate a trimmed, formatted version of a text field value. - * - * If the end of the summary is not indicated using the delimiter - * then we generate the summary automatically, trying to end it at a sensible - * place such as the end of a paragraph, a line break, or the end of a - * sentence (in that order of preference). - * - * @param string $text - * The content for which a summary will be generated. - * @param string $format - * The format of the content. - * If the PHP filter is present and $text contains PHP code, we do not - * split it up to prevent parse errors. - * If the line break filter is present then we treat newlines embedded in - * $text as line breaks. - * If the htmlcorrector filter is present, it will be run on the generated - * summary (if different from the incoming $text). - * @param int $size - * The desired character length of the summary. If omitted, the default - * value will be used. Ignored if the special delimiter is present - * in $text. - * - * @return string - * The generated summary. - */ -function expanding_formatter_text_summary($text, $format = NULL, $size = NULL) { - - if (!isset($size) || $size < 0) { - // Find where the delimiter is in the body. - $delimiter = strpos($text, ''); - - if ($delimiter === FALSE) { - // If there is size and no delimiter, the entire body is the summary. - return $text; - } else { - // If a valid delimiter has been specified, use it to chop off the summary. - return substr($text, 0, $delimiter); - } - - $size = 600; - } - - if ($size == 0) { - // If the size is zero, there is no summary, just the button to open the body. - return ""; - } - - // Retrieve the filters of the specified text format, if any. - if (isset($format)) { - $filters = filter_list_format($format); - } - - // We check for the presence of the PHP evaluator filter in the current - // format. If the body contains PHP code, we do not split it up to prevent - // parse errors. - if (!empty($filters['php_code']->status) && strpos($text, '' => 0); - - // If no complete paragraph then treat line breaks as paragraphs. - $line_breaks = array('
' => 6, '
' => 4); - // Newline only indicates a line break if line break converter - // filter is present. - if (!empty($filters['filter_autop']->status)) { - $line_breaks["\n"] = 1; - } - $break_points[] = $line_breaks; - - // If the first paragraph is too long, split at the end of a sentence. - $break_points[] = array('. ' => 1, '! ' => 1, '? ' => 1, '。' => 0, '؟ ' => 1); - - // Iterate over the groups of break points until a break point is found. - foreach ($break_points as $points) { - // Look for each break point, starting at the end of the summary. - foreach ($points as $point => $offset) { - // The summary is already reversed, but the break point isn't. - $rpos = strpos($reversed, strrev($point)); - if ($rpos !== FALSE) { - $min_rpos = min($rpos + $offset, $min_rpos); - } - } - - // If a break point was found in this group, slice and stop searching. - if ($min_rpos !== $max_rpos) { - // Don't slice with length 0. Length must be <0 to slice from RHS. - $summary = ($min_rpos === 0) ? $summary : substr($summary, 0, 0 - $min_rpos); - break; - } - } - - // If the htmlcorrector filter is present, apply it to the generated summary. - if (!empty($filters['filter_htmlcorrector']->status)) { - $summary = _filter_htmlcorrector($summary); - } - - return $summary; -} diff --git a/js/expanding_formatter.js b/js/expanding_formatter.js index fe97d12..1d4a733 100644 --- a/js/expanding_formatter.js +++ b/js/expanding_formatter.js @@ -1,4 +1,3 @@ -/*global Backdrop:true */ (function ($) { /** @@ -6,217 +5,86 @@ */ Backdrop.behaviors.expandingFormatter = { attach: function (context) { - var $formatters = $(context).find('.expanding-formatter'); - $formatters.once('expanding-formatter', function () { + $('.expanding-formatter:has("> .expanding-formatter-summary")').once('expanding-formatter', function () { var $formatter = $(this).removeClass('expanded collapsed'); var $content = $formatter.find('.expanding-formatter-content'); var $trigger = $formatter.find('.expanding-formatter-trigger a'); var data = $formatter.data(); if (!data.effect) { data.effect = 'normal'; - $content.hide(); - } - else { - // Get normal expanded height. - data.expandedHeight = $formatter.outerHeight(false); - $content.hide(); - data.collapsedHeight = $formatter.outerHeight(false); - $formatter.addClass('collapsed').height(data.collapsedHeight); - $content.removeAttr('style'); - if (!data.css3) { - $content.hide(); - } } + $content.hide(); + $formatter.addClass('collapsed'); data = $.extend({}, data, { $formatter: $formatter, $content: $content, $trigger: $trigger }); - $trigger.bind('click', function () { + $trigger.on('click', function (event) { + event.preventDefault(); data.expanded = $formatter.hasClass('expanded'); - // Non-CSS and CSS effects. - if (typeof Backdrop.expandingFormatterEffects[data.effect] !== 'undefined') { - // Use CSS3 if applicable. - if (data.css3 && typeof Backdrop.expandingFormatterEffects[data.effect + 'Css'] !== 'undefined') { - Backdrop.expandingFormatterEffects[data.effect + 'Css'](data); - } - // Otherwise use non-CSS effect. - else { - Backdrop.expandingFormatterEffects[data.effect](data); - } - } - // CSS3 effects. - else if (data.css3 && typeof Backdrop.expandingFormatterEffects[data.effect + 'Css'] !== 'undefined') { - Backdrop.expandingFormatterEffects[data.effect + 'Css'](data); - } - // Error. - else { - window.alert('Unknown effect: ' + data.effect); - } + // CSS effects. + Backdrop.behaviors.expandingFormatter.expandingFormatterEffects(data); }); }); - } - }; - - /** - * Object used for animation of expanding formatters. - * - * If the effect supports CSS3, it should create an additional method like - * 'effectNameCss3'. - */ - Backdrop.expandingFormatterEffects = Backdrop.expandingFormatter || { - normal: function (data) { - if (data.expanded) { - data.$formatter - .removeClass('expanded') - .addClass('collapsed'); - data.$content.hide(); - } - else { - data.$formatter - .removeClass('collapsed') - .addClass('expanded'); - data.$content.show(); - } - }, - collapseCss: function (data) { - data.$formatter - .removeClass('expanded') - .addClass('collapsed') - .height(data.collapsedHeight) - .trigger('collapsed', [data]); - data.$trigger.text(data.expandedLabel); - }, - expandCss: function (data) { - data.$formatter - .removeClass('collapsed') - .addClass('expanded') - .height(data.expandedHeight) - .trigger('expanded', [data]); - if (data.collapsedLabel) { - data.$trigger.text(data.collapsedLabel); - } - else { - data.$trigger.hide(); - } }, - fade: function (data) { - if (data.$formatter.hasClass('expanded')) { - data.$trigger.fadeOut(data.jsDuration); - data.$content - .css({ - display: 'inline', - opacity: 1 - }) - .animate({ - opacity: 0 - }, data.jsDuration, function () { - data.$content.css({ - display: data.inline ? 'inline-block' : 'block', - height: 0, - overflow: 'hidden', - width: 0 - }); + + expandingFormatterEffects: function (data) { + const effect = data.effect; + const action = data.expanded ? 'collapse' : 'expand'; + switch (effect) { + case 'fade': + data.$formatter.addClass('fading'); + setTimeout(function () { + data.$formatter.removeClass('fading'); + }, 250); + break; + case 'slide': + // Add/remove animation classes to assist with styles. + data.$formatter.addClass('sliding'); + setTimeout(function () { + data.$formatter.removeClass('sliding'); + }, 250); + break; + default: + if (data.expanded) { data.$formatter .removeClass('expanded') - .addClass('collapsed') - .height(data.collapsedHeight) - .trigger('collapsed', [data]) - .find('.expanding-formatter-ellipsis').fadeIn(data.jsDuration); - data.$trigger.text(data.expandedLabel).fadeIn(data.jsDuration); - }); - } - else { - data.$formatter - .removeClass('collapsed') - .addClass('expanded') - .height(data.expandedHeight) - .find('.expanding-formatter-ellipsis').hide(); - data.$trigger.hide(); - if (data.collapsedLabel) { - data.$trigger - .text(data.collapsedLabel) - .fadeIn(data.jsDuration); - } - data.$content - .removeAttr('style') - .css({ - display: data.inline ? 'inline' : 'block', - opacity: 0 - }) - .animate({ - opacity: 1 - }, data.jsDuration, function () { - data.$formatter.trigger('expanded', [data]); - }); - } - }, - fadeCss: function (data) { - data.$formatter.addClass('fading'); - // Collapse. - if (data.expanded) { - setTimeout(function () { - data.$formatter.removeClass('fading'); - Backdrop.expandingFormatterEffects.collapseCss(data); - }, 500); - } - // Expand. - else { - setTimeout(function () { - data.$formatter.removeClass('fading'); - }, 500); - Backdrop.expandingFormatterEffects.expandCss(data); + .addClass('collapsed'); + //data.$content.hide(); + } + else { + data.$formatter + .removeClass('collapsed') + .addClass('expanded'); + //data.$content.show(); + } + break; } - }, - slide: function (data) { - if (data.expanded) { - data.$formatter - .removeClass('expanded') - .addClass('collapsed'); - data.$trigger.text(data.expandedLabel); - data.$formatter.animate({ - height: data.collapsedHeight - }, data.jsDuration, function () { + switch (action) { + case 'collapse': + data.$formatter + .removeClass('expanded') + .addClass('collapsed') + .trigger('collapsed', [data]); + data.$trigger.text(data.expandedLabel); data.$content.hide(); + break; + case 'expand': data.$formatter - .trigger('collapsed', [data]) - .find('.expanding-formatter-ellipsis').show(); - }); - } - else { - data.$formatter - .removeClass('collapsed') - .addClass('expanded') - .find('.expanding-formatter-ellipsis').hide(); - data.$content.show(); - if (data.collapsedLabel) { - data.$trigger.text(data.collapsedLabel); - } - else { - data.$trigger.hide(); - } - data.$formatter.animate({ - height: data.expandedHeight - }, data.jsDuration, function () { - data.$formatter.trigger('expanded', [data]); - }); + .removeClass('collapsed') + .addClass('expanded'); + data.$content.show(); + if (data.collapsedLabel) { + data.$trigger.text(data.collapsedLabel); + } + else { + data.$trigger.hide(); + } + break; } }, - slideCss: function (data) { - // Add/remove animation classes to assist with styles. - data.$formatter.addClass('sliding'); - setTimeout(function () { - data.$formatter.removeClass('sliding'); - }, 500); - // Collapse. - if (data.expanded) { - Backdrop.expandingFormatterEffects.collapseCss(data); - } - // Expand. - else { - Backdrop.expandingFormatterEffects.expandCss(data); - } - } + }; })(jQuery); diff --git a/sass/expanding_formatter.scss b/sass/expanding_formatter.scss deleted file mode 100644 index 9ed7c49..0000000 --- a/sass/expanding_formatter.scss +++ /dev/null @@ -1,99 +0,0 @@ -@import "compass/css3"; - -// Defaults -.expanding-formatter { - overflow: hidden; - position: relative; - - &.expanded .expanding-formatter-ellipsis { - display: none; - } - - // Inline summary/expanded content. - &[data-inline="1"] { - p { - margin: 0 0 1.2em; - } - p:nth-child(2) { - margin-top: 1.2em; - } - p:first-child, - p:last-child { - display: inline; - margin-bottom: 0; - } - .expanding-formatter-summary, - .expanding-formatter-content { - display: inline; - } - .expanding-formatter-trigger { - display: inline-block; - margin-bottom: 5px; - } - } - - // Margin for ellipsis. - .expanding-formatter-ellipsis { - margin-right: .25em; - } - - // CSS3 Enabled - &[data-css3="1"] { - // Collapsed - &.collapsed { - &.sliding .expanding-formatter-ellipsis, - &[data-effect="slide"]:not(.sliding) .expanding-formatter-content { - display: none; - } - .trigger { - display: inline; - } - } - // Slide effect - &[data-effect="slide"] { - @include transition(height 500ms ease); - } - // Fade effect - &[data-effect="fade"] { - .expanding-formatter-content { - @include transition(opacity 500ms ease); - @include opacity(0); - overflow: hidden; - } - .expanding-formatter-trigger { - @include transition(opacity 500ms ease); - @include opacity(0); - } - &.fading .expanding-formatter-trigger { - @include transition(none); - } - &.collapsed { - .expanding-formatter-content { - clip: rect(1px 1px 1px 1px); - clip: rect(1px, 1px, 1px, 1px); - height: 1px; - overflow: hidden; - position: absolute !important; - width: 1px; - } - .expanding-formatter-trigger { - @include opacity(1); - } - &.fading .expanding-formatter-content, - &.fading .expanding-formatter-trigger { - @include opacity(0); - } - } - &.expanded { - .expanding-formatter-content, - .expanding-formatter-trigger { - @include opacity(1); - } - &.fading .expanding-formatter-content, - &.fading .expanding-formatter-trigger { - @include opacity(0); - } - } - } - } -}