polymer-rails-forms 0.1.12 → 0.1.13

data/assets/rails-forms/rails-form-validators.html

@@ -0,0 +1,106 @@
+<script>
+	var Validation = {
+		errors: {},
+
+		addValidation: function(type, input){
+			//TODO should validate everything
+		    if (this.structure[this.key].required){
+		        input.addEventListener("change", function(){
+		          this.validate(this.structure[this.key].type, input);
+		        }.bind(this), false)
+		    } else if (!!this.structure[this.key].validates){
+		    	input.addEventListener("change", function(){
+		    		this[this.structure[this.key].validates](type, input)
+		    	}.bind(this), false)
+		    }
+		},
+
+		invalidate: function(type, input, isInvalid){
+			var parent = this.findParent(input, 'gc-input-decorator'),
+				wrapper = this.findParent(input, '.input-wrapper'),
+				group = this.findParent(input, '.list-group'),
+				form = this.shadowRoot.querySelector("form");
+			
+			if (!!parent) parent.isInvalid = isInvalid;
+			if (isInvalid){
+				this.errors[input.id] = "ERROR!!!!!!!!!"
+				if (!!wrapper) this.addClass(wrapper, "is-invalid");
+				if (!!group) this.addClass(group, "is-invalid");
+			} else {
+				delete this.errors[input.id];
+				if (!!wrapper) this.removeClass(wrapper, 'is-invalid');
+				if (!!group) this.removeClass(group, "is-invalid");
+			}
+
+			if (Object.keys(this.errors).length === 0){
+				if (!!form) this.removeClass(form, 'has-errors')
+			} else {
+				if (!!form) this.addClass(form, 'has-errors')
+			}
+		},
+
+		validate: function(type, input, required, invalidate){
+			required = required || input.required;
+			invalidate = invalidate || true;
+
+			var validators = {
+				string: function(){
+		        	return !(required && input.value.replace(/(^ *| *$)/g, "").length > 0);
+		        },
+
+		        email: function(){
+		         	return !(required && /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(input.value))
+		        },
+
+		        hidden: function(){
+					return false;		          
+		        }.bind(this),
+
+		        json: function(){
+		         	return false
+		        }.bind(this),
+
+		        password: function(){
+		        	return !(required && input.value.length > 0);
+		        }.bind(this),
+
+		        integer: function(){
+		        	console.log("checking integer", isNaN(input.value))
+		         	return !(required && !isNaN(input.value))
+		        }.bind(this),
+
+		        url: function(){
+		          return !(required && /^(ht|f)tps?:\/\/[a-z0-9-\.]+\.[a-z]{2,4}\/?([^\s<>\#%"\,\{\}\\|\\\^\[\]`]+)?$/.test(input.value))
+		        }.bind(this),
+
+		        textarea: function(){
+		        	return !(required && input.value.replace(/(^ *| *$)/g, "").length > 0);
+		        }.bind(this),
+
+		        checkbox: function(){
+		        	return false
+		        }.bind(this),
+
+		        date: function(){
+		         	return false
+		        }.bind(this),
+
+		        location: function(){
+		         	return false
+		        }.bind(this),
+
+		        image: function(){
+		        	return !(required && input.value.length > 0)
+		        }.bind(this)
+			}
+
+			var isInvalid = (!!validators[type] && validators[type]())
+			
+			if (invalidate){
+				this.invalidate(type, input, isInvalid);
+			}
+
+			return isInvalid;
+		}
+	}
+</script>

data/assets/rails-forms/rails-form.html

@@ -0,0 +1,288 @@
+<link rel="import" href="rails-form-helpers.html" >
+<link rel="import" href="rails-form-validators.html" >
+<link rel="import" href="gc-paper-decorator.html" >
+<link rel="import" href="../paper-button/paper-button.html" >
+<link rel="import" href="../core-icons/image-icons.html" >
+<link rel="import" href="../core-ajax/core-xhr.html" >
+
+<script src='pikaday.js'></script>
+
+<polymer-element name="rails-form">
+  <template>
+    <link rel='stylesheet' href='pikaday.css'> 
+    <style>
+      paper-button {
+        font-size: 14px;
+      }
+
+      paper-button core-icon {
+        margin-right: 5px;
+        color: #5bc0de;
+      }
+      
+      #submit-button {
+        margin-top: 15px;
+        padding-left: 30px;
+        padding-right: 30px;
+        background-color: #5bc0de;
+        border-color: #46b8da;
+        color: white;
+      }
+
+      gc-input-decorator {
+        text-align: left !important;
+      }
+
+      gc-input-decorator .label {
+        text-align: left !important;
+      }
+
+      .btn-image-upload {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        height: 59px;
+        display: table;
+      }
+
+      .btn-image-upload core-icon {
+        height: 105px;
+        width: 105px;
+        margin: 0 auto;
+        display: block;
+        color: #666;
+      }
+
+      .btn-image-upload input[type=file] {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        font-size: 999px;
+        text-align: right;
+        filter: alpha(opacity=0);
+        opacity: 0;
+        outline: none;
+        background: white;
+        cursor: inherit;
+        display: block;
+      }
+
+      .list-group {
+        width: 100%;
+        box-sizing: border-box;
+        display: block;
+        padding: 9px 0px 0px 10px;
+        font-size: 14px;
+      }
+
+      .list-group .list-item {
+        width: 100%;
+      }
+
+      .list-group .list-item .list-item-display {
+        border-bottom: solid 1px;
+        display: flex;
+        flex-direction: row;
+      }
+
+      .list-group .list-item .list-item-display div {
+        flex: 1;
+        cursor: pointer;
+      }
+
+      .list-wrapper {
+        overflow: auto;
+        font-size: 0px; 
+        padding-top: 10px;
+        min-height: 55px;
+      }
+
+      .list-wrapper .list {
+        overflow: auto;
+        position: relative;
+        float: right;
+        box-sizing: border-box;
+        width: 72%;
+        max-height: 81px;
+      }
+
+      .list-wrapper h4 {
+        padding: 10px 15px;
+        float: left;
+        box-sizing: border-box;
+        width: 25%;
+        margin: 0;
+        font-weight: 500;
+        font-size: 14px;
+      }
+
+      .list-group .list-item {
+        display: block;
+        list-style-type: none;
+        margin: 0;
+        padding: 0 15px;
+        box-sizing: border-box;
+      }
+
+      .list-group .list-form {
+        display: none;
+      }
+
+      .list-group.focused .list-item, .list-group.is-invalid .list-item, .list-group.is-blank .list-item {
+        display: none;
+      }
+
+      .list-group.focused .list-form, .list-group.is-invalid .list-form, .list-group.is-blank .list-form {
+        display: block;
+      }
+
+      paper-checkbox input[type=checkbox] {
+        display: none;
+      }
+
+    </style>
+    <!-- TODO: structures should be arrays to preserve order -->
+    <form id="rails_form" _action="{{ action }}" method="{{ method }}" enctype="multipart/form-data">
+      <template bind="{{ data as data }}">
+        <template bind="{{ structure as structure }}" bind="{{ scope as scope }}" id="form-group">
+          <template repeat="{{ key in structure | getKeys }}">
+            <div class='{{ structure[key] | wrapperClass }} {{ key }} {{ structure[key] | isHidden }}'>
+              <template if="{{ structure[key] | isNest }}">
+                <template if="{{ structure[key].allowAdd }}">
+                  <paper-button class='{{ key | scopeToClass }}' on-click="{{ addItem }}"><core-icon icon="add-circle-outline"></core-icon>{{ structure[key].label }}</paper-button>
+                </template>
+                <template if="{{ structure[key] | isMultiple }}">
+                  <template if="{{ !structure[key].allowAdd }}">
+                    <template repeat="{{ item in data | scopeNestData(key) | enumerate }}">
+                      <template ref="form-group" bind="{{ structure[key].structure as structure }}" parentContext="{{ key | updateParentContext }}" scope="{{ scope | updateScope(key) | addIndex(item) }}" data="{{ data | scopeDataToIndex(item) }}"></template>
+                    </template>
+                  </template>
+
+                  <template if='{{ structure[key].allowAdd }}'>
+                    <template bind="{{ data as data }}">
+                      <div class='list'>
+                        <template repeat="{{ item in data | scopeNestData(key) | enumerate }}">
+                          <div class='list-group {{ item | isEmpty }}'>
+                            <div class='list-item {{ item | listItemClassName }}'>
+                              {{ item | createListItem }}
+                            </div>
+                            <div class='list-form {{ item | listItemClassName }}'>
+                              <template ref="form-group" bind="{{ structure[key].structure as structure }}" parentContext="{{ key | updateParentContext }}" scope="{{ scope | updateScope(key) | addIndex(item) }}" data="{{ data | scopeDataToIndex(item) }}"></template>
+                            </div>
+                          </div>
+                        </template>
+                      </div>
+                    </template>
+                  </template>
+                </template>
+
+                <template if="{{ structure[key] | isNotMultiple }}">
+                  <template bind="{{ context as context }}">
+                    <template ref="form-group" bind="{{ structure[key].structure as structure }}" parentContext="{{ key | updateParentContext }}" scope="{{ scope | updateScope(key) }}" data="{{ data | scopeNestData(key) }}"></template>
+                  </template>
+                </template>
+              </template>
+              
+              <template if="{{ structure[key] | isField }}">
+                <template bind="{{ data as data }}">
+                  <div class="input {{ key | scopeToClass }}" scope="{{ data | scopeFieldData(key) }}">
+                    {{ structure[key] | createInput }}
+                  </div>
+                </template>
+              </template>
+            </div>
+          </template>
+        </template>
+      </template>
+      <div class='sumbit-button-wrapper'>
+        <paper-button id='submit-button' raised>{{ submitText }}</paper-button>
+        <template if="{{ xhr }}">
+          <core-xhr id='xhr'></core-xhr>
+        </template>
+      </div>
+    </form>
+  </template>
+  <script>
+    /*
+      Default Structure Item: {
+        type: "string",
+        label: "",
+        options: {
+          floatingLabel: true,
+          unscoped: false,
+          events: {}
+        },
+        attributes: {
+
+        }
+      }
+    */
+
+    Polymer( Polymer.mixin ({
+      publish: {
+        scope: "",
+        action: "",
+        method: "POST",
+        structure: null,
+        data: null,
+        submitText: "Submit",
+        xhr: false,
+        onSubmit: null
+      },
+
+      parentContext: null,
+      parentStructure: null,
+      parentData: null,
+
+      toArray: function(str){
+        return [str];
+      },
+
+      created: function(){
+        this.structure = {};
+        this.data = {};
+        this.inputList = [];
+      },
+
+      handleXhrCallback: function(){
+
+      },
+
+      domReady: function(){
+        var form = this.shadowRoot.querySelector("form"),
+            button = this.shadowRoot.querySelector("paper-button");
+        
+        button.addEventListener("click", function(e){
+          if (this.action !== null){
+            if (this.xhr){
+              this.$.xhr.request({ method: this.method, url: this.action, params: this.data, callback: this.handleXhrCallback })
+            } else {
+              form.submit();
+            }
+          }
+        }.bind(this), false)
+
+        this.appendInputs();
+
+        var inputObserver = new ArrayObserver(this.inputList);
+            inputObserver.open(function(splices){
+              this.appendInputs();
+            }.bind(this))
+
+        form.addEventListener("change", function(e){
+          var group = this.findParent(e.target, ".list-group")
+          if (!!group){
+            this.checkForBlank(group);
+          }
+        }.bind(this), true)
+
+      },
+
+      get getData() {
+        return this.data;
+      }
+    }, FormHelpers, Validation));
+  </script>
+</polymer-element>

data/lib/polymer_rails_forms/railtie.rb

@@ -0,0 +1,11 @@
+require 'polymer-rails-forms'
+require 'rails'
+module PolymerRailsForms
+  class Railtie < Rails::Railtie
+    railtie_name :polymer_rails_forms
+
+    rake_tasks do
+      load "tasks/install.rake"
+    end
+  end
+end

data/lib/tasks/install.rake

@@ -0,0 +1,6 @@
+namespace :polymer_rails_forms do
+  	desc 'Installs the polymer rails-forms element to vendor/assets/components/rails-forms'
+	task :install do
+	  cp_r "#{File.dirname(__FILE__)}/../../assets/rails-forms/.", "#{Dir.pwd}/vendor/assets/components/rails-forms"
+	end
+end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: polymer-rails-forms
 version: !ruby/object:Gem::Version
-  version: 0.1.12
+  version: 0.1.13
 platform: ruby
 authors:
 - Joel Weber
@@ -31,7 +31,17 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- LICENSE
+- README.md
+- assets/rails-forms/gc-paper-decorator.html
+- assets/rails-forms/pikaday.css
+- assets/rails-forms/pikaday.js
+- assets/rails-forms/rails-form-helpers.html
+- assets/rails-forms/rails-form-validators.html
+- assets/rails-forms/rails-form.html
 - lib/polymer-rails-forms.rb
+- lib/polymer_rails_forms/railtie.rb
+- lib/tasks/install.rake
 homepage: https://github.com/gearcommons/polymer-rails-forms
 licenses:
 - MIT