formikation 0.2.7

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: edc4eedb3b0166f9a04607067c4afea8ca3f912e
+  data.tar.gz: e192581a8ce562cbae4320b0597c6f3d9b4ad797
+SHA512:
+  metadata.gz: 767e10b7bb89eb470d789339fd8aa402ddf931c2bc23270312160d192bb55ca39fee91733d1d0a9f4e5ad983a438db150aa595c42d50f11351b4614b10192dc3
+  data.tar.gz: 9152261f2454c47a844535408911baa5c3063b27e9d38165ee9a3797f83e898ad9bf62abaa915cffedb923c7e83a8e75a1e54887749ea60a9dcf2facbd3a5794

data/.gitignore

@@ -0,0 +1,13 @@
+node_modules
+bower_components
+_site
+.sass-cache
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/CNAME

@@ -0,0 +1 @@
+vortizhe.me

data/Gemfile

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

data/Gulpfile.js

@@ -0,0 +1,122 @@
+(function() {
+  'use strict';
+
+  var gulp        = require('gulp'),
+      connect     = require('gulp-connect'),
+      open        = require('gulp-open'),
+      rename      = require('gulp-rename'),
+      header      = require('gulp-header'),
+      path        = require('path'),
+      uglify      = require('gulp-uglify'),
+      size        = require('gulp-size'),
+      sourcemaps  = require('gulp-sourcemaps'),
+      jshint      = require('gulp-jshint'),
+      stylish     = require('jshint-stylish'),
+      sass        = require('gulp-sass'),
+      paths = {
+        scripts: 'src/*.js',
+        styles: 'src/*.scss',
+        dist: 'dist/',
+        demo: 'demo/',
+        themes: 'src/themes/*.scss'
+      },
+      fk = {
+        pkg: require('./package.json'),
+        date: {
+          year: new Date().getFullYear(),
+          month: ('January February March April May June July August September October November December').split(' ')[new Date().getMonth()],
+          day: new Date().getDate()
+        },
+        banner: [
+          '/*!',
+          ' * Formikation <%= pkg.version %>',
+          ' * <%= pkg.description %>',
+          ' *',
+          ' * <%= pkg.homepage %>',
+          ' *',
+          ' * Copyright <%= date.year %>, <%= pkg.author.name %>. Licensed under <%= pkg.license %>.',
+          ' *',
+          ' * Released on: <%= date.month %> <%= date.day %>, <%= date.year %>',
+          ' */',
+          '',''].join('\n')
+      };
+
+  gulp.task('scripts', function() {
+    gulp.src(paths.scripts)
+        .pipe(header(fk.banner, { pkg: fk.pkg, date: fk.date }))
+        .pipe(gulp.dest(paths.dist))
+        .pipe(jshint())
+        .pipe(jshint.reporter(stylish));
+  });
+
+  gulp.task('styles', function() {
+    gulp.src(paths.styles)
+        .pipe(header(fk.banner, { pkg: fk.pkg, date: fk.date }))
+        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
+        .pipe(gulp.dest(paths.dist));
+
+
+    gulp.src(paths.themes)
+        .pipe(header(fk.banner, { pkg: fk.pkg, date: fk.date }))
+        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
+        .pipe(gulp.dest(paths.dist + 'themes/'));
+
+  });
+
+  gulp.task('update_gem_version', function () {
+    require('fs').writeFileSync('lib/Formikation/version.rb', "module Formikation\n  VERSION = \""+fk.pkg.version+"\"\nend");
+  });
+
+  gulp.task('build', function () {
+    gulp.src(paths.scripts)
+        .pipe(header(fk.banner, { pkg: fk.pkg, date: fk.date }))
+        .pipe(size({title: 'Formikation scripts'}))
+        .pipe(jshint())
+        .pipe(jshint.reporter(stylish))
+        .pipe(sourcemaps.init())
+        .pipe(uglify({
+          preserveComments: 'some',
+          mangle: true,
+          compress: {
+            sequences: true,
+            dead_code: true,
+            conditionals: true,
+            booleans: true,
+            unused: true,
+            if_return: true,
+            join_vars: true
+          }
+        }))
+        .pipe(size({title: 'Formikation minified scripts' }))
+        .pipe(sourcemaps.write('./maps'))
+        .pipe(rename({ suffix: '.min' }))
+        .pipe(gulp.dest(paths.dist));
+
+    gulp.src(paths.styles)
+        .pipe(header(fk.banner, { pkg: fk.pkg, date: fk.date }))
+        .pipe(sass({outputStyle: 'compact'}))
+        .pipe(rename({ suffix: '.min'}))
+        .pipe(gulp.dest(paths.dist));
+  });
+
+  gulp.task('watch', function () {
+      gulp.watch(paths.scripts, [ 'scripts' ]);
+      gulp.watch([paths.styles, paths.themes], [ 'styles' ]);
+  });
+
+  gulp.task('connect', function () {
+      return connect.server({
+          root: './',
+          port:'3000'
+      });
+  });
+
+  gulp.task('open', function () {
+    return gulp.src(paths.demo + 'index.html').pipe(open({ uri: 'http://localhost:3000/' + paths.demo + 'index.html'}));
+  });
+  gulp.task('dist', ['styles', 'scripts', 'build', 'update_gem_version']);
+
+  gulp.task('server', ['watch', 'connect', 'open']);
+
+  gulp.task('default', ['server']);
+})();

