FitText.js 1.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. /*
  2. ---
  3. script: FitText.js
  4. description: Truncates the text nodes of elements to fit inside a container
  5. license: MIT-style license.
  6. authors: Ryan Florence <http://ryanflorence.com>
  7. docs: http://moodocs.net/rpflo/mootools-rpflo/FitText
  8. requires:
  9. - Core/Element
  10. - Core/Options
  11. - Core/Events
  12. - Core/Array.each
  13. provides: [FitText]
  14. ...
  15. */
  16. var FitText = new Class({
  17. Implements: Options,
  18. options: {
  19. offset: 10,
  20. fitClass: 'truncated'
  21. },
  22. initialize: function(container, elements, options){
  23. this.setOptions(options);
  24. this.container = document.id(container);
  25. this.elements = $$(elements);
  26. this.bound = this.fit.bind(this);
  27. this.elements.each(function(element){
  28. element.store('scrollWidth',element.getSize().x).store('text',element.get('text')).store('FitText', this);
  29. }, this);
  30. this.attach();
  31. this.fit();
  32. },
  33. fit: function(){
  34. var contentWidth = this.container.getSize().x-this.options.offset;
  35. this.elements.each(function(element,index){
  36. var scrollWidth = element.retrieve('scrollWidth');
  37. var text = element.retrieve('text');
  38. if(scrollWidth > contentWidth){
  39. element.addClass(this.options.fitClass);
  40. var length = ((text.length*(contentWidth/scrollWidth))/2).round();
  41. var truncatedText = text.substr(0,length) + '...' + text.substr(-length+6);
  42. element.set('text',truncatedText);
  43. } else if(element.hasClass(this.options.fitClass)){
  44. element.removeClass(this.options.fitClass);
  45. element.set('text',text);
  46. }
  47. }, this);
  48. return this;
  49. },
  50. attach: function(){
  51. window.addEvent('resize',this.bound);
  52. return this;
  53. },
  54. detach: function(){
  55. window.removeEvent('resize',this.bound);
  56. return this;
  57. },
  58. reset: function(){
  59. this.elements.each(function(element){
  60. element.removeClass(this.options.fitClass).set('text',element.retrieve('text'));
  61. }.bind(this));
  62. return this;
  63. }
  64. });