Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- new DottedText('.category-description p', {
- rows : 2,
- showMoreText: 'Mehr anzeigen',
- showLessText: 'Show Less'
- });
- var DottedText = function(selector, options) {
- this.$element = $(selector);
- this.options = options;
- this.text = this.$element.text();
- this.initialize();
- }
- DottedText.prototype.initialize = function() {
- this.assingDynamicVars();
- this.assignEvents();
- if (this.shouldLimit) {
- this.limitRows(0);
- }
- }
- DottedText.prototype.assingDynamicVars = function() {
- this.elementLineHeight = parseInt(this.$element.css('line-height'));
- this.shouldLimit = this.$element.outerHeight() / this.elementLineHeight > this.options.rows;
- }
- DottedText.prototype.limitRows = function(i) {
- this.updateHTML(i);
- if (this.$element.outerHeight() / this.elementLineHeight > this.options.rows) {
- this.updateHTML(--i);
- return;
- }
- return this.limitRows(++i);
- }
- DottedText.prototype.updateHTML = function(i) {
- this
- .$element
- .html(this.text.slice(0, i) + '... ' + '<span class="expand">' + this.options.showMoreText + '</span>');
- }
- DottedText.prototype.assignEvents = function() {
- var _this = this;
- $(window).on('resize', function() {
- _this
- .$element
- .html(_this.text);
- _this.assingDynamicVars();
- if (_this.shouldLimit) {
- _this.limitRows(0);
- }
- });
- _this
- .$element
- .on('click', '.expand', function() {
- _this
- .$element
- .html(_this.text + ' <span class="collapse">' + _this.options.showLessText + '</span>');
- })
- .on('click', '.collapse', function() {
- _this.limitRows(0);
- });
- }
Add Comment
Please, Sign In to add comment