Add truncate component (#32)

* Add truncate component

Author: luca-rath

.gitignore

@@ -14,5 +14,6 @@ Thumbs.db
 # NPM
 /node_modules
 yarn-error.log
+yarn.lock
 
 !**/.gitkeep

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes
 
+## unreleased
+
+ - FEATURE: Added truncate component. #32
+
 ## 1.4.1
 
  - FEATURE: Added return of instance in startComponent. #30

scss/tools/_media.scss

@@ -187,4 +187,3 @@ $media-breakpoints: $breakpoints !default;
         }
     }
 }
-

src/components/truncate.js

@@ -0,0 +1,71 @@
+// Truncate text component module
+
+'use strict';
+
+var $ = require('jquery');
+var debounce = require('../services/debounce');
+
+module.exports = function Truncate() {
+    var truncate = {};
+
+    /**
+     * @example
+     * <div id="truncate" style="overflow: hidden; line-height: 20px; max-height: 60px;">
+     *    Lorem ipsum ...
+     * </div>
+     *
+     * import truncate from 'massive-web/src/components/truncate';
+     * truncate.initialize($('#truncate'), {});
+     *
+     * @param {jQuery} $el
+     * @param {object} options
+     */
+    truncate.initialize = function initialize($el, options) {
+        truncate.$el = $el;
+
+        // Set default options if no custom options are defined
+        truncate.separator = options.separator || ' ...';
+        truncate.debounceDelay = options.debounceDelay || 250;
+
+        truncate.text = truncate.$el.text().trim();
+        truncate.$inner = $('<span></span>').text(truncate.text).css('display', 'block');
+        truncate.$el.html(truncate.$inner).css('display', 'block');
+
+        truncate.calculateRegex();
+        truncate.calculateText();
+
+        $(window).on('resize', debounce(truncate.calculateText, truncate.debounceDelay));
+    };
+
+    /**
+     * Calculate regex based on the separator.
+     */
+    truncate.calculateRegex = function calculateRegex() {
+        var separatorRegex = truncate.separator.split('').map(c => '\\' + c).join('');
+        truncate.regex = new RegExp('\\W*\\s?(?:\\S*|\\S*' + separatorRegex + ')$');
+    };
+
+    /**
+     * Calculate output text based on the element's height.
+     */
+    truncate.calculateText = function calculateText() {
+        var height;
+
+        truncate.$inner.text(truncate.text);
+        height = truncate.$el.height();
+
+        while (truncate.$inner.outerHeight() > height) {
+            truncate.$inner.text(function(index, text) {
+                if (text === truncate.separator) {
+                    return '';
+                }
+
+                return text.replace(truncate.regex, truncate.separator);
+            });
+        }
+    };
+
+    return {
+        initialize: truncate.initialize
+    };
+};

src/services/debounce.js

@@ -0,0 +1,30 @@
+// Debounce function
+
+'use strict';
+
+/**
+ * Extracted from UnderscoreJS
+ *
+ * @ignore
+ */
+module.exports = function debounce(func, wait, immediate) {
+    var timeout;
+
+    return function() {
+        var context = this;
+        var args = arguments;
+
+        clearTimeout(timeout);
+        timeout = setTimeout(function() {
+            timeout = null;
+
+            if (!immediate) {
+                func.apply(context, args);
+            }
+        }, wait);
+
+        if (immediate && !timeout) {
+            func.apply(context, args);
+        }
+    };
+};