richardvenneman / floatl Goto Github PK

In my case I use jQuery as well but it is not necessary.

function initializeFloatl(root) {
  root = root || document;
  var $root = $(root);

  var elements;
  if ($root.hasClass('floatl')) {
    elements = $root;
  } else {
    elements = $root.find('.floatl');
  }

  elements.each(function (i, el) {
    var element = $(el);

    if (element.data('floatl-initialized')) return;
    element.data('floatl-initialized', true);

    element.find('label').addClass('floatl__label');
    element.find('input,textarea').addClass('floatl__input');

    new Floatl(element);
  });
};

  .directive('ngFloatl', function () {
    return {
      link: function (scope, elem, attrs, ctrl) {
        angular.element(elem).addClass('floatl');
        console.log(elem);
        initializeFloatl(elem);
      }
    }
  })

<div ng-floatl>
  <label>First name</label>
  <input placeholder="First name" type="text" />
</div>

Would it be possible to add an option to change the class names of the elements? For projects that don't use the CSS BEM method for naming classes but something else it can be very odd.

Hey!

https://github.com/richardvenneman/floatl/blob/master/src/js/utils.js#L24

We have an ASP.NET application where this variable is assigned to global scope and prevents minification.
I can submit pull-request if you want.

If there is no "floatl__label" or "floatl__input" class on the elements, JS throws "Uncaught TypeError: Cannot read property 'addEventListener' of undefined"

http://codepen.io/leptest/pen/QKrjJY

Hi, I just published a VueJS integration of your floatl lib here.

Can you please mention it on your README or wiki ?
if it can help.

Thanks for your lib

Ben.

First, thanks for your work :)

I'm curious about the reason you added your own utilities instead of using classList that is quite well supported now.

Is there a way to use floatl with select elements?

The example provided within the README.md file does not associate the label element with a particular input element, preventing assistive technologies from being able to describe form elements to their users. Suggest updating the following example in the README.md:

<div class="floatl">
  <label class="floatl__label" for="firstName">First name</label>
  <input class="floatl__input" placeholder="First name" type="text" id="firstName">
</div>

It's probably worthwhile to test this library as well with the following pattern, which is common and removed the need for the for attribute:

<div class="floatl">
  <label class="floatl__label">First name
    <input class="floatl__input" placeholder="First name" type="text">
  </label>
</div>

In an effort to minimise dependencies I'd like to remove Gulp, as it is currently the only hard dependency of this component. It seems like npm scripts are the way to go.

Some ideas:

• Replace gulp-sass with node-sass
• Replace gulp-autoprefixer with postcss-cli and autoprefixer
• Replace gulp-uglify with webpack.optimize.UglifyJsPlugin
• Replace gulp-sourcemaps with source-map-loader?

When you double click in an input field and choose a suggested value instead of typing the floating label stay hidden until the field lost focus.

It would make sense to show the label right after the completion of the field.