aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--library/readmore.js/README.md171
-rw-r--r--library/readmore.js/readmore.js319
-rw-r--r--view/js/main.js10
-rw-r--r--view/php/theme_init.php2
4 files changed, 495 insertions, 7 deletions
diff --git a/library/readmore.js/README.md b/library/readmore.js/README.md
new file mode 100644
index 000000000..0116fbe8b
--- /dev/null
+++ b/library/readmore.js/README.md
@@ -0,0 +1,171 @@
+# Readmore.js
+
+A smooth, responsive jQuery plugin for collapsing and expanding long blocks of text with "Read more" and "Close" links.
+
+The markup Readmore.js requires is so simple, you can probably use it with your existing HTML—there's no need for complicated sets of `div`'s or hardcoded classes, just call `.readmore()` on the element containing your block of text and Readmore.js takes care of the rest. Readmore.js plays well in a responsive environment, too.
+
+Readmore.js is tested with—and supported on—all versions of jQuery greater than 1.9.1. All the "good" browsers are supported, as well as IE10+; IE8 & 9 _should_ work, but are not supported and the experience will not be ideal.
+
+
+## Install
+
+Install Readmore.js with Bower:
+
+```
+$ bower install readmore
+```
+
+Then include it in your HTML:
+
+```html
+<script src="/bower_components/readmore/readmore.min.js"></script>
+```
+
+
+## Use
+
+```javascript
+$('article').readmore();
+```
+
+It's that simple. You can change the speed of the animation, the height of the collapsed block, and the open and close elements.
+
+```javascript
+$('article').readmore({
+ speed: 75,
+ lessLink: '<a href="#">Read less</a>'
+});
+```
+
+### The options:
+
+* `speed: 100` in milliseconds
+* `collapsedHeight: 200` in pixels
+* `heightMargin: 16` in pixels, avoids collapsing blocks that are only slightly larger than `collapsedHeight`
+* `moreLink: '<a href="#">Read more</a>'`
+* `lessLink: '<a href="#">Close</a>'`
+* `embedCSS: true` insert required CSS dynamically, set this to `false` if you include the necessary CSS in a stylesheet
+* `blockCSS: 'display: block; width: 100%;'` sets the styling of the blocks, ignored if `embedCSS` is `false`
+* `startOpen: false` do not immediately truncate, start in the fully opened position
+* `beforeToggle: function() {}` called after a more or less link is clicked, but *before* the block is collapsed or expanded
+* `afterToggle: function() {}` called *after* the block is collapsed or expanded
+
+If the element has a `max-height` CSS property, Readmore.js will use that value rather than the value of the `collapsedHeight` option.
+
+### The callbacks:
+
+The callback functions, `beforeToggle` and `afterToggle`, both receive the same arguments: `trigger`, `element`, and `expanded`.
+
+* `trigger`: the "Read more" or "Close" element that was clicked
+* `element`: the block that is being collapsed or expanded
+* `expanded`: Boolean; `true` means the block is expanded
+
+#### Callback example:
+
+Here's an example of how you could use the `afterToggle` callback to scroll back to the top of a block when the "Close" link is clicked.
+
+```javascript
+$('article').readmore({
+ afterToggle: function(trigger, element, expanded) {
+ if(! expanded) { // The "Close" link was clicked
+ $('html, body').animate( { scrollTop: element.offset().top }, {duration: 100 } );
+ }
+ }
+});
+```
+
+### Removing Readmore:
+
+You can remove the Readmore.js functionality like so:
+
+```javascript
+$('article').readmore('destroy');
+```
+
+Or, you can be more surgical by specifying a particular element:
+
+```javascript
+$('article:first').readmore('destroy');
+```
+
+### Toggling blocks programmatically:
+
+You can toggle a block from code:
+
+```javascript
+$('article:nth-of-type(3)').readmore('toggle');
+```
+
+
+## CSS:
+
+Readmore.js is designed to use CSS for as much functionality as possible: collapsed height can be set in CSS with the `max-height` property; "collapsing" is achieved by setting `overflow: hidden` on the containing block and changing the `height` property; and, finally, the expanding/collapsing animation is done with CSS3 transitions.
+
+By default, Readmore.js inserts the following CSS, in addition to some transition-related rules:
+
+```css
+selector + [data-readmore-toggle], selector[data-readmore] {
+ display: block;
+ width: 100%;
+}
+```
+
+_`selector` would be the element you invoked `readmore()` on, e.g.: `$('selector').readmore()`_
+
+You can override the base rules when you set up Readmore.js like so:
+
+```javascript
+$('article').readmore({blockCSS: 'display: inline-block; width: 50%;'});
+```
+
+If you want to include the necessary styling in your site's stylesheet, you can disable the dynamic embedding by setting `embedCSS` to `false`:
+
+```javascript
+$('article').readmore({embedCSS: false});
+```
+
+### Media queries and other CSS tricks:
+
+If you wanted to set a `maxHeight` based on lines, you could do so in CSS with something like:
+
+```css
+body {
+ font: 16px/1.5 sans-serif;
+}
+
+/* Show only 4 lines in smaller screens */
+article {
+ max-height: 6em; /* (4 * 1.5 = 6) */
+}
+```
+
+Then, with a media query you could change the number of lines shown, like so:
+
+```css
+/* Show 8 lines on larger screens */
+@media screen and (min-width: 640px) {
+ article {
+ max-height: 12em;
+ }
+}
+```
+
+
+## Contributing
+
+Pull requests are always welcome, but not all suggested features will get merged. Feel free to contact me if you have an idea for a feature.
+
+Pull requests should include the minified script and this readme and the demo HTML should be updated with descriptions of your new feature.
+
+You'll need NPM:
+
+```
+$ npm install
+```
+
+Which will install the necessary development dependencies. Then, to build the minified script:
+
+```
+$ gulp compress
+```
+
diff --git a/library/readmore.js/readmore.js b/library/readmore.js/readmore.js
new file mode 100644
index 000000000..81cfb3cea
--- /dev/null
+++ b/library/readmore.js/readmore.js
@@ -0,0 +1,319 @@
+/*!
+ * @preserve
+ *
+ * Readmore.js jQuery plugin
+ * Author: @jed_foster
+ * Project home: http://jedfoster.github.io/Readmore.js
+ * Licensed under the MIT license
+ *
+ * Debounce function from http://davidwalsh.name/javascript-debounce-function
+ */
+
+/* global jQuery */
+
+(function($) {
+ 'use strict';
+
+ var readmore = 'readmore',
+ defaults = {
+ speed: 100,
+ collapsedHeight: 200,
+ heightMargin: 16,
+ moreLink: '<a href="#">Read More</a>',
+ lessLink: '<a href="#">Close</a>',
+ embedCSS: true,
+ blockCSS: 'display: block; width: 100%;',
+ startOpen: false,
+
+ // callbacks
+ beforeToggle: function(){},
+ afterToggle: function(){}
+ },
+ cssEmbedded = {},
+ uniqueIdCounter = 0;
+
+ function debounce(func, wait, immediate) {
+ var timeout;
+
+ return function() {
+ var context = this, args = arguments;
+ var later = function() {
+ timeout = null;
+ if (! immediate) {
+ func.apply(context, args);
+ }
+ };
+ var callNow = immediate && !timeout;
+
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+
+ if (callNow) {
+ func.apply(context, args);
+ }
+ };
+ }
+
+ function uniqueId(prefix) {
+ var id = ++uniqueIdCounter;
+
+ return String(prefix == null ? 'rmjs-' : prefix) + id;
+ }
+
+ function setBoxHeights(element) {
+ var el = element.clone().css({
+ height: 'auto',
+ width: element.width(),
+ maxHeight: 'none',
+ overflow: 'hidden'
+ }).insertAfter(element),
+ expandedHeight = el.outerHeight(),
+ cssMaxHeight = parseInt(el.css({maxHeight: ''}).css('max-height').replace(/[^-\d\.]/g, ''), 10),
+ defaultHeight = element.data('defaultHeight');
+
+ el.remove();
+
+ var collapsedHeight = element.data('collapsedHeight') || defaultHeight;
+
+ if (!cssMaxHeight) {
+ collapsedHeight = defaultHeight;
+ }
+ else if (cssMaxHeight > collapsedHeight) {
+ collapsedHeight = cssMaxHeight;
+ }
+
+ // Store our measurements.
+ element.data({
+ expandedHeight: expandedHeight,
+ maxHeight: cssMaxHeight,
+ collapsedHeight: collapsedHeight
+ })
+ // and disable any `max-height` property set in CSS
+ .css({
+ maxHeight: 'none'
+ });
+ }
+
+ var resizeBoxes = debounce(function() {
+ $('[data-readmore]').each(function() {
+ var current = $(this),
+ isExpanded = (current.attr('aria-expanded') === 'true');
+
+ setBoxHeights(current);
+
+ current.css({
+ height: current.data( (isExpanded ? 'expandedHeight' : 'collapsedHeight') )
+ });
+ });
+ }, 100);
+
+ function embedCSS(options) {
+ if (! cssEmbedded[options.selector]) {
+ var styles = ' ';
+
+ if (options.embedCSS && options.blockCSS !== '') {
+ styles += options.selector + ' + [data-readmore-toggle], ' +
+ options.selector + '[data-readmore]{' +
+ options.blockCSS +
+ '}';
+ }
+
+ // Include the transition CSS even if embedCSS is false
+ styles += options.selector + '[data-readmore]{' +
+ 'transition: height ' + options.speed + 'ms;' +
+ 'overflow: hidden;' +
+ '}';
+
+ (function(d, u) {
+ var css = d.createElement('style');
+ css.type = 'text/css';
+
+ if (css.styleSheet) {
+ css.styleSheet.cssText = u;
+ }
+ else {
+ css.appendChild(d.createTextNode(u));
+ }
+
+ d.getElementsByTagName('head')[0].appendChild(css);
+ }(document, styles));
+
+ cssEmbedded[options.selector] = true;
+ }
+ }
+
+ function Readmore(element, options) {
+ var $this = this;
+
+ this.element = element;
+
+ this.options = $.extend({}, defaults, options);
+
+ $(this.element).data({
+ defaultHeight: this.options.collapsedHeight,
+ heightMargin: this.options.heightMargin
+ });
+
+ embedCSS(this.options);
+
+ this._defaults = defaults;
+ this._name = readmore;
+
+ window.addEventListener('load', function() {
+ $this.init();
+ });
+ }
+
+
+ Readmore.prototype = {
+ init: function() {
+ var $this = this;
+
+ $(this.element).each(function() {
+ var current = $(this);
+
+ setBoxHeights(current);
+
+ var collapsedHeight = current.data('collapsedHeight'),
+ heightMargin = current.data('heightMargin');
+
+ if (current.outerHeight(true) <= collapsedHeight + heightMargin) {
+ // The block is shorter than the limit, so there's no need to truncate it.
+ return true;
+ }
+ else {
+ var id = current.attr('id') || uniqueId(),
+ useLink = $this.options.startOpen ? $this.options.lessLink : $this.options.moreLink;
+
+ current.attr({
+ 'data-readmore': '',
+ 'aria-expanded': false,
+ 'id': id
+ });
+
+ current.after($(useLink)
+ .on('click', function(event) { $this.toggle(this, current[0], event); })
+ .attr({
+ 'data-readmore-toggle': '',
+ 'aria-controls': id
+ }));
+
+ if (! $this.options.startOpen) {
+ current.css({
+ height: collapsedHeight
+ });
+ }
+ }
+ });
+
+ window.addEventListener('resize', function() {
+ resizeBoxes();
+ });
+ },
+
+ toggle: function(trigger, element, event) {
+ if (event) {
+ event.preventDefault();
+ }
+
+ if (! trigger) {
+ trigger = $('[aria-controls="' + this.element.id + '"]')[0];
+ }
+
+ if (! element) {
+ element = this.element;
+ }
+
+ var $this = this,
+ $element = $(element),
+ newHeight = '',
+ newLink = '',
+ expanded = false,
+ collapsedHeight = $element.data('collapsedHeight');
+
+ if ($element.height() <= collapsedHeight) {
+ newHeight = $element.data('expandedHeight') + 'px';
+ newLink = 'lessLink';
+ expanded = true;
+ }
+ else {
+ newHeight = collapsedHeight;
+ newLink = 'moreLink';
+ }
+
+ // Fire beforeToggle callback
+ // Since we determined the new "expanded" state above we're now out of sync
+ // with our true current state, so we need to flip the value of `expanded`
+ $this.options.beforeToggle(trigger, element, ! expanded);
+
+ $element.css({'height': newHeight});
+
+ // Fire afterToggle callback
+ $element.on('transitionend', function() {
+ $this.options.afterToggle(trigger, element, expanded);
+
+ $(this).attr({
+ 'aria-expanded': expanded
+ }).off('transitionend');
+ });
+
+ $(trigger).replaceWith($($this.options[newLink])
+ .on('click', function(event) { $this.toggle(this, element, event); })
+ .attr({
+ 'data-readmore-toggle': '',
+ 'aria-controls': $element.attr('id')
+ }));
+ },
+
+ destroy: function() {
+ $(this.element).each(function() {
+ var current = $(this);
+
+ current.attr({
+ 'data-readmore': null,
+ 'aria-expanded': null
+ })
+ .css({
+ maxHeight: '',
+ height: ''
+ })
+ .next('[data-readmore-toggle]')
+ .remove();
+
+ current.removeData();
+ });
+ }
+ };
+
+
+ $.fn.readmore = function(options) {
+ var args = arguments,
+ selector = this.selector;
+
+ options = options || {};
+
+ if (typeof options === 'object') {
+ return this.each(function() {
+ if ($.data(this, 'plugin_' + readmore)) {
+ var instance = $.data(this, 'plugin_' + readmore);
+ instance.destroy.apply(instance);
+ }
+
+ options.selector = selector;
+
+ $.data(this, 'plugin_' + readmore, new Readmore(this, options));
+ });
+ }
+ else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
+ return this.each(function () {
+ var instance = $.data(this, 'plugin_' + readmore);
+ if (instance instanceof Readmore && typeof instance[options] === 'function') {
+ instance[options].apply(instance, Array.prototype.slice.call(args, 1));
+ }
+ });
+ }
+ };
+
+})(jQuery);
+
+
diff --git a/view/js/main.js b/view/js/main.js
index 8c48bbb72..80518768e 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -596,12 +596,10 @@ function updateConvItems(mode,data) {
function collapseHeight() {
$(".wall-item-body, .contact-info").each(function() {
- if($(this).height() > divmore_height + 10) {
- if(! $(this).hasClass('divmore')) {
- $(this).divgrow({ initialHeight: divmore_height, moreText: aStr['divgrowmore'], lessText: aStr['divgrowless'], showBrackets: false });
- $(this).addClass('divmore');
- }
- }
+ if(! $(this).hasClass('divmore')) {
+ $(this).readmore({collapsedHeight: divmore_height, moreLink: '<a href="#">'+aStr['divgrowmore']+'</a>', lessLink: '<a href="#">'+aStr['divgrowless']+'</a>'});
+ $(this).addClass('divmore');
+ }
});
}
diff --git a/view/php/theme_init.php b/view/php/theme_init.php
index 33b7e87dc..9a545470f 100644
--- a/view/php/theme_init.php
+++ b/view/php/theme_init.php
@@ -25,7 +25,7 @@ head_add_js('autocomplete.js');
head_add_js('library/jquery-textcomplete/jquery.textcomplete.js');
head_add_js('library/fancybox/jquery.fancybox-1.3.4.js');
head_add_js('library/jquery.timeago.js');
-head_add_js('library/jquery.divgrow/jquery.divgrow-1.3.1.js');
+head_add_js('library/readmore.js/readmore.js');
head_add_js('library/jquery_ac/friendica.complete.js');
head_add_js('library/tiptip/jquery.tipTip.minified.js');
head_add_js('library/jgrowl/jquery.jgrowl_minimized.js');
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-25 21:02:33 +0000