floatlabels 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 32f08a1de1dd64bd1426963f84cc78c572601c2b
+  data.tar.gz: 701649ffd871be71e492ef0b76476a671252a675
+SHA512:
+  metadata.gz: bdd44c255f613ea1cc0979beeb3eb4c8dcfe2b99fd9519078a4075bda2497b3b1add9c052ced31b9a134c1dbe2798acd4933d31516c502a9554d6878dfff7cbe
+  data.tar.gz: 7be6b9b2fd6bf8596ec21ffedcc78028e52cbd8b853e447adc639ca918fd59a9be92c86964635276e79ffd6707f1b55406dc26789f3455e69266900f134ec5b0

data/.gitignore

@@ -0,0 +1,9 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in floatlabels.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Matt Cameron
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,92 @@
+# Floatlabels
+
+Sick of boring old labels that take up space and clog up your beautiful websites?
+
+Floatlabels uses floated labels to make your forms look cleaner and smarter. Once a user begins typing, your placeholders automagically turn into labels so the user still has context.
+
+![Demo](demo.gif)
+
+## Installation
+
+Add floatlabels to your application's Gemfile:
+
+    gem 'jquery-rails' # requires jQuery
+    gem 'floatlabels'
+
+Require floatlabels inside your application.js file, after jQuery.
+
+    //= require jquery
+    //= require floatlabels
+
+
+And then execute:
+
+    $ bundle
+
+
+## Usage
+
+Add the class to the inputs you want to float the labels on
+
+    <%= f.text_field :example, placeholder: 'Example Label', class: 'floatlabel' %>
+
+Initialise floatlabels
+
+    $('.floatlabel').floatlabel();
+
+and hey presto, you've got floated labels!
+
+### Options
+
+You can override any of the following default options on initialisation:
+
+    $('.floatlabel').floatlabel({
+      type               : 'inside',   // ('inside' or 'outside')
+      slideInput         : true,
+      labelHiddenTop     : '5px',
+      labelShownTop      : '0px',
+      paddingOffset      : '10px',
+      transitionDuration : 0.1,
+      transitionEasing   : 'ease-in-out',
+      labelClass         : '',
+      typeMatches        : /text|password|email|number|search|url|tel/,
+      focusColor         : '#2996cc',
+      blurColor          : '#9D9D9D',
+      fontWeight         : 'bold',
+      fontSize           : '9px'
+    });
+
+
+You can also use `data-label="Example Label"` to set the label text.
+
+    <%= f.text_field :pirate_name, data: {label: 'Pirate Name'}, class: 'floatlabel form-control' %>
+
+
+#### Types
+
+ I added a quick option to switch between labels inside your text input, and labels above the input.
+
+Using `type: 'outside'` automatically sets the following:
+
+    slideInput    : false,
+    labelShownTop : '-20px',
+    paddingOffset : '0px'
+
+This will overwrite any custom options you have set for these values with the above.
+
+#### More info
+*More documentation can be found at [http://clubdesign.github.io/floatlabels.js](http://clubdesign.github.io/floatlabels.js).*
+
+## Credit
+All credit goes to Marcus Poherely. This is simply a gemified version of his code with some slightly different defaults.
+
+ - URL: http://clubdesign.github.io/floatlabels.js/
+ - Author: Marcus Pohorely ( http://www.clubdesign.at )
+ - Copyright: Copyright 2013 / 2014 http://www.clubdesign.at
+ - Adapted for bootstrap projects by Michael Levin 2/20/14
+ - Slightly modified and gemified by Matt Cameron 15-Mar-2016
+ 
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "floatlabels"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/floatlabels.gemspec

@@ -0,0 +1,24 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'floatlabels/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "floatlabels"
+  spec.version       = Floatlabels::VERSION
+  spec.authors       = ["Matt Cameron"]
+  spec.email         = ["mattlbcameron@gmail.com"]
+
+  spec.summary       = "Easily use floating labels on text inputs."
+  spec.description   = "Automatically use placeholders as a floating label to save space and add context to your forms. Follows the famous Float Label Pattern. Built on jQuery."
+  spec.homepage      = "https://github.com/mattcameron/floatlabels"
+  spec.license       = "MIT"
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.11"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

data/lib/floatlabels.rb

@@ -0,0 +1,6 @@
+require "floatlabels/version"
+
+module Floatlabels
+  class Engine < ::Rails::Engine; end
+
+end

data/lib/floatlabels/version.rb

@@ -0,0 +1,3 @@
+module Floatlabels
+  VERSION = "0.1.0"
+end

data/vendor/assets/javascripts/floatlabels.js

@@ -0,0 +1,186 @@
+/**
+ * FloatLabels
+ * URL: http://clubdesign.github.io/floatlabels.js/
+ * Author: Marcus Pohorely ( http://www.clubdesign.at )
+ * Copyright: Copyright 2013 / 2014 http://www.clubdesign.at
+ *
+ * Adapted for bootstrap projects by Michael Levin 2/20/14
+ *
+ * Slightly modified and gemified by Matt Cameron 15-Mar-2016
+ */
+
+;(function ( $, window, document, undefined ) {
+  var defaults = {
+    type               : 'inside',
+    slideInput         : true,
+    labelHiddenTop     : '5px',
+    labelShownTop      : '0px',
+    paddingOffset      : '10px',
+    transitionDuration : 0.1,
+    transitionEasing   : 'ease-in-out',
+    labelClass         : '',
+    typeMatches        : /text|password|email|number|search|url|tel/,
+    focusColor         : '#2996cc',
+    blurColor          : '#9D9D9D',
+    fontWeight         : 'bold',
+    fontSize           : '9px'
+  };
+
+  function FloatLabel ( element, options ) {
+    this.$element = $(element);
+    this.settings = configureSettings(options);
+    this.init();
+  }
+
+  function configureSettings(options) {
+    settings = $.extend( {}, defaults, options );
+
+    // Overwrite some settings for easy switch to labels above input
+    if (settings.type ==='outside') {
+      settings.slideInput    = false;
+      settings.labelShownTop = '-20px';
+      settings.paddingOffset = '0px';
+    }
+
+    return settings;
+  }
+  
+  FloatLabel.prototype = {
+    init: function () {
+      var self          = this,
+          settings      = this.settings,
+          thisElement   = this.$element,
+          transDuration = settings.transitionDuration,
+          transEasing   = settings.transitionEasing,
+          transFull     = 'all ' + transDuration + 's ' + transEasing,
+          animationCss  = {
+            '-webkit-transition': transFull,
+            '-moz-transition'   : transFull,
+            '-o-transition'     : transFull,
+            '-ms-transition'    : transFull,
+            'transition'        : transFull
+          };
+
+      // Only proceed if element is either an input or textatrea
+      if( thisElement.prop('tagName').toUpperCase() != 'INPUT' &&
+          thisElement.prop('tagName').toUpperCase() != 'TEXTAREA') { return; }
+
+      // Make sure the type is allowed (in options) 
+      if( thisElement.prop('tagName').toUpperCase() === 'INPUT' && !settings.typeMatches.test( thisElement.attr('type') ) ) { return; }
+
+      // Get element ID or randomly create one (for label) 
+      var elementID = thisElement.attr('id');
+      if( !elementID ) {
+        elementID = Math.floor( Math.random() * 100 ) + 1;
+        thisElement.attr('id', elementID);
+      }
+
+      var placeholderText = thisElement.attr('placeholder'),
+          floatingText    = thisElement.data('label'),
+          extraClasses    = thisElement.data('class');
+
+      if( !extraClasses ) { extraClasses = ''; }
+
+      // Friendly reminder
+      if( !placeholderText || placeholderText === '' ) { placeholderText = "You forgot to add placeholder attribute!"; }
+
+      // Use the data attribute if it has been set, otherwise use placeholder
+      if( !floatingText || floatingText === '' ) { floatingText = placeholderText; }
+      
+      thisElement.wrap('<div class="floatlabel-wrapper" style="position:relative"></div>');
+      thisElement.before('<label for="' + elementID + '" class="label-floatlabel ' + settings.labelClass + ' ' + extraClasses + '">' + floatingText + '</label>');
+      this.$label = thisElement.prev('label');
+      this.$label.css({
+        'position'       : 'absolute',
+        'top'            : settings.labelHiddenTop,
+        'left'           : '8px',
+        'display'        : 'none',
+        '-moz-opacity'   : '0',
+        '-khtml-opacity' : '0',
+        '-webkit-opacity': '0',
+        'opacity'        : '0',
+        'font-size'      : self.settings.fontSize,
+        'font-weight'    : self.settings.fontWeight,
+        'color'          : self.settings.blurColor
+      });
+
+      this.inputPaddingTop = parseFloat( thisElement.css('padding-top') ) + parseFloat(settings.paddingOffset);
+
+      if( !settings.slideInput ) {                    
+        thisElement.css('padding-top', this.inputPaddingTop);
+      }
+
+      // Event Handlers
+      thisElement.on('keyup blur change', function( e ) {
+        self.checkValue( e );
+      });
+      thisElement.on('blur', function() { thisElement.prev('label').css({ 'color' : self.settings.blurColor }); });
+      thisElement.on('focus', function() { thisElement.prev('label').css({ 'color' : self.settings.focusColor }); });
+
+      window.setTimeout( function() {
+        self.$label.css( animationCss );
+        self.$element.css( animationCss );
+      }, 100);
+      this.checkValue();
+    },
+    checkValue: function( e ) {
+      if( e ) {
+        var keyCode = e.keyCode || e.which;
+        if( keyCode === 9 ) { return; }                
+      }
+      var thisElement  = this.$element, 
+          currentFlout = thisElement.data('flout');
+      if( thisElement.val() !== "" ) { thisElement.data('flout', '1'); }
+      if( thisElement.val() === "" ) { thisElement.data('flout', '0'); }
+      if( thisElement.data('flout') === '1' && currentFlout !== '1' ) {
+        this.showLabel();
+      }
+      if( thisElement.data('flout') === '0' && currentFlout !== '0' ) {
+        this.hideLabel();
+      }
+    },
+    showLabel: function() {
+      var self = this;
+      self.$label.css({ 'display' : 'block' });
+      window.setTimeout(function() {
+        self.$label.css({
+          'top'            : self.settings.labelShownTop,
+          '-moz-opacity'   : '1',
+          '-khtml-opacity' : '1',
+          '-webkit-opacity': '1',
+          'opacity'        : '1'
+        });
+        if( self.settings.slideInput ) {
+          self.$element.css({ 'padding-top' : self.inputPaddingTop });
+        }
+        self.$element.addClass('active-floatlabel');
+      }, 50);
+    },
+    hideLabel: function() {
+      var self = this;
+      self.$label.css({
+        'top'            : self.settings.labelHiddenTop,
+        '-moz-opacity'   : '0',
+        '-khtml-opacity' : '0',
+        '-webkit-opacity': '0',
+        'opacity'        : '0'
+      });
+      if( self.settings.slideInput ) {
+        var paddingTop = parseFloat( self.inputPaddingTop ) - parseFloat(this.settings.paddingOffset);
+        self.$element.css({ 'padding-top' : paddingTop });
+      }
+      self.$element.removeClass('active-floatlabel');
+      window.setTimeout(function() {
+        self.$label.css({ 'display' : 'none' });
+      }, self.settings.transitionDuration * 1000);
+    }
+  };
+
+  $.fn.floatlabel = function ( options ) {
+    return this.each(function() {
+      if ( !$.data( this, "plugin_floatlabel" ) ) {
+        $.data( this, "plugin_floatlabel", new FloatLabel( this, options ) );
+      }
+    });
+  };
+})( jQuery, window, document );

metadata

@@ -0,0 +1,85 @@
+--- !ruby/object:Gem::Specification
+name: floatlabels
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Matt Cameron
+autorequire: 
+bindir: exe
+cert_chain: []
+date: 2016-05-15 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.11'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.11'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+description: Automatically use placeholders as a floating label to save space and
+  add context to your forms. Follows the famous Float Label Pattern. Built on jQuery.
+email:
+- mattlbcameron@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE.txt
+- README.md
+- Rakefile
+- bin/console
+- bin/setup
+- demo.gif
+- floatlabels.gemspec
+- lib/floatlabels.rb
+- lib/floatlabels/version.rb
+- vendor/assets/javascripts/floatlabels.js
+homepage: https://github.com/mattcameron/floatlabels
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.8
+signing_key: 
+specification_version: 4
+summary: Easily use floating labels on text inputs.
+test_files: []