Add Destroy Method?

[ktryndchrs]

Hello there!

I wanted to be able to destroy fitText.js in certain case but instead of asking you to do it, I created another code and I think it might be useful for you or other people

(function($) {
  var resizer = function (el) {
    var $this = el.data.this
    var settings = el.data.settings
    $this.css('font-size', Math.max(Math.min($this.width() / (settings.compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
  };

  var methods = {
    init: function(options) {
      return this.each(function() {
        var $this = $(this);
        var settings = $this.data('fitText');

        if(typeof(settings) == 'undefined') {

          var defaults = { 
            'compressor'  : 1,
            'minFontSize' : Number.NEGATIVE_INFINITY,
            'maxFontSize' : Number.POSITIVE_INFINITY
          }

          settings = $.extend({}, defaults, options);

          $this.data('fitText', settings);
        } else {
          settings = $.extend({}, settings, options);
        }

        var identifier = 'fittext-'+Date.now()
        $(this).addClass(identifier).data('fittextId', "."+identifier)

        $(window).on('resize.'+identifier ,  function(){
          $this.css('font-size', Math.max(Math.min($this.width() / (settings.compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
        }).resize();

      });
    },
    destroy: function(options) {
      return $(this).each(function() {
        var $this = $(this);
        $(window).off( $this.data('fittextId') );
        $this.removeData('fitText').css({fontSize: ""});
      });
    },

  };

  $.fn.fitText = function() {
    var method = arguments[0];

    if(methods[method]) {
      method = methods[method];
      arguments = Array.prototype.slice.call(arguments, 1);
    } else if( typeof(method) == 'object' || !method ) {
      method = methods.init;
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.fitText' );
      return this;
    }

    return method.apply(this, arguments);

  }

})(jQuery);

Then in the html It work that way:

$("#element").fitTextt({ 
      'compressor'  : 1.6,
       'minFontSize' : "18px",
      'maxFontSize' : "48px",
})

$("#element").fitTextt("destroy")

cheers, Catherine

[davatron5000]

Thanks for the suggestion! We just added two namedspaced resize methods resize.fittext orientationchange.fittext, and I wonder if they fit into this. It could be "destroyed" with 2 lines of jQuery.

$(window).off('resize.fittext orientationchange.fittext');
$('.myElems').css('font-size', '');

I guess I'm waffling on whether it makes sense to add a method to core or if it makes more sense to document the hack to turn it off. I'm going to leave this open for awhile and if people really want the "Destroy" feature, they can :thumbsup: it if they're interested. Sound good?

[wlanni]

I was just looking for a feature to destroy. I'll try implementing this, but, yes, thumbs up.

[davebeesleyarchived]

@davatron5000's destroy method works perfectly for me :) Thanks folks

[mindfullsilence]

Works like a charm for removing fittext on certain screen sizes.

[ktryndchrs]

I'm happy people like it! :)

[seavor]

I came up with an alternative fix, playing off of the original namespaced resize event. Humbly, it's a much simpler alteration than Katryn's impressive rewrite. Changes to code as follows:

Add an ID property to the SETTINGS objects (default to global)

settings = $.extend({
          'minFontSize' : Number.NEGATIVE_INFINITY,
          'maxFontSize' : Number.POSITIVE_INFINITY,
          'id' : 'global'
}, options);

Extend the namespaced resizer event to include the ID

$(window).on('resize.fittext.' + settings.id + ' orientationchange.fittext.' + settings.id, resizer);

Optionally pass an ID with your invoked fitText function

$('#example).fitText(3, { minFontSize: '10px', maxFontSize: '20px', id: 'example' });

When you want to destroy a certain invocation, you apply Davatron's hack, but with the included namespace you wish to destroy (or global if you wish to destroy all non-namespaced invocations)

$(window).off('resize.fittext.example orientationchange.fittext.example');
$('#example').css('font-size', '');

[ktryndchrs]

Neat! :+1:

[WisdomSky]

Here's my leaner version to @ktryndchrs's solution:

(function( $ ){

  $.fn.fitText = function( kompressor, options ) {

    if (kompressor === 'destroy') {
        $(window).off('resize.fittext orientationchange.fittext', $(this).css('fontSize', '').data('fittext.resizer'));
        return this;
    }

    // Setup options
    var compressor = kompressor || 1,
        settings = $.extend({
          'minFontSize' : Number.NEGATIVE_INFINITY,
          'maxFontSize' : Number.POSITIVE_INFINITY
        }, options);

    return this.each(function(){

      // Store the object
      var $this = $(this);

      // Resizer() resizes items based on the object width divided by the compressor * 10
        $(this).data('fittext.resizer', function () {
            $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)));
        });

      // Call once to set.
        $(this).data('fittext.resizer').call(this);

      // Call on resize. Opera debounces their resize by default.
      $(window).on('resize.fittext orientationchange.fittext', $(this).data('fittext.resizer'));

    });
    return this;
  };

})( jQuery );

then just call $(element).fitText('destroy')