Skip to content

Instantly share code, notes, and snippets.

@kodie
Created July 28, 2023 15:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kodie/5eaca00f6cac5b6928dfcb877cd04d89 to your computer and use it in GitHub Desktop.
Save kodie/5eaca00f6cac5b6928dfcb877cd04d89 to your computer and use it in GitHub Desktop.
A wrap text jQuery plugin - Originally created by the good people over at PSD2HTML.com - Simply here so we can pull the code in remotely
/*
* jQuery wrap text plugin
*/
;(function($) {
function WrapText(options) {
this.options = $.extend({
holder: '.wrap-text',
wrapBefore: '<span>',
wrapAfter: '</span>',
wrapTag: 'span',
styleClass: 'line',
style: {
width: 'auto'
}
}, options);
this.init();
}
WrapText.prototype = {
init: function() {
if (this.options.holder) {
this.findElements();
this.attachEvents();
}
},
findElements: function() {
this.holder = $(this.options.holder);
},
attachEvents: function() {
var self = this;
this.afterLoad();
$(window).on('resize orientationchange', function() {
self.afterResize();
});
},
afterLoad: function() {
var self = this;
this.holder.html(function(i, f) {
return f.replace(/(\S+\s*)/g, self.options.wrapBefore + '$1' + self.options.wrapAfter);
});
this.searchLine();
},
afterResize: function() {
this.removeStyle();
this.holder.text(this.holder.find(this.options.wrapTag).text());
this.afterLoad();
},
searchLine: function() {
var self = this;
var curPt = 0;
var pt = 0;
var num = 0;
var allWords = this.holder.find(this.options.wrapTag);
this.lines = {};
allWords.each(function(i, el) {
curPt = $(el).offset().top;
if (curPt > pt) {
pt = curPt;
self.lines[num = num + 1] = [];
}
if( self.lines[num] ) {
self.lines[num].push(el);
}
});
this.addSpan();
},
addSpan: function() {
var self = this;
var content = '';
$.each(this.lines, function(i, line) {
for (var j = 0; j < line.length; j++) {
line[j] = $(line[j]).clone().html().replace(self.options.wrapBefore, '').replace(self.options.wrapAfter, '');
}
content += self.options.wrapBefore + line.join(' ') + self.options.wrapAfter;
});
this.holder.css(self.options.style).html(content).find(self.options.wrapTag).addClass(self.options.styleClass);
if (this.holder.hasClass('has-icon')) {
$('<i class="img-icon"></i>').appendTo(this.holder.find('.' + self.options.styleClass).last());
}
},
removeStyle: function() {
this.holder.removeAttr('style');
}
};
// jquery plugin
$.fn.wrapText = function(opt) {
return this.each(function() {
$(this).data('WrapText', new WrapText($.extend({
holder: this
}, opt)));
});
};
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment