Month: October 2012

by

Architecture Open Space 2012, 9.+10. Nov, Ratingen, Germany

The last Architecture Open Spaces were great. Really great! (2009, 2010)

Now it’s time again. Trust me, you can’t spend your days better. (at least in the context of continuous improvement!)

Have a look at Architecture.Openspace 2012 (German)…

Topics I’m interested in discussing (and partially have solutions for):

  • Distributed Systems Design
  • Transactions? Really?
  • Consistency?
  • Search
  • Messaging / NServiceBus
  • Alternative Data Storage / Raven DB
  • Developer Setup, Build, Versioning, Deployment, Hosting
  • Composite Distributed Web Applications

Would be great to see you there. Speaking german is not really a requirement; I guess english should be fine for all software architects.

Advertisement
by

KnockoutJS Binding Handler: autosizing input fields

If you use KnockoutJS and want your input-fields to automatically grow and shrink with the input, use this custom handler.

Usage

<input 
  type="text" 
  data-bind="autosize: {
    maxWidth: 500, 
    minWidth: 100, 
    comfortZone: 15
}"/>

Code

Original code from javascript – Is there a jQuery autogrow plugin for text fields?

ko.bindingHandlers.autosize = {
   init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        var o = $.extend({
           maxWidth: 1000,
           minWidth: 0,
           comfortZone: 70
       }, valueAccessor());
        var minWidth = o.minWidth || $(element).width(),
           val = '',
           input = $(element),
           testSubject = $('<tester/>').css({
               position: 'absolute',
               top: -9999,
               left: -9999,
               width: 'auto',
               fontSize: input.css('fontSize'),
               fontFamily: input.css('fontFamily'),
               fontWeight: input.css('fontWeight'),
               letterSpacing: input.css('letterSpacing'),
               whiteSpace: 'nowrap'
           }),
           check = function() {
                if (val === (val = input.val())) {
                   return;
               }
                // Enter new content into testSubject
               var escaped = val.replace(/&/g, '&amp;').replace(/\s/g, ' ').replace(/</g, '&lt;').replace(/>/g, '&gt;');
               testSubject.html(escaped);
                // Calculate new width + whether to change
               var testerWidth = testSubject.width(),
                   newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
                   currentWidth = input.width(),
                   isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth)
                       || (newWidth > minWidth && newWidth < o.maxWidth);
                // Animate width
               if (isValidWidthChange) {
                   input.width(newWidth);
               }
            };
        testSubject.insertAfter(element);
        ko.utils.registerEventHandler(element, 'keyup keydown blur update', check);
    }
    };