data/LICENSE.txt

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Victor Ortiz
+
+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,90 @@
+# Formikation
+
+[![GitHub version](https://badge.fury.io/gh/vortizhe%2Fformikation.svg)](https://badge.fury.io/gh/vortizhe%2Fformikation)
+
+### Simple form beautifier
+
+*Formikation* is a simple jQuery plugin to beautify form inputs with some css.
+
+The elements to work with are:
+
+`input:checkbox`
+
+`input:radiobutton`
+
+`input:file`
+
+`select`
+
+### Demo
+
+Take a look to [online demo](http://vortizhe.me/formikation/examples.html), there are some examples with diferent themes.
+
+## HTML Requisites
+
+The only html requisite is to style radiobuttons and checkboxes. Them must be wrapped by a `label`
+
+```html
+<label>
+  <input type="checkbox" name="check" id="check">
+  Checkbox label
+</label>
+
+<label>
+  <input type="radio" name="radio" id="radio">
+  Radio label
+</label>
+```
+
+## Utility CSS
+
+Formikation comes with a utility CSS that includes the neccessary CSS styles to work, without any visual styles on it. To add the utility CSS styles, add the `.formikation` class to yout form element this way:
+
+```html
+    <form action="/" class="formikation" >
+    ...
+```
+
+## Themes
+
+The visual styling of the formikation elements comes in an independet stylesheet, to keep separated the visual representation from the _utility_ classes. Two themes are included in the repository `.fk-theme-default` and `.fk-theme-switches`.
+
+Include the `.fk-theme-default` class on the parent element along the base `.formikation` class, this way:
+
+```html
+    <form action="/" class="formikation fk-theme-default" >
+    ...
+```
+
+If you want to develop your own theme, take a look to `src/themes/fk-theme-default.scss` and use it as base to do your own customization.
+
+
+## Initialization
+
+Call Formikation jQuery plugin on ready function:
+
+```js
+$(function() {
+
+  $('form.formikation').find('select, input:file, input:checkbox, input:radio').formikation();
+
+});
+```
+
+## Update elements with JS
+
+If you need to update any formikation element with js, it’s necessary to trigger formikation.update event to get UI change reflected.
+```js
+// Active a checkbox
+$('.form-element').prop('checked', true).trigger('formikation.update');
+```
+
+## IE8
+
+IE8 has some dificults on repainting `:before` and `:after` pseudo-elements after change checkbox or radiobuttons status.
+
+Is simple to fix it, just change pseudo-element content from `''` to `' '` _(this fix is applied on default theme)_.
+
+## Changelog
+
+* 0.2.6 (2016/05/XX) Added .fk-is-placeholder to select option without value

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

data/demo/index.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Formikation default theme sample.</title>
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"/>
+  <link rel="stylesheet" href="../dist/formikation.css"/>
+  <link rel="stylesheet" href="../dist/themes/fk-theme-default.css"/>
+  <link rel="stylesheet" href="../dist/themes/fk-theme-switches.css"/>
+  <style media="screen">
+    body {
+      padding: 0 20px;
+    }
+    *, *:after, *:before {
+      -webkit-box-sizing: border-box;
+         -moz-box-sizing: border-box;
+              box-sizing: border-box;
+    }
+    .row {
+      margin: 1em 0;
+    }
+    form {
+      width: 50%;
+      float: left;
+      padding-right: 20px;
+    }
+    .formikation label {
+      margin: 0 0 1em;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>Formikation demo</h1>
+  <form  action="./" class="formikation fk-theme-default">
+    <h2>Default theme</h2>
+    <div class="row">
+      <label for="example-select">Select example</label>
+      <select id="example-select" name="example-select">
+        <option>Select an option</option>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+        <option value="4">Option 4</option>
+        <option value="5">Option 5</option>
+        <option value="6">Option 6</option>
+      </select>
+    </div>
+    <div class="row">
+      <label for="example-select">Select with blank option example</label>
+      <select id="example-select" name="example-select">
+        <option value="">&nbsp;</option>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+      </select>
+    </div>
+
+    <div class="row">
+      <label for="example-select-disabled">Select disabled example</label>
+      <select id="example-select-disabled" name="example-select-disabled" disabled>
+        <option>Select an option</option>
+        <option value="1">Option 1</option>
+        <option value="2">Option 2</option>
+        <option value="3">Option 3</option>
+        <option value="4">Option 4</option>
+        <option value="5">Option 5</option>
+        <option value="6">Option 6</option>
+      </select>
+    </div>
+
+    <div class="row">
+      <label for="example-file-input">File input example</label>
+      <input type="file" name="example-file-input" id="example-file-input" data-text="Select file...">
+    </div>
+
+    <div class="row">
+      <label for="example-file-input">File input disabled example</label>
+      <input type="file" name="example-file-input" id="example-file-input" data-text="Select file disabled..." disabled>
+    </div>
+
+    <div class="row">
+      <label>
+        <input type="radio" name="example-radios" value="1">
+        Radio example
+      </label>
+      <label>
+        <input type="radio" name="example-radios" value="2" checked="checked">
+        Radio checked
+      </label>
+      <label>
+        <input type="radio" name="example-radios" value="3" disabled>
+        Radio disabled
+      </label>
+    </div>
+
+    <div class="row">
+      <label>
+        <input name="example-checkbox-1" type="checkbox" value="1">
+        Checkbox example
+      </label>
+      <label>
+        <input name="example-checkbox-2" type="checkbox" value="2" checked="checked">
+        Checkbox checked
+      </label>
+      <label>
+        <input name="example-checkbox-3" type="checkbox" value="3" disabled>
+        Checkbox disabled
+      </label>
+    </div>
+
+    <div class="fk-theme-switches">
+      <h2>Switches radio and checkboxes theme</h2>
+      <div class="row">
+        <label>
+          <input type="radio" name="example-radios-2" value="1">
+          Radio example
+        </label>
+        <label>
+          <input type="radio" name="example-radios-2" value="2" checked="checked">
+          Radio checked
+        </label>
+        <label>
+          <input type="radio" name="example-radios-2" value="3" disabled>
+          Radio disabled
+        </label>
+      </div>
+
+      <div class="row">
+        <label>
+          <input name="example-checkbox-1" type="checkbox" value="1">
+          Checkbox example
+        </label>
+        <label>
+          <input name="example-checkbox-2" type="checkbox" value="2" checked="checked">
+          Checkbox checked
+        </label>
+        <label>
+          <input name="example-checkbox-3" type="checkbox" value="3" disabled>
+          Checkbox disabled
+        </label>
+      </div>
+    </div>
+  </form>
+
+  <form action="./" class="formikation">
+    <h2>Only functional styles</h2>
+    <div class="row">
+      <label for="example-select">Select example</label>
+      <select id="example-select" name="example-select">
+        <option value="1">Select an option</option>
+        <option value="2">Option 1</option>
+        <option value="3">Option 2</option>
+        <option value="4">Option 3</option>
+        <option value="5">Option 4</option>
+        <option value="6">Option 5</option>
+        <option value="7">Option 6</option>
+      </select>
+    </div>
+    <div class="row">
+      <label for="example-select">Select with blank option example</label>
+      <select id="example-select" name="example-select">
+        <option value="1"></option>
+        <option value="2">Option 1</option>
+        <option value="3">Option 2</option>
+        <option value="4">Option 3</option>
+      </select>
+    </div>
+
+    <div class="row">
+      <label for="example-select-disabled">Select disabled example</label>
+      <select id="example-select-disabled" name="example-select-disabled" disabled>
+        <option value="1">Select an option</option>
+        <option value="2">Option 1</option>
+        <option value="3">Option 2</option>
+        <option value="4">Option 3</option>
+        <option value="5">Option 4</option>
+        <option value="6">Option 5</option>
+        <option value="7">Option 6</option>
+      </select>
+    </div>
+
+    <div class="row">
+      <label for="example-file-input">File input example</label>
+      <input type="file" name="example-file-input" id="example-file-input" data-text="Select file...">
+    </div>
+
+    <div class="row">
+      <label for="example-file-input">File input disabled example</label>
+      <input type="file" name="example-file-input" id="example-file-input" data-text="Select file disabled..." disabled>
+    </div>
+
+    <div class="row">
+      <label>
+        <input type="radio" name="example-radios-3" value="1">
+        Radio example
+      </label>
+      <label>
+        <input type="radio" name="example-radios-3" value="2" checked="checked">
+        Radio checked
+      </label>
+      <label>
+        <input type="radio" name="example-radios-3" value="3" disabled>
+        Radio disabled
+      </label>
+    </div>
+
+    <div class="row">
+      <label>
+        <input name="example-checkbox-1" type="checkbox" value="1">
+        Checkbox example
+      </label>
+      <label>
+        <input name="example-checkbox-2" type="checkbox" value="2" checked="checked">
+        Checkbox checked
+      </label>
+      <label>
+        <input name="example-checkbox-3" type="checkbox" value="3" disabled>
+        Checkbox disabled
+      </label>
+    </div>
+  </form>
+
+
+  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
+  <script src="../src/formikation.js"></script>
+  <script src="./ready.js"></script>
+</body>
+</html>